/* ═══════════════════════════════════════════════════════════
   style.css — Unwind
   Mobile-first · Editorial · Grounded · Warm · Restrained
════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
════════════════════════════════════════════════════════════ */
:root {
  /* — Palette — */
  --clr-dark: #282020;
  --clr-light: #F0F0E0;
  --clr-terracotta: #B05830;
  --clr-terracotta-deep: #985028;
  --clr-taupe: #888078;
  --clr-muted-brown: #403830;
  --clr-off-white: #F0E8E0;
  --clr-beige-line: #D8D0C8;
  --clr-page-bg: #FAF7F2;
  --clr-error-bg: #FDF2EE;
  --clr-error-border: rgba(176, 88, 48, 0.30);

  /* — Typography — */
  --ff-serif: 'Lora', Georgia, serif;
  --ff-sans: 'Inter', system-ui, sans-serif;

  /* Mobile-first font scale — grows at wider breakpoints */
  --fs-xs: 0.75rem;
  /*  12px */
  --fs-sm: 0.875rem;
  /*  14px */
  --fs-base: 1rem;
  /*  16px */
  --fs-md: 1.125rem;
  /*  18px */
  --fs-lg: 1.375rem;
  /*  22px */
  --fs-xl: 1.625rem;
  /*  26px */
  --fs-2xl: 2rem;
  /*  32px */
  --fs-3xl: 2.5rem;
  /*  40px */
  --fs-4xl: 2.75rem;
  /*  44px */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.65;
  --lh-loose: 1.85;

  /* — Spacing — */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* — Radii — */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* — Shadows — very restrained — */
  --shadow-xs: 0 1px 4px rgba(40, 32, 32, 0.04);
  --shadow-sm: 0 2px 10px rgba(40, 32, 32, 0.05);
  --shadow-md: 0 4px 20px rgba(40, 32, 32, 0.06);

  /* — Transitions — */
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition: 200ms var(--ease-soft);

  /* — Tap targets (min 44px per WCAG) — */
  --min-tap: 44px;
}

/* ═══════════════════════════════════════════════════════════
   2. RESET & BASE
════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  /* Prevents horizontal scroll without creating a new containing block */
}

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--clr-muted-brown);
  background-color: var(--clr-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ═══════════════════════════════════════════════════════════
   3. LAYOUT & UTILITIES
════════════════════════════════════════════════════════════ */
.container {
  width: 92%;
  max-width: 1080px;
  margin-inline: auto;
  padding-block: var(--sp-12);
}

.section-header {
  margin-bottom: var(--sp-10);
}

.section-eyebrow {
  display: block;
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-terracotta);
  margin-bottom: var(--sp-3);
}

.section-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--clr-dark);
}

.section-description {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
  margin-top: var(--sp-4);
}

.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   4. BUTTON
════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--min-tap);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 15px;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition),
    opacity var(--transition);
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background-color: var(--clr-terracotta);
  color: var(--clr-off-white);
  border-color: var(--clr-terracotta);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--clr-terracotta-deep);
  border-color: var(--clr-terracotta-deep);
  box-shadow: 0 3px 12px rgba(176, 88, 48, 0.18);
  transform: translateY(-1px);
  color: var(--clr-off-white);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-primary:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   5. NAVBAR
════════════════════════════════════════════════════════════ */
.site-header {
  background-color: var(--clr-page-bg);
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 6%;
  background-color: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--clr-beige-line);
}

.logo-link {
  font-family: var(--ff-serif);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--clr-dark);
  letter-spacing: 0.01em;
}

.logo-link:hover {
  color: var(--clr-terracotta);
}

.nav-links {
  display: none;
  /* hidden on mobile — page is entered via QR */
  align-items: center;
  gap: var(--sp-6);
}

.nav-links a {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: 0.03em;
  color: var(--clr-taupe);
  min-height: var(--min-tap);
  display: flex;
  align-items: center;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--clr-terracotta);
  transition: width var(--transition);
}

.nav-links a:hover {
  color: var(--clr-dark);
}

.nav-links a:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   6. HERO SECTION
   Mobile-first: focused, single-column, QR-ready.
   Feels like the first spread of a printed booklet.
