@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@500;700&family=Wix+Madefor+Text:wght@400;500;600&display=swap');
@import url('../shared/tokens.css');

:root {
  --coach-warm: #e8a94c;
  --coach-cream: #fbf8f3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--coach-cream);
  color: var(--cy-text);
  font-family: var(--cy-font-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--cy-font-display);
  color: var(--cy-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  max-width: var(--cy-max-w);
  margin: 0 auto;
  padding: 0 var(--cy-gutter);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 243, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cy-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 20px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img { width: 30px; height: 30px; }
/* Real Cypher wordmark used as the header logo */
.logo .brand-wordmark { width: 152px; height: auto; display: block; }
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.logo-name {
  font-family: var(--cy-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--cy-ink);
}
.logo-sub {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--cy-text-faint);
}
.umbrella-link {
  font-size: 0.78rem;
  color: var(--cy-navy);
  border-bottom: 1px solid rgba(0, 100, 148, 0.3);
  white-space: nowrap;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.94rem;
  color: var(--cy-text-dim);
}
.main-nav a { white-space: nowrap; }
.main-nav a:hover { color: var(--cy-ink); }
.main-nav a.active { color: var(--cy-navy); font-weight: 600; }
.nav-cta {
  background: var(--cy-blue);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--cy-blue-dark); color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid var(--cy-border);
  border-radius: 8px;
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--cy-ink);
  margin: 0 8px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--cy-blue); color: #fff; }
.btn-primary:hover { background: var(--cy-blue-dark); color: #fff; }
.btn-ghost { border-color: var(--cy-border); color: var(--cy-ink); background: #fff; }
.btn-ghost:hover { border-color: var(--cy-navy); }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero { padding: var(--cy-hero-top) 0 var(--cy-hero-bottom); position: relative; overflow: hidden; }
/* Hero that runs straight into a flush first section (all interior pages) */
.hero.hero-tight { padding-bottom: var(--cy-hero-bottom-tight); }
.hero-inner { max-width: 760px; }

/* Hero with supporting image */
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 52px;
  align-items: center;
  position: relative;
}
.hero-grid .hero-inner { max-width: none; }
.hero-figure {
  margin: 0;
  position: relative;
}
.hero-figure img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: var(--cy-radius-lg);
  box-shadow: 0 18px 44px rgba(12, 20, 32, 0.16);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cy-navy);
  background: rgba(61, 155, 233, 0.1);
  border: 1px solid rgba(61, 155, 233, 0.25);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 28px;
}
.hero h1 strong {
  font-weight: 700;
  color: var(--cy-navy);
}
.hero-cta { margin-top: 8px; }
/* Home hero: keep clear air between the sub-heading and the CTA */
.hero-grid .lead { margin-bottom: 40px; }
/* Global `p { margin: 0 }` strips paragraph spacing, and `.section p + p`
   doesn't reach the hero — restore the same rhythm for multi-paragraph heroes */
.hero-inner p + p { margin-top: 16px; }

/* ---------- Sections ---------- */
.section { padding: var(--cy-section-y) 0; }
/* First section directly under a .hero-tight */
.section.section-flush { padding-top: var(--cy-section-flush-top); }
/* Consistent spacing utilities — replace ad-hoc inline margins */
.cta-after { margin-top: var(--cy-cta-gap); }
.lead-spaced { margin-top: var(--cy-lead-gap); }
.lead-flush { margin-bottom: 0; }
.section-alt { background: #fff; border-top: 1px solid var(--cy-border); border-bottom: 1px solid var(--cy-border); }
.section h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  margin-bottom: 24px;
  max-width: 700px;
}
.section .lead {
  font-size: 1.08rem;
  color: var(--cy-text-dim);
  max-width: 680px;
  margin-bottom: 20px;
}
.section p + p { margin-top: 16px; }
.section .body-copy { max-width: 700px; }
.section .body-copy p { margin-bottom: 16px; font-size: 1.02rem; color: var(--cy-text); }

/* Ways to work / paths — used for the Coaching + Building split */
.modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 32px 0;
  max-width: 860px;
}
.mode-card {
  background: #fff;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius);
  padding: 26px;
  border-top: 3px solid var(--cy-blue);
  display: flex;
  flex-direction: column;
}
.mode-card:nth-child(2) { border-top-color: var(--coach-warm); }
.mode-card:nth-child(3) { border-top-color: var(--cy-navy); }
.mode-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.mode-card p { color: var(--cy-text-dim); font-size: 0.96rem; }
.mode-tag {
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cy-navy);
  background: rgba(0, 100, 148, 0.09);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.mode-card .link-arrow { margin-top: 14px; font-size: 0.9rem; }

