/* ==========================================================================
   Components
   1. Buttons
   2. Toggle checkboxes (CSS-only menu state)
   3. Site header (sticky wrapper)
   4. Top bar
   5. Navbar
   6. Primary nav + desktop dropdown
   7. Off-canvas drawer (mobile navigation)
   8. Responsive
   — appended: button motion, navbar scroll state, CTA band, footer,
     floating support widget
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), box-shadow var(--transition);
}

/* Gold — reserved for the single primary action */
.btn--accent {
  background-color: var(--clr-accent);
  color: var(--clr-primary-deep);
}

.btn--accent:hover {
  background-color: var(--clr-accent-dark);
  box-shadow: var(--shadow-sm);
}

/* Solid green — primary actions on light surfaces */
.btn--primary {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

.btn--primary:hover {
  background-color: var(--clr-primary-dark);
  box-shadow: var(--shadow-sm);
}

/* Quiet outline — secondary actions */
.btn--outline {
  border: 1px solid var(--clr-border);
  color: var(--clr-ink);
  background-color: var(--clr-white);
}

.btn--outline:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

/* Ghost — secondary action on dark imagery */
.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--clr-white);
  background-color: transparent;
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--clr-white);
}

/* Full-width, taller — drawer / stacked contexts */
.btn--block {
  width: 100%;
  padding-block: 0.9375rem;
}

/* --------------------------------------------------------------------------
   2. Toggle checkboxes — invisible state holders for the CSS-only menus.
   Kept focusable so keyboard users can operate them.
   -------------------------------------------------------------------------- */

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Lock page scroll while the drawer is open */
body:has(#nav-toggle:checked) {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Site header — sticky wrapper
   The negative top offset lets the top bar scroll away while
   the main navbar docks to the viewport. No JavaScript needed.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: calc(-1 * var(--topbar-h));
  z-index: var(--z-header);
}

/* --------------------------------------------------------------------------
   4. Top bar — utility tier
   -------------------------------------------------------------------------- */

.topbar {
  height: var(--topbar-h);
  background-color: var(--clr-primary-deep);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  height: 100%;
}

.topbar__contacts,
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--transition);
}

.topbar__link:hover {
  color: var(--clr-white);
}

.topbar__link svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
}

.topbar__divider {
  width: 1px;
  height: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
}

.topbar__socials {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.topbar__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  transition: background-color var(--transition), color var(--transition);
}

.topbar__social:hover {
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--clr-white);
}

.topbar__social svg {
  width: 0.875rem;
  height: 0.875rem;
}

.topbar__login {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: var(--clr-white);
  font-weight: var(--fw-semibold);
  transition: background-color var(--transition), border-color var(--transition);
}

.topbar__login:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

.topbar__login svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* --------------------------------------------------------------------------
   5. Navbar — brand tier
   -------------------------------------------------------------------------- */

.navbar {
  height: var(--nav-h);
  background-color: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}

.navbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  height: 100%;
}

/* Brand */
.navbar__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar__brand-logo {
  height: 3rem; /* wide wordmark — height-driven, width follows */
  width: auto;
}

/* Hamburger — hidden on desktop */
.navbar__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0.625rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.navbar__burger-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-ink);
}

#nav-toggle:focus-visible ~ .site-header .navbar__burger {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
}

/* Menu wrapper — inline on desktop, replaced by the drawer on mobile */
.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-left: auto;
}

.navbar__menu-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   6. Primary nav + desktop dropdown
   -------------------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-xs);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-ink);
  transition: color var(--transition);
}

/* Animated underline — hover and active state share it */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav__link:hover,
.nav__item--has-dropdown:focus-within > .nav__link {
  color: var(--clr-primary);
}

.nav__link:hover::after,
.nav__link--active::after {
  transform: scaleX(1);
}

.nav__link--active {
  color: var(--clr-primary);
}

/* Dropdown indicator */
.nav__chevron {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--transition);
}

