:root {
  --color-ink: #17211d;
  --color-road: #0b3a78;
  --color-signal: #f6c445;
  --color-kerb: #eef5fb;
  --color-leaf: #1769aa;
  --color-sand: #e7e1d3;
  --shadow-panel: 0 18px 45px rgb(23 33 29 / 8%);
  --shadow-lift: 0 18px 45px rgb(23 33 29 / 12%);
  --radius-control: 999px;
  --radius-panel: 22px;
  --radius-large: 30px;
  --space-section-y: clamp(3.5rem, 7vw, 6rem);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.5;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgb(246 196 69 / 22%);
}

:where(a, button, input, textarea, select, summary, [role="button"]):focus-visible {
  outline: 3px solid rgb(246 196 69 / 82%);
  outline-offset: 3px;
}

:where(button, summary, [role="button"]) {
  cursor: pointer;
}

.rounded-md {
  border-radius: var(--radius-panel) !important;
}

.rounded,
.rounded-full {
  border-radius: 999px !important;
}

:where(a, button, input, select).rounded-md,
:where(a, button, input, select).rounded {
  border-radius: var(--radius-control) !important;
}

:where(textarea).rounded-md,
:where(textarea).rounded {
  border-radius: 18px !important;
}

body > header {
  background: rgb(255 255 255 / 94%) !important;
  border-bottom: 1px solid rgb(23 33 29 / 8%) !important;
  box-shadow: 0 14px 34px rgb(23 33 29 / 7%);
}

body > header nav {
  min-height: 64px;
}

#mobile-nav-toggle {
  border-radius: 999px !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

#mobile-nav-toggle:hover {
  background: var(--color-kerb);
  border-color: rgb(23 105 170 / 30%);
  color: var(--color-leaf);
}

#primary-nav a {
  align-items: center;
  border-radius: 999px !important;
  display: inline-flex;
  justify-content: center;
  min-height: 42px;
  padding: 0.55rem 0.9rem;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

#primary-nav a:not([href*="contact"]) {
  color: rgb(23 33 29 / 78%);
}

#primary-nav a:not([href*="contact"]):hover,
#primary-nav a[aria-current="page"]:not([href*="contact"]) {
  background: rgb(23 105 170 / 10%);
  color: var(--color-leaf);
}

#primary-nav a[href*="contact"] {
  background: var(--color-signal);
  box-shadow: 0 10px 24px rgb(23 33 29 / 10%);
  color: var(--color-ink);
  font-weight: 950;
}

#primary-nav a[href*="contact"]:hover {
  background: var(--color-road);
  color: #fff;
  transform: translateY(-1px);
}

:where(a.rounded-md, button.rounded-md, .area-tab, .lesson-choice span, .footer-icon-link) {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

:where(a.rounded-md, button.rounded-md, .area-tab, .footer-icon-link):hover {
  transform: translateY(-2px);
}

:where(a.rounded-md, button.rounded-md, .area-tab, .footer-icon-link):active {
  transform: translateY(0);
}

body:not(.admin-shell) :where(main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), main textarea, main select) {
  min-height: 48px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

body:not(.admin-shell) :where(main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), main textarea, main select):focus {
  border-color: rgb(23 105 170 / 58%) !important;
  box-shadow: 0 0 0 4px rgb(23 105 170 / 14%);
}

body:not(.admin-shell) :where(main section > div > form, main aside.rounded-md, main article.rounded-md, #deal-list > *, #instructor-profile > *) {
  border: 1px solid rgb(11 58 120 / 8%);
}

body:not(.admin-shell) :where(main section > div > form, main aside.rounded-md, #deal-list > *, #instructor-profile > *) {
  box-shadow: var(--shadow-panel);
}

body:not(.admin-shell) :where(main article.rounded-md) {
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 12px 30px rgb(23 33 29 / 5%);
}

body:not(.admin-shell) :where(a.rounded-md.bg-signal, button.rounded-md.bg-signal) {
  box-shadow: 0 12px 28px rgb(23 33 29 / 10%);
}

body:not(.admin-shell) :where(a.rounded-md.bg-signal, button.rounded-md.bg-signal):hover {
  box-shadow: 0 16px 36px rgb(11 58 120 / 18%);
}

.hero-area-rotator {
  display: inline-block;
  min-inline-size: 9ch;
  text-shadow: 0 10px 30px rgb(0 0 0 / 18%);
  white-space: nowrap;
}

.hero-area-rotator::after {
  animation: hero-area-caret 900ms steps(2, end) infinite;
  background: currentColor;
  content: "";
  display: inline-block;
  height: 0.82em;
  margin-left: 0.08em;
  transform: translateY(0.08em);
  width: 0.075em;
}

@keyframes hero-area-caret {
  0%,
  46% {
    opacity: 1;
  }

  47%,
  100% {
    opacity: 0;
  }
}

.section-anchor {
  scroll-margin-top: 76px;
}