════════════════════════════════════════════════════════════ */
.hero-section {
  padding: var(--sp-16) 6% var(--sp-12);
  background: linear-gradient(148deg, var(--clr-page-bg) 0%, #f7ede2 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at 80% 30%,
      rgba(176, 88, 48, 0.04) 0%,
      transparent 68%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  /* Generous rhythm between the three hero elements */
  gap: var(--sp-10);
}

/* ── Logo image — shared base ───────────────────────────── */
.logo-img {
  display: block;
  object-fit: contain;
  /* Blends the near-off-white JPEG background into the page */
  mix-blend-mode: multiply;
}

/* Navbar: compact, sits comfortably inside the sticky bar */
.logo-img--nav {
  height: 44px;
  width: auto;
}

/* Hero: visual anchor — largest instance */
.logo-img--hero {
  height: 190px;
  width: auto;
  margin-bottom: var(--sp-2);
}

/* Footer: sits inside the dark band as a contained block */
.logo-img--footer {
  height: 76px;
  width: auto;
  border-radius: 4px;
  opacity: 0.9;
}

/* Hero logo-mark wrapper — preserves spacing rhythm */
.hero-logo-mark {
  line-height: 1;
}

/* Introductory paragraph — top rule creates visual pause */
.hero-intro {
  font-family: var(--ff-serif);
  font-size: var(--fs-base);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--clr-muted-brown);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--clr-beige-line);
}

/* CTA — full-width on mobile for easy tapping */
.hero-cta {
  width: 100%;
  justify-content: center;
  min-height: 54px;
  font-size: var(--fs-base);
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════════════════════
   7. WHAT IS UNWIND?
════════════════════════════════════════════════════════════ */
.what-is-unwind-section {
  background-color: var(--clr-light);
}

.editorial-block {
  max-width: 600px;
}

.editorial-lead {
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--clr-dark);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--clr-beige-line);
}

.editorial-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
  margin-bottom: var(--sp-5);
}

.editorial-body:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   8. WHAT TO EXPECT
════════════════════════════════════════════════════════════ */
.expect-section {
  background-color: var(--clr-page-bg);
}

.expect-list {
  max-width: 540px;
}

.expect-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--clr-beige-line);
}

.expect-item:first-child {
  border-top: 1px solid var(--clr-beige-line);
}

.expect-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--clr-terracotta);
  opacity: 0.7;
}

.expect-text {
  font-family: var(--ff-serif);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--clr-dark);
}

/* ═══════════════════════════════════════════════════════════
   9. PARTICIPATION GUIDELINES
   Animated accordion — max-height + opacity, 220ms.
════════════════════════════════════════════════════════════ */
.guidelines-section {
  background-color: var(--clr-light);
}

.guidelines-list {
  max-width: 600px;
}

.guideline-item {
  border-bottom: 1px solid var(--clr-beige-line);
}

.guideline-item:first-child {
  border-top: 1px solid var(--clr-beige-line);
}

.guideline-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--clr-dark);
  min-height: var(--min-tap);
  transition: color 220ms var(--ease-soft);
}

.guideline-toggle:hover {
  color: var(--clr-terracotta);
}

.guideline-number {
  flex-shrink: 0;
  font-family: var(--ff-serif);
  font-size: var(--fs-sm);
  font-style: italic;
  font-weight: var(--fw-medium);
  color: var(--clr-terracotta);
  opacity: 0.45;
  width: 1.8rem;
}

.guideline-question {
  flex: 1;
  font-family: var(--ff-serif);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.guideline-chevron {
  flex-shrink: 0;
  color: var(--clr-taupe);
  opacity: 0.6;
  transition: transform 220ms var(--ease-soft);
  display: flex;
  align-items: center;
}

.guideline-toggle[aria-expanded="true"] .guideline-chevron {
  transform: rotate(180deg);
}

/* ── Accordion body — animated via JS with max-height ─────── */
/*
  Never use max-height:none — it makes the close animation jump.
  JS always writes a concrete pixel value. CSS transitions the rest.
  transform: translateY gives the "drop in" feel on open.
*/
.guideline-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 340ms cubic-bezier(.22, .61, .36, 1),
    opacity 280ms cubic-bezier(.22, .61, .36, 1),
    transform 340ms cubic-bezier(.22, .61, .36, 1);
  padding: 0;
}