.nav__item--has-dropdown {
  position: relative;
}

.nav__item--has-dropdown:hover .nav__chevron,
.nav__item--has-dropdown:focus-within .nav__chevron {
  transform: rotate(180deg);
}

/* Dropdown — the outer wrapper carries an invisible padding "bridge"
   so the pointer never leaves the hover area between link and panel */
.dropdown {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  min-width: 15rem;
  padding-top: 0.875rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}

.nav__item--has-dropdown:hover .dropdown,
.nav__item--has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__panel {
  padding: var(--space-xs);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-top: 3px solid var(--clr-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.dropdown__link {
  display: block;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), color var(--transition);
}

.dropdown__link:hover {
  background-color: var(--clr-primary-tint);
  color: var(--clr-primary-dark);
}

/* --------------------------------------------------------------------------
   7. Off-canvas drawer — mobile navigation
   Slide-in surface with its own header, nav and footer.
   All state driven by #nav-toggle / #schemes-toggle. No JavaScript.
   -------------------------------------------------------------------------- */

/* Scrim */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 1);
  background-color: rgba(9, 27, 18, 0.55);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 300ms ease, visibility 300ms ease;
}

#nav-toggle:checked ~ .drawer-overlay {
  opacity: 1;
  visibility: visible;
}

/* Surface — Apple-sheet easing: fast launch, soft landing */
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: calc(var(--z-header) + 2);
  display: flex;
  flex-direction: column;
  width: min(85vw, 21rem);
  background-color: var(--clr-white);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 360ms;
}

#nav-toggle:checked ~ .drawer {
  transform: translateX(0);
  visibility: visible;
  box-shadow: var(--shadow-md);
}

/* Header: identity + exit */
.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  padding-bottom: var(--space-md);
}

.drawer__logo {
  height: 2.125rem;
  width: auto;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--clr-surface);
  color: var(--clr-ink);
  cursor: pointer;
  transition: background-color var(--transition);
}

.drawer__close:hover {
  background-color: var(--clr-border);
}

.drawer__close svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Scrollable body: nav on top, footer pushed to the bottom */
.drawer__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xs) var(--space-lg) var(--space-xl);
}

/* ----- Primary items — soft pills, no dividers ----- */

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.drawer-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 3rem; /* 48px touch target */
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-ink);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    transform 120ms ease;
}

.drawer-nav__link:hover {
  background-color: var(--clr-surface);
}

/* Press feedback */
.drawer-nav__link:active {
  background-color: var(--clr-surface);
  transform: scale(0.985);
}

/* Current page */
.drawer-nav__link--active {
  background-color: var(--clr-primary-tint);
  color: var(--clr-primary-dark);
}

/* ----- Schemes — premium expandable group ----- */

.drawer-nav__chevron {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--clr-muted);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-toggle:checked ~ .drawer-nav__link {
  background-color: var(--clr-surface);
}

.nav-toggle:checked ~ .drawer-nav__link .drawer-nav__chevron {
  transform: rotate(180deg);
}

.nav-toggle:focus-visible ~ .drawer-nav__link {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* Smooth height animation via grid-template-rows */
.drawer-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-toggle:checked ~ .drawer-sub {
  grid-template-rows: 1fr;
}

.drawer-sub__inner {
  overflow: hidden;
  min-height: 0;
}

/* Grouped card: indented, rounded, soft highlight */
.drawer-sub__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0.375rem 0 var(--space-2xs) var(--space-sm);
  padding: var(--space-2xs);
  background-color: var(--clr-surface);
  border-radius: var(--radius-md);
}

.drawer-sub__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem; /* 48px touch target */
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  transition: background-color var(--transition), color var(--transition),
    box-shadow var(--transition);
}

.drawer-sub__link:hover,
.drawer-sub__link:active {
  background-color: var(--clr-white);
  color: var(--clr-primary-dark);
  box-shadow: var(--shadow-sm);
}

