/* ==========================================================================
   C7 — site chrome: header, mega menu, mobile drawer, footer
   ========================================================================== */

/* The announcement strip lives in components/announcement.css (September 2026):
   the admin preview loads the same file, so the preview moves exactly like
   the website. */


/* --------------------------------------------------------------------------
   Top strip — contact details above the header
   -------------------------------------------------------------------------- */
.c7-topbar {
  background: var(--c7-meridian-950);
  color: rgb(255 255 255 / 0.78);
  font-size: var(--c7-text-xs);
}

.c7-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c7-space-4);
  min-height: 2.5rem;
  padding-block: var(--c7-space-2);
}

.c7-topbar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c7-space-5);
}

.c7-topbar a {
  display: inline-flex;
  align-items: center;
  gap: var(--c7-space-2);
  color: inherit;
  text-decoration: none;
  transition: color var(--c7-duration-fast) var(--c7-ease);
}

.c7-topbar a:hover {
  color: var(--c7-gold-400);
}

.c7-topbar svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--c7-gold-500);
  flex: none;
}

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

@media (max-width: 60rem) {
  .c7-topbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.c7-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--c7-z-header);
  background: var(--c7-surface);
  border-block-end: 1px solid var(--c7-border-subtle);
  transition: box-shadow var(--c7-duration-base) var(--c7-ease),
    background-color var(--c7-duration-base) var(--c7-ease);
}

.c7-header.is-stuck {
  box-shadow: var(--c7-shadow-md);
}

.c7-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The approved menu has nine top-level items. Together with the brand and the
     primary button they need every pixel of the wide container, so the gap here
     is deliberately tight and the whole row is prevented from wrapping. */
  gap: var(--c7-space-4);
  min-height: var(--c7-header-height);
  flex-wrap: nowrap;
}

.c7-header.is-stuck .c7-header__inner {
  min-height: var(--c7-header-height-compact);
}

/* --- Brand ---------------------------------------------------------------- */
.c7-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--c7-space-3);
  flex: none;
  color: var(--c7-text-strong);
  text-decoration: none;
}

/* The client's lock-up is a wide one — monogram, wordmark, company line and two
   tagline lines stacked at 2.9:1 — so at the 2.75rem the old placeholder used,
   everything under the wordmark was too small to read. Sized so the wordmark
   carries at a glance and the tagline is legible rather than decorative. */
.c7-brand__logo {
  height: 3.6rem;
  width: auto;
  max-width: min(19rem, 46vw);
  object-fit: contain;
  background: transparent;
}

@media (max-width: 30rem) {
  .c7-brand__logo {
    height: 2.9rem;
  }
}

.c7-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.c7-brand__name {
  font-size: var(--c7-text-lg);
  font-weight: var(--c7-weight-extrabold);
  letter-spacing: var(--c7-tracking-heading);
}

.c7-brand__tagline {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-2xs);
  font-weight: var(--c7-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The tagline is the widest part of the brand block and it already appears in
   the top strip and the footer. Below a roomy desktop it gives its width back
   to the menu rather than squeezing it. */
@media (max-width: 92rem) {
  .c7-header .c7-brand__tagline {
    display: none;
  }
}

/* nowrap keeps the tagline on one line beside the logo, but on a phone that
   makes it the widest thing on the page and it drags the layout sideways. */
@media (max-width: 30rem) {
  .c7-brand__tagline {
    white-space: normal;
  }
}

/* --- Primary navigation --------------------------------------------------- */
.c7-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-inline-start: auto;
  flex-wrap: nowrap;
}

.c7-nav__item {
  position: relative;
  flex: none;
}

.c7-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: var(--c7-space-2) 0.42rem;
  border-radius: var(--c7-radius-sm);
  color: var(--c7-text-strong);
  font-size: 0.86rem;
  font-weight: var(--c7-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--c7-duration-fast) var(--c7-ease),
    background-color var(--c7-duration-fast) var(--c7-ease);
}

.c7-nav__link:hover,
.c7-nav__item.is-open > .c7-nav__link {
  background: var(--c7-meridian-050);
  color: var(--c7-meridian-800);
}

/* The active page is marked with an underline drawn as a pseudo-element, so the
   state never changes the link's weight or padding and cannot shift the row. */
