/* =========================================================
   CM88 — main stylesheet
   Metrics mirror the live site: 1080px row, 16px/25.6px body,
   27.2 / 25.6 / 20px headings, 90px logo row + blue nav bar.

   1. Tokens
   2. Reset & base
   3. Layout
   4. Buttons
   5. Header & navigation
   6. Hero
   7. Article content
   8. Tables
   9. Section title (accent rule + centred label)
   10. News grid
   11. Footer
   12. Back to top
   13. Responsive
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* blue scheme */
  --blue:         #1571cf;   /* nav bar, login button          */
  --blue-dark:    #1362b4;   /* its hover                      */
  --navy:         #16294b;   /* register button, active pill   */
  --navy-dark:    #0e1d38;   /* its hover                      */
  --brand:        #1268cc;   /* headings, links, accents       */

  --ink:          #000000;
  --nav:          #ffffff;
  --nav-active:   #ffffff;
  --cell:         #666666;
  --link:         var(--brand);
  --badge:        var(--navy);
  --line:         #ececec;
  --bar:          var(--navy);
  --spark:        #a9d8ff;   /* the orbiting bars on the auth buttons */
  --gold:         #f5c451;   /* header accent, picked from the banner artwork */
  --gold-2:       #e0a32e;
  --hdr-1:        #08183a;   /* header gradient, deep navy → blue */
  --hdr-2:        #113974;
  --hdr-3:        #1668cf;

  --font:         "Roboto Slab", Georgia, "Times New Roman", serif;
  --wrap:         1080px;
  --gutter:       15px;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;              /* 25.6px */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--brand);
  font-weight: 700;
}

h1 { font-size: 27.2px; line-height: 1.3; text-align: center; margin-bottom: 13.6px; }
h2 { font-size: 25.6px; line-height: 1.3; margin-bottom: 12.8px; }
h3 { font-size: 20px;   line-height: 1.6; margin-bottom: 10px; }

p { margin: 0 0 20.8px; }

ul, ol { margin: 0 0 20.8px; padding: 0; }
li { margin: 0 0 9.6px 20.8px; }

table { border-collapse: collapse; width: 100%; }

button { font: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand);
  color: #fff;
  padding: 10px 18px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 4. Buttons ----------
   Gradient pill with two light bars orbiting the rim.
   ::before is an oversized conic gradient spinning inside the pill's clip;
   ::after covers everything but a 2px rim, so only the rim shows the spin.
   ------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  height: 38px;
  padding: 0 17px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 13.2px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn:hover { color: #fff; text-decoration: none; }

.btn::before {
  content: "";
  position: absolute;
  inset: -80%;
  background: conic-gradient(from 0deg,
    transparent 0 8%,  var(--spark) 15%, transparent 22% 58%,
    transparent 58%,   var(--spark) 65%, transparent 72% 100%);
  animation: btn-orbit 3.2s linear infinite;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: inherit;
}

.btn__label { position: relative; z-index: 2; }

@keyframes btn-orbit { to { transform: rotate(1turn); } }

.btn--register { background: linear-gradient(135deg, #0e2f6b 0%, #1663bd 58%, #2b8ae8 100%); }
.btn--login    { background: linear-gradient(135deg, #1362b4 0%, #1e86e0 58%, #3aa4f7 100%); }

.btn--register:hover,
.btn--login:hover { filter: brightness(1.1); }

/* ---------- 5. Header & navigation ----------
   Deep-navy gradient bar with a gold edge. The logo sits in a white chip,
   the same treatment it gets inside the banner artwork, because the wordmark
   is blue and would sink into the dark ground on its own.
   Below 1150px the menu collapses into the drawer (section 13).
   ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    radial-gradient(120% 180% at 18% -40%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(100deg, var(--hdr-1) 0%, var(--hdr-2) 46%, var(--hdr-3) 100%);
  box-shadow: 0 6px 22px rgba(6, 20, 48, .28);
}

/* gold hairline along the bottom edge */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--gold-2) 0%, var(--gold) 22%, #ffe9b0 42%, var(--gold) 62%, var(--gold-2) 100%);
}

.header-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1400px;
  height: 78px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* white chip so the blue wordmark keeps its contrast on the dark bar */
.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  background: #fff;
  border-radius: 999px;
  line-height: 0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
}
.brand img { width: 116px; }

.header-nav { flex: 1 1 auto; min-width: 0; }

.header-actions { display: flex; flex: 0 0 auto; gap: 9px; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 38px;
  padding: 9px 8px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 8px;
}
.nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item { position: relative; }

.menu__item > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 78px;
  padding: 0 13px;
  color: rgba(255, 255, 255, .93);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color .18s ease;
}

/* gold rule that grows out from the centre */
.menu__item > a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 15px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold), #ffeec2);
  box-shadow: 0 0 12px rgba(245, 196, 81, .75);
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.menu__item > a:hover { color: var(--gold); text-decoration: none; }
.menu__item > a:hover::after { transform: scaleX(1); }

