/* assets/css/style.css */
/* Dead Honest by Cleo — Brand stylesheet. See ../../BRAND_KIT.md for tokens reference. */

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

:root {
  --black: #0d0d0d;
  --dark: #111111;
  --dark2: #161616;
  --gold: #b8982a;
  --gold-light: #c9a94a;
  --gold-pale: #d4b86a;
  --white: #f5f0ea;
  --white-dim: rgba(245,240,234,0.75);
  --white-muted: rgba(245,240,234,0.5);
  --border: rgba(184,152,42,0.25);
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 450;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* TYPOGRAPHY */
.display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1.05;
}
.display-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  line-height: 1.05;
  color: var(--gold-pale);
}
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.divider-left {
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

/* LAYOUT */
section { padding: 90px 32px; }
.container { max-width: 680px; margin: 0 auto; }
.container-wide { max-width: 780px; margin: 0 auto; }
.text-center { text-align: center; }

/* BUTTONS */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn:hover::after { left: 125%; }
.btn {
  display: block;
  width: 100%;
  padding: 22px 32px;
  background: var(--gold);
  color: var(--black);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.btn:hover { background: var(--gold-pale); }

/* STICKY MOBILE CTA */
#sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: 14px 16px;
  background: rgba(13,13,13,0.92);
  border-top: 3px solid var(--border);
  backdrop-filter: blur(6px);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
#sticky-cta.visible { transform: translateY(0); }
#sticky-cta .btn { padding: 16px 24px; }

/* CARDS */
.card {
  border: 3px solid var(--border);
  padding: 32px 28px;
  margin-bottom: 16px;
}
.card p {
  font-size: 0.95rem;
  color: var(--white-dim);
  text-align: center;
  line-height: 1.85;
}

/* IMAGES */
.img-real {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* ===== HERO ===== */
#hero {
  min-height: auto;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 32px 60px;
}
#hero .eyebrow { margin-bottom: 16px; }
#hero h1 { font-size: clamp(72px, 18vw, 120px); line-height: 0.9; }
#hero h1 .line1 { display: block; color: var(--white); font-family: 'Cormorant Garamond', serif; font-weight: 300; }
#hero h1 .line2 { display: block; color: var(--gold-pale); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; }
#hero .by { margin-top: 36px; font-size: var(--text-2xs); letter-spacing: 0.25em; text-transform: uppercase; color: var(--white-muted); }

/* ===== HERO IMAGE ===== */
#hero-image { padding: 0; }

/* ===== FOR THE MAN ===== */
#for-the-man { background: var(--black); }
#for-the-man h2 { font-size: clamp(40px, 10vw, 68px); margin-bottom: 28px; }
#for-the-man .divider { margin: 16px auto; }
#for-the-man p { font-size: 0.95rem; color: var(--white-dim); text-align: center; margin-bottom: 20px; }
#for-the-man .eyebrow.text-center { display: block; }
#for-the-man .yourself {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(40px, 10vw, 64px);
  color: var(--gold-pale);
  text-align: center;
  margin: 28px 0;
}

/* ===== YOU KNOW THE FEELING ===== */
#feeling { background: var(--dark); }
#feeling h2 { font-size: clamp(36px, 9vw, 60px); margin-bottom: 28px; }
#feeling .divider { margin: 16px auto; }

/* ===== QUOTE ===== */
#quote { background: var(--black); }
#quote .eyebrow { margin-bottom: 16px; }
#quote h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(36px, 9vw, 58px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 28px;
}
#quote .divider { margin: 16px auto; }
#quote p { font-size: 0.95rem; color: var(--white-dim); text-align: center; margin-bottom: 20px; }
#quote .btn-wrap { margin-top: 40px; }

/* ===== WHAT THIS IS ===== */
#what-this-is { background: var(--dark); }
#what-this-is .eyebrow { margin-bottom: 16px; }
#what-this-is h2 { font-size: clamp(36px, 9vw, 60px); margin-bottom: 10px; }
#what-this-is .divider { margin: 16px auto; }
#what-this-is p { font-size: 0.95rem; color: var(--white-dim); text-align: center; margin-bottom: 20px; }
#what-this-is .gold-italic { color: var(--gold-pale); font-style: italic; }

