@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Full-bleed sections use width:100vw, which includes the vertical scrollbar and spills
   ~15px past the content, causing a horizontal scrollbar. Clip it at the root. Using
   `clip` (not `hidden`) so it does not create a scroll container that would break the
   sticky testimonials sidebar. */
html { overflow-x: clip; }

/* ---- Typography: Open Sans for body text, Space Grotesk for headings ---- */
:root { --bs-body-font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", sans-serif; }
body {
  font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
}

.logo-img {
    max-width:300px;
    height:auto;
}

/* The template caps every .form-control at 240px; let inputs fill their field. */
.form-control { max-width: none; }

 /* ===== Hero Section — pure HTML/CSS, light/white theme ===== */
  .hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
    background-color: #ffffff;
    overflow: hidden;
    color: #12172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
  }

  /* light pencil-line grid on white, fading toward the edges for a bit of texture */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(31, 45, 61, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31, 45, 61, 0.08) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 42%, transparent 84%);
    mask-image: radial-gradient(ellipse at center, #000 42%, transparent 84%);
    pointer-events: none;
  }

  .hero__inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
  }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2f6fed;
    margin-bottom: 1.25rem;
  }

  .hero__title {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
    color: #0e1424;
  }

  .hero__title em {
    font-style: normal;
    color: #2f80bf;
  }

  .hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 400;
    line-height: 1.65;
    color: #5b6472;
    margin: 0 0 1.75rem;
  }

  .hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin: 0 0 2.25rem;
    padding: 0;
    list-style: none;
  }

  .hero__tag {
    font-size: 0.85rem;
    font-weight: 600;
    color: #344055;
    background-color: #f2f5fb;
    border: 1px solid #e2e8f4;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }

  .hero__btn {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    border: 2px solid transparent;
  }

  .hero__btn--primary {
    background-color: #2f80bf;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(47, 128, 191, 0.25);
  }
  .hero__btn--primary:hover {
    background-color: #256199;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(47, 128, 191, 0.32);
  }

  .hero__btn--secondary {
    background-color: transparent;
    color: #12172a;
    border-color: #d7dce6;
  }
  .hero__btn--secondary:hover {
    background-color: #f5f7fb;
    border-color: #c2c9d8;
    transform: translateY(-1px);
  }

  @media (max-width: 480px) {
    .hero { min-height: 70vh; padding: 3rem 1.25rem; }
    .hero__actions { flex-direction: column; align-items: center; }
    .hero__btn { width: 100%; max-width: 280px; text-align: center; }
  }

/* ==========================================================================
   Left-aligned content (marketing site)
   The template centers the title block on no-sidebar article pages and
   constrains it with auto margins; we prefer left-aligned copy site-wide.
   ========================================================================== */
.item-page,
.blog {
  text-align: left;
}
.item-page.layout-default.no-sidebar .top-article-info,
.item-page.layout-default.no-sidebar .bottom-article-info {
  text-align: left;
  margin-left: 0;
  max-width: none;
}
.item-page.layout-default.no-sidebar .top-article-info .article-aside,
.item-page.layout-default.no-sidebar .top-article-info .article-info {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

/* ==========================================================================
   Marketing header — charcoal utility bar + blue brand header
   (echoes the old Trevor Bice Webdesign identity and ties to the portal shell).
   Scoped to the marketing site only (portal uses body.layout-mothership).
   ========================================================================== */
:root {
  --mk-charcoal: #1d2327;   /* matches the portal rail */
  --mk-blue: #2f80bf;        /* brand header blue — tweak to taste */
  --mk-slate: #3b4655;       /* desaturated blue-grey footer */
}

/* Two-tone overscroll (rubber-band): the root background-color fills the
   overscroll strips (gradients don't paint out there). Base = charcoal like the
   top bar; a tiny script swaps it to slate once you're in the lower half so the
   bottom bounce matches the footer. Marketing site only. */
html:has(body:not(.layout-mothership)) {
  background-color: var(--mk-charcoal);
}

/* ---- Charcoal utility bar ---- */
body:not(.layout-mothership) #t4-topbar {
  background: var(--mk-charcoal);
  color: #c3c4c7;
  font-size: 14px;
}
body:not(.layout-mothership) #t4-topbar .topbar-wrap { min-height: 26px; }
body:not(.layout-mothership) #t4-topbar .nav-link,
body:not(.layout-mothership) #t4-topbar a,
body:not(.layout-mothership) #t4-topbar .menu-item-title { font-size: 14px; }
body:not(.layout-mothership) #t4-topbar .nav-link { padding: 3px 10px; }
body:not(.layout-mothership) #t4-topbar a,
body:not(.layout-mothership) #t4-topbar .nav-link { color: #c3c4c7; text-decoration: none; }
body:not(.layout-mothership) #t4-topbar a:hover,
body:not(.layout-mothership) #t4-topbar .nav-link:hover { color: #fff; }
body:not(.layout-mothership) #t4-topbar .nav-item.current > .nav-link,
body:not(.layout-mothership) #t4-topbar .nav-item.active > .nav-link { color: #fff; }
/* GitHub utility link: mark icon before the label (icon inherits colour, so the
   grey→white hover still works). Icon + "Github" on tablet/desktop; icon only on
   phones. align-items:center keeps the icon lined up with the text. */
body:not(.layout-mothership) #t4-topbar a[href*="github"] {
  display: inline-flex; align-items: center; gap: 6px;
}
body:not(.layout-mothership) #t4-topbar a[href*="github"]::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%200C3.58%200%200%203.58%200%208c0%203.54%202.29%206.53%205.47%207.59.4.07.55-.17.55-.38%200-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01%201.08.58%201.23.82.72%201.21%201.87.87%202.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95%200-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12%200%200%20.67-.21%202.2.82.64-.18%201.32-.27%202-.27.68%200%201.36.09%202%20.27%201.53-1.04%202.2-.82%202.2-.82.44%201.1.16%201.92.08%202.12.51.56.82%201.27.82%202.15%200%203.07-1.87%203.75-3.65%203.95.29.25.54.73.54%201.48%200%201.07-.01%201.93-.01%202.2%200%20.21.15.46.55.38A8.01%208.01%200%200016%208c0-4.42-3.58-8-8-8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%200C3.58%200%200%203.58%200%208c0%203.54%202.29%206.53%205.47%207.59.4.07.55-.17.55-.38%200-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01%201.08.58%201.23.82.72%201.21%201.87.87%202.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95%200-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12%200%200%20.67-.21%202.2.82.64-.18%201.32-.27%202-.27.68%200%201.36.09%202%20.27%201.53-1.04%202.2-.82%202.2-.82.44%201.1.16%201.92.08%202.12.51.56.82%201.27.82%202.15%200%203.07-1.87%203.75-3.65%203.95.29.25.54.73.54%201.48%200%201.07-.01%201.93-.01%202.2%200%20.21.15.46.55.38A8.01%208.01%200%200016%208c0-4.42-3.58-8-8-8z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* Phones: icon only — hide the "Github" label (out-specifies .menu-item-title). */
@media (max-width: 767.98px) {
  body:not(.layout-mothership) #t4-topbar a[href*="github"] { gap: 0; font-size: 0; }
  body:not(.layout-mothership) #t4-topbar a[href*="github"] .menu-item-title { font-size: 0; }
}

/* ---- Blue brand header ---- */
body:not(.layout-mothership) #t4-header {
  background: var(--mk-blue);
  border-bottom: 1px solid rgba(255, 255, 255, .22);   /* pencil line */
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);           /* soft drop shadow */
  position: relative;                                   /* lift above the section below */
  z-index: 10;                                          /* so the shadow shows over the content */
}
body:not(.layout-mothership) #t4-header .header-wrap { min-height: 80px; padding-top: 0; padding-bottom: 0; }
/* Right-align the main menu (override T4's centering) */
body:not(.layout-mothership) #t4-header .t4-navbar {
  margin-left: auto !important;
  margin-right: 0 !important;
}
body:not(.layout-mothership) #t4-header .t4-megamenu .navbar-nav {
  justify-content: flex-end;
}
/* Nav + header links white on blue (flat menu, no dropdown panels to worry about) */
body:not(.layout-mothership) #t4-header a,
body:not(.layout-mothership) #t4-header .nav-link { color: #fff; }
/* Quick one-shot bump on hover for the main menu items (nudges up, then resets) */
@keyframes mk-nav-bump { 45% { transform: translateY(-2px); } }
body:not(.layout-mothership) #t4-header .navbar-nav > .nav-item > .nav-link { transition: color .16s ease; }
body:not(.layout-mothership) #t4-header .navbar-nav > .nav-item > .nav-link:hover { animation: mk-nav-bump .18s ease; }
body:not(.layout-mothership) #t4-header .nav-link:hover,
body:not(.layout-mothership) #t4-header a:hover { color: rgba(255, 255, 255, .78); }
/* Active item: underline instead of bold (no layout shift) */
body:not(.layout-mothership) #t4-header .nav-item.current > .nav-link,
body:not(.layout-mothership) #t4-header .nav-item.active > .nav-link {
  color: #fff; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
/* Mobile toggles visible on blue */
body:not(.layout-mothership) #t4-header .navbar-toggler,
body:not(.layout-mothership) #t4-header .toggle-bars,
body:not(.layout-mothership) #t4-header .offcanvas-toggle { color: #fff; border-color: rgba(255,255,255,.4); }
/* Off-canvas (mobile) menu header logo — template caps it at 2rem and pads the
   header 0.75rem/2rem; enlarge the logo and tighten the surrounding padding.
   A light-grey pencil line (fading right) separates it from the menu. */
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-header {
  padding: 0.4rem 1rem;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, #d0d4d9, rgba(208, 212, 217, 0)) 1;
}
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-header a img { max-height: 5rem; }
/* The off-canvas panel is light, so use the color logo (the white site logo is invisible
   here). Constrain it (and anything else) so nothing extends past the panel width. */
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-header .logo-img {
  content: url("/templates/ja_purity_iv/images/logo-color.svg");
}
body:not(.layout-mothership) .t4-offcanvas img { max-width: 100%; height: auto; }
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-header,
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-body { overflow-x: hidden; }
/* Tighten the gap between the logo header and the first menu item (was 1rem). */
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-body { padding-top: 0.35rem; }
/* Off-canvas menu items: make the whole row a full-width tap target, with a
   light separator between each top-level item. */
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-body .navbar > .navbar-nav > .nav-item { border-bottom: 1px solid #e6e8eb; }
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-body .navbar > .navbar-nav > .nav-item:last-child { border-bottom: 0; }
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-body .navbar .nav-item { width: 100%; }
body:not(.layout-mothership) .t4-offcanvas .t4-off-canvas-body .navbar .nav-link {
  display: block; width: 100%; padding-left: 1rem; padding-right: 1rem;
}

/* ---- White logo on the blue band (fills the header height) ---- */
body:not(.layout-mothership) #t4-header .navbar-brand .d-dark { display: none !important; }
body:not(.layout-mothership) #t4-header .navbar-brand,
body:not(.layout-mothership) #t4-header .navbar-brand > a,
body:not(.layout-mothership) #t4-header .navbar-brand .d-light {
  display: flex;
  align-items: center;
  height: 80px;                 /* matches the header height */
  margin: 0;
  padding: 0;
}
body:not(.layout-mothership) #t4-header .navbar-brand .d-light .logo-img {
  content: url("/templates/ja_purity_iv/images/logo-white.svg");
  width: auto;
  height: 100%;                 /* fill the header height */
}