.menu__item.is-active > a { color: var(--gold); }
.menu__item.is-active > a::after { transform: scaleX(1); }

.caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .8;
}

.sub-toggle { display: none; }

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 232px;
  margin: 0;
  padding: 8px 0;
  background: linear-gradient(180deg, #102b57 0%, #0d2550 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 30px rgba(4, 14, 34, .45);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, visibility .18s, transform .18s ease;
}
.menu__item.has-sub:hover .submenu,
.menu__item.has-sub:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* the last two menus sit near the right edge — open them leftwards */
.menu__item:nth-last-child(-n+2) .submenu { left: auto; right: 0; }

.submenu li { margin: 0; }
.submenu a {
  position: relative;
  display: block;
  padding: 9px 18px;
  color: rgba(255, 255, 255, .78);
  font-size: 14.4px;
  transition: color .16s ease, padding-left .16s ease, background-color .16s ease;
}
/* gold marker slides in from the left on hover */
.submenu a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--gold);
  transform: translateY(-50%);
  transition: height .16s ease;
}
.submenu a:hover {
  padding-left: 24px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  text-decoration: none;
}
.submenu a:hover::before { height: 60%; }

.menu-actions { display: none; }

.nav-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .45); }

/* ---------- 6. Hero ---------- */
.hero { position: relative; }
.hero__link { display: block; }

/* in-article call to action, sits just before the second H2 */
.cta-inline { margin: 26px 0 24px; text-align: center; }
.cta-inline .btn { height: 44px; padding: 0 26px; font-size: 14.4px; }
.hero img { width: 100%; }

.hero__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero__dots span {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, .55);
  border-radius: 50%;
}
.hero__dots span.is-active { background: #fff; }

/* ---------- 7. Article content ---------- */
.page { padding-block: 30px 10px; }

/* breadcrumb — required on every page below the hub */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 14.4px;
  color: var(--cell);
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--cell); }

.figure { margin: 0 0 20.8px; text-align: center; }
.figure img { margin-inline: auto; }
.figure figcaption {
  max-width: 800px;
  margin-inline: auto;
  padding: 5.76px;
  background: rgba(0, 0, 0, .05);
  font-size: 14.4px;
  font-style: italic;
  text-align: center;
}

/* ---------- 8. Tables ---------- */
.table-wrap { margin-bottom: 20.8px; overflow-x: auto; }

.data-table { font-size: 14.4px; color: var(--cell); }