.drawer-sub__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--clr-primary);
}

/* ----- Footer: actions, contact, socials ----- */

.drawer__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: auto; /* pins to the bottom on tall screens */
  padding-top: var(--space-xl);
  border-top: 1px solid var(--clr-border);
}

.drawer__nav {
  margin-bottom: var(--space-xl); /* minimum gap before the footer */
}

.drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.drawer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.drawer__contact-label {
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.drawer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  transition: color var(--transition);
}

.drawer__contact-link:hover {
  color: var(--clr-primary);
}

.drawer__contact-link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--clr-primary);
}

.drawer__socials {
  display: flex;
  gap: var(--space-xs);
}

.drawer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  color: var(--clr-muted);
  transition: color var(--transition), border-color var(--transition);
}

.drawer__social:hover {
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}

.drawer__social svg {
  width: 1rem;
  height: 1rem;
}

/* ----- Entrance stagger — items cascade in on open only ----- */

.drawer-nav > li,
.drawer__footer {
  opacity: 0;
  transform: translateX(-0.625rem);
  transition: opacity 240ms ease, transform 240ms ease;
}

#nav-toggle:checked ~ .drawer .drawer-nav > li,
#nav-toggle:checked ~ .drawer .drawer__footer {
  opacity: 1;
  transform: none;
}

#nav-toggle:checked ~ .drawer .drawer-nav > li:nth-child(1) { transition-delay: 80ms; }
#nav-toggle:checked ~ .drawer .drawer-nav > li:nth-child(2) { transition-delay: 110ms; }
#nav-toggle:checked ~ .drawer .drawer-nav > li:nth-child(3) { transition-delay: 140ms; }
#nav-toggle:checked ~ .drawer .drawer-nav > li:nth-child(4) { transition-delay: 170ms; }
#nav-toggle:checked ~ .drawer .drawer-nav > li:nth-child(5) { transition-delay: 200ms; }
#nav-toggle:checked ~ .drawer .drawer-nav > li:nth-child(6) { transition-delay: 230ms; }
#nav-toggle:checked ~ .drawer .drawer-nav > li:nth-child(7) { transition-delay: 260ms; }
#nav-toggle:checked ~ .drawer .drawer__footer { transition-delay: 300ms; }

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

/* Desktop — drawer machinery fully out of the document */
@media (min-width: 64.0625rem) {
  .drawer,
  .drawer-overlay {
    display: none;
  }
}

/* Tablet & below — burger + drawer replace the inline menu */
@media (max-width: 64rem) {
  :root {
    --nav-h: 4.25rem; /* 68px */
  }

  /* Utility tier hides; navbar docks straight to the top */
  .topbar {
    display: none;
  }

  .site-header {
    top: 0;
  }

  .navbar__menu {
    display: none;
  }

  .navbar__burger {
    display: flex;
  }
}

/* Small phones */
@media (max-width: 35rem) {
  .navbar__brand-logo {
    height: 2.375rem;
  }
}

/* --------------------------------------------------------------------------
   7. Button motion — soft lift + ripple (JS sets ripple position on press)
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), box-shadow var(--transition),
    transform 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn__ripple {
  position: absolute;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.22;
  transform: scale(0);
  animation: btn-ripple 600ms ease-out forwards;
  pointer-events: none;
}

@keyframes btn-ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   8. Navbar scroll state — blur + soft shadow once the page moves
   -------------------------------------------------------------------------- */

.navbar {
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.site-header.is-scrolled .navbar {
  background-color: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px -16px rgba(16, 33, 24, 0.18);
}

/* --------------------------------------------------------------------------
   9. Closing CTA band — white canvas, deep-green panel
   -------------------------------------------------------------------------- */

.cta-band {
  padding-block: var(--space-3xl);
  background-color: var(--clr-white);
}

.cta-band__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-2xl) clamp(var(--space-lg), 5vw, var(--space-3xl));
  background-color: var(--clr-primary-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cta-band__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    36rem 18rem at 88% -30%,
    rgba(233, 161, 59, 0.16),
    transparent 60%
  );
  pointer-events: none;
}

