/* ==========================================================================
   COMPONENTS
   Page-agnostic building blocks. Navbar and Footer markup are built with
   the Homepage (they need the logo asset and final nav content) but reuse
   these same tokens.
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  border: 2px solid transparent;
  min-height: 48px; /* comfortable tap target on mobile */
  transition:
    background-color var(--duration-base) var(--ease-standard),
    background-image var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background-image: var(--gradient-orange);
  color: var(--color-white);
  box-shadow: var(--shadow-glow-orange);
}
.btn-primary:hover {
  box-shadow: 0 12px 32px -6px rgba(237, 113, 19, 0.55);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.btn-secondary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* For use on dark/photo backgrounds, e.g. inside the hero */
.btn-ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover { border-color: var(--color-white); }

.btn-whatsapp {
  background-color: var(--color-success);
  color: var(--color-white);
}
.btn-whatsapp:hover { background-color: #196e3c; }

.btn-block { width: 100%; }

/* ---- Cards ---- */
.card {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background-image: var(--gradient-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-standard);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}
.card:hover::before { transform: scaleX(1); }

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-image: var(--gradient-icon);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  transition: transform var(--duration-base) var(--ease-standard);
}
.card:hover .card-icon { transform: scale(1.08) rotate(-4deg); }

/* ---- Pills / badges (e.g. the trust strip: "Grade 7–12", "Every Saturday") ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background-color: var(--color-blue-pale);
  color: var(--color-primary-dark);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.pill--on-dark {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

/* ---- Forms ---- */
.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-text-dark);
  margin-bottom: var(--space-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  min-height: 48px;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary-dark);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-dark-tint);
}
.field-hint {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.field-error input,
.field-error select,
.field-error textarea {
  border-color: var(--color-error);
}
.field-error-message {
  color: var(--color-error);
  font-size: var(--fs-small);
  margin-top: var(--space-1);
}

/* ---- Checkbox option tile ----
   A selectable card wrapping a checkbox — used anywhere a person picks
   from a set of options (enrolment form services/subjects, the Subjects
   page plan builder). Layout of the options themselves (e.g. grid
   columns) is defined per page, alongside whatever it's used for. */
.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-body);
  transition: border-color var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}
.checkbox-option:hover { border-color: var(--color-blue-mid); }
.checkbox-option:has(input:checked) {
  border-color: var(--color-primary-dark);
  background-color: var(--color-primary-dark-tint);
}
.checkbox-option input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--color-primary-dark);
  cursor: pointer;
  flex-shrink: 0;
}

/* ---- Status states: loading / success / error / empty ----
   Used wherever a page waits on data or user action (forms, galleries). */
.state-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  color: var(--color-text-muted);
}
.state-message--error { color: var(--color-error); }
.state-message--success { color: var(--color-success); }

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-blue-pale);
  border-top-color: var(--color-primary-dark);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1600ms; }
}

/* ---- Signature motif: Orbit Arc ----
   The logo's identity is two elliptical orbit rings crossing behind a
   rising figure. Rather than reusing the literal logo mark as decoration,
   this motif abstracts it into a single thin arc that appears once per
   page — behind a hero heading, or as a section transition — as the one
   deliberate visual signature. Never tiled or repeated as a pattern.
   ---------------------------------------------------------------------- */
.orbit-arc {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 0;
}
.orbit-arc--blue {
  border-top-color: var(--color-blue-mid);
  border-right-color: var(--color-blue-mid);
}
.orbit-arc--orange {
  border-top-color: var(--color-accent-orange);
  border-right-color: var(--color-accent-orange);
}

