/* ==========================================================================
   The Lynx Center — main stylesheet
   Palette derived from tlclogo.png: deep purple → blue → teal-green gradient.
   Design language: deep indigo canvases, teal-green energy, knot motifs
   echoing the logo, soft motion throughout (disabled for reduced-motion).
   ========================================================================== */

:root {
  /* Brand colors from tlclogo.png — professional navy blue + orange.
     NOTE: legacy variable names (--purple, --teal, --green) are kept so the
     whole stylesheet re-themes from here. Their VALUES are now navy/orange:
       --purple*  -> navy (primary blue)
       --teal/--green/*-dark -> orange (accent)
       --*-tint   -> soft orange wash                                        */
  --purple: #1b3a67;         /* primary navy (was purple) */
  --purple-dark: #12294c;    /* deeper navy */
  --indigo: #13284d;         /* deepest navy — outline/skip-link */
  --blue: #2f6fb8;           /* supporting medium blue */
  --blue-dark: #245a97;      /* accessible blue for links/text on white */
  --teal: #ef7d26;           /* flame orange (accent) */
  --green: #f6912f;          /* brighter orange */
  --teal-dark: #bf5c11;      /* darkened orange for accessible text on white */
  --green-dark: #bf5c11;
  --teal-tint: #fdeede;      /* soft orange wash */
  --mint-tint: #fdeede;

  --night: #13284d;          /* deep navy canvas (hero, footer, CTA) */
  --night-2: #1b3a67;

  --ink: #1c2740;
  --ink-soft: #4a566e;
  --bg: #ffffff;
  --surface: #f3f6fa;
  --line: #dde5ee;

  --grad-brand: linear-gradient(120deg, #13284d 0%, #1b3a67 45%, #2f6fb8 100%);
  --grad-fresh: linear-gradient(120deg, #ef7d26 0%, #f6912f 100%);

  --font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script: "Dancing Script", "Segoe Script", cursive;

  --radius: 14px;
  --shadow: 0 4px 24px rgba(35, 32, 65, 0.10);
  --shadow-lift: 0 14px 40px rgba(35, 32, 65, 0.16);
  --container: 1140px;

  /* Knot-inspired tile pattern (echoes the logo's interlocking diamonds) */
  --knot-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2'%3E%3Crect x='18' y='18' width='36' height='36' rx='9' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--blue-dark); }
a:hover { color: var(--teal-dark); }

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

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--indigo);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Gradient text helper — used for key words in headings */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Scroll-reveal animation (elements get .reveal from JS; visible by default
   when JS is absent). Respect reduced-motion.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.75rem 1.7rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* animated sheen sweep on hover */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.btn--primary:hover::after { left: 130%; }

.btn--primary { background: var(--grad-brand); color: #fff; }
.btn--primary:hover { color: #fff; }

.btn--fresh { background: var(--grad-fresh); color: #13284d; }
.btn--fresh:hover { color: #13284d; }

.btn--outline {
  background: transparent;
  border-color: var(--indigo);
  color: var(--indigo);
}
.btn--outline:hover { background: var(--indigo); color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

.btn--light { background: #fff; color: var(--indigo); }
.btn--light:hover { color: var(--purple-dark); }

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 6px 24px rgba(35, 32, 65, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 78px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.brand__logo { height: 50px; width: auto; display: block; object-fit: contain; transition: transform 0.3s ease; }
.brand:hover .brand__logo { transform: scale(1.03); }
@media (max-width: 520px) { .brand__logo { height: 42px; } }
.brand__text { display: flex; flex-direction: column; }
.brand__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.brand__tagline {
  font-size: 0.72rem;
  color: var(--teal-dark);
  letter-spacing: 0.02em;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav__list > li > a,
.site-nav__dropbtn {
  display: inline-block;
  position: relative;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* animated underline on hover */
.site-nav__list > li > a::after,
.site-nav__dropbtn::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-fresh);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.site-nav__list > li > a:hover::after,
.site-nav__list > li > a[aria-current="page"]::after,
.site-nav__dropbtn:hover::after {
  transform: scaleX(1);
}

.site-nav__list > li > a:hover,
.site-nav__dropbtn:hover { color: var(--teal-dark); }

.site-nav__list a[aria-current="page"] {
  color: var(--purple);
  font-weight: 600;
}

/* Services shows active when you're on one of its pages */
.site-nav__dropbtn.is-active { color: var(--purple); font-weight: 600; }
.site-nav__dropbtn.is-active::after { transform: scaleX(1); }

/* Header "Register Now" call to action */
.site-nav__cta-item { margin-left: 0.5rem; }
.site-nav__list > li > a.site-nav__cta {
  padding: 0.55rem 1.25rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--night);
  border-radius: 8px;
}
.site-nav__list > li > a.site-nav__cta::after { display: none; }
.site-nav__list > li > a.site-nav__cta:hover { color: var(--night); }

.site-nav__caret { font-size: 0.7em; }

.site-nav__dropdown { position: relative; }

.site-nav__submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  display: none;
  z-index: 60;
}

.site-nav__dropdown.is-open .site-nav__submenu {
  display: block;
  animation: submenu-in 0.22s ease both;
}
@keyframes submenu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.site-nav__submenu a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
  border-left: 3px solid transparent;
}
.site-nav__submenu a:hover {
  background: var(--mint-tint);
  color: var(--green-dark);
  border-left-color: var(--green);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
}
.nav-toggle__bar {
  width: 24px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }
  .site-nav.is-open { display: block; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 1.25rem 1.25rem;
    gap: 0;
  }
  .site-nav__list > li > a,
  .site-nav__dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
  }
  .site-nav__list > li > a::after,
  .site-nav__dropbtn::after { display: none; }
  .site-nav__submenu {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    padding-left: 1rem;
    min-width: 0;
  }
  .site-nav__dropdown.is-open .site-nav__submenu { display: block; animation: none; }
}

/* --------------------------------------------------------------------------
   Splash interstitial
   -------------------------------------------------------------------------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.splash[hidden] { display: none; }

.splash__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 20, 48, 0.8);
  backdrop-filter: blur(3px);
}

.splash__panel {
  position: relative;
  max-width: min(480px, 92vw);
  max-height: 92vh;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  background: #fff;
  animation: splash-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes splash-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.splash__link { display: block; text-decoration: none; }

.splash__image {
  display: block;
  width: 100%;
  max-height: calc(92vh - 56px);
  object-fit: contain;
  background: #0d2a52;
}

.splash__cta {
  display: block;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  color: #fff;
  background: var(--grad-brand);
  padding: 0.85rem 1rem;
}

.splash__close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.splash__close:hover { background: #fff; transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   Top utility bar (email / phone / address + social)
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--night);
  color: #c3d0e2;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 40px;
  padding-block: 0.4rem;
}
.topbar__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar__list li { display: flex; align-items: center; gap: 0.4rem; }
.topbar__list svg { color: var(--teal); flex: none; }
.topbar a { color: #c3d0e2; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__social { display: flex; align-items: center; gap: 0.7rem; }
.topbar__social a { display: grid; place-items: center; color: #c3d0e2; }
.topbar__social a:hover { color: var(--teal); }

@media (max-width: 900px) {
  .topbar__address { display: none; }
  .topbar__list { gap: 1rem; }
}
@media (max-width: 560px) {
  .topbar { font-size: 0.76rem; }
}

/* --------------------------------------------------------------------------
   Home hero — navy canvas, script wordmark, photo with orange slash
   -------------------------------------------------------------------------- */

.home-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #13284d 0%, #17305c 55%, #1b3a67 100%);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.home-hero__pattern {
  position: absolute;
  inset: 0;
  background-image: var(--knot-pattern);
  opacity: 0.6;
  pointer-events: none;
}
.home-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  /* copy column trimmed and gap tightened so the film sits closer to the
     text and renders noticeably larger. 0.88fr is the floor here — any
     narrower and the wordmark headline starts to wrap. */
  .home-hero__grid { grid-template-columns: 0.88fr 1.12fr; gap: 1.25rem; }
}

.home-hero__copy > * { animation: hero-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.home-hero__copy > *:nth-child(2) { animation-delay: 0.1s; }
.home-hero__copy > *:nth-child(3) { animation-delay: 0.2s; }

.home-hero p {
  font-size: 1.08rem;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.9);
}
.home-hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* The script wordmark: navy-serif + orange-script lockup */
.wordmark {
  margin: 0 0 1rem;
  line-height: 1.12;
  font-weight: 700;
}
.wordmark__line { display: block; }
.wordmark__serif {
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.005em;
}
.wordmark__script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--teal);
  font-size: clamp(2.3rem, 5.8vw, 4.1rem);
  line-height: 0.9;
  padding-inline: 0.04em;
}
/* On light backgrounds the serif half goes navy */
.wordmark--light .wordmark__serif { color: var(--night); }

.home-hero__art { position: relative; }
.home-hero__img {
  display: block;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

/* Hero video + sound toggle */
.hero-video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  background: #000;
  aspect-ratio: 16 / 9;
  line-height: 0;
}
.hero-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Let the film bleed past the container on the right so it renders larger.
   No negative left margin — the headline fills its column exactly, so
   pulling left would sit on top of the text. The bleed only kicks in once
   there is viewport to spare, otherwise the right edge would be clipped. */
@media (min-width: 1200px) {
  .home-hero__art { margin-right: -2rem; }
}

/* --------------------------------------------------------------------------
   Value strip — five offerings on navy
   -------------------------------------------------------------------------- */

.valuestrip {
  background: #17305c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  padding-block: 1.6rem;
}
.valuestrip__grid {
  display: grid;
  gap: 1.25rem 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.valuestrip__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-right: 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.valuestrip__item:last-child { border-right: 0; }
@media (max-width: 1100px) { .valuestrip__item { border-right: 0; } }

.valuestrip__icon { color: var(--teal); flex: none; margin-top: 2px; }
.valuestrip h2 {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.2rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.valuestrip p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Core focus cards
   -------------------------------------------------------------------------- */

.section__head { max-width: 760px; margin-inline: auto; }
.section__intro--center { margin-inline: auto; }
.eyebrow--center { justify-content: center; }

.display-heading {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.display-heading::after {
  content: "";
  display: block;
  width: 76px; height: 3px;
  border-radius: 3px;
  background: var(--grad-fresh);
  margin-top: 0.7rem;
}
.text-center .display-heading::after { margin-inline: auto; }

.focus-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.focus-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  text-align: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.focus-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(239, 125, 38, 0.55);
  color: inherit;
}
.focus-card__icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--night);
  color: #fff;
  margin-bottom: 1rem;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.focus-card:hover .focus-card__icon {
  background: var(--grad-fresh);
  color: var(--night);
  transform: scale(1.06);
}
.focus-card h3 {
  font-family: var(--font-head);
  font-size: 1.02rem;
  color: var(--purple);
  margin-bottom: 0.5rem;
}
.focus-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.focus-card__more {
  margin-top: auto;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

/* --------------------------------------------------------------------------
   Leadership Academy band
   -------------------------------------------------------------------------- */

.academy-band__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .academy-band__grid { grid-template-columns: 1fr 1fr; }
}
/* Photo in the Leadership Academy band */
.academy-band__photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  line-height: 0;
}
.academy-band__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.academy-band__tagline {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal-dark);
  font-size: 1.02rem;
}

