/* =========================================================================
   Education Page — standalone landing page for education.helmslawgroup.com
   Same Day 20 tokens + same calm editorial restraint as helmslawgroup.com.
   ========================================================================= */

:root {
  --color-navy: #0F1A2E;
  --color-charcoal: #2A2F36;
  --color-ivory: #F7F4EE;
  --color-stone: #D9D4CC;
  --color-gold: #C7A76C;
  --color-white: #FFFFFF;

  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --section-y-desktop: 120px;
  --section-y-tablet: 96px;
  --section-y-mobile: 72px;

  --content-max: 760px;
  --grid-max: 1200px;

  --radius-card: 12px;
  --radius-button: 10px;

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-navy);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

a:hover { opacity: 0.75; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-navy);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1.1em; }

.container {
  width: 100%;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 28px;
}

.container--narrow { max-width: var(--content-max); }

section {
  padding-top: var(--section-y-desktop);
  padding-bottom: var(--section-y-desktop);
}

@media (max-width: 992px) {
  section { padding-top: var(--section-y-tablet); padding-bottom: var(--section-y-tablet); }
}
@media (max-width: 768px) {
  section { padding-top: var(--section-y-mobile); padding-bottom: var(--section-y-mobile); }
  .container { padding: 0 22px; }
}

/* =========================================================================
   Buttons (Day 20)
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 16px 28px;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
  min-height: 52px;
  text-decoration: none;
}

.btn--primary {
  background-color: var(--color-navy);
  color: var(--color-ivory);
}
.btn--primary:hover { opacity: 0.88; }

.btn--secondary {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--secondary:hover {
  background-color: var(--color-navy);
  color: var(--color-ivory);
  opacity: 1;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.btn--quiet {
  background: transparent;
  color: var(--color-navy);
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--color-stone);
  border-radius: 0;
  min-height: auto;
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity var(--transition-base), border-color var(--transition-base);
}

.btn--quiet:hover {
  border-bottom-color: var(--color-navy);
  opacity: 1;
}

/* =========================================================================
   Brand wordmark (used in hero top-right + footer)
   ========================================================================= */
.brand__primary {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-navy);
}

.brand__divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: var(--color-stone);
  transform: translateY(2px);
  margin: 0 4px;
}

.brand__secondary {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  opacity: 0.78;
  font-weight: 400;
}

/* =========================================================================
   Hero
   ========================================================================= */
.edu-hero {
  position: relative;
  min-height: clamp(620px, 86vh, 880px);
  padding: 0;
  background-color: var(--color-ivory);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.edu-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Center keeps Brent (~40% from left of the source image) sitting in the
     transparent middle band of the bilateral gradient on every viewport,
     so he stays the visual anchor while side attendees get gracefully washed. */
  object-position: center;
  z-index: 0;
}

/* Right-side ivory wash — strong opaque cover for the wordmark masthead
   AND the headline + CTA (both stacked in the right column). Left ~40%
   of the viewport stays clear so the workshop photo reads as the anchor. */
.edu-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(247, 244, 238, 1) 0%,
    rgba(247, 244, 238, 0.96) 20%,
    rgba(247, 244, 238, 0.72) 36%,
    rgba(247, 244, 238, 0.30) 50%,
    rgba(247, 244, 238, 0) 62%
  );
  z-index: 1;
  pointer-events: none;
}

/* Corner logo — top-right, sits on the strongest part of the gradient */
.edu-hero__logo {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
}

.edu-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr;
}

/* Right column — headline + CTA, vertically centered against the hero */
.edu-hero__copy {
  justify-self: end;
  width: 100%;
  max-width: 480px;
  padding: 120px 0 96px;
}

.edu-hero__copy h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (max-width: 992px) {
  .edu-hero {
    min-height: 0;
    display: block;
  }
  .edu-hero__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-position: center;
  }
  .edu-hero__veil { display: none; }
  .edu-hero__logo {
    /* On mobile the image and text stack — anchor the logo above the image. */
    position: relative;
    top: auto;
    right: auto;
    margin: 24px 28px 0 auto;
    display: inline-flex;
  }
  .edu-hero__inner {
    padding: 40px 28px 72px;
  }
  .edu-hero__copy {
    justify-self: start;
    max-width: 100%;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .edu-hero__image { aspect-ratio: 4 / 5; }
  .edu-hero__inner { padding: 32px 22px 64px; }
  .edu-hero__logo { margin-right: 22px; }
}

