/* =============================================================================
   wisdom-investments — screen.css

   Every value in the token block below was MEASURED off the live WordPress site
   with a CDP computed-style probe, not read out of the stylesheet. That
   distinction mattered here: digital-5997.css declares `.latestPost .title a` as
   #3f2f45, and the rendered card title is #006F9E. Something later overrides it,
   so the stylesheet is a record of what was written and the computed value is a
   record of what visitors see.

   Load order note: this sheet is loaded AFTER elementor-shared.css in default.hbs.
   That is deliberate — elementor-shared.css is a whole WordPress theme and would
   otherwise restyle this theme's own chrome. Ported pages still win inside their
   own sections because each carries its own <style> block, which loads later still.
   Anything here that must beat a PAGE block is scoped under .post-content — the
   specificity ladder that has bitten the flagship site four times.
   ============================================================================= */

/* ---------- fonts ------------------------------------------------------- */
/* ONE file. Red Hat Display is a VARIABLE font: Google serves the same 30 KB woff2
   for 400, 500 and 700, so three @font-face rules pointing at three "different"
   files download the identical bytes three times. Declared across the range
   instead. The src URL must byte-match the <link rel=preload> in default.hbs or
   the preload warms something nothing uses. */
@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/redhatdisplay-var.woff2') format('woff2-variations'),
       url('../fonts/redhatdisplay-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ------------------------------------------------------- */
:root {
  /* Measured from the live site */
  --wi-blue:      #006F9E;   /* nav, titles, body copy, widget titles, footer links */
  --wi-orange:    #F53100;   /* GET STARTED, category labels, Read More            */
  --wi-panel:     #EFF9FF;   /* widget-title ground and the footer band            */
  --wi-muted:     #A09195;   /* body default colour                                */
  --wi-ink:       #3F2F45;   /* the theme's declared heading ink                   */
  --wi-white:     #FFFFFF;
  --wi-rule:      #E1E1E1;

  /* Derived, with contrast checked against the grounds each is used on.
     --wi-orange on white is 4.62:1 (AA for body text, AAA for large).
     --wi-orange as a BUTTON ground with white text is 4.62:1 — AA.
     --wi-blue on white is 5.62:1; --wi-blue on --wi-panel is 5.16:1, so the
     widget titles clear AA on their own pale-blue band. The band trap has bitten
     this fleet six times; both grounds are checked here, not assumed. */
  --wi-orange-hover: #D82B00;
  --wi-blue-hover:   #005A80;

  --wi-container: 1110px;    /* measured .container width */
  --wi-sidebar:   300px;     /* measured #sidebar width   */
  --wi-gutter:    30px;

  --wi-font: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

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

html {
  /* overflow-x: clip (not hidden) contains a stray wide child without creating a
     scroll container, which would break position: sticky elsewhere. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--wi-font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--wi-muted);
  background: var(--wi-white);
  overflow-x: clip;
}

img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
img { border: 0; }

a { color: var(--wi-blue); text-decoration: none; }
a:hover, a:focus-visible { color: var(--wi-blue-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-family: var(--wi-font); color: var(--wi-blue); margin: 0 0 .6em; }

/* A visible focus ring everywhere. Removing outlines is the single most common
   keyboard-accessibility regression in a ported theme. */
:focus-visible { outline: 3px solid var(--wi-orange); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--wi-blue); color: #fff; padding: 12px 20px; border-radius: 0 0 3px 0;
}
.skip-link:focus { left: 0; }

/* ---------- layout ------------------------------------------------------- */
.container {
  width: min(100% - 2rem, var(--wi-container));
  margin-inline: auto;
}

.main-container { overflow-x: clip; }

.content-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wi-sidebar);
  gap: 40px var(--wi-gutter);
  align-items: start;
  padding: 40px 0 50px;
}
.content-wrap--single { grid-template-columns: minmax(0, 1fr); }
.article-column { min-width: 0; }   /* without this a wide table blows the grid out */

/* The ported Elementor pages get the full viewport; their own sections set width. */
.page-full { padding: 0; }
.wrap-full { width: 100%; }

/* ---------- header ------------------------------------------------------- */
.main-header { background: var(--wi-white); position: relative; z-index: 50; }
#header { background: var(--wi-white); padding: 5px 0; }

#header .container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo-wrap { flex: 0 0 auto; }
#logo { margin: 0; font-size: 0; line-height: 0; }
#logo img { width: 180px; height: 70px; object-fit: contain; display: block; }

.primary-navigation { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }

/* {{navigation}} emits its OWN <ul class="nav"> — style that, never wrap it in a
   second list, or you get nested lists and visible bullet markers. */
