/* ============================================================
   Swati K & Co. — site.css

   Canonical chrome (utility-bar, primary-nav, service-strip, footer)
   and hub-page components, extracted from the Claude-generated design
   so the navy hub pages render identically to the bespoke pages.

   The 10 bespoke pages have their own inline <style> blocks that
   define page-specific layouts; they don't load this file. Only the
   hub pages (compliance_services, NRI_corner, etc.) and nested
   service pages depend on it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --color-primary: #0D5C3E;
  --color-primary-soft: #E8F1EC;
  --color-primary-deep: #094530;
  --color-accent: #E07A1F;
  --color-accent-soft: #FBE8D5;

  /* Surface */
  --color-bg: #FAF6EE;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F5EFE2;

  /* Ink */
  --color-ink: #1A1814;
  --color-ink-muted: #6B6760;
  --color-ink-faint: #98948B;

  /* Lines */
  --color-border: #E8DFD0;

  /* Accent variants (audit, virtual_cfo, testimonials) */
  --color-amber: #C9A84C;
  --color-amber-soft: #F4E9C7;
  --color-star: #F5B82E;

  /* Article category pills (news_and_articles, index hero card) */
  --cat-tax:    #1E40AF; --pill-tax-fg: #1E40AF; --pill-tax-bg: #DBE7FB;
  --cat-gst:    #0F766E; --pill-gst-fg: #0F766E; --pill-gst-bg: #CFEBE6;
  --cat-co:     #7C2D6F; --pill-cl-fg:  #7C2D6F; --pill-cl-bg:  #F1DCEC;
  --cat-nri:    #5B21B6; --pill-nri-fg: #5B21B6; --pill-nri-bg: #E5DBF6;
  --cat-budget: #4338CA; --pill-bud-fg: #4338CA; --pill-bud-bg: #DDDBFA;
                         --pill-urg-fg: #B91C1C; --pill-urg-bg: #FCD7D7;

  /* Geometry */
  --r-base: 0.625rem;
  --r-card: 1rem;
  --r-pill: 999px;
  --maxw: 96rem;             /* 1536px — uses fuller screen width on desktop, with sensible cap on ultra-wide monitors */
  --max-w: 96rem;            /* alias for legacy refs */
  --maxw-narrow: 60rem;
  --measure: 80rem;          /* shared body-prose width cap — service + article pages */
  --gutter: 1.5rem;

  /* Type families */
  --display: 'Fraunces', 'Times New Roman', serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin: 0;
  color: var(--color-ink);
}
h1 { font-size: clamp(2.4rem, 4.6vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.wrap, .container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: var(--r-base);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.9375rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-deep); }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-ghost:hover { background: var(--color-ink); color: var(--color-bg); }
.btn-cream {
  background: transparent;
  color: var(--color-bg);
  border-color: var(--color-bg);
}
.btn-cream:hover { background: var(--color-bg); color: var(--color-primary-deep); }

/* ===== UTILITY BAR ===== */
.utility-bar {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8125rem;
  height: 36px;
  display: flex;
  align-items: center;
}
.utility-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 1.75rem;
  width: 100%;
}
.utility-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  transition: color 140ms ease;
}
.utility-bar a:hover { color: #fff; }
.utility-bar svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Two phone links sit as a tight paired group separated by a slash. */
.utility-bar .ub-phones {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.utility-bar .ub-phones .ub-phone-sep {
  color: rgba(255,255,255,0.5);
  font-weight: 400;
}
@media (max-width: 760px) {
  .utility-bar { font-size: 0.75rem; }
  .utility-bar .wrap { gap: 1rem; }
  .utility-bar .ub-hide-mobile { display: none; }
}

/* ===== HEADER / PRIMARY NAV ===== */
.primary-nav {
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(13,30,20,0.02);
}
.primary-nav .wrap {
  display: grid;
  /* Layout: logo | divider | middle (nav-links + service-strip stacked) | Book Appointment CTA.
     The CTA gets its own right column so it doesn't compete for space with the nav links,
     and the middle column is reserved purely for the centered nav links and the strip below. */
  grid-template-columns: auto 1px 1fr auto;
  align-items: stretch;
  gap: 1.5rem;
  min-height: 104px;
  /* Header chrome uses the global --maxw (96rem) so the Book Appointment CTA
     sits toward the right edge of the page and the nav links center across
     the full page width (instead of the older 76rem-constrained band). */
}
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0;
}
.logo-lockup .logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-lockup .wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  color: var(--color-primary);
  letter-spacing: -0.018em;
  line-height: 1;
}
.logo-lockup .tagline {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-top: 6px;
}
.logo-lockup .frn {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--color-ink-muted);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.logo-lockup .ca-mark { height: 56px; width: auto; display: block; }
.header-divider {
  width: 1px;
  background: var(--color-border);
  align-self: stretch;
  margin: 0.875rem 0;
}
.header-right { display: flex; flex-direction: column; min-width: 0; }
.nav-row {
  flex: 1;
  display: flex;
  align-items: center;
  /* Spread nav-links across the full header-right width and pin the CTA to the right edge,
     so the gap between logo (left) and CTA (right) is evenly populated. */
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
}
/* nav-row layout: nav (with links) takes the middle and centers its links;
   utility-inline (Book Appointment) sits on the far right after the links.
   Logo sits in a sibling grid column to the left of header-right. */