.cta-band__copy {
  position: relative;
}

.cta-band__title {
  max-width: 22ch;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--clr-white);
}

.cta-band__text {
  margin-top: var(--space-sm);
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.75);
}

.cta-band__btn {
  position: relative;
  flex-shrink: 0;
  min-height: 3.125rem;
  padding-inline: var(--space-xl);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background:
    radial-gradient(
      44rem 22rem at 12% 0%,
      rgba(255, 255, 255, 0.05),
      transparent 60%
    ),
    var(--clr-primary-deep);
  color: rgba(255, 255, 255, 0.75);
  padding-top: var(--space-3xl);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-2xl) var(--space-xl);
  padding-bottom: var(--space-2xl);
}

/* Brand column */
.site-footer__logo {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--clr-white);
  border-radius: var(--radius-md);
}

.site-footer__logo img {
  width: 8.5rem;
  height: auto;
}

.site-footer__about {
  max-width: 22rem;
  margin-top: var(--space-lg);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.site-footer__socials {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  transition: border-color var(--transition), color var(--transition),
    transform 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.site-footer__social:hover {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
  transform: scale(1.08);
}

.site-footer__social svg {
  width: 1rem;
  height: 1rem;
}

/* Link columns */
.site-footer__heading {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.site-footer__link {
  position: relative;
  display: inline-block;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition),
    padding-left 250ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Arrow slides in as the link steps right */
.site-footer__link::before {
  content: "\2192";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-0.375rem);
  color: var(--clr-accent);
  transition: opacity var(--transition),
    transform 250ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.site-footer__link:hover {
  color: var(--clr-white);
  padding-left: 1.375rem;
}

.site-footer__link:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Contact column */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  font-size: 0.9375rem;
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  line-height: 1.6;
}

.site-footer__contact svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
  color: var(--clr-accent);
}

.site-footer__contact strong {
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.92);
}

/* Contact and legal links keep still — no stepping arrow */
.site-footer__contact .site-footer__link::before,
.site-footer__legal .site-footer__link::before {
  content: none;
}

.site-footer__contact .site-footer__link:hover,
.site-footer__legal .site-footer__link:hover {
  padding-left: 0;
}

/* Bottom bar */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-lg);
}

.site-footer__legal .site-footer__link {
  font-size: 0.8125rem;
}

.site-footer__heart {
  color: var(--clr-accent);
}

/* --------------------------------------------------------------------------
   11. Floating support widget
   Works without JavaScript (hover expands it); JS adds the timed
   auto-expand and collapse.
   -------------------------------------------------------------------------- */

.chat-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  height: 3.5rem;
  border-radius: 999px;
  background-color: rgba(8, 84, 49, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.4);
  color: var(--clr-white);
  transition:
    box-shadow 300ms ease,
    transform 250ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.chat-fab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px -14px rgba(0, 0, 0, 0.45),
    0 0 0 6px rgba(10, 110, 61, 0.18);
}

.chat-fab:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

.chat-fab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
}

.chat-fab__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* Online indicator — subtle gold */
.chat-fab__dot {
  position: absolute;
  top: 0.625rem;
  right: 0.5625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--clr-accent);
  border: 2px solid var(--clr-primary-deep);
}

.chat-fab__icon {
  position: relative;
}

.chat-fab__label {
  display: flex;
  flex-direction: column;
  max-width: 0;
  padding-right: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 500ms cubic-bezier(0.34, 1.3, 0.64, 1),
    padding 500ms cubic-bezier(0.34, 1.3, 0.64, 1),
    opacity 300ms ease 100ms;
}

.chat-fab.is-open .chat-fab__label,
.chat-fab:hover .chat-fab__label,
.chat-fab:focus-visible .chat-fab__label {
  max-width: 11rem;
  padding-right: 1.375rem;
  opacity: 1;
}