@media (min-width: 640px) {
  .section-anchor {
    scroll-margin-top: 84px;
  }
}

@media (min-width: 1024px) {
  .section-anchor {
    scroll-margin-top: 88px;
  }
}

.gallery-image {
  aspect-ratio: 4 / 3;
  background: var(--color-sand);
  border-radius: var(--radius-panel);
}

.review-slide {
  border-radius: var(--radius-panel) !important;
  box-shadow: 0 18px 42px rgb(23 33 29 / 7%);
  min-width: 0;
  opacity: 0.62;
  transform: scale(0.92);
  transform-origin: center;
  transition: border-color 420ms ease, box-shadow 420ms ease, opacity 420ms ease, transform 420ms ease;
}

.review-slide-active {
  border-color: rgb(23 105 170 / 30%);
  box-shadow: 0 24px 64px rgb(23 33 29 / 14%);
  opacity: 1;
  transform: scale(1);
}

.review-slide blockquote,
.review-slide p,
.review-slide span {
  overflow-wrap: anywhere;
}

.deal-offer-card {
  border-radius: var(--radius-panel) !important;
  box-shadow: 0 14px 34px rgb(23 33 29 / 7%);
  min-width: 0;
  opacity: 0.58;
  transform: scale(0.93);
  transform-origin: center;
  transition: border-color 420ms ease, box-shadow 420ms ease, opacity 420ms ease, transform 420ms ease;
}

.deal-offer-card-active {
  border-color: rgb(246 196 69 / 72%);
  box-shadow: 0 22px 58px rgb(23 33 29 / 12%);
  opacity: 1;
  transform: scale(1);
}

.deal-offer-card h3,
.deal-offer-card p,
.deal-offer-card span {
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .deal-carousel {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .deal-offer-card[data-deal-position="previous"],
  .deal-offer-card[data-deal-position="next"] {
    display: none;
  }

  .deal-offer-card[data-deal-position="active"] {
    min-height: 0;
    opacity: 1;
    transform: none;
    width: 100%;
  }
}

.current-offers-panel {
  border-radius: var(--radius-large) !important;
  position: relative;
}

.current-offers-panel::before {
  background: var(--color-signal);
  content: "";
  height: 6px;
  inset: 0 0 auto;
  position: absolute;
}

.coverage-map-frame {
  border-radius: var(--radius-large) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 18px 44px rgb(23 33 29 / 10%);
}

.premium-card,
.admin-nav-card,
.admin-view,
#instructors,
#services,
#pass-gallery > *,
#admin-posts article,
#admin-deals article,
#admin-reviews article,
#admin-areas article,
#admin-instructors article,
#admin-users article {
  border-radius: var(--radius-panel) !important;
}

@media (prefers-reduced-motion: reduce) {
  :where(a.rounded-md, button.rounded-md, .area-tab, .footer-icon-link):hover,
  :where(a.rounded-md, button.rounded-md, .area-tab, .footer-icon-link):active {
    transform: none;
  }

  .hero-area-rotator {
    transition: none;
  }

  .hero-area-rotator::after {
    animation: none;
    opacity: 0;
  }

  .review-slide,
  .deal-offer-card {
    transition: none;
  }
}

summary::-webkit-details-marker {
  display: none;
}

.admin-shell {
  background:
    linear-gradient(180deg, #eef5fb 0%, #ffffff 46%, #eef5fb 100%);
}

.admin-command-panel {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 96%), rgb(238 245 251 / 92%)),
    #fff !important;
  border: 1px solid rgb(255 255 255 / 72%) !important;
  box-shadow: 0 24px 70px rgb(23 33 29 / 13%) !important;
  padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.admin-brand-card {
  border-radius: 16px !important;
  box-shadow: 0 14px 32px rgb(11 58 120 / 10%);
}

.admin-session-panel {
  background: rgb(255 255 255 / 82%) !important;
  border-color: rgb(11 58 120 / 14%) !important;
  box-shadow: 0 14px 34px rgb(23 33 29 / 8%);
}

.admin-session-panel:not(.hidden) {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.admin-auth-grid {
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(11 58 120 / 10%);
  border-radius: var(--radius-panel);
  padding: 1rem;
}

.admin-nav-card {
  border: 1px solid rgb(11 58 120 / 10%) !important;
  box-shadow: 0 16px 38px rgb(23 33 29 / 7%) !important;
  overflow: hidden;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.admin-nav-card::before {
  background: var(--color-signal);
  content: "";
  height: 5px;
  inset: 0 0 auto;
  opacity: 0;
  position: absolute;
  transition: opacity 180ms ease;
}

.admin-nav-card:hover {
  border-color: rgb(23 105 170 / 28%) !important;
  box-shadow: 0 22px 54px rgb(23 33 29 / 12%) !important;
  transform: translateY(-2px);
}

.admin-nav-card[aria-pressed="true"] {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 98%), rgb(238 245 251 / 96%)),
    #fff !important;
  border-color: rgb(23 105 170 / 34%) !important;
  box-shadow: 0 0 0 3px rgb(246 196 69 / 28%), 0 22px 58px rgb(11 58 120 / 15%) !important;
}