/* ---- Blue pencil line under the breadcrumbs ---- */
body:not(.layout-mothership) #t4-breadcrumbs,
body:not(.layout-mothership) .t4-breadcrumbs {
  border-bottom: 1px solid rgba(29, 122, 214, .45);
}

/* ---- Right-sidebar rotating testimonials (marketing; desktop/tablet only) ----
   Visibility is handled by Bootstrap's d-none d-md-block on the <aside>. */
body:not(.layout-mothership) .mk-testimonials {
  position: sticky; top: 88px;
  background: #fff; border: 1px solid #e3e6ea; border-radius: 12px;
  padding: 22px 20px 18px;
}
body:not(.layout-mothership) .mk-testimonials__title {
  margin: 0 0 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #8a929c; font-weight: 700;
}
body:not(.layout-mothership) .mk-testimonials__stage { position: relative; min-height: 210px; }
body:not(.layout-mothership) .mk-testimonial {
  position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
body:not(.layout-mothership) .mk-testimonial.is-active { position: relative; opacity: 1; visibility: visible; }
body:not(.layout-mothership) .mk-testimonial blockquote {
  margin: 0 0 14px; padding: 0; border: 0; font-size: 15px; line-height: 1.6; color: #2b2f36;
}
body:not(.layout-mothership) .mk-testimonial blockquote::before {
  content: "\201C"; color: var(--mk-blue, #2f80bf); font-size: 30px; line-height: 0;
  vertical-align: -10px; margin-right: 3px; font-weight: 700;
}
body:not(.layout-mothership) .mk-testimonial figcaption {
  display: flex; flex-direction: column; gap: 2px;
  background: none; padding: 0; margin: 0; text-shadow: none; /* template styles bare <figcaption> with a dark bg + text-shadow */
}
body:not(.layout-mothership) .mk-testimonial__name { font-weight: 700; font-size: 14px; color: #1d2327; }
body:not(.layout-mothership) .mk-testimonial__role { font-size: 12.5px; color: #6b7480; }
body:not(.layout-mothership) .mk-testimonials__dots { display: flex; gap: 6px; margin-top: 16px; }
body:not(.layout-mothership) .mk-dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
  background: #d3d7dd; cursor: pointer; transition: background .2s;
}
body:not(.layout-mothership) .mk-dot.is-active { background: var(--mk-blue, #2f80bf); }

/* ===== Services landing page ===== */
body:not(.layout-mothership) .svc-page {
  --svc-blue: #2f80bf; --svc-ink: #1d2733; --svc-muted: #5b6b7b; --svc-border: #e3e8ee;
}
body:not(.layout-mothership) .svc-eyebrow {
  color: var(--svc-blue); font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px;
}
body:not(.layout-mothership) .svc-center { text-align: center; }
body:not(.layout-mothership) .svc-h2 {
  text-align: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 30px; color: var(--svc-ink); margin: 0 0 40px;
}
/* hero */
body:not(.layout-mothership) .svc-hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 26px 0 56px;
}
body:not(.layout-mothership) .svc-hero__title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 42px; line-height: 1.1;
  color: var(--svc-ink); margin: 0 0 18px;
}
body:not(.layout-mothership) .svc-hero__lead { color: var(--svc-muted); font-size: 16px; line-height: 1.6; max-width: 34em; margin: 0 0 26px; }
body:not(.layout-mothership) .svc-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
body:not(.layout-mothership) .svc-hero__art svg { width: 100%; height: auto; display: block; }
/* buttons */
body:not(.layout-mothership) .svc-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background .15s, border-color .15s, gap .15s, transform .15s;
}
body:not(.layout-mothership) .svc-btn--primary { background: var(--svc-blue); color: #fff; }
body:not(.layout-mothership) .svc-btn--primary:hover { background: #256199; color: #fff; }
body:not(.layout-mothership) .svc-btn--ghost { background: #fff; color: var(--svc-ink); border: 1px solid var(--svc-border); }
body:not(.layout-mothership) .svc-btn--ghost:hover { border-color: var(--svc-blue); color: var(--svc-blue); }
body:not(.layout-mothership) .svc-btn--soft { background: #eaf1fb; color: var(--svc-blue); }
body:not(.layout-mothership) .svc-btn--soft:hover { background: #dbeafe; }
body:not(.layout-mothership) .svc-btn--white { background: #fff; color: var(--svc-blue); }
body:not(.layout-mothership) .svc-btn--white:hover { background: #eef5fc; }
/* core services */
body:not(.layout-mothership) .svc-section { padding: 44px 0; }
body:not(.layout-mothership) .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
body:not(.layout-mothership) .svc-card {
  display: block; background: #fff; border: 1px solid var(--svc-border); border-radius: 12px;
  padding: 26px 22px; text-decoration: none; box-shadow: 0 1px 3px rgba(20, 50, 90, .05);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
body:not(.layout-mothership) .svc-card:hover { border-color: #cfe0f2; box-shadow: 0 8px 24px rgba(20, 50, 90, .08); transform: translateY(-3px); }
body:not(.layout-mothership) .svc-card__icon { color: var(--svc-blue); display: inline-flex; margin-bottom: 16px; }
body:not(.layout-mothership) .svc-card__title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--svc-ink); margin: 0 0 10px; line-height: 1.25; }
body:not(.layout-mothership) .svc-card__desc { color: var(--svc-muted); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
body:not(.layout-mothership) .svc-card__more { color: var(--svc-blue); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
body:not(.layout-mothership) .svc-card:hover .svc-card__more { gap: 9px; }
/* help section (full-bleed light band) */
body:not(.layout-mothership) .svc-help { width: 100vw; margin-left: calc(50% - 50vw); background: #f2f8fe; padding: 56px 0; }
body:not(.layout-mothership) .svc-help__inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
body:not(.layout-mothership) .svc-help__grid { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 34px; }
body:not(.layout-mothership) .svc-help__item { text-align: center; padding: 4px 18px; position: relative; }
body:not(.layout-mothership) .svc-help__item + .svc-help__item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: #d7e3f0; }
body:not(.layout-mothership) .svc-help__icon { color: var(--svc-blue); display: inline-flex; margin-bottom: 14px; }
body:not(.layout-mothership) .svc-help__q { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; color: var(--svc-ink); margin: 0 0 8px; }
body:not(.layout-mothership) .svc-help__a { color: var(--svc-muted); font-size: 13.5px; line-height: 1.5; margin: 0; }
/* testimonial band */
body:not(.layout-mothership) .svc-quote { padding: 50px 0; }
body:not(.layout-mothership) .mk-testimonials--band {
  position: static; max-width: 820px; margin: 0 auto; padding: 0; background: none; border: 0; border-radius: 0;
}
body:not(.layout-mothership) .mk-testimonials--band .mk-testimonials__stage { min-height: 150px; }
body:not(.layout-mothership) .mk-testimonials--band .mk-testimonial { text-align: center; }
body:not(.layout-mothership) .mk-testimonials--band .mk-testimonial blockquote { font-size: 18px; line-height: 1.65; color: var(--svc-ink); margin: 0 auto 16px; max-width: 46em; }
body:not(.layout-mothership) .mk-testimonials--band .mk-testimonial blockquote::before { font-size: 40px; vertical-align: -14px; }
body:not(.layout-mothership) .mk-testimonials--band .mk-testimonial figcaption { align-items: center; }
body:not(.layout-mothership) .mk-testimonials--band .mk-testimonial__name { font-size: 15px; }
body:not(.layout-mothership) .mk-testimonials--band .mk-testimonials__dots { justify-content: center; margin-top: 20px; }

/* ---- service detail pages ---- */
body:not(.layout-mothership) .svc-hero__badge {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 4 / 3; border-radius: 18px;
  background: linear-gradient(150deg, #eaf1fb, #dbeafe);
}
body:not(.layout-mothership) .svc-hero__badge svg { width: 46%; height: auto; color: var(--svc-blue); }
body:not(.layout-mothership) .svc-lead-body { max-width: 44em; margin: 0 auto; }
body:not(.layout-mothership) .svc-lead-body p { color: var(--svc-muted); font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
body:not(.layout-mothership) .svc-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
body:not(.layout-mothership) .svc-feature {
  display: flex; gap: 14px; background: #fff; border: 1px solid var(--svc-border);
  border-radius: 12px; padding: 18px 20px;
}
body:not(.layout-mothership) .svc-feature__check {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: #eaf1fb;
  color: var(--svc-blue); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
body:not(.layout-mothership) .svc-feature__title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--svc-ink); margin: 0 0 5px; line-height: 1.3; }
body:not(.layout-mothership) .svc-feature__desc { color: var(--svc-muted); font-size: 14px; line-height: 1.55; margin: 0; }
body:not(.layout-mothership) .svc-fit { list-style: none; margin: 0 auto; padding: 0; max-width: 40em; display: grid; gap: 12px; }
body:not(.layout-mothership) .svc-fit li { position: relative; padding-left: 30px; color: var(--svc-ink); font-size: 16px; line-height: 1.5; }
body:not(.layout-mothership) .svc-fit li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--svc-blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / 12px no-repeat;
}
/* ---- homepage sections ---- */
body:not(.layout-mothership) .home-sections .svc-section { padding: 40px 0; }
body:not(.layout-mothership) .home-lead { max-width: 40em; margin: 0 auto; text-align: center; color: var(--svc-muted); font-size: 17px; line-height: 1.7; }
body:not(.layout-mothership) .home-band {
  width: 100vw; margin-left: calc(50% - 50vw); background: #f2f8fe;
  border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
  box-shadow: inset 0 8px 14px -14px rgba(20, 50, 90, .18), inset 0 -8px 14px -14px rgba(20, 50, 90, .18);
}
body:not(.layout-mothership) .home-band > .svc-section { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
body:not(.layout-mothership) .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
body:not(.layout-mothership) .pf-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--svc-border);
  border-radius: 12px; overflow: hidden; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
body:not(.layout-mothership) .pf-card:hover { border-color: #cfe0f2; box-shadow: 0 8px 24px rgba(20, 50, 90, .08); transform: translateY(-3px); }
body:not(.layout-mothership) .pf-card__thumb {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; color: rgba(255, 255, 255, .92); letter-spacing: .02em;
}
body:not(.layout-mothership) .pf-card__thumb.g1 { background: linear-gradient(135deg, #2f80bf, #1f5f93); }
body:not(.layout-mothership) .pf-card__thumb.g2 { background: linear-gradient(135deg, #3a97a6, #1f6f7d); }
body:not(.layout-mothership) .pf-card__thumb.g3 { background: linear-gradient(135deg, #5b6fb0, #3a4a86); }
body:not(.layout-mothership) .pf-card__thumb.g4 { background: linear-gradient(135deg, #c07a3e, #9a5a26); }
body:not(.layout-mothership) .pf-card__thumb.g5 { background: linear-gradient(135deg, #4a9e6f, #2f7d52); }
body:not(.layout-mothership) .pf-card__thumb.g6 { background: linear-gradient(135deg, #8a6bb0, #5f4a86); }
/* Real gallery cover (JoomGallery thumbnail) instead of a gradient monogram. */
body:not(.layout-mothership) .pf-card__thumb--img { background-size: cover; background-position: center top; background-repeat: no-repeat; }

/* JoomGallery pages: the T4 masthead prints the menu title in an awkward band ABOVE
   the breadcrumbs. Suppress it there and use JoomGallery's own in-content heading
   (below the breadcrumbs) as a proper, styled page title. */
body.com_joomgallery .t4-masthead { display: none; }
body.com_joomgallery .com-joomgallery-gallery > .page-header { text-align: center; margin: 8px 0 26px; }
body.com_joomgallery .com-joomgallery-gallery > .page-header h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px;
  line-height: 1.2; color: #1d2733; margin: 0;
}

/* ---- About page: photo + flowing paragraphs, no section headings ---- */
body:not(.layout-mothership) .about-page { max-width: 840px; margin: 0 auto; }
body:not(.layout-mothership) .about-page::after { content: ""; display: block; clear: both; }
body:not(.layout-mothership) .about-figure { float: left; width: 300px; margin: 4px 34px 22px 0; }
body:not(.layout-mothership) .about-figure img { width: 100%; height: auto; display: block; border-radius: 14px; }
body:not(.layout-mothership) .about-ph {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5;
  border-radius: 14px; background: linear-gradient(150deg, #eaf1fb, #dbeafe); color: #7fa3c8;
}
body:not(.layout-mothership) .about-ph svg { width: 42%; height: auto; }
body:not(.layout-mothership) .about-lead {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 21px;
  line-height: 1.5; color: #1d2733; margin: 0 0 20px;
}
body:not(.layout-mothership) .about-page p { font-size: 17px; line-height: 1.75; color: #3a4a5a; margin: 0 0 18px; }
body:not(.layout-mothership) .about-page .about-cta a { color: var(--mk-blue, #2f80bf); font-weight: 600; text-decoration: none; }

/* Footer bottom bar: résumé link (left) opposite the copyright (right). */
body:not(.layout-mothership) .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; }
body:not(.layout-mothership) .footer-bottom .footer-copyright { margin: 0; }
body:not(.layout-mothership) .footer-resume { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, .7); text-decoration: none; }
body:not(.layout-mothership) .footer-resume:hover { color: #fff; }
body:not(.layout-mothership) .footer-resume svg { width: 13px; height: 13px; }
body:not(.layout-mothership) .footer-legal { display: inline-flex; align-items: center; gap: 8px; }
body:not(.layout-mothership) .footer-legal a { color: rgba(255, 255, 255, .7); text-decoration: none; }
body:not(.layout-mothership) .footer-legal a:hover { color: #fff; }
/* Brand column: short tagline + Get in touch link */
body:not(.layout-mothership) .footer-tagline { max-width: 24em; }
body:not(.layout-mothership) .footer-cta { color: #fff; font-weight: 600; text-decoration: none; }
body:not(.layout-mothership) .footer-cta:hover { text-decoration: underline; }
@media (max-width: 640px) {
  body:not(.layout-mothership) .about-figure { float: none; width: 100%; max-width: 320px; margin: 0 auto 24px; }
}
body:not(.layout-mothership) .pf-card__body { padding: 18px 20px 20px; flex: 1 1 auto; display: flex; flex-direction: column; }
body:not(.layout-mothership) .pf-card__tag { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--svc-blue); margin: 0 0 8px; }
body:not(.layout-mothership) .pf-card__title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--svc-ink); margin: 0 0 8px; line-height: 1.25; }
body:not(.layout-mothership) .pf-card__desc { color: var(--svc-muted); font-size: 14px; line-height: 1.55; margin: 0 0 16px; flex: 1 1 auto; }
body:not(.layout-mothership) .pf-card__more { color: var(--svc-blue); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
body:not(.layout-mothership) .pf-card.is-placeholder { border-style: dashed; }
body:not(.layout-mothership) .pf-card.is-placeholder .pf-card__thumb { background: #eef2f7; color: #9fb0c2; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 991.98px) { body:not(.layout-mothership) .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { body:not(.layout-mothership) .pf-grid { grid-template-columns: 1fr; } }
/* The CTA below reuses the shared .cta-band component (centered, taller). */
/* responsive */
@media (max-width: 991.98px) {
  body:not(.layout-mothership) .svc-grid { grid-template-columns: repeat(2, 1fr); }
  body:not(.layout-mothership) .svc-help__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  body:not(.layout-mothership) .svc-help__item:nth-child(odd)::before { display: none; }
}
@media (max-width: 767.98px) {
  body:not(.layout-mothership) .svc-hero { grid-template-columns: 1fr; }
  body:not(.layout-mothership) .svc-hero__art { order: -1; max-width: 320px; margin: 0 auto; }
  body:not(.layout-mothership) .svc-hero__title { font-size: 32px; }
  body:not(.layout-mothership) .svc-grid { grid-template-columns: 1fr; }
  body:not(.layout-mothership) .svc-help__grid { grid-template-columns: 1fr; }
  body:not(.layout-mothership) .svc-help__item::before { display: none !important; }
  body:not(.layout-mothership) .svc-features { grid-template-columns: 1fr; }
  body:not(.layout-mothership) .svc-hero__badge { max-width: 300px; margin: 0 auto; }
}

/* ===== Donate page ===== */
body:not(.layout-mothership) .don-page { max-width: 780px; margin: 0 auto; text-align: center; padding: 30px 0 50px; }
body:not(.layout-mothership) .don-eyebrow { color: var(--mk-blue, #2f80bf); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
body:not(.layout-mothership) .don-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 38px; line-height: 1.15; color: #1d2733; margin: 0 0 16px; }
body:not(.layout-mothership) .don-lead { color: #5b6b7b; font-size: 17px; line-height: 1.65; max-width: 38em; margin: 0 auto 34px; }
body:not(.layout-mothership) .don-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
body:not(.layout-mothership) .don-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 24px 20px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
body:not(.layout-mothership) .don-card:hover { border-color: #cfe0f2; box-shadow: 0 8px 24px rgba(20, 50, 90, .08); transform: translateY(-3px); }
body:not(.layout-mothership) .don-card__icon { color: var(--mk-blue, #2f80bf); }
body:not(.layout-mothership) .don-card__title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: #1d2733; }
body:not(.layout-mothership) .don-card__desc { color: #5b6b7b; font-size: 14px; line-height: 1.5; }
body:not(.layout-mothership) .don-foot { color: #5b6b7b; font-size: 15px; margin: 34px 0 0; }
body:not(.layout-mothership) .don-foot a { color: var(--mk-blue, #2f80bf); font-weight: 600; }
@media (max-width: 767.98px) {
  body:not(.layout-mothership) .don-cards { grid-template-columns: 1fr; }
  body:not(.layout-mothership) .don-title { font-size: 30px; }
}

/* ---- Call-to-action band (full-bleed blue, above the footer) ---- */
body:not(.layout-mothership) .cta-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(120deg, var(--mk-blue), #1f5f93);
  color: #fff;
  text-align: center;
  padding: 56px 20px;
  box-sizing: border-box;
}
body:not(.layout-mothership) .cta-band__inner { max-width: 720px; margin: 0 auto; }
body:not(.layout-mothership) .cta-band__title { color: #fff; margin: 0 0 8px; font-size: 28px; line-height: 1.2; }
body:not(.layout-mothership) .cta-band__text { color: rgba(255, 255, 255, .9); margin: 0 0 24px; font-size: 17px; }
body:not(.layout-mothership) .cta-band__btn {
  display: inline-block;
  background: #fff;
  color: var(--mk-blue);
  padding: 13px 30px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
body:not(.layout-mothership) .cta-band__btn:hover { background: var(--mk-charcoal); color: #fff; }

/* ---- Slate footer (desaturated blue-grey), charcoal copyright strip ---- */
body:not(.layout-mothership) #t4-footnav {
  background: var(--mk-slate);
  color: #c9ced6;
  border-top: none;
  box-shadow: inset 0 8px 9px -8px rgba(0, 0, 0, .4);   /* light drop shadow along the top */
}
body:not(.layout-mothership) #t4-footer {
  background: var(--mk-charcoal);                        /* matches the top bar */
  color: #c9ced6;
  border-top: none;
  text-align: right;                                     /* copyright sits far right */
}
body:not(.layout-mothership) #t4-footer .footer-copyright { margin: 0; }
body:not(.layout-mothership) #t4-footnav a,
body:not(.layout-mothership) #t4-footer a { color: #c9ced6; text-decoration: none; }
body:not(.layout-mothership) #t4-footnav a:hover,
body:not(.layout-mothership) #t4-footer a:hover { color: #fff; }
body:not(.layout-mothership) #t4-footnav .module-title,
body:not(.layout-mothership) #t4-footnav .module-title span,
body:not(.layout-mothership) #t4-footnav h3 { color: #fff; }
/* no divider between the slate columns and the charcoal copyright strip */
body:not(.layout-mothership) #t4-footer { border-top: none !important; }
/* Footer logo: white vector SVG, softened so it blends on the slate */
body:not(.layout-mothership) #t4-footnav img { opacity: .9; }
/* Services column heading links to /services (rendered by the footer template so it
   matches the other module-title headings). Company/Clients stay plain module titles. */
body:not(.layout-mothership) #t4-footnav .footer-svc-title { margin: 0; }
body:not(.layout-mothership) #t4-footnav .footer-svc-title a { color: #fff; text-decoration: none; }
body:not(.layout-mothership) #t4-footnav .footer-svc-title a:hover { color: #fff; text-decoration: underline; }
/* Mobile: every footer column full width and centered (incl. the utility bar). */
@media (max-width: 767.98px) {
  body:not(.layout-mothership) #t4-footnav { text-align: center; }
  body:not(.layout-mothership) #t4-footnav .footer-tagline { max-width: none; }
  /* Footer menus are flex lists that shrink to content and sit left; make them block
     and full width so their items center with the rest of the column. */
  body:not(.layout-mothership) #t4-footnav .navbar-nav,
  body:not(.layout-mothership) #t4-footnav .nav { display: block; width: 100%; }
  /* Bigger tap targets: pad each footer link, and space out the stacked columns. */
  body:not(.layout-mothership) #t4-footnav .navbar-nav a,
  body:not(.layout-mothership) #t4-footnav .nav a { display: block; padding: 11px 8px; }
  body:not(.layout-mothership) #t4-footnav .row > [class*="col"] { margin-bottom: 26px; }
  body:not(.layout-mothership) #t4-footer { text-align: center; }
  /* Stack the utility bar: résumé / Privacy·Terms / copyright each full width, spaced out. */
  body:not(.layout-mothership) #t4-footer .footer-bottom { flex-direction: column; gap: 14px; padding: 6px 0; }
  body:not(.layout-mothership) #t4-footer .footer-bottom > * { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Contact page — 50/50 split (form left, text right), form fills its column
   ========================================================================== */
.contact-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  max-width: 960px;      /* don't stretch full width now that the sidebar is gone */
  margin: 0 auto;
}
.contact-split__form,
.contact-split__text {
  flex: 1 1 0;
  min-width: 0;          /* let the form column actually shrink/fill, not size to content */
}
.contact-split__form .formContainer {
  width: 100%;
  max-width: none;
}
.contact-split__form .form-control,
.contact-split__form .rsform-input-box,
.contact-split__form .rsform-text-box,
.contact-split__form textarea {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
.contact-split__form textarea { min-height: 200px; }
/* General service-area line (Contact page + footer). */
body:not(.layout-mothership) .contact-location { display: flex; align-items: center; gap: 7px; color: #5b6b7b; font-size: 14.5px; margin-top: 10px; }
body:not(.layout-mothership) .contact-location svg { color: #2f80bf; flex: 0 0 auto; }
body:not(.layout-mothership) #t4-footnav .footer-loc { font-size: 13px; color: #9aa2ab; margin: 6px 0 0; }
/* Checkboxes/radios use appearance:none but get no checked mark here — restore a
   visible brand-blue check / dot so selections read clearly. */
.contact-split__form .rsform-checkbox.form-check-input,
.contact-split__form .rsform-radio.form-check-input { width: 1.05rem; height: 1.05rem; margin-top: .2rem; }
.contact-split__form .rsform-checkbox.form-check-input:checked {
  background-color: #2f80bf !important; border-color: #2f80bf !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: .78rem !important;
}
.contact-split__form .rsform-radio.form-check-input:checked {
  background-color: #2f80bf !important; border-color: #2f80bf !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.2' fill='%23fff'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important; background-position: center !important;
}
@media (max-width: 767.98px) {
  .contact-split { gap: 24px; }
  .contact-split__form,
  .contact-split__text { flex: 1 1 100%; }
}

/* ==========================================================================
   MOTHERSHIP CLIENT PORTAL — Mothership shell
   Scoped to body.layout-mothership (T4 adds this class for the `mothership`
   layout profile), so nothing here affects the marketing site.
   ========================================================================== */
body.layout-mothership {
  --ms-rail-bg: #1d2327;
  --ms-rail-bg-hover: #2c3338;
  --ms-rail-text: #c3c4c7;
  --ms-rail-text-hover: #ffffff;
  --ms-accent: #2271b1;
  --ms-content-bg: #f0f0f1;
  --ms-surface: #ffffff;
  --ms-border: #dcdcde;
  --ms-text: #1d2327;
  --ms-text-muted: #646970;
  --ms-rail-w: 220px;

  margin: 0;
  min-height: 100vh;                        /* fill the viewport so the dark root
                                               never shows through below content */
  padding-left: var(--ms-rail-w);           /* content clears the fixed rail */
  background: var(--ms-content-bg);
  color: var(--ms-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Neutralise any leftover marketing chrome if a module slips into the layout. */
body.layout-mothership #t4-topbar,
body.layout-mothership .t4-header,
body.layout-mothership #t4-footer,
body.layout-mothership .t4-footnav { display: none !important; }

body.layout-mothership .ms-shell-section > .container-none,
body.layout-mothership .ms-shell-section .row { margin: 0; }

/* com_content articles (e.g. Support) render inside their own centered
   .container with extra padding. Flatten it so the article aligns with the rail
   exactly like the component views. */
body.layout-mothership .item-page { padding: 0; }
body.layout-mothership .item-page > .container {
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* T4 lays the article body inside a Bootstrap .row / .col-md-9 (with an empty
   .col-md-3 sidebar slot and gutter padding), which indents it more than the
   flush component views. Flatten the grid so Support aligns like the rest. */
body.layout-mothership .item-page .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
body.layout-mothership .item-page .bottom-article-info [class*="col-"] { padding-left: 0; padding-right: 0; }
body.layout-mothership .item-page .bottom-article-info .col-md-9 { flex: 0 0 100%; max-width: 100%; }
body.layout-mothership .item-page .bottom-article-info .siderbar-article,
body.layout-mothership .item-page .bottom-article-info .col-md-3 { display: none; }
body.layout-mothership .item-page .page-header { margin-top: 0; }

/* ---- Left rail ---- */
body.layout-mothership .ms-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  /* 100dvh tracks the mobile URL bar so scrolling doesn't flash a gap at the
     bottom of the rail; falls back to top/bottom:0 where dvh is unsupported. */
  height: 100dvh;
  width: var(--ms-rail-w);
  background: var(--ms-rail-bg);
  color: var(--ms-rail-text);
  display: flex;
  flex-direction: column;
  z-index: 1000;
}
body.layout-mothership .ms-brand {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  min-height: 56px;                 /* match the top bar height so it reads as one strip */
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.layout-mothership .ms-brand-link { display: block; line-height: 0; text-decoration: none; }
body.layout-mothership .ms-brand-logo {
  display: block; width: 100%; max-width: 100%; height: auto;
}
body.layout-mothership .ms-brand-tagline { font-size: 11px; line-height: 1.3; color: var(--ms-rail-text); }
body.layout-mothership .ms-brand-tagline strong { color: #fff; font-weight: 700; }
body.layout-mothership .ms-nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; }
body.layout-mothership .ms-nav-list { list-style: none; margin: 0; padding: 0; }
body.layout-mothership .ms-nav-item a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; color: var(--ms-rail-text); text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease;
}
body.layout-mothership .ms-nav-item a:hover { background: var(--ms-rail-bg-hover); color: var(--ms-rail-text-hover); }
body.layout-mothership .ms-nav-item.is-active a { background: var(--ms-accent); color: #fff; border-left-color: #fff; }
body.layout-mothership .ms-ico { flex: 0 0 auto; }
body.layout-mothership .ms-sidebar-foot { border-top: 1px solid rgba(255,255,255,.08); padding: 8px 0; }

/* ---- Content canvas ---- */
/* The rail is position:fixed, so collapse its column to zero width (do NOT use
   display:none — that would hide the fixed sidebar it contains). */
body.layout-mothership .ms-rail-col {
  flex: 0 0 0 !important; width: 0 !important; max-width: 0 !important;
  padding: 0 !important; margin: 0 !important;
}

/* Collapse T4's stacked wrappers/gutters so content sits flush after the rail,
   with a single intentional 24px of padding (not rail + wrapper + col + own). */
body.layout-mothership .t4-wrapper,
body.layout-mothership .t4-content,
body.layout-mothership .t4-content-inner {
  padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important;
}
body.layout-mothership .ms-shell-section,
body.layout-mothership .ms-shell-section > .t4-row.row { margin: 0 !important; --bs-gutter-x: 0 !important; }

body.layout-mothership .ms-content-col {
  flex: 1 1 100%; max-width: 100%; margin: 0;
  /* min-width:0 lets this flex item shrink below its content, and overflow-x
     clips anything wide (a stray table/element) so it can't push the body past
     the viewport and skew the fixed header. */
  min-width: 0; overflow-x: hidden;
  padding: 16px 14px !important;
}
/* Desktop: tighten the gap between the rail and content; tablet & mobile keep
   the comfortable left padding. */
@media (min-width: 1024px) {
  body.layout-mothership .ms-content-col { padding-left: 12px !important; }
}
body.layout-mothership #t4-mainbody h1 { font-size: 22px; margin: 0 0 4px; }
body.layout-mothership #t4-mainbody h2 { font-size: 16px; color: var(--ms-text-muted); font-weight: 500; margin: 0 0 16px; }

/* Light-blue "pencil line" under portal page titles, fading to nothing on the
   right. Portal content renders inside .ms-content-col (not #t4-mainbody). */
body.layout-mothership .ms-content-col h1 {
  padding-bottom: 8px; margin-bottom: 16px; position: relative;
}
body.layout-mothership .ms-content-col h1::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, #1d7ad6 0%, #1d7ad6 75%, rgba(29, 122, 214, 0) 100%);
}
/* A com_content article (e.g. Support) renders its title as an h2 headline, not
   an h1 — give it the same pencil line. */
body.layout-mothership .ms-content-col .page-header h2[itemprop="headline"] {
  position: relative; padding-bottom: 8px; margin-bottom: 16px;
}
body.layout-mothership .ms-content-col .page-header h2[itemprop="headline"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, #1d7ad6 0%, #1d7ad6 75%, rgba(29, 122, 214, 0) 100%);
}

/* Pages whose title shares a row with an action (Tickets): carry the same pencil
   line on the header row so it spans full width, and drop the h1's own line. */
body.layout-mothership .ms-page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding-bottom: 8px; position: relative;
}
body.layout-mothership .ms-page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, #1d7ad6 0%, #1d7ad6 75%, rgba(29, 122, 214, 0) 100%);
}
body.layout-mothership .ms-page-head h1 { margin: 0; padding-bottom: 0; }
body.layout-mothership .ms-page-head h1::after { display: none; }

/* ---- Portal headings: Space Grotesk display face (body stays system font) ---- */
body.layout-mothership h1,
body.layout-mothership h2,
body.layout-mothership h3,
body.layout-mothership h4,
body.layout-mothership h5 {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
}
body.layout-mothership #t4-mainbody h1 { font-weight: 700; }
body.layout-mothership #t4-mainbody h4 { font-weight: 600; }

/* Left rail nav + greeting share the display face — leans into the tech-noir feel
   of the charcoal rail. A hair of tracking gives the short labels presence. */
body.layout-mothership .ms-nav .nav-link,
body.layout-mothership .ms-greeting .login-greeting,
body.layout-mothership .ms-brand-tagline strong,
body.layout-mothership .ms-powered-link strong,
body.layout-mothership .ms-profile,
body.layout-mothership .ms-sidebar-foot .logout-button {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
}

/* ---- DataTables controls on portal list tables ---- */
/* Strip the Bootstrap grid gutters DataTables 2 adds to its layout rows/cells so
   nothing (search, table, info, paging) is inset from the content column. The
   col padding is driven by --bs-gutter-x; zeroing it on the container cascades
   to every col-* inside (col-12, col-md, dt-layout-full, …). */
body.layout-mothership .dt-container { margin-top: 2px; --bs-gutter-x: 0; }
body.layout-mothership .dt-container .dt-layout-row { margin-left: 0; margin-right: 0; }
body.layout-mothership .dt-container .dt-layout-cell,
body.layout-mothership .dt-container .dt-layout-full,
body.layout-mothership .dt-container [class*="col"] { padding-left: 0; padding-right: 0; }
/* …but give the top filter controls (length + search) a little breathing room.
   Placed after the zeroing rule so it wins at equal specificity. */
body.layout-mothership .dt-container .dt-layout-start,
body.layout-mothership .dt-container .dt-layout-end { padding: 10px; }
/* Mobile: let the search box span the full width. */
@media (max-width: 782px) {
  body.layout-mothership .dt-container .dt-layout-end,
  body.layout-mothership .dt-container .dt-search { width: 100%; }
  body.layout-mothership .dt-container .dt-search input { width: 100%; }
}
body.layout-mothership .dt-search input,
body.layout-mothership .dt-length select {
  border: 1px solid var(--ms-border);
  border-radius: 6px; padding: 6px 10px; font-size: 13px;
  background: #fff; color: var(--ms-text);
}
body.layout-mothership .dt-search input:focus,
body.layout-mothership .dt-length select:focus {
  border-color: var(--ms-accent, #2f80bf);
  box-shadow: 0 0 0 2px rgba(47, 128, 191, .25); outline: none;
}
body.layout-mothership .dt-info { color: var(--ms-text-muted); font-size: 12.5px; }
body.layout-mothership .dt-paging .page-link { color: var(--ms-accent, #2f80bf); }
body.layout-mothership .dt-paging .page-item.active .page-link {
  background: var(--ms-accent, #2f80bf); border-color: var(--ms-accent, #2f80bf); color: #fff;
}

/* ---- Ticket drag & drop attachments ---- */
body.layout-mothership .ms-dropzone {
  border: 2px dashed var(--ms-border, #cdd2d8); border-radius: 8px;
  background: #fbfcfd; padding: 18px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
body.layout-mothership .ms-dropzone.is-drag { border-color: var(--ms-accent, #2f80bf); background: #eef5fb; }
body.layout-mothership .ms-dropzone__prompt {
  color: var(--ms-text-muted, #6b7480); font-size: 13.5px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
}
body.layout-mothership .ms-dropzone__prompt strong { color: var(--ms-text, #1d2327); }
body.layout-mothership .ms-dz-browse { color: var(--ms-accent, #2f80bf); text-decoration: underline; }
body.layout-mothership .ms-dropzone__hint { font-size: 12px; opacity: .8; }
body.layout-mothership .ms-dropzone__previews { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
body.layout-mothership .ms-dropzone__previews:empty { margin-top: 0; }
body.layout-mothership .ms-dz-item { position: relative; width: 92px; }
body.layout-mothership .ms-dz-item img {
  width: 92px; height: 70px; object-fit: cover; display: block;
  border: 1px solid var(--ms-border, #e0e0e0); border-radius: 6px; background: #fff;
}
body.layout-mothership .ms-dz-remove {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: #1d2327; color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
body.layout-mothership .ms-dz-name {
  display: block; font-size: 10.5px; color: var(--ms-text-muted, #6b7480); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 92px;
}
body.layout-mothership table {
  width: 100%; border-collapse: collapse; background: var(--ms-surface);
  border: 1px solid var(--ms-border); border-radius: 6px; overflow: hidden;
}
body.layout-mothership th, body.layout-mothership td {
  padding: 10px 14px; border-bottom: 1px solid var(--ms-border); text-align: left;
}
body.layout-mothership th { background: #f6f7f7; font-weight: 600; color: var(--ms-text-muted); }

/* ---- Mobile ---- */
body.layout-mothership .ms-nav-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 1100;
  width: 40px; height: 40px; border: 0; border-radius: 6px;
  background: var(--ms-rail-bg); color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
/* Mobile brand: single gear + wordmark, shown in the charcoal top bar. */
body.layout-mothership .ms-mobrand { display: none; }

@media (max-width: 782px) {
  body.layout-mothership { padding-left: 0; }

  /* Top bar is fixed on mobile (not just sticky) so the hamburger — and the
     menu it opens — stay reachable from any scroll position on the page. */
  body.layout-mothership .ms-topbar-section {
    position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  }
  body.layout-mothership .ms-topbar-section,
  body.layout-mothership .ms-topbar-inner { min-height: 96px; }

  body.layout-mothership .ms-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  body.layout-mothership.ms-nav-open .ms-sidebar { transform: translateX(0); }
  /* Center the hamburger vertically within the taller (96px) bar. */
  body.layout-mothership .ms-nav-toggle { display: inline-flex; top: 28px; }
  body.layout-mothership .ms-content-col,
  body.layout-mothership #t4-mainbody { padding: 112px 12px 16px; }

  /* Brand moves out of the rail and into the top bar: full logo, centered.
     Hamburger stays top-left, so the header reads menu-left / logo-center. */
  body.layout-mothership .ms-brand { display: none; }
  body.layout-mothership .ms-mobrand {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 0; left: 0; right: 0; height: 96px; z-index: 1090;
    text-decoration: none; pointer-events: none; /* taps pass through to the bar/hamburger… */
  }
  /* …except the logo itself, which stays a tappable link. A full-width wrapper +
     flex:0 0 auto keeps the true aspect ratio; the old left:50% wrapper was
     width-constrained to the right half of the screen, so the flex img shrank
     horizontally and looked squished. */
  body.layout-mothership .ms-mobrand img {
    height: 80px; width: auto; max-width: none; flex: 0 0 auto; display: block; pointer-events: auto;
  }
  /* The marketing-site link is dropped on mobile to keep the top bar clean.
     Needs to out-specify the base `.ms-topbar-inner .ms-back-link` rule. */
  body.layout-mothership .ms-topbar-section .ms-topbar-inner .ms-back-link { display: none; }
  /* Rail content clears the fixed top bar when the rail is open. */
  body.layout-mothership .ms-sidebar { padding-top: 96px; }

  /* Logged-out login page: no nav to reach and the logo already sits above the
     login box, so drop the whole mobile header and reclaim its reserved space.
     Scoped to html.ms-guest so the logout page (same view=login, but logged in)
     keeps its header. */
  html.ms-guest body.layout-mothership.view-login .ms-topbar-section,
  html.ms-guest body.layout-mothership.view-login .ms-nav-toggle,
  html.ms-guest body.layout-mothership.view-login .ms-mobrand { display: none; }
  html.ms-guest body.layout-mothership.view-login .ms-content-col,
  html.ms-guest body.layout-mothership.view-login #t4-mainbody { padding-top: 24px; }
}

/* ---- Rail nav driven by mod_menu (T4 Bootstrap navbar markup) ---- */
body.layout-mothership .ms-nav .navbar { padding: 0; display: block; }
body.layout-mothership .ms-nav ul.nav { display: block; margin: 0; padding: 0; width: 100%; }
body.layout-mothership .ms-nav .nav-item { width: 100%; }
body.layout-mothership .ms-nav .nav-link {
  display: flex; align-items: center; gap: 12px; border-radius: 0;
  padding: 11px 16px; color: var(--ms-rail-text); text-decoration: none;
  border-left: 3px solid transparent; transition: background .12s ease, color .12s ease;
}
body.layout-mothership .ms-nav .nav-link:hover { background: var(--ms-rail-bg-hover); color: var(--ms-rail-text-hover); }
body.layout-mothership .ms-nav .nav-item.current > .nav-link,
body.layout-mothership .ms-nav .nav-item.active > .nav-link,
body.layout-mothership .ms-nav .nav-item.ms-active > .nav-link {
  background: var(--ms-accent); color: #fff; border-left-color: #fff;
}
body.layout-mothership .ms-nav .menu-item-title { white-space: nowrap; }
/* Front-end module/menu editing overlays (Joomla/T4) get in the way in the Account
   Center — suppress the floating edit buttons on portal pages only. */
body.layout-mothership .btn.jmodedit,
body.layout-mothership .btn.jfedit-menu { display: none !important; }
/* Action-alert badge (open/unpaid invoices, pending payments) */
body.layout-mothership .ms-nav .ms-badge {
  display: inline-block; margin-left: 8px; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
  border-radius: 100px; background: #e0a100; color: #1d2327; vertical-align: middle;
}
body.layout-mothership .ms-nav .msico::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ms-icon) center / contain no-repeat; mask: var(--ms-icon) center / contain no-repeat;
}
body.layout-mothership .msico-dashboard { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E"); }
body.layout-mothership .msico-clients { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
body.layout-mothership .msico-accounts { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5z'/%3E%3C/svg%3E"); }
body.layout-mothership .msico-projects { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6l2 2h8a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
body.layout-mothership .msico-domains { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-3a15 15 0 0 0-1.2-3.3A8 8 0 0 1 18.9 8zM12 4c.8 1.1 1.5 2.5 1.9 4h-3.8c.4-1.5 1.1-2.9 1.9-4zM4.3 14a8 8 0 0 1 0-4h3.4a17 17 0 0 0 0 4H4.3zm.8 2h3a15 15 0 0 0 1.2 3.3A8 8 0 0 1 5.1 16zm3-8h-3a8 8 0 0 1 4.2-3.3A15 15 0 0 0 8.1 8zM12 20c-.8-1.1-1.5-2.5-1.9-4h3.8c-.4 1.5-1.1 2.9-1.9 4zm2.3-6H9.7a15 15 0 0 1 0-4h4.6a15 15 0 0 1 0 4zm.6 5.3a15 15 0 0 0 1.2-3.3h3a8 8 0 0 1-4.2 3.3zM16.3 14a17 17 0 0 0 0-4h3.4a8 8 0 0 1 0 4h-3.4z'/%3E%3C/svg%3E"); }
body.layout-mothership .msico-proposals { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm2 5h8v1.5H8V7zm0 4h8v1.5H8V11zm0 4h5v1.5H8V15z'/%3E%3C/svg%3E"); }
body.layout-mothership .msico-invoices { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5L14 3.5zM8 13h8v1.5H8V13zm0 3h8v1.5H8V16zm0-6h5v1.5H8V10z'/%3E%3C/svg%3E"); }
body.layout-mothership .msico-tickets { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm3 5h10v1.6H7V9zm0 3.4h7V14H7v-1.6z'/%3E%3C/svg%3E"); }
body.layout-mothership .msico-payments { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 3v2h16V8H4zm0 4v4h16v-4H4zm2 2h5v1.5H6V14z'/%3E%3C/svg%3E"); }

/* ---- Rail foot: profile link + login-module greeting/logout ---- */
body.layout-mothership .ms-profile {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; color: var(--ms-rail-text); text-decoration: none;
  border-left: 3px solid transparent; transition: background .12s ease, color .12s ease;
}
body.layout-mothership .ms-profile:hover { background: var(--ms-rail-bg-hover); color: var(--ms-rail-text-hover); }
body.layout-mothership .ms-sidebar-foot .mod-login { padding: 8px 16px 4px; }
body.layout-mothership .ms-sidebar-foot .login-greeting,
body.layout-mothership .ms-sidebar-foot .mod-login__greeting {
  font-size: 12px; color: var(--ms-text-muted); margin-bottom: 8px;
}
body.layout-mothership .ms-sidebar-foot .mod-login__logout .form-group { margin: 0; }
body.layout-mothership .ms-sidebar-foot .btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 12px; border: 0; border-radius: 6px;
  background: var(--ms-rail-bg-hover); color: var(--ms-rail-text-hover);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
body.layout-mothership .ms-sidebar-foot .btn:hover { background: var(--ms-accent); color: #fff; }

/* ---- Mothership attribution (below last nav item, with separator + UFO) ---- */
body.layout-mothership .ms-powered {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .10);   /* separator */
}
body.layout-mothership .ms-powered-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; color: var(--ms-rail-text); text-decoration: none;
  font-size: 12px; line-height: 1.3;
}
body.layout-mothership .ms-powered-link:hover { background: var(--ms-rail-bg-hover); color: var(--ms-rail-text-hover); }
body.layout-mothership .ms-powered-link strong { color: #fff; font-weight: 700; }

/* ---- Top bar: original site (Main) menu, across the top, right of the rail ---- */
body.layout-mothership .ms-topbar-section {
  background: var(--ms-rail-bg);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: sticky; top: 0; z-index: 500;
}
body.layout-mothership .ms-topbar-section .t4-row.row { margin: 0; --bs-gutter-x: 0; }
body.layout-mothership .ms-topbar-inner {
  display: flex; align-items: center; justify-content: flex-end; min-height: 56px; padding: 0 24px;
}
body.layout-mothership .ms-topbar-inner .navbar {
  padding: 0; width: 100%; display: flex; justify-content: flex-end;   /* right-align */
}
body.layout-mothership .ms-topbar-inner ul.nav {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: 2px; margin: 0; padding: 0;
}
body.layout-mothership .ms-topbar-inner .nav-item { width: auto; }
body.layout-mothership .ms-topbar-inner .nav-link {
  display: block; padding: 8px 14px; border-radius: 6px;
  color: var(--ms-rail-text); text-decoration: none; font-weight: 500; white-space: nowrap;
}
body.layout-mothership .ms-topbar-inner .nav-link:hover { background: var(--ms-rail-bg-hover); color: #fff; }
body.layout-mothership .ms-topbar-inner .nav-item.current > .nav-link,
body.layout-mothership .ms-topbar-inner .nav-item.active > .nav-link { color: #fff; font-weight: 700; }
/* "Back to Marketing Site" link — replaces the marketing menu in the portal topbar. */
body.layout-mothership .ms-topbar-inner .ms-back-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--ms-rail-text); text-decoration: none;
}
body.layout-mothership .ms-topbar-inner .ms-back-link:hover { background: var(--ms-rail-bg-hover); color: #fff; }

/* Kill the white macOS overscroll (rubber-band) behind the dark top bar:
   paint the root dark, but only when the portal shell is active. */
html:has(body.layout-mothership) { background: #1d2327; }

/* ---- Greeting above the nav (Login module, greeting-only) ---- */
body.layout-mothership .ms-greeting { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.layout-mothership .ms-greeting form { margin: 0; }
body.layout-mothership .ms-greeting .login-greeting { font-size: 13px; font-weight: 600; color: #fff; }
body.layout-mothership .ms-greeting .mod-login-logout__options,
body.layout-mothership .ms-greeting .mod-login-logout__button,
body.layout-mothership .ms-greeting .logout-button { display: none; }

/* Foot logout-only: hide the options list, keep the logout button. */
body.layout-mothership .ms-sidebar-foot .mod-login-logout__options { display: none; }
body.layout-mothership .ms-sidebar-foot .mod-login-logout { margin: 0; }

/* ---- Invoice detail: branded invoice embedded (isolated) in an iframe ---- */
body.layout-mothership .ms-invoice-embed__toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px;
}
body.layout-mothership .ms-invoice-embed__title { font-size: 20px; margin: 0; }
body.layout-mothership .ms-invoice-embed__pdf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--ms-accent); color: #fff; border-radius: 6px;
  text-decoration: none; font-weight: 600; font-size: 13px; white-space: nowrap;
}
body.layout-mothership .ms-invoice-embed__pdf:hover { background: #135e96; color: #fff; }
body.layout-mothership .ms-invoice-embed__frame {
  width: 100%; min-height: 800px; display: block;
  border: 1px solid var(--ms-border); border-radius: 8px; background: #fff;
}

/* ---- Invoice action buttons (View / Pay / Cancel) ---- */
body.layout-mothership .ms-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
body.layout-mothership .ms-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 6px; line-height: 1;
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
body.layout-mothership .ms-action svg { flex: 0 0 auto; }
body.layout-mothership .ms-action--view { background: #fff; color: var(--ms-text); border-color: var(--ms-border); }
body.layout-mothership .ms-action--view:hover { background: var(--ms-content-bg); color: var(--ms-accent); border-color: #c9ccd1; }
body.layout-mothership .ms-action--pay { background: #1a7f37; color: #fff; }
body.layout-mothership .ms-action--pay:hover { background: #15682d; color: #fff; }
body.layout-mothership .ms-action--cancel { background: #fcf0e6; color: #a15c00; border-color: #f0d9c0; }
body.layout-mothership .ms-action--cancel:hover { background: #f7e4d0; color: #a15c00; }

/* ---- PDF icon link ---- */
body.layout-mothership .ms-pdf { display: inline-flex; line-height: 0; }
body.layout-mothership .ms-pdf svg { display: block; }
body.layout-mothership .ms-pdf:hover { opacity: .72; }

/* ---- RSForm (Support form embedded in the Support article) ----
   The portal content canvas is very wide, so an unconstrained form leaves the
   full-width inputs sprawling and visually detached from their short labels.
   Inputs fill the form; the form is capped so it doesn't sprawl on the wide
   canvas. Each field is a clean label→input stack. */
body.layout-mothership .formContainer { max-width: 720px; width: 100%; }
body.layout-mothership .rsform-block { margin-bottom: 18px; text-align: left; }
body.layout-mothership .rsform-block .form-label,
body.layout-mothership .rsform-block .formControlLabel {
  display: block; text-align: left; margin-bottom: 6px; font-weight: 600;
}
body.layout-mothership .rsform-block .formControls { display: block; margin: 0; padding: 0; }
body.layout-mothership .formContainer .form-control { display: block; width: 100%; }
body.layout-mothership .formContainer textarea.form-control { min-height: 150px; }

/* Support rail icon */
body.layout-mothership .msico-support { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 4a6 6 0 0 1 5.66 4h-2.12a4 4 0 0 0-7.08 0H6.34A6 6 0 0 1 12 6zm0 12a6 6 0 0 1-5.66-4h2.12a4 4 0 0 0 7.08 0h2.12A6 6 0 0 1 12 18zm0-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E"); }

/* Support hub article: the two call-to-action buttons */
body.layout-mothership .ms-support-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 26px; }

/* Status dots + legend (portal list views: Projects, Domains, …) */
body.layout-mothership .ms-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; flex: 0 0 auto; }
body.layout-mothership .ms-status { display: inline-flex; align-items: center; gap: 7px; }
body.layout-mothership .ms-status-label { font-size: 13.5px; }
body.layout-mothership .ms-sep { color: #c3c7cc; padding: 0 2px; }
body.layout-mothership td.ms-status-cell { text-align: left; }
body.layout-mothership .ms-legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 0 0 16px; font-size: 13px; color: #5a626c; }
body.layout-mothership .ms-legend .ms-legend-item { display: inline-flex; align-items: center; gap: 7px; }
/* Compact status pill + payment chips (invoice payment status) */
body.layout-mothership .ms-pill { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; white-space: nowrap; }
body.layout-mothership .ms-pay-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
body.layout-mothership .ms-pay-chip { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: #eef0f2; color: #3b4655; text-decoration: none; font-variant-numeric: tabular-nums; }
body.layout-mothership .ms-pay-chip:hover { background: #e2e6eb; color: #1d2327; }
/* Cell-filling link that reads as plain text (keeps a row of "linked" columns
   from becoming a wall of blue) but is fully clickable, with a hover cue. */
body.layout-mothership .ms-row-link { display: block; color: inherit; text-decoration: none; }
body.layout-mothership .ms-row-link:hover { color: var(--ms-accent, #2f80bf); text-decoration: underline; }

/* ===== Payment detail & Cancel Payment pages ===== */
body.layout-mothership .ms-pcard {
  background: #fff; border: 1px solid var(--ms-border, #e0e0e0); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16,24,40,.05); padding: 28px 32px; max-width: 1180px;
}
body.layout-mothership .ms-pcard__head { display: flex; align-items: flex-start; gap: 18px; }
body.layout-mothership .ms-pcard__icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
body.layout-mothership .ms-pcard__icon svg { width: 26px; height: 26px; }
body.layout-mothership .ms-pcard__icon--blue { background: #e8f0fe; color: #1a56db; }
body.layout-mothership .ms-pcard__icon--red  { background: #fdecea; color: #d92d20; }
body.layout-mothership .ms-pcard__icon--green { background: #e6f4ea; color: #137333; }
body.layout-mothership .ms-pcard__titles { flex: 1 1 auto; min-width: 0; }
body.layout-mothership .ms-pcard__title { font-size: 26px; font-weight: 700; margin: 0; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* No pencil line on the payment card headings. */
body.layout-mothership .ms-content-col .ms-pcard__title { padding-bottom: 0; }
body.layout-mothership .ms-content-col .ms-pcard__title::after { display: none; }
body.layout-mothership .ms-pcard__sub { color: #6b7480; font-size: 14px; margin-top: 4px; }
body.layout-mothership .ms-pcard__badge { flex: 0 0 auto; align-self: flex-start; padding: 5px 12px; border-radius: 100px; background: #eef2fb; color: #3457b2; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

body.layout-mothership .ms-pstat { display: flex; border: 1px solid var(--ms-border, #e0e0e0); border-radius: 10px; margin: 22px 0; overflow: hidden; }
body.layout-mothership .ms-pstat__col { flex: 1 1 0; padding: 16px 20px; text-align: center; border-left: 1px solid var(--ms-border, #e0e0e0); }
body.layout-mothership .ms-pstat__col:first-child { border-left: 0; }
body.layout-mothership .ms-pstat__label { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #8a929c; font-weight: 600; margin-bottom: 8px; }
body.layout-mothership .ms-pstat__value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.layout-mothership .ms-pstat__value--amount { color: #137333; font-size: 20px; font-weight: 700; }

body.layout-mothership .ms-psection { border: 1px solid var(--ms-border, #e0e0e0); border-radius: 10px; padding: 18px 22px; margin-bottom: 18px; }
body.layout-mothership .ms-psection__title { font-size: 17px; font-weight: 700; margin: 0 0 12px; }

body.layout-mothership .ms-pinv { width: 100%; border-collapse: collapse; }
body.layout-mothership .ms-pinv th { text-align: left; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #8a929c; font-weight: 600; padding: 8px 4px; border-bottom: 1px solid var(--ms-border,#e0e0e0); }
body.layout-mothership .ms-pinv td { padding: 14px 4px; font-size: 14px; border-bottom: 1px solid #f0f1f3; }
body.layout-mothership .ms-pinv .ms-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.layout-mothership .ms-pinv__total td { border-bottom: 0; border-top: 1px solid var(--ms-border,#e0e0e0); font-weight: 600; }
body.layout-mothership .ms-pinv__total .ms-num { color: #137333; }

body.layout-mothership .ms-pnotes { display: flex; gap: 14px; align-items: flex-start; background: #f7f8fa; border: 1px solid var(--ms-border,#e0e0e0); border-radius: 10px; padding: 18px 22px; }
body.layout-mothership .ms-pnotes__ico, body.layout-mothership .ms-pgrid__ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
body.layout-mothership .ms-pnotes__ico { background: #e8f0fe; color: #1a56db; }
body.layout-mothership .ms-pnotes__ico svg { width: 20px; height: 20px; }
body.layout-mothership .ms-pnotes__label { font-weight: 700; margin-bottom: 2px; }
body.layout-mothership .ms-pnotes__text { color: #6b7480; font-size: 14px; }

body.layout-mothership .ms-pwarn { display: flex; gap: 14px; align-items: flex-start; background: #fdf6e3; border: 1px solid #f5e2a8; border-radius: 10px; padding: 16px 20px; margin: 20px 0; }
body.layout-mothership .ms-pwarn svg { flex: 0 0 auto; width: 22px; height: 22px; color: #b45309; margin-top: 1px; }
body.layout-mothership .ms-pwarn strong { color: #7a4b08; font-weight: 700; }

/* Cancel Payment page: header + details card + facts + actions */
body.layout-mothership .ms-pcancel { max-width: 1180px; }
body.layout-mothership .ms-pcancel .ms-pcard__head { margin-bottom: 22px; }
body.layout-mothership .ms-pcancel-details { padding: 22px 26px; margin-bottom: 20px; }
body.layout-mothership .ms-pcancel-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 18px; }
body.layout-mothership .ms-pcancel-hero__amount { font-size: 34px; font-weight: 700; line-height: 1.05; color: #137333; font-variant-numeric: tabular-nums; }
body.layout-mothership .ms-pcancel-hero__method { font-size: 15px; color: #3b4655; margin-top: 6px; }
body.layout-mothership .ms-pcancel-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-top: 1px solid var(--ms-border, #e0e0e0); padding-top: 18px; }
body.layout-mothership .ms-pcancel-facts__label { font-size: 13px; color: #8a929c; font-weight: 600; margin-bottom: 5px; }
body.layout-mothership .ms-pcancel-facts__value { font-size: 15px; }
body.layout-mothership .ms-pill--lg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 14px; }
body.layout-mothership .ms-pill--lg svg { width: 15px; height: 15px; }
body.layout-mothership .ms-pcancel-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 26px; }
@media (max-width: 720px) { body.layout-mothership .ms-pcancel-facts { grid-template-columns: 1fr; } }

/* Dashboard/account preview tables: drop secondary columns on small screens so
   the boxes fit the content column without horizontal overflow. Full detail is a
   tap away via each section's "View all" (those list pages use DataTables). */
@media (max-width: 767px) {
  body.layout-mothership .ms-hide-sm { display: none; }
}

/* ===== Project detail page ===== */
body.layout-mothership .ms-proj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #6b7480; font-size: 14px; margin: -6px 0 20px; }
body.layout-mothership .ms-proj-meta .sep { color: #c3c7cc; }
body.layout-mothership .ms-proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; max-width: 1180px; }
body.layout-mothership .ms-proj-main,
body.layout-mothership .ms-proj-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.layout-mothership .ms-proj-facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 6px 0 18px; }
body.layout-mothership .ms-proj-facts dt { color: #6b7480; font-size: 13.5px; }
body.layout-mothership .ms-proj-facts dd { margin: 0; font-size: 14px; word-break: break-word; }
body.layout-mothership .ms-proj-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.layout-mothership .ms-proj-shot { display: block; width: 100%; border-radius: 8px; border: 1px solid var(--ms-border, #e0e0e0); }
body.layout-mothership .ms-proj-shot-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 200px; border: 1px dashed var(--ms-border, #e0e0e0); border-radius: 8px; color: #8a929c; text-align: center; padding: 22px; }
body.layout-mothership .ms-proj-shot-ph img { width: 40px; height: 40px; border-radius: 8px; }
body.layout-mothership .ms-plugins { width: 100%; border-collapse: collapse; }
body.layout-mothership .ms-plugins th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #8a929c; font-weight: 600; padding: 8px 4px; border-bottom: 1px solid var(--ms-border, #e0e0e0); }
body.layout-mothership .ms-plugins td { padding: 10px 4px; font-size: 14px; border-bottom: 1px solid #f0f1f3; }
body.layout-mothership .ms-plugins tr:last-child td { border-bottom: 0; }
body.layout-mothership .ms-plugins .ms-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 860px) { body.layout-mothership .ms-proj-grid { grid-template-columns: 1fr; } }

/* Domain detail: expiration highlight + footer */
body.layout-mothership .ms-dom-wrap { max-width: 1180px; }
body.layout-mothership .ms-dom-exp { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
body.layout-mothership .ms-dom-exp__date { font-size: 26px; font-weight: 700; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
body.layout-mothership .ms-dom-exp__note { font-size: 13.5px; margin-top: 5px; font-weight: 600; }
body.layout-mothership .ms-dom-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
body.layout-mothership .ms-dom-foot .ms-dom-stamp { color: #8a929c; font-size: 12.5px; }

/* ===== Dashboard / Account detail section tables ===== */
body.layout-mothership .ms-dash { margin-top: 16px; }
body.layout-mothership .ms-dash hr { display: none; }
body.layout-mothership .ms-dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 12px; }
body.layout-mothership .ms-dash > .ms-dash-head:first-of-type { margin-top: 0; }
body.layout-mothership .ms-dash-head h4 { margin: 0; font-size: 18px; font-weight: 700; }
body.layout-mothership .ms-dash-head a { font-size: 13px; white-space: nowrap; }
body.layout-mothership .ms-dash .ms-legend { margin-bottom: 12px; }
body.layout-mothership .ms-dash table.table {
  margin: 0; width: 100%;
  border: 1px solid var(--ms-border, #e0e0e0); border-radius: 10px;
  border-collapse: separate; border-spacing: 0; overflow: hidden;
  background: #fff;
}
body.layout-mothership .ms-dash table.table thead th {
  background: #f7f8fa; border-bottom: 1px solid var(--ms-border, #e0e0e0);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: #6b7480; font-weight: 600;
  padding: 11px 14px;
}
body.layout-mothership .ms-dash table.table tbody td { padding: 13px 14px; border-top: 1px solid #f0f1f3; vertical-align: middle; }
body.layout-mothership .ms-dash table.table tbody tr:first-child td { border-top: 0; }
body.layout-mothership .ms-dash table.table tbody tr:hover td { background: #fafbfc; }
body.layout-mothership .ms-dash .ms-sub { margin-top: 3px; }

/* Payment "Thank You" confirmation page */
body.layout-mothership .ms-pthanks { max-width: 1180px; }
body.layout-mothership .ms-pthanks .ms-pcard__head { margin-bottom: 22px; }
body.layout-mothership .ms-pthanks .ms-pcancel-facts { grid-template-columns: repeat(4, 1fr); }

/* Pay Invoice page (method selection + instructions) */
body.layout-mothership .ms-pay-wrap { max-width: 1180px; }
body.layout-mothership .ms-pay-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 15px; }
body.layout-mothership .ms-pay-total-row .amount { font-weight: 700; font-variant-numeric: tabular-nums; }
body.layout-mothership .ms-pay-total-row--final { border-top: 1px solid var(--ms-border, #e0e0e0); margin-top: 12px; padding-top: 14px; font-size: 16px; }
body.layout-mothership .ms-pay-total-row--final .amount { color: #137333; font-size: 20px; }
body.layout-mothership .ms-pay-methods { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
body.layout-mothership .ms-pay-method { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--ms-border, #e0e0e0); border-radius: 8px; cursor: pointer; transition: background .12s ease, border-color .12s ease; margin: 0; }
body.layout-mothership .ms-pay-method:hover { background: #f7f8fa; }
body.layout-mothership .ms-pay-method:has(input:checked) { border-color: var(--ms-accent, #2f80bf); box-shadow: inset 0 0 0 1px var(--ms-accent, #2f80bf); }
body.layout-mothership .ms-pay-method input { margin: 0; flex: 0 0 auto; }
body.layout-mothership .ms-pay-method__name { font-weight: 600; }
body.layout-mothership .ms-pay-method__fee { margin-left: auto; font-size: 13px; color: #6b7480; }
body.layout-mothership .ms-pay-instructions { display: none; }
body.layout-mothership .ms-pay-instructions h3 { font-size: 17px; margin: 0 0 10px; }
body.layout-mothership .ms-pay-instructions p { margin: 0 0 10px; }
body.layout-mothership .ms-pay-instructions p:last-child { margin-bottom: 0; }
body.layout-mothership .ms-pay-instructions code { background: #eef0f2; color: #b45309; padding: 1px 6px; border-radius: 5px; font-size: .92em; }
body.layout-mothership .ms-pwarn__text { color: #8a6d3b; font-size: 14px; line-height: 1.55; }

body.layout-mothership .ms-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; }
body.layout-mothership .ms-pgrid__item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #f0f1f3; }
body.layout-mothership .ms-pgrid__ico { background: #f0f2f5; color: #5a626c; }
body.layout-mothership .ms-pgrid__ico svg { width: 18px; height: 18px; }
body.layout-mothership .ms-pgrid__label { font-size: 12.5px; color: #6b7480; font-weight: 600; }
body.layout-mothership .ms-pgrid__value { font-size: 15px; margin-top: 3px; }

body.layout-mothership .ms-pcard__foot { display: flex; justify-content: flex-end; gap: 12px; align-items: center; border-top: 1px solid var(--ms-border,#e0e0e0); margin: 24px -32px -28px; padding: 18px 32px; background: #fafbfc; border-radius: 0 0 14px 14px; }
body.layout-mothership .ms-pcard__foot form { margin: 0; }

@media (max-width: 720px) {
  body.layout-mothership .ms-pstat { flex-wrap: wrap; }
  body.layout-mothership .ms-pstat__col { flex: 1 1 50%; border-top: 1px solid var(--ms-border,#e0e0e0); }
  body.layout-mothership .ms-pgrid { grid-template-columns: 1fr; }
}
/* Website URL shown under a project name */
body.layout-mothership .ms-proj-url { font-size: 12px; margin-top: 2px; }
body.layout-mothership .ms-proj-url a { color: #6b7480; text-decoration: none; }
body.layout-mothership .ms-proj-url a:hover { text-decoration: underline; }
/* Small muted secondary line (e.g. an invoice number under its title) */
body.layout-mothership .ms-sub { display: block; font-size: 12px; color: #6b7480; margin-top: 2px; }
/* Primary title line (e.g. an invoice title, with the number as the sub) */
body.layout-mothership .ms-inv-title { display: block; font-size: 14.5px; font-weight: 500; }

/* New Ticket rail icon (ticket + plus) */
body.layout-mothership .msico-ticket-new { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4V6a2 2 0 0 1 2-2zm8 3a1 1 0 0 0-1 1v2H9a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2h-2V8a1 1 0 0 0-1-1z'/%3E%3C/svg%3E"); }

/* Billing rail icon (card) */
body.layout-mothership .msico-billing { --ms-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v3H2V6a1 1 0 0 1 1-1zM2 11h20v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-7zm3 4v1.5h6V15H5z'/%3E%3C/svg%3E"); }

/* ---- Rail sub-nav ----
   T4's megamenu renders a parent with children as a Bootstrap dropdown. In the
   vertical rail we neutralise the popup and show the children inline as an
   always-open, indented nested list (see mothership-sidebar.html for the JS that
   strips the toggle so a linked parent still navigates). */
body.layout-mothership .ms-nav .nav-item.dropdown > .dropdown-menu {
  position: static; float: none; inset: auto;
  margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0;
  width: 100%; min-width: 0; transform: none;
  background: rgba(0, 0, 0, .14);
  display: none; /* collapsed by default; opened when in-section or toggled */
}
body.layout-mothership .ms-nav .nav-item.dropdown.ms-open > .dropdown-menu { display: block; }
/* Expand/collapse caret on the group parent (the rail renders links as .dropdown-item) */
body.layout-mothership .ms-nav .nav-item.dropdown > .nav-link::after,
body.layout-mothership .ms-nav .nav-item.dropdown > .dropdown-item::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; opacity: .6;
}
body.layout-mothership .ms-nav .nav-item.dropdown.ms-open > .nav-link::after,
body.layout-mothership .ms-nav .nav-item.dropdown.ms-open > .dropdown-item::after { transform: rotate(45deg); }
body.layout-mothership .ms-nav .dropdown-item {
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 9px 16px 9px 30px; font-size: .92em;
  color: var(--ms-rail-text); text-decoration: none;
  border-left: 3px solid transparent;
}
/* Nested children sit deeper than their group parent for clear hierarchy. */
body.layout-mothership .ms-nav .dropdown-menu .dropdown-item { padding-left: 52px; }
body.layout-mothership .ms-nav .dropdown-item:hover,
body.layout-mothership .ms-nav .dropdown-item:focus { background: var(--ms-rail-bg-hover); color: var(--ms-rail-text-hover); }
body.layout-mothership .ms-nav .dropdown-item.msico::before { width: 17px; height: 17px; }
/* Active child */
body.layout-mothership .ms-nav .nav-item.ms-active > .dropdown-item { background: var(--ms-accent); color: #fff; border-left-color: #fff; }
/* Parent reads as active (subtly) while a child page is open */
body.layout-mothership .ms-nav .nav-item.parent.ms-active > .nav-link { background: transparent; color: var(--ms-rail-text-hover); border-left-color: var(--ms-accent); }
/* A heading parent (Billing) is a non-clickable section label */
body.layout-mothership .ms-nav .nav-item.dropdown > .nav-header,
body.layout-mothership .ms-nav .nav-item.dropdown > span.nav-link { cursor: default; }

/* Hide rail items that are redundant for this user (classes set on <html> by
   plg_system_mothershiptheme): Clients when they belong to a single client,
   Dashboard when they have a single account (the account view covers it). */
html.ms-single-client body.layout-mothership:not(.view-login) .ms-nav .nav-item:has(a.msico-clients) { display: none; }
/* Guests (the login view) never need the Clients tab. */
body.layout-mothership.view-login .ms-nav .nav-item:has(a.msico-clients) { display: none; }
html.ms-single-account body.layout-mothership:not(.view-login) .ms-nav .nav-item:has(a.msico-accounts) { display: none; }
html.ms-no-proposals body.layout-mothership:not(.view-login) .ms-nav .nav-item:has(a.msico-proposals) { display: none; }
/* Auth items (log-in / forgot-*) live under account-center for the URLs, but must
   not appear in the logged-in rail. */
body.layout-mothership .ms-nav .nav-item:has(> a[href*="/log-in"]),
body.layout-mothership .ms-nav .nav-item:has(> a[href*="/forgot-"]) { display: none; }

/* Guests: hide rail chrome that only means something once signed in — the
   greeting (empty, but its border shows as a stray separator) and "My Profile". */
html.ms-guest body.layout-mothership .ms-greeting,
html.ms-guest body.layout-mothership .ms-sidebar-foot { display: none; }

/* ---- Login view: keep the full shell (rail + top bar) and present the login
   form as a centred card in the content canvas. The rail nav is just an
   affordance for guests — every item bounces back to login via the gate. ---- */
body.layout-mothership.view-login .ms-content-col {
  min-height: calc(100vh - 56px);        /* fill below the sticky top bar */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 16px;
}
body.layout-mothership.view-login .login-wrap {
  width: 100%; max-width: 400px;
  background: #fff; border: 1px solid var(--ms-border); border-radius: 10px;
  padding: 32px; box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
}
/* Trevor Bice Webdesign branding ABOVE the login card */
body.layout-mothership.view-login .ms-login-brand { width: 100%; max-width: 400px; text-align: center; margin: 0 0 22px; }
body.layout-mothership.view-login .ms-login-brand img {
  width: 300px; height: auto; max-width: 100%;
  mix-blend-mode: multiply; /* drop the logo's white background onto the page */
}
/* "Account Center" heading inside the login card */
body.layout-mothership.view-login .ms-login-heading {
  text-align: center; margin: 0 0 20px;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ms-text, #1d2327);
}
body.layout-mothership.view-login #system-message-container {
  width: 100%; max-width: 400px;
}
/* The WebAuthn passkey button ships an SVG with only a viewBox (no width/height),
   so without the plugin's own CSS it balloons. Constrain it to icon size. */
body.layout-mothership.view-login .plg_system_webauthn_login_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
body.layout-mothership.view-login .plg_system_webauthn_login_button svg {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
}