/* =====================================================================
   DEFENCE STREET — public website styles
   ===================================================================== */

/* ---------- base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ds-font-body);
  color: var(--ds-text);
  background: var(--ds-bg);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .display-font {
  font-family: var(--ds-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ds-navy-800);
  line-height: 1.15;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

a { color: var(--ds-primary); text-decoration: none; transition: color .2s var(--ds-ease); }
a:hover { color: var(--ds-primary-dark); }

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

.container-ds { width: 100%; max-width: var(--ds-container); margin-inline: auto; padding-inline: 1rem; }

::selection { background: var(--ds-blue-100); color: var(--ds-navy-800); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ds-steel-100); }
::-webkit-scrollbar-thumb { background: var(--ds-steel-300); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-steel-500); }

/* ---------- utilities ------------------------------------------------ */
.text-gradient {
  background: var(--ds-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gold { color: var(--ds-accent); }
.accent { color: var(--ds-accent); }
.bg-soft { background: var(--ds-bg-soft); }
.bg-navy { background: var(--ds-navy-800); color: #fff; }
.shadow-ds { box-shadow: var(--ds-shadow); }
.rounded-ds { border-radius: var(--ds-radius); }
/* Section rhythm. The gaps used to run to 5.5rem, which pushed the page to
   nearly 8,000px and left large empty bands between blocks on a wide screen. */
.section { padding: clamp(2rem, 3.4vw, 3.25rem) 0; }
.section-tight { padding: clamp(1.5rem, 2.6vw, 2.25rem) 0; }
.muted { color: var(--ds-muted); }
.fw-800 { font-weight: 800; }

.section-head { margin-bottom: 1.4rem; }
.section-head .eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ds-primary); background: var(--ds-blue-050);
  border: 1px solid var(--ds-blue-100);
  padding: .32rem .75rem; border-radius: 999px; margin-bottom: .7rem;
}
.section-head h2 { margin: 0 0 .35rem; }
.section-head p { color: var(--ds-muted); margin: 0; max-width: 62ch; }

.link-more {
  font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem;
}
.link-more i { transition: transform .25s var(--ds-ease); }
.link-more:hover i { transform: translateX(4px); }

/* ---------- buttons -------------------------------------------------- */
.btn { font-weight: 600; border-radius: var(--ds-radius-sm); transition: all .25s var(--ds-ease); }

.btn-ds {
  background: var(--ds-grad-blue); color: #fff; border: none;
  padding: .68rem 1.4rem; box-shadow: 0 6px 18px rgba(11, 87, 208, .28);
  position: relative; overflow: hidden;
}
.btn-ds:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11, 87, 208, .36); }
.btn-ds::after {
  content: ''; position: absolute; inset: 0; left: -120%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .6s var(--ds-ease);
}
.btn-ds:hover::after { left: 120%; }

.btn-gold {
  background: var(--ds-grad-gold); color: var(--ds-navy-800); border: none;
  padding: .68rem 1.4rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(245, 179, 1, .32);
}
.btn-gold:hover { color: var(--ds-navy-900); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(245, 179, 1, .42); }

.btn-ghost {
  background: transparent; border: 1.5px solid var(--ds-border); color: var(--ds-text);
  padding: .62rem 1.2rem;
}
.btn-ghost:hover { border-color: var(--ds-primary); color: var(--ds-primary); background: var(--ds-blue-050); }

.btn-ghost-light {
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.25); color: #fff;
  padding: .62rem 1.2rem; backdrop-filter: blur(6px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.5); }

.btn-icon {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--ds-border); background: #fff; color: var(--ds-steel-700);
}
.btn-icon:hover { border-color: var(--ds-primary); color: var(--ds-primary); background: var(--ds-blue-050); }
.btn-icon.active { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; }

/* ---------- badges --------------------------------------------------- */
.badge-soft-primary  { background: var(--ds-blue-050); color: var(--ds-primary); border: 1px solid var(--ds-blue-100); }
.badge-soft-success  { background: #ecfdf5; color: var(--ds-success); border: 1px solid #bbf7d0; }
.badge-soft-warning  { background: #fffbeb; color: var(--ds-warning); border: 1px solid #fde68a; }
.badge-soft-danger   { background: #fef2f2; color: var(--ds-danger); border: 1px solid #fecaca; }
.badge-soft-info     { background: #f0f9ff; color: var(--ds-info); border: 1px solid #bae6fd; }
.badge-soft-secondary{ background: var(--ds-steel-100); color: var(--ds-steel-700); border: 1px solid var(--ds-steel-300); }
.badge-soft-dark     { background: #e2e8f0; color: var(--ds-navy-800); border: 1px solid #cbd5e1; }
[class^="badge-soft-"], [class*=" badge-soft-"] {
  font-weight: 600; font-size: .72rem; padding: .3rem .6rem; border-radius: 999px; display: inline-block;
}

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 600; color: var(--ds-steel-700);
  background: var(--ds-steel-100); border: 1px solid var(--ds-border);
  padding: .28rem .68rem; border-radius: 999px;
  transition: all .2s var(--ds-ease);
}
a.chip:hover { background: var(--ds-blue-050); border-color: var(--ds-blue-100); color: var(--ds-primary); }

.verified-badge {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  background: var(--ds-blue-600); color: #fff; border-radius: 50%; font-size: .62rem;
  vertical-align: middle;
}
.flag { font-size: 1.05em; line-height: 1; }

/* ---------- header (3 parts: top strip / main bar / nav bar) ----------- */
.ds-header {
  position: sticky; top: calc(-1 * var(--hdr-top-h)); z-index: 1030;
  background: #fff;
  /* The header's own bottom edge is the dark nav bar, so a light hairline
     here reads as a white line against a dark hero. Keep it dark. */
  box-shadow: 0 1px 0 rgba(5, 13, 28, .55);
  transition: box-shadow .3s var(--ds-ease);
}
.ds-header.is-scrolled { box-shadow: 0 8px 28px rgba(15, 23, 42, .10); }

/* --- 1. top strip ------------------------------------------------------ */
.hdr-top {
  background: var(--ds-navy-900); color: rgba(255,255,255,.66);
  font-size: .78rem; height: var(--hdr-top-h); overflow: hidden;
}
.hdr-top-inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hdr-top-left, .hdr-top-right { display: flex; align-items: center; gap: 1.15rem; min-width: 0; }
.hdr-top a { color: rgba(255,255,255,.66); white-space: nowrap; transition: color .2s var(--ds-ease); }
.hdr-top a:hover { color: var(--ds-accent); }
.hdr-top i { opacity: .75; margin-right: .18rem; }
.hdr-tagline {
  color: rgba(255,255,255,.5); text-transform: uppercase;
  letter-spacing: .08em; font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.hdr-tagline i { color: var(--ds-accent); opacity: 1; }
.hdr-sep { width: 1px; height: 15px; background: rgba(255,255,255,.16); }
.hdr-social { display: flex; gap: .55rem; }
.hdr-social a { font-size: .92rem; }
@media (max-width: 1199px) { .hdr-tagline, .hdr-top-right a { display: none; } }
@media (max-width: 991px)  { .hdr-top { display: none; } }

/* --- 2. main bar ------------------------------------------------------- */
.hdr-main { background: #fff; height: var(--hdr-main-h); transition: height .3s var(--ds-ease); }
.hdr-main-inner { height: 100%; display: flex; align-items: center; gap: 1.4rem; }

.ds-logo { display: flex; align-items: center; gap: .6rem; flex: none; }
.ds-logo img { height: 46px; width: auto; transition: height .3s var(--ds-ease); }
.ds-logo .wordmark {
  font-family: var(--ds-font-display); font-weight: 800; font-size: 1.42rem;
  line-height: .95; letter-spacing: .01em; color: var(--ds-navy-800); text-transform: uppercase;
}
.ds-logo .wordmark span { display: block; color: var(--ds-primary); }

/* search */
.hdr-search {
  flex: 1 1 auto; max-width: 640px; display: flex; align-items: stretch;
  border: 2px solid var(--ds-steel-300); border-radius: 999px; background: #fff;
  transition: border-color .25s var(--ds-ease), box-shadow .25s var(--ds-ease);
}
.hdr-search:focus-within { border-color: var(--ds-primary); box-shadow: var(--ds-shadow-glow); }
.hdr-scope {
  border: none; background: transparent; font-size: .84rem; font-weight: 600;
  color: var(--ds-steel-700); padding: 0 .5rem 0 1.05rem; border-radius: 999px 0 0 999px;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237b8ba3'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .1rem center; background-size: 15px;
  padding-right: 1.15rem;
}
.hdr-scope:focus { outline: none; }
.hdr-search-field { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.hdr-search-field::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--ds-steel-300);
}
.hdr-search-field .bi-search { position: absolute; left: 1rem; color: var(--ds-steel-500); font-size: .95rem; }
.hdr-search-field input {
  width: 100%; border: none; background: transparent; font-size: .92rem;
  padding: .62rem .8rem .62rem 2.5rem;
}
.hdr-search-field input:focus { outline: none; }
.hdr-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hdr-search-btn {
  border: none; border-radius: 999px; margin: 4px; padding: 0 1.25rem;
  background: var(--ds-grad-blue); color: #fff; font-weight: 700; font-size: .88rem;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: filter .2s var(--ds-ease), transform .2s var(--ds-ease);
}
.hdr-search-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hdr-search-btn i { font-size: .95rem; }

.hdr-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; flex: none; }
.hdr-cta { white-space: nowrap; border-radius: 999px; }
.hdr-login { border-radius: 999px; white-space: nowrap; }
.hdr-burger {
  border: 1px solid var(--ds-border); background: #fff; border-radius: 10px;
  width: 42px; height: 42px; display: grid; place-items: center;
  font-size: 1.35rem; color: var(--ds-navy-800); line-height: 1;
}
.hdr-burger[aria-expanded="true"] { background: var(--ds-blue-050); color: var(--ds-primary); }

.header-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px; color: var(--ds-steel-700);
  position: relative; transition: all .2s var(--ds-ease);
}
.header-action:hover { background: var(--ds-steel-100); color: var(--ds-primary); }
.header-action .count {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px;
  background: var(--ds-accent); color: var(--ds-navy-900);
  font-size: .63rem; font-weight: 800; border-radius: 999px;
  display: grid; place-items: center; padding-inline: 4px;
}

/* --- 3. bottom nav bar ------------------------------------------------- */
.hdr-bottom {
  background: var(--ds-navy-800);
  background-image: linear-gradient(90deg, var(--ds-navy-800), var(--ds-navy-700) 55%, var(--ds-navy-600));
  height: var(--hdr-nav-h);
}
.hdr-bottom-inner { display: flex; align-items: stretch; gap: .4rem; height: 100%; min-width: 0; }

/* "All Categories" mega trigger */
.hdr-mega-wrap { flex: none; display: flex; }
.hdr-mega-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  border: none; background: var(--ds-grad-blue); color: #fff;
  font-weight: 700; font-size: .88rem; padding: 0 1.15rem; height: var(--hdr-nav-h);
  letter-spacing: .01em; white-space: nowrap;
}
.hdr-mega-btn .chev { font-size: .72rem; transition: transform .28s var(--ds-ease); }
.hdr-mega-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr-mega-btn:hover { filter: brightness(1.1); }

.hdr-mega {
  border: none; border-radius: 0 0 var(--ds-radius) var(--ds-radius);
  box-shadow: var(--ds-shadow-lg); padding: 1.5rem;
  width: min(920px, calc(100vw - 2rem));
  grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
.hdr-mega.show { display: grid; animation: dsFadeDown .24s var(--ds-ease-out); }
.hdr-mega-col h6 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800;
  color: var(--ds-steel-500); margin-bottom: .7rem; font-family: var(--ds-font-body);
}
.hdr-mega-col ul { list-style: none; margin: 0; padding: 0; }
.hdr-mega-col li + li { margin-top: .1rem; }
.hdr-mega-col a {
  display: flex; align-items: center; gap: .6rem; padding: .42rem .55rem;
  border-radius: 8px; font-size: .88rem; font-weight: 500; color: var(--ds-text);
  transition: background .18s var(--ds-ease), color .18s var(--ds-ease);
}
.hdr-mega-col a:hover { background: var(--ds-blue-050); color: var(--ds-primary); }
.hdr-mega-col a i { color: var(--ds-steel-500); width: 17px; flex: none; font-size: .95rem; }
.hdr-mega-col a:hover i { color: var(--ds-primary); }
.hdr-mega-col a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-mega-col a em {
  font-style: normal; font-size: .7rem; font-weight: 700; color: var(--ds-steel-500);
  background: var(--ds-steel-100); border-radius: 999px; padding: .1rem .42rem;
}
.hdr-mega-all {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; padding-left: .55rem;
  font-size: .8rem; font-weight: 700; color: var(--ds-primary);
}
.hdr-mega-all i { transition: transform .22s var(--ds-ease); }
.hdr-mega-all:hover i { transform: translateX(3px); }
.hdr-mega-promo { border-left: 1px solid var(--ds-border); padding-left: 1.6rem; }
@media (max-width: 991px) { .hdr-mega-wrap { display: none; } }

/* nav row */
.hdr-nav-collapse { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 992px) { .hdr-nav-collapse { display: flex !important; } }

.ds-nav {
  display: flex; align-items: center; list-style: none; margin: 0; padding: 0;
  flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.ds-nav::-webkit-scrollbar { display: none; }
.ds-nav .nav-link {
  display: block; font-weight: 600; font-size: .89rem; color: rgba(255,255,255,.82);
  padding: 0 .8rem; line-height: var(--hdr-nav-h); position: relative; white-space: nowrap;
  transition: color .2s var(--ds-ease);
}
.ds-nav .nav-link::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: 0; height: 3px;
  background: var(--ds-accent); border-radius: 3px 3px 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ds-ease);
}
.ds-nav .nav-link:hover, .ds-nav .nav-link.active { color: #fff; }
.ds-nav .nav-link:hover::after, .ds-nav .nav-link.active::after { transform: scaleX(1); }

.hdr-bottom-right { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.hdr-bottom-right a {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.72);
  padding: .34rem .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  transition: all .22s var(--ds-ease);
}
.hdr-bottom-right a:hover { color: var(--ds-navy-900); background: var(--ds-accent); border-color: var(--ds-accent); }
.hdr-bottom-right i { font-size: .9rem; }

/* --- scrolled state: the top strip rolls up out of the way --------------
   The main + nav bars keep their exact height so --ds-header-h stays true
   for every sticky element that offsets against it. */
.ds-header.is-scrolled .ds-logo img { height: 40px; }

/* --- mobile ------------------------------------------------------------ */
/* --- mobile header ------------------------------------------------------
   Logo on the left, then matching square icon buttons on the right, and the
   search on its own row. Everything shares one size and one corner radius so
   the bar reads as a set rather than a row of mismatched shapes. */
@media (max-width: 991px) {
  .hdr-main { height: auto; }
  .hdr-main-inner { gap: .5rem; flex-wrap: wrap; padding-block: .55rem; align-items: center; }

  .hdr-actions { gap: .4rem; }
  .hdr-actions .hdr-login,
  .hdr-actions .hdr-burger,
  .hdr-actions .header-action {
    width: 42px; height: 42px; min-width: 42px; padding: 0; border-radius: 12px;
    display: inline-grid; place-items: center; font-size: 1.12rem; line-height: 1;
  }
  .hdr-actions .hdr-login {
    background: var(--ds-grad-blue); border: 0; color: #fff;
    box-shadow: 0 5px 14px rgba(11, 87, 208, .3);
  }
  .hdr-actions .hdr-login i { margin: 0 !important; font-size: 1.12rem; }
  .hdr-actions .hdr-burger,
  .hdr-actions .header-action {
    background: #fff; border: 1px solid var(--ds-border); color: var(--ds-steel-700);
  }
  .hdr-actions .hdr-burger[aria-expanded="true"] {
    background: var(--ds-blue-050); border-color: var(--ds-blue-400); color: var(--ds-primary);
  }
  .hdr-actions .dropdown .btn-ghost { padding: .3rem; border-radius: 12px; }

  /* search sits on its own row, squared off to match the buttons */
  .hdr-search {
    order: 3; flex-basis: 100%; max-width: none;
    border-radius: 12px; border-width: 1px; border-color: var(--ds-border);
    background: var(--ds-steel-100);
  }
  .hdr-search:focus-within { background: #fff; border-color: var(--ds-primary); }
  .hdr-search-field input { padding-block: .6rem; font-size: .93rem; }
  .hdr-search-btn { margin: 3px; border-radius: 9px; padding-inline: .85rem; }
  .hdr-search-btn span { display: none; }
}
/* On a phone the scope picker eats the room the search field needs. */
@media (max-width: 575px) {
  .hdr-scope { display: none; }
  .hdr-search-field::before { display: none; }
  .hdr-search-field .bi-search { left: .85rem; }
  .hdr-search-field input { padding-left: 2.35rem; }
}
@media (max-width: 991px) {
  .ds-logo img { height: 34px; }
  .ds-logo .wordmark { font-size: 1.12rem; }

  /* no white sliver under the bar while the menu is closed */
  .hdr-bottom { background: #fff; height: auto; }
  .hdr-bottom-inner:not(:has(.show)):not(:has(.collapsing)) { min-height: 0; }
  .hdr-bottom-inner { display: block; }
  .hdr-nav-collapse { display: none; flex-direction: column; align-items: stretch; }
  .hdr-nav-collapse.show, .hdr-nav-collapse.collapsing { display: flex; }
  .ds-nav { flex-direction: column; align-items: stretch; padding: .5rem 0 1rem; }
  .ds-nav .nav-link {
    color: var(--ds-text); line-height: 1.4; padding: .75rem .25rem;
    border-bottom: 1px solid var(--ds-steel-100);
  }
  .ds-nav .nav-link::after { display: none; }
  .ds-nav .nav-link.active { color: var(--ds-primary); }
}

/* Mega dropdown */
.ds-dropdown {
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-lg); padding: .6rem; min-width: 240px;
  animation: dsFadeDown .22s var(--ds-ease-out);
}
.ds-dropdown .dropdown-item {
  border-radius: 8px; font-weight: 500; font-size: .9rem; padding: .5rem .7rem;
  display: flex; align-items: center; gap: .6rem;
}
.ds-dropdown .dropdown-item:hover { background: var(--ds-blue-050); color: var(--ds-primary); }
.ds-dropdown .dropdown-item i { color: var(--ds-steel-500); width: 18px; }
.ds-dropdown .dropdown-item:hover i { color: var(--ds-primary); }

@keyframes dsFadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Header search */
.header-search { position: relative; flex: 1; max-width: 420px; }
.header-search input {
  border-radius: 999px; border: 1px solid var(--ds-border); background: var(--ds-steel-100);
  padding: .55rem 1rem .55rem 2.4rem; font-size: .9rem; width: 100%;
  transition: all .25s var(--ds-ease);
}
.header-search input:focus {
  outline: none; background: #fff; border-color: var(--ds-blue-400); box-shadow: var(--ds-shadow-glow);
}
.header-search .bi-search {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--ds-steel-500);
}

.search-suggest {
  position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 1040;
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-lg); overflow: hidden; max-height: 420px; overflow-y: auto;
  animation: dsFadeDown .2s var(--ds-ease-out);
}
.search-suggest a {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem;
  border-bottom: 1px solid var(--ds-steel-100); color: var(--ds-text);
}
.search-suggest a:last-child { border-bottom: none; }
.search-suggest a:hover { background: var(--ds-blue-050); }
.search-suggest img, .search-suggest .ph {
  width: 34px; height: 34px; object-fit: contain; border-radius: 8px;
  background: var(--ds-steel-100); flex: none;
}
.search-suggest .type {
  margin-left: auto; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ds-steel-500);
}

