/* =========================================================
   ThinkOnTheSystem.com — BASELINE user.css (Clean)
   Keeps: audio, video, book portrait covers, buttons, card thumbnails
   Removes: conflicting duplicates + category/subcategory hiding
   ========================================================= */

/* ---------- Image safety ---------- */
img { max-width: 100%; height: auto; }

/* ---------- Article pages full width (as you had it) ---------- */
body.com-content-article { --cassiopeia-grid-max-width: 100%; }
body.com-content-article .container,
body.com-content-article .container-sm,
body.com-content-article .container-md,
body.com-content-article .container-lg,
body.com-content-article .container-xl,
body.com-content-article .container-xxl,
body.com-content-article .container-component {
  max-width: 100% !important;
}

/* Hide metadata on article pages (optional – you had this) */
body.com-content-article .article-info,
body.com-content-article .category-name,
body.com-content-article .cat-links,
body.com-content-article .article-info-term,
body.com-content-article .article-info dd {
  display: none !important;
}

/* ---------- IMPORTANT: Do NOT hide subcategories or page headers globally ---------- */
/* (Your old file hid .cat-children and .page-header which breaks subcategory links) */


/* =========================================================
   BUTTONS
   ========================================================= */

/* Readmore = blue */
.readmore a,
a.readmore,
.btn.readmore {
  background-color: var(--cassiopeia-color-primary);
  color: #fff !important;
  border: 1px solid var(--cassiopeia-color-primary);
  border-radius: 10px;
  padding: 0.45rem 0.9rem;
  font-weight: 600;
  text-decoration: none !important;
  display: inline-block;
}
.readmore a:hover,
a.readmore:hover,
.btn.readmore:hover {
  filter: brightness(0.92);
}

/* Buy / Click here = black */
.btn-clickhere,
.aa-button {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 700;
  background: #111;
  border: 1px solid #111;
  color: #fff !important;
}
.btn-clickhere:hover,
.aa-button:hover { background:#000; color:#fff !important; text-decoration:none !important; }


/* =========================================================
   AUDIO ARTICLE CARD (image + player)
   ========================================================= */

.aa-audio-card {
  border: 2px solid #000;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  max-width: 80ch;
  margin: 1rem auto 1.25rem;
}

.aa-audio-card__hero { text-align: center; background:#fff; }
.aa-audio-card__hero img {
  display:block;
  width:100%;
  height:auto;
  max-height: 320px;
  object-fit: cover;
}

.aa-audio-card__meta {
  padding: 0.65rem 1rem 0;
  background: #fff;
}

.aa-listen-label {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  border: 1px solid #111;
  border-radius: 999px;
  background: transparent;
}

.aa-audio-card__player {
  padding: 0.85rem 1rem;
  background: #fff;
  border-top: 2px solid #000;
}

.aa-audio-card__player audio {
  width: 100%;
  display: block;
  background: #fff;
  color-scheme: dark;
}


/* =========================================================
   VIDEO (responsive embed)
   ========================================================= */

.aa-video-card {
  max-width: 80ch;
  margin: 1.25rem auto;
}
.aa-video-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}
.aa-video-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.systems-video {
  width: 100%;
  max-width: 960px;
  margin: 0 0 1.5rem 0;
}
.systems-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
  border-radius: 14px;
}
.systems-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================
   BOOKS (portrait covers look correct)
   ========================================================= */

.aa-book-article { max-width: 80ch; margin: 0 auto; }

.aa-book-cover {
  float: right;
  width: 210px;
  max-width: 45%;
  height: auto;
  margin: 0.25rem 0 1rem 1.25rem;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.22));
}

@media (max-width: 768px) {
  .aa-book-cover {
    float: none;
    display: block;
    margin: 0 auto 1rem;
    width: min(240px, 100%);
    max-width: 100%;
  }
}