/* ===== YOU ARRIVE AS ===== */
#you-arrive { background: var(--black); }
#you-arrive .eyebrow { margin-bottom: 12px; text-align: center; }
#you-arrive .divider { margin: 12px auto 20px; }

/* ===== WHAT CHANGES ===== */
#what-changes { background: var(--dark); }
#what-changes .eyebrow { margin-bottom: 12px; text-align: center; }
#what-changes .divider { margin: 12px auto 20px; }

/* ===== WHAT THIS IS NOT ===== */
#not { background: var(--black); }
#not .eyebrow { text-align: center; margin-bottom: 18px; }
#not .grid {
  /* A 2-column grid forces every cell in a column to match that column's widest item —
     "Therapy" was stuck in a cell sized for "Another Framework to Optimise" since they
     shared a column. Flex-wrap sizes each item to its own text instead. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 40px;
}
#not .grid-item {
  border: 3px solid var(--border);
  padding: 20px 16px;
  text-align: center;
  font-size: var(--text-2xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white-muted);
}
#not p { font-size: 0.95rem; color: var(--white-dim); text-align: center; margin-bottom: 32px; }

/* ===== LOCATION ===== */
#location { background: var(--dark); }
#location .eyebrow { margin-bottom: 16px; }
#location h2 { font-size: clamp(36px, 9vw, 60px); margin-bottom: 10px; }
#location p { font-size: 0.95rem; color: var(--white-dim); text-align: center; margin-bottom: 20px; }
#location .divider { margin: 16px auto; }
#location .specs { margin-top: 40px; }
#location .spec {
  padding: 24px 0;
  border-top: 3px solid var(--border);
  text-align: center;
}
#location .spec:last-child { border-bottom: 3px solid var(--border); }
#location .spec .label { font-size: var(--text-2xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
#location .spec .value { font-size: 1rem; color: var(--white); }

/* ===== SHAPE OF WEEK ===== */
#shape { background: var(--black); }
#shape .eyebrow { margin-bottom: 16px; }
#shape h2 { font-size: clamp(32px, 8vw, 52px); margin-bottom: 8px; }
#shape .divider { margin: 16px auto; }
#shape .day {
  padding: 32px 0;
  border-top: 3px solid var(--border);
}
#shape .day:last-child { border-bottom: 3px solid var(--border); }
#shape .day-label { font-size: var(--text-2xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
#shape .day-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 2rem;
  color: var(--gold-pale);
  margin-bottom: 12px;
}
#shape .day p { font-size: 0.9rem; color: var(--white-dim); margin-bottom: 10px; }

/* ===== WHAT'S INCLUDED ===== */
#included { background: var(--dark); }
#included .eyebrow { margin-bottom: 16px; }
#included h2 { font-size: clamp(32px, 8vw, 52px); margin-bottom: 8px; }
#included .divider { margin: 16px auto; }
#included .item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-top: 3px solid var(--border);
  font-size: 0.95rem;
  color: var(--white-dim);
}
#included .item:last-child { border-bottom: 3px solid var(--border); }
#included .star { color: var(--gold); font-size: 0.75rem; margin-top: 4px; flex-shrink: 0; }

/* ===== WHO BUILT THIS ===== */
#who-built { background: var(--black); }
#who-built .eyebrow { text-align: center; margin-bottom: 18px; }
#who-built .person-card {
  border: 3px solid var(--border);
  overflow: hidden;
  margin-bottom: 32px;
}
#who-built .person-card img { width: 100%; display: block; object-fit: cover; }
#who-built .person-info { padding: 28px; text-align: center; }
#who-built .person-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 6px;
}
#who-built .person-role {
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
#who-built .person-bio { font-size: 0.9rem; color: var(--white-dim); line-height: 1.85; margin-bottom: 14px; }
#who-built .person-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold-pale);
  margin-top: 20px;
}