.c7-nav__link[aria-current="page"] {
  background: var(--c7-meridian-050);
  color: var(--c7-meridian-800);
  box-shadow: inset 0 0 0 1px rgb(19 43 72 / 0.06);
}

/* A gold bar under the current section, drawn as a pseudo-element so the state
   never changes the link's size and cannot shift the row. */
.c7-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-block-end: -6px;
  inset-inline: 0.55rem;
  height: 3px;
  border-radius: var(--c7-radius-pill);
  background: var(--c7-gradient-accent);
  box-shadow: 0 2px 8px rgb(221 160 42 / 0.45);
  animation: c7-nav-current 0.45s var(--c7-ease-out) both;
}

@keyframes c7-nav-current {
  from { transform: scaleX(0.2); opacity: 0; }
}

.c7-nav__chevron {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--c7-text-muted);
  transition: transform var(--c7-duration-fast) var(--c7-ease);
}

.c7-nav__item.is-open .c7-nav__chevron {
  transform: rotate(180deg);
}

/* --- Mega menu ------------------------------------------------------------ */
.c7-mega {
  position: absolute;
  inset-block-start: calc(100% + 0.75rem);
  inset-inline-start: 50%;
  z-index: var(--c7-z-megamenu);
  width: max-content;
  max-width: min(58rem, calc(100vw - 3rem));
  padding: var(--c7-space-6);
  border: 1px solid var(--c7-border-subtle);
  border-radius: var(--c7-radius-lg);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-xl);
  opacity: 0;
  visibility: hidden;
  /* The -50% must survive every state change below, or the panel jumps sideways
     the moment it opens. */
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--c7-duration-base) var(--c7-ease),
    transform var(--c7-duration-base) var(--c7-ease),
    visibility var(--c7-duration-base) var(--c7-ease);
}

.c7-nav__item.is-open .c7-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* A hover bridge across the gap, so the panel does not close while the pointer
   travels from the trigger down to it. */
.c7-mega::before {
  content: "";
  position: absolute;
  inset-block-start: -0.75rem;
  inset-inline: 0;
  height: 0.75rem;
}

.c7-mega__grid {
  display: grid;
  gap: var(--c7-space-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.c7-mega__col-title {
  margin-block-end: var(--c7-space-3);
  color: var(--c7-gold-700);
  font-size: var(--c7-text-2xs);
  font-weight: var(--c7-weight-bold);
  letter-spacing: var(--c7-tracking-caps);
  text-transform: uppercase;
}

.c7-mega__list {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-1);
}

.c7-mega__link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--c7-space-2) var(--c7-space-3);
  border-radius: var(--c7-radius-sm);
  color: var(--c7-text-strong);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-medium);
  text-decoration: none;
  transition: background-color var(--c7-duration-fast) var(--c7-ease),
    color var(--c7-duration-fast) var(--c7-ease);
}

.c7-mega__link:hover {
  background: var(--c7-meridian-050);
  color: var(--c7-meridian-800);
}

.c7-mega__link-desc {
  color: var(--c7-text-muted);
  font-size: var(--c7-text-xs);
  font-weight: var(--c7-weight-regular);
}

/* Promo panel inside the mega menu.
   `align-self: start` stops the grid stretching it to match the link column: it
   would otherwise leave a block of empty panel below the button whenever the
   list beside it is the taller of the two. */
.c7-mega__promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  gap: var(--c7-space-3);
  padding: var(--c7-space-5);
  border-radius: var(--c7-radius-md);
  background: var(--c7-gradient-brand);
  color: var(--c7-text-inverse-muted);
}

/* The grid columns stretch to the tallest row by default, which is right for
   the link lists and wrong for the panel beside them. */
.c7-mega__grid > * {
  align-self: start;
  min-width: 0;
}

.c7-mega__promo-title {
  color: var(--c7-white);
  font-size: var(--c7-text-lg);
}

.c7-mega__promo-text {
  font-size: var(--c7-text-sm);
}

/* --- Country list: one column, a round flag beside each name ---------------
   The client's September 2026 reference. Narrow on purpose — it is a list of
   eight names, and a wide panel around them reads as unfinished. */
.c7-mega--list {
  width: 16rem;
  padding: var(--c7-space-3);
}