.chat-fab__label strong {
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.chat-fab__label small {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Gentle pulse once every 20 seconds */
@media (prefers-reduced-motion: no-preference) {
  .chat-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: chat-pulse 20s ease-out infinite;
    pointer-events: none;
  }
}

@keyframes chat-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(233, 161, 59, 0.35);
  }

  5% {
    box-shadow: 0 0 0 16px rgba(233, 161, 59, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(233, 161, 59, 0);
  }
}

/* ----- Responsive: CTA band + footer ----- */

@media (max-width: 64rem) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 40rem) {
  .cta-band {
    padding-block: var(--space-2xl);
  }

  .cta-band__panel {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-xl) var(--space-lg);
  }

  .cta-band__btn {
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-lg);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .chat-fab {
    bottom: 1rem;
    right: 1rem;
  }
}

/* --------------------------------------------------------------------------
   12. Cinematic layer
   Word-by-word masked title reveals + scroll progress bar.
   (Parallax is applied inline by main.js — transform only.)
   -------------------------------------------------------------------------- */

/* Each word sits inside an overflow mask and rises into place when its
   [data-reveal] ancestor becomes .is-revealed. The padding/margin pair
   keeps descenders (g, j, y) from clipping. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.split-word > span {
  display: inline-block;
  will-change: transform;
}

html.js [data-reveal] .split-word > span {
  transform: translateY(115%);
  transition: transform 750ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i) * 60ms + 120ms);
}

html.js [data-reveal].is-revealed .split-word > span {
  transform: none;
}

/* Reading progress — a quiet gold line across the very top */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--clr-accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: calc(var(--z-header) + 5);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   13. Support Center panel — Intercom-style messenger
   Anchored above the floating widget, bottom-right. No overlay: the page
   stays interactive; outside clicks and ESC close the panel.
   -------------------------------------------------------------------------- */

.support-panel {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: 5.75rem; /* clears the chat fab beneath */
  z-index: 110;
  display: flex;
  flex-direction: column;
  width: min(25rem, calc(100vw - 2rem)); /* ~400px */
  height: min(37.5rem, calc(100vh - 8rem)); /* ~600px */
  height: min(37.5rem, calc(100svh - 8rem));
  background-color: var(--clr-white);
  border: 1px solid rgba(16, 33, 24, 0.06);
  border-radius: 1.25rem; /* 20px */
  box-shadow:
    0 2px 4px rgba(16, 33, 24, 0.05),
    0 32px 64px -20px rgba(16, 33, 24, 0.35);
  overflow: hidden;
  transform-origin: bottom right;
  animation: support-in 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.support-panel[hidden] {
  display: none;
}

.support-panel.is-closing {
  animation: support-out 220ms ease both;
}

@keyframes support-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes support-out {
  from {
    opacity: 1;
    transform: none;
  }

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

/* ----- Header — messenger masthead ----- */

.support-panel__header {
  position: relative;
  flex-shrink: 0;
  padding: var(--space-lg);
  background-color: var(--clr-primary-deep);
  color: var(--clr-white);
  overflow: hidden;
}

.support-panel__header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    18rem 10rem at 90% -20%,
    rgba(233, 161, 59, 0.18),
    transparent 60%
  );
  pointer-events: none;
}

.support-panel__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.support-panel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.support-panel__badge svg {
  width: 1.25rem;
  height: 1.25rem;
}

.support-panel__title {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--clr-white);
}

.support-panel__status {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.support-panel__status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--clr-accent);
}

.support-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--clr-white);
  transition: background-color var(--transition);
}

.support-panel__close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.support-panel__close:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

.support-panel__close svg {
  width: 1rem;
  height: 1rem;
}

.support-panel__welcome {
  position: relative;
  margin-top: var(--space-md);
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

/* ----- Body — scrollable content ----- */

.support-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
}