.aa-book-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.aa-book-card img,
.aa-book-card .aa-book-img {
  width: 220px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.aa-book-content { flex: 1 1 260px; }


/* =========================================================
   SYSTEMS CARDS
   ========================================================= */

.systems-card { margin-bottom: 36px; }

.systems-card-image {
  display: block;
  max-width: 520px;
  border-radius: 14px;
  overflow: hidden;
}

.systems-card-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.systems-card-title {
  font-size: 1.3rem;
  margin: 12px 0 8px;
}
.systems-card-title a { text-decoration: none; color: #111; }
.systems-card-intro { color: #444; line-height: 1.6; }

.systems-card.is-book .systems-card-image img {
  object-fit: contain;
  background: #fff;
}


/* =========================================================
   HEADER LOOK
   ========================================================= */

header.header {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.navbar-brand { display: none !important; }

.container-topbar a,
.container-topbar .nav-link,
.container-topbar .navbar-nav .nav-link {
  color: #000 !important;
  font-weight: 600;
}
.container-topbar a:hover,
.container-topbar .nav-link:hover {
  color: #333 !important;
  text-decoration: underline;
}
.topbar, .container-topbar { background: #fff !important; }

/* =========================================================
   PATCH: Article view sizing + Audio controls + Black ReadMore
   ========================================================= */

.com_content.view-article h1,
body.com-content-article h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
}

.com_content.view-article .item-image {
  max-width: 720px !important;
  margin: 0 0 14px 0 !important;
}
.com_content.view-article .item-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
}

.aa-audio-card__hero img {
  max-height: 260px !important;
  object-fit: cover !important;
}

.aa-audio-card__player {
  padding: 1rem 1rem !important;
}
.aa-audio-card__player audio {
  width: 100% !important;
  height: 46px !important;
  display: block !important;
}

.aa-audio-card__player audio::-webkit-media-controls-panel {
  height: 46px !important;
}

.systems-card-readmore a,
a.systems-readmore-button,
.systems-readmore-button {
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: #111 !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
.systems-card-readmore a:hover,
a.systems-readmore-button:hover,
.systems-readmore-button:hover {
  background: #000 !important;
  color: #fff !important;
}

/* =========================================================
   AUDIO BLOCK
   ========================================================= */

.com_content.view-article .aa-audio-card{
  margin: 1rem 0 1.25rem 0 !important;
  max-width: 640px !important;
}

.com_content.view-article .aa-audio-card__hero img{
  width: 100% !important;
  max-height: 220px !important;
  object-fit: cover !important;
  display: block;
}

.com_content.view-article .aa-audio-card__player{
  padding: 1rem 1rem !important;
}

.com_content.view-article .aa-audio-card__player audio{
  height: 48px !important;
  width: 100% !important;
}

.com_content.view-article .aa-audio-card{
  max-width: 600px !important;
  margin: 1rem 0 1.25rem 0 !important;
}

.com_content.view-article .aa-audio-card__hero{
  background: #fff !important;
}
.com_content.view-article .aa-audio-card__hero img{
  width: 100% !important;
  height: auto !important;
  max-height: 260px !important;
  object-fit: contain !important;
  display: block !important;
}

.com_content.view-article .aa-audio-card__player{
  padding: 1rem 1rem !important;
}

.com_content.view-article .aa-audio-card__player audio{
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  display: block !important;
}

.com_content.view-article .aa-audio-card__player audio::-webkit-media-controls-enclosure{
  height: 56px !important;
}
.com_content.view-article .aa-audio-card__player audio::-webkit-media-controls-panel{
  height: 56px !important;
}

/* =========================================================
   AUDIO CARD — FORCE the "soft card" look
   ========================================================= */

.com_content.view-article .aa-audio-card{
  max-width: 520px !important;
  margin: 40px 0 !important;
  padding: 24px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.com_content.view-article .aa-audio-card__hero{
  background: transparent !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 0 0 14px 0 !important;
}

.com_content.view-article .aa-audio-card__hero img{
  width: 100% !important;
  height: auto !important;
  max-height: 240px !important;
  object-fit: cover !important;
  display: block !important;
}

.com_content.view-article .aa-audio-card__meta{
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  background: transparent !important;
}

.com_content.view-article .aa-audio-card__player{
  padding: 0 !important;
  background: transparent !important;
  border-top: 0 !important;
}

.com_content.view-article .aa-audio-card__player audio{
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  display: block !important;
  border-radius: 999px !important;
  background: #f2f2f2 !important;
  padding: 8px 12px !important;
}

.com_content.view-article .aa-audio-card__player audio::-webkit-media-controls-enclosure{
  height: 58px !important;
  border-radius: 999px !important;
  background: #f2f2f2 !important;
}
.com_content.view-article .aa-audio-card__player audio::-webkit-media-controls-panel{
  height: 58px !important;
  background: #f2f2f2 !important;
}

/* =========================================
   READ MORE — show FULL image in oblong frame
   ========================================= */

.com_content.view-category article.systems-card a.systems-card-image,
.com_content.view-featured article.systems-card a.systems-card-image{
  display:block !important;
  border-radius:14px !important;
  overflow:hidden !important;
  aspect-ratio: 16 / 9 !important;
  background:#fff !important;
}

.com_content.view-category article.systems-card a.systems-card-image img,
.com_content.view-featured article.systems-card a.systems-card-image img{
  width:100% !important;
  height:100% !important;
  object-fit: contain !important;
  display:block !important;
}

/* =========================================
   ARTICLE (Audio) — oblong image + full-width player
   ========================================= */

.com_content.view-article .aa-audio-card{
  max-width: 520px !important;
}

.com_content.view-article .aa-audio-card__hero{
  border-radius:14px !important;
  overflow:hidden !important;
  aspect-ratio: 16 / 9 !important;
  background:#fff !important;
}

.com_content.view-article .aa-audio-card__hero img{
  width:100% !important;
  height:100% !important;
  object-fit: contain !important;
  display:block !important;
}

.com_content.view-article .aa-audio-card__player,
.com_content.view-article .aa-audio-card__player audio{
  width:100% !important;
  max-width:none !important;
  display:block !important;
}

.com_content.view-article .aa-audio-card__player audio{
  height:58px !important;
}

.com_content.view-article .aa-audio-card__player audio::-webkit-media-controls-enclosure,
.com_content.view-article .aa-audio-card__player audio::-webkit-media-controls-panel{
  height:58px !important;
}

/* =========================================
   ARTICLE H1
   ========================================= */
.com_content.view-article h1,
body.com-content-article h1{
  font-size: clamp(1.7rem, 2.4vw, 2.2rem) !important;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
}

.com_content.view-article h1,
body.com-content-article h1,
.com-content-article h1 {
  font-size: 2rem !important;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
}

.com_content.view-article .aa-audio-card audio,
.com_content.view-article .com-content-article audio,
body.com-content-article audio {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  height: 60px !important;
  min-height: 60px !important;
}

.com_content.view-article .aa-audio-card audio::-webkit-media-controls-enclosure,
.com_content.view-article .aa-audio-card audio::-webkit-media-controls-panel,
body.com-content-article audio::-webkit-media-controls-enclosure,
body.com-content-article audio::-webkit-media-controls-panel {
  height: 60px !important;
}

.com_content.view-article h1,
body.com-content-article h1,
.com-content-article h1{
  text-align: center !important;
}

.com_content.view-article .aa-audio-card__hero,
.com_content.view-article .item-image{
  display: block !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto 14px auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 9 !important;
  background: #fff !important;
}

.com_content.view-article .aa-audio-card__hero img,
.com_content.view-article .item-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* =========================================================
   FIX: Article audio image (your real structure)
   ========================================================= */

.com_content.view-article .aa-audio-card{
  max-width: 520px !important;
  margin: 1.5rem auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 9 !important;
  background: #fff !important;
}

.com_content.view-article .aa-audio-card > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* =========================================================
   Restore "Listen" headphone icon
   ========================================================= */

.aa-audio-content strong::before{
  content: "🎧 ";
  font-size: 1.1rem;
}

/* =========================================================
   FIX: Article audio block
   ========================================================= */

.com_content.view-article .aa-audio-card{
  aspect-ratio: auto !important;
  overflow: visible !important;
  max-width: 520px !important;
  margin: 1.5rem 0 !important;
  padding: 24px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 18px !important;
  background: #fff !important;
}

.com_content.view-article .aa-audio-card > img{
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
  margin: 0 0 14px 0 !important;
}

.com_content.view-article .aa-audio-card audio{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
}

.com_content.view-article .aa-audio-card audio::-webkit-media-controls-enclosure,
.com_content.view-article .aa-audio-card audio::-webkit-media-controls-panel{
  height: 60px !important;
}

.aa-audio-content strong::before{
  content: "🎧 ";
}

/* =========================================================
   VIDEO LAYOUT RESTORE
   ========================================================= */

.com_content.view-category .systems-card-intro,
.com_content.view-featured .systems-card-intro,
.view-featured .systems-card-intro {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.com_content.view-category article.systems-card a.systems-card-image,
.com_content.view-featured article.systems-card a.systems-card-image,
.view-featured article.systems-card a.systems-card-image {
  display: block !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 9 !important;
  background: #fff !important;
  margin: 0 0 12px 0 !important;
}

.com_content.view-category article.systems-card a.systems-card-image img,
.com_content.view-featured article.systems-card a.systems-card-image img,
.view-featured article.systems-card a.systems-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.com_content.view-article iframe[src*="youtube"],
.com_content.view-article iframe[src*="youtu.be"],
.com_content.view-article iframe[src*="vimeo"],
body.com-content-article iframe[src*="youtube"],
body.com-content-article iframe[src*="youtu.be"],
body.com-content-article iframe[src*="vimeo"] {
  display: block !important;
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 0 16px 0 !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.com_content.view-article iframe,
body.com-content-article iframe {
  float: none !important;
  clear: both !important;
}

/* =========================================================
   VIDEO ARTICLE — centre video + add light grey frame
   ========================================================= */

.com_content.view-article iframe[src*="youtube"],
.com_content.view-article iframe[src*="youtu.be"],
.com_content.view-article iframe[src*="vimeo"],
body.com-content-article iframe[src*="youtube"],
body.com-content-article iframe[src*="youtu.be"],
body.com-content-article iframe[src*="vimeo"] {
  display: block !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 1.5rem auto !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  padding: 14px !important;
  background: #f3f3f3 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
}

/* =========================================================
   CATEGORY / READMORE — keep BOOK images properly scaled
   ========================================================= */

.com_content.view-category .aa-book-card img,
.com_content.view-featured .aa-book-card img,
.blog .aa-book-card img {
  width: 160px !important;
  max-width: 160px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  display: block !important;
}

.com_content.view-category .item-image img,
.com_content.view-featured .item-image img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* =========================================================
   BOOKS (Read More / listing page)
   ========================================================= */

article.systems-card.is-book a.systems-card-image{
  padding-top: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  max-width: 240px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
}

article.systems-card.is-book a.systems-card-image img{
  width: 100% !important;
  height: auto !important;
  max-height: 340px !important;
  object-fit: contain !important;
  display: block !important;
}



.com_content.view-category article.systems-card.is-book,
.com_content.view-featured article.systems-card.is-book{
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
  max-width: 1100px;
}

.com_content.view-category article.systems-card.is-book a.systems-card-image,
.com_content.view-featured article.systems-card.is-book a.systems-card-image{
  flex: 0 0 170px !important;
  max-width: 170px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.com_content.view-category article.systems-card.is-book a.systems-card-image img,
.com_content.view-featured article.systems-card.is-book a.systems-card-image img{
  width: 100% !important;
  height: auto !important;
  max-height: 260px !important;
  object-fit: contain !important;
  display: block !important;
}

.com_content.view-category article.systems-card.is-book .systems-card-title,
.com_content.view-category article.systems-card.is-book .systems-card-intro,
.com_content.view-category article.systems-card.is-book .systems-card-readmore,
.com_content.view-featured article.systems-card.is-book .systems-card-title,
.com_content.view-featured article.systems-card.is-book .systems-card-intro,
.com_content.view-featured article.systems-card.is-book .systems-card-readmore{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 768px){
  .com_content.view-category article.systems-card.is-book,
  .com_content.view-featured article.systems-card.is-book{
    display: block !important;
  }
  .com_content.view-category article.systems-card.is-book a.systems-card-image,
  .com_content.view-featured article.systems-card.is-book a.systems-card-image{
    max-width: 220px !important;
    margin: 0 0 12px 0 !important;
  }
}

.com_content.view-category article.systems-card.is-book .systems-card-title,
.com_content.view-category article.systems-card.is-book .systems-card-intro,
.com_content.view-category article.systems-card.is-book .systems-card-readmore{
  width: 100% !important;
  max-width: 100% !important;
}

.com_content.view-category article.systems-card.is-book .systems-card-readmore,
.com_content.view-featured article.systems-card.is-book .systems-card-readmore{
  float: none !important;
  clear: both !important;
  margin-top: 12px !important;
  text-align: left !important;
}

.com_content.view-category article.systems-card.is-book .systems-card-readmore a,
.com_content.view-featured article.systems-card.is-book .systems-card-readmore a,
.com_content.view-category article.systems-card.is-book a.readmore,
.com_content.view-featured article.systems-card.is-book a.readmore{
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
}

.com_content.view-category article.systems-card.is-book,
.com_content.view-featured article.systems-card.is-book{
  display: block !important;
}

.com_content.view-category article.systems-card.is-book a.systems-card-image,
.com_content.view-featured article.systems-card.is-book a.systems-card-image{
  display: block !important;
  max-width: 240px !important;
  margin: 0 auto 14px auto !important;
  padding-top: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.com_content.view-category article.systems-card.is-book a.systems-card-image img,
.com_content.view-featured article.systems-card.is-book a.systems-card-image img{
  width: 100% !important;
  height: auto !important;
  max-height: 340px !important;
  object-fit: contain !important;
  display: block !important;
}

.com_content.view-category article.systems-card.is-book .systems-card-title,
.com_content.view-category article.systems-card.is-book .systems-card-intro,
.com_content.view-category article.systems-card.is-book .systems-card-readmore,
.com_content.view-featured article.systems-card.is-book .systems-card-title,
.com_content.view-featured article.systems-card.is-book .systems-card-intro,
.com_content.view-featured article.systems-card.is-book .systems-card-readmore{
  width: 100% !important;
  max-width: 760px !important;
}

.com_content.view-category article.systems-card.is-book .systems-card-readmore,
.com_content.view-featured article.systems-card.is-book .systems-card-readmore{
  text-align: left !important;
  float: none !important;
  clear: both !important;
  margin-top: 12px !important;
}

.com_content.view-category article.systems-card.is-book a.systems-card-image,
.com_content.view-featured article.systems-card.is-book a.systems-card-image{
  margin: 0 0 14px 0 !important;
}

/* =========================================================
   NAVIGATION FIX — Cassiopeia "Dropdown MetisMenu"
   ========================================================= */

header.header,
header.header .container-header,
header.header .grid-child,
header.header nav,
header.header .navbar,
header.header .navbar-collapse,
header.header .mod-menu,
header.header .mod-menu .metismenu {
  overflow: visible !important;
}

header.header { position: relative; z-index: 5000; }
header.header nav,
header.header .navbar { position: relative; z-index: 5100; }

header.header::before,
header.header::after,
header.header .container-header::before,
header.header .container-header::after {
  pointer-events: none !important;
}

header.header .mod-menu_dropdown-metismenu a,
header.header .mod-menu_dropdown-metismenu a:visited {
  color: #000 !important;
}
header.header .mod-menu_dropdown-metismenu a:hover {
  color: #333 !important;
  text-decoration: underline;
}

/* =========================================================
   TOPBAR dropdown support
   ========================================================= */

.container-topbar,
.container-topbar .grid-child,
.container-topbar nav,
.container-topbar .mod-menu,
.container-topbar .metismenu {
  overflow: visible !important;
}

.container-topbar {
  position: relative;
  z-index: 9000;
}

.container-topbar .mm-toggler,
.container-topbar .mm-toggler-link {
  display: inline-flex !important;
  align-items: center;
  pointer-events: auto !important;
  position: relative;
  z-index: 9100;
}

.container-topbar .metismenu a { color: #000 !important; }
.container-topbar .metismenu a:hover { color: #333 !important; text-decoration: underline; }

/* =========================================================
   Classic Cassiopeia blue navbar + white links + white carets
   ========================================================= */

header.header .navbar {
  background: var(--cassiopeia-color-primary) !important;
}

header.header .navbar .nav-link,
header.header .navbar a {
  color: #fff !important;
}

header.header .navbar .dropdown-toggle::after {
  border-top-color: #fff !important;
  color: #fff !important;
}

/* =========================================================
   Force white text inside Cassiopeia navbar
   ========================================================= */

header.header .navbar-nav .nav-link,
header.header .navbar-nav .nav-link:link,
header.header .navbar-nav .nav-link:visited {
  color: #ffffff !important;
}

header.header .navbar-nav .nav-link:hover,
header.header .navbar-nav .nav-link:focus {
  color: #ffffff !important;
  opacity: 0.9;
}

header.header .navbar-nav .active > .nav-link,
header.header .navbar-nav .nav-link.active {
  color: #ffffff !important;
}

header.header .dropdown-menu a {
  color: #111 !important;
}
header.header .dropdown-menu a:hover {
  color: #000 !important;
}

/* =========================================================
   FORCE WHITE TOPBAR MENU TEXT
   ========================================================= */

header.header .container-topbar,
header.header .topbar {
  background: var(--cassiopeia-color-primary) !important;
}

header.header .container-topbar .navbar-nav > li > a,
header.header .container-topbar .navbar-nav > li > a:link,
header.header .container-topbar .navbar-nav > li > a:visited,
header.header .container-topbar .navbar-nav > li > button,
header.header .container-topbar .navbar-nav .nav-link,
header.header .container-topbar a.nav-link,
header.header .container-topbar .mod-menu a {
  color: #fff !important;
}

header.header .container-topbar .navbar-nav > li > a:hover,
header.header .container-topbar .navbar-nav > li > a:focus,
header.header .container-topbar .navbar-nav .nav-link:hover,
header.header .container-topbar .navbar-nav .nav-link:focus,
header.header .container-topbar .navbar-nav .active > a,
header.header .container-topbar .navbar-nav .active > .nav-link,
header.header .container-topbar .navbar-nav a[aria-current="page"] {
  color: #fff !important;
  opacity: 0.9;
}

header.header .container-topbar .dropdown-menu a {
  color: #111 !important;
}

/* =========================================================
   FIX DROPDOWN COLOURS
   ========================================================= */

header.header .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 0.35rem 0;
}

header.header .dropdown-menu .dropdown-item,
header.header .dropdown-menu a {
  color: #1a1a1a !important;
  background: transparent !important;
}

header.header .dropdown-menu .dropdown-item:hover,
header.header .dropdown-menu .dropdown-item:focus,
header.header .dropdown-menu a:hover {
  background: var(--cassiopeia-color-primary) !important;
  color: #ffffff !important;
}

header.header .dropdown-menu .active > a,
header.header .dropdown-menu a.active {
  background: var(--cassiopeia-color-primary) !important;
  color: #ffffff !important;
}

/* =========================================================
   DROPDOWN TEXT FIX
   ========================================================= */

header.header .container-topbar .dropdown-menu,
header.header .container-topbar .nav-item .dropdown-menu {
  background: #fff !important;
}

header.header .container-topbar .dropdown-menu a,
header.header .container-topbar .dropdown-menu .dropdown-item,
header.header .container-topbar .dropdown-menu li > a {
  color: #111 !important;
}

header.header .container-topbar .dropdown-menu a:hover,
header.header .container-topbar .dropdown-menu .dropdown-item:hover,
header.header .container-topbar .dropdown-menu a:focus,
header.header .container-topbar .dropdown-menu .dropdown-item:focus {
  background: var(--cassiopeia-color-primary) !important;
  color: #fff !important;
}

header.header .container-topbar a { color: #fff !important; }
header.header .container-topbar .dropdown-menu a { color: #111 !important; }

/* =========================================================
   NUCLEAR FIX: dropdown text still white
   ========================================================= */

header.header .dropdown-menu {
  background: #fff !important;
}

header.header .dropdown-menu,
header.header .dropdown-menu * {
  color: #111 !important;
}

header.header .dropdown-menu a:hover,
header.header .dropdown-menu a:focus,
header.header .dropdown-menu .dropdown-item:hover,
header.header .dropdown-menu .dropdown-item:focus {
  background: var(--cassiopeia-color-primary) !important;
  color: #fff !important;
}

header.header .dropdown-menu a:hover *,
header.header .dropdown-menu a:focus * {
  color: #fff !important;
}

/* =========================================================
   FINAL FIX: submenu text is white on white
   ========================================================= */

header.header .container-topbar .navbar-nav > li > a,
header.header .container-topbar .navbar-nav > li > a:link,
header.header .container-topbar .navbar-nav > li > a:visited,
header.header .container-topbar .navbar-nav > li > button,
header.header .container-topbar .navbar-nav > li > .nav-link {
  color: #fff !important;
}

header.header .container-topbar .navbar-nav li > ul,
header.header .container-topbar .navbar-nav li > ul.nav-child,
header.header .container-topbar .navbar-nav li > ul.mm-collapse,
header.header .container-topbar .navbar-nav li .dropdown-menu {
  background: #fff !important;
}

header.header .container-topbar .navbar-nav li > ul *,
header.header .container-topbar .navbar-nav li > ul.nav-child *,
header.header .container-topbar .navbar-nav li > ul.mm-collapse *,
header.header .container-topbar .navbar-nav li .dropdown-menu * {
  color: #111 !important;
}

header.header .container-topbar .navbar-nav li > ul a:hover,
header.header .container-topbar .navbar-nav li > ul a:focus,
header.header .container-topbar .navbar-nav li .dropdown-menu a:hover,
header.header .container-topbar .navbar-nav li .dropdown-menu a:focus {
  background: var(--cassiopeia-color-primary) !important;
  color: #fff !important;
}
header.header .container-topbar .navbar-nav li > ul a:hover *,
header.header .container-topbar .navbar-nav li > ul a:focus *,
header.header .container-topbar .navbar-nav li .dropdown-menu a:hover *,
header.header .container-topbar .navbar-nav li .dropdown-menu a:focus * {
  color: #fff !important;
}

/* =========================================================
   FIX: MetisMenu dropdown colours
   ========================================================= */

header.header .metismenu .mm-collapse{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.15);
  border-radius:4px;
  margin-top:4px;
  padding:4px 0;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

header.header .metismenu .mm-collapse a{
  color:#222 !important;
  padding:6px 14px;
  display:block;
  font-size:0.95rem;
  transition:background 0.15s ease,color 0.15s ease;
}

header.header .metismenu .mm-collapse a:hover{
  background:var(--cassiopeia-color-primary) !important;
  color:#ffffff !important;
}

/* =========================================================
   CARD BLOG LAYOUT
   ========================================================= */

.cardblog .com-content-category-blog .blog-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.cardblog .com-content-category-blog .blog-item {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
  align-items: center;
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

.cardblog .com-content-category-blog .blog-item .item-image {
  margin: 0;
}
.cardblog .com-content-category-blog .blog-item .item-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

.cardblog .com-content-category-blog .blog-item .page-header h2,
.cardblog .com-content-category-blog .blog-item h2 {
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  line-height: 1.2;
}
.cardblog .com-content-category-blog .blog-item h2 a {
  text-decoration: none;
  color: #0b1324;
}

.cardblog .com-content-category-blog .blog-item .item-content,
.cardblog .com-content-category-blog .blog-item .item-body {
  color: #27324a;
  line-height: 1.65;
}

.cardblog .com-content-category-blog .blog-item .article-info {
  margin-top: 10px;
  opacity: 0.85;
}

.cardblog .com-content-category-blog .blog-item .tags,
.cardblog .com-content-category-blog .blog-item .tag-category {
  margin: 0 0 10px 0;
}
.cardblog .com-content-category-blog .blog-item .tag,
.cardblog .com-content-category-blog .blog-item .tags a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--cassiopeia-color-primary);
  background: rgba(17, 61, 126, 0.10);
  border-color: rgba(17, 61, 126, 0.14);
}

.cardblog .com-content-category-blog .blog-item .readmore a,
.cardblog .com-content-category-blog .blog-item a.readmore {
  margin-top: 12px;
}

@media (max-width: 992px) {
  .cardblog .com-content-category-blog .blog-item {
    grid-template-columns: 1fr;
  }
  .cardblog .com-content-category-blog .blog-item .item-image img {
    height: 220px;
  }
}

/* =========================================================
   CARD BLOG LAYOUT (robust selectors)
   ========================================================= */

.cardblog .blog-items,
.cardblog .com-content-category-blog .blog-items,
.cardblog .com-content-categoryblog .blog-items,
.cardblog .com-content-category-blog__items {
  display: block !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
}

.cardblog .blog-item,
.cardblog .com-content-category-blog .blog-item,
.cardblog .items-row,
.cardblog .items-row .item {
  background: #fff !important;
  border-radius: 22px !important;
  padding: 22px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

@media (min-width: 993px) {
  .cardblog .blog-item,
  .cardblog .com-content-category-blog .blog-item {
    display: grid !important;
    grid-template-columns: 360px 1fr !important;
    gap: 22px !important;
    align-items: center !important;
  }
}

.cardblog .item-image,
.cardblog .intro-image,
.cardblog .com-content-category-blog .item-image {
  margin: 0 !important;
}

.cardblog .item-image img,
.cardblog .intro-image img,
.cardblog .com-content-category-blog .item-image img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 18px !important;
}

.cardblog h2,
.cardblog .page-header h2 {
  margin: 0 0 10px 0 !important;
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
}
.cardblog h2 a {
  text-decoration: none !important;
  color: #0b1324 !important;
}

.cardblog .item-content,
.cardblog .item-body,
.cardblog .com-content-category-blog .item-content {
  color: #27324a !important;
  line-height: 1.65 !important;
}

.cardblog .readmore a,
.cardblog a.readmore {
  margin-top: 12px !important;
  display: inline-block !important;
}

@media (max-width: 992px) {
  .cardblog .blog-item,
  .cardblog .items-row .item {
    display: block !important;
  }
  .cardblog .item-image img,
  .cardblog .intro-image img {
    height: 220px !important;
  }
}

/* =========================================================
   DEEP DIVES HUB — Subcategory cards
   ========================================================= */

.com-content-category-blog.blog .alert.alert-info {
  display: none !important;
}

.com-content-category-blog.blog .category-desc {
  margin: 0 0 18px 0;
  max-width: 90ch;
}

.com-content-category-blog.blog .cat-children > ul,
.com-content-category-blog.blog ul.categories-list,
.com-content-category-blog.blog ul.list-striped {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

.com-content-category-blog.blog .cat-children li,
.com-content-category-blog.blog ul.categories-list > li,
.com-content-category-blog.blog ul.list-striped > li {
  background: #fff !important;
  border-radius: 22px !important;
  padding: 18px 22px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

@media (min-width: 992px) {
  .com-content-category-blog.blog .cat-children li,
  .com-content-category-blog.blog ul.categories-list > li {
    display: grid !important;
    grid-template-columns: 360px 1fr !important;
    gap: 22px !important;
    align-items: center !important;
  }
}

.com-content-category-blog.blog .cat-children img,
.com-content-category-blog.blog ul.categories-list img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  display: block !important;
}

.com-content-category-blog.blog .cat-children a,
.com-content-category-blog.blog ul.categories-list a {
  text-decoration: none !important;
  font-weight: 800 !important;
  color: #0b1324 !important;
}

.com-content-category-blog.blog .cat-children a:hover,
.com-content-category-blog.blog ul.categories-list a:hover {
  color: var(--cassiopeia-color-primary) !important;
  text-decoration: underline !important;
}

.com-content-category-blog.blog .cat-children p,
.com-content-category-blog.blog ul.categories-list p {
  margin: 8px 0 0 0 !important;
  color: #27324a !important;
  line-height: 1.6 !important;
}

.com-content-category-blog.blog .cat-children img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  display: block !important;
  margin: 0 0 10px 0 !important;
}

.com-content-category-blog.blog .cat-children li {
  background: #fff !important;
  border-radius: 22px !important;
  padding: 18px 22px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  margin-bottom: 18px !important;
}

.deepdives-hub .cat-children img {
  width: 100% !important;
  height: 240px !important;
  object-fit: contain !important;
  background: #fff;
  border-radius: 18px !important;
  display: block !important;
}

/* =========================================================
   DEEP DIVES HUB: stop parent containers cropping images
   ========================================================= */

.deepdives-hub .cat-children li,
.deepdives-hub .cat-children li * {
  overflow: visible !important;
  max-height: none !important;
}

.deepdives-hub .cat-children img {
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
  display: block !important;
  border-radius: 18px !important;
  margin: 0 0 10px 0 !important;
}

/* =========================================================
   SUBCATEGORY PAGES: hide description images, keep text
   ========================================================= */

body.view-category:not(.deepdives-hub) .category-desc img {
  display: none !important;
}

.deepdives-hub .category-desc img,
.deepdives-hub .category-desc img.float-none {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: initial !important;
  overflow: visible !important;
}

.deepdives-hub .category-desc,
.deepdives-hub .category-desc * {
  overflow: visible !important;
  max-height: none !important;
}

body.view-category:not(.deepdives-hub) .category-desc img {
  display: none !important;
}

body.itemid-13 .category-desc img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 18px !important;
  margin: 10px 0 14px 0 !important;
}

.com-content-category-blog.blog .cat-children li {
  background: #fff !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  margin: 0 0 18px 0 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
}

.com-content-category-blog.blog .cat-children li img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  margin: 10px 0 14px 0 !important;
}

.com-content-category-blog.blog .cat-children li > a,
.com-content-category-blog.blog .cat-children li h3 a,
.com-content-category-blog.blog .cat-children li h2 a {
  font-weight: 800 !important;
  text-decoration: none !important;
}

.com-content-category-blog.blog .cat-children li p {
  margin: 8px 0 0 0 !important;
  line-height: 1.6 !important;
  color: #27324a;
}

.com-content-category-blog.blog .cat-children li,
.com-content-category-blog.blog ul.categories-list > li,
.com-content-category-blog.blog ul.list-striped > li,
.com-content-category-blog.blog .categories-list__item,
.com-content-category-blog.blog .com-content-categories__item {
  outline: 4px solid lime !important;
}

/* =========================================================
   Subcategories (Joomla 5 Cassiopeia): child category cards
   ========================================================= */

.com-content-category-blog.blog .com-content-category-blog__child{
  background:#fff !important;
  border-radius:18px !important;
  padding:18px 20px !important;
  margin:0 0 18px 0 !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  box-shadow:0 10px 26px rgba(0,0,0,0.08) !important;
}

.com-content-category-blog.blog .com-content-category-blog__child img{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
  border-radius:16px !important;
  margin:10px 0 14px 0 !important;
}
.com-content-category-blog.blog .com-content-category-blog__child h2,
.com-content-category-blog.blog .com-content-category-blog__child h3{
  margin: 0 0 8px 0 !important;
}
.com-content-category-blog.blog .com-content-category-blog__child p{
  margin: 8px 0 0 0 !important;
  line-height: 1.6 !important;
}

.com-content-category-blog.blog .com-content-category-blog__child img{
  width: 520px !important;
  max-width: 100% !important;
  height: auto !important;
  display:block !important;
  border-radius:16px !important;
  margin:10px 0 14px 0 !important;
}

body.view-category:not(:has(.com-content-category-blog__child)) .category-desc img.float-none{
  display: none !important;
}

.com-content-category-blog.blog .com-content-category-blog__child
  .com-content-category-blog__description img,
.com-content-category-blog.blog .com-content-category-blog__child
  .category-desc img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-width: 100% !important;
}

.com-content-category-blog.blog
  .com-content-category-blog__child
  .com-content-category-blog__description img,
.com-content-category-blog.blog
  .com-content-category-blog__child
  .category-desc img {
  border-radius: 16px !important;
  display: block !important;
}

.com-content-category-blog.blog
  .com-content-category-blog__child img {
  border-radius: 16px !important;
}

.com-content-category-blog.blog
  .com-content-category-blog__child
  .com-content-category-blog__description img.float-none,
.com-content-category-blog.blog
  .com-content-category-blog__child
  .category-desc img.float-none {
  border-radius: 16px !important;
  overflow: hidden !important;
  display: block !important;
}

/* =========================================================
   Footer
   ========================================================= */

footer.container-footer .moduletable > h3,
footer.container-footer .moduletable > h2,
footer.container-footer .module-title {
  display: block !important;
  font-weight: 800 !important;
  margin: 0 0 14px 0 !important;
}

footer.container-footer .grid-child {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 0.8fr;
  gap: 40px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

footer.container-footer .card {
  border: none;
  box-shadow: none;
  background: transparent;
}

footer.container-footer h3 {
  font-weight: 700;
  margin-bottom: 12px;
}

footer.container-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer.container-footer li {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  footer.container-footer .grid-child {
    grid-template-columns: 1fr;
  }
}

footer.container-footer a {
  color: rgba(255,255,255,0.85);
  transition: color 0.2s ease;
}

footer.container-footer a:hover {
  color: #ffffff;
}
footer.container-footer {
  border-top: 1px solid rgba(255,255,255,0.15);
}

footer.container-footer .footer-col a,
footer.container-footer .footer-col a:visited {
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
  transition: color .15s ease, text-decoration-color .15s ease;
}

footer.container-footer .footer-col a,
footer.container-footer .footer-col a:visited {
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
}

footer.container-footer .footer-col a:hover,
footer.container-footer .footer-col a:focus {
  color: rgba(255,255,255,1) !important;
  text-decoration: underline !important;
}

.com-content-category-blog.blog .com-content-category-blog__items .com-content-category-blog__item,
.com-content-category-blog.blog .com-content-category-blog__items .blog-item {
  background: #fff !important;
  border-radius: 22px !important;
  padding: 18px !important;
  margin: 0 0 22px 0 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
}

.com-content-category-blog.blog .com-content-category-blog__items img,
.com-content-category-blog.blog .com-content-category-blog__items .blog-item img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  display: block !important;
  margin-bottom: 14px !important;
}



/* HOME */
body.home-hub h1.aa-title { display: none !important; }

body.home-hub .home-hero-title{
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

body.home-hub .home-hero-sub{
  font-size: 1.2rem;
  opacity: 0.85;
  margin-bottom: 1.5rem;
}

body.home-hub .home-hero-intro{
  max-width: 800px;
  line-height: 1.6;
}

body.home-hub .home-pathways{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.2rem;
}

@media (max-width: 980px){
  body.home-hub .home-pathways{
    grid-template-columns: 1fr;
  }
}

body.home-hub .home-card{
  display:block;
  padding: 1.4rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  text-decoration:none;
  color: #111 !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body.home-hub .home-card *{
  color: inherit !important;
}

body.home-hub .home-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,0,0,0.22);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

body.home-hub .home-card p{
  opacity: .88;
}

body.home-hub .home-card-cta{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.home-hub .container-component{
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

body.home-hub .home-pathways{
  margin-top: 3rem;
}

body.home-hub .home-hero-title{
  margin-bottom: 0.5rem;
}

body.home-hub .home-hero-sub{
  margin-bottom: 1.8rem;
}

body.home-hub .home-hero-title{
  font-size: 2.7rem;
  line-height: 1.08;
  letter-spacing: 0.3px;
}

body.home-hub .home-hero-sub{
  font-size: 1.18rem;
  opacity: .85;
  max-width: 780px;
}

body.home-hub .home-hero-intro:last-of-type{
  position: relative;
  padding-bottom: 1.6rem;
  margin-bottom: 1.8rem;
}

body.home-hub .home-hero-intro:last-of-type::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,0,0,0.65), rgba(0,0,0,0.0));
  opacity: .35;
  border-radius: 2px;
}

body.home-hub .home-card{
  display:block;
  padding: 1.45rem 1.45rem 1.25rem;
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  text-decoration:none;
  color: #101114 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

body.home-hub .home-card *{ color: inherit !important; }

body.home-hub .home-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 240px at 15% 10%, rgba(80,160,255,0.20), transparent 55%),
              radial-gradient(600px 240px at 85% 20%, rgba(160,120,255,0.16), transparent 60%);
  opacity: 0;
  transition: opacity .18s ease;
}

body.home-hub .home-card:hover{
  transform: translateY(-5px);
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 16px 46px rgba(0,0,0,0.10);
}

body.home-hub .home-card:hover::before{
  opacity: 1;
}

body.home-hub .home-card-top{
  display:flex;
  align-items:center;
  gap: 0.65rem;
  position: relative;
  z-index: 1;
}

body.home-hub .home-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.10);
  font-size: 1.1rem;
}

body.home-hub .home-card p{
  opacity: .88;
  margin-top: .65rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

body.home-hub .home-card-cta{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  position: relative;
  z-index: 1;
}

body.systems-hub .com-content-category-blog__children > h3,
body.deepdives-hub .com-content-category-blog__children > h3{
  display: none;
}

body.systems-hub .com-content-category-blog__children > h2,
body.systems-hub .com-content-category-blog__children > h3,
body.deepdives-hub .com-content-category-blog__children > h2,
body.deepdives-hub .com-content-category-blog__children > h3{
  display: none;
}

body.home-hub .home-search{
  display:flex;
  justify-content:flex-end;
  max-width:1100px;
  margin: 0 auto;
  padding: 0 1.5rem 1rem 1.5rem;
  width: 100%;
}

body.home-hub .home-search form{
  width: min(360px, 100%);
  margin-left: auto;
  width: min(360px, 92vw);
}

body.home-hub .home-search input{
  width:100%;
  border-radius: 999px;
  padding: .65rem 1rem;
  border:1px solid rgba(0,0,0,0.2);
  background:#fff;
}

body.home-hub .home-search.grid-child,
body.home-hub .home-search .container,
body.home-hub .home-search .container-fluid{
  width: 100%;
  max-width: 100%;
}

body.home-hub .home-search{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 1rem 1.5rem;
  display: flex;
}

body.home-hub .home-search input{
  width: 100%;
  border-radius: 999px;
  padding: .65rem 1rem;
}

body.home-hub .site-grid .below-top{
  display: flex;
  justify-content: flex-end;
}

body.home-hub .home-card-top{
  display:flex;
  align-items:center;
  gap: 0.85rem;
}

body.home-hub .home-card-img{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
}

body.home-hub .home-banner{
  max-width: 720px;
  margin: 2.2rem auto 2.2rem;
  padding: 14px;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
}

body.home-hub .home-banner img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

body.home-hub .home-hero-title,
body.home-hub .home-hero-sub,
body.home-hub .home-hero-intro{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

body.home-hub .home-hero-sub{
  max-width: 760px;
}

body.home-hub .home-hero-intro{
  max-width: 760px;
}

body.home-hub .home-hero-intro:last-of-type::after{
  left: 50%;
  transform: translateX(-50%);
}
body.home-hub .home-banner{
  margin-top: 1.6rem;
  padding: 10px;
}

body.home-hub .home-pathways{
  max-width: 900px;
  margin: 2.2rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
body.home-hub .home-card{
  padding: 1.25rem 1.25rem 1.35rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
  transition: transform .18s ease, box-shadow .18s ease;
}

body.home-hub .home-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}
body.home-hub .home-card-top{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:.45rem;
}

body.home-hub .home-card h3{
  margin:0;
  font-size:1.05rem;
}
body.home-hub .home-card-cta{
  display:inline-block;
  margin-top:.55rem;
  font-weight:600;
  color:#1d3f72;
}

body.home-hub .home-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

body.home-hub .home-card p{
  flex-grow:1;
}
body.home-hub .home-card-cta{
  margin-top:0.75rem;
}

body.home-hub .home-feature{
  max-width: 900px;
  margin: 1.6rem auto 0;
}

body.home-hub .home-feature-card{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.4rem;
  align-items: center;
  padding: 1.2rem;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.08);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.home-hub .home-feature-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 16px 44px rgba(0,0,0,0.12);
}

body.home-hub .home-feature-media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

body.home-hub .home-feature-media img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

body.home-hub .home-feature-kicker{
  display:inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .4px;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  margin-bottom: .55rem;
}

body.home-hub .home-feature-title{
  margin: 0 0 .55rem 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

body.home-hub .home-feature-text{
  margin: 0 0 .85rem 0;
  opacity: .85;
  line-height: 1.5;
}

body.home-hub .home-feature-cta{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px){
  body.home-hub .home-feature-card{
    grid-template-columns: 1fr;
  }
  body.home-hub .home-feature-media img{
    height: 220px;
  }
}

body.home-hub .home-feature{
  max-width: 900px;
  margin: 1.6rem auto 0;
}

body.home-hub .home-feature-card{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.4rem;
  align-items: center;
  padding: 1.2rem;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.08);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.home-hub .home-feature-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 16px 44px rgba(0,0,0,0.12);
}

body.home-hub .home-feature-media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

body.home-hub .home-feature-media img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

body.home-hub .home-feature-kicker{
  display:inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .4px;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  margin-bottom: .55rem;
}

body.home-hub .home-feature-title{
  margin: 0 0 .55rem 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

body.home-hub .home-feature-text{
  margin: 0 0 .85rem 0;
  opacity: .85;
  line-height: 1.5;
}

body.home-hub .home-feature-cta{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px){
  body.home-hub .home-feature-card{
    grid-template-columns: 1fr;
  }
  body.home-hub .home-feature-media img{
    height: 220px;
  }
}

body.home-hub .home-feature-grid{
  max-width: 900px;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

body.home-hub .home-feature-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

body.home-hub .home-feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 42px rgba(0,0,0,0.12);
}

body.home-hub .home-feature-media img{
  width: 100%;
  height: 220px;
  object-fit: cover;
}

body.home-hub .home-feature-body{
  padding: 1.1rem 1.2rem 1.3rem;
}

body.home-hub .home-feature-title{
  margin: .3rem 0 .4rem;
  font-size: 1.2rem;
}

body.home-hub .home-feature-text{
  opacity: .85;
  margin-bottom: .7rem;
}

@media (max-width: 800px){
  body.home-hub .home-feature-grid{
    grid-template-columns: 1fr;
  }
}

body.home-hub .home-toolkit{
  max-width: 900px;
  margin: 2.2rem auto 0;
}

body.home-hub .home-toolkit-card{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.6rem;
  align-items: center;
  padding: 1.3rem;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 12px 34px rgba(0,0,0,0.08);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}

body.home-hub .home-toolkit-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(0,0,0,0.12);
}

body.home-hub .home-toolkit-media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

body.home-hub .home-toolkit-media img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

body.home-hub .home-toolkit-title{
  margin: .25rem 0 .5rem;
  font-size: 1.25rem;
}

body.home-hub .home-toolkit-text{
  margin-bottom: .6rem;
  opacity: .9;
}

body.home-hub .home-toolkit-sub{
  font-size: .95rem;
  opacity: .75;
  margin-bottom: .8rem;
}

body.home-hub .home-toolkit-cta{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 800px){
  body.home-hub .home-toolkit-card{
    grid-template-columns: 1fr;
  }

  body.home-hub .home-toolkit-media img{
    height: 240px;
  }
}

body.home-hub .home-hero-format{
  text-align:center;
  font-size:.95rem;
  opacity:.7;
  margin-top:.6rem;
  margin-bottom:1.6rem;
}

body.home-hub .home-books-module .home-books{
  max-width: 900px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}

body.home-hub .home-books-module .home-books-heading{
  text-align: center;
  margin: 0 0 1.5rem;
}

body.home-hub .home-books-module .home-books-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

body.home-hub .home-books-module .home-book{
  display: flex;
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

body.home-hub .home-books-module .home-book img{
  width: 92px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

body.home-hub .home-books-module .home-book-body h4{
  margin: 0 0 .35rem;
}

body.home-hub .home-books-module .home-book-body p{
  margin: 0;
  font-size: .95rem;
  opacity: .82;
  line-height: 1.45;
}

body.home-hub .home-books-module .home-books-more{
  text-align: center;
  margin-top: 1.4rem;
}

body.home-hub .home-books-module .home-books-link{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 800px){
  body.home-hub .home-books-module .home-books-grid{
    grid-template-columns: 1fr;
  }
}

/* ===========================
   AUDIO — remove download UI
   =========================== */

audio::-webkit-media-controls-download-button {
    display: none !important;
}

audio::-webkit-media-controls-overflow-button {
    display: none !important;
}

audio::-webkit-media-controls-enclosure {
    overflow: hidden;
}

audio::-webkit-media-controls-panel {
    background-color: transparent;
}

/* Footer legal strip */
.container-footer .footer-legal{
  text-align:center;
  font-size:.85rem;
  opacity:.75;
  margin-top:1.8rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,0.15);
}

.container-footer .footer-legal a{
  text-decoration:none;
  color:inherit;
}

.container-footer .footer-legal a:hover{
  text-decoration:underline;
}

.container-footer .footer-divider{
  margin:0 .6rem;
  opacity:.6;
}

.container-footer .footer-legal{
  grid-column: 1 / -1;
  text-align: center;
  font-size: .85rem;
  opacity: .75;
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.container-footer .footer-legal a{
  text-decoration: none;
  color: inherit;
}

.container-footer .footer-legal a:hover{
  text-decoration: underline;
}

.container-footer .footer-divider{
  margin: 0 .6rem;
  opacity: .6;
}

.container-footer .footer-legal-mod{
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  justify-content: center;
}

.container-footer .footer-legal-mod .footer-legal{
  text-align: center;
  width: 100%;
  max-width: 900px;
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: .85rem;
  opacity: .8;
}

.container-footer .footer-legal-mod .footer-legal a{
  color: inherit;
  text-decoration: none;
}
.container-footer .footer-legal-mod .footer-legal a:hover{
  text-decoration: underline;
}
.container-footer .footer-legal-mod .footer-divider{
  margin: 0 .6rem;
  opacity: .6;
}

footer.container-footer .footer-legal{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: .6rem !important;
  margin: 2rem auto 0 !important;
  padding-top: 1.2rem !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  font-size: .85rem !important;
  opacity: .8 !important;
}

footer.container-footer .footer-legal span,
footer.container-footer .footer-legal a{
  display: inline-block !important;
  white-space: nowrap !important;
}

footer.container-footer .footer-legal a{
  color: inherit !important;
  text-decoration: none !important;
}
footer.container-footer .footer-legal a:hover{
  text-decoration: underline !important;
}

footer.container-footer .footer-legal .footer-divider{
  opacity: .6 !important;
  margin: 0 .2rem !important;
}

footer.container-footer #mod-custom125{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

footer.container-footer #mod-custom125 .footer-legal{
  width: 100% !important;
  text-align: center !important;
  margin: 2rem auto 0 !important;
  padding-top: 1.2rem !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  font-size: .85rem !important;
  opacity: .8 !important;
}

footer.container-footer #mod-custom125 .footer-legal a{
  color: inherit !important;
  text-decoration: none !important;
}
footer.container-footer #mod-custom125 .footer-legal a:hover{
  text-decoration: underline !important;
}
footer.container-footer #mod-custom125 .footer-divider{
  margin: 0 .6rem;
  opacity: .6;
}

/* =========================================================
   SAFE FIX: Deep Dives child links
   Replaces the old broken “make whole card clickable” block
   ========================================================= */

.com-content-category-blog.blog .com-content-category-blog__child > .page-header,
.com-content-category-blog.blog .com-content-category-blog__child > h2,
.com-content-category-blog.blog .com-content-category-blog__child > h3 {
  position: relative;
}

.com-content-category-blog.blog .com-content-category-blog__child > .page-header > a[href]:not([data-bs-toggle]),
.com-content-category-blog.blog .com-content-category-blog__child > h2 > a[href]:not([data-bs-toggle]),
.com-content-category-blog.blog .com-content-category-blog__child > h3 > a[href]:not([data-bs-toggle]) {
  position: relative;
  z-index: 3;
  display: inline-block;
}

.com-content-category-blog.blog .com-content-category-blog__child > .page-header > a[data-bs-toggle],
.com-content-category-blog.blog .com-content-category-blog__child > h2 > a[data-bs-toggle],
.com-content-category-blog.blog .com-content-category-blog__child > h3 > a[data-bs-toggle] {
  position: relative;
  z-index: 2;
  width: auto !important;
}
/* ===========================
   HOMEPAGE HERO BANNER
   =========================== */

body.home-hub .home-hero-banner{
  position: relative;
  max-width: 1100px;
  margin: 0 auto 2rem auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}

body.home-hub .home-hero-banner img{
  width: 100%;
  height: auto;
  display: block;
}

/* Overlay gradient only on the banner */
body.home-hub .home-hero-overlay{
  position: absolute;
  inset: 0;
  padding: 2rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 35%,
    rgba(0,0,0,0.00) 70%
  );
}
/* =====================================================
   UK SNAPSHOTS BANNER
   ===================================================== */

.home-snapshot-banner{
  position:relative;
  margin:2.5rem 0 2rem;
  border-radius:18px;
  overflow:hidden;
}

.home-snapshot-banner img{
  width:100%;
  height:auto;
  display:block;
}

.home-snapshot-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:2rem;
  background:linear-gradient(
      rgba(10,15,25,0.45),
      rgba(10,15,25,0.65)
  );
  color:#fff;
}

.home-snapshot-kicker{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom:.6rem;
}

.home-snapshot-title{
  font-size:1.7rem;
  margin:0 0 .7rem;
}

.home-snapshot-text{
  max-width:650px;
  margin:0 0 1.1rem;
  opacity:.92;
}

.home-snapshot-button{
  display:inline-block;
  background:#0d6efd;
  color:#fff;
  padding:.7rem 1.4rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
}

.home-snapshot-button:hover{
  background:#0b5ed7;
  color:#fff;
}
/* Title inside banner */
body.home-hub .home-hero-overlay .home-hero-title{
  color: #ffffff;
  margin: 0 0 .35rem 0;
  text-align: center;
}

/* Subline inside banner */
body.home-hub .home-hero-overlay .home-hero-sub{
  color: #ffffff;
  margin: 0 auto;
  max-width: 650px;
  text-align: center;
  opacity: .95;
}

/* Intro text below banner */
body.home-hub .home-hero-intro,
body.home-hub .home-hero-format{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.system-insight{
  background:#f7f7f7;
  border-left:4px solid #444;
  padding:1.2rem 1.4rem;
  margin:2rem 0;
  font-size:1.05rem;
}
/* Share bar */
.aa-share{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin:.8rem 0 1.4rem;
  font-size:.9rem;
}

.aa-share-label{
  font-weight:600;
  opacity:.8;
}

/* base button */
.aa-share-link{
  display:inline-block;
  padding:.35rem .75rem;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  color:#333;
  transition:all .15s ease;
}

/* hover colours */

.aa-share-x:hover{
  background:#000;
  color:#fff;
}

.aa-share-linkedin:hover{
  background:#0A66C2;
  color:#fff;
}

.aa-share-facebook:hover{
  background:#1877F2;
  color:#fff;
}
.sidebar-links{
list-style:none;
padding:0;
margin:0;
}

.sidebar-links li{
margin:.4rem 0;
}

.system-lens{
font-size:.9rem;
background:#f7f7f7;
padding:1rem;
border-left:3px solid #444;
}

.system-lens ul{
margin:.5rem 0 0;
padding-left:1rem;
}
/* =========================
   Right Sidebar Card Style
   ========================= */

.sidebar-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:1.2rem;
  margin-bottom:1.4rem;
  box-shadow:0 6px 16px rgba(0,0,0,0.05);
  transition:transform .15s ease, box-shadow .15s ease;
}

/* subtle hover lift */
.sidebar-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

/* sidebar headings */
.sidebar-card h3,
.sidebar-card h4,
.sidebar-card .module-title{
  margin-top:0;
  margin-bottom:.7rem;
  font-size:1.05rem;
}

/* links */
.sidebar-card a{
  text-decoration:none;
}

.sidebar-card a:hover{
  text-decoration:underline;
}

/* list styling */
.sidebar-card ul{
  list-style:none;
  padding-left:0;
  margin:0;
}

.sidebar-card li{
  margin:.45rem 0;
}
/* =========================
   Sidebar Card Enhancements
   ========================= */

/* subtle left accent */
.sidebar-card{
  position: relative;
  overflow: hidden;
}

.sidebar-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
  border-radius: 12px 0 0 12px;
}