/* =========================================================================
   Section 2 — Registration
   ========================================================================= */
.edu-register {
  background-color: var(--color-white);
}

.edu-register__header {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 56px;
}

.edu-register__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  opacity: 0.7;
  font-weight: 500;
  margin: 0 0 14px;
}

.edu-register__title {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  margin: 0 0 22px;
  line-height: 1.3;
}

.edu-register__learn-more {
  /* small button, centered under the title */
  font-size: 0.9rem;
  padding: 12px 22px;
  min-height: 0;
}

.edu-register__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 992px) {
  .edu-register__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Date cards — calm editorial */
.edu-register__cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.edu-card {
  background-color: var(--color-ivory);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  align-items: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .edu-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
  }
}

.edu-card__date {
  text-align: center;
  border-right: 1px solid var(--color-stone);
  padding-right: 24px;
}

.edu-card__month {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  opacity: 0.75;
  font-weight: 500;
  margin-bottom: 4px;
}

.edu-card__day {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-navy);
  font-weight: 500;
}

.edu-card__weekday {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--color-charcoal);
  opacity: 0.85;
  margin-top: 6px;
}

.edu-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edu-card__time {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-navy);
  margin: 0;
  font-weight: 500;
}

.edu-card__location {
  font-size: 0.92rem;
  color: var(--color-charcoal);
  line-height: 1.45;
  margin: 0 0 4px;
}

.edu-card__lunch {
  font-size: 0.85rem;
  color: var(--color-charcoal);
  opacity: 0.85;
  margin: 0;
}

.edu-card__note {
  font-size: 0.78rem;
  color: var(--color-charcoal);
  opacity: 0.75;
  letter-spacing: 0.02em;
  margin: 6px 0 0;
}

.edu-card__btn {
  margin-top: 14px;
  align-self: flex-start;
  padding: 11px 22px;
  font-size: 0.9rem;
  min-height: 0;
}

@media (max-width: 600px) {
  .edu-card {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .edu-card__date {
    border-right: none;
    border-bottom: 1px solid var(--color-stone);
    padding-right: 0;
    padding-bottom: 16px;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .edu-card__day { font-size: 2.2rem; }
}

/* Registration form */
.edu-register__form-wrap {
  display: flex;
  flex-direction: column;
}

.edu-form__title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  color: var(--color-navy);
  margin: 0 0 24px;
  line-height: 1.35;
  font-weight: 500;
}

.edu-form {
  background-color: var(--color-ivory);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-card);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

.edu-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .edu-form__row { grid-template-columns: 1fr; }
}

.edu-form__field {
  display: flex;
  flex-direction: column;
}

.edu-form__field > label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-navy);
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

.edu-form__required {
  color: var(--color-charcoal);
  opacity: 0.6;
  font-weight: 400;
  margin-left: 2px;
}

.edu-form__field input,
.edu-form__field select,
.edu-form__field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-charcoal);
  border: 1px solid var(--color-stone);
  border-radius: 8px;
  padding: 11px 14px;
  background-color: var(--color-white);
  transition: border-color var(--transition-base);
  width: 100%;
  box-sizing: border-box;
}

.edu-form__field input:focus,
.edu-form__field select:focus,
.edu-form__field textarea:focus {
  outline: none;
  border-color: var(--color-navy);
}

/* Dynamic guest pattern — registrant can add up to MAX_GUESTS extra attendees */
.edu-form__guests {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.edu-form__guests:empty {
  display: none;
}

.edu-form__guest-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px dashed var(--color-stone);
}

.edu-form__guest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.edu-form__guest-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  opacity: 0.75;
  font-weight: 500;
}

.edu-form__guest-remove {
  background: transparent;
  border: none;
  padding: 4px 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--color-charcoal);
  opacity: 0.65;
  cursor: pointer;
  transition: opacity var(--transition-base), color var(--transition-base);
  text-decoration: underline;
  text-decoration-color: var(--color-stone);
  text-underline-offset: 3px;
}