/* --------------------------------------------------------------------------
   Home banner — full-width branded hero image with clickable hotspots
   over the baked-in "See Upcoming Events" and "Request a Consultation"
   buttons. Hotspot coords are percentages of the image, so they track the
   buttons at every width (image keeps its aspect ratio).
   -------------------------------------------------------------------------- */

.home-banner {
  position: relative;
  max-width: 1600px;
  margin-inline: auto;
  background: #16224a; /* matches image's dark navy for any ultra-wide letterboxing */
  line-height: 0;
  overflow: hidden;
}

.home-banner__img {
  display: block;
  width: 100%;
  height: auto;
  animation: banner-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes banner-in {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}

.banner-hotspot {
  position: absolute;
  display: block;
  border-radius: 12px;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.banner-hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.banner-hotspot:hover::after {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
.banner-hotspot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Measured button positions (image 1535×1024) */
.banner-hotspot--events  { left: 5.3%;  top: 67.9%; width: 22.0%; height: 8.0%; }
.banner-hotspot--consult { left: 28.3%; top: 67.9%; width: 22.0%; height: 8.0%; }

/* --------------------------------------------------------------------------
   Hero — deep indigo canvas, drifting aurora glows, knot pattern
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: #fff;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

/* aurora glows */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  pointer-events: none;
}
.hero::before {
  width: 60vw; height: 60vw;
  min-width: 480px; min-height: 480px;
  right: -18vw; bottom: -32vw;
  background: radial-gradient(circle, rgba(239, 125, 38, 0.42), rgba(246, 145, 47, 0.2) 55%, transparent 75%);
  animation: aurora-a 14s ease-in-out infinite alternate;
}
.hero::after {
  width: 44vw; height: 44vw;
  min-width: 380px; min-height: 380px;
  left: -14vw; top: -18vw;
  background: radial-gradient(circle, rgba(43, 75, 130, 0.6), rgba(47, 111, 184, 0.32) 60%, transparent 78%);
  animation: aurora-b 18s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6%, -8%) scale(1.12); }
}
@keyframes aurora-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(7%, 6%) scale(1.08); }
}