/* Process steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.step-card {
  background: #fff;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius);
  padding: 24px 20px;
}
.step-num {
  font-family: var(--cy-font-display);
  color: var(--cy-blue);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.step-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
.step-card p { color: var(--cy-text-dim); font-size: 0.9rem; }

.steps-full { display: flex; flex-direction: column; gap: 0; margin-top: 20px; max-width: 760px; }
.step-full {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--cy-border);
}
.step-full:last-child { border-bottom: none; }
.step-full .step-num { margin-bottom: 0; }
.step-full h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step-full p { color: var(--cy-text-dim); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cy-navy);
  font-weight: 600;
  margin-top: 8px;
  border-bottom: 1px solid rgba(0,100,148,0.3);
}

/* Placeholder flag */
.needs-input {
  display: block;
  background: #fff7e8;
  border: 1px dashed var(--coach-warm);
  border-radius: 10px;
  padding: 14px 16px;
  font-style: italic;
  color: var(--cy-text-dim);
  font-size: 0.92rem;
  margin: 18px 0;
}
.needs-input::before {
  content: "Needs your input — ";
  font-style: normal;
  font-weight: 700;
  color: var(--coach-warm);
}

/* About panel */
.about-name-note {
  background: #fff;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius);
  padding: 18px 22px;
  font-size: 0.95rem;
  color: var(--cy-text-dim);
  margin-bottom: 36px;
  max-width: 700px;
}

/* CTA band */
.cta-band { text-align: center; padding: var(--cy-cta-band-y) 0; }
.cta-band-inner { max-width: 560px; margin: 0 auto; }
.cta-band h2 { margin-bottom: 22px; }
/* Supporting line between the heading and the button */
.cta-band p:not(.cta-secondary) { color: var(--cy-text-dim); margin-bottom: 30px; }
/* Secondary link sitting under the primary CTA button */
.cta-secondary { margin-top: 22px; }

/* Form */
.form-panel {
  background: #fff;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  padding: 36px;
  max-width: 620px;
}
.hidden-field { position: absolute; left: -9999px; }
.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-row label { font-size: 0.88rem; color: var(--cy-text-dim); font-weight: 600; }
.form-row input, .form-row select, .form-row textarea {
  background: var(--cy-panel);
  border: 1px solid var(--cy-border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--cy-text);
  font-family: var(--cy-font-text);
  font-size: 0.98rem;
  resize: vertical;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--cy-blue);
}


/* Footer */
.site-footer {
  border-top: 1px solid var(--cy-border);
  padding: 44px 0;
  background: #fff;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 24px; height: 24px; }
/* Real Cypher Agency wordmark, used as the parent-brand lockup */
.footer-brand .brand-wordmark { width: 128px; height: auto; }
.footer-copy { color: var(--cy-text-faint); font-size: 0.85rem; }
.footer-links { display: flex; gap: 20px; font-size: 0.88rem; color: var(--cy-text-dim); }
.footer-links a:hover { color: var(--cy-navy); }

.path-intro {
  font-size: 1.02rem;
  color: var(--cy-text);
  font-weight: 600;
  margin-top: 32px;
}
.path-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  margin-top: 4px;
}

/* Plain checked list — used on the Coaching page */
.check-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; max-width: 700px; }
.check-list li {
  font-size: 1rem;
  color: var(--cy-text-dim);
  padding-left: 30px;
  position: relative;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cy-blue);
  box-shadow: 0 0 0 4px rgba(61, 155, 233, 0.16);
}

/* Body copy resuming after a check-list needs its own top gap */
.check-list + p { margin-top: 24px; }

/* Stacked "what's included" blocks — a heading plus body copy per item */
.include-list { max-width: 760px; margin-top: 20px; }
.include-block {
  padding: 26px 0;
  border-bottom: 1px solid var(--cy-border);
}
.include-block:last-child { border-bottom: none; }
.include-block h3 { font-size: 1.1rem; margin-bottom: 10px; }
.include-block p { color: var(--cy-text-dim); }
.include-block p + p { margin-top: 12px; }

/* ---------- Pull quote ---------- */
.pull-quote {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--cy-font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--cy-ink);
}
.pull-quote::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--cy-blue);
  margin: 0 auto 28px;
}

.pull-quote.quote-inline { margin: 56px auto; }

/* ---------- Full-width section variant ---------- */
/* Drops the default reading measure so the content stretches across the container */
.section-wide h2,
.section-wide .lead,
.section-wide .body-copy,
.section-wide .body-copy p { max-width: none; }