.c7-flaglist {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-1);
}

.c7-flaglist__link {
  display: flex;
  align-items: center;
  gap: var(--c7-space-4);
  padding: var(--c7-space-2) var(--c7-space-3);
  border-radius: var(--c7-radius-md);
  color: var(--c7-text-strong);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-semibold);
  text-decoration: none;
  transition: background-color var(--c7-duration-fast) var(--c7-ease),
    color var(--c7-duration-fast) var(--c7-ease);
}

.c7-flaglist__link:hover,
.c7-flaglist__link:focus-visible {
  background: var(--c7-meridian-050);
  color: var(--c7-meridian-800);
}

.c7-flaglist__flag {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border: 2px solid var(--c7-white);
  border-radius: 50%;
  background: var(--c7-surface-sunken);
  box-shadow: 0 0 0 1px var(--c7-border-subtle), var(--c7-shadow-sm);
  color: var(--c7-text-muted);
  font-size: var(--c7-text-2xs);
  font-weight: var(--c7-weight-bold);
}

.c7-flaglist__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c7-flaglist__cta {
  margin-block-start: var(--c7-space-3);
}

/* --- Two plain columns, read down the first and then the second ----------- */
.c7-mega--columns {
  width: max-content;
  min-width: 28rem;
}

/* A grid that fills down the first column and then the second, so the order
   the client gave reads the same here as in the one-column phone menu. */
.c7-mega__columns {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--c7-rows, 6), auto);
  column-gap: var(--c7-space-8);
}

.c7-mega__columns .c7-mega__link {
  padding-block: var(--c7-space-3);
  font-size: var(--c7-text-base);
  font-weight: var(--c7-weight-semibold);
  white-space: nowrap;
}

/* A flag beside a country in the mobile drawer. */
.c7-drawer__flag-link {
  display: flex;
  align-items: center;
  gap: var(--c7-space-3);
}

.c7-drawer__flag-link img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--c7-border-subtle);
}

/* --- Header actions ------------------------------------------------------- */
.c7-header__actions {
  display: flex;
  align-items: center;
  gap: var(--c7-space-3);
  flex: none;
}

.c7-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c7-border);
  border-radius: var(--c7-radius-sm);
  color: var(--c7-text-strong);
}

.c7-header__toggle svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* The full menu only stays on screen while it genuinely fits. Below this the
   drawer takes over — a cramped, overflowing menu bar is a worse experience than
   a well-built drawer, and an overflowing one scrolls the whole page sideways. */
@media (max-width: 84rem) {
  .c7-nav,
  .c7-header__actions .c7-btn {
    display: none;
  }

  .c7-header__toggle {
    display: inline-flex;
  }

  .c7-header__actions {
    margin-inline-start: auto;
  }
}

/* The same switch, made by nav-fit.js when the menu the client has built is
   wider than the bar at this screen size — adding a menu item can never push
   a link onto a second line or under the button. */
.c7-header.is-compact .c7-nav,
.c7-header.is-compact .c7-header__actions .c7-btn {
  display: none;
}

.c7-header.is-compact .c7-header__toggle {
  display: inline-flex;
}

.c7-header.is-compact .c7-header__actions {
  margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.c7-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--c7-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(24rem, 100vw);
  background: var(--c7-surface);
  box-shadow: var(--c7-shadow-xl);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--c7-duration-base) var(--c7-ease),
    visibility var(--c7-duration-base) var(--c7-ease);
}

.c7-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.c7-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c7-space-4);
  padding: var(--c7-space-4) var(--c7-space-5);
  border-block-end: 1px solid var(--c7-border-subtle);
}

.c7-drawer__close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--c7-radius-sm);
  color: var(--c7-text-strong);
}

.c7-drawer__close:hover {
  background: var(--c7-surface-sunken);
}

.c7-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--c7-space-4) var(--c7-space-5) var(--c7-space-8);
  overscroll-behavior: contain;
}

.c7-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
  padding: var(--c7-space-5);
  border-block-start: 1px solid var(--c7-border-subtle);
  background: var(--c7-surface-sunken);
}

