/* Midnight navy, sculpted gold and restrained light. Shared across every route. */
:root {
  --navy: #07162e;
  --navy-raised: #132d54;
  --gold-light: #ffebbd;
  --gold-edge: #92703d;
}
.utility { background: #040e21; color: #b3c0d7; }
.demo-bar { background: linear-gradient(100deg, #c39b59, #f4dfb1 48%, #d3b06b); color: #182338; }
.nav {
  background: linear-gradient(125deg, #102746, #07162e 65%);
  color: #f4f6fc;
  border-bottom: 1px solid #d7b57266;
  box-shadow: 0 8px 28px #02091c35, inset 0 1px 0 #ffffff0c;
}
.nav-inner { min-height: 108px; }
.brand { gap: 14px; }
.brand img {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0 #b68b46) drop-shadow(1px 1px 0 #765123)
    drop-shadow(1px 1px 0 #4b331b) drop-shadow(0 6px 7px #0009) drop-shadow(0 0 12px #eac78448);
  transition: filter .28s ease, transform .28s ease;
}
.brand:hover img {
  filter: drop-shadow(0 1px 0 #cba050) drop-shadow(1px 1px 0 #765123)
    drop-shadow(1px 1px 0 #4b331b) drop-shadow(0 8px 9px #0009) drop-shadow(0 0 18px #eac78480);
  transform: translateY(-2px);
}
.brand strong {
  color: #f5dcaa;
  text-shadow: 0 1px 0 #6c4925, 0 3px 7px #0007;
  font-size: 20px;
}
.brand small { color: #bfcee4; font-size: 11px; letter-spacing: .18em; }
.nav-links { gap: 21px; }
.nav-links a[aria-current=page], .nav-links a:hover { color: #ffe6b0; }
.menu-toggle { color: #ffe9bb; border-color: #ccaa6b77; border-radius: 8px; }

/* Two light sources, a visible lower edge, and a small press displacement. */
.button, .button.dark, .button.light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #f8dba2;
  border-radius: 10px;
  color: #15213a;
  background: linear-gradient(175deg, #fff0cc 0%, #f0d296 22%, #d6aa5e 70%, #edc984 100%);
  text-shadow: 0 1px 0 #fff6da88;
  box-shadow: inset 0 1px 0 #fff9e8, inset 0 -2px 1px #9c733955,
    0 4px 0 #88622e, 0 9px 16px #02091933, 0 0 21px #e5b96240;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, #ffffff55 48%, transparent 71%);
  transform: translateX(-140%);
  transition: transform .65s ease;
}
.button:hover, .button.dark:hover, .button.light:hover {
  color: #101c30;
  background: linear-gradient(175deg, #fff5dc, #f6d79b 25%, #dfb56b 72%, #f3d391);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 #fffbea, inset 0 -2px 1px #9c733944,
    0 6px 0 #88622e, 0 14px 22px #02091940, 0 0 34px #e9bd6d75;
}
.button:hover::before { transform: translateX(140%); }
.button:active, .button.dark:active, .button.light:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 5px #72552644, 0 1px 0 #88622e, 0 3px 8px #02091933, 0 0 17px #e5b96240;
}
.button.outline, .band .button, .finder {
  color: #f7dcaa;
  text-shadow: 0 1px 1px #0009;
  background: linear-gradient(170deg, #21436f, #102848 42%, #07152d);
  border: 1px solid #d9b477a6;
  box-shadow: inset 0 1px 0 #7188a455, inset 0 -1px 0 #0007,
    0 4px 0 #030b1c, 0 9px 20px #0005, 0 0 21px #e5b96235;
}
.button.outline:hover, .band .button:hover, .finder:hover {
  color: #fff0cf;
  background: linear-gradient(170deg, #2b5286, #16335a 42%, #0a1b37);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 #b5c6dd66, 0 6px 0 #030b1c,
    0 13px 24px #0005, 0 0 30px #e5b96265;
}
.button.outline:active, .band .button:active, .finder:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 5px #0005, 0 1px 0 #030b1c, 0 0 16px #e5b96235;
}
.button:focus-visible, .finder:focus-visible { outline: 3px solid #ad792a; outline-offset: 7px; }
.hero .button:focus-visible, .nav .button:focus-visible, .dark-panel .button:focus-visible,
.finder:focus-visible { outline-color: #fff0c9; }
.finder { transition: transform .22s, box-shadow .22s; border-radius: 16px; padding: 14px 23px; }
.finder:before { color: #ffe6ad; text-shadow: 0 0 12px #edc677aa; }
.finder:before { content: none; }
.trust > .wrap { align-items: center; }
.trust-item { font-weight: 600; }
.trust-item small { font-weight: 400; }
.partner-logo { display: block; width: 230px; max-width: 100%; height: auto; object-fit: contain; }
.footer-partner { display: inline-block; background: #fff; border-radius: 5px; padding: 12px 15px; margin-top: 22px; max-width: 100%; }
.footer-partner img { width: 210px; max-width: 100%; height: auto; }
@media (max-width: 560px) {
  .trust > .wrap { grid-template-columns: minmax(0,1fr); gap: 0; padding: 22px 0 10px; }
  .trust-item { padding: 13px 0; font-size: 14px; border-bottom: 1px solid #e1e7f0; }
  .trust-item:last-child { border-bottom: 0; }
  .trust-item small { font-size: 12px; }
  .partner-item { padding-top: 0; padding-bottom: 20px; }
  .partner-logo { width: 235px; }
}
.actions { gap: 18px; }
.hero h1 span {
  color: #ecc982;
  background: linear-gradient(115deg, #fff2d1, #e5bc72 42%, #b58948 69%, #f4dca4 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px #070e1b) drop-shadow(0 0 22px #cfab4c17);
}
.hero-note {
  background: linear-gradient(145deg, #16335aca, #07162ee8);
  border: 1px solid #d9b77770;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #ffffff20, 0 15px 40px #02091b55;
}
.page-top, .dark-panel {
  background: radial-gradient(ellipse at 95% 5%, #1c3d65 0%, transparent 55%),
    linear-gradient(125deg, #0e2648, #06152f 70%);
}
.dark-panel, .page-top { border-bottom: 1px solid #d9b77735; }
.footer { background: linear-gradient(130deg, #0a1c38, #040d1e 70%); border-top: 1px solid #d9b77750; }
.remote { background: linear-gradient(130deg, #edf2fa, #dfe8f6); }
.remote-list div, .remote-list { border-color: #bdcadf; }
.remote-list small { color: #53657f; }
.band {
  background: linear-gradient(120deg, #f5e4c1, #dfbe7e 55%, #f0d7a5);
  border: 1px solid #dcc28d;
  border-radius: 15px;
  box-shadow: inset 0 1px 0 #fff9e8, 0 14px 36px #11244216;
}
.band .eyebrow { color: #685027; }
.card {
  border-radius: 13px;
  border-color: #dbe3ef;
  background: linear-gradient(145deg, #fff, #f9fbff);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px #0a214b09;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: #c4a366;
  box-shadow: inset 0 1px 0 #fff, 0 14px 30px #0a214b13, 0 0 22px #dfbd791c;
}
.card-foot > span:last-child {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex-shrink: 0;
  color: #f4d799;
  border: 1px solid #b99558;
  border-radius: 50%;
  background: linear-gradient(150deg, #29496f, #07162e);
  box-shadow: inset 0 1px 0 #ffffff38, 0 3px 6px #07162e26;
}
.card-foot { align-items: center; }
.booking-card { border-radius: 12px; box-shadow: 0 16px 45px #102a5010; }
.filter { border-radius: 8px; }
.filter.active {
  color: #f5dba8;
  border-color: #b2925c;
  background: linear-gradient(160deg, #22436b, #07162e);
  box-shadow: inset 0 1px 0 #fff3, 0 3px 0 #030b1c, 0 0 14px #dab57425;
}
.filter:active { transform: translateY(1px); }
.photo-caption { border: 1px solid #dbb97755; border-radius: 8px; }
.editorial-image, .portrait { border-radius: 14px; }
.finder-option { border-radius: 8px; box-shadow: inset 0 1px 0 #fff; }
.finder-option:hover { background: #faf2e2; box-shadow: 0 4px 12px #07162e0d; }
dialog { border-radius: 14px; }
.home-courses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; }
.home-course {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 135px 48px;
  align-items: center;
  gap: 25px;
  width: 100%;
  padding: 30px 32px;
  border: 1px solid #d7e0ed;
  border-radius: 14px;
  background: linear-gradient(115deg, #fff, #f4f7fc);
  box-shadow: inset 0 1px 0 #fff, 0 7px 22px #0a214b0a;
  transition: border-color .2s, box-shadow .2s;
}
.home-course:hover, .home-course:focus-visible {
  border-color: #b79659;
  box-shadow: 0 10px 28px #0a214b12, 0 0 24px #dfbd791a;
}
.home-course-number { color: #98763b; font-size: 20px; }
.home-course-copy { min-width: 0; }
.home-course-copy .eyebrow { margin-bottom: 10px; font-size: 12px; }
.home-course-copy h3 { margin-bottom: 10px; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.25; }
.home-course-copy p { margin: 0; max-width: 660px; font-size: 16px; }
.home-course-meta { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #53637b; }
.home-course-label { color: #122747; font-weight: 700; }
.home-course-arrow {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid #f8dba2;
  border-radius: 12px;
  color: #15213a;
  background: linear-gradient(170deg, #fff0cc, #d6aa5e 75%, #edc984);
  box-shadow: inset 0 1px 0 #fff9e8, 0 3px 0 #88622e, 0 5px 12px #e5b96240;
  font-family: Arial, sans-serif;
  font-size: 22px;
}
@media (max-width: 850px) {
  .home-course { grid-template-columns: minmax(0, 1fr) 45px; gap: 18px; padding: 26px; }
  .home-course-number { display: none; }
  .home-course-copy { grid-column: 1; grid-row: 1; }
  .home-course-arrow { grid-column: 2; grid-row: 1; }
  .home-course-meta { grid-column: 1 / -1; grid-row: 2; flex-direction: row; justify-content: space-between; border-top: 1px solid #d7e0ed; padding-top: 15px; }
}
@media (max-width: 560px) {
  .home-course { padding: 22px 20px; column-gap: 12px; }
  .home-course-copy { grid-column: 1 / -1; }
  .home-course-copy h3 { font-size: 21px; }
  .home-course-copy p { font-size: 15px; line-height: 1.6; }
  .home-course-meta { grid-column: 1; align-self: center; border: 0; padding: 0; }
  .home-course-arrow { grid-column: 2; grid-row: 2; width: 39px; height: 39px; }
}
@media (max-width: 1100px) {
  .nav-links { gap: 13px; }
  .brand strong { font-size: 18px; }
  .brand small { font-size: 10px; }
  .brand img { width: 56px; height: 56px; }
}
@media (max-width: 850px) {
  .nav-inner { min-height: 88px; }
  .nav-links { background: linear-gradient(120deg, #102746, #07162e); border-color: #d7b57266; }
  .nav-links .button { align-self: flex-start; }
}
@media (max-width: 560px) {
  .brand { gap: 10px; }
  .brand strong { font-size: 17px; }
  .brand small { font-size: 9px; }
  .brand img { width: 52px; height: 52px; }
  .nav-inner { gap: 12px; }
  .actions { gap: 16px; }
  .hero .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 355px; }
  .hero .actions .button {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 14px 20px;
    white-space: normal;
    line-height: 1.4;
    gap: 12px;
    text-align: center;
  }
  .hero .actions .button > span { flex-shrink: 0; }
  .finder { padding: 11px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .finder, .brand img, .card { transition: none; }
  .button::before { display: none; }
  .button:hover, .button:active, .finder:hover, .finder:active, .card:hover, .brand:hover img { transform: none; }
  .button:is(.dark,.light,.outline):is(:hover,:active), .band .button:is(:hover,:active) { transform: none; }
}

/* Editorial training series: keep the complete scene visible on every screen. */
.training-visual {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d9b77755;
  border-radius: 18px;
  background: #0b203c;
  box-shadow: 0 20px 50px #020b2033, 0 0 32px #d6aa5e12;
}
.training-visual > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.training-visual figcaption {
  position: relative;
  padding: 26px 30px 30px;
  background: linear-gradient(125deg, #18365a, #091b34);
  border-top: 1px solid #d9b77766;
}
.training-visual figcaption .eyebrow { display: block; color: #e4bf78; margin-bottom: 12px; font-size: 14px; letter-spacing: .12em; }
.training-visual figcaption strong { display: block; color: #f9f4e9; font-family: Manrope, Arial, sans-serif; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.2; font-weight: 500; letter-spacing: -.035em; }
.training-visual figcaption p { color: #d2ddec; margin: 12px 0 0; font-size: 15px; }
.community-points { display: grid; gap: 0; margin-top: 30px; }
.community-points span { display: block; padding: 12px 0; border-top: 1px solid #bdcadf; font-size: 15px; color: #314967; }
.hero-photo { inset: 0; width: 100%; object-position: center; }
@media (max-width: 850px) {
  .training-visual { width: 100%; }
  .hero-photo { opacity: .85; object-position: 65% center; }
}
@media (max-width: 560px) {
  .training-visual figcaption { padding: 22px 22px 25px; }
  .training-visual figcaption .eyebrow { font-size: 14px; letter-spacing: .08em; }
  .hero-photo { object-position: 72% center; }
}