.nav-row > nav { flex: 1; }
.nav-links {
  display: flex;
  align-items: center;
  /* The 7 primary links are centered within the available middle width,
     so they don't crowd against either the logo or the Book Appointment
     CTA on either side. */
  justify-content: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 0.875rem;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  border-radius: var(--r-base);
  transition: background-color 140ms ease, color 140ms ease;
}
.nav-links a:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.nav-links a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 6px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}
.utility-inline {
  /* Sits in its own grid column on the far right of .primary-nav .wrap.
     Vertically centered across the full chrome height (104px) so the
     button sits between the primary nav row and the service-strip row,
     not pinned to the top. */
  display: flex;
  align-items: center;
  align-self: center;
  padding: 0.5rem 0;
}
.utility-inline .ub-cta {
  background: var(--color-accent);
  color: #fff;
  height: 44px;
  padding: 0 1.125rem;
  border-radius: var(--r-base);
  font-weight: 600;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 160ms ease;
}
.utility-inline .ub-cta:hover { background: #c4691a; }
.utility-inline .ub-cta svg { width: 16px; height: 16px; }
.mobile-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: var(--r-base);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-toggle svg { width: 20px; height: 20px; }
@media (max-width: 1100px) {
  .utility-inline .ub-cta span { display: none; }
}
@media (max-width: 980px) {
  .primary-nav .wrap { grid-template-columns: 1fr auto; gap: 1rem; min-height: 72px; }
  .header-divider { display: none; }
  .header-right { display: none; }
  .mobile-toggle { display: inline-flex; align-self: center; }
  .logo-lockup .frn { display: none; }
  .logo-lockup .wordmark { font-size: 22px; }
  .logo-lockup .tagline { font-size: 9px; }
  .logo-lockup .ca-mark { height: 40px; }
}

/* ===== SERVICE STRIP ===== */
.service-strip {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 30;
  min-height: 48px;
}
.service-strip .strip-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  /* Must stay visible so dropdown panels can escape downward.
     Browsers can't combine overflow-x:auto with overflow-y:visible. */
  overflow: visible;
  margin: 0 -0.625rem; /* compensate first/last item's padding so edges align to wrap */
  justify-content: space-between; /* spread items evenly across the header-right column */
  flex-wrap: nowrap;
}

/* A strip-item is either:
   - a wrapper <div class="strip-item has-strip-dd"> containing .strip-link + .strip-dd, or
   - a flat <a class="strip-item strip-link"> for service categories without sub-pages. */
.strip-item {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  /* Wrap allowed so longer labels (e.g. "Specialised Services") can break to a second line on narrow desktops. */
  white-space: normal;
}
.strip-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 0.625rem;
  font-weight: 500;
  font-size: 0.875rem;
  white-space: nowrap;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: color 140ms ease;
  border: 0;
  background: transparent;
  font-family: var(--body);
  text-decoration: none;
  height: 48px;
}
.strip-link:hover,
.strip-item:hover .strip-link,
.strip-item:focus-within .strip-link { color: var(--color-primary); }
.strip-link:hover::before,
.strip-item:hover .strip-link::before,
.strip-item:focus-within .strip-link::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
}
.strip-chev {
  width: 12px;
  height: 12px;
  margin-left: 0.3rem;
  opacity: 0.55;
  transition: transform 160ms ease, opacity 160ms ease;
}
.has-strip-dd:hover .strip-chev,
.has-strip-dd:focus-within .strip-chev {
  transform: rotate(180deg);
  opacity: 0.9;
}

/* Dropdown panel */
.strip-dd {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  max-width: 340px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-base);
  padding: 0.5rem;
  box-shadow: 0 24px 48px -24px rgba(13, 30, 20, 0.18),
              0 6px 14px -8px rgba(13, 30, 20, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 60;
}
.has-strip-dd:hover .strip-dd,
.has-strip-dd:focus-within .strip-dd {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.strip-dd a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-ink);
  border-radius: 4px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.strip-dd a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.strip-dd a.dd-all {
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.25rem;
  padding-bottom: 0.625rem;
}
.strip-dd .dd-section {
  padding: 0.625rem 0.75rem 0.25rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
}
.strip-dd .dd-section:first-of-type { border-top: 0; margin-top: 0; }

/* Right-edge dropdowns flip to align right so they don't overflow viewport */
.has-strip-dd:nth-last-child(-n+2) .strip-dd { left: auto; right: 0; }

@media (max-width: 1100px) { .service-strip { display: none; } }