.admin-nav-card[aria-pressed="true"]::before {
  opacity: 1;
}

.admin-config-panel {
  background: rgb(255 255 255 / 74%) !important;
  border-color: rgb(11 58 120 / 12%) !important;
}

.admin-config-panel[open] {
  box-shadow: 0 16px 44px rgb(23 33 29 / 8%);
}

.admin-config-panel summary {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.admin-config-panel summary::before {
  background: var(--color-signal);
  border-radius: 999px;
  content: "";
  height: 10px;
  width: 10px;
}

.admin-view {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(255 255 255 / 96%)),
    #fff !important;
  border: 1px solid rgb(11 58 120 / 10%);
  box-shadow: 0 24px 70px rgb(23 33 29 / 13%) !important;
  padding: clamp(1.15rem, 2.4vw, 2rem) !important;
}

.admin-view h2,
.admin-view h3,
.admin-view h4 {
  color: var(--color-road);
  letter-spacing: 0;
}

.admin-view form {
  background: rgb(238 245 251 / 58%);
  border: 1px solid rgb(11 58 120 / 9%);
  border-radius: var(--radius-panel);
  padding: clamp(1rem, 2vw, 1.35rem);
}

.admin-view article {
  background: #fff;
  border-color: rgb(11 58 120 / 10%) !important;
  box-shadow: 0 12px 30px rgb(23 33 29 / 6%);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.admin-view article:hover {
  border-color: rgb(23 105 170 / 24%) !important;
  box-shadow: 0 18px 44px rgb(23 33 29 / 10%);
  transform: translateY(-1px);
}

.admin-view article span.rounded,
.admin-view article span.rounded-md {
  border-radius: 999px !important;
}

.admin-shell label,
.admin-shell legend {
  color: var(--color-road);
}

.admin-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), textarea, select) {
  background: #fff;
  border-color: rgb(11 58 120 / 14%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
  min-height: 48px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.admin-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), textarea, select):focus {
  border-color: rgb(23 105 170 / 56%) !important;
  box-shadow: 0 0 0 4px rgb(23 105 170 / 13%);
  outline: 0;
}

.admin-shell textarea {
  line-height: 1.55;
}

.admin-shell #area-map-picker {
  background:
    linear-gradient(135deg, #d7e7f5, #fff3c4) !important;
  border-color: rgb(11 58 120 / 14%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 16px 34px rgb(23 33 29 / 8%);
}

.admin-shell #map-keys label,
.admin-shell label:has(input[type="checkbox"]) {
  border-radius: 16px !important;
}

.admin-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
}

.map-area {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.map-area:hover,
.map-area-active {
  opacity: 1;
  transform: scale(1.05);
}

.lesson-choice span {
  align-items: center;
  border: 1px solid rgb(23 33 29 / 14%);
  border-radius: var(--radius-control);
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  font-weight: 900;
  justify-content: center;
  min-height: 44px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.lesson-choice input:checked + span {
  background: var(--color-road);
  border-color: var(--color-road);
  box-shadow: 0 10px 22px rgb(11 58 120 / 16%);
  color: #fff;
}

.instructor-match {
  border-color: var(--color-leaf);
  box-shadow: 0 0 0 3px rgb(23 105 170 / 16%);
}

.instructor-match-pulse {
  animation: instructor-match-pulse 1.4s ease-in-out infinite;
}

@keyframes instructor-match-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgb(23 105 170 / 16%);
  }

  50% {
    box-shadow: 0 0 0 7px rgb(246 196 69 / 28%);
  }
}

.icon-action {
  align-items: center;
  background: var(--color-road);
  border-radius: var(--radius-control);
  color: #fff;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  border-radius: 999px;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
  width: 44px;
}

.icon-action.hidden {
  display: none;
}

.icon-action:hover {
  background: var(--color-signal);
  color: var(--color-ink);
  transform: translateY(-1px);
}

.icon-action svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  width: 22px;
}

@media (max-width: 480px) {
  .mobile-safe-panel {
    min-width: 0;
    overflow: hidden;
  }

  .mobile-safe-panel input,
  .mobile-safe-panel textarea,
  .mobile-safe-panel select,
  .mobile-safe-panel button {
    min-width: 0;
  }

  .lesson-choice span {
    font-size: 0.8125rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.footer-icon-link {
  align-items: center;
  border: 1px solid rgb(23 33 29 / 12%);
  background: #fff;
  border-radius: 999px;
  color: var(--color-ink);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  width: 42px;
}

.footer-icon-link:hover {
  background: var(--color-signal);
  border-color: var(--color-signal);
  color: var(--color-ink);
  transform: translateY(-1px);
}

.footer-icon-link svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 20px;
}