/* slightly tighter inner rhythm */
.sidebar-card h3,
.sidebar-card h4,
.sidebar-card .module-title{
  margin-top: 0;
  margin-bottom: .65rem;
  line-height: 1.2;
}

.sidebar-card p{
  margin: 0 0 .65rem;
  opacity: .9;
  line-height: 1.5;
}

/* cleaner link spacing */
.sidebar-card ul li{
  padding: .2rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.sidebar-card ul li:last-child{
  border-bottom: none;
}

/* links feel more intentional */
.sidebar-card a{
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}

.sidebar-card a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* optional small label feel for module titles */
.sidebar-card .module-title{
  font-weight: 700;
  letter-spacing: .2px;
}
.audio-library{
display:grid;
grid-template-columns:1fr;
gap:1.8rem;
}

.audio-card{
background:#fff;
border:1px solid rgba(0,0,0,0.08);
border-radius:12px;
padding:1.5rem;
box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.audio-card h3{
margin-top:0;
}

.audio-card audio{
width:100%;
margin-top:.6rem;
}
.sidebar-books ul{
  list-style:none;
  padding:0;
  margin:0;
}

.sidebar-books li{
  margin:.45rem 0;
}
.sidebar-books ul{
  list-style:none;
  padding:0;
  margin:0;
}

.sidebar-books li{
  margin:.45rem 0;
}
/* Sidebar Book Feature */

.sidebar-book-feature{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:1.2rem;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.sidebar-book-feature img{
  width:100%;
  max-width:140px;
  margin:0 auto .9rem;
  display:block;
}

.sidebar-book-feature h4{
  font-size:.98rem;
  margin:.5rem 0 .5rem;
}

.sidebar-book-feature p{
  font-size:.9rem;
  line-height:1.45;
  opacity:.85;
}

.sidebar-book-button{
  display:inline-block;
  margin-top:.6rem;
  padding:.45rem .8rem;
  border-radius:999px;
  background:#111;
  color:#fff;
  text-decoration:none;
  font-size:.85rem;
}

.sidebar-book-button:hover{
  opacity:.85;
}
/* Center sidebar module headings */
.sidebar-card .module-title,
.sidebar-card h3,
.sidebar-card h4{
  text-align: center;
}
.sidebar-card .module-title,
.sidebar-card h3,
.sidebar-card h4{
  text-align:center;
  margin-bottom:.8rem;
  position:relative;
}

.sidebar-card .module-title::after,
.sidebar-card h3::after,
.sidebar-card h4::after{
  content:"";
  display:block;
  width:40px;
  height:2px;
  background:rgba(0,0,0,0.2);
  margin:.4rem auto 0;
}
/* Force consistent sidebar heading style */

.sidebar-card .module-title,
.sidebar-card h3,
.sidebar-card h4{
  font-size:1.05rem;
  font-weight:600;
  text-align:center;
  margin-top:0;
  margin-bottom:.7rem;
  line-height:1.25;
}
/* Normalize book sidebar headings */

.sidebar-book-feature h4{
  font-size:1.05rem;
  text-align:center;
  margin-bottom:.6rem;
}
/* BOOK ARTICLE PAGES — reset text/content alignment */
.aa-article{
  display: block;
}

.aa-article .aa-content{
  clear: both;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0 0 0;
  padding: 0;
  text-align: left;
}

/* If a book image/card is floating or flexing, stop it affecting the text */
.aa-article .aa-book-card{
  margin-bottom: 1.5rem;
}

.aa-article .aa-book-card + .aa-content{
  margin-top: 1.5rem;
}
/* Force book article body back into normal flow */
.aa-article,
.aa-article .aa-book-card,
.aa-article .aa-content{
  float: none;
}
/* =========================================================
   FINAL FIX — BOOK ARTICLE PAGES
   Keep book cover/card at top, but force article text full width below
   ========================================================= */

/* The article itself must be normal block flow */
.aa-article{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

/* Keep the book card contained and stop it affecting following text */
.aa-article .aa-book-card{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  margin: 0 0 1.5rem 0 !important;
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Book image sizing stays sensible */
.aa-article .aa-book-card img,
.aa-article .aa-book-card .aa-book-img{
  width: 220px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Button/content area inside the book card */
.aa-article .aa-book-content{
  flex: 1 1 260px !important;
  min-width: 0 !important;
}

/* MAIN ARTICLE TEXT — always full width underneath */
.aa-article .aa-content{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.5rem 0 0 0 !important;
  padding: 0 !important;
  clear: both !important;
  float: none !important;
  text-align: left !important;
}

/* Ensure all text inside article content is normal */
.aa-article .aa-content p,
.aa-article .aa-content h2,
.aa-article .aa-content h3,
.aa-article .aa-content h4,
.aa-article .aa-content ul,
.aa-article .aa-content ol,
.aa-article .aa-content blockquote{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Book-only mode should also not push article text right */
.aa-article .aa-book-card.aa-book-only{
  display: block !important;
  width: auto !important;
}

/* Mobile */
@media (max-width: 768px){
  .aa-article .aa-book-card{
    display: block !important;
  }

  .aa-article .aa-book-card img,
  .aa-article .aa-book-card .aa-book-img{
    width: min(240px, 100%) !important;
    margin: 0 auto 1rem auto !important;
  }
}
/* ==============================================
   BOOK ARTICLE FIX — stop text wrapping right
   ============================================== */

.aa-book-cover{
  float: none !important;
  display: block !important;
  margin: 0 auto 1.5rem auto !important;
  width: min(260px, 100%) !important;
  max-width: 100% !important;
}

/* ensure article text starts full width */
.aa-book-article,
.aa-article .aa-content{
  clear: both !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
}

/* stop any flex rules affecting book pages */
.aa-article{
  display: block !important;
}



/* ======================================================
   FIX: Article text should not be justified
   ====================================================== */

.aa-content,
.com-content-article .com-content-article__body,
.com-content-article .item-page,
.com-content-article p{
  text-align: left !important;
}


/* image block */

/* actual image */

/* text area under the image, not beside it */

/* stop any flex/grid behaviour inside the book card */


/* Force each book card into a vertical stack */

/* Cover image link sits on top */

/* Actual image inside the link */

/* Title, intro and readmore must sit BELOW the image */

/* Keep spacing tidy */


/* Keep the cover block separate */

/* Force every text element to start BELOW the image */


/* Kill any grid/flex layout on the book card itself */

/* Book cover link must sit on its own line */

/* The actual image */

/* Force ALL following content below the image */

/* Keep title tidy */

/* Keep intro tidy */

/* Read more spacing */


/* book cover */

/* cover image */

/* title */

/* intro */

/* read more */


/* Image link becomes first grid row */

/* Actual cover image */

/* Title / intro / readmore each get their own row */


/* Keep some tidy spacing after the reset */


/* Ensure the card itself fills the container */





/* Each blog item becomes a normal full-width block */

/* Book card itself stacks vertically */



/* ======================================================
   BOOKS HUB — SINGLE CLEAN LAYOUT
   ====================================================== */

body.books-hub .blog-items,
body.books-hub .com-content-category-blog__items{
  display:block !important;
}

body.books-hub .com-content-category-blog__item.blog-item{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 22px 0 !important;
  padding:0 !important;
  float:none !important;
  clear:both !important;
  position:static !important;
}

body.books-hub .com-content-category-blog__item.blog-item > article.systems-card.is-book,
body.books-hub article.systems-card.is-book{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  float:none !important;
  clear:none !important;
}

body.books-hub article.systems-card.is-book > a.systems-card-image{
  display:block !important;
  width:220px !important;
  max-width:100% !important;
  margin:0 0 1rem 0 !important;
  padding:0 !important;
  float:none !important;
  clear:both !important;
  height:auto !important;
  aspect-ratio:auto !important;
}

body.books-hub article.systems-card.is-book > a.systems-card-image img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  border-radius:18px !important;
  background:#fff !important;
}

body.books-hub article.systems-card.is-book > h2.systems-card-title,
body.books-hub article.systems-card.is-book > div.systems-card-intro,
body.books-hub article.systems-card.is-book > p.systems-card-readmore{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  float:none !important;
  clear:both !important;
  text-align:left !important;
  position:static !important;
  inset:auto !important;
  transform:none !important;
}

body.books-hub article.systems-card.is-book > h2.systems-card-title{
  margin:0 0 .5rem 0 !important;
}

body.books-hub article.systems-card.is-book > div.systems-card-intro{
  margin:0 0 .75rem 0 !important;
}

body.books-hub article.systems-card.is-book > p.systems-card-readmore{
  margin:0 !important;
}

@media (max-width: 900px){
  body.books-hub article.systems-card.is-book > a.systems-card-image{
    width:min(220px, 100%) !important;
  }
}
/* Sidebar card buttons: fix dark text on dark button */
.sidebar-card .readmore .btn,
.sidebar-card .readmore a,
.sidebar-card a.btn,
.sidebar-card .mod-articles-category-readmore a,
.sidebar-card .readmore-link {
  color: #ffffff !important;
}

/* Keep text white on hover/focus too */
.sidebar-card .readmore .btn:hover,
.sidebar-card .readmore .btn:focus,
.sidebar-card .readmore a:hover,
.sidebar-card .readmore a:focus,
.sidebar-card a.btn:hover,
.sidebar-card a.btn:focus,
.sidebar-card .mod-articles-category-readmore a:hover,
.sidebar-card .mod-articles-category-readmore a:focus,
.sidebar-card .readmore-link:hover,
.sidebar-card .readmore-link:focus {
  color: #ffffff !important;
}
/* Stronger sidebar button text fix */
.sidebar-card .readmore,
.sidebar-card .readmore a,
.sidebar-card .readmore .btn,
.sidebar-card .btn,
.sidebar-card [class*="readmore"] a {
  color: #fff !important;
}
/* Sidebar custom book button */
.sidebar-card .sidebar-book-button,
.sidebar-card .sidebar-book-button:link,
.sidebar-card .sidebar-book-button:visited {
  display: inline-block;
  background: #111111;
  color: #ffffff !important;
  text-decoration: none;
}

/* Hover / focus */
.sidebar-card .sidebar-book-button:hover,
.sidebar-card .sidebar-book-button:focus,
.sidebar-card .sidebar-book-button:active {
  color: #ffffff !important;
  text-decoration: none;
}
/* ======================================================
   SIDEBAR BOOK FEATURE
   ====================================================== */

.sidebar-card .sidebar-book-feature {
  text-align: center;
}

.sidebar-card .sidebar-book-feature img {
  display: block;
  max-width: 160px;
  height: auto;
  margin: 0 auto 1rem;
}

.sidebar-card .sidebar-book-feature h4 {
  margin: 0 0 .75rem;
}

.sidebar-card .sidebar-book-button,
.sidebar-card .sidebar-book-button:link,
.sidebar-card .sidebar-book-button:visited,
.sidebar-card .sidebar-book-button:hover,
.sidebar-card .sidebar-book-button:focus,
.sidebar-card .sidebar-book-button:active {
  display: inline-block;
  margin-top: 1rem;
  padding: .8rem 1.4rem;
  background: #111111;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 999px;
}
/* =========================================================
   FRONT PAGE - NEWS DASHBOARD MODULE
   Single background image with two linked article panels
   ========================================================= */

.front-news-dashboard {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin: 24px 0;
  padding: 0;
  background-image: url("/images/home/Front-Dashboard.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  isolation: isolate;
}

.front-news-dashboard__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(8, 15, 35, 0.82) 0%, rgba(14, 24, 52, 0.72) 38%, rgba(9, 16, 34, 0.82) 100%);
  z-index: 1;
}

.front-news-dashboard__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 34px 30px 30px;
}

.front-news-dashboard__intro {
  max-width: 760px;
}

.front-news-dashboard__kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.front-news-dashboard__title {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.1;
  font-weight: 800;
}

.front-news-dashboard__summary {
  margin: 0;
  max-width: 700px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.02rem;
  line-height: 1.65;
}

.front-news-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.front-news-dashboard__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 24px 22px;
  border-radius: 20px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.front-news-dashboard__item:hover,
.front-news-dashboard__item:focus {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  text-decoration: none;
}

.front-news-dashboard__label {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.front-news-dashboard__item h3 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 800;
}

.front-news-dashboard__item p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.98rem;
  line-height: 1.65;
}

.front-news-dashboard__cta {
  margin-top: auto;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Hover colour polish */
.front-news-dashboard__item:hover h3,
.front-news-dashboard__item:focus h3,
.front-news-dashboard__item:hover .front-news-dashboard__cta,
.front-news-dashboard__item:focus .front-news-dashboard__cta {
  color: #ffffff;
}

/* Tablet */
@media (max-width: 991.98px) {
  .front-news-dashboard {
    min-height: 360px;
  }

  .front-news-dashboard__inner {
    padding: 28px 22px 24px;
  }

  .front-news-dashboard__grid {
    gap: 18px;
  }

  .front-news-dashboard__item {
    min-height: 200px;
    padding: 20px 18px;
  }

  .front-news-dashboard__item h3 {
    font-size: 1.2rem;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .front-news-dashboard {
    border-radius: 18px;
    min-height: auto;
  }

  .front-news-dashboard__inner {
    gap: 20px;
    padding: 22px 16px 18px;
  }

  .front-news-dashboard__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .front-news-dashboard__item {
    min-height: auto;
    padding: 18px 16px;
  }

  .front-news-dashboard__title {
    font-size: 1.7rem;
  }

  .front-news-dashboard__summary,
  .front-news-dashboard__item p {
    font-size: 0.95rem;
  }
}
.some-last-rule {
  margin-bottom: 30px;
}


/* Round the inner dashboard cards */
.front-news-dashboard__item {
  border-radius: 20px !important;
  overflow: hidden;
}
/* ===== FRONT DASHBOARD CORNER FIX ===== */

/* Round the module container */
.moduletable .front-news-dashboard,
.mod-custom .front-news-dashboard {
    border-radius: 24px;
    overflow: hidden;
}

/* Ensure dashboard itself is rounded */
.front-news-dashboard {
    border-radius: 24px;
    overflow: hidden;
}

/* Round the two article panels */
.front-news-dashboard__item {
    border-radius: 18px;
    overflow: hidden;
}
/* Remove Cassiopeia card styling for dashboard module */

.main-bottom.card {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Ensure the dashboard controls the shape */

.front-news-dashboard {
    border-radius: 24px;
    overflow: hidden;
}
.main-bottom.card .card-body {
    padding: 0;
}
/* Center dashboard intro text */
.front-news-dashboard__intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.front-news-dashboard__summary {
    margin-left: auto;
    margin-right: auto;
}
/* ===== HOME HERO BANNER — PERMANENT IMAGE ONLY ===== */

.home-hero-banner,
.test-banner-width {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.home-hero-banner img,
.test-banner-width img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
/* ===== HERO TITLE ===== */

.hero-title{
    position:absolute;
    top:50px;
    left:50%;
    transform:translateX(-50%);
    
    font-size:38px;
    font-weight:800;
    letter-spacing:4px;
    color:#ffffff;

    text-align:center;
    white-space:nowrap;
}

/* make banner a positioning container */

.home-hero-banner{
    position:relative !important;
}
/* ===== HERO BOTTOM TEXT AREA ===== */

.hero-bottom{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;

    padding:40px 60px;

    background:linear-gradient(
        to top,
        rgba(5,15,35,0.90) 0%,
        rgba(5,15,35,0.70) 40%,
        rgba(5,15,35,0.0) 100%
    );

    color:#ffffff;
}

/* paragraph styling */

.hero-bottom p{
    margin:0 0 10px 0;
    font-size:18px;
    line-height:1.5;
    font-weight:600;
}

/* smaller last line */

.hero-small{
    font-size:16px;
    opacity:0.9;
}
/* ===== HERO BANNER IMAGE ONLY ===== */

.home-hero-banner,
.test-banner-width{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    border-radius:18px !important;
    overflow:hidden !important;
}

.home-hero-banner img,
.test-banner-width img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
}
/* Footer background image */

.footer {
  background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)),
    url("/images/footer/system-footer.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #ffffff;
}
.footer a,
.footer p,
.footer h1,
.footer h2,
.footer h3,
.footer h4 {
  color: #ffffff;
}
/* =========================================================
   Front dashboard module - rental + inheritance
   ========================================================= */

.front-news-dashboard {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 420px;
  padding: 0;
  background-image:
    linear-gradient(135deg, rgba(4, 16, 40, 0.88) 0%, rgba(6, 22, 52, 0.78) 42%, rgba(8, 26, 58, 0.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0.58)),
    url("/images/articles/rentalandinheritance.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

.front-news-dashboard__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(77, 208, 255, 0.18), transparent 28%),
    radial-gradient(circle at bottom left, rgba(110, 130, 255, 0.14), transparent 30%);
  pointer-events: none;
}

.front-news-dashboard__inner {
  position: relative;
  z-index: 2;
  padding: 34px 30px;
}

.front-news-dashboard__intro {
  max-width: 760px;
  margin-bottom: 26px;
}

.front-news-dashboard__kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #dff6ff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.front-news-dashboard__title {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  line-height: 1.1;
}

.front-news-dashboard__summary {
  margin: 0;
  max-width: 720px;
  color: rgba(255,255,255,0.92);
  font-size: 1rem;
  line-height: 1.65;
}

.front-news-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.front-news-dashboard__item {
  display: block;
  padding: 24px 22px;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  background: rgba(7, 18, 40, 0.56);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.front-news-dashboard__item:hover,
.front-news-dashboard__item:focus {
  transform: translateY(-4px);
  background: rgba(10, 24, 52, 0.72);
  border-color: rgba(125, 220, 255, 0.45);
  color: #fff;
  text-decoration: none;
}

.front-news-dashboard__label {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fe8ff;
}

.front-news-dashboard__item h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.25;
}

.front-news-dashboard__item p {
  margin: 0 0 16px;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}

.front-news-dashboard__cta {
  display: inline-block;
  font-weight: 700;
  color: #dff6ff;
}

.front-news-dashboard__item:hover .front-news-dashboard__cta,
.front-news-dashboard__item:focus .front-news-dashboard__cta {
  color: #ffffff;
}

/* Mobile */
@media (max-width: 900px) {
  .front-news-dashboard__grid {
    grid-template-columns: 1fr;
  }

  .front-news-dashboard__inner {
    padding: 26px 20px;
  }

  .front-news-dashboard {
    min-height: auto;
  }
}
/* =========================================================
   THINK ON THE SYSTEM — SYSTEM HEALTH DASHBOARD
   ========================================================= */

.tos-health-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  color: #1d2433;
}

.tos-health-dashboard p,
.tos-health-dashboard li {
  line-height: 1.75;
}

.tos-health-hero {
  margin: 0 0 28px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1630 0%, #163462 55%, #244d7f 100%);
  box-shadow: 0 16px 40px rgba(11, 22, 48, 0.18);
}

.tos-health-hero__inner {
  padding: 38px 32px;
}

.tos-health-hero__kicker {
  margin: 0 0 10px;
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tos-health-hero__title {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  font-weight: 800;
}

.tos-health-hero__subtitle {
  margin: 0;
  color: rgba(255,255,255,0.94);
  font-size: 1.1rem;
}

.tos-health-hero__updated {
  margin: 14px 0 0;
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
}

.tos-health-score {
  margin: 0 0 28px;
  padding: 28px 26px;
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

.tos-health-score--critical {
  background: linear-gradient(135deg, #8f1f1f 0%, #b52b2b 55%, #d94b4b 100%);
}

.tos-health-score__label {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.86;
}

.tos-health-score__value {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.tos-health-score__text {
  margin: 0;
  max-width: 900px;
  font-size: 1.04rem;
  line-height: 1.7;
}

.tos-health-section-title {
  margin: 0 0 16px;
  color: #0f2a50;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.15;
  font-weight: 800;
}

.tos-health-alert,
.tos-health-summary,
.tos-health-nav {
  margin: 0 0 28px;
  padding: 26px 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(11, 22, 48, 0.08);
}

.tos-health-alert {
  border-left: 6px solid #c43333;
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.tos-health-alert__list {
  margin: 0;
  padding-left: 1.2rem;
}

.tos-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.tos-health-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: 0 10px 28px rgba(11, 22, 48, 0.08);
  border-top: 5px solid #315f99;
}

.tos-health-card--critical {
  border-top-color: #c43333;
}

.tos-health-card--warning {
  border-top-color: #d49721;
}

.tos-health-card--stable {
  border-top-color: #315f99;
}

.tos-health-card__top {
  margin-bottom: 14px;
}

.tos-health-card__top h3 {
  margin: 10px 0 0;
  color: #10294d;
  font-size: 1.28rem;
  line-height: 1.2;
  font-weight: 800;
}

.tos-health-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tos-health-badge--critical {
  background: #fde8e8;
  color: #a32020;
}

.tos-health-badge--warning {
  background: #fff4d8;
  color: #9b6600;
}

.tos-health-badge--stable {
  background: #e8f0fb;
  color: #214b7b;
}

.tos-health-current {
  margin: 0 0 14px;
  color: #243247;
  font-weight: 700;
}

.tos-health-note {
  margin: 0 0 16px;
  padding: 16px 16px;
  border-radius: 14px;
  background: #f5f8fc;
  color: #2b3a52;
}

.tos-health-links ul {
  margin: 10px 0 0;
  padding-left: 1.1rem;
}

.tos-health-links li {
  margin: 0 0 10px;
}

.tos-health-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e6ebf2;
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
  color: #314056;
}

.tos-health-trend {
  font-weight: 800;
}

.tos-health-trend--critical {
  color: #b12323;
}

.tos-health-trend--warning {
  color: #a56c00;
}

.tos-health-trend--stable {
  color: #29537f;
}

.tos-health-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tos-health-link {
  display: block;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #14345c 0%, #204d82 100%);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(20, 52, 92, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tos-health-link:hover,
.tos-health-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(20, 52, 92, 0.24);
}

@media (max-width: 991.98px) {
  .tos-health-grid,
  .tos-health-nav__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .tos-health-hero__inner,
  .tos-health-score,
  .tos-health-alert,
  .tos-health-summary,
  .tos-health-nav,
  .tos-health-card {
    padding: 20px 18px;
  }

  .tos-health-dashboard p,
  .tos-health-dashboard li {
    line-height: 1.68;
  }
}
/* =========================================================
   THINK ON THE SYSTEM — SYSTEM HEALTH MONTHLY REPORT
   ========================================================= */

.tos-health-report {
  max-width: 1100px;
  margin: 0 auto;
  color: #1d2433;
}

.tos-health-report p,
.tos-health-report li {
  line-height: 1.78;
}

.tos-health-report__hero {
  margin: 0 0 28px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1630 0%, #163462 55%, #244d7f 100%);
  box-shadow: 0 16px 40px rgba(11, 22, 48, 0.18);
}

.tos-health-report__hero-inner {
  padding: 38px 32px;
}

.tos-health-report__kicker {
  margin: 0 0 10px;
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tos-health-report__title {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.05;
  font-weight: 800;
}

.tos-health-report__subtitle {
  margin: 0;
  color: rgba(255,255,255,0.94);
  font-size: 1.1rem;
}

.tos-health-report__date {
  margin: 14px 0 0;
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
}

.tos-health-report__score {
  margin: 0 0 28px;
  padding: 28px 26px;
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

.tos-health-report__score--critical {
  background: linear-gradient(135deg, #8f1f1f 0%, #b52b2b 55%, #d94b4b 100%);
}

.tos-health-report__score-label {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.86;
}

.tos-health-report__score-value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.tos-health-report__score-text {
  margin: 0;
  max-width: 900px;
  font-size: 1.04rem;
  line-height: 1.7;
}

.tos-report-section-title {
  margin: 0 0 16px;
  color: #0f2a50;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.15;
  font-weight: 800;
}

.tos-report-card,
.tos-report-nav {
  margin: 0 0 28px;
  padding: 26px 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(11, 22, 48, 0.08);
}

.tos-report-card--diagnosis {
  border-left: 6px solid #c43333;
}

.tos-report-card--changes {
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  border-left: 6px solid #d94b4b;
}

.tos-report-card--insight {
  background: linear-gradient(180deg, #f3fbfb 0%, #ffffff 100%);
  border-left: 6px solid #2c8d8d;
}

.tos-report-card--connections {
  background: linear-gradient(180deg, #fff9ef 0%, #ffffff 100%);
  border-left: 6px solid #d49721;
}

.tos-report-card--forecast {
  border-left: 6px solid #b78a1c;
}

.tos-report-card--big-picture {
  background: linear-gradient(135deg, #eef3fa 0%, #ffffff 100%);
  border: 1px solid #d9e2ef;
}

.tos-report-card--watch {
  border-left: 6px solid #6d4ec7;
}

.tos-report-list,
.tos-report-ordered {
  margin: 0;
  padding-left: 1.2rem;
}

.tos-report-list li,
.tos-report-ordered li {
  margin: 0 0 12px;
}

.tos-report-callout {
  margin: 0 0 18px;
  padding: 18px 18px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e4ebf3;
}

.tos-report-callout:last-child {
  margin-bottom: 0;
}

.tos-report-callout h3 {
  margin: 0 0 10px;
  color: #163055;
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 800;
}

.tos-report-callout p {
  margin: 0;
}

.tos-report-table-wrap {
  overflow-x: auto;
}

.tos-report-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 760px;
}

.tos-report-table th {
  background: #163d6c;
  color: #fff;
  padding: 14px 12px;
  text-align: left;
  font-weight: 800;
}

.tos-report-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #e6ebf2;
  vertical-align: top;
}

.tos-report-table tbody tr:hover {
  background: #f8fbff;
}

.tos-report-up {
  color: #b12323;
  font-weight: 800;
}

.tos-report-down {
  color: #1f7d4c;
  font-weight: 800;
}

.tos-report-neutral {
  color: #5f6f85;
  font-weight: 700;
}

.tos-report-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tos-report-link {
  display: block;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #14345c 0%, #204d82 100%);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(20, 52, 92, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tos-report-link:hover,
.tos-report-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(20, 52, 92, 0.24);
}

@media (max-width: 991.98px) {
  .tos-report-nav__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .tos-health-report__hero-inner,
  .tos-health-report__score,
  .tos-report-card,
  .tos-report-nav {
    padding: 20px 18px;
  }

  .tos-health-report p,
  .tos-health-report li {
    line-height: 1.68;
  }
}
/* =========================================================
   THINK ON THE SYSTEM — TOP-A SYSTEM HEALTH MODULE
   ========================================================= */

.tos-health-module {
  margin: 0 0 28px;
  padding: 24px 22px 22px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, #0b1630 0%, #14345c 48%, #1f4e80 100%);
  color: #ffffff;
  box-shadow: 0 18px 38px rgba(11, 22, 48, 0.20);
  overflow: hidden;
}

.tos-health-module__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.tos-health-module__kicker {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.tos-health-module__title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.05;
  font-weight: 800;
  color: #ffffff;
}

.tos-health-module__status {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tos-health-module__status--critical {
  background: rgba(203, 54, 54, 0.18);
  border: 1px solid rgba(255,255,255,0.16);
  color: #ffd8d8;
}

.tos-health-module__subhead {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 22px;
  color: rgba(255,255,255,0.86);
  font-size: 0.95rem;
  font-weight: 600;
}

.tos-health-module__gauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.tos-gauge {
  padding: 16px 14px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  text-align: center;
  backdrop-filter: blur(3px);
}

.tos-gauge__dial {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.tos-gauge--critical .tos-gauge__dial {
  background:
    conic-gradient(
      #d84a4a 0deg 250deg,
      rgba(255,255,255,0.12) 250deg 360deg
    );
}

.tos-gauge--warning .tos-gauge__dial {
  background:
    conic-gradient(
      #d7a12d 0deg 220deg,
      rgba(255,255,255,0.12) 220deg 360deg
    );
}

.tos-gauge--stable .tos-gauge__dial {
  background:
    conic-gradient(
      #4e87c6 0deg 180deg,
      rgba(255,255,255,0.12) 180deg 360deg
    );
}

.tos-gauge__dial::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 60%),
    #0c1b34;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.tos-gauge__inner {
  position: relative;
  z-index: 1;
  padding: 0 8px;
}

.tos-gauge__value {
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 800;
  color: #ffffff;
}

.tos-gauge__unit {
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.tos-gauge__label {
  margin: 0 0 6px;
  font-size: 1.02rem;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.tos-gauge__note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
}

.tos-health-module__panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.tos-mini-panel {
  padding: 15px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
}

.tos-mini-panel__name {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.tos-mini-panel__value {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 800;
  color: #ffffff;
}

.tos-mini-panel--critical {
  box-shadow: inset 0 0 0 1px rgba(216, 74, 74, 0.22);
}

.tos-mini-panel--warning {
  box-shadow: inset 0 0 0 1px rgba(215, 161, 45, 0.22);
}

.tos-health-module__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tos-health-module__link {
  display: block;
  padding: 15px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.tos-health-module__link:hover,
.tos-health-module__link:focus {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.16);
}

@media (max-width: 1199.98px) {
  .tos-health-module__gauges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tos-health-module__panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .tos-health-module {
    padding: 20px 16px 18px;
    border-radius: 18px;
  }

  .tos-health-module__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tos-health-module__gauges,
  .tos-health-module__links {
    grid-template-columns: 1fr;
  }

  .tos-gauge__dial {
    width: 132px;
    height: 132px;
  }
}
/* =========================================================
   THINK ON THE SYSTEM — SYSTEM HEALTH HOMEPAGE MODULE
   Banner position
   ========================================================= */

/* remove banner position padding/card interference if present */
.banner .card,
.banner .card-body {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* module shell */
.tos-health-module {
  width: 100%;
  padding: 26px 24px 24px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(rgba(10,20,40,0.82), rgba(10,20,40,0.82)),
    url("/images/articles/systemstatus.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  box-shadow: 0 18px 38px rgba(11, 22, 48, 0.20);
}

/* header */
.tos-health-module__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.tos-health-module__heading {
  min-width: 0;
}

.tos-health-module__kicker {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.tos-health-module__title {
  margin: 0 0 6px;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.05;
  font-weight: 800;
  color: #ffffff;
}

.tos-health-module__subhead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
}

.tos-health-module__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tos-health-module__status--critical {
  background: rgba(203, 54, 54, 0.18);
  border: 1px solid rgba(255,255,255,0.14);
  color: #ffd5d5;
}

/* gauges */
.tos-health-module__gauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.tos-gauge {
  padding: 16px 14px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  text-align: center;
}

.tos-gauge__ring {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.tos-gauge--critical .tos-gauge__ring {
  background: conic-gradient(
    #d84a4a 0deg 255deg,
    rgba(255,255,255,0.14) 255deg 360deg
  );
}

.tos-gauge--warning .tos-gauge__ring {
  background: conic-gradient(
    #d8a03b 0deg 225deg,
    rgba(255,255,255,0.14) 225deg 360deg
  );
}

.tos-gauge--stable .tos-gauge__ring {
  background: conic-gradient(
    #4b84c2 0deg 190deg,
    rgba(255,255,255,0.14) 190deg 360deg
  );
}

.tos-gauge__ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 60%),
    #0c1a33;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 8px 18px rgba(255,255,255,0.03);
}

.tos-gauge__face {
  position: relative;
  z-index: 1;
  padding: 0 8px;
}

.tos-gauge__value {
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 800;
  color: #ffffff;
}

.tos-gauge__meta {
  margin-top: 6px;
  font-size: 0.73rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}

.tos-gauge__label {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.tos-gauge__note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
}

/* metrics */
.tos-health-module__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.tos-health-metric {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
}

.tos-health-metric--critical {
  box-shadow: inset 0 0 0 1px rgba(216, 74, 74, 0.22);
}

.tos-health-metric--warning {
  box-shadow: inset 0 0 0 1px rgba(216, 160, 59, 0.22);
}

.tos-health-metric__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.tos-health-metric__value {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 800;
  color: #ffffff;
}

/* links */
.tos-health-module__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tos-health-module__link {
  display: block;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.tos-health-module__link:hover,
.tos-health-module__link:focus {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.16);
}

/* responsive */
@media (max-width: 1199.98px) {
  .tos-health-module__gauges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tos-health-module__metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .tos-health-module {
    padding: 20px 16px 18px;
    border-radius: 18px;
  }

  .tos-health-module__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tos-health-module__gauges,
  .tos-health-module__links {
    grid-template-columns: 1fr;
  }

  .tos-gauge__ring {
    width: 132px;
    height: 132px;
  }
}
/* =================================================
   UK SYSTEM HEALTH DASHBOARD MODULE
   ================================================= */

.tos-dashboard {
  padding: 30px;
  border-radius: 24px;
  background:
    linear-gradient(rgba(8,18,38,0.76), rgba(8,18,38,0.76)),
    url("/images/articles/systemstatus.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  box-shadow:
    0 24px 50px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}

/* header */
.tos-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
  gap: 20px;
}

.tos-dashboard-title {
  min-width: 0;
}

.tos-dashboard-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.75;
}

.tos-dashboard-title h2 {
  margin: 0;
  font-size: 36px;
  line-height: 1.08;
  font-weight: 800;
  color: #fff;
}

.tos-dashboard-sub {
  margin: 8px 0 0;
  opacity: 0.82;
  font-size: 16px;
  line-height: 1.4;
}

.tos-dashboard-status {
  background: #c43c3c;
  padding: 10px 18px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.03em;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12);
  white-space: nowrap;
}

/* gauges */
.tos-dashboard-gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 25px;
}

.tos-dial {
  text-align: center;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tos-dial h3 {
  margin: 12px 0 6px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.tos-dial p {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.dial-inner {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  color: white;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.35),
    inset 0 2px 4px rgba(255,255,255,0.08),
    inset 0 -10px 18px rgba(0,0,0,0.28);
}

.dial-inner::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 38%, rgba(0,0,0,0.25) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -8px 14px rgba(0,0,0,0.22);
}

.dial-inner > * {
  position: relative;
  z-index: 1;
}

.dial-red .dial-inner {
  background: conic-gradient(#e04646 0deg 250deg, #1d2336 250deg 360deg);
}

.dial-orange .dial-inner {
  background: conic-gradient(#e39a3b 0deg 220deg, #1d2336 220deg 360deg);
}

.dial-value {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0,0,0,0.35);
}

.dial-meta {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* bottom metrics */
.tos-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.tos-metric {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 100%);
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.tos-metric span {
  display: block;
  font-size: 12px;
  opacity: 0.72;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.tos-metric strong {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  color: #fff;
}

/* buttons */
.tos-dashboard-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.tos-dashboard-buttons a {
  display: block;
  text-align: center;
  padding: 16px 18px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  color: white !important;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1.35;
  box-shadow:
    0 10px 18px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.18);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.tos-dashboard-buttons a:hover,
.tos-dashboard-buttons a:focus {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.11) 100%);
  box-shadow:
    0 14px 24px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -2px 0 rgba(0,0,0,0.20);
}

/* responsive */
@media (max-width: 1100px) {
  .tos-dashboard-gauges {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .tos-dashboard {
    padding: 22px 16px;
    border-radius: 18px;
  }

  .tos-dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tos-dashboard-title h2 {
    font-size: 30px;
  }

  .tos-dashboard-gauges,
  .tos-dashboard-metrics,
  .tos-dashboard-buttons {
    grid-template-columns: 1fr;
  }

  .dial-inner {
    width: 126px;
    height: 126px;
  }

  .dial-value {
    font-size: 24px;
  }
}
/* =========================================================
   THINK ON THE SYSTEM — SHARED OWNERSHIP FRONT CARD
   ========================================================= */

.tos-shared-card {
  width: 100%;
  margin: 0;
}

.tos-shared-card__link {
  position: relative;
  display: block;
  min-height: 340px;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
  isolation: isolate;
}

.tos-shared-card__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tos-shared-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.02);
}

/* Main site-style gradient treatment */
.tos-shared-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 30%),
    linear-gradient(135deg, rgba(3,16,45,0.88) 0%, rgba(7,29,74,0.78) 42%, rgba(3,19,52,0.90) 100%);
}

/* Additional darkening layer for text clarity */
.tos-shared-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.22) 35%, rgba(0,0,0,0.38) 100%);
  pointer-events: none;
}

/* subtle border */
.tos-shared-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: none;
}

.tos-shared-card__content {
  position: relative;
  z-index: 5;
  max-width: 760px;
  padding: 34px 34px 32px;
}

.tos-shared-card__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #bfe8ff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.tos-shared-card__title {
  margin: 0 0 16px;
  font-size: clamp(1.85rem, 2.5vw, 2.75rem);
  line-height: 1.08;
  font-weight: 800;
  color: #ffffff;
}

.tos-shared-card__text {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: 1.06rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
}

.tos-shared-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.tos-shared-card__link:hover .tos-shared-card__cta,
.tos-shared-card__link:focus .tos-shared-card__cta {
  transform: translateX(3px);
  border-color: rgba(255,255,255,0.4);
}

.tos-shared-card__link:hover,
.tos-shared-card__link:focus {
  text-decoration: none;
  color: #ffffff;
}

/* mobile */
@media (max-width: 768px) {
  .tos-shared-card__link {
    min-height: 300px;
    border-radius: 20px;
  }

  .tos-shared-card__content {
    padding: 26px 22px 24px;
  }

  .tos-shared-card__title {
    font-size: 1.8rem;
  }

  .tos-shared-card__text {
    font-size: 1rem;
    line-height: 1.6;
  }
}
/* =========================================================
   THINK ON THE SYSTEM — INTRO VIDEO MODULE
   Clean wrapper reset + aligned player
   Module Class Suffix: tos-intro-video-module
   ========================================================= */

/* neutralise Joomla/Cassiopeia wrapper padding/background */
.tos-intro-video-module,
.tos-intro-video-module .card,
.tos-intro-video-module .card-body,
.tos-intro-video-module .mod-custom,
.tos-intro-video-module .module-content,
.tos-intro-video-module .module-body {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* outer shell */
.tos-intro-video {
  width: 100%;
  margin: 28px 0 36px;
  padding: 14px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 30%),
    linear-gradient(135deg, #081a3a 0%, #0d2a52 45%, #081a3a 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

/* video frame */
.tos-intro-video__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

/* iframe fills frame exactly */
.tos-intro-video__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* mobile */
@media (max-width: 768px) {
  .tos-intro-video {
    margin: 22px 0 28px;
    padding: 10px;
    border-radius: 20px;
  }

  .tos-intro-video__player {
    border-radius: 14px;
  }
}
/* Intro video module */
.tos-intro-video {
  width: 100%;
  margin: 28px 0 36px;
  padding: 8px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 30%),
    linear-gradient(135deg, #081a3a 0%, #0d2a52 45%, #081a3a 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.tos-intro-video__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

.tos-intro-video__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* =========================================================
   THINK ON THE SYSTEM — INTRO VIDEO THUMBNAIL CARD
   ========================================================= */

.tos-intro-link-card {
  width: 100%;
  margin: 28px 0 36px;
}

.tos-intro-link-card__link {
  position: relative;
  display: block;
  min-height: 420px;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 30%),
    linear-gradient(135deg, #081a3a 0%, #0d2a52 45%, #081a3a 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  isolation: isolate;
}

.tos-intro-link-card__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tos-intro-link-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.tos-intro-link-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(3,16,45,0.26) 0%, rgba(3,16,45,0.18) 22%, rgba(3,16,45,0.45) 100%);
}

.tos-intro-link-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

.tos-intro-link-card__play {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35));
}

.tos-intro-link-card__content {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 28px 26px;
  background: linear-gradient(to top, rgba(4,14,36,0.82) 0%, rgba(4,14,36,0.45) 48%, rgba(4,14,36,0.00) 100%);
}

.tos-intro-link-card__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #bfe8ff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.tos-intro-link-card__title {
  margin: 0 0 10px;
  font-size: clamp(1.65rem, 2.5vw, 2.5rem);
  line-height: 1.08;
  font-weight: 800;
  color: #fff;
}

.tos-intro-link-card__text {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
}

.tos-intro-link-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tos-intro-link-card__link:hover,
.tos-intro-link-card__link:focus {
  text-decoration: none;
  color: #fff;
}

.tos-intro-link-card__link:hover .tos-intro-link-card__play,
.tos-intro-link-card__link:focus .tos-intro-link-card__play {
  transform: translate(-50%, -50%) scale(1.04);
}

.tos-intro-link-card__link:hover .tos-intro-link-card__cta,
.tos-intro-link-card__link:focus .tos-intro-link-card__cta {
  transform: translateX(3px);
  border-color: rgba(255,255,255,0.42);
}

@media (max-width: 768px) {
  .tos-intro-link-card {
    margin: 22px 0 28px;
  }

  .tos-intro-link-card__link {
    min-height: 320px;
    border-radius: 20px;
  }

  .tos-intro-link-card__content {
    padding: 22px 20px 20px;
  }

  .tos-intro-link-card__title {
    font-size: 1.55rem;
  }

  .tos-intro-link-card__text {
    font-size: 0.96rem;
    line-height: 1.55;
  }
}
/* =========================================================
   THINK ON THE SYSTEM — INTRO VIDEO SWAP MODULE
   ========================================================= */

.tos-intro-swap {
  position: relative;
  width: 100%;
  margin: 28px 0 36px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 30%),
    linear-gradient(135deg, #081a3a 0%, #0d2a52 45%, #081a3a 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 14px;
}

.tos-intro-swap__trigger,
.tos-intro-swap__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
}

.tos-intro-swap__trigger {
  padding: 0;
  margin: 0;
  background: #000;
  cursor: pointer;
}

.tos-intro-swap__thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tos-intro-swap__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(3,16,45,0.10), rgba(3,16,45,0.18));
  pointer-events: none;
}