.c7-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c7-space-3);
  width: 100%;
  padding: var(--c7-space-3) 0;
  border-block-end: 1px solid var(--c7-border-subtle);
  color: var(--c7-text-strong);
  font-size: var(--c7-text-base);
  font-weight: var(--c7-weight-semibold);
  text-align: start;
  text-decoration: none;
}

.c7-drawer__link svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--c7-text-muted);
  transition: transform var(--c7-duration-fast) var(--c7-ease);
  flex: none;
}

.c7-drawer__group.is-open > .c7-drawer__link svg {
  transform: rotate(180deg);
}

.c7-drawer__sub {
  display: none;
  flex-direction: column;
  padding: var(--c7-space-2) 0 var(--c7-space-3) var(--c7-space-4);
}

.c7-drawer__group.is-open .c7-drawer__sub {
  display: flex;
}

.c7-drawer__sub a {
  padding: var(--c7-space-2) 0;
  color: var(--c7-text-muted);
  font-size: var(--c7-text-sm);
  text-decoration: none;
}

.c7-drawer__sub a:hover {
  color: var(--c7-meridian-700);
}

/* Buttons stack full width in the drawer — a row of half-width buttons is hard
   to hit accurately on a phone. */
.c7-drawer__foot .c7-btn {
  width: 100%;
}

.c7-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--c7-z-scrim);
  background: rgb(4 18 27 / 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--c7-duration-base) var(--c7-ease),
    visibility var(--c7-duration-base) var(--c7-ease);
}

.c7-scrim.is-visible {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.c7-footer {
  position: relative;
  background: var(--c7-meridian-950);
  color: var(--c7-text-inverse-muted);
  font-size: var(--c7-text-sm);
}

.c7-footer__main {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(10rem, 1fr));
  padding-block: clamp(3rem, 6vw, 5rem);
}

.c7-footer__brand-block {
  max-width: 24rem;
  min-width: 0;
}

/* Every footer column is a grid child, and a grid child will not shrink past its
   own content unless told to. */
.c7-footer__main > * {
  min-width: 0;
}

.c7-footer .c7-brand__name {
  color: var(--c7-white);
}

.c7-footer .c7-brand__tagline {
  color: var(--c7-gold-400);
}

.c7-footer__about {
  margin-block-start: var(--c7-space-4);
  line-height: var(--c7-leading-relaxed);
}

.c7-footer__col-title {
  margin-block-end: var(--c7-space-4);
  color: var(--c7-white);
  font-size: var(--c7-text-2xs);
  font-weight: var(--c7-weight-bold);
  letter-spacing: var(--c7-tracking-caps);
  text-transform: uppercase;
}

.c7-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-2);
}

.c7-footer__list a {
  color: inherit;
  text-decoration: none;
  transition: color var(--c7-duration-fast) var(--c7-ease);
}

.c7-footer__list a:hover {
  color: var(--c7-gold-400);
}

.c7-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
}

.c7-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--c7-space-3);
}

.c7-footer__contact-item svg {
  width: 1.05rem;
  height: 1.05rem;
  margin-block-start: 0.2rem;
  color: var(--c7-gold-500);
  flex: none;
}

.c7-footer__contact-item a {
  color: inherit;
  text-decoration: none;
}

.c7-footer__contact-item a:hover {
  color: var(--c7-gold-400);
}

.c7-footer__socials {
  display: flex;
  gap: var(--c7-space-3);
  margin-block-start: var(--c7-space-5);
}

.c7-footer__social {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--c7-border-inverse);
  border-radius: 50%;
  color: var(--c7-white);
  transition: background-color var(--c7-duration-fast) var(--c7-ease),
    border-color var(--c7-duration-fast) var(--c7-ease),
    color var(--c7-duration-fast) var(--c7-ease);
}

.c7-footer__social svg {
  width: 1.1rem;
  height: 1.1rem;
}

.c7-footer__social:hover {
  border-color: var(--c7-gold-500);
  background: var(--c7-gold-500);
  color: var(--c7-meridian-950);
}

.c7-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--c7-space-4);
  padding-block: var(--c7-space-5);
  border-block-start: 1px solid var(--c7-border-inverse);
  font-size: var(--c7-text-xs);
}

.c7-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c7-space-5);
}

.c7-footer__legal a {
  color: inherit;
  text-decoration: none;
}