.hero .container { position: relative; z-index: 2; }

.hero__pattern {
  position: absolute;
  inset: 0;
  background-image: var(--knot-pattern);
  opacity: 0.9;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 70%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 70%);
}

.hero h1 { color: #fff; }
.hero h1 .grad-text {
  background: linear-gradient(100deg, #ffb877, #f6912f 45%, #8fc0f0);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero p {
  font-size: 1.18rem;
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.9);
}
.hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* split layout on home */
.hero__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 7fr 5fr; }
}

/* hero entrance */
.hero__copy > * { animation: hero-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero__copy > *:nth-child(2) { animation-delay: 0.1s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.2s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.3s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* hero art: rotating knot rings + floating glass chips */
.hero__art {
  position: relative;
  min-height: 380px;
  display: none;
}
@media (min-width: 940px) { .hero__art { display: block; } }

.hero__rings {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 380px; height: 380px;
  animation: ring-spin 60s linear infinite;
  opacity: 0.85;
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  animation: chip-float 6s ease-in-out infinite;
}
.chip__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--grad-fresh);
  color: #13284d;
  flex: none;
}
.chip--1 { top: 8%; right: 6%; animation-delay: 0s; }
.chip--2 { top: 42%; left: -4%; animation-delay: 1.6s; }
.chip--3 { bottom: 8%; right: 12%; animation-delay: 3.2s; }
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* interior page hero */
.hero--page {
  padding: clamp(2.75rem, 5vw, 4rem) 0;
}
.hero--page p { font-size: 1.1rem; }
.hero--page h1 { font-family: var(--font-display); font-weight: 700; }