/* ---------- hero ----------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--ds-grad-hero);
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
  padding-top: clamp(3rem, 7vw, 6rem);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 18% 22%, rgba(79, 147, 255, .28), transparent 42%),
                    radial-gradient(circle at 82% 12%, rgba(245, 179, 1, .16), transparent 40%),
                    radial-gradient(circle at 60% 88%, rgba(11, 87, 208, .3), transparent 45%);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-2%, 2%); }
}
.hero .hero-media {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%;
  opacity: .62; z-index: 0;
}
.hero .hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(95deg, rgba(5,13,28,.93) 0%, rgba(5,13,28,.78) 42%, rgba(5,13,28,.42) 78%, rgba(11,63,168,.35) 100%);
}
/* the animated radial wash sits under the photo, not over it */
.hero:has(.hero-media)::before { opacity: .55; z-index: 0; }
.hero > .container-ds, .hero > .container { position: relative; z-index: 2; }

.hero h1 { color: #fff; max-width: 18ch; margin-bottom: 1rem; }
.hero h1 .accent { color: var(--ds-gold-500); display: block; }
.hero .lead { color: rgba(255,255,255,.82); font-size: 1.06rem; max-width: 58ch; }

/* Grid overlay for a technical feel */
.hero .grid-overlay {
  position: absolute; inset: 0; opacity: .09; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}

/* Hero search box */
.hero-search { max-width: 720px; }
.hero-search .search-tabs { display: flex; gap: .35rem; margin-bottom: .7rem; flex-wrap: wrap; }
.hero-search .search-tabs button {
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  font-size: .82rem; font-weight: 600; padding: .35rem .95rem; border-radius: 999px;
  transition: all .22s var(--ds-ease); backdrop-filter: blur(6px);
}
.hero-search .search-tabs button:hover { background: rgba(255,255,255,.18); color: #fff; }
.hero-search .search-tabs button.active {
  background: var(--ds-blue-600); border-color: var(--ds-blue-500); color: #fff;
  box-shadow: 0 4px 16px rgba(11, 87, 208, .45);
}
.hero-search .search-field {
  display: flex; align-items: center; gap: .5rem; background: #fff;
  border-radius: 999px; padding: .38rem .38rem .38rem 1.1rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
}
.hero-search .search-field i.bi-search { color: var(--ds-steel-500); }
.hero-search .search-field input {
  border: none; outline: none; flex: 1; font-size: .98rem; padding: .55rem 0; color: var(--ds-text);
  background: transparent; min-width: 0;
}
.hero-search .search-field button {
  border: none; border-radius: 999px; padding: .6rem 1.5rem; font-weight: 700;
  background: var(--ds-grad-gold); color: var(--ds-navy-900); white-space: nowrap;
  transition: all .22s var(--ds-ease);
}
.hero-search .search-field button:hover { filter: brightness(1.06); transform: translateX(1px); }

.hero-hints { margin-top: .8rem; font-size: .84rem; color: rgba(255,255,255,.6); }
.hero-hints a { color: rgba(255,255,255,.86); border-bottom: 1px dashed rgba(255,255,255,.3); }
.hero-hints a:hover { color: #fff; border-color: #fff; }

/* Stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.6rem; }
.stat-card {
  display: flex; align-items: center; gap: .9rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--ds-radius); padding: 1rem 1.1rem; backdrop-filter: blur(10px);
  transition: transform .3s var(--ds-ease), background .3s var(--ds-ease);
}
.stat-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.13); }
.stat-card .icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.2rem; color: #fff;
}
.stat-card .value {
  font-family: var(--ds-font-display); font-size: 1.65rem; font-weight: 800; line-height: 1; color: #fff;
}
.stat-card .label { font-size: .8rem; color: rgba(255,255,255,.68); margin-top: .15rem; }

@media (max-width: 991px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-strip { grid-template-columns: 1fr; } }

/* ---------- page banner (inner pages) --------------------------------- */
.page-banner {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  background: var(--ds-grad-hero);
}
.page-banner.purple { background: linear-gradient(120deg, #2e1065, #5b21b6 55%, #7c3aed); }
.page-banner.green  { background: linear-gradient(120deg, #052e16, #14532d 55%, #15803d); }
.page-banner.gold   { background: linear-gradient(120deg, #451a03, #92400e 55%, #d97706); }
.page-banner.teal   { background: linear-gradient(120deg, #042f2e, #115e59 55%, #0d9488); }
.page-banner::after {
  content: ''; position: absolute; inset: 0; opacity: .1; z-index: 1;
  background-image: radial-gradient(circle at 80% 20%, #fff, transparent 45%);
}
/* optional photograph behind the gradient */
.page-banner .pb-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; opacity: .5;
}
.page-banner .pb-scrim {
  position: absolute; inset: 0; z-index: 1; display: block;
  background: linear-gradient(100deg, rgba(5,13,28,.9) 0%, rgba(5,13,28,.6) 55%, rgba(5,13,28,.35) 100%);
}
.page-banner.purple .pb-scrim { background: linear-gradient(100deg, rgba(46,16,101,.92), rgba(91,33,182,.55)); }
.page-banner.gold   .pb-scrim { background: linear-gradient(100deg, rgba(69,26,3,.92), rgba(146,64,14,.55)); }
.page-banner.teal   .pb-scrim { background: linear-gradient(100deg, rgba(4,47,46,.92), rgba(17,94,89,.55)); }
.page-banner.green  .pb-scrim { background: linear-gradient(100deg, rgba(5,46,22,.92), rgba(20,83,45,.55)); }
.page-banner .container-ds, .page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; margin-bottom: .4rem; }
.page-banner p { color: rgba(255,255,255,.78); margin: 0; max-width: 62ch; }

.ds-breadcrumb {
  background: transparent; padding: 0; margin-bottom: .9rem; font-size: .85rem;
}
.ds-breadcrumb .breadcrumb-item, .ds-breadcrumb a { color: rgba(255,255,255,.66); }
.ds-breadcrumb a:hover { color: #fff; }
.ds-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,.95); }
.ds-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }
.breadcrumb-light .ds-breadcrumb .breadcrumb-item,
.breadcrumb-light .ds-breadcrumb a { color: var(--ds-muted); }
.breadcrumb-light .ds-breadcrumb .breadcrumb-item.active { color: var(--ds-text); }

/* ---------- cards ----------------------------------------------------- */
.ds-card {
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  overflow: hidden; height: 100%; position: relative;
  transition: transform .35s var(--ds-ease), box-shadow .35s var(--ds-ease), border-color .35s var(--ds-ease);
}
.ds-card:hover {
  transform: translateY(-6px); box-shadow: var(--ds-shadow-lg); border-color: var(--ds-blue-100);
}
.ds-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ds-grad-blue); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ds-ease);
}
.ds-card:hover::before { transform: scaleX(1); }

.ds-card .card-body { padding: 1.15rem; }

/* Company card */
.company-card h3 {
  font-size: 1.02rem; font-family: var(--ds-font-body); font-weight: 700;
  margin: 0 0 .3rem; line-height: 1.35;
}
.company-card h3 a { color: var(--ds-navy-800); }
.company-card h3 a:hover { color: var(--ds-primary); }
.company-card .card-foot {
  border-top: 1px solid var(--ds-steel-100); padding: .7rem 1.15rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--ds-bg-soft);
}

/* Product card */
.product-card .spec-row {
  display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .78rem; color: var(--ds-muted);
  margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--ds-border);
}
.product-card .spec-row b { color: var(--ds-text); font-weight: 600; }

/* Person card */
.person-card h3 { font-size: .98rem; font-family: var(--ds-font-body); font-weight: 700; margin: .55rem 0 .15rem; }

/* Category tile */
/* ---------- category cards -------------------------------------------- */
.cat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .cat-grid { gap: .7rem; } }
.cat-grid > * { min-width: 0; }

.cat-card {
  position: relative; display: block; overflow: hidden; height: 100%;
  min-height: 205px; border-radius: var(--ds-radius);
  background: var(--ds-navy-800); color: #fff; isolation: isolate;
  box-shadow: var(--ds-shadow-xs);
  transition: transform .4s var(--ds-ease), box-shadow .4s var(--ds-ease);
}
.cat-card--wide { min-height: 235px; }
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--ds-shadow); color: #fff; }

.cat-media { position: absolute; inset: 0; z-index: 0; display: block; }
.cat-media img, .cat-media-fallback {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ds-ease), filter .5s var(--ds-ease);
  filter: saturate(.85);
}
.cat-card:hover .cat-media img { transform: scale(1.08); filter: saturate(1.05); }