/* ---------- Centred section variant ---------- */
.section-centered { text-align: center; }
.section-centered h2,
.section-centered .lead { margin-left: auto; margin-right: auto; }
.section-centered .modes { margin-left: auto; margin-right: auto; }
.section-centered .mode-tag { align-self: center; }
.section-centered .link-arrow { margin-left: auto; margin-right: auto; }

/* ---------- Three-step process ---------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 44px;
}
.process-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  padding: 34px 26px;
  text-align: center;
}
/* chevron connector between steps */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -21px;
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--cy-border);
  border-right: 2px solid var(--cy-border);
  transform: translateY(-50%) rotate(45deg);
}
.process-art { width: 62px; height: 62px; margin: 0 auto 20px; }
.process-badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cy-navy);
  background: rgba(0, 100, 148, 0.09);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.process-step h3 { font-size: 1.12rem; margin-bottom: 10px; }
.process-step p { color: var(--cy-text-dim); font-size: 0.95rem; }
.process-cta { text-align: center; margin-top: 40px; }

/* ---------- Figures & portraits ---------- */
.feature-figure { margin: 0 0 44px; }
.feature-figure img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: var(--cy-radius-lg);
  box-shadow: 0 14px 36px rgba(12, 20, 32, 0.14);
}
.feature-figure figcaption {
  font-size: 0.84rem;
  color: var(--cy-text-faint);
  margin-top: 10px;
}

/* About portrait — kept modest in size because the source headshot is only 100x100 */
.about-portrait { float: right; width: 160px; margin: 4px 0 20px 32px; }
.about-portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(12, 20, 32, 0.16);
}
.about-portrait figcaption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--cy-text-faint);
  margin-top: 12px;
}
.portrait-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--cy-radius-lg);
  border: 2px dashed var(--coach-warm);
  background: #fff7e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  gap: 8px;
  color: var(--cy-text-dim);
  font-size: 0.82rem;
  line-height: 1.4;
}
.portrait-placeholder strong { color: var(--coach-warm); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Workshops ---------- */
.workshop-card {
  background: #fff;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  padding: 34px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 28px;
  align-items: start;
}
.workshop-art { width: 92px; height: 92px; flex: none; }
.workshop-label {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cy-text-faint);
  font-weight: 600;
  margin-bottom: 8px;
}
.workshop-card h3 { font-size: 1.35rem; margin-bottom: 12px; }
.workshop-card .workshop-intro { color: var(--cy-text-dim); font-size: 1.02rem; margin-bottom: 16px; }

/* Compact facts row: Online · 90 minutes · $199 · 10 places */
.workshop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: 0.84rem;
  color: var(--cy-text-faint);
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}
.workshop-meta span { display: inline-flex; align-items: center; gap: 14px; }
.workshop-meta span:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cy-border);
}
.workshop-meta strong { color: var(--cy-text); font-weight: 700; }

/* Inline capture form on a workshop card — records the lead, then hands off to Calendly */
.workshop-book { margin-top: 6px; }
.workshop-book .form-row { margin-bottom: 14px; }
.workshop-book .book-note {
  font-size: 0.82rem;
  color: var(--cy-text-faint);
  margin-top: 12px;
}
.workshop-block { margin-bottom: 18px; }
.workshop-block h4 {
  font-family: var(--cy-font-text);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cy-ink);
  margin: 0 0 6px;
}
.workshop-block p { color: var(--cy-text-dim); font-size: 0.96rem; }
.workshop-block ul { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.workshop-block li {
  font-size: 0.95rem;
  color: var(--cy-text-dim);
  padding-left: 18px;
  position: relative;
}
.workshop-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cy-blue);
}
.format-note .link-arrow { margin-top: 0; }
.format-note {
  background: #fff;
  border: 1px solid var(--cy-border);
  border-left: 3px solid var(--cy-blue);
  border-radius: var(--cy-radius);
  padding: 18px 22px;
  font-size: 0.98rem;
  color: var(--cy-text);
  margin-bottom: 20px;
}