/* JS adds .is-open before triggering the transition */
.guideline-body.is-open {
  opacity: 1;
  transform: translateY(0);
  padding-bottom: var(--sp-6);
  padding-left: calc(1.8rem + var(--sp-4));
}

.guideline-body p {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
  max-width: 66ch;
}

/* ═══════════════════════════════════════════════════════════
   10. BEFORE WE BEGIN
   Editorial principles — quiet guidance, no list feel.
════════════════════════════════════════════════════════════ */
.before-begin-section {
  background-color: var(--clr-page-bg);
}

.principles-list {
  max-width: 540px;
}

.principle-item {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--clr-beige-line);
}

.principle-item:first-child {
  border-top: 1px solid var(--clr-beige-line);
}

.principle-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--clr-dark);
  margin-bottom: var(--sp-2);
  line-height: var(--lh-snug);
}

.principle-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
}

/* ═══════════════════════════════════════════════════════════
   11. REGISTRATION SECTION
   Single-column until 1024px. Feels relaxed on mobile.
   Card deliberately lightened — no heavy SaaS box feel.
════════════════════════════════════════════════════════════ */
.registration-section {
  background-color: var(--clr-light);
}

.registration-card {
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--clr-beige-line);
  border-radius: var(--radius-md);
  padding: var(--sp-8) var(--sp-6);
  /* Softer shadow — less dashboard, more editorial */
  box-shadow: var(--shadow-sm);
  max-width: 640px;
  margin-inline: auto;
}

.registration-card .section-header {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--clr-beige-line);
}

.registration-card .section-description {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
  margin-top: var(--sp-3);
}

/* ── Form — always single column on mobile & tablet ──────── */

/* ── Concept Note download block ─────────────────────────── */
.concept-note-block {
  margin-bottom: var(--sp-10);
  padding: var(--sp-6);
  background-color: var(--clr-page-bg);
  border: 1px solid var(--clr-beige-line);
  border-left: 3px solid var(--clr-terracotta);
  border-radius: var(--radius-sm);
}

.concept-note-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--clr-dark);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-snug);
}

.concept-note-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
  margin-bottom: var(--sp-5);
}

/* ── Secondary button ────────────────────────────────────── */
.btn-secondary {
  background-color: transparent;
  color: var(--clr-terracotta);
  border-color: var(--clr-terracotta);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--clr-terracotta);
  color: var(--clr-off-white);
  box-shadow: 0 3px 12px rgba(176, 88, 48, 0.15);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Download button: full-width on mobile, auto on desktop */
.btn-download {
  width: 100%;
  justify-content: center;
  gap: var(--sp-2);
  background-color: #985028;
  border: solid 1.5px #4E2C19;
  color: #FAF7F2;
  font-size: 0.87rem;


}

/* ── Optional field label hint ───────────────────────────── */
.label-optional {
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--clr-taupe);
  opacity: 0.75;
}

/* ── Date input — Flatpickr wrapper ──────────────────────── */
.form-input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* The original hidden input (holds Y-m-d value) */
.form-input--date {
  /* Flatpickr hides this when altInput is true */
}

/* The Flatpickr alt-input (visible to user) */
.form-input-icon-wrap .flatpickr-input.form-input,
.form-input-icon-wrap input.form-input--date {
  padding-right: 2.75rem;
  cursor: pointer;
}

/* Flatpickr creates an alt input adjacent to the original;
   make sure it fills the wrapper */
.form-input-icon-wrap input[type="text"].form-input {
  width: 100%;
}

/* Custom calendar icon — positioned inside the field */
.form-input-icon {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-taupe);
  opacity: 0.55;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), opacity var(--transition);
  z-index: 2;
}

/* Icon reacts to field hover / focus */
.form-input-icon-wrap:hover .form-input-icon,
.form-input-icon-wrap .form-input:focus~.form-input-icon,
.form-input-icon-wrap .form-input.active~.form-input-icon {
  color: var(--clr-terracotta);
  opacity: 0.85;
}

.registration-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.form-group label {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-muted-brown);
  line-height: 1;
}

/* ── Inputs — large enough for thumbs ────────────────────── */
.form-input,
.form-select {
  width: 100%;
  min-height: var(--min-tap);
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--clr-beige-line);
  border-radius: var(--radius-sm);
  background-color: var(--clr-page-bg);
  color: var(--clr-dark);
  font-size: var(--fs-base);
  /* 16px — prevents iOS zoom on focus */
  line-height: var(--lh-base);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23888078' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}