/* ==========================================================================\n   SITE HEADER / NAVBAR\n   Shared across every page.\n   ========================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}
.site-header__inner {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: 12px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-logo__mark { height: 62px; width: auto; display: block; filter: drop-shadow(0 3px 10px rgba(0,0,0,.15)); }
.site-logo__text {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 1.42rem;
  color: var(--color-white);
  line-height: 1.05;
  display: flex;
  flex-direction: column;
  letter-spacing: -.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.site-logo__sub {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 0.70rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd0a9;
  margin-top: 4px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-nav a:not(.btn) {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.08rem;
  color: rgba(255,255,255,.94);
  padding: 10px 0;
  position: relative;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 2px;
  height: 3px;
  background-color: var(--color-accent-orange);
  border-radius: var(--radius-pill);
  transition: right var(--duration-base) var(--ease-standard);
}
.site-nav a:not(.btn):hover::after { right: 0; }
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn).is-active { color: var(--color-white); }
.site-nav a:not(.btn).is-active::after { right: 0; }
.site-nav__cta { min-height: 50px; padding-inline: 24px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
}
.nav-toggle span { display:block; width:24px; height:2px; background:#fff; border-radius:999px; transition:transform .25s ease,opacity .25s ease; }
.mobile-nav-brand { display:none; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .site-header__inner { min-height: 72px; }
  .site-logo__mark { height: 48px; }
  .site-logo__text { font-size: 1.16rem; }

  /* Mobile drawer: fixed to the viewport and independently scrollable
     vertically. This prevents long menus from hiding Resources / Enrol Now. */
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 88vw);
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(24px) saturate(115%);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 18px var(--space-6) max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease-standard);
    box-shadow: var(--shadow-xl);
  }

  .site-nav.is-open { transform: translateX(0); }

  .mobile-nav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    padding: 4px 0 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(19,69,133,.12);
  }
  .mobile-nav-brand__mark {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 44px;
  }
  .mobile-nav-brand__name {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    font-family: var(--font-display);
    font-weight: var(--fw-extrabold);
    font-size: 1.05rem;
    color: var(--color-primary-dark);
  }
  .mobile-nav-brand__sub {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: var(--fw-semibold);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--color-accent-orange);
  }

  .site-nav ul {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .site-nav li { width: 100%; }
  .site-nav a:not(.btn) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 1.08rem;
    padding: 12px 4px;
  }
  .site-nav__cta {
    width: 100%;
    margin-top: 14px;
    flex: 0 0 auto;
  }
  .nav-toggle { display:flex; }
  body.nav-open {
    overflow: hidden;
    touch-action: pan-y;
  }
}