.support-panel__label {
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.support-panel__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.support-action {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  animation: support-item 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i) * 60ms + 120ms);
  transition:
    border-color var(--transition),
    background-color var(--transition),
    transform 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.support-action:hover {
  border-color: rgba(10, 110, 61, 0.3);
  background-color: var(--clr-primary-tint);
  transform: translateY(-2px);
}

@keyframes support-item {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.support-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--clr-primary-tint);
  color: var(--clr-primary);
  transition: transform 250ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.support-action:hover .support-action__icon {
  transform: scale(1.08);
}

.support-action__icon svg {
  width: 1rem;
  height: 1rem;
}

.support-action__text {
  min-width: 0;
  flex: 1;
}

.support-action__text strong {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-ink);
}

.support-action__text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.0625rem;
  font-size: 0.75rem;
  color: var(--clr-muted);
}

.support-action__arrow {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--clr-primary);
  opacity: 0;
  transform: translateX(-0.25rem);
  transition:
    opacity var(--transition),
    transform 250ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.support-action:hover .support-action__arrow {
  opacity: 1;
  transform: none;
}

/* ----- Note + hours ----- */

.support-panel__note {
  margin-top: var(--space-lg);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--clr-muted);
}

.support-panel__hours {
  margin-top: var(--space-md);
  padding: var(--space-2xs) var(--space-md);
  background-color: var(--clr-surface);
  border-radius: var(--radius-lg);
}

.support-panel__hours > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.support-panel__hours > div + div {
  border-top: 1px solid var(--clr-border);
}

.support-panel__hours dt {
  font-size: 0.8125rem;
  color: var(--clr-muted);
}

.support-panel__hours dd {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-ink);
}

/* ----- Bottom CTA ----- */

.support-panel__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.support-panel__cta .btn {
  min-height: 2.875rem;
  border-radius: var(--radius-lg);
}

.support-panel__cta-link {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-primary);
  transition: color var(--transition);
}

.support-panel__cta-link:hover {
  color: var(--clr-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- Small screens ----- */

@media (max-width: 30rem) {
  .support-panel {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    bottom: 5.25rem;
    height: min(37.5rem, calc(100svh - 7rem));
  }
}

/* --------------------------------------------------------------------------
   14. Public forms — membership + contact
   -------------------------------------------------------------------------- */

.form {
  padding: var(--space-xl);
  background-color: var(--clr-white);
  border: 1px solid rgba(16, 33, 24, 0.06);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 1px rgba(16, 33, 24, 0.03),
    0 16px 40px -24px rgba(16, 33, 24, 0.16);
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-ink);
}

.form-field label small {
  font-weight: var(--fw-regular);
  color: var(--clr-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.6875rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--clr-ink);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367746d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.875rem;
  cursor: pointer;
}

.form-field textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.6;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-tint);
}

.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
  border-color: #c53030;
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.1);
}

.form-field__error {
  display: none;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: #c53030;
}

.form-field.is-invalid .form-field__error {
  display: block;
}

.form-field__hint {
  font-size: 0.75rem;
  color: var(--clr-muted, #67746d);
}

/* Hide the hint once an error is showing, to avoid duplicate lines */
.form-field.is-invalid .form-field__hint {
  display: none;
}

.form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--clr-border);
}

.form__hint {
  max-width: 26rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--clr-muted);
}

.form__actions .btn {
  min-height: 3rem;
  border-radius: var(--radius-md);
  padding-inline: var(--space-xl);
}

/* Success panel — shown after the email is composed */
.form__success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: var(--clr-primary-tint);
  border: 1px solid rgba(10, 110, 61, 0.25);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-primary-dark);
}

.form__success[hidden] {
  display: none;
}

.form__success svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