.cat-overlay {
  position: absolute; inset: 0; z-index: 1; display: block;
  background: linear-gradient(180deg, rgba(5,13,28,.18) 0%, rgba(5,13,28,.55) 48%, rgba(5,13,28,.9) 100%);
  transition: background .4s var(--ds-ease);
}
.cat-card:hover .cat-overlay {
  background: linear-gradient(180deg, rgba(11,63,168,.28) 0%, rgba(5,13,28,.6) 46%, rgba(5,13,28,.93) 100%);
}

.cat-body {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  height: 100%; justify-content: flex-end; padding: 1.05rem 1.05rem 1.15rem;
}
.cat-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.15rem; color: #fff; margin-bottom: auto;
  box-shadow: 0 6px 18px rgba(5,13,28,.4);
  transition: transform .45s var(--ds-ease);
}
.cat-card:hover .cat-icon { transform: translateY(-3px) rotate(-8deg) scale(1.06); }

.cat-name {
  display: block; font-family: var(--ds-font-display); font-weight: 700;
  font-size: 1.18rem; line-height: 1.15; letter-spacing: .01em; color: #fff;
  text-wrap: balance; margin-top: .8rem; overflow-wrap: anywhere;
}
.cat-count {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ds-gold-300); margin-top: .3rem;
}
.cat-desc {
  display: block; font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.72);
  margin-top: .45rem;
}

.cat-go {
  position: absolute; z-index: 3; right: .9rem; bottom: 1.05rem;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ds-accent); color: var(--ds-navy-900); font-size: .9rem;
  opacity: 0; transform: translateX(-8px) scale(.8);
  transition: opacity .3s var(--ds-ease), transform .35s var(--ds-ease);
}
.cat-card:hover .cat-go { opacity: 1; transform: none; }

/* gold rule that draws in along the bottom edge */
.cat-card::after {
  content: ''; position: absolute; z-index: 3; inset: auto 0 0 0; height: 3px;
  background: var(--ds-grad-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ds-ease);
}
.cat-card:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .cat-card, .cat-card *, .cat-card::after { transition: none !important; }
  .cat-card:hover { transform: none; }
}

/* Post card */
.post-card .img-wrap { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ds-steel-100); }
.post-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ds-ease); }
.ds-card:hover .post-card .img-wrap img, .post-card:hover .img-wrap img { transform: scale(1.06); }
.post-card h3 { font-size: 1.02rem; font-family: var(--ds-font-body); font-weight: 700; line-height: 1.4; margin: .5rem 0 .35rem; }
.post-card .post-meta { font-size: .78rem; color: var(--ds-muted); display: flex; gap: .8rem; flex-wrap: wrap; }

/* Event card */
.event-card { display: flex; gap: 0; }
.event-card .date-block {
  flex: none; width: 88px; background: var(--ds-grad-hero); color: #fff;
  display: grid; place-content: center; text-align: center; padding: 1rem .5rem;
}
.event-card .date-block .day { font-family: var(--ds-font-display); font-size: 1.9rem; font-weight: 800; line-height: 1; }
.event-card .date-block .mon { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.event-card .date-block .yr { font-size: .7rem; opacity: .6; }

/* Rating */
.rating-stars { color: var(--ds-gold-500); font-size: .82rem; letter-spacing: .5px; }
.rating-count { font-size: .76rem; color: var(--ds-muted); }

/* ---------- listing layout -------------------------------------------- */
.listing-wrap { display: grid; grid-template-columns: 282px 1fr; gap: 1.6rem; align-items: start; }
/* the sidebar column must span the full row height or the sticky panel
   inside it has nowhere to travel */
.listing-wrap > aside { align-self: stretch; min-width: 0; }
@media (max-width: 991px) { .listing-wrap { grid-template-columns: 1fr; } }

.filter-panel {
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  position: sticky; top: calc(var(--ds-header-h) + 12px); max-height: calc(100vh - var(--ds-header-h) - 28px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: var(--ds-steel-300) transparent;
  box-shadow: var(--ds-shadow-xs);
}
.filter-panel .filter-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem; border-bottom: 1px solid var(--ds-border); position: sticky; top: 0; background: #fff; z-index: 2;
}
.filter-panel .filter-head h4 { font-size: .95rem; margin: 0; font-family: var(--ds-font-body); font-weight: 700; }
.filter-group { border-bottom: 1px solid var(--ds-steel-100); padding: .85rem 1rem; }
.filter-group:last-child { border-bottom: none; }
.filter-group > h5 {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ds-steel-700); margin: 0 0 .6rem; font-family: var(--ds-font-body);
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
}
.filter-group > h5 i { transition: transform .25s var(--ds-ease); font-size: .9rem; }
.filter-group.collapsed > h5 i { transform: rotate(-90deg); }
.filter-group.collapsed .filter-body { display: none; }
/* scrollbar-gutter reserves the track, so the scrollbar never sits on top
   of the count at the right edge of each option. */
.filter-body { max-height: 232px; overflow-y: auto; scrollbar-gutter: stable; padding-right: .3rem; }
.filter-body::-webkit-scrollbar, .filter-panel::-webkit-scrollbar { width: 8px; }
.filter-body::-webkit-scrollbar-thumb, .filter-panel::-webkit-scrollbar-thumb {
  background: var(--ds-steel-300); border-radius: 99px;
  border: 2px solid #fff; background-clip: padding-box;
}
.filter-body::-webkit-scrollbar-thumb:hover, .filter-panel::-webkit-scrollbar-thumb:hover { background: var(--ds-steel-500); background-clip: padding-box; }
.filter-body::-webkit-scrollbar-track, .filter-panel::-webkit-scrollbar-track { background: transparent; }
.filter-body { scrollbar-width: thin; scrollbar-color: var(--ds-steel-300) transparent; }
.filter-check {
  display: flex; align-items: center; gap: .5rem; padding: .22rem 0; font-size: .86rem; cursor: pointer;
  color: var(--ds-text);
}
.filter-check input { accent-color: var(--ds-primary); width: 15px; height: 15px; flex: none; }
.filter-check span.label { flex: 1; }
.filter-check .n { font-size: .74rem; color: var(--ds-steel-500); flex: none; padding-left: .25rem; font-variant-numeric: tabular-nums; }
.filter-check:hover { color: var(--ds-primary); }
.filter-more { font-size: .8rem; font-weight: 600; margin-top: .35rem; display: inline-block; }

.listing-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  padding: .7rem .95rem; margin-bottom: 1.1rem;
}
.listing-toolbar .count { font-size: .88rem; color: var(--ds-muted); }
.listing-toolbar .count b { color: var(--ds-text); }
.listing-toolbar select {
  border: 1px solid var(--ds-border); border-radius: 8px; padding: .38rem .6rem;
  font-size: .86rem; font-weight: 600; color: var(--ds-text); background: #fff;
}
.view-toggle { display: inline-flex; gap: .25rem; }

.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.active-filters .chip { background: var(--ds-blue-050); border-color: var(--ds-blue-100); color: var(--ds-primary); }
.active-filters .chip i { font-size: .8rem; }

/* list view variant */
.view-list .ds-card { display: flex; }
@media (max-width: 575px) {
  .view-list .ds-card { display: block; }
}

/* ---------- profile / detail ------------------------------------------ */
.profile-hero {
  position: relative; color: #fff; overflow: hidden;
  padding: 2.6rem 0 2.2rem;
  background: var(--ds-grad-hero);
}
.profile-hero .cover {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .25;
}
.profile-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,13,28,.92), rgba(5,13,28,.55));
}
.profile-hero > .container-ds, .profile-hero > .container { position: relative; z-index: 2; }

.profile-identity { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.profile-logo {
  width: 138px; height: 138px; flex: none; background: #fff; border-radius: var(--ds-radius);
  display: grid; place-items: center; padding: 1rem; box-shadow: var(--ds-shadow-lg);
}
.profile-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.profile-identity h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: #fff; margin-bottom: .35rem; }
.profile-identity .sub { color: rgba(255,255,255,.78); font-size: .95rem; }
.profile-identity .quick-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.profile-identity .quick-meta .chip {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.9);
}