.data-table th,
.data-table td {
  padding: 7.2px 7.2px 7.2px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.data-table th { font-weight: 700; }
.data-table th:first-child { width: 22%; }

/* ---------- 9. Section title ---------- */
.section-title {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand);
}
.section-title::before,
.section-title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--brand);
}
.section-title span {
  margin: 0 15px;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- 10. News grid ---------- */
.news { padding-block: 20px 30px; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 30px;
}

.news-card { margin-bottom: 30px; }

.news-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* posts without artwork yet: branded tile instead of a mismatched picture */
.news-card__media--plain {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 180% at 30% -30%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(100deg, var(--hdr-1) 0%, var(--hdr-2) 50%, var(--hdr-3) 100%);
}
.news-card__media--plain .news-card__mark {
  width: 54%;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .92;
}

.news-card__date {
  position: absolute;
  top: 0;
  left: -7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: 2px;
  background: #fff;
  border: 2px solid var(--badge);
  color: var(--badge);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.news-card__date b { font-size: 16px; }
.news-card__date i { font-size: 12px; font-style: normal; }

.news-card__body { padding: 10px 10px 20px; text-align: center; }

.news-card__title {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 16.56px;
  font-weight: 400;
  line-height: 1.6;
}
.news-card__title a { color: var(--ink); }
.news-card__title a:hover { color: var(--brand); text-decoration: none; }

.news-card__body p { margin: 0; font-size: 14.4px; }

/* ---------- 11. Footer ----------
   Light ground, dark text, blue links; the legal row sits on a navy strip.
   Deliberately plain — no gradients, no accent colour on the headings.
   ------------------------------------------------ */
.site-footer {
  margin-top: 44px;
  background: #f4f5f7;
  border-top: 1px solid #e2e5ea;
  color: #454b55;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  column-gap: 40px;
  padding-block: 38px 30px;
}

.footer-logo { width: 168px; margin-bottom: 14px; }

.footer-col p { margin: 0 0 12px; font-size: 14.4px; line-height: 1.7; }
.footer-col p strong { color: var(--ink); }
.footer-col p a { color: var(--link); }

/* .section-title draws a rule on both sides of the label — wrong at column
   width, so it is reset here to a plain heading with a single underline. */
.footer-col .section-title {
  display: block;
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid #dfe3e8;
  color: var(--ink);
  font-size: 14.4px;
}
.footer-col .section-title::before,
.footer-col .section-title::after { content: none; }
.footer-col .section-title span {
  margin: 0;
  text-align: left;
  letter-spacing: .4px;
}

.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin: 0; }
.footer-col li a {
  display: block;
  padding: 4px 0;
  color: #454b55;
  font-size: 14.4px;
  transition: color .15s ease;
}
.footer-col li a:hover { color: var(--brand); text-decoration: underline; }

/* legal row + copyright on a navy strip */
.footer-bottom {
  background: var(--navy);
  color: rgba(255, 255, 255, .62);
  font-size: 13.2px;
  text-align: center;
}
.footer-bottom p { margin: 0; padding: 0 0 15px; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  margin: 0;
  padding: 15px 0 11px;
  list-style: none;
}
.footer-legal li { margin: 0; }
.footer-legal a { color: rgba(255, 255, 255, .82); font-size: 13.2px; }
.footer-legal a:hover { color: #fff; }

/* ---------- 12. Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.back-to-top::before {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  width: 9px; height: 9px;
  margin: -3px 0 0 -5px;
  border: solid var(--cell);
  border-width: 2px 0 0 2px;
  transform: rotate(45deg);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }

/* ---------- 12b. Sticky bottom banner ----------
   No bar chrome — the strip is transparent and only the artwork shows.
   pointer-events is off on the container so the empty space either side of
   the image does not swallow clicks meant for the page underneath.
   z-index 85: above the page, below the mobile drawer (95) / backdrop (90).
   ------------------------------------------------ */
.sticky-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 85;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 14px 12px;
  background: transparent;
  pointer-events: none;
}

/* these MUST outrank display:flex / inline-flex, or the hidden attribute
   is ignored and neither control can be dismissed */
.sticky-banner[hidden] { display: none; }
.sticky-banner-reopen[hidden] { display: none; }

.sticky-banner__inner {
  position: relative;
  max-width: 100%;
  line-height: 0;
  pointer-events: auto;
}

.sticky-banner__link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .30);
  transition: transform .2s ease;
}
.sticky-banner__link:hover { transform: translateY(-2px); }
.sticky-banner__link img { width: 728px; max-width: 100%; height: auto; }