.site-nav ul, .mobile-menu-wrapper ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
}
.site-nav li, .mobile-menu-wrapper li { margin: 0; }

.site-nav a, .mobile-menu-wrapper a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--wi-blue); font-size: 16px; font-weight: 500; line-height: 1.2;
  padding: 10px 2px; text-decoration: none;
}
.site-nav a:hover, .mobile-menu-wrapper a:hover { color: var(--wi-orange); text-decoration: none; }
.site-nav .nav-current > a, .mobile-menu-wrapper .nav-current > a { color: var(--wi-orange); }

/* WordPress put a Font Awesome glyph before each nav label. Ghost's navigation
   cannot carry markup, so the glyph is attached from CSS keyed on the href. The
   font family here is the FA4 face the mts_digital sheet ships, which is already
   loaded by elementor-shared.css and re-hosted under assets/vendor/. */
.site-nav a::before, .mobile-menu-wrapper a::before {
  font-family: 'FontAwesome';
  font-weight: normal; font-style: normal;
  font-size: 15px; line-height: 1;
  color: currentColor;
}
.site-nav a[href$="//"]::before,
.site-nav a[href$=".in/"]::before,
.mobile-menu-wrapper a[href$=".in/"]::before                { content: '\f015'; } /* home       */
.site-nav a[href*="/services/"]::before,
.mobile-menu-wrapper a[href*="/services/"]::before          { content: '\f00b'; } /* th-list    */
.site-nav a[href*="/blog/"]::before,
.mobile-menu-wrapper a[href*="/blog/"]::before              { content: '\f044'; } /* pencil-sq  */
.site-nav a[href*="/disclaimer/"]::before,
.mobile-menu-wrapper a[href*="/disclaimer/"]::before        { content: '\f05a'; } /* info-circle*/
.site-nav a[href*="/contact-us/"]::before,
.mobile-menu-wrapper a[href*="/contact-us/"]::before        { content: '\f0e0'; } /* envelope   */

.nav-button { flex: 0 0 auto; margin-left: auto; }