.tos-intro-swap__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
  transition: transform 0.2s ease;
}

.tos-intro-swap__trigger:hover .tos-intro-swap__play,
.tos-intro-swap__trigger:focus .tos-intro-swap__play {
  transform: translate(-50%, -50%) scale(1.04);
}

.tos-intro-swap__video {
  display: none;
  background: #000;
  line-height: 0;
}

.tos-intro-swap__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tos-intro-swap.is-playing .tos-intro-swap__trigger {
  display: none;
}

.tos-intro-swap.is-playing .tos-intro-swap__video {
  display: block;
}

@media (max-width: 768px) {
  .tos-intro-swap {
    margin: 22px 0 28px;
    border-radius: 22px;
    padding: 10px;
  }

  .tos-intro-swap__trigger,
  .tos-intro-swap__video {
    border-radius: 16px;
  }

  .tos-intro-swap__play svg {
    width: 74px;
    height: 52px;
  }
}
/* =========================================================
   THINK ON THE SYSTEM — INTRO VIDEO PANEL
   ========================================================= */

.tos-intro-panel {
  width: 100%;
  margin: 28px 0 36px;
  padding: 14px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 30%),
    linear-gradient(135deg, #081a3a 0%, #0d2a52 45%, #081a3a 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.tos-intro-panel__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}

.tos-intro-panel__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tos-intro-panel__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(3,16,45,0.10), rgba(3,16,45,0.20));
  pointer-events: none;
}