.profile-tabs {
  background: #fff; border-bottom: 1px solid var(--ds-border);
  position: sticky; top: var(--ds-header-h); z-index: 1020;
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
.profile-tabs .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.profile-tabs .nav::-webkit-scrollbar { display: none; }
.profile-tabs .nav-link {
  border: none; border-bottom: 3px solid transparent; border-radius: 0;
  font-weight: 600; font-size: .92rem; color: var(--ds-muted); padding: .9rem 1.05rem; white-space: nowrap;
  transition: all .25s var(--ds-ease);
}
.profile-tabs .nav-link:hover { color: var(--ds-primary); }
.profile-tabs .nav-link.active { color: var(--ds-primary); border-bottom-color: var(--ds-primary); background: transparent; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; }
.info-tile {
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  padding: 1rem; display: flex; gap: .8rem; align-items: flex-start;
  transition: transform .3s var(--ds-ease), box-shadow .3s var(--ds-ease);
}
.info-tile:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-sm); }
.info-tile .icon {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--ds-blue-050); color: var(--ds-primary); font-size: 1.05rem;
}
.info-tile .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-steel-500); font-weight: 700; }
.info-tile .value { font-weight: 700; color: var(--ds-navy-800); font-size: .97rem; line-height: 1.35; }
/* Email addresses and URLs are single unbreakable tokens — let them wrap
   rather than push the tile past the edge of the grid. */
.info-tile { min-width: 0; }
.info-tile .value, .info-tile .label, .info-tile .muted, .info-tile a { overflow-wrap: anywhere; min-width: 0; }

.panel {
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  overflow: hidden; margin-bottom: 1.3rem;
}
.panel > .panel-head {
  padding: .95rem 1.15rem; border-bottom: 1px solid var(--ds-border);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: linear-gradient(180deg, #fff, var(--ds-bg-soft));
}
.panel > .panel-head h2, .panel > .panel-head h3 {
  font-size: 1.06rem; margin: 0; font-family: var(--ds-font-body); font-weight: 700;
  display: flex; align-items: center; gap: .55rem;
}
.panel > .panel-head h2 i, .panel > .panel-head h3 i { color: var(--ds-primary); }
.panel > .panel-body { padding: 1.15rem; }

.kv-table { width: 100%; font-size: .92rem; }
.kv-table tr { border-bottom: 1px solid var(--ds-steel-100); }
.kv-table tr:last-child { border-bottom: none; }
.kv-table td { padding: .6rem .2rem; vertical-align: top; }
.kv-table td:first-child { color: var(--ds-muted); width: 42%; }
.kv-table td:last-child { font-weight: 600; color: var(--ds-navy-800); }

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  position: relative; padding-left: 1.7rem; margin-bottom: .55rem; font-size: .93rem;
}
.feature-list li::before {
  content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: .05rem;
  color: var(--ds-success); font-size: .95rem;
}

/* Timeline */
.ds-timeline { position: relative; padding-left: 2rem; }
.ds-timeline::before {
  content: ''; position: absolute; left: 7px; top: .4rem; bottom: .4rem; width: 2px;
  background: linear-gradient(to bottom, var(--ds-blue-400), var(--ds-steel-300));
}
.ds-timeline .tl-item { position: relative; padding-bottom: 1.35rem; }
.ds-timeline .tl-item::before {
  content: ''; position: absolute; left: -1.68rem; top: .38rem; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-blue-050);
}
.ds-timeline .tl-year {
  font-family: var(--ds-font-display); font-weight: 700; color: var(--ds-primary); font-size: 1.02rem;
}
.ds-timeline .tl-title { font-weight: 700; color: var(--ds-navy-800); }
.ds-timeline .tl-desc { font-size: .9rem; color: var(--ds-muted); }

/* Gallery */
.ds-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.ds-gallery a {
  display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 10px; position: relative;
  background: var(--ds-steel-100);
}
.ds-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ds-ease); }
.ds-gallery a:hover img { transform: scale(1.08); }
.ds-gallery a::after {
  content: '\F4FE'; font-family: 'bootstrap-icons'; position: absolute; inset: 0;
  display: grid; place-items: center; color: #fff; font-size: 1.4rem;
  background: rgba(5,13,28,.4); opacity: 0; transition: opacity .3s var(--ds-ease);
}
.ds-gallery a:hover::after { opacity: 1; }

/* Sticky sidebar */
.sticky-side { position: sticky; top: calc(var(--ds-header-h) + 62px); }

/* ---------- comparison ------------------------------------------------- */
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: #fff; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; }
.compare-table th, .compare-table td {
  padding: .85rem 1rem; border-bottom: 1px solid var(--ds-steel-100); vertical-align: middle; font-size: .92rem;
}
/* `top` is measured against the nearest scrolling ancestor, and
   .compare-table-wrap is one because of its overflow-x. So top:var(--ds-header-h)
   did not park the header under the site header — it shoved every header cell
   120px down inside the wrapper, permanently, straight over the first two rows.
   That is the "Category row is cropped" bug. The wrapper never scrolls
   vertically, so the offset has to be zero. */
.compare-table thead th {
  position: sticky; top: 0; background: #fff; z-index: 5;
  border-bottom: 2px solid var(--ds-border); text-align: center; vertical-align: top; padding: 1rem;
}
.compare-table tbody th {
  text-align: left; font-weight: 600; color: var(--ds-muted); width: 200px;
  background: var(--ds-bg-soft); position: sticky; left: 0; z-index: 2;
}
.compare-table td { text-align: center; }
.compare-table .group-row th {
  background: var(--ds-navy-800); color: #fff; font-family: var(--ds-font-display);
  font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; padding: .6rem 1rem;
}
.compare-table .row-same td, .compare-table .row-same th { opacity: .68; }
.compare-table td.winner {
  background: #ecfdf5; font-weight: 700; color: var(--ds-success); position: relative;
}
.compare-table td.winner::after {
  content: '\F26B'; font-family: 'bootstrap-icons'; margin-left: .35rem; font-size: .85rem;
}
.compare-head-card { text-align: center; min-width: 190px; position: relative; }
/* Column widths live here rather than in inline styles, so the mobile rules
   further down can actually override them. */
.compare-label-head { min-width: 190px; text-align: left; }
.compare-slot-head  { min-width: 190px; }
.compare-head-card img { height: 74px; object-fit: contain; margin-bottom: .5rem; }
.compare-head-card .name { font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--ds-navy-800); }
.compare-head-card .brand { font-size: .78rem; color: var(--ds-muted); }
.compare-head-card .remove {
  position: absolute; top: .4rem; right: .4rem; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ds-steel-100); color: var(--ds-steel-700); display: grid; place-items: center;
  font-size: .72rem; border: none;
}
.compare-head-card .remove:hover { background: var(--ds-danger); color: #fff; }

.compare-slot {
  border: 2px dashed var(--ds-steel-300); border-radius: var(--ds-radius);
  min-height: 150px; display: grid; place-items: center; text-align: center;
  color: var(--ds-steel-500); padding: 1rem; transition: all .3s var(--ds-ease); cursor: pointer;
}
.compare-slot:hover { border-color: var(--ds-primary); color: var(--ds-primary); background: var(--ds-blue-050); }

/* floating compare tray */
.compare-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
  background: #fff; border-top: 1px solid var(--ds-border);
  box-shadow: 0 -12px 40px rgba(15,23,42,.14);
  transform: translateY(110%); transition: transform .4s var(--ds-ease-out);
  padding: .8rem 0;
}
.compare-tray.open { transform: none; }
.compare-tray .tray-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.compare-tray .tray-items { display: flex; gap: .6rem; flex: 1; flex-wrap: wrap; }
.compare-tray .tray-item {
  display: flex; align-items: center; gap: .5rem; background: var(--ds-bg-soft);
  border: 1px solid var(--ds-border); border-radius: 10px; padding: .35rem .55rem; font-size: .84rem;
  max-width: 220px;
}
.compare-tray .tray-item img { width: 30px; height: 30px; object-fit: contain; }
.compare-tray .tray-item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.compare-tray .tray-item button { border: none; background: none; color: var(--ds-steel-500); font-size: .8rem; }
.compare-tray .tray-item button:hover { color: var(--ds-danger); }