/* Heading "materializes" on page load — fades up out of a soft blur */
.hero--page .badge,
.hero--page h1,
.hero--page p {
  animation: materialize 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero--page h1 { animation-delay: 0.08s; }
.hero--page p  { animation-delay: 0.18s; }
@keyframes materialize {
  from { opacity: 0; transform: translateY(16px); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* --------------------------------------------------------------------------
   Sections, cards, grids
   -------------------------------------------------------------------------- */

.section { padding: clamp(2.75rem, 6vw, 4.75rem) 0; }
.section--alt {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(239, 125, 38, 0.06), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(43, 75, 130, 0.06), transparent 60%),
    var(--surface);
}

.section__intro { max-width: 62ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.5rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 3px;
  border-radius: 3px;
  background: var(--grad-fresh);
}

.grid {
  display: grid;
  gap: 1.5rem;
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(239, 125, 38, 0.5);
}

.card--accent { border-top: 4px solid transparent; border-image: var(--grad-fresh) 1; border-top-width: 4px; }
.card--accent { border-image: none; }
.card--accent::before {
  content: "";
  position: absolute;
  top: -1px; left: 16px; right: 16px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--grad-fresh);
}

.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--teal-dark); }
.card .card__cta { margin-top: auto; padding-top: 1rem; }