.tos-intro-panel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
  transition: transform 0.2s ease;
}

.tos-intro-panel__play:hover,
.tos-intro-panel__play:focus {
  transform: translate(-50%, -50%) scale(1.04);
}

.tos-intro-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px 2px;
}

.tos-intro-panel__label {
  color: #bfe8ff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.tos-intro-panel__cta {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 2px;
}

.tos-intro-panel__cta:hover,
.tos-intro-panel__cta:focus {
  color: #ffffff;
  text-decoration: none;
  border-bottom-color: rgba(255,255,255,0.42);
}

@media (max-width: 768px) {
  .tos-intro-panel {
    margin: 22px 0 28px;
    padding: 10px;
    border-radius: 20px;
  }

  .tos-intro-panel__media {
    border-radius: 14px;
  }

  .tos-intro-panel__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 14px;
  }
}
/* =========================================================
   THINK ON THE SYSTEM — INTRO VIDEO FEATURE CARD
   Links to internal video article
   ========================================================= */

.tos-intro-feature-card {
  width: 100%;
  margin: 28px 0 36px;
}

.tos-intro-feature-card__link {
  position: relative;
  display: block;
  min-height: 420px;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 30%),
    linear-gradient(135deg, #081a3a 0%, #0d2a52 45%, #081a3a 100%);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  isolation: isolate;
}