/* ---------- top lists --------------------------------------------------- */
.rank-item {
  display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.15rem;
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  margin-bottom: .9rem; position: relative; overflow: hidden;
  transition: transform .3s var(--ds-ease), box-shadow .3s var(--ds-ease);
}
.rank-item:hover { transform: translateX(4px); box-shadow: var(--ds-shadow); }
.rank-item .rank-no {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--ds-font-display); font-size: 1.5rem; font-weight: 800; color: #fff;
  background: var(--ds-grad-blue); box-shadow: 0 6px 16px rgba(11,87,208,.28);
}
.rank-item:nth-child(1) .rank-no { background: var(--ds-grad-gold); color: var(--ds-navy-900); box-shadow: 0 6px 16px rgba(245,179,1,.35); }
.rank-item:nth-child(2) .rank-no { background: var(--ds-grad-steel); color: var(--ds-navy-800); }
.rank-item:nth-child(3) .rank-no { background: linear-gradient(135deg, #b45309, #f59e0b); }
.rank-item .thumb {
  width: 76px; height: 76px; flex: none; border-radius: 12px; object-fit: contain;
  background: var(--ds-steel-100); padding: .4rem;
}
.rank-item h3 { font-size: 1.08rem; font-family: var(--ds-font-body); font-weight: 700; margin: 0 0 .25rem; }

/* ---------- forms ------------------------------------------------------- */
.form-label { font-weight: 600; font-size: .87rem; color: var(--ds-text); margin-bottom: .35rem; }
.form-control, .form-select {
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  padding: .62rem .85rem; font-size: .93rem; transition: all .22s var(--ds-ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ds-blue-400); box-shadow: var(--ds-shadow-glow);
}
.form-control::placeholder { color: var(--ds-steel-500); }
.form-check-input:checked { background-color: var(--ds-primary); border-color: var(--ds-primary); }
.hp-field { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; }

.ds-alert {
  border: none; border-left: 4px solid; border-radius: var(--ds-radius-sm);
  padding: .85rem 1.1rem; font-size: .92rem; display: flex; align-items: flex-start; gap: .65rem;
  animation: dsSlideIn .4s var(--ds-ease-out);
}
.ds-alert.alert-success { background: #ecfdf5; border-color: var(--ds-success); color: #065f46; }
.ds-alert.alert-danger  { background: #fef2f2; border-color: var(--ds-danger); color: #991b1b; }
.ds-alert.alert-warning { background: #fffbeb; border-color: var(--ds-warning); color: #92400e; }
.ds-alert.alert-info    { background: #f0f9ff; border-color: var(--ds-info); color: #075985; }
@keyframes dsSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- pagination --------------------------------------------------- */
.ds-pagination { gap: .3rem; justify-content: center; margin-top: 2rem; }
.ds-pagination .page-link {
  border: 1px solid var(--ds-border); border-radius: 10px; color: var(--ds-text);
  min-width: 40px; text-align: center; font-weight: 600; font-size: .88rem; padding: .5rem .7rem;
  transition: all .22s var(--ds-ease);
}
.ds-pagination .page-link:hover { background: var(--ds-blue-050); border-color: var(--ds-blue-400); color: var(--ds-primary); }
.ds-pagination .page-item.active .page-link {
  background: var(--ds-grad-blue); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(11,87,208,.3);
}
.ds-pagination .page-item.disabled .page-link { opacity: .45; }

/* ---------- footer (two sections) ------------------------------------- */
.ds-footer {
  background: var(--ds-navy-900); color: rgba(255,255,255,.66);
  padding-top: 3.2rem; position: relative; font-size: .92rem;
}
.ds-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ds-grad-blue);
}
.ds-footer a { color: rgba(255,255,255,.66); transition: color .2s var(--ds-ease); }
.ds-footer a:hover { color: #fff; }
.ds-footer h5 {
  color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  font-family: var(--ds-font-body); font-weight: 800; margin: 0 0 1.1rem;
}
.ds-footer ul { list-style: none; padding: 0; margin: 0; }

/* --- SECTION 1: brand block + three link columns, one grid ------------- */
.foot-main {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  padding-bottom: 2.4rem;
}
@media (max-width: 1099px) { .foot-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 700px)  { .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; } }
@media (max-width: 420px)  { .foot-main { grid-template-columns: 1fr; } }

.foot-logo { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.foot-logo img { height: 46px; width: auto; }
.foot-logo .wordmark {
  font-family: var(--ds-font-display); font-weight: 800; font-size: 1.32rem; line-height: .95;
  text-transform: uppercase; color: #fff;
}
.foot-logo .wordmark span { display: block; color: var(--ds-blue-400); }

.foot-tagline { max-width: 44ch; margin: 0 0 1.2rem; line-height: 1.65; }

.ds-footer ul.foot-contact { display: grid; gap: .55rem; margin: 0 0 1.6rem; }
.foot-contact li { display: grid; grid-template-columns: 20px 1fr; gap: .5rem; align-items: start; }
.foot-contact i { color: var(--ds-blue-400); font-size: .95rem; line-height: 1.6; }
.foot-contact span, .foot-contact a { line-height: 1.6; }

.foot-news { max-width: 420px; margin-bottom: 1.3rem; }
.foot-news label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .55rem;
}
.foot-news .form-control {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; font-size: .9rem;
}
.foot-news .form-control::placeholder { color: rgba(255,255,255,.45); }
.foot-news .form-control:focus {
  background: rgba(255,255,255,.14); border-color: var(--ds-blue-400); box-shadow: none; color: #fff;
}

.foot-social { display: flex; gap: .5rem; flex-wrap: wrap; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.8);
  transition: all .28s var(--ds-ease);
}
.foot-social a:hover { background: var(--ds-primary); color: #fff; transform: translateY(-3px); }

.foot-col ul { display: grid; gap: .55rem; align-content: start; }
.foot-col li { line-height: 1.5; }
.foot-col a { display: inline-block; position: relative; }
.foot-col a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ds-ease);
}
.foot-col a:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- SECTION 2: copyright and legal links ----------------------------- */
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 1.15rem 0 1.3rem; font-size: .82rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem 1.6rem; flex-wrap: wrap;
}
.foot-copy { margin: 0; }
.foot-legal { display: flex; gap: 1.3rem; flex-wrap: wrap; }
/* Below desktop the bottom row stacks and centres, with room left for the
   floating back-to-top button so it never sits on top of a link. */
@media (max-width: 991px) {
  .foot-bottom { justify-content: center; text-align: center; padding-bottom: 3.6rem; }
  .foot-copy, .foot-legal { width: 100%; }
  .foot-legal { justify-content: center; }
}

/* ---------- CTA strip ------------------------------------------------------ */
.cta-strip {
  background: var(--ds-grad-hero); color: #fff; border-radius: var(--ds-radius-lg);
  padding: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden;
}
.cta-strip::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(245,179,1,.24), transparent 68%);
  animation: dsPulse 6s ease-in-out infinite;
}
@keyframes dsPulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.16); opacity: .6; } }
.cta-strip h2 { color: #fff; }

/* ---------- marquee ---------------------------------------------------------- */
.logo-marquee { overflow: hidden; position: relative; padding: 1.2rem 0; }
.logo-marquee::before, .logo-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2;
}
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--ds-bg-soft), transparent); }
.logo-marquee::after { right: 0; background: linear-gradient(-90deg, var(--ds-bg-soft), transparent); }
.logo-marquee .track { display: flex; gap: 3rem; width: max-content; animation: dsMarquee 38s linear infinite; }
.logo-marquee:hover .track { animation-play-state: paused; }
.logo-marquee img { height: 40px; object-fit: contain; filter: grayscale(1); opacity: .58; transition: all .3s var(--ds-ease); }
.logo-marquee img:hover { filter: none; opacity: 1; transform: scale(1.06); }
@keyframes dsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- animations ------------------------------------------------------- */
/* Scroll reveals are an ENHANCEMENT, never a prerequisite for seeing the page.
   Nothing is hidden unless JavaScript has confirmed it can run the animation
   (html.js-reveal), and html.reveal-off is the escape hatch that puts
   everything back if the script fails, stalls or is blocked. */
.js-reveal:not(.reveal-off) [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ds-ease-out), transform .7s var(--ds-ease-out);
}
.js-reveal:not(.reveal-off) [data-reveal="left"]  { transform: translateX(-30px); }
.js-reveal:not(.reveal-off) [data-reveal="right"] { transform: translateX(30px); }
/* On narrow screens a sideways start position pushes full-width blocks past
   the edge and produces a horizontal scrollbar, so slide them up instead. */
@media (max-width: 991px) {
  .js-reveal:not(.reveal-off) [data-reveal="left"],
  .js-reveal:not(.reveal-off) [data-reveal="right"] { transform: translateY(24px); }
}
.js-reveal:not(.reveal-off) [data-reveal="zoom"]  { transform: scale(.94); }
.js-reveal:not(.reveal-off) [data-reveal].revealed { opacity: 1; transform: none; }
.reveal-off [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }
[data-reveal-delay="6"] { transition-delay: .48s; }

.float-slow { animation: dsFloat 7s ease-in-out infinite; }
@keyframes dsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.shimmer {
  background: linear-gradient(100deg, var(--ds-steel-100) 20%, #fff 40%, var(--ds-steel-100) 60%);
  background-size: 220% 100%; animation: dsShimmer 1.5s linear infinite;
}
@keyframes dsShimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }

.spin-slow { animation: dsSpin 18s linear infinite; }
@keyframes dsSpin { to { transform: rotate(360deg); } }

.hover-lift { transition: transform .3s var(--ds-ease), box-shadow .3s var(--ds-ease); }
.hover-lift:hover { transform: translateY(-5px); box-shadow: var(--ds-shadow); }

/* back to top */
.back-to-top {
  position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--ds-grad-blue); color: #fff; border: none; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(11,87,208,.36); z-index: 1040;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all .35s var(--ds-ease);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { transform: translateY(-3px); }

/* progress bar for article reading */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; background: var(--ds-grad-gold); z-index: 1060; width: 0;
  transition: width .1s linear;
}

/* Empty state */
.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--ds-muted); }
.empty-state i { font-size: 3.2rem; color: var(--ds-steel-300); display: block; margin-bottom: .8rem; }
.empty-state h3 { font-family: var(--ds-font-body); font-size: 1.15rem; color: var(--ds-text); }

/* prose */
.prose { font-size: 1rem; line-height: 1.8; color: #334155; }
.prose h2 { margin: 2rem 0 .8rem; font-size: 1.5rem; }
.prose h3 { margin: 1.6rem 0 .6rem; font-size: 1.22rem; }
.prose p { margin-bottom: 1.05rem; }
.prose ul, .prose ol { margin-bottom: 1.05rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose img { border-radius: var(--ds-radius); margin: 1.2rem 0; }
.prose blockquote {
  border-left: 4px solid var(--ds-primary); background: var(--ds-blue-050);
  padding: .9rem 1.2rem; border-radius: 0 10px 10px 0; margin: 1.2rem 0; font-style: italic;
}
.prose table { width: 100%; margin-bottom: 1.2rem; border: 1px solid var(--ds-border); border-radius: 10px; }
.prose th, .prose td { padding: .6rem .8rem; border-bottom: 1px solid var(--ds-steel-100); }
.prose th { background: var(--ds-bg-soft); text-align: left; font-weight: 700; }

/* accordion */
.ds-accordion .accordion-item { border: 1px solid var(--ds-border); border-radius: var(--ds-radius) !important; margin-bottom: .7rem; overflow: hidden; }
.ds-accordion .accordion-button { font-weight: 600; font-size: .98rem; padding: 1rem 1.15rem; }
.ds-accordion .accordion-button:not(.collapsed) { background: var(--ds-blue-050); color: var(--ds-primary); box-shadow: none; }
.ds-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* mobile filter drawer */
@media (max-width: 991px) {
  .filter-panel {
    position: fixed; inset: 0 auto 0 0; width: min(88vw, 340px); max-height: 100vh;
    border-radius: 0; z-index: 1060; transform: translateX(-102%);
    transition: transform .35s var(--ds-ease-out); box-shadow: var(--ds-shadow-lg);
  }
  .filter-panel.open { transform: none; }
  .filter-backdrop {
    position: fixed; inset: 0; background: rgba(5,13,28,.5); z-index: 1055;
    opacity: 0; visibility: hidden; transition: all .3s var(--ds-ease);
  }
  .filter-backdrop.show { opacity: 1; visibility: visible; }
}
@media (min-width: 992px) { .filter-toggle-btn { display: none !important; } }


/* ---------- notification opt-in card ------------------------------------- */
.push-prompt {
  position: fixed; z-index: 1070; left: 1rem; bottom: 1rem; width: min(418px, calc(100vw - 2rem));
  display: flex; gap: .9rem; padding: 1.05rem 1.1rem;
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: 0 22px 55px rgba(10, 25, 48, .22);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .32s var(--ds-ease-out), transform .32s var(--ds-ease-out);
}
.push-prompt.is-open { opacity: 1; transform: none; }
.push-prompt::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--ds-grad-blue); border-radius: var(--ds-radius) var(--ds-radius) 0 0;
}
.push-prompt-icon {
  width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: var(--ds-grad-blue); color: #fff; font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(11, 87, 208, .3);
}
.push-prompt-body { min-width: 0; }
.push-prompt h4 {
  font-family: var(--ds-font-body); font-size: 1rem; font-weight: 700;
  color: var(--ds-navy-800); margin: 0 0 .25rem;
}
.push-prompt p { font-size: .87rem; line-height: 1.5; color: var(--ds-muted); margin: 0 0 .85rem; }
.push-prompt-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.push-prompt-actions .btn { white-space: nowrap; }
.push-prompt-close {
  position: absolute; top: .5rem; right: .55rem; width: 28px; height: 28px;
  border: 0; background: none; color: var(--ds-steel-500); border-radius: 8px;
  display: grid; place-items: center; font-size: .8rem;
}
.push-prompt-close:hover { background: var(--ds-steel-100); color: var(--ds-text); }

@media (max-width: 575px) {
  .push-prompt { left: .6rem; right: .6rem; bottom: .6rem; width: auto; padding: .95rem; }
  .push-prompt-actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .push-prompt { transition: none; }
}

/* a "turn notifications on" button anywhere on the site */
.push-toggle { display: inline-flex; align-items: center; gap: .45rem; }

/* ---------- sponsored placement badge ------------------------------------
   Marks a slot someone has paid for. Deliberately quiet — it has to read as
   a disclosure, not as an award, so it must not outshine "Featured".        */
.sponsor-badge {
  position: absolute; top: .6rem; left: .6rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem; border-radius: 999px;
  background: rgba(15, 23, 42, .78); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .18);
}
.sponsor-badge i { font-size: .72em; }
.product-card .sponsor-badge { top: auto; bottom: .6rem; left: .6rem; }

/* Settings → Appearance → Sticky Header, switched off. */
body.header-static .site-header,
body.header-static .hdr-main,
body.header-static .hdr-bottom { position: static !important; top: auto !important; }
body.header-static { --ds-header-h: 0px; }

/* ---------- cover band + identity badge --------------------------------
   The LinkedIn/Facebook shape, used by both the listing cards and the detail
   page headers: a wide cover photo, the logo or avatar as a badge straddling
   its bottom edge, and every word of the record's detail BELOW the image.
   Printing the name and meta over the cover made both unreadable — the text
   fought the photograph for contrast and the photograph lost its subject.   */
.cv-band {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 5; min-height: 96px;
  background: var(--ds-grad-hero);
}
.cv-band .cv-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ds-ease);
}
.ds-card:hover .cv-band .cv-img { transform: scale(1.05); }
/* Records with no cover get a quiet patterned band rather than a blank grey
   box, so a card without artwork still has a header shape. */