/* ==========================================================================\n   SITE FOOTER\n   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #0a2c5c 0%, #134585 58%, #0b315f 100%);
  color: var(--color-text-on-dark);
  padding-top: 88px;
}
.site-footer::before,
.site-footer::after { content:""; position:absolute; border-radius:50%; filter:blur(10px); pointer-events:none; }
.site-footer::before { width:280px;height:280px;right:-100px;top:-120px;background:rgba(237,113,19,.18); }
.site-footer::after { width:340px;height:340px;left:-180px;bottom:-180px;background:rgba(123,176,207,.14); }
.site-footer__intro { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:64px; padding:30px 34px; border:1px solid rgba(255,255,255,.14); border-radius:24px; background:rgba(255,255,255,.075); backdrop-filter:blur(12px); }
.site-footer__intro h2 { margin:0 0 8px; color:#fff; font-size:clamp(1.45rem,1.2rem + .8vw,2rem); }
.site-footer__intro p { margin:0; color:rgba(244,247,251,.78); }
.site-footer__intro .btn { flex-shrink:0; }
.site-footer__grid { position:relative; z-index:1; display:grid; grid-template-columns:1.65fr 1fr 1.3fr 1fr; gap:54px; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,.14); }
@media (max-width:760px){ .site-footer__grid{grid-template-columns:1fr 1fr;} .site-footer__intro{flex-direction:column;align-items:flex-start;} }
@media (max-width:460px){ .site-footer__grid{grid-template-columns:1fr;} }
.site-footer__brand img { height:56px; width:auto; margin-bottom:18px; filter:drop-shadow(0 5px 12px rgba(0,0,0,.18)); }
.site-footer__name { font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.15rem;color:#fff;margin-bottom:8px; }
.site-footer__slogan { font-size:var(--fs-small);color:rgba(244,247,251,.72);font-style:italic; }
.site-footer h4 { color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:22px; }
.site-footer__col ul li { margin-bottom:14px; }
.site-footer__col a,.site-footer__col li { font-size:var(--fs-small);color:rgba(244,247,251,.76); }
.site-footer__col a:hover { color:#fff; }
.footer-social { display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:180px; }
.footer-social__icon { width:62px;height:62px;border-radius:18px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.08);transition:transform .25s var(--ease-standard),background .25s ease,border-color .25s ease,box-shadow .25s ease; }
.footer-social__icon svg { width:27px;height:27px; }
.footer-social__icon:hover { background:linear-gradient(135deg,#f3903f,#ed7113);border-color:transparent;transform:translateY(-6px) rotate(-2deg);box-shadow:0 16px 30px rgba(237,113,19,.28); }
.site-footer__bottom { position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-block:24px;font-size:var(--fs-caption);color:rgba(244,247,251,.72); }
@media (max-width:600px){.site-footer{padding-top:64px}.site-footer__intro{margin-bottom:48px}.site-footer__bottom{flex-direction:column;align-items:flex-start}.footer-social{max-width:none;grid-template-columns:repeat(4,62px)}}

/* ==========================================================================
   FINAL CTA BAND
   Shared across every page — the last thing before the footer. Gradient
   navy with two faint ambient glows, matching the hero's depth treatment.
   ========================================================================== */
.final-cta {
  text-align: center;
  position: relative;
  overflow: hidden;
  background-image: var(--gradient-navy);
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(123, 176, 207, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(237, 113, 19, 0.16) 0%, transparent 45%);
  pointer-events: none;
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta h2 { color: var(--color-white); }
.final-cta p {
  color: rgba(244, 247, 251, 0.82);
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}
.final-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}