/* Course coming-soon band */
.course-band {
  background: linear-gradient(135deg, var(--cy-navy), var(--cy-navy-deep));
  color: #fff;
  border-radius: var(--cy-radius-lg);
  padding: 44px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 34px;
  align-items: center;
}
.course-band h2, .course-band h3 { color: #fff; }
.course-band p { color: rgba(255, 255, 255, 0.85); margin-bottom: 14px; }
.course-band .course-art { width: 120px; height: 120px; }
.soon-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
/* Light-background variant — the rule above is built for the dark course band,
   where it inherits white text. On a white card it needs real contrast. */
.workshop-card .soon-tag {
  background: rgba(0, 100, 148, 0.08);
  border-color: rgba(0, 100, 148, 0.22);
  color: var(--cy-navy);
  margin-bottom: 0;
}
.course-band .form-inline { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.course-band .form-inline input[type="email"] {
  flex: 1 1 240px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  padding: 12px 18px;
  color: #fff;
  font-family: var(--cy-font-text);
  font-size: 0.95rem;
}
.course-band .form-inline input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.6); }
.course-band .form-inline input[type="email"]:focus { outline: none; border-color: #fff; }
.course-band .form-inline button { flex: none; background: #fff; color: var(--cy-navy); }
.course-band .form-inline button:hover { background: var(--coach-cream); color: var(--cy-navy); }

/* ---------- Contact modal ---------- */
.contact-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 560px;
  width: calc(100% - 40px);
  margin: auto;
}
.contact-dialog::backdrop {
  background: rgba(12, 20, 32, 0.55);
  backdrop-filter: blur(2px);
}
.contact-dialog-panel {
  background: #fff;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  padding: 32px;
  box-shadow: 0 24px 60px rgba(12, 20, 32, 0.24);
  position: relative;
}
.contact-dialog h2 {
  font-size: 1.35rem;
  margin-bottom: 8px;
  padding-right: 32px;
}
.contact-dialog .dialog-intro {
  color: var(--cy-text-dim);
  font-size: 0.96rem;
  margin-bottom: 22px;
}
.dialog-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cy-border);
  border-radius: 50%;
  background: #fff;
  color: var(--cy-text-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.dialog-close:hover { border-color: var(--cy-navy); color: var(--cy-ink); }
.dialog-status { font-size: 0.9rem; margin-top: 14px; }
.dialog-status.is-error { color: #b3261e; }
.dialog-done { text-align: center; padding: 16px 0 6px; }
.dialog-done h2 { padding-right: 0; }
.dialog-done p { color: var(--cy-text-dim); margin-top: 8px; }

@media (max-width: 560px) {
  /* Bottom sheet. `margin: auto 0 0` pushes the dialog down — align-self has no
     effect here because a <dialog> is not a flex child. */
  .contact-dialog { width: 100%; max-width: none; margin: auto 0 0; }
  .contact-dialog-panel { border-radius: var(--cy-radius-lg) var(--cy-radius-lg) 0 0; padding: 26px 20px 28px; }
}

/* ---------- Analytics consent bar ---------- */
.cy-consent-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 560px;
  margin: 0 auto;
  background: var(--cy-ink);
  color: #fff;
  border-radius: var(--cy-radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  z-index: 200;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 0.88rem;
}
.cy-consent-bar p { margin: 0; flex: 1 1 220px; color: #fff; }
.cy-consent-actions { display: flex; gap: 10px; flex: none; }
.cy-consent-bar button {
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--cy-font-text);
}
.cy-consent-decline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.cy-consent-accept { background: var(--cy-blue); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .modes { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: 1fr; gap: 20px; }
  .process-step:not(:last-child)::after {
    top: auto; right: 50%; bottom: -16px;
    transform: translateX(50%) rotate(135deg);
  }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-figure img { height: 320px; }
  .about-portrait { float: none; width: 140px; margin: 0 0 26px; }
  .course-band { grid-template-columns: 1fr; gap: 24px; padding: 34px; }
  .course-band .course-art { width: 88px; height: 88px; }
}

/* Nav collapses early: with 8 items and the long CTA label, the horizontal nav
   measures 1084px including gutters. Collapse at 1150 so a scrollbar or font-load
   difference can't tip it into overflow. */
@media (max-width: 1150px) {
  .main-nav {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: var(--coach-cream);
    border-bottom: 1px solid var(--cy-border);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 16px;
    display: none;
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: flex; }
}

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .step-full { grid-template-columns: 40px 1fr; }
  .wrap { padding: 0 var(--cy-gutter-sm); }
  .hero { padding: var(--cy-hero-top-sm) 0 var(--cy-hero-bottom-sm); }
  .section { padding: var(--cy-section-y-sm) 0; }
  .cta-band { padding: var(--cy-cta-band-y-sm) 0; }
  .hero-figure img { height: 240px; }
  .feature-figure img { height: 230px; }
  .workshop-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px;
  }
  .workshop-art { width: 68px; height: 68px; }
  .course-band { padding: 28px; }
  .course-band .form-inline input[type="email"] { flex: 1 1 100%; }
  .course-band .form-inline button { width: 100%; }
}