.cv-band.is-empty::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background:
    radial-gradient(circle at 18% 120%, rgba(11,87,208,.55), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 12px, transparent 12px 26px);
}

.cv-badge {
  position: relative; z-index: 2; flex: none;
  width: 66px; height: 66px; margin: -33px 0 0 1.05rem;
  border: none; border-radius: 15px; background: #fff; padding: .38rem;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 6px 18px rgba(5, 13, 28, .2);
}
.cv-badge img { max-width: 100%; max-height: 100%; object-fit: contain; border: none; }
/* Photographs fill their badge; logos are letterboxed inside it. */
.cv-badge.is-photo { padding: 0; border-radius: 50%; }
.cv-badge.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-badge.is-cover { padding: 0; }
.cv-badge.is-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- listing cards on the cover pattern -------------------------- */
.ds-card .cv-body { padding: .55rem 1.15rem 1.1rem; }
.ds-card .cv-body h3 {
  font-size: 1.02rem; font-family: var(--ds-font-body); font-weight: 700;
  margin: 0 0 .3rem; line-height: 1.35;
}
.ds-card .cv-body h3 a { color: var(--ds-navy-800); }
.ds-card .cv-body h3 a:hover { color: var(--ds-primary); }
.ds-card .cv-meta {
  font-size: .8rem; color: var(--ds-muted);
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.ds-card .cv-desc { font-size: .85rem; line-height: 1.5; color: var(--ds-muted); margin: .45rem 0 0; }
.product-card .cv-band { aspect-ratio: 16 / 9; }
.person-card { text-align: left; }
.person-card .cv-badge { width: 76px; height: 76px; margin-top: -38px; }
.company-card .cv-band, .person-card .cv-band { aspect-ratio: 16 / 5; }

/* list view: the band becomes a side panel, details stay beside it */
.view-list .ds-card .cv-band { width: 220px; aspect-ratio: auto; align-self: stretch; flex: none; }
.view-list .ds-card .cv-badge { display: none; }
.view-list .ds-card .cv-body { padding-top: 1.1rem; }
@media (max-width: 575px) {
  .view-list .ds-card .cv-band { width: 100%; aspect-ratio: 16 / 5; }
  .view-list .ds-card .cv-badge { display: grid; }
  .view-list .ds-card .cv-body { padding-top: .55rem; }
}

/* ---------- detail page header ------------------------------------------ */
.profile-head { background: #fff; border-bottom: 1px solid var(--ds-border); }
.profile-head .ph-crumbs { padding: .7rem 0 .1rem; }
.profile-head .ph-crumbs .ds-breadcrumb .breadcrumb-item,
.profile-head .ph-crumbs .ds-breadcrumb a { color: var(--ds-muted); }
.profile-head .ph-crumbs .ds-breadcrumb a:hover { color: var(--ds-primary); }
.profile-head .ph-crumbs .ds-breadcrumb .breadcrumb-item.active { color: var(--ds-text); }
.profile-head .ph-crumbs .ds-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ds-steel-300); }

.ph-cover {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 1; max-height: 300px; min-height: 150px;
  border-radius: var(--ds-radius); background: var(--ds-grad-hero);
}
.ph-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cover.is-empty::after {
  content: ''; position: absolute; inset: 0; opacity: .55;
  background:
    radial-gradient(circle at 12% 130%, rgba(11,87,208,.6), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 14px, transparent 14px 30px);
}
a.ph-cover:hover img { transform: none; }

.ph-body { display: flex; gap: 1.2rem; align-items: flex-start; padding-bottom: 1.5rem; }
.ph-badge {
  flex: none; width: 132px; height: 132px; margin: -46px 0 0;
  border: none; border-radius: 18px; background: #fff; padding: .7rem;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 10px 30px rgba(5, 13, 28, .22);
}
.ph-badge img { max-width: 100%; max-height: 100%; object-fit: contain; border: none; }
.ph-badge.is-photo { padding: 0; border-radius: 50%; }
.ph-badge.is-photo img { width: 100%; height: 100%; object-fit: cover; }

.ph-main { flex: 1 1 auto; min-width: 0; padding-top: .9rem; }
.ph-main h1 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ds-navy-800); margin: 0 0 .3rem; line-height: 1.2;
}
.ph-main .ph-sub { color: var(--ds-muted); font-size: .97rem; margin: 0 0 .2rem; }
.ph-main .ph-sub a { font-weight: 600; }
.ph-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.ph-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

@media (max-width: 767px) {
  .ph-cover { aspect-ratio: 3 / 1; min-height: 108px; border-radius: 12px; }
  .ph-body { flex-direction: column; gap: .5rem; padding-bottom: 1.15rem; }
  .ph-badge { width: 92px; height: 92px; margin-top: -34px; border-radius: 14px; }
  .ph-main { padding-top: 0; }
  .ph-main h1 { font-size: 1.35rem; }
  .ph-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- media gallery tiles ----------------------------------------- */
.ds-gallery a.gal-item { background: var(--ds-navy-800); }
/* The magnifier overlay reads as "zoom", which is wrong for a video tile —
   those already carry a play button, so hover just dims them. */
.ds-gallery a.gal-video::after, .ds-gallery a.gal-youtube::after { content: ''; }
.gal-play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  color: #fff; font-size: 1.5rem; pointer-events: none;
}
.gal-play i {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(5, 13, 28, .62); backdrop-filter: blur(3px);
  transition: transform .3s var(--ds-ease), background .3s var(--ds-ease);
}
.ds-gallery a:hover .gal-play i { transform: scale(1.1); background: var(--ds-primary); }
.gal-caption {
  position: absolute; inset: auto 0 0 0; z-index: 3; padding: .8rem .6rem .45rem;
  background: linear-gradient(to top, rgba(5, 13, 28, .85), transparent);
  color: #fff; font-size: .76rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- lightbox ----------------------------------------------------- */
.ds-lb {
  position: fixed; inset: 0; z-index: 1090; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .6rem;
  padding: clamp(.75rem, 4vw, 2.5rem); background: rgba(5, 13, 28, .95);
}
.ds-lb[hidden] { display: none; }
.ds-lb-stage {
  display: flex; align-items: center; justify-content: center;
  max-width: min(1100px, 100%); max-height: 78vh; width: 100%; min-height: 0;
}
.ds-lb-stage > img, .ds-lb-stage > video {
  max-width: 100%; max-height: 78vh; border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); background: #000;
}
.ds-lb-frame {
  position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.ds-lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ds-lb-cap {
  color: rgba(255, 255, 255, .88); font-size: .9rem; text-align: center;
  max-width: 60ch; margin: 0;
}
.ds-lb-count { color: rgba(255, 255, 255, .55); font-size: .78rem; letter-spacing: .06em; }
.ds-lb-close, .ds-lb-nav {
  position: absolute; border: none; color: #fff; background: rgba(255, 255, 255, .12);
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  transition: background .25s var(--ds-ease);
}
.ds-lb-close:hover, .ds-lb-nav:hover { background: rgba(255, 255, 255, .28); }
.ds-lb-close { top: 18px; right: 22px; width: 42px; height: 42px; font-size: 1.2rem; }
.ds-lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.4rem; }
.ds-lb-prev { left: max(.5rem, 2vw); }
.ds-lb-next { right: max(.5rem, 2vw); }
.ds-lb-nav[hidden] { display: none; }
@media (max-width: 575px) {
  .ds-lb-nav { width: 38px; height: 38px; top: auto; bottom: 1rem; transform: none; }
  .ds-lb-stage > img, .ds-lb-stage > video { max-height: 62vh; }
}

/* ---------- no logo carries a border ------------------------------------
   The client wants logos to sit on the page unframed. Backgrounds that give a
   transparent PNG something to read against are fine; a drawn edge is not.  */
.cv-badge, .cv-badge img,
.ph-badge, .ph-badge img,
.profile-logo, .profile-logo img,
.rank-item .thumb, .logo-marquee img,
.compare-head-card img { border: 0; outline: 0; }

/* A card with no badge needs the body to clear the cover on its own. */
.ds-card .cv-band + .cv-body { padding-top: 1.1rem; }
.person-card .cv-body h3 { margin-top: .1rem; }
.person-card .role { font-size: .8rem; color: var(--ds-muted); line-height: 1.4; min-height: 2.2em; }

/* Cards in a row must line their footers up whatever the title wraps to. */
.company-card, .product-card, .person-card { display: flex; flex-direction: column; }
.company-card > .card-foot, .product-card > .card-foot { margin-top: auto; }
.view-list .company-card, .view-list .product-card, .view-list .person-card { flex-direction: row; }

/* =====================================================================
   AD ZONES
   Sold space. Every zone reserves its aspect ratio up front so the page
   never jumps while a creative loads, and an unsold zone prints nothing.
   ===================================================================== */
.promo-zone {
  position: relative; border-radius: var(--ds-radius-lg); overflow: hidden;
  background: var(--ds-navy-800);
}
.promo-zone .promo-track { display: grid; }
.promo-zone .promo-slide {
  grid-area: 1 / 1; position: relative; display: block;
  aspect-ratio: var(--promo-ratio, 16 / 4);
  text-decoration: none; color: #fff; isolation: isolate;
}
/* Non-slider zones stack their creatives instead of overlapping them. */
.promo-zone:not(.is-slider) .promo-track { gap: .75rem; }
.promo-zone:not(.is-slider) .promo-slide { grid-area: auto; }

.promo-zone.is-slider .promo-slide { opacity: 0; visibility: hidden; transition: opacity .5s var(--ds-ease); }
.promo-zone.is-slider .promo-slide.is-on { opacity: 1; visibility: visible; }

.promo-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Just enough shade under the copy to keep it readable — the creative is
   what the advertiser paid for, so it must still be the thing you see. */
.promo-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,13,28,.88) 0%, rgba(5,13,28,.62) 34%,
                                     rgba(5,13,28,.18) 62%, rgba(5,13,28,0) 100%);
}

.promo-copy {
  position: absolute; inset: 0; z-index: 2; min-height: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: .5rem; padding: clamp(1.1rem, 4vw, 3rem); max-width: 62ch;
}
/* With no creative uploaded the copy panel IS the ad, so it fills the frame
   rather than sitting in a half-width band with bare card behind it. */
.promo-copy.on-plain { background: var(--ds-grad-hero); max-width: none; }
.promo-copy.on-plain .promo-title, .promo-copy.on-plain .promo-sub { max-width: 62ch; }
.promo-title {
  font-family: var(--ds-font-display); font-weight: 800; line-height: 1.1;
  font-size: clamp(1.25rem, 3.2vw, 2.6rem); text-wrap: balance;
}
.promo-sub { font-size: clamp(.85rem, 1.3vw, 1.02rem); color: rgba(255,255,255,.82); max-width: 54ch; }
.promo-cta {
  margin-top: .35rem; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ds-gold-500); color: var(--ds-navy-900);
  font-weight: 700; font-size: .9rem; padding: .55rem 1.1rem; border-radius: 999px;
  transition: transform .25s var(--ds-ease);
}
.promo-slide:hover .promo-cta { transform: translateX(3px); }

/* Disclosure, not decoration - kept small and out of the creative's way. */
.promo-label {
  position: absolute; top: .55rem; right: .55rem; z-index: 3;
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(5,13,28,.6); color: rgba(255,255,255,.85);
  padding: .12rem .4rem; border-radius: 4px; backdrop-filter: blur(4px);
}

.promo-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(5,13,28,.45); color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity .25s var(--ds-ease), background .25s var(--ds-ease);
}
.promo-nav.prev { left: .7rem; }
.promo-nav.next { right: .7rem; }
.promo-zone:hover .promo-nav, .promo-nav:focus-visible { opacity: 1; }
.promo-nav:hover { background: rgba(5,13,28,.75); }

.promo-dots {
  position: absolute; left: 0; right: 0; bottom: .7rem; z-index: 4;
  display: flex; justify-content: center; gap: .35rem;
}
.promo-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.45); transition: width .3s var(--ds-ease), background .3s var(--ds-ease);
}
.promo-dots button.is-on { width: 22px; background: var(--ds-gold-500); }