.form-input::placeholder {
  color: var(--clr-beige-line);
  font-style: italic;
  font-size: var(--fs-xs);
}

.form-input:hover,
.form-select:hover {
  border-color: var(--clr-taupe);
  background-color: #fff;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--clr-terracotta);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(176, 88, 48, 0.08);
  outline: none;
}

/* Subtle entrance animation on focus ring */
@supports selector(:focus-visible) {
  .form-input:focus:not(:focus-visible) {
    box-shadow: none;
  }

  .form-input:focus-visible {
    border-color: var(--clr-terracotta);
    box-shadow: 0 0 0 3px rgba(176, 88, 48, 0.10);
  }
}

/* ── Agreement Checkbox ──────────────────────────────────── */
.form-group--agreement {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--clr-beige-line);
}

.agreement-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-regular) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--clr-muted-brown) !important;
  line-height: var(--lh-loose);
}

.agreement-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--clr-terracotta);
  cursor: pointer;
}

.agreement-text {
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--clr-muted-brown);
  line-height: var(--lh-loose);
}

.agreement-link {
  color: var(--clr-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.agreement-link:hover {
  color: var(--clr-terracotta-deep);
}

/* ── Submit ──────────────────────────────────────────────── */
.form-group--submit {
  margin-top: var(--sp-6);
}

.btn-submit {
  width: 100%;
  min-height: 54px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
}

/* ── Inline error message ─────────────────────────────────── */
.error-message {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background-color: var(--clr-error-bg);
  border: 1px solid var(--clr-error-border);
  border-left: 3px solid var(--clr-terracotta);
  border-radius: var(--radius-sm);
  animation: errorSlideIn 280ms var(--ease-soft) both;
}

@keyframes errorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.error-message p {
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--clr-terracotta-deep);
}

/* ── Confirmation panel — replaces form after submission ──── */
/* Starts hidden; JS fades the form out and this panel in.    */
.confirmation-panel {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  /* Fade-in handled via opacity transition when .hidden removed */
  opacity: 0;
  transition: opacity 400ms var(--ease-soft);
}

.confirmation-panel.is-visible {
  opacity: 1;
}

.confirmation-leaf {
  font-size: 2rem;
  line-height: 1;
}

.confirmation-heading {
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--clr-dark);
  line-height: var(--lh-tight);
}

.confirmation-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
  max-width: 38ch;
}

.confirmation-closing {
  font-family: var(--ff-serif);
  font-size: var(--fs-base);
  font-style: italic;
  color: var(--clr-muted-brown);
  line-height: var(--lh-snug);
}

/* ═══════════════════════════════════════════════════════════
   12. FOOTER
════════════════════════════════════════════════════════════ */
.site-footer {
  background-color: var(--clr-dark);
  color: var(--clr-beige-line);
}