.edu-form__guest-remove:hover {
  opacity: 1;
  color: var(--color-navy);
  text-decoration-color: var(--color-navy);
}

.edu-form__add-guest {
  align-self: flex-start;
  margin-top: 4px;
}

.edu-form__add-guest[hidden] {
  display: none;
}

.edu-form__submit {
  margin-top: 6px;
  width: 100%;
}

/* Success state */
.edu-success {
  background-color: var(--color-ivory);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-card);
  padding: 36px 30px;
  text-align: center;
}

.edu-success[hidden] { display: none; }

.edu-success__title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  color: var(--color-navy);
  margin: 0 0 22px;
  line-height: 1.35;
  font-weight: 500;
}

.edu-success__subtitle {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  opacity: 0.75;
  margin: 0 0 18px;
  font-weight: 500;
}

.edu-success__share {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.edu-success__share .btn {
  font-size: 0.9rem;
  padding: 11px 20px;
  min-height: 0;
}

.edu-success__copied {
  margin: 16px 0 0;
  font-size: 0.85rem;
  color: var(--color-charcoal);
  opacity: 0.75;
}

/* =========================================================================
   Section 3 — Learn More
   ========================================================================= */
.edu-learn {
  background-color: var(--color-ivory);
}

.edu-learn__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.edu-learn__header h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: 0;
  line-height: 1.35;
}

.edu-learn__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.edu-learn-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-card);
  padding: 28px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .edu-learn-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
  }
}

.edu-learn-card__num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-navy);
  opacity: 0.65;
  font-weight: 500;
  line-height: 1;
}

.edu-learn-card p {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--color-navy);
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
}

@media (max-width: 1100px) {
  .edu-learn__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .edu-learn__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Section 4 — About Brent
   ========================================================================= */
.edu-about {
  background-color: var(--color-white);
}

.edu-about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 72px;
  align-items: stretch; /* image cell stretches to match the text block height */
}

.edu-about__media {
  display: block;
  height: 100%;
}

.edu-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-card);
}

.edu-about__copy h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  margin: 0 0 24px;
}

.edu-about__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.edu-about__list li {
  padding: 6px 0 6px 22px;
  position: relative;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-charcoal);
}

.edu-about__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 10px;
  height: 1px;
  background-color: var(--color-stone);
}

.edu-about__list strong {
  color: var(--color-navy);
  font-weight: 500;
}

@media (max-width: 992px) {
  .edu-about__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
  }
  .edu-about__media {
    max-width: 460px;
    height: auto;
  }
  .edu-about__media img {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 540px;
  }
}

/* Mirror-section copy — intro, list-lead, close paragraph that match the
   homepage Meet Brent section's serif body type. */
.edu-about__intro,
.edu-about__close {
  font-family: var(--font-serif);
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  margin: 0 0 22px;
}
.edu-about__list-lead {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  margin: 0 0 12px;
}

/* =========================================================================
   Inline explainer popovers (mirrors the homepage Meet Brent pattern).
   Each credential bullet wraps its label in <span class="explainer">
   with a clickable term + a popup. Open/close is handled in main.js.
   On mobile (≤700px), the JS portals the popup + a dim backdrop onto
   document.body so position:fixed anchors cleanly to the viewport —
   same fix as the main site, since transformed ancestors would
   otherwise trap fixed positioning to the wrong containing block.
   ========================================================================= */