/* ===== ROOM HOLDERS ===== */
#room-holders { background: var(--dark); }
#room-holders .eyebrow { margin-bottom: 16px; }
#room-holders h2 { font-size: clamp(32px, 8vw, 52px); margin-bottom: 8px; }
#room-holders .group-photo { margin: 40px -32px 0; }
#room-holders .group-photo img { width: 100%; display: block; }

/* ===== GUEST SPEAKERS ===== */
#speakers { background: var(--black); }
#speakers .eyebrow { text-align: center; margin-bottom: 18px; }

/* ===== SOCIAL PROOF ===== */
#social { background: var(--dark); }
#social .eyebrow { margin-bottom: 16px; }
#social h2 { font-size: clamp(32px, 8vw, 52px); margin-bottom: 8px; }
#social .divider { margin: 16px auto; }
#social .testimonial {
  border: 3px solid var(--border);
  padding: 36px 28px;
  margin-bottom: 16px;
}
#social .testimonial .quote-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--white-dim);
  line-height: 1.85;
  margin-bottom: 20px;
}
#social .testimonial .attr {
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ===== FAQ ===== */
#faq { background: var(--black); }
#faq .eyebrow { margin-bottom: 16px; }
#faq h2 { font-size: clamp(32px, 8vw, 52px); margin-bottom: 8px; }
#faq .divider { margin: 16px auto 28px; }
#faq .faq-item { padding: 28px 0; border-top: 3px solid var(--border); }
#faq .faq-item:last-child { border-bottom: 3px solid var(--border); }
#faq .faq-q {
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
#faq .faq-a { font-size: 0.95rem; color: var(--white-dim); line-height: 1.8; }

/* ===== INVITATION ===== */
#invitation { background: var(--dark); }
#invitation .eyebrow { margin-bottom: 16px; }
#invitation h2 { font-size: clamp(36px, 9vw, 60px); margin-bottom: 8px; }
#invitation .divider { margin: 16px auto; }
#invitation p { font-size: 0.95rem; color: var(--white-dim); text-align: center; margin-bottom: 20px; }
#invitation .btn-wrap { margin-top: 40px; }

/* ===== FOOTER ===== */
footer {
  background: var(--black);
  padding: 60px 32px;
  text-align: center;
  border-top: 3px solid var(--border);
}
footer .logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 8px;
}
footer .sub {
  font-size: var(--text-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
footer .copy { font-size: var(--text-xs); color: var(--white-muted); }

/* ===== TEAM / SPEAKER CARDS ===== */
.team-card {
  border: 3px solid var(--border);
  overflow: hidden;
  margin-bottom: 48px;
}
/* Portrait-oriented frame keeps substantially more of each facilitator photo visible. */
.team-card img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 5; }
.team-card-info { padding: 32px 28px; text-align: center; }
.team-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 6px;
  color: var(--white);
}
.team-card-role {
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.team-card-bio {
  font-size: 0.9rem;
  color: var(--white-dim);
  line-height: 1.85;
  margin-bottom: 14px;
  text-align: center;
}
.team-card-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold-pale);
  margin-top: 20px;
  line-height: 1.6;
}

/* ===== APPLICATION FORM (replaces offsite redirect) ===== */
#apply { background: var(--black); }
#apply .eyebrow { margin-bottom: 16px; }
#apply h2 { font-size: clamp(32px, 8vw, 52px); margin-bottom: 10px; }
#apply .divider { margin: 16px auto; }
#apply form { margin-top: 40px; text-align: left; }
#apply label {
  display: block;
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
#apply .field { margin-bottom: 20px; }
#apply input,
#apply textarea {
  width: 100%;
  background: var(--dark2);
  border: 3px solid var(--border);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  padding: 14px 16px;
}
#apply input:focus,
#apply textarea:focus {
  outline: none;
  border-color: var(--gold);
}
#apply .form-note { font-size: var(--text-xs); color: var(--white-muted); text-align: center; margin-top: 20px; }