.site-footer .container {
  padding-block: var(--sp-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.footer-logo {
  font-family: var(--ff-serif);
  font-size: var(--fs-md);
  font-style: italic;
  font-weight: var(--fw-medium);
  color: var(--clr-off-white);
  letter-spacing: 0.03em;
}

.footer-tagline {
  font-family: var(--ff-serif);
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
  max-width: 50ch;
}

.footer-bottom {
  width: 100%;
  border-top: 1px solid rgba(216, 208, 200, 0.10);
  padding-top: var(--sp-4);
  text-align: center;
}

.footer-copy {
  font-size: var(--fs-xs);
  color: rgba(136, 128, 120, 0.45);
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════
   13. HAMBURGER / MOBILE MENU
   Visible below 768px. Slide-down overlay beneath the navbar.
   Respects prefers-reduced-motion.
════════════════════════════════════════════════════════════ */

/* ── Hamburger button — shown only on mobile ───────────── */
/* ── Hamburger button — ☰ Unicode Icon ──────────────────── */
.hamburger-btn {
  display: none;
  /* hidden until mobile breakpoint below */
  align-items: center;
  justify-content: center;
  width: var(--min-tap);
  height: var(--min-tap);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  position: relative;
  z-index: 110;
  color: var(--clr-dark);
  transition: color 280ms var(--ease-soft);
}

.hamburger-btn:focus-visible {
  outline: 2px solid var(--clr-terracotta);
  outline-offset: 2px;
}

.hamburger-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 1.5rem;
  line-height: 1;
}

.icon-char {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transition:
    transform 280ms var(--ease-soft),
    opacity 280ms var(--ease-soft);
  user-select: none;
}

.icon-hamburger {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.icon-close {
  opacity: 0;
  font-size: 1.3rem;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.6);
}

/* Animate ☰ into ✕ when menu opens */
.hamburger-btn[aria-expanded="true"] .icon-hamburger {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.6);
}

.hamburger-btn[aria-expanded="true"] .icon-close {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* ── Mobile menu panel ──────────────────────────────────── */
.mobile-menu {
  display: none;
  /* hidden until mobile/tablet breakpoint below */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  background-color: rgba(250, 247, 242, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--clr-beige-line);
  box-shadow: 0 10px 30px rgba(40, 32, 32, 0.08);

  /* Smooth slide animation */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    max-height 320ms var(--ease-soft),
    opacity 280ms var(--ease-soft),
    transform 320ms var(--ease-soft),
    visibility 280ms var(--ease-soft);
}

.mobile-menu.is-open {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Reduced-motion: just fade, no slide */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu {
    transition: opacity 200ms ease;
  }

  .icon-char {
    transition: opacity 150ms ease;
  }
}

.mobile-nav {
  padding: var(--sp-4) 6% var(--sp-6);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  min-height: var(--min-tap);
  font-family: var(--ff-serif);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--clr-dark);
  border-bottom: 1px solid var(--clr-beige-line);
  padding: var(--sp-3) 0;
  transition: color var(--transition), padding-left var(--transition);
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  color: var(--clr-terracotta);
  padding-left: var(--sp-2);
  outline: none;
}

/* Show hamburger + mobile-menu on Mobile & Tablet screens (< 1024px) */
@media (max-width: 1023px) {
  .hamburger-btn {
    display: flex;
  }

  .mobile-menu {
    display: block;
  }

  .nav-links {
    display: none;
  }

  /* ── Mobile navbar: centered logo, left-aligned hamburger ── */
  .navbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
  }

  /* All three direct children share the same grid cell */
  .nav-logo,
  .hamburger-btn,
  .mobile-menu {
    grid-row: 1;
    grid-column: 1;
  }

  /* Logo: centered across the full navbar width */
  .nav-logo {
    justify-self: center;
    z-index: 1;
    /* sit above hamburger tap-target background */
  }

  /* Hamburger: pinned to the left edge */
  .hamburger-btn {
    justify-self: start;
    z-index: 110;
    /* must remain tappable above the logo */
    min-width: var(--min-tap);
    min-height: var(--min-tap);
  }

  /* Mobile menu: break out of the shared cell, full-width below navbar */
  .mobile-menu {
    grid-row: 2;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   14. CO-FOUNDERS SECTION
   Warm, editorial profile cards. No heavy hover effects.
════════════════════════════════════════════════════════════ */
.cofounders-section {
  background-color: var(--clr-page-bg);
}

.co-founder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Mobile: single column stack */
.cofounders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.founder-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--clr-beige-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 280ms var(--ease-soft), transform 280ms var(--ease-soft);
}

.founder-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ── Circular avatar placeholder ───────────────────────── */
.founder-avatar {
  flex-shrink: 0;
}

.founder-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--clr-off-white);
  border: 1px solid var(--clr-beige-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-taupe);
  opacity: 0.75;
}

/* ── Text content ──────────────────────────────────────── */
.founder-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.founder-name {
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--clr-dark);
  line-height: var(--lh-snug);
}

.founder-role {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-terracotta);
  opacity: 0.75;
  margin-bottom: 0;
}

.founder-bio {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
  font-style: italic;
  max-width: 52ch;
}

/* ═══════════════════════════════════════════════════════════
   15. QUESTIONS SECTION
   Minimal contact card. Consistent with editorial tone.
════════════════════════════════════════════════════════════ */
.questions-section {
  background-color: var(--clr-light);
}

.questions-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: 540px;
}

/* ── Contact card ───────────────────────────────────────── */
.contact-card {
  background-color: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--clr-beige-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.contact-list {
  display: flex;
  flex-direction: column;
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--clr-beige-line);
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-label {
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-taupe);
  flex-shrink: 0;
}