/* ==========================================================================
   MASTERMIND NAVBAR — FIXED, ALWAYS VISIBLE
   Solid white navigation keeps the brand readable over both the carousel
   and every white/light section while remaining visible during scrolling.
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(19, 69, 133, 0.10);
  box-shadow: 0 8px 28px rgba(10, 44, 92, 0.08);
}
.site-logo__mark {
  filter: none;
}
.site-logo__text {
  color: var(--color-primary-dark);
  text-shadow: none;
}
.site-logo__sub {
  color: var(--color-accent-orange);
}
.site-nav a:not(.btn) {
  color: var(--color-primary-dark);
  text-shadow: none;
}
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn).is-active {
  color: var(--color-primary-dark-hover);
}
.nav-toggle {
  background: var(--color-primary-dark-tint);
  border-color: rgba(19, 69, 133, 0.16);
}
.nav-toggle span {
  background: var(--color-primary-dark);
}

/* Keep page content clear of the fixed navigation. */
body {
  padding-top: 94px;
}
.hero-carousel {
  height: min(780px, calc(100vh - 94px));
}
@media (max-width: 860px) {
  body { padding-top: 72px; }
  .hero-carousel { height: min(760px, calc(100vh - 72px)); }
  .site-nav {
    background: rgba(255,255,255,.98);
    color: var(--color-text-dark);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .site-nav a:not(.btn) {
    color: var(--color-primary-dark);
    text-shadow: none;
  }
}


/* ============================== TOAST NOTIFICATIONS ============================== */
.toast-region{
  position:fixed;
  top:1.25rem;
  right:1.25rem;
  z-index:99999;
  width:min(420px,calc(100vw - 2rem));
  display:grid;
  gap:.75rem;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:.9rem 1rem;
  border:1px solid rgba(10,44,92,.12);
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 45px rgba(10,44,92,.18);
  color:#10233f;
  transform:translateY(-12px);
  opacity:0;
  transition:opacity .22s ease,transform .22s ease;
  backdrop-filter:blur(12px);
}
.toast.is-visible{opacity:1;transform:translateY(0)}
.toast__icon{
  flex:0 0 auto;
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:50%;
  font-size:.85rem;font-weight:800;
  background:#0a2c5c;color:#fff;
}
.toast--success .toast__icon{background:#16834b}
.toast--error .toast__icon{background:#c0392b}
.toast--info .toast__icon{background:#0a2c5c}
.toast__body{min-width:0;flex:1}
.toast__title{display:block;margin:0 0 .18rem;font-size:.9rem;font-weight:800}
.toast__message{margin:0;font-size:.84rem;line-height:1.45;color:#536174}
.toast__close{
  border:0;background:transparent;color:#718096;cursor:pointer;
  font-size:1.15rem;line-height:1;padding:.1rem .15rem;
}
.toast__actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.55rem}
.toast__actions a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.45rem .65rem;border-radius:8px;
  background:#0a2c5c;color:#fff!important;text-decoration:none;font-size:.76rem;font-weight:700;
}
.toast__actions a:last-child{background:#f28c28}
@media(max-width:600px){
  .toast-region{top:.75rem;right:.75rem;width:calc(100vw - 1.5rem)}
}
/* Study Resources dropdown */
.nav-dropdown{position:relative}
.nav-dropdown>a{display:flex;align-items:center;gap:5px}
.nav-caret{font-size:1rem;transition:transform .2s}
.nav-dropdown:hover .nav-caret,.nav-dropdown:focus-within .nav-caret,.nav-dropdown.is-open .nav-caret{transform:rotate(180deg)}
.nav-dropdown__menu{position:absolute;top:calc(100% + 14px);right:0;min-width:240px;padding:10px;border-radius:14px;background:rgba(7,28,61,.98);backdrop-filter:blur(14px);box-shadow:0 16px 40px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:1000}
.nav-dropdown:hover .nav-dropdown__menu,.nav-dropdown:focus-within .nav-dropdown__menu,.nav-dropdown.is-open .nav-dropdown__menu{opacity:1;visibility:visible;transform:none}
.nav-dropdown__menu a{display:block;padding:11px 13px!important;border-radius:9px;color:#fff!important;font-size:.95rem!important;text-shadow:none!important}
.nav-dropdown__menu a:hover,.nav-dropdown__menu a:focus-visible{background:rgba(255,255,255,.12);color:#fff!important}
@media(max-width:860px){
  .nav-dropdown__menu{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;background:#0a2c5c!important;margin-top:8px;width:100%;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:12px}
  .nav-dropdown:hover .nav-dropdown__menu,.nav-dropdown:focus-within .nav-dropdown__menu,.nav-dropdown.is-open .nav-dropdown__menu{display:block}
  .nav-dropdown__menu a{font-size:1rem!important;padding:12px 13px!important;color:#fff!important}
  .nav-dropdown.is-open>a .nav-caret{transform:rotate(180deg)}
}

/* Contact dropdown mirrors the Study Resources dropdown. */
.nav-dropdown--contact .nav-dropdown__menu{right:auto;left:0}
@media(max-width:760px){.nav-dropdown--contact .nav-dropdown__menu{width:100%;left:auto;right:auto}}
/* Mobile dropdowns are controlled by JavaScript so they never get stuck open after a tap. */
@media(max-width:860px){
  .nav-dropdown:hover .nav-dropdown__menu,.nav-dropdown:focus-within .nav-dropdown__menu{display:none}
  .nav-dropdown.is-open .nav-dropdown__menu{display:block}
  .nav-dropdown:focus-within .nav-caret{transform:none}
  .nav-dropdown.is-open>a .nav-caret{transform:rotate(180deg)}
}