.explainer {
  position: relative;
  display: inline;
}
.explainer__term {
  font: inherit;
  color: var(--color-navy);
  background: none;
  border: 0;
  padding: 0 1px;
  cursor: help;
  border-bottom: 2px dotted var(--color-gold);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.explainer__term::after {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  font-size: 0.62em;
  font-weight: 700;
  vertical-align: super;
  color: #fff;
  background: var(--color-gold);
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.explainer__term:hover { color: var(--color-gold); }
.explainer.is-open .explainer__term { background-color: rgba(184, 150, 46, 0.10); }

.explainer__pop {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  z-index: 60;
  width: min(340px, 86vw);
  background: #fff;
  color: var(--color-charcoal);
  border: 1px solid rgba(15, 26, 46, 0.12);
  border-top: 4px solid var(--color-gold);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 26, 46, 0.22);
  padding: 18px 20px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.explainer.is-open .explainer__pop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.explainer__pop::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -8px;
  width: 14px;
  height: 14px;
  background: var(--color-gold);
  border-radius: 2px;
  transform: rotate(45deg);
}
.explainer__pop strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--color-navy);
  margin-bottom: 6px;
}
.explainer__pop p { margin: 0; }
.explainer__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  color: var(--color-charcoal);
  opacity: 0.5;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.explainer__close:hover { opacity: 1; }

@media (max-width: 600px) {
  .explainer__pop { width: min(320px, 90vw); }
}

/* Mobile portal — same approach as the main site. JS moves the popup
   to document.body and applies data-portaled="1"; CSS then renders it
   as a viewport-centered dialog with a dim backdrop. */
@media (max-width: 700px) {
  .explainer__pop[data-portaled="1"] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9500;
    padding: 26px 24px 22px;
    opacity: 1;
    visibility: visible;
  }
  .explainer__pop[data-portaled="1"]::before { display: none; }
  .explainer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 26, 46, 0.55);
    z-index: 9499;
    cursor: pointer;
  }
  .explainer__pop[data-portaled="1"] .explainer__close {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
    top: 6px;
    right: 6px;
    opacity: 0.7;
  }
}

/* =========================================================================
   Section 5 — Consultation CTA
   ========================================================================= */
.edu-consult {
  background-color: var(--color-ivory);
  text-align: center;
}

.edu-consult h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  margin: 0 0 18px;
  line-height: 1.3;
}

.edu-consult p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  margin: 0 auto;
  max-width: 600px;
}

.edu-consult .btn-row {
  justify-content: center;
}

/* =========================================================================
   Footer
   ========================================================================= */
.edu-footer {
  background-color: var(--color-navy);
  color: var(--color-ivory);
  padding: 64px 0 40px;
  text-align: center;
}

.edu-footer__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 28px;
}

.edu-footer__brand .brand__primary { color: var(--color-ivory); }
.edu-footer__brand .brand__divider { background-color: rgba(247, 244, 238, 0.3); }
.edu-footer__brand .brand__secondary { color: var(--color-ivory); opacity: 0.8; }

.edu-footer__contact {
  margin-bottom: 28px;
}

.edu-footer__contact p {
  margin: 0 0 6px;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--color-ivory);
  opacity: 0.92;
}

.edu-footer__contact a {
  color: var(--color-ivory);
}

.edu-footer__disclaimer {
  border-top: 1px solid rgba(247, 244, 238, 0.16);
  padding-top: 28px;
  max-width: 820px;
  margin: 0 auto;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--color-ivory);
  opacity: 0.7;
}

.edu-footer__disclaimer p { margin: 0 0 10px; }
.edu-footer__disclaimer p:last-child { margin: 0; }

/* =========================================================================
   Utility
   ========================================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Brand alignment with helmslawgroup.com (LOCKED, 2026-06-04)
   ---------------------------------------------------------------------------
   Updates so the standalone education page reads as part of the same brand
   family as the main marketing site:
     - Primary buttons are GOLD (matches the "Schedule a Consultation" CTA
       on the main site nav)
     - Hover lifts the button 2px with a dark drop shadow
     - Ivory sections carry the same subtle navy dot grid as the main site's
       ivory sections (Section Background Standard, A/B/T)
     - Footer carries a 1px white hairline at the TOP to mirror the main
       site's header/footer parity
   ========================================================================= */

/* --- Primary button — exact mirror of the main site's hero "Attend a
   Workshop" button (gold fill, navy text, 2px lift + drop shadow on hover,
   slight press on active). Identical behavior to .rd .btn--primary on the
   main site. --- */
.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
  position: relative;
  font-weight: 500;
  will-change: transform, box-shadow, background-color;
  transition: background-color .25s ease,
              border-color .25s ease,
              box-shadow .25s ease,
              transform .2s ease;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: #D4B567;
  border-color: #D4B567;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.40);
  opacity: 1;
}
.btn--primary:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
}