/* ---------- hero ---------------------------------------------------- */
.hero-promo { padding: 1rem 0 0; }
.hero-promo .promo-zone { border-radius: var(--ds-radius-lg); }

/* The search moved out of the hero, so it needs to look deliberate rather
   than orphaned: a raised card straddling the ad above and the page below. */
.hero-search-strip { padding: 1.1rem 0 1.6rem; }
.hero-search-strip .hero-search {
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  padding: 1rem 1.1rem; box-shadow: 0 12px 34px rgba(10,25,48,.09);
  max-width: none; width: 100%;
}
.hero-search-strip .hero-search form,
.hero-search-strip .search-field { max-width: none; }
.hero-search-strip .hero-search .search-tabs button { color: var(--ds-navy-700); }
.hero-search-strip .hero-hints { color: var(--ds-muted); }
.hero-search-strip .hero-hints a { color: var(--ds-primary); }
.hero-search-strip .stat-strip { margin-top: 1.1rem; }

@media (max-width: 640px) {
  .promo-zone { border-radius: var(--ds-radius); }
  .promo-nav { display: none; }
  .hero-promo { padding-top: .7rem; }
  .hero-search-strip { padding: .8rem 0 1.1rem; }
  .hero-search-strip .hero-search { padding: .8rem; }
}

/* TinyMCE can emit this and Bootstrap 5 has no equivalent utility. */
.text-justify { text-align: justify; }

/* Ad copy scales with the zone. The hero gets headline treatment; a strip or
   a square tile would look absurd at the same size, and the copy would crowd
   out the creative the advertiser is paying to show. */
.promo-zone--hero_inner .promo-title,
.promo-zone--listing_top .promo-title,
.promo-zone--home_mid .promo-title,
.promo-zone--blog_top .promo-title { font-size: clamp(1.05rem, 1.9vw, 1.65rem); }

.promo-zone--hero_inner .promo-sub,
.promo-zone--listing_top .promo-sub,
.promo-zone--home_mid .promo-sub,
.promo-zone--blog_top .promo-sub { font-size: clamp(.8rem, 1vw, .92rem); }

.promo-zone--hero_inner .promo-copy,
.promo-zone--listing_top .promo-copy,
.promo-zone--home_mid .promo-copy,
.promo-zone--blog_top .promo-copy { padding: clamp(.9rem, 2.4vw, 1.8rem); gap: .35rem; }

.promo-zone--detail_inline .promo-title { font-size: clamp(1.05rem, 1.7vw, 1.5rem); }
.promo-zone--detail_inline .promo-copy { padding: clamp(.9rem, 2vw, 1.6rem); gap: .35rem; }

.promo-zone--footer_cta .promo-title { font-size: clamp(1.15rem, 2.1vw, 1.8rem); }

/* Square sidebar tiles: copy sits at the bottom, not centred over the middle
   of the picture. */
.promo-zone--listing_side .promo-copy,
.promo-zone--detail_side .promo-copy {
  justify-content: flex-end; padding: .9rem; gap: .3rem; max-width: none;
}
.promo-zone--listing_side .promo-title,
.promo-zone--detail_side .promo-title { font-size: 1.02rem; line-height: 1.25; }
.promo-zone--listing_side .promo-sub,
.promo-zone--detail_side .promo-sub { font-size: .8rem; }
.promo-zone--listing_side .promo-cta,
.promo-zone--detail_side .promo-cta { font-size: .8rem; padding: .4rem .8rem; }
.promo-zone--listing_side .promo-scrim,
.promo-zone--detail_side .promo-scrim {
  background: linear-gradient(180deg, rgba(5,13,28,0) 30%, rgba(5,13,28,.85) 100%);
}

/* ---------- home hero: slider + side rail --------------------------------
   The rail is not decoration. A rotating slot is only on screen part of the
   time, so the two fixed cards beside it are the slot a buyer takes when they
   want to be seen on every single page load. */
.hero-grid {
  display: grid; gap: .9rem;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  align-items: stretch;
}
.hero-main, .hero-rail { min-width: 0; }
.hero-main .promo-zone { height: 100%; }
.hero-main .promo-slide { height: 100%; aspect-ratio: auto; min-height: 390px; }

/* Two cards, splitting the slider's height between them. */
.hero-rail .promo-zone { height: 100%; background: transparent; border-radius: 0; overflow: visible; }
.hero-rail .promo-track {
  height: 100%; gap: .9rem;
  grid-auto-rows: 1fr; grid-auto-flow: row;
}
.hero-rail .promo-slide {
  aspect-ratio: auto; height: 100%; min-height: 0;
  border-radius: var(--ds-radius); overflow: hidden;
}