.c7-footer__legal a:hover {
  color: var(--c7-gold-400);
}

.c7-footer__credit {
  display: block;
  padding-block: var(--c7-space-4);
  border-block-start: 1px solid var(--c7-border-inverse);
  color: rgb(255 255 255 / 0.5);
  font-size: var(--c7-text-xs);
  text-align: center;
}

.c7-footer__credit a {
  color: rgb(255 255 255 / 0.72);
  text-decoration: none;
}

.c7-footer__credit a:hover {
  color: var(--c7-gold-400);
}

@media (max-width: 48rem) {
  .c7-footer__main {
    grid-template-columns: 1fr;
  }

  .c7-footer__bottom {
    justify-content: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Floating quick actions (call / WhatsApp / back to top)
   -------------------------------------------------------------------------- */
.c7-quick {
  position: fixed;
  inset-block-end: var(--c7-space-5);
  inset-inline-end: var(--c7-space-5);
  z-index: var(--c7-z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--c7-space-3);
}

.c7-quick__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c7-meridian-800);
  color: var(--c7-white);
  box-shadow: var(--c7-shadow-lg);
  text-decoration: none;
  transition: transform var(--c7-duration-fast) var(--c7-ease),
    background-color var(--c7-duration-fast) var(--c7-ease);
}

.c7-quick__btn:hover {
  transform: scale(1.06);
  background: var(--c7-meridian-700);
  color: var(--c7-white);
}

.c7-quick__btn svg {
  width: 1.35rem;
  height: 1.35rem;
}

.c7-quick__btn--whatsapp {
  background: #1faa53;
}

.c7-quick__btn--whatsapp:hover {
  background: #17913f;
}

.c7-quick__btn--top {
  background: var(--c7-surface);
  border: 1px solid var(--c7-border);
  color: var(--c7-text-strong);
  opacity: 0;
  visibility: hidden;
}

.c7-quick__btn--top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Current page inside the drop-downs, the drawer and the footer
   -------------------------------------------------------------------------- */
.c7-mega__link[aria-current="page"],
.c7-flaglist__link[aria-current="page"] {
  position: relative;
  background: var(--c7-meridian-050);
  color: var(--c7-meridian-800);
  font-weight: var(--c7-weight-semibold);
}

.c7-mega__link[aria-current="page"]::before,
.c7-flaglist__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  inset-inline-start: 0;
  width: 3px;
  border-radius: var(--c7-radius-pill);
  background: var(--c7-gradient-accent);
}

.c7-flaglist__link[aria-current="page"] .c7-flaglist__flag {
  box-shadow: 0 0 0 2px var(--c7-gold-400);
}

.c7-drawer__link[aria-current="page"],
.c7-drawer__group.is-current > .c7-drawer__link {
  color: var(--c7-meridian-800);
  font-weight: var(--c7-weight-semibold);
  box-shadow: inset 3px 0 0 var(--c7-gold-500);
  background: var(--c7-meridian-050);
}

.c7-drawer__sub a[aria-current="page"] {
  color: var(--c7-meridian-800);
  font-weight: var(--c7-weight-semibold);
  background: var(--c7-gold-100);
}

.c7-footer__list a[aria-current="page"] {
  color: var(--c7-gold-400);
}

.c7-footer__list a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-inline-end: 0.45rem;
  border-radius: 50%;
  background: var(--c7-gold-400);
  vertical-align: 0.12em;
}

@media (prefers-reduced-motion: reduce) {
  .c7-nav__link[aria-current="page"]::after {
    animation: none;
  }
}
/* --------------------------------------------------------------------------
   Drop-down extras: the parent's own page, and the highlighted feature link
   (the Course Finder under Our Services)
   -------------------------------------------------------------------------- */
.c7-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: var(--c7-space-4);
  padding-block-start: var(--c7-space-3);
  border-block-start: 1px solid var(--c7-border-subtle);
  width: 100%;
  color: var(--c7-meridian-800);
  font-size: var(--c7-text-sm);
  font-weight: var(--c7-weight-semibold);
  text-decoration: none;
}

.c7-mega__all svg {
  transition: transform var(--c7-duration-fast) var(--c7-ease);
}

.c7-mega__all:hover {
  color: var(--c7-gold-700);
}