/* Secondary buttons gain the same lift on hover (no color flip) */
.btn--secondary {
  transition: background-color .25s ease,
              color .25s ease,
              border-color .25s ease,
              box-shadow .25s ease,
              transform .2s ease;
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 26, 46, 0.12);
}

/* --- Ivory sections carry the navy dot grid (matches main site B sections) --- */
.edu-learn,
.edu-consult {
  background-image:
    radial-gradient(rgba(13, 31, 60, 0.05) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
}

/* --- Footer hairline mirror (matches main site header/footer parity) --- */
.edu-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* --- Choose Your Date heading above the date cards --- */
.edu-register__cards-wrap {
  display: flex;
  flex-direction: column;
}
.edu-register__cards-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  color: var(--color-navy);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 14px;
}
.edu-register__cards-heading::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--color-gold);
}

/* =========================================================================
   Site header band — navy bar with large logo, matches main site (LOCKED)
   ========================================================================= */
.edu-site-header {
  background-color: var(--color-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  padding: 22px 0;
}
.edu-site-header__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.edu-site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity .2s ease;
}
.edu-site-header__brand:hover { opacity: 0.85; }
.edu-site-header__logo {
  width: 260px;
  height: auto;
  display: block;
  /* The logo PNG is dark navy; the header is dark navy. Invert to ivory
     so the logo reads on the navy band — matches the .rd footer logo. */
  filter: brightness(0) invert(1);
}
@media (max-width: 768px) {
  .edu-site-header { padding: 16px 0; }
  .edu-site-header__logo { width: 200px; }
}

/* =========================================================================
   .page-hero — full-bleed dark hero matching every other page on the
   main site (index.html, about-brent.html, planning.html, etc.). Replaces
   the old .edu-hero composition.
   ========================================================================= */
.page-hero {
  position: relative;
  min-height: clamp(720px, 92vh, 980px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-color: var(--color-navy);
  padding-top: 0;
  padding-bottom: 0;
}
.page-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor low so the woman holding her phone stays in frame at every
     viewport. Photo subject sits lower-left in the source image. */
  object-position: center 40%;
  z-index: 0;
}
.page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(13, 31, 60, 0.30) 0%,
    rgba(13, 31, 60, 0.42) 50%,
    rgba(13, 31, 60, 0.78) 100%
  );
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 96px 28px clamp(72px, 9vh, 120px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.page-hero__copy {
  text-align: center;
  max-width: 760px;
  color: #FFFFFF;
}
.page-hero__headline {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: #FFFFFF;
  margin: 0 0 32px;
}
.page-hero .btn-row {
  justify-content: center;
  margin-top: 0;
}
@media (max-width: 768px) {
  .page-hero { min-height: clamp(620px, 86vh, 800px); }
  .page-hero__inner { padding: 72px 22px clamp(56px, 8vh, 90px); }
}

/* Mobile hero crop — the woman in Registration.png sits on the left
   third of the wide landscape photo. With a portrait crop on mobile
   and the inline style's `object-position: center 35%`, she ends up
   off-center toward the left edge. Anchor X to ~26% so the visible
   frame centers on her on phones and small tablets. !important wins
   over the inline style on the <img>. */
@media (max-width: 992px) {
  [aria-labelledby="edu-hero-headline"] .page-hero__image {
    object-position: 26% 35% !important;
  }
}

/* =========================================================================
   Section background alternation — A, B, A, B (matches main site standard)
   ---------------------------------------------------------------------------
   Sequence after the hero:
     - hero (dark)
     - edu-register   → A (white, plain)
     - edu-learn      → B (ivory + navy dot grid)
     - edu-about      → A (white, plain)
     - edu-consult    → B (ivory + navy dot grid)
     - edu-footer     → navy (matches site-footer)
   ========================================================================= */
.edu-register,
.edu-about {
  background-color: var(--color-white);
  background-image: none;
}
.edu-learn,
.edu-consult {
  background-color: var(--color-ivory);
  background-image:
    radial-gradient(rgba(13, 31, 60, 0.05) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
}