@media (max-width: 40rem) {
  .form {
    padding: var(--space-lg);
  }

  .form__grid {
    grid-template-columns: 1fr;
  }

  .form__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   15. Topbar utility links (Shop, Education) — width management
   The topbar carries more items now; at laptop widths the second phone
   number yields space first.
   -------------------------------------------------------------------------- */

@media (max-width: 78rem) {
  .topbar__contacts .topbar__link:last-of-type {
    display: none;
  }
}

@media (max-width: 70rem) {
  .topbar__contacts .topbar__divider {
    display: none;
  }

  .topbar__contacts .topbar__link:nth-of-type(2) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   16. Member login modal
   -------------------------------------------------------------------------- */

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.login-modal[hidden] {
  display: none;
}

.login-modal__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(6, 32, 20, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  animation: support-fade 280ms ease both;
}

.login-modal.is-closing .login-modal__scrim {
  animation: support-fade-out 220ms ease both;
}

.login-modal__dialog {
  position: relative;
  width: min(100%, 25rem);
  padding: var(--space-xl);
  background-color: var(--clr-white);
  border-radius: 1.125rem;
  box-shadow:
    0 2px 4px rgba(16, 33, 24, 0.06),
    0 40px 80px -24px rgba(16, 33, 24, 0.45);
  animation: support-rise 400ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.login-modal.is-closing .login-modal__dialog {
  animation: support-sink 220ms ease both;
}

@keyframes support-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes support-sink {
  to {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
}

.login-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--clr-surface);
  color: var(--clr-muted);
  transition: background-color var(--transition), color var(--transition);
}

.login-modal__close:hover {
  background-color: var(--clr-primary-tint);
  color: var(--clr-primary);
}

.login-modal__close svg {
  width: 1rem;
  height: 1rem;
}

.login-modal__logo {
  width: 7rem;
  height: auto;
}

.login-modal__title {
  margin-top: var(--space-lg);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.login-modal__sub {
  margin-top: var(--space-2xs);
  font-size: 0.9375rem;
  color: var(--clr-muted);
}

.login-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.login-modal__passwrap {
  position: relative;
}

.login-modal__passwrap input {
  width: 100%;
  padding-right: 2.75rem;
}

.login-modal__eye {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--clr-muted);
  transition: color var(--transition);
}

.login-modal__eye:hover {
  color: var(--clr-primary);
}

.login-modal__eye svg {
  width: 1.125rem;
  height: 1.125rem;
}

.login-modal__submit {
  min-height: 3rem;
  border-radius: var(--radius-md);
  margin-top: var(--space-xs);
}

.login-modal__submit.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.login-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: 0.8125rem;
}

.login-modal__foot a {
  font-weight: var(--fw-semibold);
  color: var(--clr-primary);
}

.login-modal__foot a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Result banner — .acc-alert

   The same class the dashboard uses, defined here because the public and
   auth pages (login, forgot password, join) load components.css and never
   dashboard.css. Without this, the markup renders unstyled on those pages and
   the icon comes out at its natural size — a check mark the height of the
   card, which is exactly what it did on the login page.

   No page loads both stylesheets, so there is no rule fighting the other.
   Keep the two in step if either is restyled.

   Server-rendered, no JavaScript:
     nothing to say  -> keep the `hidden` attribute
     succeeded       -> render it as-is (green)
     needs attention -> add acc-alert--warn
     refused         -> add acc-alert--error
   ========================================================================== */

.acc-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #146c34;
  background-color: #eefaf1;
  border: 1px solid #c7ead3;
  border-radius: 0.625rem;
  text-align: left;
}

/* The icon is decorative and fixed-size. flex: 0 0 auto stops it stretching
   to the height of a message that runs to two or three lines. */
.acc-alert svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin-top: 0.05rem;
}

.acc-alert[hidden] {
  display: none;
}

/* Failure — same banner, red. */
.acc-alert--error {
  color: #8a1c1c;
  background-color: #fdf0f0;
  border-color: #f3cccc;
}

/* Went through, but the member needs to know something. */
.acc-alert--warn {
  color: #8a5a12;
  background-color: #fdf6e9;
  border-color: #f0dcb8;
}