.c7-mega__all:hover svg {
  transform: translateX(3px);
}

.c7-mega__feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--c7-space-4);
  width: 100%;
  margin-block-start: var(--c7-space-4);
  padding: var(--c7-space-4) var(--c7-space-5);
  overflow: hidden;
  border-radius: var(--c7-radius-md);
  background: var(--c7-gradient-brand);
  box-shadow: var(--c7-shadow-md);
  color: var(--c7-white);
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--c7-duration-fast) var(--c7-ease),
    box-shadow var(--c7-duration-fast) var(--c7-ease);
}

/* A slow gold sheen across the button, so the one special item in the menu
   reads as special without shouting. */
.c7-mega__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(237 187 91 / 0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: c7-sheen 3.6s var(--c7-ease) infinite;
}

@keyframes c7-sheen {
  60%, 100% { transform: translateX(100%); }
}

.c7-mega__feature:hover,
.c7-mega__feature:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--c7-shadow-lg);
}

.c7-mega__feature-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--c7-radius-sm);
  background: var(--c7-gradient-accent);
  color: #04121b;
}

.c7-mega__feature-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.c7-mega__feature-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.c7-mega__feature-label {
  font-size: var(--c7-text-base);
  font-weight: var(--c7-weight-bold);
}

.c7-mega__feature-desc {
  color: rgb(255 255 255 / 0.75);
  font-size: var(--c7-text-xs);
}

.c7-mega__feature-arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  transition: transform var(--c7-duration-fast) var(--c7-ease);
}

.c7-mega__feature-arrow svg {
  width: 1rem;
  height: 1rem;
}

.c7-mega__feature:hover .c7-mega__feature-arrow {
  transform: translateX(3px);
  background: var(--c7-gold-500);
  color: #04121b;
}

.c7-mega__feature[aria-current="page"] {
  box-shadow: 0 0 0 2px var(--c7-gold-400), var(--c7-shadow-md);
}

/* The drawer: the parent's page first, the feature as a card under the group. */
.c7-drawer__all {
  font-weight: var(--c7-weight-semibold);
  color: var(--c7-meridian-800) !important;
}

.c7-drawer__feature {
  display: flex;
  align-items: center;
  gap: var(--c7-space-3);
  margin: var(--c7-space-2) 0 var(--c7-space-3);
  padding: var(--c7-space-3) var(--c7-space-4);
  border-radius: var(--c7-radius-md);
  background: var(--c7-gradient-brand);
  box-shadow: var(--c7-shadow-sm);
  color: var(--c7-white);
  text-decoration: none;
}

.c7-drawer__feature > svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--c7-gold-400);
}

.c7-drawer__feature-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--c7-radius-sm);
  background: var(--c7-gradient-accent);
  color: #04121b;
}

.c7-drawer__feature-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.c7-drawer__feature-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.c7-drawer__feature-text span {
  color: rgb(255 255 255 / 0.75);
  font-size: var(--c7-text-xs);
}

@media (prefers-reduced-motion: reduce) {
  .c7-mega__feature::after {
    animation: none;
  }
}

/* The feature button keeps its white text in every state — the site's general
   link-hover colour is navy, which disappeared against the navy button. */
.c7-mega__feature,
.c7-mega__feature:hover,
.c7-mega__feature:focus-visible,
.c7-mega__feature:visited,
.c7-mega__feature .c7-mega__feature-label,
.c7-drawer__feature,
.c7-drawer__feature:hover,
.c7-drawer__feature:focus-visible,
.c7-drawer__feature strong {
  color: var(--c7-white);
}

.c7-mega__feature:hover .c7-mega__feature-desc,
.c7-mega__feature:focus-visible .c7-mega__feature-desc {
  color: rgb(255 255 255 / 0.85);
}

/* The floating WhatsApp / call / back-to-top buttons are smaller and tucked
   closer to the edge on a phone, so they cover less of the page beneath. */
@media (max-width: 40rem) {
  .c7-quick {
    inset-block-end: var(--c7-space-3);
    inset-inline-end: var(--c7-space-3);
    gap: var(--c7-space-2);
  }

  .c7-quick__btn {
    width: 2.6rem;
    height: 2.6rem;
  }

  .c7-quick__btn svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}