.tos-intro-feature-card__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tos-intro-feature-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.tos-intro-feature-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(3,16,45,0.16) 0%, rgba(3,16,45,0.10) 20%, rgba(3,16,45,0.58) 100%);
}

.tos-intro-feature-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

.tos-intro-feature-card__play {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  line-height: 0;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
  transition: transform 0.2s ease;
}

.tos-intro-feature-card__content {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 28px 26px;
  background: linear-gradient(to top, rgba(4,14,36,0.88) 0%, rgba(4,14,36,0.56) 48%, rgba(4,14,36,0.00) 100%);
}

.tos-intro-feature-card__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #bfe8ff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.tos-intro-feature-card__title {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 2.5vw, 2.55rem);
  line-height: 1.08;
  font-weight: 800;
  color: #ffffff;
}

.tos-intro-feature-card__text {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
}

.tos-intro-feature-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tos-intro-feature-card__link:hover,
.tos-intro-feature-card__link:focus {
  text-decoration: none;
  color: #ffffff;
}

.tos-intro-feature-card__link:hover .tos-intro-feature-card__play,
.tos-intro-feature-card__link:focus .tos-intro-feature-card__play {
  transform: translate(-50%, -50%) scale(1.05);
}

.tos-intro-feature-card__link:hover .tos-intro-feature-card__cta,
.tos-intro-feature-card__link:focus .tos-intro-feature-card__cta {
  transform: translateX(3px);
  border-color: rgba(255,255,255,0.42);
}

@media (max-width: 768px) {
  .tos-intro-feature-card {
    margin: 22px 0 28px;
  }

  .tos-intro-feature-card__link {
    min-height: 320px;
    border-radius: 20px;
  }

  .tos-intro-feature-card__content {
    padding: 22px 20px 20px;
  }

  .tos-intro-feature-card__title {
    font-size: 1.55rem;
  }

  .tos-intro-feature-card__text {
    font-size: 0.96rem;
    line-height: 1.55;
  }

  .tos-intro-feature-card__play {
    top: 40%;
  }
}