.card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, rgba(239, 125, 38, 0.15), rgba(47, 111, 184, 0.14));
  color: var(--teal-dark);
  transition: transform 0.25s ease, background 0.25s ease;
}
.card:hover .card__icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--grad-fresh);
  color: #13284d;
}

.event-card__img {
  border-radius: 10px;
  margin-bottom: 1rem;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  object-position: top;
}
/* Show the whole flyer/poster rather than a cropped preview (Upcoming Events) */
.event-card__img--full {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

.event-card__meta {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.badge {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--mint-tint);
  color: var(--green-dark);
  margin-bottom: 0.75rem;
  width: fit-content;
}
.badge--purple { background: #e9f0f9; color: var(--purple-dark); }

/* Checklist */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.55rem;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--mint-tint);
  color: var(--green-dark);
}

/* Two-column checklist for longer lists */
.checklist--columns {
  columns: 2;
  column-gap: 2.5rem;
}
.checklist--columns li { break-inside: avoid; }
@media (max-width: 700px) { .checklist--columns { columns: 1; } }

/* Pull-quote style closing statement */
.lead-statement {
  max-width: 66ch;
  margin-inline: auto;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

/* Illustration panels (duotone people scenes) */
.scene {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  line-height: 0;
}
.scene svg,
.scene img { width: 100%; height: auto; display: block; }

.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--art-left .split__art { order: -1; }
}

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stat {
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.stat__num {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(100deg, #ffc48a, #f6912f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------------
   Tables (sponsorship tiers)
   -------------------------------------------------------------------------- */

.tier-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.tier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tier--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow);
}
.tier__name { font-size: 1.05rem; margin-bottom: 0.15rem; }
.tier__price {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.75rem;
}
.tier ul { padding-left: 1.2rem; margin: 0; font-size: 0.95rem; }
.tier li { margin-bottom: 0.4rem; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quote {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
  padding: 1.75rem 1.75rem 1.5rem 2.25rem;
  margin: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.2rem; left: 0.9rem;
  font-family: Georgia, serif;
  font-size: 2.6rem;
  line-height: 1;
  background: var(--grad-fresh);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quote p { font-size: 1.05rem; font-style: italic; }
.quote footer {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Testimonials marquee — a slow, continuous left-to-right drift of cards.
   Two identical copies of the set make the loop seamless; hover pauses it. */
.marquee {
  position: relative;
  overflow: hidden;
  margin-top: 1.9rem;
  padding-block: 0.75rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marquee-ltr 80s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.quote--mini {
  flex: 0 0 360px;
  width: 360px;
  margin: 0;
}
.quote--mini p { font-size: 1rem; }
@media (max-width: 520px) {
  .quote--mini { flex-basis: 82vw; width: 82vw; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee__dup { display: none; }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form { max-width: 640px; }
.form__row { margin-bottom: 1.1rem; }
.form label {
  display: block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
.form input, .form select, .form textarea {
  width: 100%;
  font: inherit;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(239, 125, 38, 0.25);
}
.form textarea { min-height: 140px; resize: vertical; }

.form__note {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.form--wide { max-width: 860px; }

.form__grid {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.form__section-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--line);
  color: var(--purple);
}
.form__section-heading:first-of-type { margin-top: 0.5rem; }

.req { color: var(--teal-dark); }

.form__status {
  margin-top: 0.9rem;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.92rem;
}
.form__status--success {
  background: #eaf5ec;
  border-color: #2e7d4f;
  color: #1c4d31;
}
.form__status--error {
  background: var(--mint-tint);
  border-color: var(--teal);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Notices / placeholders
   -------------------------------------------------------------------------- */

/* Callout panel. Matches the pull-quote treatment — white card, hairline
   border, orange rule down the left — rather than a dashed outline, which
   reads as a draft placeholder. */
.notice {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.35rem 1.6rem;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--purple); }
/* On tinted sections a plain white panel can float; warm it very slightly. */
.section--alt .notice { background: #fffdfb; }

.embed-placeholder {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-head);
}

/* --------------------------------------------------------------------------
   CTA band — same deep-indigo language as the hero
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: #fff;
  text-align: center;
  padding: clamp(2.75rem, 6vw, 4.25rem) 0;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 50vw; height: 50vw;
  min-width: 420px; min-height: 420px;
  border-radius: 50%;
  will-change: transform;
  left: 50%; top: 50%;
  transform: translate(-50%, -30%);
  background: radial-gradient(circle, rgba(239, 125, 38, 0.36), rgba(43, 75, 130, 0.3) 60%, transparent 80%);
  animation: aurora-a 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--knot-pattern);
  opacity: 0.7;
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
/* The heading's underline bar is left-aligned by default; in the centred CTA
   band that leaves a stray orange dash beside the text, so drop it here. */
.cta-band .display-heading::after { display: none; }
.cta-band p { color: rgba(255, 255, 255, 0.9); max-width: 55ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--night);
  color: #c3d0e2;
  padding-top: 3rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-brand);
}
.site-footer a { color: #f2ad6b; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: 2rem;
}

.site-footer__logo { width: auto; max-width: 220px; height: auto; background: #fff; border-radius: 10px; padding: 10px 14px; }
.site-footer__name {
  font-family: var(--font-head);
  font-weight: 600;
  color: #fff;
  margin: 0.75rem 0 0.1rem;
}
.site-footer__tagline { font-size: 0.85rem; margin: 0.85rem 0 0; }

.site-footer__heading {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.75rem;
}

.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin-bottom: 0.45rem; }
.site-footer__links a { display: inline-flex; align-items: center; gap: 8px; }
.site-footer__social-icon { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
.site-footer__muted { color: #8fa2bd; font-size: 0.9rem; }

address { font-style: normal; line-height: 1.7; }

.site-footer__contact { margin-top: 0.75rem; line-height: 1.8; }

.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.25rem;
  font-size: 0.85rem;
}
.site-footer__legal p { margin: 0; }

/* Discreet developer credit */
.site-footer__credit { margin-top: 0.4rem !important; font-size: 0.78rem; }
.site-footer__credit a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #9aa6bd;
  text-decoration: none;
}
.site-footer__credit a:hover { color: #ffffff; text-decoration: none; }
.site-footer__credit-logo {
  height: 16px;
  width: auto;
  border-radius: 3px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Event detail
   -------------------------------------------------------------------------- */

.event-detail__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .event-detail__grid { grid-template-columns: 3fr 2fr; align-items: start; }
}
.event-detail__poster {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  transition: transform 0.3s ease;
}
.event-detail__poster:hover { transform: scale(1.015); }

/* Contact page phone/email list */
.contact-methods {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
}
.contact-methods li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-head);
  font-size: 1.02rem;
}
.contact-methods__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--mint-tint);
  color: var(--teal-dark);
}
.contact-methods a { color: var(--ink); text-decoration: none; font-weight: 500; }
.contact-methods a:hover { color: var(--teal-dark); text-decoration: underline; }

/* Contact page office photo */
.contact-photo {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.text-center { text-align: center; }