@media (max-width: 991px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-main .promo-slide { min-height: 0; aspect-ratio: 16 / 11.7; }
  .hero-rail .promo-track { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .hero-rail .promo-slide { aspect-ratio: 16 / 9; }
}
@media (max-width: 575px) {
  .hero-rail .promo-track { grid-auto-flow: row; }
}

/* Flex children shrink by default, so the three lines of copy were squashing
   into each other instead of clamping. Pin them to their content height and
   let -webkit-line-clamp do the trimming. */
.promo-zone--hero_side .promo-copy > * { flex: 0 0 auto; }

/* Hero rail cards are pale illustrations, so their copy is dark and there is
   no scrim over them - a dark wash would ruin the artwork it sits on. */
.promo-zone--hero_side .promo-scrim { display: none; }
/* The card's height is set by the slider beside it, so the copy has to fit
   whatever that turns out to be: everything clamps rather than spilling out. */
.promo-zone--hero_side .promo-copy {
  max-width: 60%; padding: clamp(.8rem, 1.6vw, 1.15rem); gap: .35rem;
  justify-content: center; overflow: hidden;
}
.promo-zone--hero_side .promo-title {
  color: var(--ds-navy-800); font-family: var(--ds-font-body); font-weight: 700;
  font-size: clamp(.92rem, 1.15vw, 1.08rem); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.promo-zone--hero_side .promo-sub {
  color: rgba(15, 30, 55, .72); font-size: .76rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.promo-zone--hero_side .promo-cta {
  background: #fff; color: var(--ds-navy-800); flex: none; white-space: nowrap;
  border: 1px solid rgba(15, 30, 55, .18); font-size: .76rem; padding: .35rem .75rem;
  box-shadow: 0 2px 6px rgba(15, 30, 55, .08);
}
.promo-zone--hero_side .promo-slide:hover .promo-cta { background: var(--ds-navy-800); color: #fff; }
.promo-zone--hero_side .promo-label { background: rgba(15, 30, 55, .5); }

@media (max-width: 575px) {
  .promo-zone--hero_side .promo-copy { max-width: 68%; }
}

/* Nothing booked in the rail: the slider takes the full width instead of
   leaving a third of the hero blank. */
.hero-grid.no-rail { grid-template-columns: 1fr; }
.hero-grid.no-rail .hero-main .promo-slide { min-height: 0; aspect-ratio: 16 / 7.15; }

/* =======================================================================
   Fixes: ad zones vs. the layout they were dropped into
   ======================================================================= */

/* ---------- unsold hero ------------------------------------------------
   A house panel has no creative behind it, so it paints its own ground.
   Same shape and weight as a booked slide, so the page does not change
   height the day the first advertiser goes live. */
.promo-zone.is-house .promo-slide { background: var(--ds-grad-hero); }
.promo-zone.is-house .promo-slide::after {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background:
    radial-gradient(circle at 14% 120%, rgba(11,87,208,.55), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 14px, transparent 14px 30px);
}
/* The slide already paints the ground, so the copy panel must not paint a
   second one over part of it. */
.promo-zone.is-house .promo-copy,
.promo-zone.is-house .promo-copy.on-plain { background: none; max-width: none; z-index: 2; }
.promo-zone.is-house .promo-title { color: #fff; }
.promo-zone.is-house .promo-sub   { color: rgba(255,255,255,.78); }
.hero-rail .promo-zone.is-house .promo-track { display: grid; }

/* ---------- stat strip on a light ground -------------------------------
   The counters were written for the old dark hero and inherited white text.
   The strip now sits on the page background, where white on white is
   invisible - which is exactly how it rendered: four coloured icons and
   nothing beside them. */
.hero-search-strip .stat-card {
  background: #fff; border-color: var(--ds-border);
  box-shadow: var(--ds-shadow-xs); backdrop-filter: none;
}
.hero-search-strip .stat-card:hover { background: #fff; box-shadow: 0 10px 26px rgba(10,25,48,.10); }
.hero-search-strip .stat-card .value { color: var(--ds-navy-800); }
.hero-search-strip .stat-card .label { color: var(--ds-muted); }

/* ---------- profile badge must sit above the cover ---------------------
   .ph-cover is positioned and the badge was not, so the cover painted over
   the 46px the badge is pulled up by and sliced the top off every logo. */
.ph-badge { position: relative; z-index: 2; }

/* ---------- listing sidebar: one sticky column, not two ----------------
   The filter panel was the sticky element and the ad was a sibling below
   it. A panel up to a full viewport tall left the ad nowhere to go, and
   because both are positioned the ad painted straight over the filters.
   The column sticks now; the panel and the ad ride inside it. */
@media (min-width: 992px) {
  .listing-wrap > aside {
    align-self: start;
    position: sticky; top: calc(var(--ds-header-h) + 12px);
    max-height: calc(100vh - var(--ds-header-h) - 28px);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--ds-steel-300) transparent;
  }
  .listing-wrap > aside::-webkit-scrollbar { width: 8px; }
  .listing-wrap > aside::-webkit-scrollbar-thumb {
    background: var(--ds-steel-300); border-radius: 99px;
    border: 2px solid var(--ds-bg, #fff); background-clip: padding-box;
  }
  .listing-wrap > aside::-webkit-scrollbar-track { background: transparent; }
  /* The column is the scroll container only as a backstop. Inside it the
     filters take whatever height is left and scroll on their own, so the
     booked ad below them stays visible without the reader hunting for it —
     an ad that has to be scrolled to is an ad nobody sees. */
  .listing-wrap > aside { display: flex; flex-direction: column; }
  .listing-wrap > aside .filter-panel {
    position: static; max-height: none;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
  }
  /* Filters come first: they are what the page is for. The ad takes the
     space left over and gives it back on a short screen rather than
     squeezing the filter list down to a single row. */
  .listing-wrap > aside .filter-panel { min-height: 260px; }
  /* Never clipped - a half-shown creative is not what was sold. */
  .listing-wrap > aside > .promo-zone { flex: 0 0 auto; }
}

/* ---------- detail sidebar --------------------------------------------
   The ad now sits above the sticky block rather than inside it, so the
   panels stick from the same offset they always did. Belt and braces: cap
   the sticky block so a tall sidebar can still be read to the end. */
.detail-side-ad { margin-bottom: 1rem; }

/* ---------- footer call to action --------------------------------------
   It sat flush against the footer's top edge with no air above it. */
.promo-zone--footer_cta { margin-top: .5rem; }

/* ---------- desktop keeps one search box, not two ----------------------
   The header already carries a search field on desktop, so the strip under
   the hero was asking the same question twice. On mobile the header field
   is hidden, so the strip is the only search there and stays. */
@media (min-width: 992px) {
  .hero-search-strip .hero-search { display: none; }
  .hero-search-strip { padding-top: 1.4rem; }
  .hero-search-strip .stat-strip { margin-top: 0; }
}

/* ---------- media count on a listing card ------------------------------
   Says at a glance which records carry photos and video, so the gallery is
   discoverable from the listing rather than only after a click. */
.cv-media {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  display: flex; gap: .3rem; pointer-events: none;
}
.cv-media > span {
  display: inline-flex; align-items: center; gap: .28rem;
  background: rgba(5,13,28,.62); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 1;
  padding: .3rem .48rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.cv-media i { font-size: .82rem; }

/* =======================================================================
   Member-submitted listings
   ======================================================================= */

/* The status is what the member came to the page to read, so it carries
   colour and an icon rather than sitting in a table cell. */
.listing-state {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  padding: .24rem .6rem; border-radius: 999px; white-space: nowrap;
}
.listing-state i { font-size: .82rem; }
.listing-state.st-pending  { background: #fff5e0; color: #8a5a00; }
.listing-state.st-live     { background: #e6f6ec; color: #10693a; }
.listing-state.st-rejected { background: #fdeaea; color: #a11b1b; }
.listing-state.st-draft    { background: var(--ds-steel-100, #eef2f7); color: var(--ds-steel-700, #4a5b73); }

/* A rejection is the one thing on this page a member must not miss. */
.listing-reason {
  margin-top: .6rem; padding: .6rem .75rem; font-size: .84rem;
  background: #fdeaea; border-left: 3px solid #d64545; border-radius: 6px;
  color: #7a1616;
}

/* Forty categories in a single column would bury the rest of the form. */
.listing-cats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .35rem .9rem;
  max-height: 320px; overflow-y: auto; padding-right: .3rem;
  scrollbar-width: thin; scrollbar-color: var(--ds-steel-300) transparent;
}
.listing-cat {
  display: flex; align-items: center; gap: .5rem; font-size: .88rem;
  padding: .18rem 0; cursor: pointer; color: var(--ds-text);
}
.listing-cat input { accent-color: var(--ds-primary); width: 15px; height: 15px; flex: none; }

/* =======================================================================
   Ranking rows — a shortlist you can read without opening every entry
   ======================================================================= */
.rank-item .rank-body { flex: 1 1 auto; min-width: 0; }

.rank-sub {
  display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .85rem; margin-bottom: .45rem;
}

.rank-cats { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.rank-cat {
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--ds-blue-050); color: var(--ds-primary);
}
.rank-cat.is-more { background: var(--ds-steel-100); color: var(--ds-steel-700); }

.rank-desc { font-size: .88rem; margin: 0 0 .7rem; }

/* The facts are the point of the row, so they get a grid rather than another
   run-on line of muted text. */
.rank-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .5rem .9rem; margin: 0 0 .85rem; padding: .7rem .85rem;
  background: var(--ds-bg-soft, #f6f8fb); border-radius: 10px;
}
.rank-facts > div { min-width: 0; }
.rank-facts dt {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ds-steel-500, #7b8aa1); margin: 0 0 .12rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Values wrap to a second line rather than truncating — "Research Organisation"
   cut to "Research Orga…" tells the reader nothing. */
.rank-facts dd {
  margin: 0; font-size: .87rem; font-weight: 600; color: var(--ds-navy-800);
  line-height: 1.3; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.rank-foot {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-size: .8rem;
  padding-top: .7rem; border-top: 1px solid var(--ds-steel-100);
}
.rank-actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; }

@media (max-width: 575px) {
  .rank-item { gap: .7rem; padding: .9rem; flex-wrap: wrap; }
  .rank-item .rank-no { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 11px; }
  .rank-item .thumb { width: 54px; height: 54px; }
  .rank-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rank-actions { width: 100%; margin-left: 0; }
  .rank-actions .btn { flex: 1; justify-content: center; }
}

/* =======================================================================
   Comparison table
   ======================================================================= */

/* The stuck header was 210px tall, so every row emerged from under a block a
   quarter of the screen deep and the first one always looked sliced in half.
   A compact card and a real shadow make it read as a floating header. */
.compare-table thead th { box-shadow: 0 6px 14px -8px rgba(10, 25, 48, .35); }
.compare-head-card img { height: 56px; }
.compare-head-card .name { font-size: .9rem; }

/* Nothing should sit under the sticky header when a link jumps to a row. */
.compare-table-wrap { scroll-padding-top: 0; }

@media (max-width: 991px) {
  /* On a short screen a sticky header this tall leaves almost nothing to
     read, so the row labels stay pinned and the header scrolls away. */
  .compare-table thead th { position: static; top: auto; }
  .compare-table-wrap { scroll-padding-top: 0; }
}

@media (max-width: 640px) {
  /* Fit the labels plus two products on a phone instead of one and a sliver.
     The label column has to be pinned to a width for both head and body or the
     empty header cell claims 190px of a 358px screen on its own. */
  .compare-table { min-width: 0; font-size: .86rem; }
  .compare-table th, .compare-table td { padding: .6rem .55rem; font-size: .84rem; }
  .compare-label-head,
  .compare-table tbody th {
    width: 104px; min-width: 104px; max-width: 104px; font-size: .78rem;
  }
  .compare-slot-head { min-width: 124px; }
  /* The pinned column needs an edge, or values scroll under it invisibly. */
  .compare-table tbody th { box-shadow: 6px 0 8px -8px rgba(10, 25, 48, .4); }
  .compare-table .group-row th { font-size: .82rem; padding: .5rem .6rem; }
  .compare-head-card { min-width: 124px; }
  .compare-head-card img { height: 44px; margin-bottom: .35rem; }
  .compare-head-card .name { font-size: .82rem; }
  .compare-head-card .brand { font-size: .72rem; }
  .compare-head-card .btn { font-size: .76rem; padding: .35rem .6rem; width: 100%; }
  .compare-head-card .remove { width: 20px; height: 20px; font-size: .64rem; }
}

/* A table that scrolls sideways has to say so — on a phone the second product
   is off-screen and there is nothing else to suggest it exists. */
.compare-swipe-hint {
  display: none; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--ds-muted); margin-bottom: .5rem;
}
@media (max-width: 991px) { .compare-swipe-hint { display: flex; } }

/* An editor-written row sits alongside generated specification rows, so it
   carries a quiet marker rather than blending in completely. */
.compare-table tr.row-editorial th { box-shadow: inset 3px 0 0 var(--ds-gold-500); }

/* =======================================================================
   News board — one lead story with a digest beside it
   =======================================================================
   The hard part is that the block has to look deliberate with three stories
   and with five. Both columns therefore stretch to the same height and the
   lead photograph grows to fill whatever height the digest sets, so there is
   never a tall column of white beside a short list. */
.news-board {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  overflow: hidden; box-shadow: var(--ds-shadow-xs);
}

/* ---------- the lead ---------- */
.news-lead {
  display: flex; flex-direction: column; min-width: 0;
  padding: 1.15rem; border-right: 1px solid var(--ds-border);
}
.news-lead-img {
  position: relative; display: block; flex: 1 1 auto;
  min-height: 240px; border-radius: var(--ds-radius); overflow: hidden;
  background: var(--ds-steel-100);
}
.news-lead-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ds-ease);
}
.news-lead:hover .news-lead-img img { transform: scale(1.04); }
.news-tag {
  position: absolute; left: .7rem; top: .7rem; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--ds-primary);
  font-size: .72rem; font-weight: 700; padding: .26rem .6rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.news-lead-body { flex: 0 0 auto; padding-top: .9rem; }
.news-lead-body h3 {
  font-size: 1.24rem; line-height: 1.3; margin: .28rem 0 .45rem; text-wrap: balance;
}
.news-lead-body h3 a { color: var(--ds-navy-800); }
.news-lead-body h3 a:hover { color: var(--ds-primary); }
.news-lead-body p {
  font-size: .89rem; line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- the digest ---------- */
.news-digest { display: flex; flex-direction: column; padding: 1.15rem; min-width: 0; }

/* Each story takes an equal share of the column, so two fill it as
   convincingly as four instead of huddling in the middle. */
.news-item {
  flex: 1 1 0; display: flex; gap: .9rem; align-items: center; min-height: 0;
  padding: .9rem 0; border-bottom: 1px solid var(--ds-steel-100);
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { padding-bottom: 0; border-bottom: 0; }
.news-item-img {
  flex: none; width: 132px; aspect-ratio: 16 / 10; border-radius: 10px;
  overflow: hidden; background: var(--ds-steel-100);
}
.news-item-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ds-ease);
}
.news-item:hover .news-item-img img { transform: scale(1.05); }
.news-item-body { min-width: 0; }
.news-item-body h4 {
  font-size: .94rem; line-height: 1.4; margin: .2rem 0 0; font-family: var(--ds-font-body);
}
.news-item-body h4 a { color: var(--ds-navy-800); font-weight: 700; }
.news-item-body h4 a:hover { color: var(--ds-primary); }

.news-when {
  font-size: .74rem; color: var(--ds-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}

@media (max-width: 991px) {
  .news-board { grid-template-columns: 1fr; }
  .news-lead { border-right: 0; border-bottom: 1px solid var(--ds-border); }
  .news-lead-img { min-height: 0; aspect-ratio: 16 / 9; }
  .news-item { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .news-lead, .news-digest { padding: .9rem; }
  .news-item-img { width: 104px; }
  .news-lead-body h3 { font-size: 1.08rem; }
}

/* Comparison cards on the home page. */
.cmp-card { transition: transform .3s var(--ds-ease), box-shadow .3s var(--ds-ease); }
.cmp-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow); }
.cmp-card-title {
  font-weight: 700; color: var(--ds-navy-800); line-height: 1.4; font-size: .98rem;
}
.cmp-card-vs { font-size: .74rem; color: var(--ds-muted); font-weight: 600; white-space: nowrap; }

/* The Compare link in the utility strip becomes a menu once an editor has
   published comparisons, so the work is reachable from every page. */
.hdr-compare { position: relative; }
.hdr-compare > a { display: inline-flex; align-items: center; }
.hdr-compare-menu { min-width: 300px; max-width: 380px; }
.hdr-compare-menu .dropdown-header {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--ds-steel-500, #7b8aa1); padding: .5rem .9rem .2rem;
}
/* The strip this sits in is dark and colours its links white, which the menu
   would otherwise inherit — white text on a white dropdown. */
.hdr-compare-menu .dropdown-item,
.hdr-compare-menu .dropdown-item span,
.hdr-compare-menu .dropdown-item i {
  color: var(--ds-text); display: inline;
}
.hdr-compare-menu .dropdown-item {
  display: flex; align-items: flex-start; gap: .55rem; white-space: normal;
}
.hdr-compare-menu .dropdown-item i { margin-top: .18rem; flex: none; color: var(--ds-primary); }
.hdr-compare-menu .dropdown-item span { line-height: 1.35; font-size: .86rem; }
.hdr-compare-menu .dropdown-item:hover,
.hdr-compare-menu .dropdown-item:hover span { background: var(--ds-blue-050); color: var(--ds-primary); }

/* =======================================================================
   Home page splash
   =======================================================================
   Shown only on the home page. Everything here is defensive: the fade runs
   from CSS as well as JavaScript, so a blocked script or a stalled image
   still ends with the curtain gone. */
#ds-splash {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background: #fff;
  animation: ds-splash-out .5s var(--ds-ease, ease) 3.2s forwards;
}
.ds-splash-inner {
  display: flex; flex-direction: column; align-items: center; gap: 1.15rem;
}
.ds-splash-inner img,
.ds-splash-word {
  animation: ds-splash-rise .7s var(--ds-ease-out, cubic-bezier(.2,.8,.2,1)) both;
}
.ds-splash-inner img { height: 56px; width: auto; object-fit: contain; }
.ds-splash-word {
  font-family: var(--ds-font-display, sans-serif); font-weight: 800;
  font-size: 1.6rem; letter-spacing: .01em; color: var(--ds-navy-800, #0a1930);
}

/* A determinate-looking sweep rather than a spinner — it reads as "loading",
   not as "something is stuck". */
.ds-splash-bar {
  display: block; width: 150px; height: 3px; border-radius: 999px;
  background: var(--ds-steel-100, #eef2f7); overflow: hidden;
}
.ds-splash-bar i {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: var(--ds-grad-blue, linear-gradient(90deg, #0b57d0, #3b82f6));
  animation: ds-splash-sweep 1.1s ease-in-out infinite;
}

#ds-splash.is-gone { animation: ds-splash-out .45s var(--ds-ease, ease) forwards; }

@keyframes ds-splash-rise {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes ds-splash-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(270%); }
}
@keyframes ds-splash-out {
  to { opacity: 0; visibility: hidden; }
}

/* Someone who asked for less motion gets no curtain at all. */
@media (prefers-reduced-motion: reduce) {
  #ds-splash { display: none !important; }
}