.contact-value {
  font-family: var(--ff-serif);
  font-size: var(--fs-base);
  font-style: italic;
  color: var(--clr-dark);
  text-align: right;
}

.contact-value--placeholder {
  opacity: 0.5;
}

/* ── Reassurance text ─────────────────────────────────── */
.questions-reassurance {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-taupe);
  max-width: 60ch;
}

/* ═══════════════════════════════════════════════════════════
   16. RESPONSIVE — DELIBERATE, NOT RANDOM
   Mobile is the default above. These breakpoints
   progressively enhance for larger screens.
════════════════════════════════════════════════════════════ */

/* ── 480px — larger phone ────────────────────────────────── */
@media (min-width: 480px) {
  .hero-logo-mark {
    font-size: 3rem;
  }
}

/* ── 640px — large phone / small tablet ─────────────────── */
@media (min-width: 640px) {
  .container {
    padding-block: var(--sp-16);
  }

  .section-title {
    font-size: var(--fs-2xl);
  }

  .editorial-lead {
    font-size: var(--fs-xl);
  }

  .registration-card {
    padding: var(--sp-10) var(--sp-8);
  }

  .cofounders-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 768px — tablet ──────────────────────────────────────── */
@media (min-width: 768px) {

  .container {
    padding-block: var(--sp-20);
  }

  .hero-section {
    padding: var(--sp-20) 6% var(--sp-16);
  }

  .hero-inner {
    gap: var(--sp-12);
  }

  .hero-logo-mark {
    font-size: var(--fs-4xl);
  }

  .hero-intro {
    font-size: var(--fs-md);
  }

  /* Hero CTA no longer needs to be full-width on tablet */
  .hero-cta {
    width: auto;
    align-self: flex-start;
    min-width: 240px;
  }

  .section-header {
    margin-bottom: var(--sp-12);
  }

  .registration-card {
    padding: var(--sp-12) var(--sp-10);
    border-radius: var(--radius-lg);
  }

  /* Download button: content-width on tablet+ */
  .btn-download {
    width: auto;
    align-self: flex-start;
  }
}


/* ── 1024px — desktop ────────────────────────────────────── */
@media (min-width: 1024px) {

  /* Desktop nav visible on desktop; mobile hamburger & menu hidden */
  .nav-links {
    display: flex;
  }

  .hamburger-btn {
    display: none !important;
  }

  .mobile-menu {
    display: none !important;
  }

  /* Reset navbar to flexbox — undo mobile grid override */
  .navbar {
    display: flex;
    justify-content: space-between;
  }

  /* ── Global spacing & container ─────────────────────────── */
  .container {
    width: 88%;
    max-width: 1200px;
    padding-block: var(--sp-24);
  }

  .section-header {
    margin-bottom: var(--sp-16);
  }

  .section-title {
    font-size: 2rem;
  }

  /* ── Hero: two-column editorial split ───────────────────── */
  /*
    hero-desktop: outer wrapper that creates the desktop grid.
    hero-inner stays the mobile/tablet single-column flex, now
    constrained to the left column.
  */
  .hero-section {
    padding: 0;
  }

  .hero-desktop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 88vh;
    max-width: 1200px;
    width: 88%;
    margin-inline: auto;
    gap: var(--sp-16);
  }

  .hero-inner {
    max-width: none;
    margin-inline: 0;
    padding-block: var(--sp-24);
    gap: var(--sp-10);
  }

  /* Desktop logo: ~26% larger than mobile */
  .logo-img--hero {
    height: 240px;
  }

  .logo-img--nav {
    height: 48px;
  }

  .hero-intro {
    font-size: var(--fs-base);
    max-width: 52ch;
  }

  .hero-cta {
    width: auto;
    align-self: flex-start;
    min-width: 260px;
  }

  /* Editorial aside — right column, desktop only */
  .hero-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-10);
    padding-block: var(--sp-24);
    padding-left: var(--sp-16);
    border-left: 1px solid var(--clr-beige-line);
    height: 100%;
  }

  .hero-quote {
    margin: 0;
  }

  .hero-quote-text {
    font-family: var(--ff-serif);
    font-size: var(--fs-lg);
    font-style: italic;
    font-weight: var(--fw-regular);
    line-height: var(--lh-loose);
    color: var(--clr-muted-brown);
    opacity: 0.75;
    max-width: 36ch;
  }

  .hero-aside-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .hero-aside-label {
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-taupe);
  }

  .hero-aside-dot {
    color: var(--clr-beige-line);
    font-size: var(--fs-base);
    line-height: 1;
  }

  /* ── What is Unwind ─────────────────────────────────────── */
  .editorial-block {
    max-width: 680px;
  }

  .editorial-lead {
    font-size: var(--fs-xl);
  }

  /* ── What to Expect ─────────────────────────────────────── */
  .expect-list {
    max-width: 620px;
  }

  .expect-item {
    padding: var(--sp-6) 0;
  }

  /* ── Participation Guidelines: centred, narrow ──────────── */
  .guidelines-list {
    max-width: 800px;
    margin-inline: auto;
  }

  .guideline-item {
    /* More breathing room between items on desktop */
  }

  .guideline-toggle {
    padding: var(--sp-6) 0;
  }

  .guideline-body.is-open {
    padding-bottom: var(--sp-6);
  }

  /* ── Before We Begin: two-column grid ───────────────────── */
  .principles-list {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--sp-16);
  }

  /*
    Five items in a 2-col grid: items 1–2 in row 1, 3–4 in row 2,
    item 5 alone in row 3. Give it a top border like the others.
  */
  .principle-item {
    padding: var(--sp-8) 0;
  }

  /* ── Registration: two-column section ──────────────────── */
  /*
    The card itself becomes a full-width layout container.
    Left: context prose. Right: the form.
  */
  .registration-card {
    max-width: 1100px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  .reg-layout {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--sp-16);
    align-items: start;
  }

  /* Context column: hidden on mobile via CSS — only shown on desktop */
  .reg-context {
    padding-top: var(--sp-4);
    position: sticky;
    top: calc(64px + var(--sp-10));
    /* below sticky navbar */
  }

  .reg-context-title {
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-8);
  }

  .reg-context-body {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--clr-taupe);
    margin-bottom: var(--sp-5);
  }

  .reg-context-body:last-child {
    margin-bottom: 0;
  }

  /* Form column: the original card shell moves here */
  .reg-form-col {
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--clr-beige-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-12) var(--sp-10);
    box-shadow: var(--shadow-sm);
  }

  /* On desktop, only the form column header is visible */
  .reg-form-header {
    display: block;
    margin-bottom: var(--sp-10);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--clr-beige-line);
  }

  /* The registration form stays single-column inside the card */
  .registration-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }

  /* ── Footer: editorial two-column ───────────────────────── */
  .site-footer .container {
    padding-block: var(--sp-16);
    align-items: stretch;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: start;
    width: 100%;
    padding-bottom: var(--sp-10);
  }

  .footer-brand {
    align-items: flex-start;
    text-align: left;
  }

  .footer-tagline {
    text-align: left;
  }

  .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-3);
  }

  .footer-contact-label {
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-taupe);
    opacity: 0.6;
    margin-bottom: var(--sp-2);
  }

  .footer-email {
    font-family: var(--ff-serif);
    font-size: var(--fs-base);
    font-style: italic;
    color: var(--clr-off-white);
    opacity: 0.8;
    transition: opacity 200ms ease;
  }

  .footer-email:hover {
    opacity: 1;
  }

  .footer-social {
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-taupe);
    opacity: 0.55;
    transition: opacity 200ms ease;
  }

  .footer-social:hover {
    opacity: 0.9;
  }

  .footer-bottom {
    text-align: left;
  }
}

/* ── Hide mobile-only elements on desktop ────────────────── */
/* The reg-context left column only renders on desktop.       */
/* Hide it on smaller screens so it doesn't disrupt layout.  */
@media (max-width: 1023px) {
  .hero-aside {
    display: none;
  }

  .reg-context {
    display: none;
  }

  .footer-inner {
    display: contents;
  }

  /* unwrap: children stay in flow */
  .footer-contact {
    display: none;
  }

  .footer-contact-label {
    display: none;
  }

  .reg-layout {
    display: contents;
  }

  .reg-form-col {
    display: contents;
  }

  .reg-form-header {
    display: none;
  }

  /* Restore the card styling that reg-form-col takes over on desktop */
  .registration-card {
    /* styles already set in base — nothing to restore */
  }
}