/* sits on the artwork's top-right corner */
.sticky-banner__close {
  position: absolute;
  right: -9px;
  top: -9px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  background: #fff;
  border: 1px solid #c8ccd4;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}
.sticky-banner__close::before,
.sticky-banner__close::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: #4a5160;
}
.sticky-banner__close::before { transform: rotate(45deg); }
.sticky-banner__close::after  { transform: rotate(-45deg); }
.sticky-banner__close:hover { background: var(--brand); transform: scale(1.08); }
.sticky-banner__close:hover::before,
.sticky-banner__close:hover::after { background: #fff; }

/* the tab that brings it back — bottom-left, clear of the back-to-top button */
.sticky-banner-reopen {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  background: linear-gradient(135deg, #0e2f6b 0%, #1663bd 58%, #2b8ae8 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(6, 20, 48, .35);
  color: #fff;
  font-family: var(--font);
  font-size: 12.6px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.sticky-banner-reopen::after {
  content: "";
  width: 7px; height: 7px;
  border: solid #fff;
  border-width: 2px 2px 0 0;
  transform: translateY(2px) rotate(-45deg);
}
.sticky-banner-reopen:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(6, 20, 48, .42); }

/* while the strip is up, keep the end of the footer reachable and lift the
   back-to-top button clear of it */
body.has-sticky-banner { padding-bottom: 116px; }
body.has-sticky-banner .back-to-top { bottom: 126px; }

@media (max-width: 767px) {
  .sticky-banner { padding: 0 10px 10px; }
  .sticky-banner__close { right: -7px; top: -7px; width: 30px; height: 30px; }
  .sticky-banner-reopen { left: 12px; bottom: 12px; }
  body.has-sticky-banner { padding-bottom: 82px; }
  body.has-sticky-banner .back-to-top { bottom: 92px; }
}

/* ---------- 13. Responsive ---------- */
@media (max-width: 1240px) {
  .menu__item > a { padding: 0 9px; font-size: 13.2px; }
  .brand { padding: 7px 12px; }
  .brand img { width: 104px; }
  .header-bar { gap: 12px; }
  .header-actions .btn { min-width: 0; height: 36px; padding: 0 13px; font-size: 12.4px; }
}

/* eight items plus the two buttons stop fitting here — go to the drawer */
@media (max-width: 1150px) {
  .nav-toggle { display: block; }
  .header-bar { height: 68px; gap: 10px; }
  .brand { margin-right: auto; padding: 7px 13px; }   /* buttons + burger to the right */
  .brand img { width: 112px; }
  .header-actions { display: flex; gap: 6px; }

  .header-nav {
    position: fixed;
    top: 0; right: 0;
    z-index: 95;
    width: min(300px, 84vw);
    height: 100dvh;
    padding: 20px 18px 0;
    background: linear-gradient(180deg, #0b2149 0%, #102b57 100%);
    box-shadow: -3px 0 18px rgba(0, 0, 0, .16);
    overflow-y: auto;
    transform: translateX(102%);
    transition: transform .3s ease;
  }
  .header-nav.is-open { transform: translateX(0); }

  /* the blue bar is a desktop treatment — the drawer is a plain white panel */
  .menu {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .menu { height: auto; }
  .menu__item { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .10); }
  .menu__item > a { display: block; height: auto; padding: 13px 0; color: rgba(255,255,255,.9); }
  .menu__item > a::after { display: none; }
  .menu__item > a:hover { background: none; color: var(--gold); }
  .menu__item.is-active > a { background: none; color: var(--gold); }
  .caret { display: none; }

  .sub-toggle {
    display: block;
    position: absolute;
    right: 0; top: 2px;
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
  }
  .sub-toggle::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    margin: -6px 0 0 -4px;
    border: solid rgba(255, 255, 255, .75);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .sub-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: -2px; }

  .submenu {
    position: static;
    display: none;
    min-width: 0;
    margin: 0 0 8px;
    padding: 2px 0 2px 14px;
    background: none;
    border: 0;
    border-left: 2px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .submenu a { color: rgba(255, 255, 255, .72); }
  .submenu a:hover { padding-left: 18px; background: none; color: var(--gold); }
  .submenu a::before { display: none; }
  .submenu.is-open { display: block; }
  .menu__item:nth-last-child(-n+2) .submenu { left: auto; right: auto; }
  .menu__item.has-sub:hover .submenu { display: none; }
  .menu__item.has-sub:hover .submenu.is-open { display: block; }

  /* the sticky bar carries the buttons now — no need to repeat them in the drawer */
  .menu-actions { display: none; }

  .news-grid { grid-template-columns: repeat(2, 1fr); }

}

/* phones: shrink the bar's furniture so both buttons stay on the one line */
@media (max-width: 700px) {
  .header-bar { gap: 7px; padding-inline: 10px; }
  .brand { padding: 6px 10px; }
  .brand img { width: 92px; }
  .header-actions { gap: 5px; }
  .header-actions .btn {
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    font-size: 11.2px;
    letter-spacing: 0;
  }
  .nav-toggle { width: 34px; height: 30px; padding: 6px 5px; }
  .nav-toggle span + span { margin-top: 4px; }
}

/* very narrow phones: the bonus figure is the first thing to go */
@media (max-width: 379px) {
  .brand { padding: 5px 9px; }
  .brand img { width: 82px; }
  .header-actions .btn__bonus { display: none; }
  .header-actions .btn { padding: 0 8px; font-size: 10.8px; }
}

@media (max-width: 549px) {
  h1 { font-size: 22.4px; }
  h2 { font-size: 19.2px; }
  h3 { font-size: 16px; }

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


  .data-table { min-width: 460px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* footer columns: 4 → 2 → 1 */
@media (max-width: 940px) {
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; row-gap: 26px; padding-block: 32px 26px; }
  .footer-legal { gap: 4px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::before { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}