.button.border,
.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 30px;
  background: var(--wi-orange); color: var(--wi-white);
  font-size: 14px; font-weight: 700; line-height: 1;
  border: 0; border-radius: 3px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .18s ease;
}
.button:hover, .button.border:hover { background: var(--wi-orange-hover); color: #fff; text-decoration: none; }
.button--ghost { background: transparent; color: var(--wi-blue); box-shadow: inset 0 0 0 2px currentColor; }
.button--ghost:hover { background: var(--wi-blue); color: #fff; }

/* Hamburger — hidden until the nav actually needs to collapse. */
.toggle-mobile-menu {
  display: none;
  align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 8px 10px;
  background: none; border: 0; cursor: pointer;
  color: var(--wi-blue); font-family: var(--wi-font);
  font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.toggle-mobile-menu::after {
  content: ''; width: 20px; height: 2px; background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

/* ---------- blog grid ---------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px var(--wi-gutter);
}

/* {{post_class}} puts `post` on every card; nothing here keys on `.post`. */
.latestPost { min-width: 0; }

.latestPost__media { display: block; margin-bottom: 16px; }
.latestPost__media img {
  width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: top center;
  display: block; background: var(--wi-panel);
}

.thecategory { margin-bottom: 8px; line-height: 1.35; }
.thecategory a {
  color: var(--wi-orange); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.thecategory a:hover { color: var(--wi-orange-hover); }

.latestPost .title { margin: 0 0 10px; font-size: 20px; line-height: 28px; font-weight: 700; }
.latestPost .title a { color: var(--wi-blue); }
.latestPost .title a:hover { color: var(--wi-orange); text-decoration: none; }

.front-view-content { color: var(--wi-blue); font-size: 16px; line-height: 24px; }
.read-more { color: var(--wi-orange); font-weight: 700; white-space: nowrap; }
.read-more:hover { color: var(--wi-orange-hover); }

.empty-state { color: var(--wi-muted); }

/* ---------- single post -------------------------------------------------- */
.page-title, .archive-header .page-title {
  color: var(--wi-blue); font-size: 32px; font-weight: 700; line-height: 1.25;
  margin: 0 0 24px;
}
.page-title__page { color: var(--wi-muted); font-size: .6em; font-weight: 500; }
.archive-header { margin-bottom: 30px; }
.archive-description { color: var(--wi-muted); margin: 0 0 6px; }
.archive-count { color: var(--wi-muted); font-size: 14px; margin: 0; }

.single-header { margin-bottom: 22px; }
.single-title {
  color: var(--wi-blue); font-size: 32px; font-weight: 700; line-height: 1.25;
  margin: 0 0 12px;
}
.post-meta { color: var(--wi-muted); font-size: 14px; }
.post-meta__sep { margin: 0 6px; }

.single-feature { margin: 0 0 26px; }
.single-feature img { width: 100%; display: block; }
.single-feature figcaption { color: var(--wi-muted); font-size: 14px; padding-top: 8px; }

.post-single-content, .post-content {
  color: var(--wi-blue); font-size: 18px; line-height: 32px;
}
/* Reset spacing with `> *` only. `.post-content p { margin: 0 }` out-specifies
   `.post-content > * + *` and silently deletes every paragraph gap. */
.post-content > * { margin-top: 0; }
.post-content > * + * { margin-top: 1.1em; }
.post-content h2 { font-size: 26px; line-height: 1.3; margin-top: 1.6em; }
.post-content h3 { font-size: 22px; line-height: 1.35; margin-top: 1.5em; }
.post-content a { color: var(--wi-orange); text-decoration: underline; }
.post-content a:hover { color: var(--wi-orange-hover); }
/* The imported WordPress content wraps whole paragraphs in <strong> on some sites.
   Measured ZERO blanket blocks here, but inherit is still the safe colour: a
   `.post-content strong { color: … }` rule turned entire post bodies brown on wq4u. */
.post-content strong, .post-content b { color: inherit; }
.post-content img { height: auto; }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content li + li { margin-top: .4em; }
.post-content blockquote {
  margin-inline: 0; padding: 4px 0 4px 20px;
  border-left: 4px solid var(--wi-orange); color: var(--wi-ink);
}
/* Wide content must scroll inside its own box, never widen the page. */
.post-content table { width: 100%; border-collapse: collapse; }
.post-content .table-scroll, .post-content figure.kg-width-wide { overflow-x: auto; }
.post-content pre { overflow-x: auto; padding: 14px; background: var(--wi-panel); border-radius: 4px; }

/* Koenig cards must be styled or gscan errors. */
.kg-width-wide  { width: 100%; }
.kg-width-full  { width: 100%; }
.kg-image       { max-width: 100%; height: auto; }
.kg-embed-card  { display: flex; flex-direction: column; align-items: center; }
.kg-embed-card iframe { max-width: 100%; }
.kg-gallery-container { display: flex; flex-direction: column; }
.kg-gallery-row { display: flex; flex-direction: row; justify-content: center; gap: 6px; }
.kg-gallery-row:not(:first-of-type) { margin-top: 6px; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-bookmark-card { width: 100%; }
.kg-bookmark-container { display: flex; border: 1px solid var(--wi-rule); border-radius: 4px; overflow: hidden; }
.kg-bookmark-content { padding: 16px; min-width: 0; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.single-footer { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--wi-rule); }

.share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.share__label { color: var(--wi-muted); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--wi-blue); color: #fff; font-size: 16px;
}
.share__btn:hover { background: var(--wi-orange); color: #fff; text-decoration: none; }

.related-posts { margin-top: 46px; }
.related-posts h4 { color: var(--wi-blue); font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.post-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post-grid--related .latestPost .title { font-size: 17px; line-height: 24px; }
.post-grid--related .front-view-content { font-size: 15px; }

/* ---------- sidebar ------------------------------------------------------ */
#sidebar { min-width: 0; }
#sidebar .widget { background: var(--wi-white); margin-bottom: 40px; }
#sidebar .widget:last-child { margin-bottom: 0; }

.widget-title {
  margin: 0 0 18px;
  background: var(--wi-panel); color: var(--wi-blue);
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px;
  padding: 16px 20px;
}
.widget-body { padding: 0 4px; }

.search-form { display: flex; }
.search-form__input {
  flex: 1 1 auto; min-width: 0;
  height: 44px; padding: 0 12px;
  border: 1px solid var(--wi-rule); border-right: 0; border-radius: 3px 0 0 3px;
  font-family: var(--wi-font); font-size: 15px; color: var(--wi-ink);
  background: #fff;
}
.search-form__button {
  flex: 0 0 auto; width: 46px; height: 44px;
  border: 0; border-radius: 0 3px 3px 0;
  background: #252525; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-form__button:hover { background: var(--wi-orange); }
.search-form__button svg { fill: currentColor; width: 22px; height: 22px; }

.social-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.social-row a { display: inline-flex; line-height: 0; }
.social-row img { width: 40px; height: 40px; display: block; }
.social-row a:hover img { opacity: .82; }

.cat-select {
  width: 100%; height: 44px; padding: 0 10px;
  border: 1px solid var(--wi-rule); border-radius: 3px; background: #fff;
  font-family: var(--wi-font); font-size: 15px; color: var(--wi-ink);
}
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li + li { margin-top: 8px; }

.trending-list { list-style: none; margin: 0; padding: 0; }
.trending-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--wi-rule); }
.trending-item:last-child { border-bottom: 0; }
.trending-item__thumb { flex: 0 0 74px; line-height: 0; }
.trending-item__thumb img { width: 74px; height: 55px; object-fit: cover; display: block; background: var(--wi-panel); }
.trending-item__title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--wi-blue); }
.trending-item__title:hover { color: var(--wi-orange); }

/* ---------- pagination --------------------------------------------------- */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin-top: 44px;
}
.page-numbers__strip { display: contents; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 999px; background: #F4F5F7; color: var(--wi-blue);
  font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none;
}
a.page-numbers:hover { background: var(--wi-orange); color: #fff; text-decoration: none; }
.page-numbers.current { background: var(--wi-blue); color: #fff; }
.page-numbers.dots { background: none; min-width: 20px; padding: 0; color: var(--wi-muted); }
.page-numbers.prev, .page-numbers.next { text-transform: uppercase; letter-spacing: .5px; }

/* ---------- footer ------------------------------------------------------- */
.site-footer { background: var(--wi-panel); color: var(--wi-muted); padding: 30px 0 10px; margin-top: 10px; }
.footer-widgets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.site-footer .widget { min-width: 0; }
.site-footer .widget-title {
  background: none; padding: 0; margin-bottom: 14px;
  color: var(--wi-blue); font-size: 15px; letter-spacing: 1px;
}
.site-footer a { color: var(--wi-blue); }
.site-footer a:hover { color: var(--wi-orange); }
.site-footer p { margin: 0 0 12px; }
.site-footer h6 { color: var(--wi-blue); font-size: 15px; margin: 16px 0 10px; }
.footer-brand img { width: 180px; height: 70px; object-fit: contain; }
.site-footer .textwidget i { color: var(--wi-orange); width: 18px; text-align: center; margin-right: 6px; }

/* Click-to-load map facade. The live embed pulls ~390 KB of Google JS on every
   URL even with loading="lazy"; this loads it only when asked. */
.map-facade { position: relative; }
.map-facade__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 160px; padding: 16px;
  border: 1px solid #cfe6f2; border-radius: 4px; cursor: pointer;
  background: linear-gradient(150deg, #eaf4fb, #dcecf6);
  color: var(--wi-blue); font-family: var(--wi-font); font-size: 14px; font-weight: 700;
}
.map-facade__btn:hover { background: linear-gradient(150deg, #e2f0fa, #cfe6f4); }
.map-facade__pin {
  width: 26px; height: 26px; background: var(--wi-orange);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.85);
}
.map-facade iframe { width: 100%; height: 160px; border: 0; display: block; }

.site-disclaimer { background: var(--wi-panel); padding: 6px 0 22px; }
.site-disclaimer h6 {
  max-width: 1010px; margin: 0 auto 10px; padding: 0 20px;
  text-align: center; font-size: 14px; font-weight: 500; line-height: 22px;
  color: var(--wi-blue);
}
.site-copyright { text-align: center; margin: 16px 0 0; color: var(--wi-muted); font-size: 15px; }
.site-copyright a { color: var(--wi-orange); }

/* ---------- error pages --------------------------------------------------- */
.error-page { padding: 40px 0 60px; text-align: center; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* =============================================================================
   RESPONSIVE
   Breakpoints chosen from where THIS layout actually breaks, measured with the
   CDP probe at 320/360/390/412/480/600/768/1024/1280/1440 — not copied from
   another site's sheet.
   ============================================================================= */

/* Sidebar cannot hold 300px beside a readable column below ~1024. */
@media (max-width: 1024px) {
  .content-wrap { grid-template-columns: minmax(0, 1fr); }
  #sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
  }
  #sidebar .widget { margin-bottom: 30px; }
  .post-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The nav no longer fits beside the logo and the CTA. */
@media (max-width: 900px) {
  #header .container { flex-wrap: wrap; gap: 10px 16px; }
  .toggle-mobile-menu { display: inline-flex; order: 3; }
  .primary-navigation { order: 3; flex: 0 0 auto; justify-content: flex-start; }
  .site-nav { display: none; }
  .nav-button { order: 2; }
  #logo img { width: 150px; height: 58px; }

  .mobile-menu-wrapper {
    display: none;
    order: 4; flex-basis: 100%; width: 100%;
    border-top: 1px solid var(--wi-rule);
    padding: 6px 0 10px;
  }
  .mobile-menu-wrapper[hidden] { display: none; }
  .mobile-menu-wrapper.is-open { display: block; }
  .mobile-menu-wrapper ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mobile-menu-wrapper li { border-bottom: 1px solid var(--wi-rule); }
  .mobile-menu-wrapper li:last-child { border-bottom: 0; }
  .mobile-menu-wrapper a { padding: 13px 2px; min-height: 44px; }
}

@media (max-width: 768px) {
  .footer-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .post-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-title, .page-title { font-size: 27px; }
  .post-single-content, .post-content { font-size: 17px; line-height: 29px; }
}

@media (max-width: 620px) {
  .content-wrap { padding: 26px 0 34px; gap: 30px; }
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .post-grid--related { grid-template-columns: minmax(0, 1fr); }
  #sidebar { grid-template-columns: minmax(0, 1fr); }
  .footer-widgets { grid-template-columns: minmax(0, 1fr); }
  .site-disclaimer h6 { padding: 0 16px; font-size: 13px; line-height: 21px; }
  .single-title, .page-title { font-size: 24px; line-height: 1.3; }
  .latestPost .title { font-size: 19px; }
  .post-content h2 { font-size: 22px; }
  .post-content h3 { font-size: 19px; }
}

/* Small phones. The container gutter drops to 10px a side rather than 16, because
   at 320 the reading measure matters more than the margin — and NOTHING below
   this point may re-widen it: an equal-specificity later rule silently winning
   back the old gutter is how the flagship site had text flush to both edges. */
@media (max-width: 400px) {
  .container { width: min(100% - 1.25rem, var(--wi-container)); }
  #logo img { width: 132px; height: 51px; }
  .button, .button.border { padding: 0 18px; font-size: 13px; }
  .toggle-mobile-menu { font-size: 14px; padding: 8px 6px; }
  .page-numbers { min-width: 36px; height: 36px; padding: 0 9px; font-size: 14px; }
  .social-row { gap: 10px; }
}

/* ---------- ported Elementor pages --------------------------------------- */
/* These bodies come from the RENDERED WordPress page and carry their own <style>
   block, which loads AFTER this sheet — so on equal specificity they win, which is
   what makes the design survive. The rules below only fix what breaks once the page
   leaves WordPress's own wrapper.

   Specificity note: everything that must beat a page block is written under
   .post-content, giving (0,2,x) against the page's (0,1,x). This is the fourth
   site on this fleet where that ladder decided the outcome. */

/* Elementor's own JS reveals these on scroll. The porter strips the class, but a
   belt-and-braces rule costs nothing and a single missed instance is an invisible
   section that still returns 200. */
.post-content .elementor-invisible { visibility: visible !important; }

/* Elementor sections assume a full-viewport parent. */
.post-content--full .elementor-section,
.post-content--full .e-con { max-width: 100%; }

/* 🚨 A container that is exactly 1140px wide overflows a 1024 viewport by 116px.
   Elementor's own responsive CSS handles most of this, but the boxed container
   width is set inline per section by the kit and needs a ceiling. */
.post-content--full .elementor-container { max-width: min(100%, 1140px); }

/* Images inside ported sections were sized for the WordPress column widths. */
.post-content--full img { max-width: 100%; height: auto; }

/* NOTE — the "Our Services" icon rings rendering BLUE instead of orange was NOT a
   rule missing from here. The page CSS says
     .elementor-element-3f00cf5 img{border-color:var(--e-global-color-secondary)}
   and that variable is defined on `.elementor-kit-4536`, a body class Ghost does not
   emit. Undefined var() -> border-color falls back to currentColor -> the theme's
   blue. The fix is the kit class on <body> in default.hbs, which repairs every
   Elementor global on all 13 pages at once. Do not "fix" it again here: a
   border-color rule at (0,2,1) is out-specified by the page's (0,3,1) anyway, so it
   would look like a fix and do nothing. */

/* Ported pages contain <a class="elementor-button"> which .post-content a would
   otherwise underline and repaint orange. `.post-content a` is (0,2,0) and beats
   `.elementor-button` (0,1,0) — the exact bug that rendered buttons violet-on-
   magenta on the flagship site. Undo it explicitly for buttons. */
.post-content a.elementor-button,
.post-content .elementor-button-wrapper a { text-decoration: none; }
.post-content a.elementor-button:hover { text-decoration: none; }

/* Any ported table or wide block scrolls in its own box rather than widening the page. */
.post-content--full .elementor-widget-table,
.post-content--full .elementor-widget-text-editor table { display: block; overflow-x: auto; }

/* =============================================================================
   HERO CAROUSEL — the native replacement for Smart Slider 3
   =============================================================================
   The ported Smart Slider rendered all six slides stacked and relied on its own JS
   to show one. Without that JS it measured a 2,953px EMPTY pale-blue block on
   staging. This is the same content as flex + scroll-snap: a working horizontal
   carousel with CSS alone, so nothing here depends on JavaScript to be visible.
   main.js only adds the dots and the auto-advance.

   Ground and type measured from the live hero: pale blue #F2FAFE band, blue
   heading, blue body copy, orange pill button. */
.wi-hero {
  position: relative;
  background: #F2FAFE;
  padding: 46px 0 54px;
  /* FULL-BLEED. On WordPress the slider was wrapped in <ss3-force-full-width>, so
     the pale band spanned the viewport. The ported hero sits inside a 1120px
     Elementor container, which left the band floating in the middle of the page.
     This breaks it back out. Safe against the classic 100vw-scrollbar overshoot
     because html/body carry `overflow-x: clip`, and the responsive audit measures
     document scrollWidth at every width to prove it. */
  margin-inline: calc(50% - 50vw);
}
/* The band is full-bleed; its CONTENTS stay on the 1110px measure, which the rail
   and the dots already do for themselves via `width: min(…)` + `margin: auto`. */

/* 🚨 SPECIFICITY: the hero lives INSIDE .post-content, so this theme's own content
   rules out-specify it. Both of these were measured on staging, not guessed:
     .post-content ul { padding-left: 1.4em }  (0,2,0)  beat  .wi-hero__rail (0,1,0)
        -> 1.4em at 18px = 25.2px, and the rail measured slideW 1084.8 against
           railW 1110 — a 25.2px difference — so slide 2 peeked in from the right.
     .post-content a { color: var(--wi-orange) } (0,2,0) beat .wi-hero__btn (0,1,0)
        -> the button rendered orange-on-orange: the label "BOOK NOW" was in the
           HTML and simply invisible.
   Both are fixed by matching the element as well as the class, which is (0,2,1).
   This is the third component on this fleet that .post-content has silently
   restyled; assume anything emitted into a post body is already styled and MEASURE
   the computed value. */
.post-content ul.wi-hero__rail,
.wi-hero__rail {
  display: flex;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100% - 2rem, var(--wi-container));
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* The rail is focusable so it can be scrolled from the keyboard; the ring must
     stay visible. */
  scroll-behavior: smooth;
}
.wi-hero__rail::-webkit-scrollbar { display: none; }

.wi-hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  min-width: 0;
}

.wi-hero__text { min-width: 0; }

.wi-hero__title {
  color: var(--wi-blue);
  font-size: 44px;
  line-height: 1.14;
  font-weight: 700;
  margin: 0 0 16px;
}

.wi-hero__body {
  color: var(--wi-blue);
  font-size: 17px;
  line-height: 28px;
  margin: 0 0 26px;
  max-width: 46ch;
}

/* (0,2,1) — must beat `.post-content a { color: var(--wi-orange) }` at (0,2,0),
   which rendered this button orange-on-orange. See the specificity note above. */
.post-content a.wi-hero__btn,
.wi-hero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 30px;
  background: var(--wi-orange); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .3px;
  border-radius: 999px; text-decoration: none;
  transition: background .18s ease;
}
.post-content a.wi-hero__btn:hover,
.wi-hero__btn:hover { background: var(--wi-orange-hover); color: #fff; text-decoration: none; }

.wi-hero__media { min-width: 0; }
.wi-hero__media img {
  display: block; width: 100%; height: auto;
  max-height: 380px; object-fit: contain; margin-inline: auto;
}

.wi-hero__dots {
  display: flex; justify-content: center; gap: 9px;
  margin-top: 26px;
}
/* WCAG 2.5.8 AA wants a 24x24 target. An 11px dot with a transparent ::after to
   pad the hit area DOES work in a browser, but the audit measures the element's own
   rect and reported `button.wi-hero__dot 11x11` — and an auditor reading that report
   cannot tell a padded control from a genuinely tiny one. So the BUTTON is 24x24 and
   the 11px dot is drawn by ::before: same appearance, honest geometry. */
.wi-hero__dot {
  width: 24px; height: 24px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.wi-hero__dot::before {
  content: ''; width: 11px; height: 11px; border-radius: 50%;
  background: #C9DCE6; transition: background .18s ease;
}
.wi-hero__dot[aria-selected="true"]::before { background: var(--wi-blue); }
.wi-hero__dot:hover::before { background: var(--wi-orange); }

@media (max-width: 900px) {
  .wi-hero { padding: 34px 0 40px; }
  .wi-hero__slide { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .wi-hero__media { order: -1; }
  .wi-hero__media img { max-height: 240px; }
  .wi-hero__title { font-size: 32px; }
  .wi-hero__body { font-size: 16px; line-height: 26px; max-width: none; }
}

@media (max-width: 620px) {
  .wi-hero { padding: 26px 0 32px; }
  .wi-hero__title { font-size: 26px; }
  .wi-hero__body { font-size: 15px; line-height: 25px; margin-bottom: 20px; }
  .wi-hero__media img { max-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .wi-hero__rail { scroll-behavior: auto; }
}

/* =============================================================================
   BUTTON SPECIFICITY vs THE ELEMENTOR KIT
   The kit ships, and <body> now carries elementor-kit-4536 because the colour
   variables live on it:
       .elementor-kit-4536 button,
       .elementor-kit-4536 input[type="button"],
       .elementor-kit-4536 input[type="submit"],
       .elementor-kit-4536 .elementor-button { background-color:#F53100; color:#FFF }
   That is (0,1,1) and it applies to EVERY <button> in this theme. Measured at
   390px it painted `#pull` as an 86x44 solid orange block and every hero dot as a
   24x24 orange square, against `background: none` here at (0,1,0).
   Swapping the sheet order did NOT fix it — the kit rule simply outranks a plain
   class. So every button this theme owns is selected at (0,2,x) or with its id.
   ============================================================================= */
.wi-hero__dots button.wi-hero__dot {
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}
#pull.toggle-mobile-menu {
  background: none;
  color: var(--wi-blue);
  border-radius: 0;
  box-shadow: none;
}
.widget .search-form__button,
.search-form button.search-form__button {
  background: #252525;
  color: #fff;
}
.widget .search-form__button:hover,
.search-form button.search-form__button:hover { background: var(--wi-orange); }

/* =============================================================================
   MOBILE POLISH — measured at 320/360/375/390/412/428, not estimated.
   Desktop and tablet are untouched: every rule below sits inside a max-width
   query, except the CTA and separator fixes, which correct defects at all widths.
   ============================================================================= */

/* The header CTA.
   `.wi-cta` replaces WordPress's `.border`, which killed the 2px grey border. The
   grey TEXT was a second, separate rule and needed a second fix:
       #header .nav-button .button { color: inherit }     (1,2,0)
   is an ID selector in the bundled WordPress sheet, so it beat `.nav-button
   a.wi-cta` at (0,2,1) and made the label inherit the body grey — measured
   rgb(160,145,149) on rgb(245,49,0), which is 2.2:1 and fails AA outright.
   Matching #header here makes it (1,2,1).
   Found by asking the BROWSER which rules matched and sorting by specificity,
   after two guesses aimed at the wrong selector. */
#header .nav-button a.wi-cta,
#header .nav-button a.button,
.nav-button a.wi-cta {
  background: var(--wi-orange);
  color: #fff;                 /* 4.62:1 on the orange ground — AA */
  border: 0;
  border-radius: 3px;
  box-shadow: none;
}
#header .nav-button a.wi-cta:hover { background: var(--wi-orange-hover); color: #fff; }

/* The comma between category names. It is a real element so it inherits the
   category colour and cannot be selected as part of a link label. */
.thecategory__sep { color: var(--wi-orange); font-weight: 700; }

@media (max-width: 900px) {
  /* ONE header row, not two. Previously the logo and CTA took row 1 and MENU sat
     alone on row 2, costing 130px of header on a 390px screen before any content.
     Now: logo | MENU | CTA on a single row, and the drawer opens beneath it. */
  #header .container {
    flex-wrap: wrap;
    gap: 0 10px;
    padding-block: 6px;
  }
  .logo-wrap { order: 1; }
  .primary-navigation { order: 2; flex: 0 0 auto; margin-left: auto; }
  .nav-button { order: 3; margin-left: 0; }
  .mobile-menu-wrapper { order: 4; }

  #logo img { width: 128px; height: 50px; }
  .toggle-mobile-menu { padding: 8px; font-size: 0; gap: 0; }   /* glyph only */
  .toggle-mobile-menu span { display: none; }
  .toggle-mobile-menu::after { width: 22px; }
  .nav-button a.wi-cta { height: 38px; padding: 0 14px; font-size: 13px; }
}

@media (max-width: 620px) {
  /* Cards: the media box was a 16/11 crop 254px tall on a 370px card, which is a
     lot of vertical space before any words. 16/10 and a cap keeps three cards
     reachable in a thumb-scroll. */
  .latestPost__media img { aspect-ratio: 16 / 10; max-height: 210px; }
  .post-grid { gap: 26px; }

  /* Read More was falling onto its own line with an inherited indent. Keeping it
     inline after the excerpt is how WordPress rendered it. */
  .front-view-content { font-size: 15.5px; line-height: 25px; }
  .read-more { margin-left: .25em; }

  /* Section rhythm: the ported pages bring their own generous WordPress padding,
     which reads as dead space on a phone. */
  .content-wrap { padding: 20px 0 28px; gap: 26px; }
  .site-footer { padding: 24px 0 8px; }
  .footer-widgets { gap: 22px; }
  .site-disclaimer { padding: 4px 0 18px; }
  .site-copyright { margin-top: 12px; font-size: 14px; }
  .related-posts { margin-top: 34px; }
  .related-posts h4 { font-size: 20px; }

  /* Sidebar widgets stack under the content; tighten their spacing. */
  #sidebar .widget { margin-bottom: 26px; }
  .widget-title { padding: 13px 16px; margin-bottom: 14px; }
}

@media (max-width: 400px) {
  /* 320-400. The gutter is already 10px a side from the base rules; nothing here
     may re-widen it, and nothing below this block may either. */
  #logo img { width: 112px; height: 44px; }
  .nav-button a.wi-cta { height: 36px; padding: 0 11px; font-size: 12px; letter-spacing: 0; }
  .single-title, .page-title { font-size: 22px; line-height: 1.28; }
  .latestPost .title { font-size: 18px; line-height: 25px; }
  .thecategory a { font-size: 13.5px; letter-spacing: 1px; }
  .post-single-content, .post-content { font-size: 16px; line-height: 27px; }
  .post-content h2 { font-size: 20px; }
  .post-content h3 { font-size: 18px; }
  .latestPost__media img { max-height: 180px; }
  .share__btn { width: 38px; height: 38px; }
  .trending-item__thumb { flex-basis: 64px; }
  .trending-item__thumb img { width: 64px; height: 48px; }
}

/* The map facade is the fourth and last <button> this theme owns, and the Elementor
   kit's `.elementor-kit-4536 button { background-color:#F53100; color:#FFF }` at
   (0,1,1) repainted it too: the pale gradient still showed (it is a background-IMAGE
   and wins over the kit's background-COLOR) but the label went WHITE on it — 1.1:1,
   effectively invisible. Same rule, fourth victim. (0,2,0) fixes it.
   The four buttons this theme owns are now all pinned: #pull, .wi-hero__dot,
   .search-form__button, .map-facade__btn — and probe-intent.js asserts each one. */
.map-facade button.map-facade__btn {
  color: var(--wi-blue);
  background-color: transparent;
}
.map-facade button.map-facade__btn:hover { color: var(--wi-blue-hover); }

/* The 13 ported Elementor pages style their own links, and this theme must not
   reach into them. Measured on /services/: every other property already matched the
   live site exactly — colour rgb(30,111,146), 20px, weight 500, Roboto — and only
   `text-decoration` differed, `none` on WordPress against `underline` here, because
   `.post-content a { text-decoration: underline }` also matches anchors inside
   .post-content--full. Underlines stay on POST bodies, where they are real inline
   links in prose; they come off the ported pages, where the anchor IS the heading. */
.post-content--full a { text-decoration: none; }
.post-content--full a:hover { text-decoration: none; }

/* Error-page buttons. `.wi-btn` at (0,2,0) via the wrapper, so neither the bundled
   WordPress `.button.border` nor the Elementor kit's button rule can repaint them. */
.error-actions a.wi-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px;
  background: var(--wi-orange); color: #fff;
  border: 0; border-radius: 3px;
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.error-actions a.wi-btn:hover { background: var(--wi-orange-hover); color: #fff; text-decoration: none; }
.error-actions a.wi-btn--ghost {
  background: transparent; color: var(--wi-blue);
  box-shadow: inset 0 0 0 2px currentColor;
}
.error-actions a.wi-btn--ghost:hover { background: var(--wi-blue); color: #fff; box-shadow: none; }

/* Koenig card classes gscan expects a theme to style. They are not used by any of
   the 73 imported items today (swept: kg-image is the only card type present), but a
   card added later would otherwise render unstyled with no warning. */
.kg-file-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--wi-rule); border-radius: 4px; padding: 12px; }
.kg-file-card-container { display: flex; align-items: center; gap: 12px; width: 100%; }
.kg-file-card-contents { min-width: 0; }
.kg-file-card-title { font-weight: 700; color: var(--wi-blue); }
.kg-file-card-caption { color: var(--wi-muted); font-size: 14px; }
.kg-file-card-filename { color: var(--wi-muted); font-size: 13px; }
.kg-file-card-filesize { color: var(--wi-muted); font-size: 13px; }
.kg-file-card-medium .kg-file-card-title { font-size: 17px; }
.kg-file-card-small .kg-file-card-title { font-size: 15px; }
.kg-blockquote-alt { font-style: italic; color: var(--wi-ink); border-left: 0; padding-left: 0; text-align: center; }