/* ===== FOOTER ===== */
.footer {
  background: var(--color-primary-deep);
  color: rgba(250, 246, 238, 0.85);
  padding: 5rem 0 2rem;
}
.footer .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 2fr 1.2fr;
  gap: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(250, 246, 238, 0.12);
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr; gap: 3rem; }
}
.footer h5 {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bg);
  margin: 0 0 1.25rem;
}
.footer .firm-block .firm-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-bg);
  display: block;
  margin-bottom: 0.5rem;
}
.footer .address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(250, 246, 238, 0.75);
}
.footer .frn-line {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: rgba(250, 246, 238, 0.6);
  margin-top: 1rem;
  display: block;
}
.partners-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 760px) { .partners-foot { grid-template-columns: 1fr; } }
.partner-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(250, 246, 238, 0.12);
  border-radius: var(--r-base);
  padding: 1rem;
}
.partner-card .role {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--color-accent-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.375rem;
}
.partner-card .pname {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-bg);
  display: block;
  margin-bottom: 0.625rem;
}
.partner-card a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: rgba(250, 246, 238, 0.75);
  padding: 0.2rem 0;
}
.partner-card a:hover { color: var(--color-accent-soft); }
.partner-card svg { width: 12px; height: 12px; flex-shrink: 0; }
.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
.quick-links a {
  font-size: 0.9375rem;
  color: rgba(250, 246, 238, 0.75);
  padding: 0.25rem 0;
}
.quick-links a:hover { color: var(--color-bg); }
.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: rgba(250, 246, 238, 0.55);
}
.social { display: inline-flex; gap: 0.5rem; }
.social a {
  width: 40px; height: 40px;
  border: 1px solid rgba(250, 246, 238, 0.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bg);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.social a:hover { background: var(--color-accent); border-color: var(--color-accent); }
.social svg { width: 16px; height: 16px; }

/* ===== HUB-PAGE LAYOUTS (page-banner + service-cards) =====
   Used by the 6 navy hub pages and their nested service pages. */
.page-banner {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  /* Reduced top padding so the breadcrumb sits closer to the sticky nav,
     removing the awkward whitespace gap on text-heavy registration pages. */
  padding: clamp(20px, 2.5vw, 40px) 0 clamp(40px, 6vw, 72px);
  position: relative;
}
.page-banner::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(closest-side, rgba(224,122,31,0.12), rgba(224,122,31,0) 70%);
  pointer-events: none;
}
.page-banner .wrap, .page-banner .container { position: relative; }
.page-banner .breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.page-banner .breadcrumb a:hover { color: var(--color-accent); }
.page-banner .breadcrumb span.sep { color: var(--color-border); }
.page-banner .eyebrow { display: block; margin-bottom: 1.25rem; }
.page-banner h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); margin-bottom: 1.5rem; max-width: 24ch; }
.page-banner h1 em { font-style: italic; font-weight: 500; color: var(--color-primary); }
.page-banner .lead, .page-banner .lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin-top: 1rem;
  max-width: 62ch;
}

.service-cards { padding: clamp(64px, 8vw, 112px) 0; }
.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: var(--r-base);
  transition: 0.25s ease;
  text-decoration: none;
  color: inherit;
}
.sc:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -28px rgba(13,92,62,0.18);
}
.sc .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.sc h3 {
  font-size: 1.5rem;
  letter-spacing: -0.018em;
}
.sc p, .sc li {
  font-size: 14px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}
.sc ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 0;
  list-style: none;
}
.sc ul li::before { content: "—"; margin-right: 8px; color: var(--color-accent); }
.sc .more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.sc .more .arrow { transition: transform 0.2s ease; }
.sc:hover .more { color: var(--color-accent); }
.sc:hover .more .arrow { transform: translateX(4px); }
@media (max-width: 1000px) { .sc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .sc-grid { grid-template-columns: 1fr; } }

/* ===== ARTICLE BODY =====
   Long-form prose pages (news_and_articles entries). Visually aligned
   with the service-page section bands — same vertical padding (5rem),
   same outer wrap width (var(--maxw)) — but the prose itself is held
   to a comfortable ~64rem line-length so paragraphs stay readable. */
.article { padding: 5rem 0; }
.article .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.article .wrap > * { max-width: var(--measure); margin-left: 0; margin-right: auto; }
.article h2 { font-size: clamp(28px, 3vw, 40px); margin: 48px 0 16px; }
.article h3 { font-size: 22px; margin: 32px 0 12px; font-family: var(--body); font-weight: 600; letter-spacing: 0; }
.article p, .article li { font-size: 17px; line-height: 1.75; color: var(--color-ink); }
.article ul, .article ol { padding-left: 1.4em; margin: 0 0 1.4em; }
.article ul li, .article ol li { margin-bottom: 0.5em; list-style: disc; }
.article ol li { list-style: decimal; }
.article strong { color: var(--color-primary); font-weight: 600; }

/* ===== SKIP LINK ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}