/* Scope note: public-page rules are keyed on body:not(:has(.admin-web-content)) rather than
   body.full-page. Only SOME public pages carry the full-page body class -- /careers carries no body
   class at all -- so full-page silently skipped them. Admin pages are the thing that actually needs
   excluding (this stylesheet loads there too), and they are reliably identifiable by their
   .admin-web-content wrapper, which no public page has. */
/* ---- Source Sans 3 (SIL Open Font License 1.1) ----
   Embedded as a data URI rather than linked from a font CDN: every visitor would otherwise make a
   third-party request on page load, which is not something a DIB/CUI-facing site should introduce
   for a cosmetic dependency. This is the latin subset of the VARIABLE font, so one 28KB file covers
   the whole 400-700 weight range -- no separate file per weight, and no extra request at all.
   The reference site declares Inter but never loads it, so it silently falls back to system-ui;
   this replaces that guesswork with a face we actually control. */
/* Inter is served by the platform itself at /css/google-fonts/inter.css - five
   self-hosted weights (400/500/700/800/900), same-origin, no external font host. A local
   @font-face here would only duplicate that download, so the stack below just names Inter
   and lets the platform stylesheet supply the files. */
body,
h1, h2, h3, h4, h5, h6,
.button, button,
input, select, textarea,
.menu a {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.header-item .is-dropdown-submenu.is-dropdown-submenu{background-color:rgb(53,53,53);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgb(0 0 0 / 35%);min-width:280px} .float-left.header-item ul.dropdown.menu>li>a{font-size:17.6px !important} .float-left.header-item ul.is-dropdown-submenu li>a{font-size:16.5px !important} 

/* ---- Body copy size ----
   simisinc.com sets its section copy at 1.2rem; the pilot was inheriting the 1rem default, which is
   what made the body text read small next to the headings.
   Set on the content wrapper rather than on body, for two reasons: the custom stylesheet is also
   loaded on /admin pages (that is how the admin UI picked up Source Sans 3), and the admin body
   carries no class -- scoping to body:not(:has(.admin-web-content)) .platform-body keeps the admin UI at its own size.
   Everything with an explicit rem size is unaffected, since rem resolves against the ROOT element,
   not this container: the hero caption, the navy bar and every heading keep the sizes set for them.
   Only text that was inheriting the default moves. */
body:not(:has(.admin-web-content)) .platform-body {
  font-size: 1.25rem;
  line-height: 1.6;
}
/* Cards sit a step below the running body copy: their columns are a quarter of the page wide, so
   the size that reads well across a full-width paragraph is too heavy inside a narrow card.
   .cell.callout is the card column (12 of them: 4 Featured Work + 8 Capabilities). The section
   intro paragraphs live in a plain .small-12.cell, so they keep the larger body size. */
body:not(:has(.admin-web-content)) .platform-body .cell.callout {
  font-size: 1.125rem;
}

/* Hero banner caption -- SimIS brand treatment (matches simisinc.com) */
.hero-banner .hero-slide-caption { max-width: 820px; }
.hero-banner .hero-slide-caption .text-brand,
.hero-banner .hero-slide-caption .hero-kicker {
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 12px;
}
/* Kicker is red; the orange belongs to the accent rule and button below it */
.hero-banner .hero-slide-caption .hero-kicker { color: #e23122; }
.hero-banner .hero-slide-caption h1,
.hero-banner .hero-slide-caption h2,
.hero-banner .hero-slide-caption h3 {
  font-size: 3rem; font-weight: 800; line-height: 1.1; margin-bottom: 12px;
}
/* Accent rule under the headline. A pseudo-element because an empty <span> in page content is
   removed on save by the content sanitizer, so there is no element to place here. */
.hero-banner .hero-slide-caption h1::after,
.hero-banner .hero-slide-caption h2::after,
.hero-banner .hero-slide-caption h3::after {
  content: ""; display: block; width: 8rem; height: 4px; border-radius: 2px;
  margin: 16px 0 20px; background: linear-gradient(90deg, #ff8c00, rgba(255,140,0,0));
}
.hero-banner .hero-slide-caption p { font-size: 1.45rem; line-height: 1.5; margin-bottom: 16px; }
/* The company motto -- bold and larger, as on simisinc.com. Opt-in per slide. */
.hero-banner .hero-slide-caption p.hero-tagline { font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; }
.hero-banner .hero-slide-caption .button { font-size: 1.05rem; padding: 13px 30px; margin-top: 12px; }

@media (max-width: 1024px) {
  .hero-banner .hero-slide-caption h1,
  .hero-banner .hero-slide-caption h2,
  .hero-banner .hero-slide-caption h3 { font-size: 2.25rem; }
  .hero-banner .hero-slide-caption p.hero-tagline { font-size: 1.5rem; }
}
@media (max-width: 640px) {
  .hero-banner .hero-slide-caption h1,
  .hero-banner .hero-slide-caption h2,
  .hero-banner .hero-slide-caption h3 { font-size: 1.85rem; }
  .hero-banner .hero-slide-caption p,
  .hero-banner .hero-slide-caption p.hero-tagline { font-size: 1.15rem; }
}
/* Left-hand scrim behind the hero caption.
   An ::after rather than ::before on purpose: platform.css paints the slide image at z-index 0, and
   a ::before would be painted BEFORE the image and hidden underneath it. ::after paints after the
   slide content, so it covers the photo, while the caption keeps platform.css's z-index 1 and stays
   on top of both. pointer-events:none so it can never intercept a click.
   30% black held flat across the caption area, then faded out well before the right edge so the
   artwork on that side is untouched. */
.hero-banner .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 45%,
    rgba(0, 0, 0, 0) 75%);
}

/* Brand button shape -- matches the hero CTA on simisinc.com (6px, weight 600).
   Applied to .button.brand rather than only the hero so every brand button is consistent. */
.button.brand,
.button.brand:hover,
.button.brand:focus {
  border-radius: 6px;
  font-weight: 600;
}
/* ---- Hero slider controls, overlaid on the image (matches simisinc.com) ----
   The platform stacks the pagination and the pause control BELOW the slide, in a white strip.
   simisinc.com floats its dots over the image instead. Both are taken out of flow here and
   positioned inside .hero-banner, so the outer container collapses to the slide height and the
   white strip disappears. */
.hero-banner { position: relative; }

/* Dots: an 11px visible circle inside a 24px box on a 28px pitch -- the simisinc.com geometry.
   These are position indicators, not controls: the widget builds the slider with
   pagination.clickable = false, so they are correctly non-focusable and carry no role. */
.hero-banner .swiper-pagination.swiper-pagination-horizontal {
  position: absolute; bottom: 22px; left: 0; right: 0; z-index: 3; line-height: 0;
}
.hero-banner .swiper-pagination-bullet {
  width: 24px; height: 24px; position: relative; border-radius: 50%;
  background: transparent !important; opacity: 1 !important; margin: 0 2px !important;
}
.hero-banner .swiper-pagination-bullet::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: rgba(255,255,255,0.45); transition: background 0.2s ease;
}
.hero-banner .swiper-pagination-bullet-active::before { background: #ff8c00; }

/* WCAG 2.2.2 pause control.
   Kept dark for any slider sitting on the normal white page background: the theme emits
   ".button{color:<theme> !important}", which overrides Foundation's deliberate .button.clear
   color -- a clear button is transparent, so its text must contrast with the PAGE, not sit at the
   solid-button text color. That made this control white-on-white and invisible to sighted users
   while remaining present for screen readers. Fixed upstream in SimisRnD/simis-cms#1348; this
   site still runs the old rule, so the override stays until that ships. */
.swiper-autoplay-control .swiper-autoplay-toggle.button,
.swiper-autoplay-control .swiper-autoplay-toggle.button:hover,
.swiper-autoplay-control .swiper-autoplay-toggle.button:focus {
  color: #53575c !important;
}
.swiper-autoplay-control .swiper-autoplay-toggle.button:focus-visible {
  outline: 2px solid #1779ba; outline-offset: 2px;
}

/* In the hero the same control sits on the photo, so it flips back to white. The slide behind it
   is not a predictable background, so a translucent disc gives the icon a consistent ground and
   1.4.11 non-text contrast holds whichever slide is showing. 0.55 rather than 0.4: the worst case is a light slide, where 0.4 composites to #999999 and the white glyph reaches only 2.85:1 -- below the floor this sentence claims. 0.55 composites to #737373, giving 4.74:1. 34px keeps it over the 2.5.8
   target-size minimum. */
.hero-banner .swiper-autoplay-control {
  position: absolute; bottom: 14px; right: 48px; z-index: 3; width: auto; margin: 0;
}
.hero-banner .swiper-autoplay-control .swiper-autoplay-toggle.button,
.hero-banner .swiper-autoplay-control .swiper-autoplay-toggle.button:hover,
.hero-banner .swiper-autoplay-control .swiper-autoplay-toggle.button:focus {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
  width: 34px; height: 34px; padding: 0; margin: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-banner .swiper-autoplay-control .swiper-autoplay-toggle.button:hover,
.hero-banner .swiper-autoplay-control .swiper-autoplay-toggle.button:focus {
  background-color: rgba(0,0,0,0.65) !important;
}
.hero-banner .swiper-autoplay-control .swiper-autoplay-toggle.button:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}

@media (max-width: 640px) {
  .hero-banner .swiper-pagination.swiper-pagination-horizontal { bottom: 16px; }
  .hero-banner .swiper-autoplay-control { bottom: 10px; right: 16px; }
}
/* ---- Credentials bar ----
   Contained rather than full bleed. Sits slightly narrower than the 1170px page content column so
   it reads as its own band rather than as part of the section below it.
   This platform ships .row with no max-width, so removing "expanded" from the page XML stopped the
   section claiming full width but did not centre it -- the max-width has to be set here.
   Selected on the inline brand color, not the element id: the platform regenerates the id on every
   render (id="random1"), so an id-based rule would silently stop matching after a page save.
   padding needs !important because the page XML sets it inline. */
.row.platform-no-margin[style*="0E1636"] {
  max-width: 1100px;
  margin: 48px auto !important;
  padding: 16px 24px !important;
  border-radius: 8px;
}
/* The section beneath paints its own background image flush to the bar, so the white gap below has
   to come from the bar's margin above; padding here would land inside the light area instead. */
.row.platform-no-margin[style*="0E1636"] + .grid-x {
  padding-top: 48px !important;
}
/* The stray bottom margin is Foundation's default on p: it left 18px of navy above
   the text and 34px below, so the text was not vertically centred in its own bar. */
/* platform.css also puts margin-bottom:10px on .platform-content, which stacked under the p and
   left the text sitting 10px high in its own bar. Zero both so the text is truly centred. */
.row.platform-no-margin[style*="0E1636"] .platform-content,
.row.platform-no-margin[style*="0E1636"] .platform-content-container {
  margin-bottom: 0;
}
.row.platform-no-margin[style*="0E1636"] p {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0;
}
/* Separators are wrapped per-bullet in the page XML so they can take the brand red -- they are
   plain text characters otherwise and CSS cannot reach them. */
.bar-sep {
  color: #e23122;
  margin: 0 0.45em;
}
/* cache-token probe */
/* ---- Featured Work cards ----
   Matches simisinc.com: the image sits flush to the card edge under a uniform crop, the text keeps
   its own padding, with rounded corners and a soft shadow in the brand navy (#0E1636 at 18%).
   Scoped with :has(img): .cell.callout is shared with the 8 Capabilities cards, which carry no
   image and must keep their padded layout, so a bare .cell.callout rule would wreck them.
   aspect-ratio rather than a fixed pixel height, so the crop holds as the column width changes. */
body:not(:has(.admin-web-content)) .platform-body .cell.callout:has(img) {
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(14, 22, 54, 0.18);
  overflow: hidden;
}
body:not(:has(.admin-web-content)) .platform-body .cell.callout:has(img) img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* The card gave up its padding so the image could go edge to edge -- hand it back to the text. */




/* ---- Card grid width ----
   The card grid ran the full width of the page, which made the cards far wider than the reference
   (422px vs 270px) and left them butted against the window edges. One grid holds all 15 cells --
   both section headings, both intros, and all 12 cards -- so constraining it aligns the whole body
   with the credentials bar above.
   PADDING, not max-width: this same grid paints the section background image, so constraining its
   width boxed the background into a panel instead of letting it run edge to edge. Padding insets
   the cells while the background still fills the page. max(0px, ...) so the calc cannot go negative
   below 1100px wide. */
body:not(:has(.admin-web-content)) .platform-body .grid-x:has(> .cell.callout),
body:not(:has(.admin-web-content)) .platform-body .grid-x.home-about {
  padding-left: max(0px, calc((100% - 1100px) / 2));
  padding-right: max(0px, calc((100% - 1100px) / 2));
}

/* Hover lift on the Featured Work cards, matching the reference (transform + shadow, 0.15s).
   Applied to all 12 cards -- simisinc.com gives its Capabilities cards the same lift as its
   Featured Work cards. */
body:not(:has(.admin-web-content)) .platform-body .cell.callout {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body:not(:has(.admin-web-content)) .platform-body .cell.callout:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(14, 22, 54, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-web-content)) .platform-body .cell.callout,
  body:not(:has(.admin-web-content)) .platform-body .cell.callout:hover {
    transition: none;
    transform: none;
  }
}

/* ---- Section heading accents ----
   Two variants, both from simisinc.com: the left-aligned heading (Explore Our Solutions) takes a
   150px bar fading to the right; the centered ones (Featured Work, Capabilities) take an 82px bar
   with a symmetric fade. Base rule first, centered override second -- identical specificity, so
   source order is what decides. */
body:not(:has(.admin-web-content)) .platform-body .platform-content > h2::after {
  content: "";
  display: block;
  width: 150px;
  height: 3px;
  margin: 14px 0 0;
  background: linear-gradient(90deg, rgb(255,140,0), rgba(255,140,0,0));
}
body:not(:has(.admin-web-content)) .platform-body .text-center h2::after {
  width: 82px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
}
/* Capabilities cards get the same resting chrome as the Featured Work cards, which is how
   simisinc.com has it: 10px radius and the brand-navy shadow on both. They keep their own padding
   and orange top rule -- they have no banner image, so nothing needs to sit flush to the edge. */
body:not(:has(.admin-web-content)) .platform-body .cell.callout:not(:has(img)) {
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(14, 22, 54, 0.18);
}
/* Section intros pulled in, so Featured Work and Capabilities read as their own blocks rather
   than running the full column width. simisinc.com holds these to 660-680px; the left-aligned
   Explore intro is deliberately NOT constrained there, so it is left alone here too.
   Keyed on "h2 + p": the credentials bar sits in a .text-center cell as well, but its paragraph
   has no heading before it, so this cannot reach it. */
body:not(:has(.admin-web-content)) .platform-body .text-center h2 + p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
/* ---- Card interior padding ----
   Every card now carries a banner image, so the image stays flush to the card edge and the TEXT
   takes the inset. The tricky part is the two kinds of <a>: on Featured Work cards the link WRAPS
   the banner image and must stay flush; on Capabilities cards it is the "Learn More" text and needs
   the inset. :not(a:has(img)) is what separates them. */
body:not(:has(.admin-web-content)) .platform-body .cell.callout .platform-content > *:not(img):not(a:has(img)) {
  padding-left: 20px;
  padding-right: 20px;
}
body:not(:has(.admin-web-content)) .platform-body .cell.callout .platform-content > img + *,
body:not(:has(.admin-web-content)) .platform-body .cell.callout .platform-content > a:has(img) + * {
  padding-top: 18px;
}
body:not(:has(.admin-web-content)) .platform-body .cell.callout .platform-content > *:last-child {
  padding-bottom: 18px;
}


/* The caret was pinned to a fixed colour, so it stayed white while its label turned orange.
   currentColor makes it track the label in every state instead. */
.float-left.header-item ul.dropdown.menu > li > a::after {
  border-top-color: currentColor !important;
}
/* ---- Capability banners ----
   These are wide art (about 3.06:1) at a modest source resolution. Forcing them into the 16:10 box
   the Featured Work cards use meant object-fit:cover had to magnify them roughly 1.9x and crop the
   sides, which is what made them look soft. Matching the box to the artwork means the browser only
   ever scales DOWN, so they stay sharp.
   object-fit is CONTAIN, not cover: the cybersecurity artwork is only 210 rows tall against 246 for
   the rest, so cover had to zoom it ~17% more than its neighbours and its shield read noticeably
   larger. Contain shows every banner whole at its own proportions, and the few pixels of letterbox
   that leaves sit on a background sampled from the artwork itself (rgb 5,16,40), so it is invisible.
   Scoped with :has(h3): only the Capabilities cards have a heading element -- the Featured Work
   cards keep 16:10, since their source images are high enough resolution to fill it cleanly. */
body:not(:has(.admin-web-content)) .platform-body .cell.callout:has(h3) img {
  aspect-ratio: 752 / 246;
  object-fit: contain;
  background-color: #051028;
}
/* ---- Customers & Partners logo grid ----
   Matches simisinc.com exactly: 140x140 cells, three per row, object-fit:contain so each emblem
   sits in its own square without being cropped or stretched. The logos have transparent
   backgrounds, so no fill is set behind them. */
body:not(:has(.admin-web-content)) .platform-body .partner-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: 8px;
  margin-top: 20px;
}
body:not(:has(.admin-web-content)) .platform-body .partner-logos img {
  width: 140px;
  height: 140px;
  max-width: 100%;
  object-fit: contain;
}
/* The two columns of this section read as body copy, so the headings match the other section
   headings rather than the card headings. */
body:not(:has(.admin-web-content)) .platform-body .partner-logos + p {
  margin-top: 16px;
}
@media (max-width: 640px) {
  body:not(:has(.admin-web-content)) .platform-body .partner-logos img { width: 110px; height: 110px; }
}
/* Who We Are sits wider than Customers & Partners on simisinc.com (about 570 vs 470 in the 1170
   column), which the medium-7 / medium-5 split reproduces. Give the two columns a little air
   between them and space above the section. */
/* Pale blue-grey ground: a shade cooler and slightly deeper than the textured section above, so
   this reads as its own band without a heavy colour block. Deliberately light -- 10 of the 12
   partner emblems are transparent PNGs and one (NIWC Atlantic) carries a baked-in white box, so a
   dark ground would leave that one floating as a white rectangle. A light ground suits all 12.
   The hairline top and bottom keep the boundary crisp against the texture on either side. */
body:not(:has(.admin-web-content)) .platform-body .grid-x.home-about {
  padding-top: 56px;
  padding-bottom: 56px;
  background-color: #eef1f6;
  border-top: 1px solid #dde2ea;
  border-bottom: 1px solid #dde2ea;
}
/* Pull the Who We Are column in so the two halves are not crowded. simisinc.com leaves about
   129px between the end of its left column and the start of Customers & Partners; this reproduces
   that at our 1100px column. Removed below 640px, where the columns stack. */
body:not(:has(.admin-web-content)) .platform-body .grid-x.home-about > .cell:first-child {
  padding-right: 90px;
}
@media (max-width: 640px) {
  body:not(:has(.admin-web-content)) .platform-body .grid-x.home-about > .cell:first-child { padding-right: 0; }
}
/* The textured section above carries a 15px bottom margin of its own. Neither it nor this section
   paints that strip, so it showed as a white band between the two backgrounds. Zero it only where
   that grid is immediately followed by this one, so no other section spacing is disturbed. */
body:not(:has(.admin-web-content)) .platform-body .grid-x:has(+ .grid-x.home-about) {
  margin-bottom: 0;
}
/* ---- Careers page ----
   Mirrors simisinc.com: the tech artwork fills the section behind a translucent panel, and the
   copy sits on the panel in white. The background is set here rather than on <body> because the
   platform gives every public page the same body class, so a body-level rule would leak the
   artwork onto every other page. Attaching it to the section keeps it to Careers.
   background-attachment is scroll, not fixed: fixed is ignored on iOS Safari and silently falls
   back anyway, and this section is short enough that parallax buys nothing. */
body:not(:has(.admin-web-content)) .platform-body .careers-hero {
  background-color: #0b1024;
  background-image: url(/assets/img/20260824203651-302/careersbg2.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 70px 20px 90px;
  margin-bottom: 0;
}
body:not(:has(.admin-web-content)) .platform-body .careers-panel {
  max-width: 800px;
  margin: 0 auto;
  padding: 44px 40px;
  background-color: rgba(18, 23, 40, 0.58);
  border-radius: 18px;
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .platform-body .careers-panel h1,
body:not(:has(.admin-web-content)) .platform-body .careers-panel h2 {
  color: #ffffff;
  text-align: center;
}
/* Centered accent under the heading, same 82x3 treatment as the home page sections. */
body:not(:has(.admin-web-content)) .platform-body .careers-panel h1::after,
body:not(:has(.admin-web-content)) .platform-body .careers-panel h2::after {
  content: "";
  display: block;
  width: 82px;
  height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
}
body:not(:has(.admin-web-content)) .platform-body .careers-panel p {
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .platform-body .careers-panel .careers-cta {
  text-align: center;
  margin: 28px 0;
}
/* The EEO notice is legal boilerplate, so it is set quieter than the body copy above it. */
body:not(:has(.admin-web-content)) .platform-body .careers-panel .careers-eeo {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
/* Award badges: white tiles so each logo sits on the ground it was drawn for, rather than
   fighting the dark panel behind it. */
body:not(:has(.admin-web-content)) .platform-body .careers-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}
body:not(:has(.admin-web-content)) .platform-body .careers-badges img {
  height: 96px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px 14px;
}
@media (max-width: 640px) {
  body:not(:has(.admin-web-content)) .platform-body .careers-panel { padding: 30px 20px; }
  body:not(:has(.admin-web-content)) .platform-body .careers-badges img { height: 72px; }
}
/* ---- Careers: full-bleed edges ----
   platform.css puts margin-top:25px on .platform-body, and the home page only escapes it because
   .full-page overrides it -- /careers has no body class, so the margin showed as a white bar above
   the artwork. Below the section sits the render-time strip, which is its own element outside our
   control. Painting .platform-body the same navy means both strips blend instead of flashing white,
   and it is scoped to pages that actually have this hero. */
body:has(.careers-hero) .platform-body {
  margin-top: 0;
  background-color: #0b1024;
}

/* ---- Careers: award badges ----
   Each links to the awarding organisation and lifts on hover, matching simisinc.com (transform +
   shadow at 0.22s). Suppressed under prefers-reduced-motion. */
body:not(:has(.admin-web-content)) .careers-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 12px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
body:not(:has(.admin-web-content)) .careers-badge:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
body:not(:has(.admin-web-content)) .careers-badge:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-web-content)) .careers-badge, body:not(:has(.admin-web-content)) .careers-badge:hover { transition: none; transform: none; }
}

/* ---- Careers: call to action ----
   Larger than the site default and matched to the reference (20px, 16/26 padding, 8px radius).
   The arrow is a Font Awesome glyph marked aria-hidden, so the link still reads as just
   "View Open Positions" to a screen reader. */
body:not(:has(.admin-web-content)) .careers-button.button {
  font-size: 1.25rem;
  padding: 16px 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* Arrow drawn as a pseudo-element rather than an <i> in the content: the sanitizer strips
   aria-hidden from page-XML markup, which would have left a bare Font Awesome glyph element in the
   DOM for a screen reader to announce. As ::after it is decorative by construction and the link
   still reads as plain "View Open Positions". */
body:not(:has(.admin-web-content)) .careers-button.button::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9em;
  transition: transform 0.18s ease;
}
body:not(:has(.admin-web-content)) .careers-button.button:hover::after {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-web-content)) .careers-button.button::after, body:not(:has(.admin-web-content)) .careers-button.button:hover::after { transition: none; transform: none; }
}
/* ---- Current Job Openings ----
   Same treatment as /careers so the two read as a pair: shared artwork, translucent panels.
   Three separate sections (intro, listings, EEO) rather than one, so the JazzHR widget can be
   dropped into the middle one without disturbing the copy either side of it. */
body:has(.jobs-hero) .platform-body {
  margin-top: 0;
  background-color: #0b1024;
}
body:not(:has(.admin-web-content)) .jobs-hero,
body:not(:has(.admin-web-content)) .jobs-listings {
  background-color: #0b1024;
  background-image: url(/assets/img/20260824200704-274/openbg.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-bottom: 0;
}
body:not(:has(.admin-web-content)) .jobs-hero { padding: 70px 20px 80px; }
body:not(:has(.admin-web-content)) .jobs-panel {
  max-width: 800px;
  margin: 0 auto;
  padding: 36px 40px;
  background-color: rgba(18, 23, 40, 0.58);
  border-radius: 18px;
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .jobs-panel h1,
body:not(:has(.admin-web-content)) .jobs-panel h2 { color: #ffffff; text-align: center; }
body:not(:has(.admin-web-content)) .jobs-panel h1 { font-weight: 800; }
body:not(:has(.admin-web-content)) .jobs-panel h1::after,
body:not(:has(.admin-web-content)) .jobs-panel h2::after {
  content: "";
  display: block;
  width: 82px;
  height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
}
body:not(:has(.admin-web-content)) .jobs-panel p { color: #ffffff; }
body:not(:has(.admin-web-content)) .jobs-panel p:last-child { margin-bottom: 0; }
/* ---- JazzHR job board ----
   Embedded as an iframe of the hosted board, not JazzHR's <script> widget: HtmlCommand's
   sanitizer never allowlists <script> (it is stripped from page XML and from stored content
   alike), and the page CSP is script-src 'self' 'nonce-...' with no app.jazz.co. An iframe is
   allowlisted and nothing restricts frame-src, so this is the path that works without a deploy.

   HtmlCommand#handleVideoEmbeds force-wraps every content iframe in a Foundation 16:9 video box
   AND OVERWRITES whatever class the page XML put on the wrapper with "responsive-embed
   widescreen". So the wrapper can only be addressed by that class, and the aspect-ratio box has
   to be undone here or the job list is squashed into a video-shaped window. */
body:not(:has(.admin-web-content)) .jobs-panel .responsive-embed {
  position: static;
  height: auto;
  width: 100%;
  margin: 26px 0 0;
  padding: 0;
  overflow: hidden;
  background-color: #121728;
  border-radius: 12px;
}
body:not(:has(.admin-web-content)) .jobs-panel .responsive-embed iframe {
  position: static;
  display: block;
  width: 100%;
  /* Sized to the hosted board at this column width: 4076px total, less the 160px
     header cropped above = 3916px of listings, so the frame ends flush with the last job.
     Both numbers are measured, not guessed; re-measure if the listing count changes a lot. */
  height: 4076px;
  border: 0;
  /* Crops JazzHR's own header - its orange bar and a second SimIS logo - so the embed starts at
     the listings and reads as part of this panel rather than a second site inside it. Measured
     at exactly 160px. JazzHR also hides its own "welcome" column below ~768px, which is why the
     board reads as a single list here rather than the two-column layout on their hosted page. */
  margin-top: -160px;
}
/* ---- Current Job Openings: closing panel ----
   Mirrors the same block on simisinc.com - centred copy, the orange CTA, then the award tiles.
   The badge markup reuses the .careers-badges / .careers-badge rules already defined above for
   /careers rather than restating them, so the two pages cannot drift apart. */
/* board-frame-tiers: a cross-origin iframe cannot report its own height, so the frame has to be
   sized from outside. Measured against the live board (40 listings) at a range of frame widths:

     frame 720/560 -> 3860 tall, 160px header      frame 480 -> 3730 tall, 110px header
     frame 350     -> 4066 tall, 110px header      frame 310 -> 4242 tall, 110px header

   Two things follow. JazzHR swaps to a compact header below roughly a 540px frame, so the crop
   has to change with it - cropping the larger 160 on a compact header would slice the top off
   "Current Openings". And the board gets TALLER as it narrows, because titles wrap onto more
   lines, so the tiers below step up rather than down. Every tier errs tall on purpose: surplus
   height is white space inside a white card and reads as padding, whereas a frame that is too
   short silently cuts jobs off the bottom with no scrollbar to reveal them. Re-measure these if
   the listing count changes substantially. */
@media (max-width: 664px) {
  body:not(:has(.admin-web-content)) .jobs-panel .responsive-embed iframe { height: 3920px; margin-top: -110px; }
}
@media (max-width: 540px) {
  body:not(:has(.admin-web-content)) .jobs-panel .responsive-embed iframe { height: 4150px; }
}
@media (max-width: 430px) {
  body:not(:has(.admin-web-content)) .jobs-panel .responsive-embed iframe { height: 4500px; }
}
@media (max-width: 360px) {
  body:not(:has(.admin-web-content)) .jobs-panel .responsive-embed iframe { height: 4850px; }
}
body:not(:has(.admin-web-content)) .jobs-closing { text-align: center; margin-top: 34px; }
/* The EOE line sits above the board, plain and left-aligned, as on simisinc.com - it reads as
   part of the intro copy there, not as a heading. */
body:not(:has(.admin-web-content)) .jobs-eoe-line { margin-top: 20px; }
body:not(:has(.admin-web-content)) .jobs-closing .careers-badges { margin-bottom: 0; }
@media (max-width: 640px) {
  body:not(:has(.admin-web-content)) .jobs-panel { padding: 26px 20px; }
}
/* ---- Public form submit buttons ----
   The contact form ships with Foundation's .success class, which paints it green -- the one button
   on the site that was not in brand colour. Repainted to the same orange and hover shade the
   .button.brand CTAs use (#ff8c00 / #d97700), so the primary action reads consistently everywhere.
   Scoped away from admin, where .success still means "save" and should stay green. */
body:not(:has(.admin-web-content)) .button.success {
  background-color: #ff8c00;
}
body:not(:has(.admin-web-content)) .button.success:hover,
body:not(:has(.admin-web-content)) .button.success:focus {
  background-color: #d97700;
}
/* ---- Submenu hover ----
   Label and chevron turn brand orange; no filled background. The orange block that used to appear
   came from a rule that had always been in this stylesheet but was being swallowed by a stray
   semicolon -- repairing the parse error is what made it start rendering. Removing it restores the
   original behaviour. currentColor on the chevron keeps it locked to the label in every state. */
.float-left.header-item ul.is-dropdown-submenu li > a:hover,
.float-left.header-item ul.is-dropdown-submenu li > a:hover i,
.float-left.header-item ul.is-dropdown-submenu li > a:focus,
.float-left.header-item ul.is-dropdown-submenu li > a:focus i {
  color: #ff8c00 !important;
  background-color: transparent !important;
}
/* ---- Featured Work cards as reveal triggers ----
   contentReveal wraps the card face in <button><div class="button-reveal-content">, one level
   deeper than the plain content widget, so the earlier .platform-content > * padding rule stopped
   matching and every card went flush to the edge. Re-apply the inset at the new depth. The banner
   image (bare, or wrapped in <a>/<p>) stays full-bleed; everything else gets the 20px inset. */
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > *:not(img):not(a:has(img)):not(p:has(img)) {
  padding-left: 20px;
  padding-right: 20px;
}
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > img + *,
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > a:has(img) + *,
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > p:has(img) + * {
  padding-top: 18px;
}
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > *:last-child {
  padding-bottom: 18px;
}
/* The trigger is a <button>, which browsers centre and inset by default -- reset it so the card
   reads as a card, not a form control, and fills its cell. */
body:not(:has(.admin-web-content)) .cell.callout button.reveal-button-text {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Action buttons inside the video modal: room to breathe, and they wrap rather than overflow on
   a narrow screen. */
body:not(:has(.admin-web-content)) .reveal .modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
body:not(:has(.admin-web-content)) .reveal .modal-actions .button {
  margin: 0;
}
/* The play icon + runtime is the video affordance, so it is centred and pushed to the bottom of
   the card rather than trailing the description. margin-top:auto works because the card face is a
   flex column, so the row settles on the baseline whatever length the description runs to -- which
   also lines the four up with each other. */
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > p:has(.fa-play-circle) {
  text-align: center;
  margin-top: auto;
  margin-bottom: 0;
}
/* Bigger play glyph so the video affordance carries at a glance -- it is the only thing on the
   card face signalling that clicking opens something. Flex keeps the runtime optically centred
   against the larger icon instead of sitting on the text baseline. */
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > p:has(.fa-play-circle) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.05rem;
}
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content .fa-play-circle {
  font-size: 2.1rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
body:not(:has(.admin-web-content)) .cell.callout button.reveal-button-text:hover .fa-play-circle {
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content .fa-play-circle,
  body:not(:has(.admin-web-content)) .cell.callout button.reveal-button-text:hover .fa-play-circle { transition: none; transform: none; }
}
/* margin-top:auto on the play row only pins it to the card bottom if every wrapper between the
   card and that row actually fills the card height. The widget nests
   .platform-content-container > .platform-content > button > .button-reveal-content, so the chain
   has to stretch the whole way down -- otherwise the row floats wherever the description happens
   to end and the four cards disagree with each other. */
body:not(:has(.admin-web-content)) .cell.callout:has(button.reveal-button-text),
body:not(:has(.admin-web-content)) .cell.callout:has(button.reveal-button-text) .platform-content-container,
body:not(:has(.admin-web-content)) .cell.callout:has(button.reveal-button-text) .platform-content {
  display: flex;
  flex-direction: column;
}
body:not(:has(.admin-web-content)) .cell.callout:has(button.reveal-button-text) .platform-content-container,
body:not(:has(.admin-web-content)) .cell.callout:has(button.reveal-button-text) .platform-content,
body:not(:has(.admin-web-content)) .cell.callout button.reveal-button-text {
  flex: 1 1 auto;
}
/* ---- Play overlay on the card thumbnail ----
   The near-universal video convention, and it lands where the eye goes first. Drawn as a
   pseudo-element so no markup is needed -- which matters here, because the card face is generated
   by contentReveal and the sanitizer strips attributes from page content anyway.
   pointer-events:none so the overlay never intercepts the click; the whole card is the button.
   The disc is dark by default for contrast against any thumbnail, and turns brand orange on hover
   so it reads as the live target. */
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > a:has(img) {
  position: relative;
  display: block;
}
body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > a:has(img)::after {
  content: "\f04b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: rgba(11, 16, 36, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #ffffff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  pointer-events: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
body:not(:has(.admin-web-content)) .cell.callout button.reveal-button-text:hover > .button-reveal-content > a:has(img)::after,
body:not(:has(.admin-web-content)) .cell.callout button.reveal-button-text:focus-visible > .button-reveal-content > a:has(img)::after {
  background-color: #ff8c00;
  transform: translate(-50%, -50%) scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-web-content)) .cell.callout .button-reveal-content > a:has(img)::after { transition: none; }
  body:not(:has(.admin-web-content)) .cell.callout button.reveal-button-text:hover > .button-reveal-content > a:has(img)::after { transform: translate(-50%, -50%); }
}
/* ---- Capability cards: Learn More pinned and centred ----
   Mirrors the play row on the Featured Work cards, so both rows land on one baseline right across
   the section instead of floating wherever each description happens to stop. Same requirement as
   there: every wrapper between the card and the link has to stretch, or margin-top:auto has
   nothing to push against. */
body:not(:has(.admin-web-content)) .cell.callout:not(:has(button.reveal-button-text)),
body:not(:has(.admin-web-content)) .cell.callout:not(:has(button.reveal-button-text)) .platform-content-container,
body:not(:has(.admin-web-content)) .cell.callout:not(:has(button.reveal-button-text)) .platform-content {
  display: flex;
  flex-direction: column;
}
body:not(:has(.admin-web-content)) .cell.callout:not(:has(button.reveal-button-text)) .platform-content-container,
body:not(:has(.admin-web-content)) .cell.callout:not(:has(button.reveal-button-text)) .platform-content {
  flex: 1 1 auto;
}
body:not(:has(.admin-web-content)) .cell.callout:not(:has(button.reveal-button-text)) .platform-content > a {
  display: block;
  margin-top: auto;
  text-align: center;
}
/* ================= About Us ================= */
/* Same full-bleed handling as the careers hero: platform.css puts margin-top:25px on
   .platform-body and this page has no body class to override it. */
body:has(.au-hero) .platform-body {
  margin-top: 0;
  background-color: #0b1024;
}
body:not(:has(.admin-web-content)) .au-hero,
body:not(:has(.admin-web-content)) .au-stats,
body:not(:has(.admin-web-content)) .au-body { margin-bottom: 0; }

/* Hero: the banner carries the MODEL/TEST/SECURE/ADVANCE artwork, with the headline laid over its
   left third where the art is deliberately quiet. */
body:not(:has(.admin-web-content)) .au-hero { position: relative; background-color: #0b1024; }
/* The banner was width:100%/height:auto, so on a wide screen it scaled up without limit and grew
   to ~800px tall with dead space under the artwork. clamp() ties the height to viewport width but
   caps it, and object-fit:cover crops the artwork rather than letterboxing it. */
body:not(:has(.admin-web-content)) .au-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2239 / 702;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Caption sits in a 4vw gutter rather than being pinned to a centred 1460px container, which held
   it 290px in from the edge. Both the gutter and the banner scale with viewport width, so the
   headline keeps the same relationship to the artwork at any size instead of drifting into it.
   Old note: the artwork's quiet area starts
   well before that, and holding it to the text column pushed the headline into the graphic.
   Everything here is fluid so the block tracks the banner instead of staying a fixed size while
   the image behind it scales. */
body:not(:has(.admin-web-content)) .au-hero .au-hero-caption {
  position: absolute;
  top: 50%;
  left: max(20px, 4vw);
  transform: translateY(-50%);
  width: min(46vw, 560px);
  z-index: 1;
}
body:not(:has(.admin-web-content)) .au-hero .au-kicker {
  color: #e23122;
  font-size: clamp(0.75rem, 1.05vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body:not(:has(.admin-web-content)) .au-hero h1 {
  color: #ffffff;
  font-size: clamp(1.85rem, 3.3vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 14px;
}
body:not(:has(.admin-web-content)) .au-hero .au-lede { color: rgba(255,255,255,0.86); font-size: clamp(0.95rem, 1.3vw, 1.25rem); }

/* Stat strip */
/* The strip was inheriting the 1100px content cap, so it wrapped 6+2 however wide the window got.
   Let it use up to 1560px and shrink the gap with the viewport, so all eight credentials sit on
   one row on a wide screen and wrap gracefully rather than at a fixed breakpoint. */
body:not(:has(.admin-web-content)) .au-stats {
  background-color: rgba(20, 26, 51, 0.85);
  /* 1560px left the eight items 35px short of one row, so "Cleared" orphaned onto a second line
     on its own. 1760px fits all eight with the labels still on a single line each; below that the
     strip narrows with the window and wraps into balanced rows rather than dropping one straggler. */
  padding: 26px max(20px, calc((100% - 1760px) / 2));
}
body:not(:has(.admin-web-content)) .au-stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 22px clamp(16px, 2.4vw, 44px);
}
body:not(:has(.admin-web-content)) .au-stat { text-align: center; flex: 0 1 auto; }
body:not(:has(.admin-web-content)) .au-stat { text-align: center; }
body:not(:has(.admin-web-content)) .au-stat-value { display: block; color: #ff8c00; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
body:not(:has(.admin-web-content)) .au-stat-label { display: block; color: rgba(255,255,255,0.72); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- Body sections ----
   Measure held to 870px, matching simisinc.com. 1100px is fine for a card grid but far too wide
   for continuous prose -- it was running well past a comfortable line length.
   Two background layers, as on the reference: the artwork fixed behind everything, and a 32px
   grid drawn in CSS gradients over it. The grid is generated, not an image, so it costs nothing
   and stays crisp at any zoom. */
body:has(.au-hero) .platform-body {
  background-color: #0b1024;
  background-image:
    linear-gradient(rgba(120, 150, 210, 0.05) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, rgba(120, 150, 210, 0.05) 1px, rgba(0, 0, 0, 0) 1px),
    url(/assets/img/20260824203651-303/aubg.webp);
  background-size: 32px 32px, 32px 32px, cover;
  background-position: 0 0, 0 0, 50% 0;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: scroll, scroll, fixed;
}
body:not(:has(.admin-web-content)) .au-body {
  background-color: transparent;
  padding: 46px 20px;
  color: #dbe3f2;
}
body:not(:has(.admin-web-content)) .au-body > .cell {
  max-width: 870px;
  margin-left: auto;
  margin-right: auto;
}
/* Section headings centred with a centred accent, matching the reference. Body copy stays
   left-aligned -- centred prose is hard to read at this length. */
body:not(:has(.admin-web-content)) .au-body h2 {
  color: #ffffff;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 18px;
}
body:not(:has(.admin-web-content)) .au-body h2::after {
  content: ""; display: block; width: 120px; height: 3px; margin: 10px auto 0;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
}
body:not(:has(.admin-web-content)) .au-body h3 { color: #ffffff; }
body:not(:has(.admin-web-content)) .au-body p, body:not(:has(.admin-web-content)) .au-body li { color: #dbe3f2; line-height: 1.6; }
body:not(:has(.admin-web-content)) .au-body .au-facts { font-size: 1.0625rem; color: rgba(219, 227, 242, 0.72); }
body:not(:has(.admin-web-content)) .au-values { list-style: none; margin-left: 0; }
body:not(:has(.admin-web-content)) .au-values li { margin-bottom: 14px; padding-left: 18px; border-left: 3px solid rgba(255,140,0,0.55); }
body:not(:has(.admin-web-content)) .au-values strong { color: #ffb457; }

/* Vision / Mission side by side */
body:not(:has(.admin-web-content)) .au-two-up { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

/* Leadership bios */
body:not(:has(.admin-web-content)) .au-bio { display: flex; gap: 26px; align-items: flex-start; margin-top: 30px; }
body:not(:has(.admin-web-content)) .au-bio img {
  width: 190px;
  flex: 0 0 190px;
  border-radius: 10px;
  background: #ffffff;
}
body:not(:has(.admin-web-content)) .au-close { padding-bottom: 80px; }

@media (max-width: 900px) {
  body:not(:has(.admin-web-content)) .au-hero .au-hero-caption { position: static; transform: none; max-width: none; padding: 26px 20px; }
  body:not(:has(.admin-web-content)) .au-hero h1 { font-size: 2rem; }
  body:not(:has(.admin-web-content)) .au-two-up { grid-template-columns: 1fr; gap: 24px; }
  body:not(:has(.admin-web-content)) .au-bio { flex-direction: column; }
  body:not(:has(.admin-web-content)) .au-bio img { width: 150px; flex: 0 0 auto; }
}
/* platform.css puts margin-bottom:10px on .platform-content, which left a 10px band of the hero's
   own background showing under the banner image and reading as a stray grey bar above the stats. */
body:not(:has(.admin-web-content)) .au-hero .platform-content,
body:not(:has(.admin-web-content)) .au-hero .platform-content-container {
  margin-bottom: 0;
}
/* ---- About Us: heading accent + fact panel ----
   The home page rule for left-aligned section headings (.platform-content > h2::after, 150px
   fading right) matches these headings too and carries identical specificity, so source order was
   deciding it and the accent sat hard left under a centred heading. Raising specificity with
   .au-body .platform-content settles it rather than relying on where the block happens to sit. */
body:not(:has(.admin-web-content)) .au-body .platform-content > h2::after {
  width: 120px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
}
/* The registration details are reference data, not prose -- boxing and centring them separates
   them from the surrounding copy instead of leaving them as a stray indented run of small text. */
body:not(:has(.admin-web-content)) .au-body .au-facts {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 26px;
  padding: 16px 26px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 150, 210, 0.28);
  border-radius: 10px;
  line-height: 1.9;
}
body:not(:has(.admin-web-content)) .au-body .au-facts strong { color: #ffb457; }
/* ---- Vision / Mission panel ----
   Same treatment as the facts box above, plus an orange rule down the left edge. Both are pulled
   out of the reading flow as standalone statements rather than more running prose, so they get the
   same card language. The left accent uses the brand orange at full strength, matching the border
   markers on the Core Values list further down. */
body:not(:has(.admin-web-content)) .au-body .au-two-up {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 150, 210, 0.28);
  border-left: 4px solid #ff8c00;
  border-radius: 10px;
  padding: 30px 34px;
  margin-top: 8px;
}
/* Headings inside the panel keep the centred accent but sit tighter, since the panel already
   provides the separation the section headings need. */
body:not(:has(.admin-web-content)) .au-body .au-two-up h2 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}
body:not(:has(.admin-web-content)) .au-body .au-two-up p:last-child {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  body:not(:has(.admin-web-content)) .au-body .au-two-up { padding: 22px 20px; }
}
/* ---- Value / benefit / recognition cards ----
   These three lists were left-bordered list items; as cards they read as discrete points rather
   than a run-on list, which suits copy this long. auto-fit means the column count follows the
   available width instead of being pinned to a breakpoint -- three across on desktop, dropping to
   two then one as it narrows, with the last row simply short rather than stretched.
   Opaque panels (not the 4% wash used elsewhere) so the background artwork does not show through
   and compete with the text at this density. Overrides the earlier left-border treatment. */
body:not(:has(.admin-web-content)) .au-body .au-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  list-style: none;
  margin-left: 0;
  margin-top: 6px;
}
body:not(:has(.admin-web-content)) .au-body .au-values li {
  background-color: #141a33;
  border: 1px solid rgba(120, 150, 210, 0.28);
  border-top: 4px solid #ff8c00;
  border-left: 1px solid rgba(120, 150, 210, 0.28);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 0;
}
/* Vision / Mission goes opaque too, so the two panel treatments on this page match. */
body:not(:has(.admin-web-content)) .au-body .au-two-up {
  background-color: #141a33;
}
/* ---- dark-panel-link-contrast ----
   theme.link.color is a single site-wide value emitted as a bare a{} rule, so one colour has to
   serve both grounds. It is set to #b45309, which clears WCAG AA on white (5.02:1) but only
   manages 3.41:1 on the navy panels - below the 4.5:1 floor for body text. Inside those panels
   the links step up to the brand orange instead, which reads as the same colour family and
   measures 7.35:1 on #141a33. Buttons and badge tiles are excluded: they carry their own
   colours and are not body links. */
body:not(:has(.admin-web-content)) .jobs-panel a:not(.button):not(.careers-badge),
body:not(:has(.admin-web-content)) .jobs-closing a:not(.button):not(.careers-badge),
body:not(:has(.admin-web-content)) .careers-panel a:not(.button):not(.careers-badge),
body:not(:has(.admin-web-content)) .au-two-up a:not(.button):not(.careers-badge),
body:not(:has(.admin-web-content)) .au-values a:not(.button):not(.careers-badge),
body:not(:has(.admin-web-content)) .au-bio a:not(.button):not(.careers-badge) {
  color: #ff8c00;
}
/* ---- Credentials bar: keep it on one line ----
   The bar inherits .platform-body's 20px. Measured at the bar's full 1100px width, the strip
   needs 1196px of run at that size against 1052px of usable width, which is what pushed
   "Cleared Workforce" onto a second row when the face changed - Inter sets wider than
   Source Sans 3 did at the same nominal size. Measured in place with white-space:nowrap: 1075px needed against 1052px
   available at 16px, so it fits at about 15.6px; capped at 15px for slack. It scales down with the viewport so the single row survives narrower
   screens, and is allowed to wrap on genuinely small ones, where one row is not achievable. */
body:not(:has(.admin-web-content)) .row.platform-no-margin[style*="0E1636"] {
  font-size: clamp(0.75rem, 1.35vw, 0.9375rem);
}
/* The size has to land on the paragraph itself: a more specific rule pins p inside this
   callout to 1.1rem, so a font-size on the row alone never reaches the text. */
body:not(:has(.admin-web-content)) .row.platform-no-margin[style*="0E1636"] .platform-content p {
  font-size: clamp(0.8125rem, 1.35vw, 1rem);
  line-height: 1.5;
  margin-bottom: 0;
}

/* ---- fluid-hero-type ----
   The hero was set in fixed pixels (48 / 28.8 / 23.2 / 16.8), so it held one size from a phone
   to a 2500px monitor - too heavy on small screens, undersized on large ones. Each step below is
   a linear ramp expressed as clamp(min, <vw slope> + <rem intercept>, max), tuned so the type
   lands near its old size around 1280px and grows or shrinks from there rather than snapping at
   a breakpoint. The caps stop the headline running away on ultrawide displays.

   Stepped down about 10% across every line when the type went back to Inter, which carries more
   width and weight per point than the face these ramps were tuned against -- the headline read as
   shouting at the same nominal size. Slope and intercept were both scaled so the reduction holds
   across the whole range rather than only at the tuning width. The button keeps its 0.9375rem
   floor: it is a control, and shrinking a tap target is not the same trade as shrinking a heading. */
body:not(:has(.admin-web-content)) .hero-slide-caption p.text-brand {
  font-size: clamp(0.75rem, 0.39vw + 0.55rem, 1.125rem);
}
body:not(:has(.admin-web-content)) .hero-slide-caption h3 {
  font-size: clamp(1.9rem, 1.72vw + 1.09rem, 3.5rem);
  line-height: 1.1;
}
body:not(:has(.admin-web-content)) .hero-slide-caption p.text-white {
  font-size: clamp(0.95rem, 0.70vw + 0.62rem, 1.65rem);
}
body:not(:has(.admin-web-content)) .hero-slide-caption h3 + p.text-white {
  font-size: clamp(1.125rem, 0.94vw + 0.68rem, 2rem);
}
body:not(:has(.admin-web-content)) .hero-slide-caption a.button {
  font-size: clamp(0.9375rem, 0.30vw + 0.75rem, 1.125rem);
}
/* ---- Home showcase band ----
   The Explore / Featured Work / Capabilities band sits on the dark technical artwork. Sampled
   across the left 55% of that image - the part the copy actually sits on - it averages
   rgb(101,104,108): 5.60:1 against white, but only 3.75:1 against the black this text inherited
   from theme.body.text.color, which is under the 4.5:1 AA floor. So the copy on the art goes
   white. The :not(.callout *) exclusion leaves the twelve card panels alone - they paint their
   own white background and keep their dark text. */
body:not(:has(.admin-web-content)) .home-showcase :is(h2, h3, p):not(.callout *) {
  color: #ffffff;
}
/* ---- home-about-band ----
   This band now carries the same dark artwork as the showcase above it, with a second navy
   break bar between the two so the page alternates rather than running one long textured
   stretch. Replaces the pale #eef1f6 ground and its hairline borders.

   The note on the old light ground still holds and is the reason for the panel below: 10 of the
   12 partner emblems are transparent PNGs with dark ink, and two carry a baked-in light box.
   Measured ink luminance across a sample runs 0.22 to 0.84, so no single dark ground suits them
   all - on navy the dark-ink marks vanish and the boxed ones float as bright rectangles. Giving
   the grid its own white panel restores the ground every emblem was drawn for and leaves the
   grid itself - 3 up, 110px cells, object-fit:contain - exactly as it was. */
body:not(:has(.admin-web-content)) .platform-body .grid-x.home-about {
  background-color: #0b1024;
  /* 35% scrim over the wallpaper. Layered into the same background-image rather than added as an
     overlay element, so it inherits background-attachment: fixed and stays welded to the artwork
     across both sections with no seam where they meet. */
  background-image:
    linear-gradient(rgba(11, 16, 36, 0.4), rgba(11, 16, 36, 0.4)),
    url("/assets/img/20260824185127-272/Modeling%20%26%20Simulation%20Technology%20Background%20blue.webp");
  background-size: cover;
  background-position: center center;
  /* Anchored to the viewport, matching the showcase band above. With attachment:scroll the
     image is scaled to cover the whole band, so it would zoom and soften as News, Events and
     Careers are added beneath. Fixed makes the band a window onto the artwork instead, so it
     holds at any height. Both bands use the same image and the same anchoring, so the artwork
     stays continuous across the break bar between them rather than restarting. */
  background-attachment: fixed;
  border-top: 0;
  border-bottom: 0;
}
body:not(:has(.admin-web-content)) .platform-body .grid-x.home-about :is(h2, p) {
  color: #ffffff;
}
/* The panel is translucent rather than clear, and the floor is set by the emblems rather than
   by taste: 10 of the 12 are transparent PNGs drawn in dark ink, which is why this panel exists at
   all. At 0.85 it still reads as a white card and the dark marks keep their ground, while enough
   artwork comes through to sit in the band instead of on top of it. Much below about 0.75 and the
   dark-ink emblems start losing contrast against the navy behind them. */
body:not(:has(.admin-web-content)) .platform-body .partner-logos {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 16px 12px;
}
/* ---- capability-card-cta ----
   The Learn More links on the eight capability cards sat at the brand orange #ff8c00 on a white
   card, which measures 2.33:1 - well under the 4.5:1 AA floor for 18px regular text. Darkened to
   the same burnt orange the site uses for links, which measures 5.02:1 on white and keeps the
   cards consistent with body links elsewhere. Scoped to the cards so the hero kicker, which also
   uses .text-brand but sits on dark artwork where the bright orange is correct, is untouched. */
body:not(:has(.admin-web-content)) .home-showcase .callout a.text-brand {
  color: #b45309;
}
body:not(:has(.admin-web-content)) .home-showcase .callout a.text-brand:hover,
body:not(:has(.admin-web-content)) .home-showcase .callout a.text-brand:focus {
  color: #8f4107;
}
/* ---- news-page-background ----
   Matches simisinc.com/news. There the artwork is set on "body, .simis-body" as a site-wide
   ground; here it is scoped to this page via :has(.news-intro-panel), because the rest of the
   pilot carries its own navy treatment and a global body image would fight it.
   Values taken from the live page's computed style: #f2f4f7 behind, cover, fixed.
   .platform-body is cleared to transparent so the body artwork shows through - it otherwise
   paints its own ground and carries a 25px top margin that reads as a white bar above the
   content, the same trap the careers hero hit. */
body:has(.news-intro-panel) {
  background-color: #f2f4f7;
  background-image: url(/assets/img/20260823155036-253/GrayBG.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body:has(.news-intro-panel) .platform-body {
  margin-top: 0;
  background-color: transparent;
}
body:has(.news-intro-panel) .news-intro-panel {
  padding-top: 46px;
}
/* Centred heading, so the accent uses the symmetric 82px variant that fades at both ends -
   the same one the navy panels use - rather than the left-aligned gradient the home page
   section headings carry. Written against h1 because the news page leads with one, where the
   other sections lead with h2. The copy is width-capped: centred text set across the full
   1200px container would run far past a comfortable measure. */
body:has(.news-intro-panel) .news-intro-panel {
  text-align: center;
}
body:has(.news-intro-panel) .news-intro-panel h1::after {
  content: "";
  display: block;
  width: 82px;
  height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
}
body:has(.news-intro-panel) .news-intro-panel p {
  margin: 18px auto 0;
  max-width: 760px;
}
/* ---- news-card-grid ----
   Two fixes to the cards view on /news, both measured rather than guessed.

   1. Last-row alignment. The widget's grid carries Foundation's .align-center, so a partial final
      row centres itself -- with 5 posts the last two sat at x=858/1248 instead of 663, reading as
      a stagger. Every page whose count is not a multiple of 3 shows it.

   2. Summary clamp. The summary was 192-224px of a 512-579px card (about 37%), and was the only
      reason card heights differed at all -- the tallest card was tall purely because its summary
      ran one line longer. Clamping to 3 lines keeps enough context to orient someone scanning an
      archive, cuts roughly 100px per card, and makes the rows even without needing a separate
      equal-height rule. */
body:has(.news-intro-panel) .grid-x.align-center:has(> .cell > .card) {
  justify-content: flex-start;
}
/* ---- news-card presentation: now owned by the platform ----
   The clamp, title-clamp, fill, image-ratio and image-placeholder blocks that
   used to sit here were removed when /news moved to the showcase view. The
   platform stylesheet now handles card elevation, the uncropped image panel,
   the adaptive summary and the date/Read More footer, all scoped to
   .platform-blog-showcase-container. Re-adding local overrides here will fight
   it: object-fit:cover re-crops the flyers, a line-clamp defeats the adaptive
   summary, and flex:0 0 auto on every card-section stops the summary growing
   into the space a short image leaves. */

/* ---- news-card-row-gap ----
   Foundation's grid-padding-x gutters the columns but does nothing vertically, so wrapped rows
   sat flush -- the bottom of one card touching the top of the next. 30px matches the horizontal
   gutter exactly (15px of cell padding on each of two neighbours), so the grid reads as evenly
   spaced in both directions rather than as columns that happen to be stacked. */
body:has(.news-intro-panel) .grid-x[class*="-up-"]:has(.card) {
  row-gap: 30px;
}

/* ---- news-pagination-spacing ----
   The pager sat flush against the bottom of the last card row -- measured gap 0px -- so it read as
   part of the final card rather than as a separate control. 40px above clears the 30px card gutter
   enough to break the grid, and 32px below keeps it off the footer band. */
body:has(.news-intro-panel) .pagination {
  margin-top: 40px;
  margin-bottom: 32px;
}

/* ---- news-pagination-accent ----
   The platform deliberately does not colour pagination -- it inherits currentColor,
   because the platform cannot know what a site puts behind it. This page puts it on
   the dark hero background, so the marker is set here.
   #F0A05A rather than the brand #C1550A: measured against the page background
   (rgb(51,59,65), sampled from GrayBG.webp), the brand orange is 2.48:1 -- under the
   4.5:1 AA floor for text and the 3:1 floor for the bar as a state indicator.
   #F0A05A is 5.36:1. Do not "correct" this back to the brand hex. */
body:has(.news-intro-panel) .platform-blog-showcase-container ul.pagination li.current {
  color: #F0A05A;
}
body:has(.news-intro-panel) .platform-blog-showcase-container ul.pagination li.current::after {
  background: #F0A05A;
}

/* ---- news-pagination-links ----
   The same measurement as the marker above, applied to the rest of the pager. The
   links inherit currentColor and resolve to #000 here, which is 1.84:1 against that
   same rgb(51,59,65) background -- effectively unreadable, and why the ellipsis read
   as missing rather than faint. #C9D0D8 is 7.32:1.
   Deliberately not near-white: at 10.34:1 the links would out-shine the #F0A05A
   current-page marker at 5.36:1 and invert the hierarchy. The current page leads on
   hue, weight and its underline -- not on being the brightest thing in the row. */
body:has(.news-intro-panel) .platform-blog-showcase-container ul.pagination li a {
  color: #C9D0D8;
}
body:has(.news-intro-panel) .platform-blog-showcase-container ul.pagination li a:hover,
body:has(.news-intro-panel) .platform-blog-showcase-container ul.pagination li a:focus {
  color: #F2F4F7;
}
body:has(.news-intro-panel) .platform-blog-showcase-container ul.pagination li.ellipsis,
body:has(.news-intro-panel) .platform-blog-showcase-container ul.pagination li.ellipsis::after {
  color: #AAB3BC;
}

/* ---- news-pagination-focus ----
   Keep the focus ring -- removing it is a WCAG 2.4.7 failure that is invisible to
   mouse testing -- but Foundation's default #2C79BE is only 2.49:1 against this
   page's rgb(51,59,65) background, under the 3:1 floor a focus indicator needs
   (WCAG 1.4.11). #7FB0D9 is 4.95:1 and is already the platform's --sc-link-hover,
   so it stays inside the design system rather than introducing a new blue.
   Blue is deliberate, not incidental: it sits ~180deg from the #F0A05A current-page
   marker, so the ring reads as a separate signal instead of competing with it.
   Scoped to this page because the failure is specific to the dark background --
   the same blue clears 3:1 on the white cards elsewhere. */
body:has(.news-intro-panel) .platform-blog-showcase-container ul.pagination li a:focus-visible {
  outline-color: #7FB0D9;
}

/* ---- news-pagination-hover ----
   The hover box was Foundation's primary #1779BA, which is 2.43:1 against this
   page's rgb(51,59,65) background -- the same shortfall the focus ring had.
   #7FB0D9 is 4.95:1 and matches the focus ring's family, so hover and focus read
   as one system rather than two unrelated blues.
   They stay distinguishable by weight, not hue: hover is a 1px border, focus is a
   2px outline held off the element by an offset. Focus is the stronger signal and
   should look like it.
   Note the link also underlines on hover, so this border is a second cue for the
   same state -- kept because it marks the whole cell rather than just the digit. */
body:has(.news-intro-panel) .platform-blog-showcase-container ul.pagination li.page:hover {
  border-color: #7FB0D9;
}

/* ---- trade-shows-page ----
   Mirrors simisinc.com/trade-shows, which carries this treatment in an inline style block on the
   page itself. Scoped here to body:has(.trade-shows-panel) -- the wrapper the page XML puts around
   the intro -- so nothing leaks to other pages, the way the news ground is scoped.

   The left orange rule on each box, the dark navy ground and the warm-grey inputs are all taken
   from the reference verbatim rather than re-invented. */
body:has(.trade-shows-panel) {
  background-color: #0E1636;
  background-image: url("/assets/img/20260824200705-276/tsbackground2.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body:has(.trade-shows-panel) .platform-body {
  background: transparent;
}
/* The intro sits directly on the artwork, so it takes the white the reference gives it. */
body:has(.trade-shows-panel) .trade-shows-panel h1,
body:has(.trade-shows-panel) .trade-shows-panel p {
  color: #ffffff;
}
/* Normalised to the news page rather than the reference: the same centred heading, the same
   symmetric 82px orange accent that fades at both ends, and the same 760px cap on the intro so
   centred copy does not run past a comfortable measure. The heading keeps the platform scale the
   news page uses (about 40px / 500) instead of the reference page's heavier 3rem / 800, so the two
   News pages read as one section of the site. White is the one thing that stays, since this ground
   is navy where the news ground is light. */
body:has(.trade-shows-panel) .trade-shows-panel {
  text-align: center;
  padding-top: 46px;
}
body:has(.trade-shows-panel) .trade-shows-panel h1::after {
  content: "";
  display: block;
  width: 82px;
  height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
}
body:has(.trade-shows-panel) .trade-shows-panel p {
  margin: 18px auto 0;
  max-width: 760px;
}
/* ---- trade-shows-boxes ----
   Held to 1000px like the reference: the two boxes read as a paired unit rather than running the
   full grid width. */
body:has(.trade-shows-panel) .ts-boxes-row {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}
/* platform.css keeps the footer off the fold with min-height:calc(100vh - 107px) on .platform-body.
   That is right for a long page, but this one is short: on a 1100px viewport it left 284px of bare
   artwork between the boxes and the footer. Releasing it here lets the footer follow the content --
   the background still fills the window behind everything, so nothing looks unfinished. */
body:has(.trade-shows-panel) .platform-body {
  min-height: 0;
  padding-bottom: 40px;
}
body:has(.trade-shows-panel) .callout.box {
  background-color: #F7F9FC;
  border: 1px solid #E2E7F0;
  border-left: 4px solid #FF8C00;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 34px rgba(255,255,255,0.22);
}
body:has(.trade-shows-panel) .ts-boxes-row h4 {
  font-size: 22px;
  font-weight: 700;
  color: #01213D;
}
body:has(.trade-shows-panel) .ts-boxes-row form label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #4A4A4A;
}
body:has(.trade-shows-panel) .ts-boxes-row form input {
  border-radius: 6px;
  background-color: #F5F4F2;
  border: 1px solid rgba(0,0,0,0.25);
}
/* :not(.hollow):not(.clear) so this cannot swallow the admin edit-pencil controls, which are
   hollow buttons sitting inside the same page (see the #1348 lesson). */
body:has(.trade-shows-panel) .ts-boxes-row .button:not(.hollow):not(.clear) {
  background-color: #FF8C00;
  border-color: #FF8C00;
  color: #ffffff;
  border-radius: 5px;
}
body:has(.trade-shows-panel) .ts-boxes-row .button:not(.hollow):not(.clear):hover {
  background-color: #e67e00;
  border-color: #e67e00;
}

/* ---- trade-shows-no-hover-lift ----
   The Featured Work hover lift above is written against .cell.callout, which is not home-page
   specific -- these boxes carry the same classes, so hovering made the form jump 4px while someone
   was aiming at a field. A card that lifts under the cursor is a nice invitation to click; a form
   that does it is just moving the target. Pinned here, shadow included so nothing flickers either. */
body:has(.trade-shows-panel) .platform-body .cell.callout,
body:has(.trade-shows-panel) .platform-body .cell.callout:hover {
  transform: none;
  transition: none;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 34px rgba(255,255,255,0.22);
}

/* ---- trade-shows-recaptcha-note ----
   Google lets the floating badge be hidden only if the attribution it carries appears next to the
   submit instead -- the page XML adds that line under the button. Hiding it without the line would
   breach their terms, so the two changes belong together and neither should be removed alone.
   visibility rather than display: the badge must remain in the layout for the reCAPTCHA script. */
/* Keyed off the note itself rather than a page marker: the badge is hidden exactly where the
   attribution that permits hiding it is present, so the two cannot drift apart. Add .recaptcha-note
   to a form and the badge goes; remove it and the badge returns on its own. */
body:has(.recaptcha-note) .grecaptcha-badge {
  visibility: hidden;
}
.recaptcha-note {
  /* Centred under the submit and capped, so it reads as a footnote to the form rather than a
     stray line: left-aligned it ran to the panel edge and lined up with nothing above it. */
  margin: 16px auto 4px;
  padding: 0 18px;
  max-width: 620px;
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  color: #6B7280;
}
.recaptcha-note a {
  color: #6B7280;
  text-decoration: underline;
}

/* ---- trade-shows-events-box ----
   Two problems with the empty state, both only visible because nothing is scheduled yet.

   The day separator is a grouping header for a list of events; with none, it prints a bare date
   over a single synthesised "Today" row. The month heading above it is turned off in the page XML
   (showMonthName), but the separator has no preference of its own, so it comes off here. Take both
   out once there are real events, so the grouping returns.

   And the content sat at the bottom of the box: the column is stretched to match the taller form
   beside it, and its two children were left to fall wherever the extra height put them. Pinning
   them to the top keeps the heading and its answer together, with the slack below where it reads
   as padding rather than as a gap someone forgot to fill. */
body:has(.trade-shows-panel) .platform-calendar-month-separator {
  display: none;
}
/* The Featured Work rules further up stretch every wrapper inside a .cell.callout so a card's
   Learn More can pin to the bottom. .cell.callout is not home-page specific, so these boxes
   inherited it and .platform-content grew to 432px to hold a heading and a rule -- stranding the
   events list at the foot of the box. The element qualifiers are load-bearing: the rule being
   overridden carries :not(:has(button.reveal-button-text)), which scores an extra element, so a
   selector of otherwise equal weight loses. */
body:has(.trade-shows-panel) .ts-boxes-row div.cell.callout div.platform-content-container,
body:has(.trade-shows-panel) .ts-boxes-row div.cell.callout div.platform-content {
  display: block;
  flex: 0 0 auto;
}
body:has(.trade-shows-panel) .platform-calendar-event-block {
  margin-top: 4px;
}

/* ---- home-highlights ----
   The Latest News / Upcoming Events / Careers band and the closing call to action, matching the
   treatment simisinc.com carries in an inline style block on the page itself. Values taken from
   there rather than re-invented: the navy 800-weight section headings, the capped centred blurb,
   and the uppercase Read more links with the arrow appended. */
body:not(:has(.admin-web-content)) .home-highlights h4 {
  font-weight: 800;
  color: #ffffff;
}
/* The aspect-ratio here is load-bearing, not decoration. ContentImageSrcsetCommand gives content
   images sizes="auto", and with that present the browser never adopts the file's own intrinsic
   dimensions: the element falls back to the CSS default object size of 300x150 and object-fit:fill
   stretches the picture into it. Measured before this rule: 347x150, a ratio of 2.31 against the
   source's 1.50, so the art was squashed by a third and looked soft as a result. Removing the sizes
   attribute also fixes it, which is how the cause was isolated, but that attribute is generated and
   not ours to drop. Stating the ratio gives the element definite dimensions and the distortion goes,
   as does the softness that came with it. 3/2 matches the source art. */
body:not(:has(.admin-web-content)) .home-highlights img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* ---- read-more links ----
   Small uppercase link with a trailing arrow, brand blue going to the brand orange on hover. The
   arrow is a pseudo-element so it cannot end up inside the link text a screen reader announces. */
body:not(:has(.admin-web-content)) a.read-more {
  /* Lifted from the reference blue to one that carries on the navy ground this band now sits on. */
  color: #6BB7E8;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) a.read-more::after {
  content: " \2192";
}
body:not(:has(.admin-web-content)) a.read-more:hover {
  color: #DF5430;
}
/* ---- closing call to action ---- */
.cta-blurb {
  text-align: center;
  color: #33384a;
  max-width: 640px;
  margin: 14px auto 24px;
  font-size: 1.1rem;
  line-height: 1.55;
}
body:not(:has(.admin-web-content)) a.button.large.box.round {
  border-radius: 8px;
}

/* ---- home-highlights-ground ----
   Continue the Who We Are artwork down behind the news band and the closing call to action, so the
   lower half of the page reads as one field rather than three separate strips. Using the identical
   declaration matters: background-attachment is fixed, so the sections share one continuous image
   and there is no seam where they meet.

   The side padding is the same 1100px measure the section above uses, which is what lines these
   three columns up with Who We Are rather than running them to the window edge. */
body:not(:has(.admin-web-content)) .platform-body .grid-x.home-highlights,
body:not(:has(.admin-web-content)) .platform-body .grid-x:has(.cta-blurb) {
  background-color: #0b1024;
  /* 35% scrim over the wallpaper. Layered into the same background-image rather than added as an
     overlay element, so it inherits background-attachment: fixed and stays welded to the artwork
     across both sections with no seam where they meet. */
  background-image:
    linear-gradient(rgba(11, 16, 36, 0.4), rgba(11, 16, 36, 0.4)),
    url("/assets/img/20260824185127-272/Modeling%20%26%20Simulation%20Technology%20Background%20blue.webp");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding-left: max(0px, calc((100% - 1100px) / 2));
  padding-right: max(0px, calc((100% - 1100px) / 2));
}
body:not(:has(.admin-web-content)) .platform-body .grid-x.home-highlights {
  padding-top: 48px;
  padding-bottom: 32px;
}
body:not(:has(.admin-web-content)) .platform-body .grid-x:has(.cta-blurb) {
  padding-top: 8px;
  padding-bottom: 64px;
}
/* Everything in the band was coloured for a white ground and has to invert. */
body:not(:has(.admin-web-content)) .home-highlights p,
body:not(:has(.admin-web-content)) .home-highlights small,
body:not(:has(.admin-web-content)) .home-highlights .platform-calendar-event-summary {
  color: rgba(255,255,255,0.86);
}
body:not(:has(.admin-web-content)) .home-highlights h5 a {
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .home-highlights hr {
  border-color: rgba(255,255,255,0.18);
}
body:not(:has(.admin-web-content)) .grid-x:has(.cta-blurb) h3 {
  color: #ffffff;
}
.cta-blurb {
  color: rgba(255,255,255,0.86);
}

/* ---- home-highlights-seam ----
   The section above carries a 15px bottom margin, which showed as a white line straight across the
   artwork where the two grounds meet. Pulling the band up by the same amount closes it without
   touching the section above, which other pages also use. */
body:not(:has(.admin-web-content)) .platform-body .grid-x.home-highlights {
  margin-top: -15px;
}
/* The day separator is a grouping header for a list of events; with none scheduled it prints a
   bare date over the synthesised "Today" row. Same treatment as the trade shows box. Remove this
   once there are real events so the grouping returns. */
body:not(:has(.admin-web-content)) .home-highlights .platform-calendar-month-separator {
  display: none;
}

/* ---- home-highlights-buttons ----
   Centre the three column buttons under their columns, and give the closing call to action the
   brand orange.

   The call to action is matched by destination rather than by the section around it: the platform
   lifts that anchor out of the content block into a button row of its own, so it does not share a
   .grid-x with the blurb above it and any selector written from the blurb misses it. Scoped to
   .platform-body so the Contact Us button in the navigation, which points at the same page, is
   left alone, and :not(.hollow):not(.clear) so it cannot swallow the admin edit controls. */
body:not(:has(.admin-web-content)) .home-highlights .platform-content p:has(> a.button) {
  text-align: center;
}
body:not(:has(.admin-web-content)) .platform-body a.button[href$="/contact-us"]:not(.hollow):not(.clear) {
  background-color: #c4441f;
  border-color: #c4441f;
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .platform-body a.button[href$="/contact-us"]:not(.hollow):not(.clear):hover {
  background-color: #a83917;
  border-color: #a83917;
}

/* ---- home-card-link ----
   The three banners are now links to the sections they head, and they lift on hover the way the
   Featured Work cards above do, so they read as cards rather than decoration. Same 4px travel
   and 0.15s timing as those, deliberately, since both sit on the same page.

   The lift is on the anchor rather than the image so the shadow follows the whole card, and the
   radius plus overflow keeps the artwork inside the rounded corner while it moves.

   focus-visible carries the same treatment plus a ring: this is a link, so it has to answer to
   the keyboard as well as the mouse, and a lift alone is not a focus indicator. */
body:not(:has(.admin-web-content)) .home-highlights a.home-card-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body:not(:has(.admin-web-content)) .home-highlights a.home-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
body:not(:has(.admin-web-content)) .home-highlights a.home-card-link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  outline: 3px solid #FF8C00;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-web-content)) .home-highlights a.home-card-link,
  body:not(:has(.admin-web-content)) .home-highlights a.home-card-link:hover,
  body:not(:has(.admin-web-content)) .home-highlights a.home-card-link:focus-visible {
    transition: none;
    transform: none;
  }
}

/* ---- footer-menu-title ----
   The four footer column headings (About Us, Featured Solutions, Information For, Site Links)
   inherited a mid grey that sat too close to the link colour beneath them, so the columns read as
   one undifferentiated list. White separates the heading from its links and clears AA on the dark
   footer ground. Scoped to the footer menu so header navigation is untouched. */
body:not(:has(.admin-web-content)) footer .platform-menu-container span.menu-title {
  color: #ffffff;
}

/* ---- trust-center ----
   Port of the Trust Center page. Everything here hangs off .tc-hero / .tc-body, which only exist
   on /our-certifications, so none of it can reach another page. The reference keeps these rules in
   an inline <style> block; on this site page styling lives here instead, which is why the scoping
   has to be explicit rather than relying on the page boundary.

   The badge sizing is load-bearing, not decoration: the platform stamps sizes="auto" onto content
   images, and with sizes=auto the browser never adopts the file intrinsic size, so an img with only
   a height attribute collapses to the 300x150 CSS default object size. Stating height in CSS gives
   the ratio something real to resolve against. */
body:not(:has(.admin-web-content)):has(.tc-body) {
  background-color: #0b1024;
  background-image:
    linear-gradient(rgba(11, 16, 36, 0.55), rgba(11, 16, 36, 0.55)),
    url("/assets/img/20260824200914-282/trust-center-background.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
body:not(:has(.admin-web-content)):has(.tc-body) .platform-body,
body:not(:has(.admin-web-content)):has(.tc-body) .full-container,
body:not(:has(.admin-web-content)):has(.tc-body) article {
  background-color: transparent;
  background-image: none;
}

body:not(:has(.admin-web-content)) .tc-hero { padding: 48px 0 8px; }
body:not(:has(.admin-web-content)) .platform-body .tc-hero h1 {
  color: #f2f5fb;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
body:not(:has(.admin-web-content)) .tc-hero h1::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #FF8C00 50%, transparent);
  border-radius: 2px;
  margin: 12px auto 0;
}
body:not(:has(.admin-web-content)) .tc-hero p {
  color: #dbe3f2;
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 820px;
  margin: 0 auto;
}

body:not(:has(.admin-web-content)) .tc-body .platform-content {
  max-width: 870px;
  margin: 0 auto;
  background: rgba(18, 23, 40, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  padding: 40px 52px 46px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body:not(:has(.admin-web-content)) .platform-body .tc-body h2 {
  color: #f2f5fb;
  font-weight: 800;
  font-size: 1.9rem;
  text-align: center;
  margin-top: 40px;
  letter-spacing: -0.01em;
}
body:not(:has(.admin-web-content)) .tc-body .platform-content > h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
  border-radius: 2px;
  margin: 10px auto 0;
}
/* Breathing room between the accent and the first fact line. */
body:not(:has(.admin-web-content)) .tc-body .platform-content > h2 + p { margin-top: 24px; }
body:not(:has(.admin-web-content)) .tc-body p,
body:not(:has(.admin-web-content)) .tc-body li {
  color: #dbe3f2;
  font-size: 1.15rem;
  line-height: 1.62;
}
body:not(:has(.admin-web-content)) .tc-body strong { color: #f2f5fb; }
body:not(:has(.admin-web-content)) .tc-body a:not(.button) { color: #FF8C00; }
body:not(:has(.admin-web-content)) .tc-body .tc-lead {
  margin: 4px 0 20px;
}
body:not(:has(.admin-web-content)) .tc-body .tc-cat {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 26px 0 12px;
}
body:not(:has(.admin-web-content)) .tc-body .tc-cat strong { color: #EF9F27; }

/* ---- trust-center-badges ----
   Each credential sits on its own white chip so logos drawn for a white background keep their
   contrast against the dark page, rather than being knocked out by it. Sizes come from the two
   groups: corporate marks read larger than individual staff credentials, which is the hierarchy
   the reference sets and the reason they are not one uniform size. */
body:not(:has(.admin-web-content)) .platform-body .tc-body .platform-content img {
  background: #ffffff;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
  width: auto;
  object-fit: contain;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
body:not(:has(.admin-web-content)) .platform-body .tc-body .tc-badges img {
  height: 88px;
  margin: 0 20px 16px 0;
}
body:not(:has(.admin-web-content)) .platform-body .tc-body .tc-team img {
  height: 66px;
  margin: 0 16px 14px 0;
}
body:not(:has(.admin-web-content)) .tc-body .tc-badges,
body:not(:has(.admin-web-content)) .tc-body .tc-team { margin: 0 0 4px; }

/* The DLA joint-certification mark is a wide banner, not a square seal, so it gets its own box. */
body:not(:has(.admin-web-content)) .platform-body .tc-body .tc-badges img[alt*="Joint Certification"] {
  padding: 3px;
}

body:not(:has(.admin-web-content)) .tc-body .platform-content a:has(img) {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  border: 0;
}
body:not(:has(.admin-web-content)) .platform-body .tc-body .platform-content a:hover img,
body:not(:has(.admin-web-content)) .platform-body .tc-body .platform-content a:focus-visible img {
  transform: translateY(-7px) scale(1.02);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
}
body:not(:has(.admin-web-content)) .tc-body .platform-content a:focus-visible {
  outline: 3px solid #FF8C00;
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---- trust-center-cmmc ---- */
body:not(:has(.admin-web-content)) .tc-body .tc-cmmc {
  max-width: 820px;
  margin: 2px auto 26px;
  text-align: left;
  background: rgba(255, 140, 0, 0.07);
  border: 1px solid rgba(255, 140, 0, 0.30);
  border-left: 4px solid #FF8C00;
  border-radius: 12px;
  padding: 20px 26px;
}
body:not(:has(.admin-web-content)) .platform-body .tc-body .tc-cmmc h3 {
  color: #FF8C00;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 10px;
}
body:not(:has(.admin-web-content)) .tc-body .tc-cmmc p { margin: 0 0 10px; }
body:not(:has(.admin-web-content)) .tc-body .tc-cmmc p:last-child { margin-bottom: 0; }
body:not(:has(.admin-web-content)) .tc-body .tc-cmmc a {
  color: #FF8C00;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 140, 0, 0.5);
}
body:not(:has(.admin-web-content)) .tc-body .tc-cmmc a:hover {
  color: #ffb454;
  border-bottom-color: #ffb454;
}

@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-web-content)) .platform-body .tc-body .platform-content img,
  body:not(:has(.admin-web-content)) .platform-body .tc-body .platform-content a:hover img {
    transition: none;
    transform: none;
  }
}

/* ---- trust-center-ratios ----
   One rule per badge shape. This exists because sizes="auto" makes width:auto resolve to the
   sizes-derived width instead of height x intrinsic ratio, so every chip came out the same 310px
   wide whatever the logo. Stating the real ratio alongside a fixed height lets width resolve
   correctly, so a square seal gets a square chip and a wide banner gets a wide one.
   Ratios were read from the decoded files, not guessed. */
.tc-body img[src*="-162/"] { aspect-ratio: 100 / 93; }
.tc-body img[src*="-163/"] { aspect-ratio: 300 / 109; }
.tc-body img[src*="-164/"] { aspect-ratio: 75 / 29; }
.tc-body img[src*="-165/"] { aspect-ratio: 100 / 33; }
.tc-body img[src*="-166/"],
.tc-body img[src*="-167/"],
.tc-body img[src*="-172/"],
.tc-body img[src*="-181/"],
.tc-body img[src*="-187/"],
.tc-body img[src*="-193/"] { aspect-ratio: 1 / 1; }
.tc-body img[src*="-168/"] { aspect-ratio: 100 / 39; }
.tc-body img[src*="-169/"] { aspect-ratio: 300 / 143; }
.tc-body img[src*="-170/"],
.tc-body img[src*="-171/"] { aspect-ratio: 300 / 119; }
.tc-body img[src*="-173/"] { aspect-ratio: 300 / 133; }
.tc-body img[src*="-174/"] { aspect-ratio: 150 / 103; }
.tc-body img[src*="-175/"] { aspect-ratio: 100 / 83; }
.tc-body img[src*="-176/"],
.tc-body img[src*="-180/"] { aspect-ratio: 75 / 64; }
.tc-body img[src*="-177/"] { aspect-ratio: 299 / 268; }
.tc-body img[src*="-178/"] { aspect-ratio: 60 / 49; }
.tc-body img[src*="-179/"] { aspect-ratio: 100 / 89; }
.tc-body img[src*="-182/"],
.tc-body img[src*="-186/"] { aspect-ratio: 150 / 151; }
.tc-body img[src*="-183/"],
.tc-body img[src*="-185/"] { aspect-ratio: 60 / 17; }
.tc-body img[src*="-184/"] { aspect-ratio: 300 / 229; }
.tc-body img[src*="-188/"] { aspect-ratio: 300 / 89; }
.tc-body img[src*="-189/"] { aspect-ratio: 299 / 134; }
.tc-body img[src*="-190/"] { aspect-ratio: 300 / 83; }
.tc-body img[src*="-191/"] { aspect-ratio: 103 / 77; }
.tc-body img[src*="-192/"] { aspect-ratio: 150 / 31; }

/* ---- legal-body ----
   Shared by the legal documents (/legal/privacy, and /legal/terms when it is filled in).
   These pages are read, not skimmed, so the only real requirement is measure: the platform
   default runs body copy the full width of the viewport, which was landing around 200
   characters per line. 870px matches what .au-body already uses, so the legal pages sit at the
   same measure as the rest of the site rather than inventing a second one.

   Left-aligned throughout, including the accent rule under the title: this is a document with a
   date and numbered clauses, not a marketing section, and centred headings fight that reading. */
body:not(:has(.admin-web-content)) .legal-body {
  padding: 46px 20px 64px;
}
body:not(:has(.admin-web-content)) .legal-body > .cell {
  max-width: 870px;
  margin-left: auto;
  margin-right: auto;
}
body:not(:has(.admin-web-content)) .platform-body .legal-body h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 4px;
}
body:not(:has(.admin-web-content)) .legal-body h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  margin: 12px 0 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, #FF8C00, rgba(255, 140, 0, 0));
}
/* The two dated lines under the title are metadata, not body copy, so they read quieter. */
body:not(:has(.admin-web-content)) .legal-body h2 + p,
body:not(:has(.admin-web-content)) .legal-body h2 + p + p {
  font-size: 0.95rem;
  margin-bottom: 2px;
  opacity: 0.75;
}
body:not(:has(.admin-web-content)) .platform-body .legal-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 34px;
  margin-bottom: 8px;
}
body:not(:has(.admin-web-content)) .legal-body p,
body:not(:has(.admin-web-content)) .legal-body li {
  font-size: 1.05rem;
  line-height: 1.7;
}
body:not(:has(.admin-web-content)) .legal-body li { margin-bottom: 8px; }
/* Address blocks keep the same paragraph spacing as the rest of the document. Tightening only
   the last one made the DMCA agent block in Terms of Use disagree with the contact block below it,
   and the reference renders both the same way. */

/* ---- data-center-page ----
   Port of /data-center. The reference keeps this design in ~100 rules accumulated over several
   passes, layered with !important and hung off a body.dc-page class and a #simis-data-center-content
   cell id. Neither hook exists here, so rather than import the pile this is rebuilt from the values
   the reference actually computes to. Scoped on :has(.dc-hero-band), which only this page has.

   Dark navy page with a fixed wallpaper, translucent panels floating on top, orange accents.

   NOTE: scoped on .dc-sec, not an id. The platform sanitizer strips id attributes (and label/input
   elements) from content HTML, so an id hook written into the page XML never reaches the DOM. The
   section class comes from the page XML section itself, which is not sanitized. */
body:not(:has(.admin-web-content)):has(.dc-hero-band) {
  background-color: #080b3b;
  background-image: url("/assets/img/20260824192827-273/dc-wallpaper.webp");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body:not(:has(.admin-web-content)):has(.dc-hero-band) .platform-body,
body:not(:has(.admin-web-content)):has(.dc-hero-band) .full-container,
body:not(:has(.admin-web-content)):has(.dc-hero-band) article {
  background-color: transparent;
  background-image: none;
}
body:not(:has(.admin-web-content)):has(.dc-hero-band) .dc-hero-sec { margin-top: 0; }

/* ---- data-center-hero ----
   The gradient runs left-to-right rather than as a flat scrim so the server-aisle photo stays
   visible on the right while the text side keeps enough contrast to read. Text shadows carry the
   rest, since the image behind any given line changes with viewport width. */
body:not(:has(.admin-web-content)) .dc-hero-band {
  background-image:
    linear-gradient(90deg, rgba(18, 22, 60, 0.72) 0%, rgba(18, 22, 60, 0.35) 45%, rgba(18, 22, 60, 0) 80%),
    url("/assets/img/20260824200705-275/datacenter.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 30vw;
  width: 100%;
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.75rem 4vw;
  box-sizing: border-box;
}
body:not(:has(.admin-web-content)) .platform-body .dc-hero-band .dc-hero-title {
  color: #ffffff;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 0.4rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
body:not(:has(.admin-web-content)) .dc-hero-band .dc-hero-title::after {
  content: "";
  display: block;
  width: clamp(90px, 9vw, 150px);
  height: 4px;
  background: linear-gradient(90deg, #EF9F27 45%, transparent);
  margin: 18px 0 6px;
}
body:not(:has(.admin-web-content)) .dc-hero-band .dc-hero-subtitle {
  color: #ffffff;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
body:not(:has(.admin-web-content)) .dc-hero-band .dc-hero-tagline {
  color: #ffffff;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  margin: 0.9rem 0 0;
  opacity: 0.92;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
body:not(:has(.admin-web-content)) .dc-hero-band .dc-hero-intro {
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 600px;
  margin: 1.1rem 0 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}
body:not(:has(.admin-web-content)) .dc-hero-band .dc-hero-cta { margin: 1.5rem 0 0; }
body:not(:has(.admin-web-content)) .platform-body .dc-hero-cta a.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #E0562A;
  border-color: #E0562A;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 6px;
  text-transform: none;
}
body:not(:has(.admin-web-content)) .dc-hero-cta a.button::after {
  content: "\2192";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  color: #E0562A;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
@media (max-width: 640px) {
  body:not(:has(.admin-web-content)) .dc-hero-band { min-height: 0; padding: 2rem 1.5rem; }
}

/* ---- data-center-panels ----
   Each section is a translucent slab floating on the wallpaper. Body copy is held to ~746px inside
   a 1240px panel so the measure stays readable even though the panel is wide. */
body:not(:has(.admin-web-content)) .dc-sec { padding: 0 20px 8px; }
body:not(:has(.admin-web-content)) .dc-sec { max-width: 1240px; margin: 0 auto; }
body:not(:has(.admin-web-content)) .dc-sec .splash-body {
  background: rgba(18, 23, 40, 0.58);
  border-radius: 18px;
  padding: 44px 40px;
  margin: 0 0 44px;
}
body:not(:has(.admin-web-content)) .platform-body .dc-sec .splash-body h2 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 32px;
}
body:not(:has(.admin-web-content)) .dc-sec .splash-body h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #FF8C00 50%, transparent);
  margin: 12px auto 0;
}
body:not(:has(.admin-web-content)) .dc-sec .splash-body p,
body:not(:has(.admin-web-content)) .dc-sec .splash-body li {
  color: #c3cbe6;
  font-size: 19.2px;
  line-height: 1.7;
  max-width: 746px;
  margin: 0 auto 16px;
}
body:not(:has(.admin-web-content)) .dc-sec .splash-body strong { color: #ffffff; }

/* ---- data-center-panels-zoom ----
   The reference enlarges these panels with a checkbox-hack lightbox. That cannot survive here: the
   platform sanitizer strips label and input elements out of content HTML, so the mechanism is gone
   before it reaches the page, and a JS lightbox is out too because the CSP has no unsafe-inline.
   A plain link to the full-size file keeps the capability that actually mattered -- these panels
   carry small text, and readers need a way to see them at full size. */
body:not(:has(.admin-web-content)) .dc-sec .dc-panel { margin: 22px 0 0; }
body:not(:has(.admin-web-content)) .dc-sec a.dc-zoom {
  display: block;
  max-width: 680px;
  margin: 0 auto;
  text-decoration: none;
  cursor: zoom-in;
}
body:not(:has(.admin-web-content)) .dc-sec a.dc-zoom img {
  object-fit: contain;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
body:not(:has(.admin-web-content)) .dc-sec a.dc-zoom::after {
  content: "\1F50D\00A0 Click to enlarge";
  display: block;
  font-size: 13px;
  color: #9aa5b5;
  text-align: center;
  margin: 10px 0 0;
}
body:not(:has(.admin-web-content)) .dc-sec a.dc-zoom:hover::after { color: #FF8C00; }
body:not(:has(.admin-web-content)) .dc-sec a.dc-zoom:focus-visible img {
  outline: 3px solid #FF8C00;
  outline-offset: 3px;
}

/* ---- data-center-closer ----
   The Reach Out closer sits directly on the wallpaper with no panel behind it, which is what makes
   it read as the end of the page rather than one more section. */
body:not(:has(.admin-web-content)) .dc-sec .ms-reach {
  background: transparent;
  padding: 44px 20px 28px;
  margin: 0 0 8px;
  text-align: center;
}
body:not(:has(.admin-web-content)) .platform-body .dc-sec .ms-reach h3 {
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 20px;
}
body:not(:has(.admin-web-content)) .dc-sec .ms-reach p {
  color: #c3cbe6;
  font-size: 19.2px;
  line-height: 1.7;
  max-width: 500px;
  margin: 0 auto 28px;
  text-align: center;
}
body:not(:has(.admin-web-content)) .dc-sec a.ms-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #DF5430;
  color: #ffffff;
  font-size: 20px;
  padding: 17px 24px;
  border-radius: 8px;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) .dc-sec a.ms-contact:hover { background: #c8461f; }
body:not(:has(.admin-web-content)) .dc-sec a.ms-contact::after {
  content: "\2192";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  color: #DF5430;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

/* The reference lazy-loads a Google map behind a button using an inline script. The pilot CSP has
   no unsafe-inline, so that script would never run and the button would be dead. A plain link
   keeps the same behaviour that mattered -- nothing loads from Google until the visitor asks. */
body:not(:has(.admin-web-content)) .dc-sec .dc-map {
  max-width: 680px;
  margin: 26px auto 0;
  text-align: center;
}
body:not(:has(.admin-web-content)) .dc-sec .dc-map p { margin: 0 0 12px; }
body:not(:has(.admin-web-content)) .dc-sec a.dc-map-link {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) .dc-sec a.dc-map-link:hover {
  border-color: #FF8C00;
  color: #FF8C00;
}

/* ---- data-center-panel-ratios ----
   Same trap as the Trust Center badges: the platform stamps sizes="auto" on content images, which
   makes the browser supply the used width itself. height:auto then has nothing to derive from and
   falls back to the 150px CSS default object-size height, so all three panels rendered 680x150 --
   the tall services panel was 408% out. Stating the real ratio gives height something to resolve
   against. Ratios are the source files: proximity and leasing are 2000x1120, services 2000x2240. */
body:not(:has(.admin-web-content)) .dc-sec img[src*="-196/"],
body:not(:has(.admin-web-content)) .dc-sec img[src*="-195/"] { aspect-ratio: 25 / 14; }
body:not(:has(.admin-web-content)) .dc-sec img[src*="-197/"] { aspect-ratio: 25 / 28; }

/* ---- data-center-lightbox-target ----
   Pure-CSS lightbox built on :target. The reference uses a checkbox hack, but HtmlCommand.cleanContent
   runs content through Safelist.relaxed(), which has no label, input or button -- so that mechanism is
   deleted before it renders. Inline script is out too (CSP has no unsafe-inline). What the safelist
   does allow is an id on an anchor, so the thumb links to #dc-fig-x and the overlay carries that id;
   :target reveals it. Clicking the overlay goes to #dc-close, which matches nothing, so it shuts.
   Anchors are focusable, so this works from the keyboard as well as the mouse. */
body:not(:has(.admin-web-content)) .dc-sec a.dc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 14, 0.93);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  margin: 0;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) .dc-sec a.dc-lightbox:target { display: flex; }
body:not(:has(.admin-web-content)) .dc-sec a.dc-lightbox:focus-visible { outline: 3px solid #FF8C00; outline-offset: -6px; }


/* ---- data-center-lightbox-art ----
   Full-size art is painted as a background, not a second <img>. The <img> never loaded: the platform
   stamps loading="lazy" and the overlay starts display:none, so it never intersects the viewport and
   is never fetched -- the box sized correctly while staying empty. A background has no lazy-loading
   and no sizes="auto" intrinsic-size guessing, and contain cannot distort whatever the panel ratio.
   The thumbnail underneath still carries the descriptive alt text. */
body:not(:has(.admin-web-content)) .dc-sec a.dc-lightbox {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-origin: content-box;
  padding: 6vh 4vw;
  box-sizing: border-box;
}
body:not(:has(.admin-web-content)) .dc-sec a#dc-fig-proximity { background-image: url("/assets/img/20260824203650-300/suffolk-proximity-2x.webp"); }
body:not(:has(.admin-web-content)) .dc-sec a#dc-fig-services { background-image: url("/assets/img/20260824203649-298/suffolk-services-navy-2x.webp"); }
body:not(:has(.admin-web-content)) .dc-sec a#dc-fig-leasing { background-image: url("/assets/img/20260824203650-301/suffolk-leasing-2x.webp"); }
body:not(:has(.admin-web-content)) .dc-sec .dc-lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  padding: 8px 16px;
}
body:not(:has(.admin-web-content)) .dc-sec .dc-lightbox-close::before { content: "\2715\00A0 "; }
/* platform.css puts margin-top:25px on .platform-body, which on a full-bleed hero shows as a
   25px strip of page background between the header and the artwork. Same treatment the careers,
   jobs, about and news heroes already get. */
body:has(.dc-hero-band) .platform-body {
  margin-top: 0;
}

/* "Follow Us" is a bold paragraph inside a footer content block rather than a menu title, so the
   menu-title rule above never reached it and it kept the old grey. */
body:not(:has(.admin-web-content)) footer .platform-content p.text-bold {
  color: #ffffff;
}
/* ---- hero-caption-measure ----
   The hero headline was set to shrink with the viewport (clamp on font-size) inside an 820px
   caption, so on a wide window it ran as one long line and on a narrow one it just got smaller --
   it never wrapped. Measure is given in ch rather than px so it tracks whatever size the clamp
   resolves to: the line length stays constant in characters while the type scales.
   text-wrap:balance splits a two-line headline evenly instead of leaving one word stranded. */
body:not(:has(.admin-web-content)) .hero-slide-caption h3 {
  max-width: 18ch;
  text-wrap: balance;
}
body:not(:has(.admin-web-content)) .hero-slide-caption p.text-white {
  max-width: 40ch;
  text-wrap: pretty;
}

/* ---- about-side-menu ----
   Solutions sidebar ported from the live About page. Colours, sizes and spacing are the values that
   page actually computes: panel #141d3a, 10px radius, red uppercase title at 12.5px/800 with 1.75px
   tracking, items #c3ccdf at 16px/600.

   It is placed in the left gutter rather than by restructuring the page. The body sections here are
   full-width with an 870px centred .cell, matching the live content column, which leaves ~580px of
   empty space each side. Giving the sidebar section height:0 lets it sit in that gutter without
   moving anything below it, so the eight existing au-body sections keep their current alignment.
   Below 1560px there is no longer room beside the column, so it returns to normal flow. */
/* platform.css puts overflow:hidden auto on .web-content. That makes .web-content the scrollport
   for any sticky descendant -- but it never actually scrolls (the window does), so sticky had no
   range to work in and the menu just scrolled away. overflow-x:clip stops horizontal overflow the
   same way hidden did WITHOUT establishing a scroll container, which lets sticky resolve against the
   window instead. Scoped to this page so no other layout is affected. */
body:not(:has(.admin-web-content)):has(.au-sidebar) .web-content {
  overflow-x: clip;
  overflow-y: visible;
}

/* Sticky so the menu travels with the reader instead of scrolling away at the top of the body.
   The section keeps height:0 so it still takes no vertical space and nothing below it moves; sticky
   resolves against .platform-body, which is the parent, so the menu stays pinned for the length of
   the article and releases at its end. The 110px offset clears the fixed site header. */
body:not(:has(.admin-web-content)) .au-sidebar {
  height: 0;
  overflow: visible;
  margin: 0;
  position: sticky;
  top: 110px;
  z-index: 2;
}
body:not(:has(.admin-web-content)) .au-sidebar > .cell { max-width: none; margin: 0; }
body:not(:has(.admin-web-content)) .au-side-menu {
  width: 270px;
  margin-left: calc(50% - 585px);
  margin-top: 92px;
}
body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu {
  background: #141d3a;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 8px 6px;
  margin: 0;
  list-style: none;
}
body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu li { background: transparent; border: 0; margin: 0; }
body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu a {
  display: block;
  color: #c3ccdf;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  padding: 9px 14px;
  background: transparent;
  border-left: 3px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu a:hover,
body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu a:focus-visible {
  color: #FF8C00;
  border-left-color: #FF8C00;
  background: rgba(255, 140, 0, 0.10);
}
/* The first item is the section label, not a peer of the links below it. */
body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu li.au-side-title a {
  color: #e23122;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.75px;
  text-transform: uppercase;
  padding: 6px 14px 10px;
  border-left-color: transparent;
}
body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu li.au-side-title a:hover {
  color: #FF8C00;
  background: transparent;
}
@media (max-width: 1559px) {
  body:not(:has(.admin-web-content)) .au-sidebar { height: auto; padding: 0 20px 8px; }
  body:not(:has(.admin-web-content)) .au-side-menu { width: 100%; max-width: 870px; margin: 0 auto 24px; }
}
/* ---- au-group-centre ----
   With a sidebar in the gutter it is the sidebar+content group that should read as centred, not
   the content column on its own -- otherwise the whole block sits 150px left of centre, which is
   what it looked like. Group is 270 + 30 + 870 = 1170, so it starts at 50% - 585 and the content
   column shifts right by half of that, 150px. A relative offset rather than a percentage margin:
   the cell sits in a gutter-bearing grid row, so % resolves against a containing block that is not
   the one you would expect and the column overshot by 214px when computed that way.
   Only above the breakpoint where the sidebar is actually in the gutter; below it everything
   returns to ordinary centring. */
@media (min-width: 1560px) {
  body:not(:has(.admin-web-content)) .au-body > .cell {
    position: relative;
    left: 150px;
  }
}

/* ---- au-hero-overlay ----
   The banner artwork carries no text; the stage names, their captions and the 2007-2026 block are
   real page text laid over it. Every position is a percentage of the artwork, and the image is now
   pinned to its own 2239/702 ratio rather than a clamped pixel height, so it never crops
   horizontally and the labels stay under their icons at any window width.

   Icon centres and the glowing bar were measured off the image pixels, not estimated:
   icons at 41.4 / 55.6 / 68.0 / 80.6 percent across, bar at 86.8 percent down. */
body:not(:has(.admin-web-content)) .au-hero { position: relative; }
body:not(:has(.admin-web-content)) .au-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* Scrim under the glowing bar so the caption row has something to sit on. */
body:not(:has(.admin-web-content)) .au-hero-overlay::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 84%; bottom: 0;
  background: linear-gradient(to bottom, rgba(6,10,26,0) 0%, rgba(6,10,26,0.55) 30%, rgba(6,10,26,0.82) 100%);
}
body:not(:has(.admin-web-content)) .au-stage-name, body:not(:has(.admin-web-content)) .au-stage-cap {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  display: block;
}
body:not(:has(.admin-web-content)) .au-stage-name {
  /* icons end at 25.6%; sitting the labels right under them read as cramped, so they drop clear */
  top: 32%;
  font-size: clamp(0.7rem, 1.35vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  white-space: nowrap;
}
body:not(:has(.admin-web-content)) .au-stage-cap {
  top: 88%;
  width: 11.8%;
  color: #dbe3f2;
  font-size: clamp(0.5rem, 0.62vw, 0.82rem);
  line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
/* Names sit under their icons. */
body:not(:has(.admin-web-content)) .au-stage-name.au-model { left: 41.7%; }
body:not(:has(.admin-web-content)) .au-stage-name.au-test { left: 55.6%; }
body:not(:has(.admin-web-content)) .au-stage-name.au-secure { left: 68.2%; }
body:not(:has(.admin-web-content)) .au-stage-name.au-advance { left: 80.5%; }
/* Captions centre on the timeline SEGMENT they describe rather than on the icon above them. The
   Dot centroids measured at 36.63 / 48.54 / 62.02 / 74.44 / 86.54%, so the midpoints are
   42.59 / 55.28 / 68.23 / 80.49%. The first pass used threshold peaks and sat every caption about
   0.1% right of true centre.
   The first one was the visibly off case -- icon at 41.4% against a segment midpoint of 42.7%. */
body:not(:has(.admin-web-content)) .au-stage-cap.au-model { left: 42.59%; }
body:not(:has(.admin-web-content)) .au-stage-cap.au-test { left: 55.28%; }
body:not(:has(.admin-web-content)) .au-stage-cap.au-secure { left: 68.23%; }
body:not(:has(.admin-web-content)) .au-stage-cap.au-advance { left: 80.49%; }
body:not(:has(.admin-web-content)) .au-model { color: #3d9bfd; }
body:not(:has(.admin-web-content)) .au-test { color: #22d3ee; }
body:not(:has(.admin-web-content)) .au-secure { color: #8bd450; }
body:not(:has(.admin-web-content)) .au-advance { color: #ff9a2e; }
body:not(:has(.admin-web-content)) .au-stage-cap.au-model, body:not(:has(.admin-web-content)) .au-stage-cap.au-test,
body:not(:has(.admin-web-content)) .au-stage-cap.au-secure, body:not(:has(.admin-web-content)) .au-stage-cap.au-advance { color: #dbe3f2; }
body:not(:has(.admin-web-content)) .au-since {
  position: absolute;
  /* Everything here is a percentage of the artwork, never a pixel cap. min(16%,270px) meant that at
     narrower windows the 270px floor made the block proportionally WIDER, walking its left edge back
     over the ADVANCE brain icon. Pure percentages freeze it in the same spot at every size.
     The brain icon spans 78.2-83% across, so the block starts at 85% and sits over the globe. */
  /* Centred on the planet at 93%. An earlier blue-dominant mask returned 89.1%, but that swept in
     the dashboard panels and the smaller globe, which are blue too, and pulled the figure left. The
     full-brightness centroid of the sphere plus its lit rim lands at 93.6%, which matches the eye.
     At 11.5% wide this spans 87.25-98.75%: inside the frame, and well clear of the ADVANCE ring
     which ends at 82.7%. */
  left: 93%;
  transform: translateX(-50%);
  top: 10%;
  width: 11.5%;
  text-align: left;
}
body:not(:has(.admin-web-content)) .au-since-years {
  display: block;
  color: #ff9a2e;
  font-size: clamp(0.7rem, 1.25vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 0.55em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
body:not(:has(.admin-web-content)) .au-since-line {
  display: block;
  color: #ffffff;
  font-size: clamp(0.5rem, 0.8vw, 1.05rem);
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.75);
}

/* ---- au-bio-panel ----
   Matches the reference: photo and name as a header row, then the bio paragraphs full width beneath,
   on a panel with an orange rule down the left edge.

   The photo needs BOTH width and height stated. These are content images, so the platform stamps
   sizes="auto" on them, and with only one dimension set the other falls back to the CSS default
   object size -- both headshots were rendering 190x150 with object-fit:fill, which put Dr Garcia's
   2053x2573 portrait 59% out of shape. A square box with object-fit:cover crops instead of
   squashing, and object-position keeps the crop on the face rather than the centre of the frame. */
body:not(:has(.admin-web-content)) .au-bio {
  display: block;
  background: rgba(18, 23, 40, 0.55);
  border-left: 3px solid #FF8C00;
  border-radius: 12px;
  padding: 30px 34px;
  margin: 0 0 28px;
}
body:not(:has(.admin-web-content)) .au-bio-head {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 22px;
}
body:not(:has(.admin-web-content)) .platform-body .au-bio-head img {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 12px;
  margin: 0;
}
body:not(:has(.admin-web-content)) .platform-body .au-bio-head h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.05rem, 1.25vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
}
body:not(:has(.admin-web-content)) .au-bio p {
  color: #dbe3f2;
  line-height: 1.65;
  margin: 0 0 16px;
}
body:not(:has(.admin-web-content)) .au-bio p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  body:not(:has(.admin-web-content)) .au-bio { padding: 22px 20px; }
  body:not(:has(.admin-web-content)) .au-bio-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---- au-recognition ----
   The card treatment already existed; what differed from the reference was the width and the
   colour of the award name. Both are scoped to this section rather than to .au-values, because
   Core Values uses the same class and should keep its orange lead-ins.

   Width is deliberately left alone: the section keeps the same box and the same left edge as every
   other body section, so it stays aligned with the content above and below it. The inherited
   minmax(250px,1fr) grid already lays the cards out three across in that box, which is the same
   proportion the reference shows -- that screenshot was simply a wider window. */
body:not(:has(.admin-web-content)) .au-recognition .au-values strong { color: #ffffff; }

/* ---- au-close-cta ---- */
/* Prose links on this page were inheriting the theme --sc-link-color, rgb(180,83,9), which is tuned
   for a light background. On the navy ground here that measured 3.75:1 -- under the 4.5:1 AA needs
   for normal text. The brand orange already used for links on the other dark pages measures ~8:1. */
body:not(:has(.admin-web-content)) .au-body .platform-content a:not(.button):not(.careers-badge) {
  color: #ff8c00;
}
body:not(:has(.admin-web-content)) .au-close .platform-content p a:not(.button) { font-weight: 700; }
/* The closing Contact Us sits in a plain paragraph, so it inherited the left alignment of the prose. */
body:not(:has(.admin-web-content)) .au-close .platform-content p:has(> a.button) { text-align: center; }

/* ---- hollow-button-contrast ----
   The inline edit affordances render as a grey glyph on an identically grey chip -- unreadable.
   Foundation gives .button.hollow a transparent background, but .button.secondary carries the same
   specificity and its grey background was winning, so the icon and its backdrop ended up the same
   colour (118,118,118). Restoring the transparent background is what .hollow was asking for; the
   border and light glyph make it legible on the dark pages. Not scoped to one page, because these
   controls appear anywhere an editor is signed in. */
a.button.hollow.secondary,
a.button.hollow.secondary:hover,
a.button.hollow.secondary:focus {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
a.button.hollow.secondary:hover {
  border-color: #FF8C00;
  color: #FF8C00;
}

/* ---- tc-sidebar ----
   Same Solutions menu as About Us, reusing .au-sidebar / .au-side-menu so it inherits the panel
   styling, the sticky behaviour, and the overflow-x:clip fix that lets sticky work at all.
   Only the geometry differs, because this page centres the same 870px panel beside a sidebar:
   group = 270 sidebar + 30 gap + 870 panel = 1170, so the group starts at 50% - 585 and the panel
   shifts right by half the sidebar block (150px) to keep the pair centred. */
body:not(:has(.admin-web-content)) .tc-sidebar .au-side-menu { margin-left: calc(50% - 585px); }
@media (min-width: 1600px) {
  body:not(:has(.admin-web-content)) .tc-body .platform-content {
    position: relative;
    left: 150px;
  }
}
@media (max-width: 1599px) {
  body:not(:has(.admin-web-content)) .tc-sidebar .au-side-menu { width: 100%; max-width: 870px; margin: 0 auto 24px; }
}

/* ---- au-sidebar-passthrough ----
   The sidebar section is height:0 so it takes no vertical space, but the widget wrappers inside it
   still have a real box that spans the full content width and overflows visibly. Combined with the
   sticky z-index:2 that put an invisible full-width sheet on top of the page, swallowing hover and
   clicks for everything underneath -- the Trust Center badge links could not be reached at all.
   Pointer events pass straight through the empty wrappers; only the menu itself takes them back. */
body:not(:has(.admin-web-content)) .au-sidebar,
body:not(:has(.admin-web-content)) .au-sidebar > .cell,
body:not(:has(.admin-web-content)) .au-sidebar .platform-content-container,
body:not(:has(.admin-web-content)) .au-sidebar .platform-content {
  pointer-events: none;
}
body:not(:has(.admin-web-content)) .au-side-menu {
  pointer-events: auto;
}

/* ---- tc-prose-links ----
   Inline links in the panel copy read bold, matching the CMMC callout links which already do.
   :not(:has(img)) keeps the badge wrappers out of it -- those are image links, not prose. */
body:not(:has(.admin-web-content)) .tc-body .platform-content p a:not(.button):not(:has(img)) {
  font-weight: 700;
}

/* ---- subscribe-page ----
   The Subscribe page has no live-site counterpart, so it reuses the Trust Center card treatment:
   the connected-network artwork runs full-bleed behind a centred translucent panel. That artwork
   is drawn with an open, near-black middle and detail only around the edges, so the scrim stays
   light at 40% and the panel supplies the rest of the contrast the form labels need. */
body:not(:has(.admin-web-content)) .full-container:has(.sub-page) {
  background-image:
    linear-gradient(rgba(8, 12, 28, 0.4), rgba(8, 12, 28, 0.4)),
    url("/assets/img/20260824200917-287/SimIS%20Connected%20Simulation%20Network.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 87px);
  padding: 3.5rem 0 4rem;
  box-sizing: border-box;
}
body:not(:has(.admin-web-content)) .full-container:has(.sub-page) > .grid-container {
  width: 100%;
}
body:not(:has(.admin-web-content)) .platform-body:has(.sub-page) {
  margin-top: 0;
}
body:not(:has(.admin-web-content)) .sub-page {
  margin-top: 0;
}
body:not(:has(.admin-web-content)) .sub-page > .cell {
  background: rgba(13, 19, 38, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  padding: 56px 52px 46px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
body:not(:has(.admin-web-content)) .sub-page > .cell,
body:not(:has(.admin-web-content)) .sub-page > .cell p,
body:not(:has(.admin-web-content)) .sub-page > .cell em,
body:not(:has(.admin-web-content)) .sub-page > .cell small {
  color: rgba(226, 232, 245, 0.9);
}
body:not(:has(.admin-web-content)) .platform-body .sub-page .platform-content h2 {
  color: #ffffff;
  margin-bottom: 0.4rem;
  text-align: center;
}
/* The accent bar is a ::after on the heading and is left-aligned by a global rule that already
   carries .platform-body .platform-content > h2, so this has to match that shape to win. */
body:not(:has(.admin-web-content)) .platform-body .sub-page .platform-content > h2::after {
  margin-left: auto;
  margin-right: auto;
  width: 190px;
  background-image:
    linear-gradient(90deg, rgba(255, 140, 0, 0), rgb(255, 140, 0) 50%, rgba(255, 140, 0, 0));
}
body:not(:has(.admin-web-content)) .sub-page .sub-lede {
  font-size: 1.06rem;
  line-height: 1.6;
  margin-bottom: 1.35rem;
}
body:not(:has(.admin-web-content)) .sub-page > .cell a {
  color: #ff8c00;
}
body:not(:has(.admin-web-content)) .sub-page > .cell a:hover,
body:not(:has(.admin-web-content)) .sub-page > .cell a:focus {
  color: #ffa940;
}
body:not(:has(.admin-web-content)) .sub-page label {
  color: #ffffff;
  font-weight: 600;
}
body:not(:has(.admin-web-content)) .sub-page input[type="text"],
body:not(:has(.admin-web-content)) .sub-page input[type="email"],
body:not(:has(.admin-web-content)) .sub-page input[type="tel"],
body:not(:has(.admin-web-content)) .sub-page select {
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #ffffff;
  box-shadow: none;
}
body:not(:has(.admin-web-content)) .sub-page input[type="text"]::placeholder,
body:not(:has(.admin-web-content)) .sub-page input[type="email"]::placeholder,
body:not(:has(.admin-web-content)) .sub-page input[type="tel"]::placeholder {
  color: rgba(226, 232, 245, 0.5);
}
body:not(:has(.admin-web-content)) .sub-page input[type="text"]:focus,
body:not(:has(.admin-web-content)) .sub-page input[type="email"]:focus,
body:not(:has(.admin-web-content)) .sub-page input[type="tel"]:focus,
body:not(:has(.admin-web-content)) .sub-page select:focus {
  background-color: rgba(255, 255, 255, 0.11);
  border-color: #ff8c00;
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.25);
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .sub-page select option {
  color: #1a1a1a;
}
body:not(:has(.admin-web-content)) .sub-page .button.success {
  border-radius: 10px;
  color: #ffffff;
  font-weight: 700;
}
@media (max-width: 640px) {
  body:not(:has(.admin-web-content)) .full-container:has(.sub-page) {
    min-height: 0;
    padding: 2rem 0 2.5rem;
  }
  body:not(:has(.admin-web-content)) .sub-page > .cell {
    padding: 38px 22px 32px;
    border-radius: 16px;
  }
}
/* The reCAPTCHA badge may only be hidden if Google's attribution is shown instead, so the
   notice below the button carries it. Scoped to this page - other forms still show the badge. */
/* Both fine-print lines are set as one small-print block: the widget renders the first as an
   italic .help-text and the notice below was upright and a shade smaller, which read as two
   unrelated bits of text. Same size, style, colour and a tight gap makes them one unit. */
body:not(:has(.admin-web-content)) .sub-page > .cell .help-text,
body:not(:has(.admin-web-content)) .sub-page > .cell p.sub-recaptcha {
  text-align: center;
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(226, 232, 245, 0.72);
}
body:not(:has(.admin-web-content)) .sub-page > .cell .help-text {
  margin: 4px 0 0;
}
body:not(:has(.admin-web-content)) .sub-page > .cell p.sub-recaptcha {
  margin: 0.35rem 0 0;
}
body:not(:has(.admin-web-content)):has(.sub-page) .grecaptcha-badge {
  visibility: hidden;
}

/* ---- solutions-page ----
   Port of the live /solutions page. The reference keeps its styling in an inline <style> block in
   page content; here it lives in the stylesheet and the markup carries classes instead, which is
   how the rest of this site is built. Card art is set as background-image per class so the
   sanitizer cannot strip an inline style, and so the platform sizes=auto stamp on content images
   never gets a chance to mis-size the tiles. */
body:not(:has(.admin-web-content)):has(.sol-page) {
  background: #333b42 url("/assets/img/20260823155036-253/GrayBG.webp") center center / cover fixed no-repeat;
}
body:not(:has(.admin-web-content)) .platform-body:has(.sol-page) {
  margin-top: 0;
}
body:not(:has(.admin-web-content)) .sol-hero-sec,
body:not(:has(.admin-web-content)) .sol-intro-sec,
body:not(:has(.admin-web-content)) .sol-cards-sec,
body:not(:has(.admin-web-content)) .sol-cta-sec {
  margin: 0;
}
body:not(:has(.admin-web-content)) .sol-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #0a0e14;
}
body:not(:has(.admin-web-content)) .sol-hero > img {
  display: block;
  width: 100%;
  aspect-ratio: 1983 / 793;
  object-fit: cover;
  background: #0a0e14;
}
/* The scrim and the accent rule are pseudo-elements: the sanitiser drops any empty div, so a
   decorative layer cannot be its own element in page content. */
body:not(:has(.admin-web-content)) .sol-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(8, 11, 16, 0.92) 0%, rgba(8, 11, 16, 0.72) 34%, rgba(8, 11, 16, 0.15) 64%, rgba(8, 11, 16, 0) 100%);
}
body:not(:has(.admin-web-content)) .sol-hero-copy {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 62%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5%;
  box-sizing: border-box;
  z-index: 2;
}
body:not(:has(.admin-web-content)) .platform-body .sol-hero-copy .sol-eyebrow {
  color: #e0472f;
  font-size: clamp(12px, 1.25vw, 17px);
  letter-spacing: 0.14em;
  font-weight: 700;
  margin: 0 0 1.2%;
}
body:not(:has(.admin-web-content)) .platform-body .sol-hero-copy .sol-hero-title {
  color: #ffffff;
  font-size: clamp(24px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 2.6%;
}
body:not(:has(.admin-web-content)) .platform-body .sol-hero-copy .sol-hero-title::after {
  content: "";
  display: block;
  width: clamp(90px, 9vw, 150px);
  height: 4px;
  background: linear-gradient(90deg, #ef9f27 45%, transparent);
  margin: 2.4% 0 0;
}
body:not(:has(.admin-web-content)) .platform-body .sol-hero-copy .sol-hero-sub {
  color: #d3d1c7;
  font-size: clamp(13px, 1.5vw, 21px);
  line-height: 1.4;
  margin: 0 0 3.6%;
  max-width: 26ch;
}
body:not(:has(.admin-web-content)) .sol-hero-cta {
  display: inline-block;
  width: fit-content;
  background: #f5901e;
  color: #ffffff;
  font-size: clamp(13px, 1.3vw, 18px);
  font-weight: 700;
  padding: 0.7em 1.7em;
  border-radius: 4px;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) .sol-hero-cta:hover,
body:not(:has(.admin-web-content)) .sol-hero-cta:focus {
  background: #e0801a;
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .sol-intro {
  padding: 56px 24px 46px;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}
body:not(:has(.admin-web-content)) .platform-body .sol-intro h2 {
  color: #f2f5fb;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 1.1rem;
}
body:not(:has(.admin-web-content)) .platform-body .sol-intro > h2::after {
  margin-left: auto;
  margin-right: auto;
}
body:not(:has(.admin-web-content)) .platform-body .sol-intro p {
  color: #dde1e9;
  font-size: 1.2rem;
  line-height: 1.7;
  margin: 0 0 1.15rem;
}
body:not(:has(.admin-web-content)) .platform-body .sol-intro p:last-child {
  margin-bottom: 0;
}
body:not(:has(.admin-web-content)) .sol-wrap {
  padding: 0 24px;
}
body:not(:has(.admin-web-content)) .sol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}
body:not(:has(.admin-web-content)) .sol-card {
  display: block;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body:not(:has(.admin-web-content)) a.sol-card:hover,
body:not(:has(.admin-web-content)) a.sol-card:focus {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.62);
}
body:not(:has(.admin-web-content)) .sol-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 1470 / 1070;
  object-fit: cover;
  background: #33404d;
}
body:not(:has(.admin-web-content)) .sol-body {
  padding: 24px 28px;
}
body:not(:has(.admin-web-content)) .platform-body .sol-body h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #1a2733;
  line-height: 1.2;
}
body:not(:has(.admin-web-content)) .platform-body .sol-body p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #5a6672;
}
body:not(:has(.admin-web-content)) .platform-body .sol-body .sol-more {
  font-size: 14px;
  font-weight: 700;
  color: #e0472f;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) .platform-body .sol-body a.sol-more-row {
  display: block;
  margin-bottom: 6px;
}
body:not(:has(.admin-web-content)) .platform-body .sol-body a.sol-more-row:last-child {
  margin-bottom: 0;
}
body:not(:has(.admin-web-content)) .platform-body .sol-body a.sol-more:hover,
body:not(:has(.admin-web-content)) .platform-body .sol-body a.sol-more:focus {
  color: #f5901e;
  text-decoration: underline;
}
body:not(:has(.admin-web-content)) .sol-cta-wrap {
  padding: 52px 24px;
}
body:not(:has(.admin-web-content)) .sol-cta-panel {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(18, 23, 40, 0.58);
  border-radius: 18px;
  padding: 44px;
  box-sizing: border-box;
  text-align: center;
}
body:not(:has(.admin-web-content)) .platform-body .sol-cta-panel .sol-cta-head {
  color: #ffffff;
  font-size: 27px;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.3;
}
body:not(:has(.admin-web-content)) .platform-body .sol-cta-panel .sol-cta-sub {
  color: #d3d1c7;
  font-size: 1.2rem;
  line-height: 1.65;
  margin: 0 auto 26px;
  max-width: 58ch;
}
body:not(:has(.admin-web-content)) .sol-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #e0562a;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) .sol-cta-btn:hover,
body:not(:has(.admin-web-content)) .sol-cta-btn:focus {
  background: #c94a22;
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .sol-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  color: #e0562a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
@media (max-width: 640px) {
  body:not(:has(.admin-web-content)) .sol-grid {
    grid-template-columns: 1fr;
  }
  body:not(:has(.admin-web-content)) .sol-hero-copy {
    width: 100%;
    background: linear-gradient(90deg, rgba(8, 11, 16, 0.86), rgba(8, 11, 16, 0.55));
  }
  body:not(:has(.admin-web-content)) .sol-cta-panel {
    padding: 30px 20px;
  }
}
/* ---- contact-page ----
   Both callout headings are centred. The shared accent is a gradient built for a left-aligned
   heading (solid at the left, fading right), so centring only the box would leave the visible ink
   sitting left of centre; the gradient is made symmetric and widened to keep the same weight. */
body:not(:has(.admin-web-content)) .platform-body .contact-page .callout.box .platform-content h2 {
  text-align: center;
}
body:not(:has(.admin-web-content)) .platform-body .contact-page .callout.box .platform-content > h2::after {
  margin-left: auto;
  margin-right: auto;
  width: 190px;
  background-image:
    linear-gradient(90deg, rgba(255, 140, 0, 0), rgb(255, 140, 0) 50%, rgba(255, 140, 0, 0));
}
/* ---- contact-page-ground ----
   The artwork is an inline background on one section container, which stops where that section
   stops -- leaving the white body ground showing between the last section and the footer. Painting
   the same image on the body covers the whole page. Both are background-attachment: fixed with the
   same size and position, so the two align exactly and there is no seam where they meet. */
body:not(:has(.admin-web-content)):has(.contact-page) {
  background-image: url("/assets/img/20260824200911-279/ContactUsBackground.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---- government-services ----
   Table rules are structural (.gs-body table) rather than class-based: the sanitiser grants class
   to div, span, p, h1-h6, ul, li, i and a only, so a class on <table> is dropped the same way one
   on <img> is. See simis-cms-sanitizer-strips-empty-divs.
   Port of the live /government-services page. Values are taken from the reference page, with its
   inline styles moved into classes here. The reference makes its TOC stick with Foundation's
   data-sticky plugin, which needs attributes the page XML cannot carry; CSS position:sticky does
   the same job. .web-content sets overflow-y:auto, which would silently make it the scrollport and
   break sticky, so it is relaxed to overflow-x:clip on this page only. */
body:not(:has(.admin-web-content)):has(.gs-page) {
  background: #333b42 url("/assets/img/20260823155036-253/GrayBG.webp") center center / cover fixed no-repeat;
}
body:not(:has(.admin-web-content)) .platform-body:has(.gs-page) {
  margin-top: 0;
}
body:not(:has(.admin-web-content)) .gs-hero-sec {
  margin: 0;
}
body:not(:has(.admin-web-content)) .gs-body-sec {
  margin-top: 55px;
}
body:not(:has(.admin-web-content)) .gs-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  line-height: 0;
  background: #080c16;
}
body:not(:has(.admin-web-content)) .gs-hero > img {
  display: block;
  width: 100%;
  aspect-ratio: 2239 / 702;
  object-fit: cover;
}
body:not(:has(.admin-web-content)) .gs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(8, 12, 22, 0.86), rgba(8, 12, 22, 0.5) 42%, rgba(8, 12, 22, 0) 70%);
}
body:not(:has(.admin-web-content)) .gs-hero-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 5vw;
  box-sizing: border-box;
  line-height: normal;
}
body:not(:has(.admin-web-content)) .platform-body .gs-hero-copy .gs-eyebrow-hero {
  color: #e0472f;
  font-weight: 700;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-hero-copy .gs-hero-title {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 54px);
  line-height: 1.06;
  margin: 0 0 18px;
  max-width: 16ch;
}
body:not(:has(.admin-web-content)) .platform-body .gs-hero-copy .gs-hero-title::after {
  content: "";
  display: block;
  width: clamp(90px, 9vw, 150px);
  height: 4px;
  background: linear-gradient(90deg, #ef9f27 45%, transparent);
  margin: 20px 0 0;
}
body:not(:has(.admin-web-content)) .platform-body .gs-hero-copy .gs-hero-sub {
  color: #dbe3ec;
  font-size: clamp(14px, 1.35vw, 20px);
  line-height: 1.5;
  margin: 20px 0 26px;
  max-width: 36ch;
}
body:not(:has(.admin-web-content)) .gs-hero-cta {
  display: inline-block;
  background: #c4441f;
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  padding: 13px 31px;
  border-radius: 4px;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) .gs-hero-cta:hover,
body:not(:has(.admin-web-content)) .gs-hero-cta:focus {
  background: #a83917;
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .gs-body {
  background: rgba(18, 23, 40, 0.58);
  border-radius: 18px;
  padding: 44px 40px;
  color: #e6ebf5;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  color: #f2f5fb;
  letter-spacing: -0.5px;
  /* Mid-panel headings only had the previous paragraph’s 16px below it, so consecutive sections ran
     together. The opening heading of each panel is zeroed below so it stays flush with the padding. */
  margin: 56px 0 32px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body > h2:first-child {
  margin-top: 0;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body > h2::after {
  content: "";
  display: block;
  height: 3px;
  width: 120px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ff8c00 50%, transparent);
  margin: 12px auto 0;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .gs-intro {
  font-size: 19.2px;
  line-height: 1.65;
  color: #dbe3ec;
  margin: 0 0 34px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body h3 {
  font-size: 27.2px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  margin: 40px 0 16px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .gs-eyebrow {
  color: #ef9f27;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 0 0 4px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .gs-eyebrow + h3 {
  margin-top: 0;
}
body:not(:has(.admin-web-content)) .gs-creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
}
body:not(:has(.admin-web-content)) .gs-cred {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid #ef9f27;
  border-radius: 8px;
  padding: 12px 14px;
}
body:not(:has(.admin-web-content)) .gs-cred-k {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #9fb0c9;
  margin-bottom: 5px;
}
body:not(:has(.admin-web-content)) .gs-cred-v {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}
body:not(:has(.admin-web-content)) .gs-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
/* Foundation paints tbody #fefefe. Leaving tbody out of this list put light text on a white
   ground and made the table unreadable, so thead/tbody are cleared here too. */
body:not(:has(.admin-web-content)) .gs-body table,
body:not(:has(.admin-web-content)) .gs-body table thead,
body:not(:has(.admin-web-content)) .gs-body table tbody,
body:not(:has(.admin-web-content)) .gs-body table tr,
body:not(:has(.admin-web-content)) .gs-body table td,
body:not(:has(.admin-web-content)) .gs-body table th {
  background: transparent;
  color: #dbe3ec;
  border-color: rgba(255, 255, 255, 0.12);
}
body:not(:has(.admin-web-content)) .gs-body table th {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff8c00;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid rgba(255, 140, 0, 0.3);
}
body:not(:has(.admin-web-content)) .gs-body table td {
  padding: 12px 14px;
  font-size: 17px;
  vertical-align: top;
}
body:not(:has(.admin-web-content)) .gs-body table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.05);
}
body:not(:has(.admin-web-content)) .platform-body .gs-body a.gs-link {
  color: #ff8c00;
  font-weight: 700;
}
body:not(:has(.admin-web-content)) .gs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
body:not(:has(.admin-web-content)) .gs-chip {
  background: rgba(239, 159, 39, 0.08);
  border: 1px solid rgba(239, 159, 39, 0.5);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 15px;
  line-height: 1.3;
  color: #e9dcc4;
}
body:not(:has(.admin-web-content)) .gs-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}
body:not(:has(.admin-web-content)) .gs-why-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 18px 20px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-why-item h4 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}
body:not(:has(.admin-web-content)) .platform-body .gs-why-item p {
  color: #c7d0e0;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}
body:not(:has(.admin-web-content)) .gs-pp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body:not(:has(.admin-web-content)) .gs-pp-main {
  flex: 1;
  min-width: 0;
}
body:not(:has(.admin-web-content)) .gs-pp-name {
  display: block;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
}
body:not(:has(.admin-web-content)) .gs-pp-org {
  display: block;
  color: #9fb0c9;
  font-size: 15px;
  margin-top: 2px;
}
body:not(:has(.admin-web-content)) .gs-pp-val {
  color: #ef9f27;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .gs-pp-note {
  color: #9fb0c9;
  font-size: 13px;
  margin-top: 12px;
}
body:not(:has(.admin-web-content)) .gs-naics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 20px;
}
body:not(:has(.admin-web-content)) .gs-naics-row {
  font-size: 16px;
  color: #dbe3ec;
  padding: 4px 0;
}
body:not(:has(.admin-web-content)) .gs-naics-row b {
  color: #ffffff;
  margin-right: 8px;
}
body:not(:has(.admin-web-content)) .gs-naics-desc {
  color: #c7d0e0;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body a.gs-tclink {
  color: #ff8c00;
  font-weight: 700;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .gs-reach-cta {
  text-align: center;
  margin: 26px 0 0;
}
body:not(:has(.admin-web-content)) .gs-cta-btn {
  display: inline-block;
  background: #c4441f;
  color: #ffffff;
  font-size: 20px;
  line-height: 20px;
  padding: 17px 22px;
  border-radius: 8px;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) .gs-cta-btn:hover,
body:not(:has(.admin-web-content)) .gs-cta-btn:focus {
  background: #a83917;
  color: #ffffff;
}
body:not(:has(.admin-web-content)):has(.gs-page) .web-content {
  overflow-x: clip;
  overflow-y: visible;
}
body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container {
  position: sticky;
  top: 110px;
}
body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container .vertical.menu {
  background: #121728;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 8px 0;
}
body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container .vertical.menu li {
  background: transparent;
  margin-bottom: 1px;
}
body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container .vertical.menu li a {
  color: #c3ccdf;
  font-size: 16px;
  font-weight: 600;
  padding: 9px 14px;
  background: transparent;
  border-left: 3px solid transparent;
  /* Square left edge only -- rounding all four corners tapered the active bar at its ends. */
  border-radius: 0 8px 8px 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container .vertical.menu li a:hover,
body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container .vertical.menu li a:focus {
  color: #ef9f27;
  border-left-color: #ef9f27;
  background: rgba(239, 159, 39, 0.1);
}
/* The first entry is the menu heading on the reference page, not a destination. */
body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container nav ul.vertical.menu li:first-child a {
  color: #e23122;
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 14px 10px;
  text-transform: uppercase;
  letter-spacing: 1.75px;
  border-left-color: transparent;
  background: transparent;
}
@media (max-width: 639px) {
  body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container {
    position: static;
  }
  body:not(:has(.admin-web-content)) .gs-body {
    padding: 28px 20px;
  }
  body:not(:has(.admin-web-content)) .gs-body-sec {
    margin-top: 24px;
  }
}
/* Certifications sits in its own inset card, and Reach Out is lifted out of the dark panel onto
   the page background as a centred closer -- matching the reference layout. */
body:not(:has(.admin-web-content)) .gs-cert-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 26px 30px;
  margin-top: 4px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-cert-card p {
  margin: 0;
}
body:not(:has(.admin-web-content)) .platform-body .gs-cert-card .gs-cert-links {
  margin: 18px 0 0;
}
body:not(:has(.admin-web-content)) .gs-reach-sec {
  margin: 0;
}
body:not(:has(.admin-web-content)) .gs-reach {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 0 20px 55px;
  text-align: center;
}
body:not(:has(.admin-web-content)) .platform-body .gs-reach h3 {
  font-size: 27.2px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  margin: 0 0 12px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-reach p {
  font-size: 18px;
  line-height: 1.6;
  color: #c7d0e0;
  margin: 0 0 26px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-reach .gs-reach-cta {
  margin: 0;
}
body:not(:has(.admin-web-content)) .gs-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  color: #df5430;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  margin-left: 10px;
}
body:not(:has(.admin-web-content)) .gs-cta-btn {
  display: inline-flex;
  align-items: center;
}
/* ---- service-page body copy ----
   Shared by the solution pages, which reuse the gs- panel/hero/TOC styling. Figures state an
   explicit aspect-ratio next to a definite width so the platform sizes=auto stamp cannot fall back
   to the 300x150 default object size. */
body:not(:has(.admin-web-content)) .platform-body .gs-body p {
  color: #dbe3ec;
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 16px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body ul {
  margin: 0 0 20px 1.3rem;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body li {
  color: #dbe3ec;
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 7px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .ms-label {
  margin: 26px 0 8px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .ms-label strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .ms-figure {
  text-align: center;
  margin: 26px 0 28px;
}
/* No fixed aspect-ratio: these figures ship at several ratios (2.19, 1.5, 1.33), and forcing one
   box letterboxed them against the tint, which read as a grey frame. width is definite, so the
   platform sizes=auto stamp still has nothing to fall back on. */
body:not(:has(.admin-web-content)) .gs-body .ms-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/* ---- service-figure lightbox ----
   Same mechanism as the data-center panels. The reference uses a checkbox-hack lightbox, which the
   sanitiser cannot carry (no input, no label), so this is :target instead. Both hrefs are full page
   paths rather than bare #fragments: main.jsp binds a click handler to a[href^="#"] that calls
   preventDefault() unconditionally, so a bare fragment would never set :target. The overlay is an
   <a> because id is only allowed on anchors, and it holds a span so the sanitiser does not drop it
   as an empty element. The full-size art is a background-image -- an <img> inside display:none is
   never fetched, which is how the data-center version first failed. */
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom {
  display: block;
  max-width: 680px;
  margin: 0 auto;
  text-decoration: none;
  cursor: zoom-in;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom::after {
  content: "\1F50D\00A0 Click to enlarge";
  display: block;
  font-size: 13px;
  color: #9aa5b5;
  text-align: center;
  margin: 10px 0 0;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom:hover::after {
  color: #ff8c00;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom:focus-visible img {
  outline: 3px solid #ff8c00;
  outline-offset: 3px;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  text-decoration: none;
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  background-color: rgba(6, 9, 14, 0.93);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-origin: content-box;
  padding: 6vh 4vw;
  box-sizing: border-box;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-lightbox:target {
  display: flex;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-lightbox:focus-visible {
  outline: 3px solid #ff8c00;
  outline-offset: -6px;
}
body:not(:has(.admin-web-content)) .gs-body .ms-lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .gs-body a#ms-fig-lvc {
  background-image: url("/assets/img/20260824200914-283/Benefits%20of%20Live%2C%20Virtual%2C%20and%20Constructive%20Training.webp");
}
body:not(:has(.admin-web-content)) .gs-body a#ms-fig-trace {
  background-image: url("/assets/img/20260824203645-290/Tracing%20Mission%20Need%20to%20Delivered%20Capability.webp");
}
/* The first entry is styled as the menu heading, and that selector outranks the generic
   li a:hover -- so it needs its own hover state to pick up the accent like every other item. */
body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container nav ul.vertical.menu li:first-child a:hover,
body:not(:has(.admin-web-content)) .gs-body-sec .platform-toc-container nav ul.vertical.menu li:first-child a:focus {
  color: #ef9f27;
}
/* ---- autonomous-solutions ----
   The hero is a full-bleed background band that sets container-type, so the type scales against the
   band width in cqw rather than the viewport. The accent rule is a ::after on the title: the
   reference uses its own empty div, and the sanitiser deletes empty elements. Product art is
   selected structurally because class is stripped from <img>. */
body:not(:has(.admin-web-content)) .as-hero-sec {
  margin: 0;
}
body:not(:has(.admin-web-content)) .as-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: 100vw;
  background: url("/assets/img/20260824200913-281/Autonomous%20Solutions%20in%20a%20Simulated%20Mission%20Environment.webp") center center / cover no-repeat #000616;
  aspect-ratio: 2242 / 701;
  min-height: 340px;
  container-type: inline-size;
  display: flex;
  align-items: center;
}
body:not(:has(.admin-web-content)) .as-hero-inner {
  max-width: 52cqw;
  padding: 2.4cqw 1.4cqw 1.6cqw 2.7cqw;
}
body:not(:has(.admin-web-content)) .platform-body .as-hero-inner .as-kicker {
  color: #e0472f;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(12px, 1.25cqw, 17px);
  margin: 0 0 0.75cqw;
}
body:not(:has(.admin-web-content)) .platform-body .as-hero-inner .as-title {
  color: #ffffff;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(22px, 3.6cqw, 50px);
  max-width: 15em;
  margin: 0 0 1.5cqw;
}
body:not(:has(.admin-web-content)) .platform-body .as-hero-inner .as-title::after {
  content: "";
  display: block;
  width: clamp(90px, 9cqw, 150px);
  height: 4px;
  background: linear-gradient(90deg, #ef9f27 45%, transparent);
  margin: 1.5cqw 0 0;
}
body:not(:has(.admin-web-content)) .platform-body .as-hero-inner .as-sub {
  color: #d3d1c7;
  font-size: clamp(13px, 1.5cqw, 21px);
  line-height: 1.4;
  max-width: 40ch;
  margin: 1.6cqw 0 0;
}
body:not(:has(.admin-web-content)) .platform-body .as-hero-inner .as-hero-cta {
  margin: 2.2cqw 0 0;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .as-thesis {
  text-align: center;
  font-style: italic;
  color: #aeb6c6;
  margin-bottom: 30px;
}
body:not(:has(.admin-web-content)) .gs-body .as-prod {
  display: flow-root;
  margin-bottom: 30px;
}
body:not(:has(.admin-web-content)) .gs-body .as-prod img {
  float: right;
  width: 38%;
  /* Both dimensions are definite, so the platform sizes=auto stamp has nothing to fall back on. */
  height: 167px;
  object-fit: cover;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
  margin: 4px 0 14px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .as-more a {
  color: #ff8c00;
  font-weight: 700;
  text-decoration: none;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .as-more a:hover {
  color: #ef9f27;
  text-decoration: underline;
}

/* Whole-card link on the Autonomous Solutions product cards.
   Each .as-prod already carries exactly one "Learn More" anchor to its product page. This stretches
   that same anchor across the card instead of wrapping the card in a second one, which would nest an
   anchor inside an anchor -- invalid, and it would give screen readers two links to the same place.
   One link, one accessible name, whole card clickable.
   z-index 3 because .as-prod:hover img raises the image to 2; without it the image would swallow the
   click on hover, which is exactly where the pointer is. */
body:not(:has(.admin-web-content)) .gs-body .as-prod {
  position: relative;
}
body:not(:has(.admin-web-content)) .gs-body .as-prod .as-more a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
body:not(:has(.admin-web-content)) .gs-body .as-prod:hover {
  cursor: pointer;
}
/* A lift alone is not a focus indicator -- same reasoning as .home-card-link. The anchor itself is
   what takes focus, so the ring is drawn on the card it now covers. */
body:not(:has(.admin-web-content)) .gs-body .as-prod:has(.as-more a:focus-visible) {
  outline: 3px solid #FF8C00;
  outline-offset: 3px;
}
@media (max-width: 640px) {
  body:not(:has(.admin-web-content)) .as-hero-inner {
    max-width: 80cqw;
  }
  body:not(:has(.admin-web-content)) .platform-body .as-hero-inner .as-sub {
    max-width: 70cqw;
  }
  body:not(:has(.admin-web-content)) .gs-body .as-prod img {
    float: none;
    width: 100%;
    margin: 10px 0;
  }
}
/* Hover pop-out. .as-prod has to stay overflow:visible or the scaled image is clipped by its own
   block, and the lift needs a stacking context to sit above the text it overlaps. */
body:not(:has(.admin-web-content)) .gs-body .as-prod {
  overflow: visible;
}
body:not(:has(.admin-web-content)) .gs-body .as-prod:hover img {
  transform: scale(1.08);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.admin-web-content)) .gs-body .as-prod img {
    transition: none;
  }
  body:not(:has(.admin-web-content)) .gs-body .as-prod:hover img {
    transform: none;
  }
}
/* ---- test-and-evaluation ----
   Reuses the autonomous-solutions hero and figure styling; only the hero art and the second panel
   differ. The reference stacks four square-cornered panels into one continuous band plus a separate
   Why SimIS panel -- rendered here as one panel plus one, which is the same thing visually. */
body:not(:has(.admin-web-content)) .te-page .as-hero {
  background-image: url('/assets/img/20260824200915-284/Test%20and%20Evaluation%20of%20Autonomous%20Maritime%20Systems.webp');
}
body:not(:has(.admin-web-content)) .gs-body.te-why-panel {
  margin-top: 24px;
}
body:not(:has(.admin-web-content)) .gs-body a#te-fig-lifecycle {
  background-image: url('/assets/img/20260824203647-293/Testing%20Across%20the%20Program%20Lifecycle.webp');
}
body:not(:has(.admin-web-content)) .gs-body a#te-fig-jte {
  background-image: url('/assets/img/20260824200912-280/How%20Joint%20Test%20and%20Evaluation%20Works.webp');
}
body:not(:has(.admin-web-content)) .gs-body a#te-fig-sim {
  background-image: url('/assets/img/20260824203649-299/More%20Evaluation%20Out%20of%20Every%20Test%20Dollar.webp');
}
body:not(:has(.admin-web-content)) .gs-body a#te-fig-hampton {
  background-image: url('/assets/img/20260824203648-297/SimIS%20Within%20Hampton%20Roads.webp');
}
/* ---- per-figure aspect ratios ----
   These images ship at several different ratios, so a single blanket value letterboxed most of
   them. But dropping it entirely is worse: with height:auto and a lazy image that has not loaded,
   there is no intrinsic ratio yet and the box collapses to the 300x150 CSS default object size.
   So each figure states its own true ratio, keyed off the zoom link that targets it. */
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom[href$="#te-fig-lifecycle"] img {
  aspect-ratio: 1854 / 848;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom[href$="#te-fig-jte"] img {
  aspect-ratio: 1600 / 1066;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom[href$="#te-fig-sim"] img {
  aspect-ratio: 800 / 366;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom[href$="#te-fig-hampton"] img {
  aspect-ratio: 1600 / 1200;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom[href$="#ms-fig-lvc"] img {
  aspect-ratio: 1536 / 1024;
}
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom[href$="#ms-fig-trace"] img {
  aspect-ratio: 1535 / 1024;
}
/* Figure captions are centred, which the reference does for every paragraph that directly follows
   a figure -- so it is a sibling rule rather than a class on each one. ms-center/ms-cta cover the
   closing lines and the button, which are centred without being captions. */
body:not(:has(.admin-web-content)) .gs-body p.ms-cap {
  text-align: center;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .ms-center {
  text-align: center;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .ms-cta {
  text-align: center;
  margin: 26px 0 0;
}

/* ===== AI/ML & Data Analytics page ===== */
body:not(:has(.admin-web-content)) .gs-body a#ai-fig-sensor { background-image: url("/assets/img/20260824200916-286/From%20Sensor%20Data%20to%20Mission-Critical%20Decisions.webp"); }
body:not(:has(.admin-web-content)) .gs-body a#ai-fig-htt { background-image: url("/assets/img/20260824203645-289/How%20HTT%20Turns%20Engagement%20Into%20Action.webp"); }
body:not(:has(.admin-web-content)) .gs-body a#ai-fig-assured { background-image: url("/assets/img/20260824203647-295/AI%20Assurance%E2%80%94Trust%20Built%20In.webp"); }
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom[href$="#ai-fig-sensor"] img { aspect-ratio: 1855 / 848; }
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom[href$="#ai-fig-htt"] img { aspect-ratio: 2400 / 1332; }
body:not(:has(.admin-web-content)) .gs-body a.ms-zoom[href$="#ai-fig-assured"] img { aspect-ratio: 2400 / 1098; }

/* ===== service-page h3: centered with accent, matching h2 ===== */
body:not(:has(.admin-web-content)) .platform-body .gs-body h3 { text-align: center; }
body:not(:has(.admin-web-content)) .platform-body .gs-body h3::after { content: ""; display: block; height: 3px; width: 90px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ff8c00 50%, transparent); margin: 10px auto 0; }
body:not(:has(.admin-web-content)) .platform-body .gs-body .gs-eyebrow { text-align: center; }
/* ===== service-page inline body links: bold, unified orange ===== */
body:not(:has(.admin-web-content)) .platform-body .gs-body p a:not(.gs-hero-cta):not(.gs-cta-btn):not(.ms-zoom):not(.ms-lightbox),
body:not(:has(.admin-web-content)) .platform-body .gs-body li a:not(.gs-hero-cta):not(.gs-cta-btn),
body:not(:has(.admin-web-content)) .platform-body .gs-body td a:not(.gs-hero-cta):not(.gs-cta-btn) { font-weight: 700; color: #ff8c00; }
body:not(:has(.admin-web-content)) .platform-body .gs-body p a:not(.gs-hero-cta):not(.gs-cta-btn):not(.ms-zoom):not(.ms-lightbox):hover,
body:not(:has(.admin-web-content)) .platform-body .gs-body li a:not(.gs-hero-cta):not(.gs-cta-btn):hover,
body:not(:has(.admin-web-content)) .platform-body .gs-body td a:not(.gs-hero-cta):not(.gs-cta-btn):hover,
body:not(:has(.admin-web-content)) .platform-body .gs-body p a:not(.gs-hero-cta):not(.gs-cta-btn):not(.ms-zoom):not(.ms-lightbox):focus,
body:not(:has(.admin-web-content)) .platform-body .gs-body li a:not(.gs-hero-cta):not(.gs-cta-btn):focus,
body:not(:has(.admin-web-content)) .platform-body .gs-body td a:not(.gs-hero-cta):not(.gs-cta-btn):focus { color: #ffa733; text-decoration: underline; }

/* ===== Cybersecurity page: service bands, cards, pop-out modals ===== */
body:not(:has(.admin-web-content)) .platform-body .cy-page .gs-hero > img { object-position: center right; }
body:not(:has(.admin-web-content)) .platform-body .gs-body p.svc-band { margin: -44px -40px 26px -40px; padding: 16px 40px; background: rgba(255,140,0,0.08); border-bottom: 2px solid #ff8c00; border-radius: 18px 18px 0 0; color: #ff8c00; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; }
body:not(:has(.admin-web-content)) .platform-body .gs-body .svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 22px; }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.svc-card { display: block; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 20px 18px; cursor: pointer; text-decoration: none; font-weight: 400; transition: transform .15s ease, background .15s ease; }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.svc-card:hover, body:not(:has(.admin-web-content)) .platform-body .gs-body a.svc-card:focus { transform: translateY(-3px); background: rgba(255,255,255,0.09); text-decoration: none; }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.svc-card h3.svc-card-title { font-size: 18px; font-weight: 700; color: #f2f5fb; letter-spacing: normal; margin: 0 0 8px; text-align: left; }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.svc-card h3.svc-card-title::after { content: none; display: none; }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.svc-card p.svc-card-sum { font-size: 15px; line-height: 1.55; color: #dbe3ec; margin: 0; text-align: left; }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.svc-card span.svc-card-more { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: #ff8c00; text-transform: uppercase; }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.svc-card span.svc-card-start { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0b1020; background: #ff8c00; border-radius: 4px; padding: 3px 8px; margin-bottom: 10px; }
body:not(:has(.admin-web-content)) .platform-body a.svc-modal-bg { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,6,22,0.87); cursor: zoom-out; align-items: flex-start; justify-content: flex-end; padding: 18px 26px; text-decoration: none; }
body:not(:has(.admin-web-content)) .platform-body a.svc-modal-bg:target { display: flex; }
body:not(:has(.admin-web-content)) .platform-body a.svc-modal-bg span.svc-close { color: #dbe3ec; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body:not(:has(.admin-web-content)) .platform-body .svc-modal-card { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9001; max-width: 860px; width: calc(100% - 40px); max-height: 84vh; overflow-y: auto; background: #10162b; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 40px 44px; }
body:not(:has(.admin-web-content)) .platform-body a.svc-modal-bg:target + .svc-modal-card { display: block; }
body:not(:has(.admin-web-content)) .platform-body .svc-modal-card h2.svc-modal-title { font-size: 28px; font-weight: 800; color: #f2f5fb; letter-spacing: -0.3px; margin: 0 0 14px; text-align: left; }
body:not(:has(.admin-web-content)) .platform-body .svc-modal-card p { color: #dbe3ec; font-size: 17px; line-height: 1.55; margin: 0 0 14px; }
body:not(:has(.admin-web-content)) .platform-body .svc-modal-card p.svc-modal-lede { font-weight: 600; color: #f2f5fb; }
body:not(:has(.admin-web-content)) .platform-body .svc-modal-card ul { margin: 0 0 14px 1.2em; }
body:not(:has(.admin-web-content)) .platform-body .svc-modal-card li { color: #dbe3ec; font-size: 17px; line-height: 1.55; margin-bottom: 8px; }

body:not(:has(.admin-web-content)) .platform-body .gs-body a#cy-fig-steps { background-image: url("/assets/img/20260824200909-277/Three%20Steps%20to%20a%20Security%20Program%20That%20Lasts.webp"); }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.ms-zoom[href$="#cy-fig-steps"] img { aspect-ratio: 3694 / 1702; }

/* ===== stacked content panels: separate them, centre the CTA lead-in ===== */
body:not(:has(.admin-web-content)) .platform-body .gs-body + .gs-body { margin-top: 32px; }
body:not(:has(.admin-web-content)) .platform-body .gs-body p:has(+ p.ms-cta) { text-align: center; }

/* ===== FCI & CUI Compliance page ===== */
body:not(:has(.admin-web-content)) .platform-body .cm-page .gs-hero > img { object-position: center right; }
body:not(:has(.admin-web-content)) .platform-body .gs-body a#cm-fig-steps { background-image: url("/assets/img/20260824200910-278/Four%20Steps%20to%20Compliance.webp"); }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.ms-zoom[href$="#cm-fig-steps"] img { aspect-ratio: 3754 / 1676; }
body:not(:has(.admin-web-content)) .platform-body .gs-body p.cm-asof { margin: -4px 0 18px; font-size: 14px; color: #9fb0c9; }

/* modal body links: match the unified inline-link treatment */
body:not(:has(.admin-web-content)) .platform-body .svc-modal-card p a, body:not(:has(.admin-web-content)) .platform-body .svc-modal-card li a { font-weight: 700; color: #ff8c00; }
body:not(:has(.admin-web-content)) .platform-body .svc-modal-card p a:hover, body:not(:has(.admin-web-content)) .platform-body .svc-modal-card p a:focus, body:not(:has(.admin-web-content)) .platform-body .svc-modal-card li a:hover, body:not(:has(.admin-web-content)) .platform-body .svc-modal-card li a:focus { color: #ffa733; text-decoration: underline; }

/* ===== Software Development (SimIS CMS) page ===== */
body:not(:has(.admin-web-content)) .platform-body .sd-page .gs-hero { aspect-ratio: 2243 / 701; height: auto; min-height: 0; background-color: #000614; }
body:not(:has(.admin-web-content)) .platform-body .gs-hero-title span.sd-line { display: block; }
body:not(:has(.admin-web-content)) .platform-body .gs-body .ms-figure.sd-shot { max-width: 680px; margin-left: auto; margin-right: auto; }
body:not(:has(.admin-web-content)) .platform-body .gs-body a.ms-zoom[href$="#sd-fig-shot"] img { aspect-ratio: 1330 / 1182; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
body:not(:has(.admin-web-content)) .platform-body .gs-body a#sd-fig-shot { background-image: url("/assets/img/20260824203647-294/SimIS%20CMS%20Website%20and%20Analytics%20Platform.webp"); }
body:not(:has(.admin-web-content)) .platform-body .gs-body p.sd-shot-caption { font-size: 14px; color: #aeb6c6; margin: 12px 0 4px; }
body:not(:has(.admin-web-content)) .platform-body .gs-body .sd-modules table td:first-child, body:not(:has(.admin-web-content)) .platform-body .gs-body .sd-modules table th:first-child { width: 12%; text-align: center; }
body:not(:has(.admin-web-content)) .platform-body .gs-body ul.sd-sec-list { columns: 2; column-gap: 44px; list-style: none; margin: 18px 0 22px; padding: 0; }
body:not(:has(.admin-web-content)) .platform-body .gs-body ul.sd-sec-list li { position: relative; padding: 7px 0 7px 26px; break-inside: avoid; color: #f2f5fb; }
body:not(:has(.admin-web-content)) .platform-body .gs-body ul.sd-sec-list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(135deg, #f5a623, #e0562a); }
body:not(:has(.admin-web-content)) .platform-body .sd-card-row { display: flex; flex-direction: row; align-items: stretch; gap: 24px; margin-top: 32px; }
body:not(:has(.admin-web-content)) .platform-body .sd-card { flex: 1 1 0; display: flex; flex-direction: column; background: rgba(18,23,40,0.58); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 30px 24px; text-align: center; color: #f2f5fb; }
body:not(:has(.admin-web-content)) .platform-body .sd-card h2.sd-card-title { font-size: 24px; font-weight: 800; color: #ffffff; text-align: center; margin: 0 0 26px; letter-spacing: normal; }
body:not(:has(.admin-web-content)) .platform-body .sd-card span.sd-card-br { display: block; }
body:not(:has(.admin-web-content)) .platform-body .sd-card p.sd-card-link { margin: 50px 0 0; font-size: 16px; text-align: center; }
body:not(:has(.admin-web-content)) .platform-body .sd-card p.sd-card-link a { color: #ff8c00; font-weight: 700; text-decoration: none; }
body:not(:has(.admin-web-content)) .platform-body .sd-card p.sd-card-link a:hover, body:not(:has(.admin-web-content)) .platform-body .sd-card p.sd-card-link a:focus { color: #ffa733; text-decoration: underline; }

@media screen and (max-width: 39.9375em) {
body:not(:has(.admin-web-content)) .platform-body .sd-card-row { flex-direction: column; }
}

/* SimIS CMS hero: wider copy column, one sentence per line (container-scaled) */
body:not(:has(.admin-web-content)) .platform-body .sd-page .gs-hero { container-type: inline-size; }
body:not(:has(.admin-web-content)) .platform-body .sd-page .gs-hero-copy { max-width: 860px; padding: 1.75rem 2rem 2rem 4rem; }
body:not(:has(.admin-web-content)) .platform-body .sd-page .gs-hero-copy .gs-hero-title { font-size: clamp(1.05rem, 2.2cqw, 2.5rem); line-height: 1.2; font-weight: 800; }
body:not(:has(.admin-web-content)) .platform-body .sd-page .gs-hero-copy .gs-hero-title span.sd-line { display: block; white-space: nowrap; }
body:not(:has(.admin-web-content)) .platform-body .sd-page .gs-hero-copy .gs-hero-sub { font-size: clamp(15px, 0.92cqw, 20px); max-width: 26cqw; }

body:not(:has(.admin-web-content)) .platform-body .sd-page .gs-hero-copy { justify-content: flex-start; }

/* ===== 3D Printing & Rapid Prototyping page ===== */
body:not(:has(.admin-web-content)) .platform-body .tdp-page .gs-hero { aspect-ratio: 2172 / 724; height: auto; min-height: 0; }
body:not(:has(.admin-web-content)) .platform-body .tdp-page .gs-hero > img { object-position: center right; }
body:not(:has(.admin-web-content)) .platform-body .tdp-page p.tdp-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-page span.tdp-chip { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 1px solid #ff8c00; padding: 7px 13px; border-radius: 20px; color: #ffab40; background: rgba(20,29,58,0.55); }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-block { padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,0.09); }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-block:first-child { padding-top: 8px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-block:last-child { border-bottom: none; padding-bottom: 0; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body p.tdp-eyebrow { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff8c00; margin: 0 0 6px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body h2 { font-size: 27px; font-weight: 800; color: #f2f5fb; line-height: 1.15; margin: 0; text-align: left; letter-spacing: normal; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body h2::after { content: none; display: none; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body p.tdp-lead { font-size: 17px; line-height: 1.65; color: #c3ccdf; margin: 12px 0 0; max-width: 70ch; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-bench { margin: 22px 0 0; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-bench img { width: 100%; height: auto; aspect-ratio: 1600 / 1136; border-radius: 12px; display: block; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body p.tdp-figcap { font-size: 13px; color: #b7c0d4; margin-top: 8px; text-align: center; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-step { background: #141d3a; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 22px 20px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body span.tdp-num { font-size: 12.5px; font-weight: 800; color: #ff8c00; margin-bottom: 12px; display: block; text-align: center; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-step h3 { font-size: 16px; font-weight: 700; color: #f2f5fb; line-height: 1.15; margin: 0 0 8px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-step p { font-size: 16px; line-height: 1.5; margin: 0; color: #c3ccdf; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-midcta { margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-midcta p { max-width: 640px; margin: 0 auto 18px; color: #dbe3ec; font-size: 18px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body p.tdp-ctawrap { margin: 0 auto; max-width: none; text-align: center; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-card { background: #141d3a; border: 1px solid rgba(255,255,255,0.09); border-top: 3px solid #ff8c00; border-radius: 10px; padding: 24px 20px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-card i { font-size: 26px; color: #ff8c00; display: block; margin-bottom: 14px; text-align: center; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-card h3 { font-size: 16px; font-weight: 700; color: #f2f5fb; line-height: 1.15; margin: 0 0 8px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-card p { font-size: 14.5px; line-height: 1.5; margin: 0; color: #c3ccdf; }

/* 3DP: fit grid, materials, why + trust */
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-fitcol { border-radius: 12px; padding: 20px 22px; border: 1px solid rgba(255,255,255,0.1); }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-fityes { background: rgba(74,222,128,0.05); border-color: rgba(74,222,128,0.25); }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-fitno { background: rgba(255,140,0,0.05); border-color: rgba(255,140,0,0.3); }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-fitcol h3 { font-size: 16px; font-weight: 800; margin: 0 0 12px; color: #ffffff; text-transform: uppercase; letter-spacing: 0.04em; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-fitcol ul { margin: 0; padding-left: 18px; list-style: disc; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-fitcol li { font-size: 15.5px; line-height: 1.55; color: #dbe3ec; padding: 3px 0; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body p.tdp-fitnote { margin: 18px 0 0; font-size: 15px; color: #aeb6c6; text-align: center; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-mats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 0; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-mat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 18px 18px 14px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-mat h3 { margin: 0 0 6px; font-size: 18px; color: #ffffff; font-weight: 700; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-mat p { font-size: 16px; line-height: 1.5; color: #c7d0dc; margin: 0 0 10px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body p.tdp-tags { margin: 0; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body span.tdp-tag { display: inline-block; font-size: 12px; font-weight: 700; color: #ff8c00; border: 1px solid rgba(255,140,0,0.35); border-radius: 999px; padding: 3px 10px; margin: 0 6px 4px 0; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-whyitem { position: relative; background: #141d3a; border: 1px solid rgba(255,255,255,0.09); border-left: 3px solid #ff8c00; border-radius: 10px; padding: 26px 28px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-whyitem h3 { font-size: 15.5px; font-weight: 700; color: #f2f5fb; line-height: 1.15; margin: 0 0 6px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-whyitem p { font-size: 14.5px; line-height: 1.5; margin: 0; color: #c3ccdf; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.09); }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-trustitem strong { display: block; color: #f2f5fb; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-trustitem p { margin: 0; font-size: 15px; line-height: 1.5; color: #b7c0d4; }
@media screen and (max-width: 56.25em) {
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-mats { grid-template-columns: repeat(2, 1fr); }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-trust { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 47.5em) {
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-fit { grid-template-columns: 1fr; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-steps, body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-cards, body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-why { grid-template-columns: 1fr; }
}
@media screen and (max-width: 37.5em) {
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-mats { grid-template-columns: 1fr; }
body:not(:has(.admin-web-content)) .platform-body .tdp-body .tdp-trust { grid-template-columns: 1fr; }
}

/* homepage: screen-reader-only h1 wrapper must not occupy layout space */
body:not(:has(.admin-web-content)) .platform-body .home-sr-h1 { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }

/* ===== Contract vehicle pages: spec sheet rows ===== */
body:not(:has(.admin-web-content)) .platform-body .gs-body .cv-specs { background: rgba(18,23,40,0.58); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 2px 18px; margin: 24px 0; }
body:not(:has(.admin-web-content)) .platform-body .gs-body .cv-row { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
body:not(:has(.admin-web-content)) .platform-body .gs-body .cv-row:last-child { border-bottom: 0; }
body:not(:has(.admin-web-content)) .platform-body .gs-body span.cv-k { flex: 0 0 138px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ff8c00; padding-top: 3px; }
body:not(:has(.admin-web-content)) .platform-body .gs-body span.cv-v { color: #f2f5fb; font-size: 16px; font-weight: 500; line-height: 1.5; }
body:not(:has(.admin-web-content)) .platform-body .gs-body span.cv-v a { color: #ff8c00; font-weight: 700; text-decoration: none; }
body:not(:has(.admin-web-content)) .platform-body .gs-body span.cv-v a:hover, body:not(:has(.admin-web-content)) .platform-body .gs-body span.cv-v a:focus { color: #ffa733; text-decoration: underline; }
body:not(:has(.admin-web-content)) .platform-body .gs-body .cv-table { margin: 24px 0; }
@media screen and (max-width: 39.9375em) {
body:not(:has(.admin-web-content)) .platform-body .gs-body .cv-row { flex-direction: column; gap: 4px; }
body:not(:has(.admin-web-content)) .platform-body .gs-body span.cv-k { flex: none; }
}

/* NAICS table: category rows are the ones the sanitizer left carrying colspan (class is stripped from tr) */
body:not(:has(.admin-web-content)) .platform-body .gs-body .cv-table table td[colspan] { background: rgba(255,140,0,0.08); color: #ff8c00; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
body:not(:has(.admin-web-content)) .platform-body .gs-body .cv-table table td:first-child:not([colspan]) { white-space: nowrap; font-weight: 700; color: #f2f5fb; width: 1%; }

/* Vehicles table: the header hint that the vehicle names are links */
body:not(:has(.admin-web-content)) .platform-body .gs-body table th span.gs-th-hint { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #aeb6c6; }

/* Autonomous Solutions product pages (HTT, ADRT, RiverScout, SAMS) */
#simis-rhtt-section .htt-cta-btn { display: inline-block; background: rgb(245, 144, 30); font-weight: 700; font-size: 16px; padding: 0.7em 1.7em; border-radius: 4px; text-decoration: none; color: rgb(255, 255, 255) !important; }

#simis-rhtt-section .htt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0px 0px 8px; }

#simis-rhtt-section .htt-card { display: flex; align-items: flex-start; gap: 14px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 140, 0, 0.18); border-radius: 10px; padding: 16px 18px; font-size: 16.5px; line-height: 1.5; transition: background 0.15s, border-color 0.15s; color: rgb(219, 227, 236) !important; }

#simis-rhtt-section .htt-card { transform-origin: center center; transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }

#simis-rhtt-section .htt-card:hover { background: rgba(255, 140, 0, 0.09); border-color: rgba(255, 140, 0, 0.55); transform: scale(1.04); box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 20px; position: relative; z-index: 2; }

#simis-rhtt-section .htt-card::before { content: ""; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8C00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center center; background-color: rgba(255, 140, 0, 0.14); border-radius: 50%; }

#simis-rhtt-section .htt-lede { text-align: center; max-width: 68ch; margin: 0px auto 28px; color: rgb(219, 227, 236); }

#simis-rhtt-section .htt-hero { width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; border-radius: 0px !important; min-height: 30vw !important; padding: 6vw 8% 5vw !important; box-sizing: border-box !important; }

#simis-rhtt-section .htt-reach { max-width: 760px; margin: 0px auto; padding: 40px 20px 55px; text-align: center; }

#simis-about-us-section .adrt-reach { max-width: 760px; margin: 0px auto; padding: 40px 20px 55px; text-align: center; }

#simis-about-us-section .adrt-cta-btn { display: inline-block; background: rgb(245, 144, 30); font-weight: 700; font-size: 16px; padding: 0.7em 1.7em; border-radius: 4px; text-decoration: none; color: rgb(255, 255, 255) !important; }

#simis-about-us-section .adrt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0px 0px 8px; }

#simis-about-us-section .adrt-card { display: flex; align-items: flex-start; gap: 14px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 140, 0, 0.18); border-radius: 10px; padding: 16px 18px; font-size: 16.5px; line-height: 1.5; transform-origin: center center; transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; color: rgb(219, 227, 236) !important; }

#simis-about-us-section .adrt-card:hover { background: rgba(255, 140, 0, 0.09); border-color: rgba(255, 140, 0, 0.55); transform: scale(1.04); box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 20px; position: relative; z-index: 2; }

#simis-about-us-section .adrt-card::before { content: ""; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8C00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center center; background-color: rgba(255, 140, 0, 0.14); border-radius: 50%; }

#simis-about-us-section .adrt-lede { text-align: center; max-width: 68ch; margin: 0px auto 28px; color: rgb(219, 227, 236); }

#simis-about-us-section .adrt-hero { width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; border-radius: 0px !important; min-height: 30vw !important; padding: 6vw 8% 5vw !important; box-sizing: border-box !important; }

#simis-about-us-section .adrt-hero { margin-bottom: 55px !important; }

#simis-rhtt-section .htt-hero { margin-bottom: 55px !important; }

#simis-riverscout-section .rs-reach { max-width: 760px; margin: 0px auto; padding: 40px 20px 55px; text-align: center; }

#simis-riverscout-section .rs-cta-btn { display: inline-block; background: rgb(245, 144, 30); font-weight: 700; font-size: 16px; padding: 0.7em 1.7em; border-radius: 4px; text-decoration: none; color: rgb(255, 255, 255) !important; }

#simis-riverscout-section .rs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0px 0px 8px; }

#simis-riverscout-section .rs-card { display: flex; align-items: flex-start; gap: 14px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 140, 0, 0.18); border-radius: 10px; padding: 16px 18px; font-size: 16.5px; line-height: 1.5; transform-origin: center center; transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; color: rgb(219, 227, 236) !important; }

#simis-riverscout-section .rs-card:hover { background: rgba(255, 140, 0, 0.09); border-color: rgba(255, 140, 0, 0.55); transform: scale(1.04); box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 20px; position: relative; z-index: 2; }

#simis-riverscout-section .rs-card::before { content: ""; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8C00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center center; background-color: rgba(255, 140, 0, 0.14); border-radius: 50%; }

#simis-riverscout-section .rs-lede { text-align: center; max-width: 68ch; margin: 0px auto 28px; color: rgb(219, 227, 236); }

#simis-riverscout-section .rs-hero { width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; border-radius: 0px !important; min-height: 30vw !important; padding: 6vw 8% 5vw !important; margin-bottom: 55px !important; box-sizing: border-box !important; }

#simis-sams-simis-autonomous-maritime-system-section .sams-reach { max-width: 760px; margin: 0px auto; padding: 40px 20px 55px; text-align: center; }

#simis-sams-simis-autonomous-maritime-system-section .sams-cta-btn { display: inline-block; background: rgb(245, 144, 30); font-weight: 700; font-size: 16px; padding: 0.7em 1.7em; border-radius: 4px; text-decoration: none; color: rgb(255, 255, 255) !important; }

#simis-sams-simis-autonomous-maritime-system-section .sams-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0px 0px 8px; }

#simis-sams-simis-autonomous-maritime-system-section .sams-card { display: flex; align-items: flex-start; gap: 14px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 140, 0, 0.18); border-radius: 10px; padding: 16px 18px; font-size: 16.5px; line-height: 1.5; transform-origin: center center; transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; color: rgb(219, 227, 236) !important; }

#simis-sams-simis-autonomous-maritime-system-section .sams-card:hover { background: rgba(255, 140, 0, 0.09); border-color: rgba(255, 140, 0, 0.55); transform: scale(1.04); box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 20px; position: relative; z-index: 2; }

#simis-sams-simis-autonomous-maritime-system-section .sams-card::before { content: ""; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8C00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center center; background-color: rgba(255, 140, 0, 0.14); border-radius: 50%; }

#simis-sams-simis-autonomous-maritime-system-section .sams-lede { text-align: center; max-width: 68ch; margin: 0px auto 28px; color: rgb(219, 227, 236); }

#simis-sams-simis-autonomous-maritime-system-section .sams-hero { width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; border-radius: 0px !important; min-height: 30vw !important; padding: 6vw 8% 5vw !important; margin-bottom: 55px !important; box-sizing: border-box !important; }

/* Hero art: live carries these as inline styles, which this build sanitizes away */
.htt-hero { background-image: url("/assets/img/20260824203646-291/Coordinated%20Human%20Type%20Target%20Systems.webp"); background-position: right center; background-size: cover; background-repeat: no-repeat; }
.htt-hero h1 { color: #ffffff; }
.htt-hero .htt-hero-sub { color: #e8ecf5; }
.adrt-hero { background-image: url("/assets/img/20260824203648-296/Interactive%20Public-Safety%20Training%20Mannequin.webp"); background-position: right center; background-size: cover; background-repeat: no-repeat; }
.adrt-hero h1 { color: #ffffff; }
.adrt-hero .adrt-hero-sub { color: #e8ecf5; }
.rs-hero { background-image: url("/assets/img/20260824200916-285/RiverScout%20Autonomous%20Maritime%20Reconnaissance.webp"); background-position: right center; background-size: cover; background-repeat: no-repeat; }
.rs-hero h1 { color: #ffffff; }
.rs-hero .rs-hero-sub { color: #e8ecf5; }
.sams-hero { background-image: url("/assets/img/20260824203646-292/SAMS%20Maritime%20Modeling%20and%20Simulation.webp"); background-position: right center; background-size: cover; background-repeat: no-repeat; }
.sams-hero h1 { color: #ffffff; }
.sams-hero .sams-hero-sub { color: #e8ecf5; }
.htt-hero .htt-hero-kicker { color: #e23122; font-size: clamp(0.75rem, 0.55rem + 0.39vw, 1.125rem); }
.adrt-hero .adrt-hero-kicker { color: #e23122; font-size: clamp(0.75rem, 0.55rem + 0.39vw, 1.125rem); }
.rs-hero .rs-hero-kicker { color: #e23122; font-size: clamp(0.75rem, 0.55rem + 0.39vw, 1.125rem); }
.sams-hero .sams-hero-kicker { color: #e23122; font-size: clamp(0.75rem, 0.55rem + 0.39vw, 1.125rem); }

/* Autonomous Solutions: dark TOC sidebar + page wallpaper. Live carries these via a
   page-inline <style> block and (for the TOC) generic non-scoped rules; this build's
   sanitizer strips inline <style> from page content, so both have to live here instead. */
.platform-toc-container li a { color: #005f98; }
.platform-toc-container .menu .is-active > a { border-left: 4px solid #e37b3d; background-color: #c1281b; }

body:has(#simis-rhtt-section) { background: url("/assets/img/20260823155036-253/GrayBG.webp") center center / cover fixed no-repeat !important; }
#simis-rhtt-section .platform-toc-container ul.vertical.menu {
  background: #121828 !important;
  border-radius: 10px !important;
  padding: 8px 0 !important;
}
#simis-rhtt-section .platform-toc-container ul.vertical.menu > li:first-child > a {
  color: #e23122 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.75px !important;
  padding: 6px 14px 10px !important;
  border-left: 3px solid transparent !important;
}
#simis-rhtt-section .platform-toc-container ul.vertical.menu li:not(:first-child) a {
  transition: background .15s, color .15s, border-left-color .15s;
  color: #c3ccdf !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 9px 14px !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: 3px solid transparent !important;
}
#simis-rhtt-section .platform-toc-container ul.vertical.menu li {
  background: transparent !important;
  border: none !important;
}
#simis-rhtt-section .platform-toc-container ul.vertical.menu li.is-active a {
  background: rgba(0,0,0,0) !important;
  color: #c3ccdf !important;
  font-weight: 600 !important;
}

body:has(#simis-about-us-section) { background: url("/assets/img/20260823155036-253/GrayBG.webp") center center / cover fixed no-repeat !important; }
#simis-about-us-section .platform-toc-container ul.vertical.menu {
  background: #121828 !important;
  border-radius: 10px !important;
  padding: 8px 0 !important;
}
#simis-about-us-section .platform-toc-container ul.vertical.menu > li:first-child > a {
  color: #e23122 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.75px !important;
  padding: 6px 14px 10px !important;
  border-left: 3px solid transparent !important;
}
#simis-about-us-section .platform-toc-container ul.vertical.menu li:not(:first-child) a {
  transition: background .15s, color .15s, border-left-color .15s;
  color: #c3ccdf !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 9px 14px !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: 3px solid transparent !important;
}
#simis-about-us-section .platform-toc-container ul.vertical.menu li {
  background: transparent !important;
  border: none !important;
}
#simis-about-us-section .platform-toc-container ul.vertical.menu li.is-active a {
  background: rgba(0,0,0,0) !important;
  color: #c3ccdf !important;
  font-weight: 600 !important;
}

body:has(#simis-riverscout-section) { background: url("/assets/img/20260823155036-253/GrayBG.webp") center center / cover fixed no-repeat !important; }
#simis-riverscout-section .platform-toc-container ul.vertical.menu {
  background: #121828 !important;
  border-radius: 10px !important;
  padding: 8px 0 !important;
}
#simis-riverscout-section .platform-toc-container ul.vertical.menu > li:first-child > a {
  color: #e23122 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.75px !important;
  padding: 6px 14px 10px !important;
  border-left: 3px solid transparent !important;
}
#simis-riverscout-section .platform-toc-container ul.vertical.menu li:not(:first-child) a {
  transition: background .15s, color .15s, border-left-color .15s;
  color: #c3ccdf !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 9px 14px !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: 3px solid transparent !important;
}
#simis-riverscout-section .platform-toc-container ul.vertical.menu li {
  background: transparent !important;
  border: none !important;
}
#simis-riverscout-section .platform-toc-container ul.vertical.menu li.is-active a {
  background: rgba(0,0,0,0) !important;
  color: #c3ccdf !important;
  font-weight: 600 !important;
}

body:has(#simis-sams-simis-autonomous-maritime-system-section) { background: url("/assets/img/20260823155036-253/GrayBG.webp") center center / cover fixed no-repeat !important; }
#simis-sams-simis-autonomous-maritime-system-section .platform-toc-container ul.vertical.menu {
  background: #121828 !important;
  border-radius: 10px !important;
  padding: 8px 0 !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-toc-container ul.vertical.menu > li:first-child > a {
  color: #e23122 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.75px !important;
  padding: 6px 14px 10px !important;
  border-left: 3px solid transparent !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-toc-container ul.vertical.menu li:not(:first-child) a {
  transition: background .15s, color .15s, border-left-color .15s;
  color: #c3ccdf !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 9px 14px !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: 3px solid transparent !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-toc-container ul.vertical.menu li {
  background: transparent !important;
  border: none !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-toc-container ul.vertical.menu li.is-active a {
  background: rgba(0,0,0,0) !important;
  color: #c3ccdf !important;
  font-weight: 600 !important;
}

/* Autonomous Solutions: full parity sweep vs live -- margin-50 hero gap fix, TOC hover,
   card/lightbox/heading rules that a narrower earlier extraction (class-prefix only) missed.
   Four rules referencing /web-content/images/simis/*.jpg backdrops were dropped: that static
   path 404s on this build (same known gap as favicon/logo fallback), and the rule is a no-op
   either way since it just leaves the section background transparent, which is what already
   happens without it. */
#simis-rhtt-section .platform-content-container:not(:has(.htt-hero)):not(:has(.platform-toc-container)):not(:has(.htt-reach)) {
  border-radius: 18px;
  background: rgba(18, 23, 40, 0.58) !important;
}
#simis-rhtt-section .platform-content-container:has(.htt-reach) {
  background: transparent !important;
  border-width: medium !important;
  border-style: none !important;
  border-color: currentcolor !important;
  border-image: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  padding: 0px !important;
}
#simis-rhtt-section .platform-content p:not(.htt-hero-sub):not(.htt-hero-kicker):not(.htt-hero-title), #simis-rhtt-section .platform-content li {
  color: rgb(219, 227, 236) !important;
}
#simis-rhtt-section .platform-content h2 {
  text-align: center;
  font-weight: 800;
  font-size: 32px;
  padding-bottom: 15px;
  margin-bottom: 32px;
  position: relative;
  color: rgb(242, 245, 251) !important;
}
#simis-rhtt-section .platform-content-container:not(:has(.htt-hero)):not(:has(.htt-reach)) {
  padding: 35px 38px !important;
}
#simis-rhtt-section .platform-content h2::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(255, 140, 0) 50%, rgba(0, 0, 0, 0));
}
#simis-rhtt-section .platform-content h3 {
  text-align: center;
  font-weight: 800;
  font-size: 24px;
  margin: 0px 0px 12px;
  color: rgb(242, 245, 251) !important;
}
#simis-rhtt-section .platform-content p a:not(.button):not(.htt-cta-btn), #simis-rhtt-section .platform-content li a:not(.button):not(.htt-cta-btn) {
  color: rgb(255, 140, 0) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#simis-rhtt-section .platform-toc-container ul.vertical.menu li:not(:first-child) a:hover  {
  background: rgba(239, 159, 39, 0.1) !important;
  color: rgb(239, 159, 39) !important;
  border-left-color: rgb(239, 159, 39) !important;
  text-decoration: none !important;
}
#simis-rhtt-section .platform-content-container:has(.htt-hero) {
  border-radius: 0px !important;
  background: transparent !important;
  padding: 0px !important;
  overflow: visible !important;
}
#simis-rhtt-section label.cv-zoom::after {
  content: "🔍 Click to enlarge";
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgb(154, 165, 181);
}
#simis-rhtt-section input.cv-lb-cb {
  clip-path: inset(50%);
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
}
#simis-rhtt-section .cv-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0px;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
#simis-rhtt-section input.cv-lb-cb:checked + .cv-lightbox-overlay {
  display: flex;
}
#simis-rhtt-section .cv-lightbox-bg {
  position: absolute;
  inset: 0px;
  background: rgba(0, 6, 22, 0.87);
  cursor: zoom-out;
}
#simis-rhtt-section .cv-lightbox-img {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 10px;
  pointer-events: none;
}
#simis-rhtt-section .cv-lightbox-close {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 9001;
  font-size: 32px;
  line-height: 1;
  color: rgb(219, 227, 236);
  cursor: zoom-out;
  font-weight: 700;
}
#simis-rhtt-section .margin-50:has(.htt-hero) {
  margin-top: 0px !important;
}
#simis-about-us-section .platform-content-container:not(:has(.adrt-hero)):not(:has(.platform-toc-container)):not(:has(.adrt-reach)) {
  border-radius: 18px;
  background: rgba(18, 23, 40, 0.58) !important;
  padding: 35px 38px !important;
}
#simis-about-us-section .platform-content-container:has(.adrt-reach) {
  background: transparent !important;
  border-width: medium !important;
  border-style: none !important;
  border-color: currentcolor !important;
  border-image: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  padding: 0px !important;
}
#simis-about-us-section .platform-content p:not(.adrt-hero-sub):not(.adrt-hero-kicker), #simis-about-us-section .platform-content li {
  color: rgb(219, 227, 236) !important;
}
#simis-about-us-section .platform-content h2 {
  text-align: center;
  font-weight: 800;
  font-size: 32px;
  padding-bottom: 15px;
  margin-bottom: 32px;
  position: relative;
  color: rgb(242, 245, 251) !important;
}
#simis-about-us-section .platform-content h2::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(255, 140, 0) 50%, rgba(0, 0, 0, 0));
}
#simis-about-us-section .platform-content h3 {
  text-align: center;
  font-weight: 800;
  font-size: 24px;
  margin: 0px 0px 12px;
  color: rgb(242, 245, 251) !important;
}
#simis-about-us-section .platform-content p a:not(.button):not(.adrt-cta-btn), #simis-about-us-section .platform-content li a:not(.button):not(.adrt-cta-btn) {
  color: rgb(255, 140, 0) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#simis-about-us-section .platform-toc-container ul.vertical.menu li:not(:first-child) a:hover  {
  background: rgba(239, 159, 39, 0.1) !important;
  color: rgb(239, 159, 39) !important;
  border-left-color: rgb(239, 159, 39) !important;
  text-decoration: none !important;
}
#simis-about-us-section label.cv-zoom::after {
  content: "🔍 Click to enlarge";
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgb(154, 165, 181);
}
#simis-about-us-section input.cv-lb-cb {
  clip-path: inset(50%);
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
}
#simis-about-us-section .cv-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0px;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
#simis-about-us-section input.cv-lb-cb:checked + .cv-lightbox-overlay {
  display: flex;
}
#simis-about-us-section .cv-lightbox-bg {
  position: absolute;
  inset: 0px;
  background: rgba(0, 6, 22, 0.87);
  cursor: zoom-out;
}
#simis-about-us-section .cv-lightbox-img {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 10px;
  pointer-events: none;
}
#simis-about-us-section .cv-lightbox-close {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 9001;
  font-size: 32px;
  line-height: 1;
  color: rgb(219, 227, 236);
  cursor: zoom-out;
  font-weight: 700;
}
#simis-about-us-section .platform-content-container:has(.adrt-hero) {
  border-radius: 0px !important;
  background: transparent !important;
  padding: 0px !important;
  overflow: visible !important;
}
#simis-about-us-section .margin-50:has(.adrt-hero) {
  margin-top: 0px !important;
}
#simis-riverscout-section .margin-50:has(.rs-hero) {
  margin-top: 0px !important;
}
#simis-riverscout-section .platform-content-container:not(:has(.rs-hero)):not(:has(.platform-toc-container)):not(:has(.rs-reach)) {
  border-radius: 18px;
  background: rgba(18, 23, 40, 0.58) !important;
  padding: 35px 38px !important;
}
#simis-riverscout-section .platform-content-container:has(.rs-reach) {
  background: transparent !important;
  border-width: medium !important;
  border-style: none !important;
  border-color: currentcolor !important;
  border-image: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  padding: 0px !important;
}
#simis-riverscout-section .platform-content p:not(.rs-hero-sub):not(.rs-hero-kicker), #simis-riverscout-section .platform-content li {
  color: rgb(219, 227, 236) !important;
}
#simis-riverscout-section .platform-content h2 {
  text-align: center;
  font-weight: 800;
  font-size: 32px;
  padding-bottom: 15px;
  margin-bottom: 32px;
  position: relative;
  color: rgb(242, 245, 251) !important;
}
#simis-riverscout-section .platform-content h2::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(255, 140, 0) 50%, rgba(0, 0, 0, 0));
}
#simis-riverscout-section .platform-content h3 {
  text-align: center;
  font-weight: 800;
  font-size: 24px;
  margin: 0px 0px 12px;
  color: rgb(242, 245, 251) !important;
}
#simis-riverscout-section .platform-content p a:not(.button):not(.rs-cta-btn), #simis-riverscout-section .platform-content li a:not(.button):not(.rs-cta-btn) {
  color: rgb(255, 140, 0) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#simis-riverscout-section .platform-toc-container ul.vertical.menu li:not(:first-child) a:hover  {
  background: rgba(239, 159, 39, 0.1) !important;
  color: rgb(239, 159, 39) !important;
  border-left-color: rgb(239, 159, 39) !important;
  text-decoration: none !important;
}
#simis-riverscout-section label.cv-zoom::after {
  content: "🔍 Click to enlarge";
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgb(154, 165, 181);
}
#simis-riverscout-section input.cv-lb-cb {
  clip-path: inset(50%);
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
}
#simis-riverscout-section .cv-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0px;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
#simis-riverscout-section input.cv-lb-cb:checked + .cv-lightbox-overlay {
  display: flex;
}
#simis-riverscout-section .cv-lightbox-bg {
  position: absolute;
  inset: 0px;
  background: rgba(0, 6, 22, 0.87);
  cursor: zoom-out;
}
#simis-riverscout-section .cv-lightbox-img {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 10px;
  pointer-events: none;
}
#simis-riverscout-section .cv-lightbox-close {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 9001;
  font-size: 32px;
  line-height: 1;
  color: rgb(219, 227, 236);
  cursor: zoom-out;
  font-weight: 700;
}
#simis-riverscout-section .platform-content-container:has(.rs-hero) {
  border-radius: 0px !important;
  background: transparent !important;
  padding: 0px !important;
  overflow: visible !important;
}
#simis-sams-simis-autonomous-maritime-system-section .margin-50:has(.sams-hero) {
  margin-top: 0px !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-content-container:not(:has(.sams-hero)):not(:has(.platform-toc-container)):not(:has(.sams-reach)) {
  border-radius: 18px;
  background: rgba(18, 23, 40, 0.58) !important;
  padding: 35px 38px !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-content-container:has(.sams-reach) {
  background: transparent !important;
  border-width: medium !important;
  border-style: none !important;
  border-color: currentcolor !important;
  border-image: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  padding: 0px !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-content p:not(.sams-hero-sub):not(.sams-hero-kicker), #simis-sams-simis-autonomous-maritime-system-section .platform-content li {
  color: rgb(219, 227, 236) !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-content h2 {
  text-align: center;
  font-weight: 800;
  font-size: 32px;
  padding-bottom: 15px;
  margin-bottom: 32px;
  position: relative;
  color: rgb(242, 245, 251) !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-content h2::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(255, 140, 0) 50%, rgba(0, 0, 0, 0));
}
#simis-sams-simis-autonomous-maritime-system-section .platform-content h3 {
  text-align: center;
  font-weight: 800;
  font-size: 24px;
  margin: 0px 0px 12px;
  color: rgb(242, 245, 251) !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-content p a:not(.button):not(.sams-cta-btn), #simis-sams-simis-autonomous-maritime-system-section .platform-content li a:not(.button):not(.sams-cta-btn) {
  color: rgb(255, 140, 0) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-toc-container ul.vertical.menu li:not(:first-child) a:hover  {
  background: rgba(239, 159, 39, 0.1) !important;
  color: rgb(239, 159, 39) !important;
  border-left-color: rgb(239, 159, 39) !important;
  text-decoration: none !important;
}
#simis-sams-simis-autonomous-maritime-system-section label.cv-zoom::after {
  content: "🔍 Click to enlarge";
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgb(154, 165, 181);
}
#simis-sams-simis-autonomous-maritime-system-section input.cv-lb-cb {
  clip-path: inset(50%);
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
}
#simis-sams-simis-autonomous-maritime-system-section .cv-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0px;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
#simis-sams-simis-autonomous-maritime-system-section input.cv-lb-cb:checked + .cv-lightbox-overlay {
  display: flex;
}
#simis-sams-simis-autonomous-maritime-system-section .cv-lightbox-bg {
  position: absolute;
  inset: 0px;
  background: rgba(0, 6, 22, 0.87);
  cursor: zoom-out;
}
#simis-sams-simis-autonomous-maritime-system-section .cv-lightbox-img {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 10px;
  pointer-events: none;
}
#simis-sams-simis-autonomous-maritime-system-section .cv-lightbox-close {
  position: fixed;
  top: 24px;
  right: 32px;
  z-index: 9001;
  font-size: 32px;
  line-height: 1;
  color: rgb(219, 227, 236);
  cursor: zoom-out;
  font-weight: 700;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-content-container:has(.sams-hero) {
  border-radius: 0px !important;
  background: transparent !important;
  padding: 0px !important;
  overflow: visible !important;
}

/* Unify product-page TOC hover with the shared Solutions-family recipe (flat translucent
   tint + brighter orange, not the darker per-product tint), and give the header link its own
   (visually static, matching live) hover rule -- it is a real link back to /autonomous-solutions
   and was previously left with no hover rule defined at all. */
#simis-rhtt-section .platform-toc-container ul.vertical.menu li:first-child a:hover {
  color: rgb(239, 159, 39) !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  text-decoration: none !important;
}
#simis-about-us-section .platform-toc-container ul.vertical.menu li:first-child a:hover {
  color: rgb(239, 159, 39) !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  text-decoration: none !important;
}
#simis-riverscout-section .platform-toc-container ul.vertical.menu li:first-child a:hover {
  color: rgb(239, 159, 39) !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  text-decoration: none !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-toc-container ul.vertical.menu li:first-child a:hover {
  color: rgb(239, 159, 39) !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* The 8px border-radius on each row rounds the top/bottom ends of the 3px hover/active
   left-border into a bracket-like curve. Force the row itself flat so the bar reads as a
   clean flat rectangle, not the rounded-end bracket. */
#simis-rhtt-section .platform-toc-container ul.vertical.menu li a {
  border-radius: 0 8px 8px 0 !important;
}
#simis-about-us-section .platform-toc-container ul.vertical.menu li a {
  border-radius: 0 8px 8px 0 !important;
}
#simis-riverscout-section .platform-toc-container ul.vertical.menu li a {
  border-radius: 0 8px 8px 0 !important;
}
#simis-sams-simis-autonomous-maritime-system-section .platform-toc-container ul.vertical.menu li a {
  border-radius: 0 8px 8px 0 !important;
}

/* Live pulls the section up flush against the nav with a negative top margin -- this was
   bundled in the same source rule as a broken /web-content backdrop-image reference that got
   dropped entirely; keeping the broken image out but restoring the actual layout fix. */
#simis-rhtt-section {
  margin-top: -30px;
  position: relative;
}
#simis-about-us-section {
  margin-top: -30px;
  position: relative;
}
#simis-riverscout-section {
  margin-top: -30px;
  position: relative;
}
#simis-sams-simis-autonomous-maritime-system-section {
  margin-top: -30px;
  position: relative;
}
/* HTT "Fielded with" row -- live authors this as inline style on a classless div/span,
   which this build's sanitizer strips; added a class in the page XML to hook this to. */
#simis-rhtt-section .htt-fielded {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 0 0 8px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#simis-rhtt-section .htt-fielded-item {
  color: #dbe3ec;
  font-weight: 700;
  font-size: 14px;
}

/* HTT figure pop-out. The working .ms-zoom/.ms-lightbox system is scoped under .gs-body,
   which the Autonomous product pages do not use, so the same rules are re-scoped to the HTT
   section here. Replaces the old checkbox-based cv-lightbox, whose <input> the sanitizer strips. */
body:not(:has(.admin-web-content)) #simis-rhtt-section a.ms-zoom { display: block; max-width: 680px; margin: 0px auto; text-decoration: none; cursor: zoom-in; }
body:not(:has(.admin-web-content)) #simis-rhtt-section a.ms-zoom img { display: block; width: 100%; height: auto; border-radius: 10px; }
body:not(:has(.admin-web-content)) #simis-rhtt-section a.ms-zoom::after { content: "🔍 Click to enlarge"; display: block; font-size: 13px; color: rgb(154, 165, 181); text-align: center; margin: 10px 0px 0px; }
body:not(:has(.admin-web-content)) #simis-rhtt-section a.ms-zoom:hover::after { color: rgb(255, 140, 0); }
body:not(:has(.admin-web-content)) #simis-rhtt-section a.ms-zoom:focus-visible img { outline: rgb(255, 140, 0) solid 3px; outline-offset: 3px; }
body:not(:has(.admin-web-content)) #simis-rhtt-section a.ms-lightbox { display: none; position: fixed; inset: 0px; z-index: 9999; margin: 0px; text-decoration: none; cursor: zoom-out; align-items: center; justify-content: center; background-color: rgba(6, 9, 14, 0.93); background-repeat: no-repeat; background-position: center center; background-size: contain; background-origin: content-box; padding: 6vh 4vw; box-sizing: border-box; }
body:not(:has(.admin-web-content)) #simis-rhtt-section a.ms-lightbox:target { display: flex; }
body:not(:has(.admin-web-content)) #simis-rhtt-section a.ms-lightbox:focus-visible { outline: rgb(255, 140, 0) solid 3px; outline-offset: -6px; }
body:not(:has(.admin-web-content)) #simis-rhtt-section .ms-lightbox-close { position: absolute; top: 24px; right: 28px; font-size: 15px; font-weight: 700; color: rgb(255, 255, 255); }
body:not(:has(.admin-web-content)) .platform-body #simis-rhtt-section p a:not(.gs-hero-cta):not(.gs-cta-btn):not(.ms-zoom):not(.ms-lightbox), body:not(:has(.admin-web-content)) .platform-body #simis-rhtt-section li a:not(.gs-hero-cta):not(.gs-cta-btn), body:not(:has(.admin-web-content)) .platform-body #simis-rhtt-section td a:not(.gs-hero-cta):not(.gs-cta-btn) { font-weight: 700; color: rgb(255, 140, 0); }
body:not(:has(.admin-web-content)) .platform-body #simis-rhtt-section p a:not(.gs-hero-cta):not(.gs-cta-btn):not(.ms-zoom):not(.ms-lightbox):hover, body:not(:has(.admin-web-content)) .platform-body #simis-rhtt-section li a:not(.gs-hero-cta):not(.gs-cta-btn):hover, body:not(:has(.admin-web-content)) .platform-body #simis-rhtt-section td a:not(.gs-hero-cta):not(.gs-cta-btn):hover, body:not(:has(.admin-web-content)) .platform-body #simis-rhtt-section p a:not(.gs-hero-cta):not(.gs-cta-btn):not(.ms-zoom):not(.ms-lightbox):focus, body:not(:has(.admin-web-content)) .platform-body #simis-rhtt-section li a:not(.gs-hero-cta):not(.gs-cta-btn):focus, body:not(:has(.admin-web-content)) .platform-body #simis-rhtt-section td a:not(.gs-hero-cta):not(.gs-cta-btn):focus { color: rgb(255, 167, 51); text-decoration: underline; }
#simis-rhtt-section a#htt-fig-standards { background-image: url("/assets/img/20260824200917-288/HTT%20Open%20Standards%20and%20Interoperability.webp"); background-size: contain; background-position: center center; }

/* A heading that carries only a banner image should not get the decorative accent bar
   (the benefits banner is wrapped in an h2, so the content-heading accent was landing under it) */
body:not(:has(.admin-web-content)) .platform-body .platform-content > h2:has(> img)::after {
  content: none;
}

/* Section headers sat at weight 500 while hero headings and card headers were 800,
   leaving them the lightest headings on the page. Match the rest of the hierarchy. */
body:not(:has(.admin-web-content)) .platform-body .platform-content > h2 {
  font-weight: 800;
}

/* Content headings sat at weight 500 while showcase and card headings were 800.
   Bring them to the same weight so every heading on the page reads as one hierarchy. */
body:not(:has(.admin-web-content)) .platform-body .platform-content > h3 {
  font-weight: 800;
}

/* Subscribe page carried 222px of stacked vertical padding around the form card.
   Scoped to .sub-page, which exists only on /subscribe. */
body:not(:has(.admin-web-content)) .platform-body .full-container:has(.sub-page) {
  background-image: none;
  padding-top: 0;
  padding-bottom: 0;
}
body:not(:has(.admin-web-content)) .platform-body .sub-page .medium-8.medium-offset-2 {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Industry News wallpaper: same treatment as the Autonomous Solutions pages,
   using the more efficient webp version of the shared gray background. */
body:not(:has(.admin-web-content)):has(.sub-page) {
  background: url(/assets/img/20260823155036-253/GrayBG.webp) center center / cover fixed no-repeat !important;
}

/* Industry News sits directly under the nav; the shared .sub-page top padding (tuned tight
   for /subscribe) leaves no breathing room here. Scoped so /subscribe is unaffected. */
body:not(:has(.admin-web-content)) .platform-body .sub-page {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* The last content block adds its own trailing margins on top of the panel padding,
   so the panel read 25px above the content and 41px below. Drop the trailing margins. */
.sub-page .platform-content-container:last-child {
  margin-bottom: 0;
}
.sub-page .platform-content-container:last-child .platform-content > *:last-child {
  margin-bottom: 0;
}
.sub-page .platform-content-container:last-child .platform-content {
  margin-bottom: 0;
}

/* News page title: the generic heading rule sets 500; match the bold used elsewhere. */
body:not(:has(.admin-web-content)) .news-intro-panel h1 {
  font-weight: 800;
}

/* news-intro white text */
/* Text here inherited near-black from the page default; on the gray wallpaper that
   measured 1.9:1. White restores readable contrast for the title and standfirst. */
body:not(:has(.admin-web-content)) .news-intro-panel {
  color: #ffffff;
}

/* jobs-panel title bold */
/* Generic heading rule sets 500; match the bold used on the other page titles. */
body:not(:has(.admin-web-content)) .jobs-panel h2 {
  font-weight: 800;
}

/* jobs-panel doc links */
/* Make the two policy documents read as downloads: bold and centred. */
body:not(:has(.admin-web-content)) .jobs-panel a[href*="/assets/file/"] {
  font-weight: 700;
}
body:not(:has(.admin-web-content)) .jobs-panel p:has(> a[href*="/assets/file/"]) {
  text-align: center;
}

/* jobs-panel pdf icon */
/* Render the PDF glyph as a pseudo-element rather than an empty <i> in page content --
   the sanitizer strips empty elements, so markup here would be fragile. Decorative only;
   the link text carries "(PDF)" for screen readers. */
body:not(:has(.admin-web-content)) .jobs-panel a[href*="/assets/file/"]::before {
  content: "\f1c1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.5em;
}

/* careers-panel title bold */
/* Generic heading rule sets 500; match the bold used on the other page titles. */
body:not(:has(.admin-web-content)) .careers-panel h1,
body:not(:has(.admin-web-content)) .careers-panel h2 {
  font-weight: 800;
}

/* ---- upcoming-events panel: readability + width ---- */
/* Title was #b45309 on the #0b1024 panel = 3.75:1 (large-text only).
   Brand orange #ff8c00 measures 8.08:1 and matches the sitewide accent. */
body:not(:has(.admin-web-content)) .home-highlights .platform-calendar-event-block h4 a {
  color: #ff8c00;
}
/* The block was inset 43px (30px margin + 3px rule + 10px pad), making this
   column 304px of text vs 347px for Latest News/Careers. Drop the margin,
   keep the rule as a divider. */
body:not(:has(.admin-web-content)) .home-highlights .platform-calendar-event-block {
  margin-left: 0;
}
/* Summary hidden on the homepage panel only; it still shows on /trade-shows
   and the event detail page. */
body:not(:has(.admin-web-content)) .home-highlights .platform-calendar-event-summary {
  display: none;
}

/* ---- upcoming-events: restore the date separator ---- */
/* The separator carries the formatted date ("September 17, 2026"); the event-date
   line below it carries only the time, and the JSP omits that line entirely for a
   single-day all-day event. With the separator hidden there was no date at all.
   Same selector as the earlier hide rule, later in the file, so it wins. */
body:not(:has(.admin-web-content)) .home-highlights .platform-calendar-month-separator {
  display: block;
}

/* ---- upcoming-events: date chip on dark ---- */
/* platform.css styles the date label as a solid black chip with a black rule --
   designed for a light page. On the #0b1024 panel the chip reads as a stray black
   bar and the rule is invisible. Drop the chip, lighten the rule. */
body:not(:has(.admin-web-content)) .home-highlights .platform-calendar-month-separator-label {
  background: transparent;
  padding-left: 0;
}
body:not(:has(.admin-web-content)) .home-highlights .platform-calendar-month-separator {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

/* ---- trade-shows panel: match the homepage events panel ---- */
/* This panel sits on white, unlike the homepage panel on #0b1024, so the date label
   takes the panel heading colour (#01213d, 16.3:1 on white) rather than white text.
   Un-hides the separator, which is where the formatted date lives -- the event-date
   line below it is omitted entirely for a single-day all-day event. */
body:has(.trade-shows-panel) .platform-calendar-month-separator {
  display: block;
  border-bottom-color: rgba(1, 33, 61, 0.15);
}
body:has(.trade-shows-panel) .platform-calendar-month-separator-label {
  background: transparent;
  padding-left: 0;
  color: #01213d;
}
/* Same 43px inset removal as the homepage: 30px margin + 3px rule + 10px padding. */
body:has(.trade-shows-panel) .platform-calendar-event-block {
  margin-left: 0;
}
body:has(.trade-shows-panel) .platform-calendar-event-summary {
  display: none;
}

/* ---- event details page: hide the summary ---- */
/* Matches the homepage and trade-shows panels, where the summary is hidden. On the
   details page it also rendered inside a 1px bordered box, which read as a form
   field rather than body copy. Scoped to the details container so the summary is
   unaffected anywhere else. */
body:has(.platform-calendar-details-container) .platform-calendar-event-summary {
  display: none;
}

/* ---- trade-shows: bold the page title ---- */
/* The h1 rendered at font-weight 500 while every other ported page title in this
   stylesheet uses 800 (news, careers, current job openings, trust center). */
body:not(:has(.admin-web-content)) .trade-shows-panel h1 {
  font-weight: 800;
}

/* ---- event details: one date, not three ---- */
/* The detail page prints the start date three times: a centred month header, the separator
   chip, and the event-date line. Only the last carries the full range, so the header goes.
   The chip stays for now: a single-day all-day event renders no event-date line at all
   (the JSP guards it on start != end), so removing the chip too would leave those events
   with no date. Drop it once that fix ships. */
body:has(.platform-calendar-details-container) .platform-calendar-month {
  display: none;
}

/* ---- blog tag colours by topic ---- */
/* Each topic gets its own colour so a reader can scan the list by subject. Selectors key on
   data-tag, which the tag label carries from PR #1420 -- until that deploys these simply do
   not match and every tag stays the default grey. Every colour is checked for white label
   text at WCAG AA (ratios noted) and stays distinguishable from the dark panel behind it. */
body:not(:has(.admin-web-content)) .label[data-tag="Modeling & Simulation"] {
  background-color: #1d4ed8;  /* white text 6.70:1 */
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .label[data-tag="Cybersecurity & CMMC"] {
  background-color: #b91c1c;  /* white text 6.47:1 */
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .label[data-tag="AI/ML & Data Analytics"] {
  background-color: #7e22ce;  /* white text 6.98:1 */
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .label[data-tag="Autonomous & Unmanned Systems"] {
  background-color: #0f766e;  /* white text 5.47:1 */
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .label[data-tag="Test & Evaluation"] {
  background-color: #a16207;  /* white text 4.92:1 */
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .label[data-tag="Rapid Prototyping"] {
  background-color: #15803d;  /* white text 5.02:1 */
  color: #ffffff;
}
/* ---- showcase-card-fill (temporary) ----
   The showcase view in the platform sets margin-top:auto on the footer and
   flex:1 1 auto on the summary, but does not make the card fill its cell -- so
   cards in a row end at different heights (measured 710/824/761). That is a gap
   in the platform view, not a site preference; PR to fix it is open. Remove this
   block once that ships. */
.platform-blog-showcase-container .cell > .card { height: 100%; }
.platform-blog-showcase-container .grid-x > .cell { display: flex; }

/* ---- /my-page (Employee Portal) -----------------------------------------------
   Scoped to the .my-page body class the page XML sets, so none of it reaches other
   pages. The wallpaper lives here rather than on a section so it sits behind every
   row, frozen against the viewport while the content scrolls. */
.my-page .platform-body {
  background-image: url('/assets/img/20260827230916-329/SimIS%20Digital%20Network%20Background.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Light copy on the dark wallpaper. The profile callout, the role badges and the cards
   paint their own surfaces, so they are left to their own ink. */
.my-page #my-page-intro,
.my-page #my-page-intro h1,
.my-page #my-page-intro h2,
.my-page #my-page-intro h3,
.my-page #my-page-intro p,
.my-page .my-page-rail h2,
.my-page .my-page-rail h3,
.my-page .my-page-rail h4,
.my-page .my-page-rail p,
.my-page .my-page-rail li {
  color: #ffffff;
}

/* the profile callout paints its own light surface, so it keeps its own dark ink */
.my-page .my-page-rail .callout,
.my-page .my-page-rail .callout h4,
.my-page .my-page-rail .callout p {
  color: initial;
}

/* Welcome text sits down off the hero band instead of butting against it */
.my-page #my-page-intro { padding-top: 2.75rem; }
.my-page #my-page-grid { padding-bottom: 3.5rem; }

/* Floating card grid. auto-fill keeps it responsive with no media queries: four across
   on a wide main column, two on a tablet, one on a phone. */
.my-page .my-page-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
  align-content: start;
}
.my-page .my-page-card { margin: 0; }
.my-page .my-page-card > a {
  display: block;
  height: 100%;
  background: rgba(10, 16, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.my-page .my-page-card > a:hover,
.my-page .my-page-card > a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
  background: rgba(18, 28, 46, 0.88);
}
.my-page .my-page-card .card-divider {
  background: transparent;
  color: #ffffff;
  font-weight: 600;
  justify-content: center;
  text-align: center;
  padding: .9rem .75rem .25rem;
}
.my-page .my-page-card .card-section {
  text-align: center;
  padding: .25rem .75rem 1.1rem;
}
.my-page .my-page-card .card-section p { margin: 0; }
.my-page .my-page-card .card-section i { color: #f39a4e; }
/* The hero band is decorative and deliberately empty, but an empty content widget shows
   editors an "Add Content Here" button. Hide it here rather than filling the band with text
   nobody wants -- the record is still editable from Admin > Content if it is ever needed. */
.my-page #my-page-hero .button { display: none; }

/* The rail reads as one panel in the same language as the cards, instead of a white box
   floating over the wallpaper with loose text beneath it. */
.my-page .my-page-rail {
  background: rgba(10, 16, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  padding: 1.25rem 1.25rem 1rem;
}
/* the profile block is already inside that panel, so it should not draw a second box */
.my-page .my-page-rail .callout.secondary {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 1rem;
}
.my-page .my-page-rail .callout.secondary,
.my-page .my-page-rail .callout.secondary h4,
.my-page .my-page-rail .callout.secondary p {
  color: #ffffff;
}
.my-page .my-page-rail h4 { margin-bottom: .35rem; }
.my-page .my-page-rail .platform-content-container { margin-top: 1.25rem; }

/* Bold, brighter links so the Office 365 entry reads at a glance on the dark panel */
.my-page .my-page-rail a {
  font-weight: 700;
  color: #ffb066;
}
.my-page .my-page-rail a:hover,
.my-page .my-page-rail a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

/* /htt hero. The tagline used to be the page h1 and took its size, weight and colour from
   the global h1 rule -- it carried no class of its own. The page needs its h1 to name the
   subject rather than the tagline, so the tagline moves to a p and these values, measured
   from the h1 it replaces, come with it. */
.htt-hero .htt-hero-title {
  font-size: clamp(26px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1.06;
  color: #ffffff;
  margin: 0 0 18px;
  /* em, not ch. The ch unit is the width of the zero glyph, so one shared value resolved to 613px
     on the faces used by HTT and RiverScout and 766px on ADRT and SAMS -- one rule, two wrap
     points. Keyed to font-size instead, all four match, and it still scales with the clamp above.
     11.35em is the 613px the gs-hero-title convention already produces, so these match those too. */
  max-width: 11.35em;
}
.htt-hero .htt-hero-title::after {
  content: "";
  display: block;
  width: clamp(90px, 9vw, 150px);
  height: 4px;
  background: linear-gradient(90deg, #ef9f27 45%, transparent);
  margin: 20px 0 0;
}

/* Autonomous Solutions product hero titles (ADRT, RiverScout, SAMS).
   These three kept a bare h1 in the hero, so they inherited the platform default 40px and read a
   tier smaller than the HTT and gs-* heroes beside them, with no accent rule; RiverScout was also
   still at weight 500. Same treatment as .gs-hero-title so the product family matches. The bare h1
   default is an element selector, so .adrt-hero h1 outranks it without needing an id. */
.adrt-hero h1,
.rs-hero h1,
.sams-hero h1 {
  font-size: clamp(26px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1.06;
  margin: 0 0 18px;
  /* em, not ch. The ch unit is the width of the zero glyph, so one shared value resolved to 613px
     on the faces used by HTT and RiverScout and 766px on ADRT and SAMS -- one rule, two wrap
     points. Keyed to font-size instead, all four match, and it still scales with the clamp above.
     11.35em is the 613px the gs-hero-title convention already produces, so these match those too. */
  max-width: 11.35em;
}
.adrt-hero h1::after,
.rs-hero h1::after,
.sams-hero h1::after {
  content: "";
  display: block;
  width: clamp(90px, 9vw, 150px);
  height: 4px;
  background: linear-gradient(90deg, #ef9f27 45%, transparent);
  margin: 20px 0 0;
}

/* ---- /employee-* (Employee Portal sections) -------------------------------------
   Scoped to the .employee-page body class the page XML sets, so none of it reaches
   other pages. These pages are the portal's own sections, so they carry the portal's
   wallpaper and card surface -- the same image and the same values as /my-page,
   rather than a second dark look that merely resembles it.

   The documents come from fileList widgets pointed at folders, so they are styled
   here rather than rebuilt as card widgets: a card per document would freeze the
   list, and files added to a folder would stop appearing on the page. */
.employee-page .platform-body {
  background-image: url('/assets/img/20260827230916-329/SimIS%20Digital%20Network%20Background.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* The body row ships as medium-3 + medium-6, so a quarter of the page sat empty.
   Give the content cell the remaining nine columns. */
@media screen and (min-width: 40em) {
  /* A margin grid carries 15px either side, so a flat 75% overflows the row and
     drops the content below the nav. Subtract the gutters. */
  .employee-page #employee-body .grid-x > .cell.medium-6 {
    flex: 0 0 calc(75% - 30px);
    max-width: calc(75% - 30px);
    width: calc(75% - 30px);
  }
}

/* Light copy on the dark wallpaper. */
.employee-page #employee-body h1,
.employee-page #employee-body h2,
.employee-page #employee-body h3,
.employee-page #employee-body h4,
.employee-page #employee-body .platform-content > p {
  color: #ffffff;
}

/* Documents as cards, taking /my-page's card surface values unchanged. The site
   link colour #b45309 measures 3.51:1 on this wallpaper -- under the 4.5:1 links
   need -- so the card ink is white, the same answer the portal's rail reached
   (18.70:1 on this surface). */
.employee-page #employee-body ul:not(.menu) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.employee-page #employee-body ul:not(.menu) > li {
  margin: 0;
  padding: .95rem 1.1rem;
  background: rgba(10, 16, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.employee-page #employee-body ul:not(.menu) > li:hover,
.employee-page #employee-body ul:not(.menu) > li:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
  background: rgba(18, 28, 46, 0.88);
}
/* The file size the widget prints after each link. Secondary, but kept legible. */
.employee-page #employee-body ul:not(.menu) > li .subheader {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: #a8b2c4;
}
.employee-page #employee-body ul:not(.menu) > li > a {
  display: block;
  color: #ffffff;
}

/* The section nav shipped as a light-grey slab, which reads as a hole punched in the
   wallpaper. Same panel idiom the /government-services nav already uses, so the two
   internal navs match rather than each inventing its own dark treatment. */
.employee-page #employee-body .platform-toc-container .vertical.menu {
  background: #121728;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 8px 0;
}
.employee-page #employee-body .platform-toc-container .vertical.menu li {
  background: transparent;
  margin-bottom: 1px;
}
.employee-page #employee-body .platform-toc-container .vertical.menu li a {
  color: #c3ccdf;
  font-weight: 600;
  padding: 9px 14px;
  background: transparent;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  transition: color .15s, background .15s, border-color .15s;
}
.employee-page #employee-body .platform-toc-container .vertical.menu li a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-left-color: rgba(255, 255, 255, 0.35);
}
/* The active section keeps the theme accent it already had, plus a bar so the state
   is not carried by colour alone. */
.employee-page #employee-body .platform-toc-container .vertical.menu li.is-active > a {
  color: #ffffff;
  border-left-color: #ffffff;
}
/* Long document lists -- Policy Statements (36) and State Labor Laws (68).
   A card each would be six screens of near-identical tiles with nothing to anchor
   the eye, so these keep one panel per heading group and flow the links into
   columns. Two classes plus the id outrank the card rules above. */
.employee-page.employee-page-long #employee-body ul:not(.menu) {
  display: block;
  column-count: 3;
  column-gap: 2.25rem;
  background: rgba(10, 16, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  padding: 1.1rem 1.35rem .6rem;
  margin: 0 0 2rem;
  list-style: none;
}
/* Undo the card surface the shorter pages give each item. */
.employee-page.employee-page-long #employee-body ul:not(.menu) > li {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  padding: 0 0 .55rem;
  margin: 0;
  break-inside: avoid;
}
.employee-page.employee-page-long #employee-body ul:not(.menu) > li:hover,
.employee-page.employee-page-long #employee-body ul:not(.menu) > li:focus-within {
  transform: none;
  box-shadow: none;
  background: none;
}
.employee-page.employee-page-long #employee-body ul:not(.menu) > li > a {
  /* The card rule sets display:block; inline here so the size sits beside the
     link rather than dropping to its own line. */
  display: inline;
  color: #ffffff;
}
.employee-page.employee-page-long #employee-body ul:not(.menu) > li > a:hover {
  text-decoration: underline;
}
/* Inline here rather than on its own line: at 68 items a stacked size doubles the
   height of the panel for a secondary detail. */
.employee-page.employee-page-long #employee-body ul:not(.menu) > li .subheader {
  display: inline;
  margin: 0 0 0 .4rem;
  font-size: .78rem;
  color: #a8b2c4;
}
@media screen and (max-width: 63.9375em) {
  .employee-page.employee-page-long #employee-body ul:not(.menu) { column-count: 2; }
}
@media screen and (max-width: 39.9375em) {
  .employee-page.employee-page-long #employee-body ul:not(.menu) { column-count: 1; }
}

/* ---- Heading weight fixes (2026-08-28) ----
   Both entries below are the same defect: these site rules are keyed to heading
   TAGS, and the authored markup uses a different tag than the rule expects. */

/* Service-page title. .gs-body has rules for h2 (800) and h3 (700) but none for
   h1, so the unclassed page-title h1 fell through to the platform default of
   500 and rendered lighter than the sections beneath it. Weight only -- size is
   unchanged. Affects /government-services, /modeling-and-simulation,
   /test-and-evaluation, /ai-ml-and-data-analytics. */
body:not(:has(.admin-web-content)) .platform-body .gs-body h1 {
  font-weight: 800;
}

/* The "Reach Out" block is authored as h2 on four pages and h3 on five; only h3
   was styled, so the h2 version inherited black at 1.85:1 on the dark ground.
   White on #333b42 is 11.38:1. Weight and colour only -- size, letter-spacing
   and margins are left to the existing h3 rule so the five pages already
   rendering correctly are untouched. Affects /government-services,
   /modeling-and-simulation, /ai-ml-and-data-analytics,
   /3d-printing-and-rapid-prototyping. */
body:not(:has(.admin-web-content)) .platform-body .gs-reach h2 {
  font-weight: 700;
  color: #ffffff;
}

/* Standalone "see also" CTA line (2026-08-28). .gs-tclink does double duty: on
   its own inside p.gs-cert-links it is a standalone call to action
   (/government-services, /modeling-and-simulation), but the same class is also
   used inline mid-sentence in body prose on /test-and-evaluation. Scoped to
   .gs-cert-links so only the standalone form grows -- sizing a.gs-tclink itself
   would enlarge three inline links inside paragraphs and leave them bigger than
   the words around them. 19.2px matches the .gs-intro size already in this
   sheet. Weight and colour stay with the existing a.gs-tclink rule above. */
body:not(:has(.admin-web-content)) .platform-body .gs-body .gs-cert-links a.gs-tclink {
  font-size: 19.2px;
}

/* "Procurement-Ready" eyebrow (2026-08-28). An eyebrow labels the heading BELOW
   it, but the rhythm here was inverted: 34px above (the .gs-intro bottom margin)
   and 56px below (the h2 margin-top, which wins the collapse against the
   eyebrow's 4px). It read as trailing the paragraph rather than introducing
   "Credentials at a Glance". 40px above / 8px below binds it to the heading.
   Size 12.5px -> 14px; tracking moved to 0.12em so it scales with the size
   instead of staying pinned at 1.6px. Sole use of .gs-eyebrow on the site. */
body:not(:has(.admin-web-content)) .platform-body .gs-body .gs-eyebrow {
  font-size: 14px;
  letter-spacing: 0.12em;
  margin-top: 40px;
  margin-bottom: 8px;
}
body:not(:has(.admin-web-content)) .platform-body .gs-body .gs-eyebrow + h2 {
  margin-top: 0;
}
/* Breathing room round the section title and the tiles. The body row sat flush against
   the hero -- the heading's own top edge was exactly the hero's bottom -- and the tiles
   started 8px below it, which read as cramped rather than dense. */
.employee-page #employee-body {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}
.employee-page #employee-body h1,
.employee-page #employee-body h2,
.employee-page #employee-body h3,
.employee-page #employee-body h4 {
  margin-bottom: 1.15rem;
}
/* A second or later group needs air above it as well as below the list before it. */
.employee-page #employee-body .platform-content > ul + h1,
.employee-page #employee-body .platform-content > ul + h2,
.employee-page #employee-body .platform-content > ul + h3,
.employee-page #employee-body .platform-content > ul + h4 {
  margin-top: 1rem;
}
.employee-page #employee-body ul:not(.menu) {
  gap: 1.15rem;
}
/* Employee Portal is the only item in this nav that goes UP a level -- everything
   else is a sibling section. Colouring it in the logo amber marks it as the way
   home. 7.02:1 on the panel, against 11.05:1 for the sibling links, so it reads as
   deliberate emphasis rather than a different state. */
.employee-page #employee-body .platform-toc-container .vertical.menu li:first-child > a {
  color: #e98c39;
}
.employee-page #employee-body .platform-toc-container .vertical.menu li:first-child > a:hover {
  color: #f0a463;
}
/* When the portal itself is the current page the active treatment still wins, so the
   selected item never reads as merely a coloured link. */
.employee-page #employee-body .platform-toc-container .vertical.menu li.is-active:first-child > a {
  color: #ffffff;
}
/* The file-type icon sits BESIDE the link, not inside it, so it inherits the list
   item rather than the white link text -- which on this dark card left it black at
   1.12:1. Matched to the file size beside it: both are secondary to the name. */
.employee-page #employee-body ul:not(.menu) > li > i {
  color: #a8b2c4;
  margin-right: .1rem;
}

/* DIRECTORY-INK: card text that is not a link had no colour of its own and
   fell through to black on the dark card (1.12:1). Names without an email and
   the job-title <small> both need explicit ink. */
.employee-page #employee-body ul:not(.menu) > li {
  color: #ffffff;
}
.employee-page #employee-body ul:not(.menu) > li small {
  color: #a8b2c4;
  display: block;
  margin-top: .15rem;
  line-height: 1.35;
}

/* Tables in the employee portal. The benefits summary is the first portal page to carry one, so no
   dark treatment existed and Foundation's default painted a white block on the dark ground -- legible,
   but plainly not part of the page. Same surface, border and radius as the list cards above, so a
   table reads as the same family rather than inventing a third look. */
.employee-page #employee-body table {
  width: 100%;
  color: #ffffff;
  background: rgba(10, 16, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.employee-page #employee-body table thead,
.employee-page #employee-body table tbody,
.employee-page #employee-body table tfoot,
.employee-page #employee-body table tr {
  background: transparent;
  border: 0;
}
.employee-page #employee-body table th,
.employee-page #employee-body table td {
  color: #ffffff;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Zebra striping earns its keep on a two-column benefits table read across the row. */
.employee-page #employee-body table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.045);
}
.employee-page #employee-body table tr:last-child th,
.employee-page #employee-body table tr:last-child td {
  border-bottom: 0;
}

/* BRAND-BUTTON-CONTRAST: one accessible CTA orange across every family.
   White text on #ff8c00 (.button.brand), #f5901e (.gs-hero-cta) and #df5430
   (.gs-cta-btn) measured 2.33:1, 2.36:1 and 3.85:1 -- all below the 4.5:1 WCAG AA
   needs at those sizes and weights. #c4441f measures 5.01:1 and passes at any size
   or weight, so the pass does not depend on keeping the text bold.
   Decorative orange (accent rules, gradients, bullets, stat figures) is left alone --
   it is not text on a fill. */
body:not(:has(.admin-web-content)) .button.brand {
  background-color: #c4441f;
  border-color: #c4441f;
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .button.brand:hover,
body:not(:has(.admin-web-content)) .button.brand:focus {
  background-color: #a83917;
  border-color: #a83917;
  color: #ffffff;
}
/* Home page closing CTA: same fill, and the circle-arrow glyph in white reads as a
   white disc with the arrow knocked out, matching the service page buttons. */
/* platform.css pins .button.box to color: var(--sc-text) !important, which is right for a
   light box button and wrong once it carries a dark fill -- !important is the only way to
   restore legible ink from site CSS. */
body:not(:has(.admin-web-content)) .platform-content a.button.large.box.round {
  background-color: #c4441f;
  border-color: #c4441f;
  color: #ffffff !important;
  font-weight: 700;
  padding: 18px 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
}
body:not(:has(.admin-web-content)) .platform-content a.button.large.box.round:hover,
body:not(:has(.admin-web-content)) .platform-content a.button.large.box.round:focus {
  background-color: #a83917;
  border-color: #a83917;
  color: #ffffff;
}
body:not(:has(.admin-web-content)) .platform-content a.button.large.box.round i {
  color: #ffffff;
  font-size: 1.35em;
  line-height: 1;
}

/* Calendar event titles. The platform renders these as a bare h3 with no class, so they
   take the default 28px heading size -- which reads as a section heading rather than an entry
   when it sits above 16px date and location lines. 1.5rem keeps a clear step above the detail
   text without competing with the panel heading. Platform-side this is arguably the wrong
   default everywhere (see issue 1622); this is the site-level correction. */
.platform-calendar-event-block h3 {
  font-size: var(--sc-font-xl, 1.5rem);
}

/* Laptop widths: the about-us side menu.
   Below 1559px the sidebar cannot sit beside the article, so it already stacked -- but as a
   nine-item vertical list that is a ~530px block, which on a MacBook Air (1440px) pushes the
   article a full screen down before a reader reaches a word of it. Flowing the links as a
   wrapped row keeps every one of them visible in about 175px.
   flex-direction is set explicitly because Foundation's .menu.vertical forces column, so
   flex-wrap alone does nothing. */
@media (max-width: 1559px) {
  body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    padding: 10px 12px;
  }
  body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu li {
    flex: 0 0 auto;
    width: auto;
  }
  body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu li.au-side-title {
    flex: 1 0 100%;
    text-align: center;
    margin-bottom: 2px;
  }
  body:not(:has(.admin-web-content)) .au-side-menu ul.vertical.menu a {
    padding: 7px 12px;
    border-left: 0;
    border-radius: 6px;
  }
}

/* Hero CTA colour, all pages.
   The hero buttons were written per page -- sol-hero-cta, htt-cta-btn, adrt-cta-btn, rs-cta-btn
   and sams-cta-btn all painted #f5901e, while the seven gs-hero-cta pages used the brand
   #c4441f. That is not only inconsistent: white on #f5901e is 2.36:1, which fails WCAG 1.4.3
   at every text size, large included. White on #c4441f is 5.01:1 and passes.
   Colour and size only -- each class keeps its own layout, because sol-hero-cta's
   width:fit-content is what stops it stretching in that hero's container. */
body:not(:has(.admin-web-content)) .sol-hero-cta,
body:not(:has(.admin-web-content)) #simis-rhtt-section .htt-cta-btn,
body:not(:has(.admin-web-content)) #simis-about-us-section .adrt-cta-btn,
body:not(:has(.admin-web-content)) #simis-riverscout-section .rs-cta-btn,
body:not(:has(.admin-web-content)) #simis-sams-simis-autonomous-maritime-system-section .sams-cta-btn {
  background: #c4441f;
  font-size: 18px;
}
body:not(:has(.admin-web-content)) .sol-hero-cta:hover,
body:not(:has(.admin-web-content)) #simis-rhtt-section .htt-cta-btn:hover,
body:not(:has(.admin-web-content)) #simis-about-us-section .adrt-cta-btn:hover,
body:not(:has(.admin-web-content)) #simis-riverscout-section .rs-cta-btn:hover,
body:not(:has(.admin-web-content)) #simis-sams-simis-autonomous-maritime-system-section .sams-cta-btn:hover {
  background: #a83a1a;
}

/* SimIS CMS hero: let the scrim go before the capability strip.
   .gs-hero::after is a left-to-right scrim at inset:0, there so the headline reads over the
   artwork. On this page the artwork's lower band carries its own labels -- Secure by Design,
   Modern Development, Continuous Integration & DevOps, Quality Testing & Assurance -- which are
   part of the image, not the DOM, so the scrim dimmed them along with the background.
   Masking the scrim vertically releases the bottom fifth while leaving the headline area alone.
   Scoped to .sd-page, which only this page carries: .gs-hero is shared by seven solution pages
   and none of the others have anything in that band to protect. */
body:not(:has(.admin-web-content)) .sd-page .gs-hero::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0) 80%);
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0) 80%);
}

/* Card titles: one size across both card families.
   The services cards author their title as an h3. The product cards are reveal buttons,
   and a button's content model does not allow a heading, so those titles are a strong --
   which is why they were 18px against the h3's 28px. Matched here rather than in the
   content, because the markup cannot be made the same without invalid HTML.
   Scoped to .callout so it reaches the cards and not every h3 on the site. */
body:not(:has(.admin-web-content)) .platform-body .callout .platform-content h3,
body:not(:has(.admin-web-content)) .platform-body .callout .button-reveal-content strong {
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 800;
}

/* Trade Shows -- centre the accent under the panel headings, and match the form
   card heading weight to its sibling (it was 500 next to an 800). Scoped to this page
   the same way the .ts-boxes-row rules above are. The centred bar takes the symmetric
   gradient the .text-center variant uses; the default one-directional fade reads
   lopsided once it is centred. */
body:has(.trade-shows-panel) .ts-boxes-row .platform-content > h2::after {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
}
body:has(.trade-shows-panel) .ts-boxes-row h2.widget-title {
  font-weight: 800;
}

/* Subscribe page -- bold, centre and accent the page title, matching the treatment the
   trade-shows headings use. The base accent rule only targets h2; this page leads with an
   h1, so the pseudo-element is declared here rather than inherited. */
body:has(.subscribe-panel) .platform-content > h1 {
  font-weight: 800;
  text-align: center;
}
body:has(.subscribe-panel) .platform-content > h1::after {
  content: "";
  display: block;
  width: 150px;
  height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0), rgba(255,140,0,0));
}

/* Success callout on the subscribe panel. Foundation ships a pale-green fill that appears
   nowhere else in this palette, and the panel supplies light ink, so the stock combination
   measured 1.12:1. Re-dress it in the site accent instead of recolouring the green: faint
   orange wash, orange rule, and the same ink the panel already uses. */
body:has(.subscribe-panel) .callout.success {
  /* Opaque on purpose: the panel and card are both translucent over a photographic
     background, so a translucent fill here would make the text contrast depend on
     whatever pixels sit behind it. */
  background-color: rgb(52, 38, 30);
  border: 1px solid rgba(255, 140, 0, 0.45);
  border-left: 3px solid rgb(255, 140, 0);
  color: rgba(226, 232, 245, 0.92);
}
body:has(.subscribe-panel) .callout.success p {
  color: inherit;
}

/* Trust Center: card chrome moved from .platform-content up to its wrapper.
   The platform "Last updated" stamp renders as a SIBLING of .platform-content,
   deliberately: platform-editor.js posts .platform-content innerHTML as the
   saved content, so anything placed inside would be baked into the content
   record on the next inline edit. With the chrome on .platform-content the
   stamp fell outside the card, unpadded and body-copy sized, on the wallpaper.
   Moving the chrome up one level puts the stamp inside the card and leaves the
   editable div untouched; the >=1600px nudge moves up with it so the card and
   the stamp travel together. :has(> .platform-content) keeps this to content
   cards -- the container is also emitted by the gallery, accordion, carousel,
   tabs and events widgets, which must not gain card chrome. */
body:not(:has(.admin-web-content)) .tc-body .platform-content-container:has(> .platform-content) {
  position: relative;
  max-width: 870px;
  margin: 0 auto;
  padding: 40px 52px 34px;
  background: rgba(18, 23, 40, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(4px);
}

body:not(:has(.admin-web-content)) .tc-body .platform-content {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  left: 0;
}

@media (min-width: 1600px) {
  body:not(:has(.admin-web-content)) .tc-body .platform-content-container:has(> .platform-content) {
    left: 150px;
  }
}

/* The stamp is metadata, not body copy. Sized explicitly so the .tc-body p
   body-copy rule cannot render it at 1.15rem, and set on the paragraph with
   the small element inheriting so it is not shrunk twice. The colour over
   the card measures 7.76:1 -- passes AA. */
body:not(:has(.admin-web-content)) .tc-body .platform-content-last-updated {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-align: right;
  color: rgba(219, 227, 242, 0.72);
}

body:not(:has(.admin-web-content)) .tc-body .platform-content-last-updated small {
  font-size: inherit;
}

/* Callout text must not inherit the panel ink (contrast fix).
   .sub-page > .cell p above colours every paragraph in the panel light, which is right for the
   dark card but also reaches inside callouts -- and a callout brings its own light background.
   The result was the subscribe success and validation messages rendering light-on-light: measured
   1.12:1 on "Please verify you are human before subscribing". The callout element itself keeps the
   ink Foundation gives it per variant; only its descendants are pulled back to inherit, so they
   follow the callout rather than the panel. Restores 17.98:1. */
body:not(:has(.admin-web-content)) .sub-page > .cell .callout p,
body:not(:has(.admin-web-content)) .sub-page > .cell .callout em,
body:not(:has(.admin-web-content)) .sub-page > .cell .callout small,
body:not(:has(.admin-web-content)) .sub-page > .cell .callout li,
body:not(:has(.admin-web-content)) .sub-page > .cell .callout h1,
body:not(:has(.admin-web-content)) .sub-page > .cell .callout h2,
body:not(:has(.admin-web-content)) .sub-page > .cell .callout h3,
body:not(:has(.admin-web-content)) .sub-page > .cell .callout h4,
body:not(:has(.admin-web-content)) .sub-page > .cell .callout h5,
body:not(:has(.admin-web-content)) .sub-page > .cell .callout h6 {
  color: inherit;
}

/* Subscribe / unsubscribe result card. platform.css gives it its own light surface
   (--sc-surface) but the page paragraph rule above outranks the component's own colour
   at (0,3,2) vs (0,2,1), so the message rendered light-on-light at 1.10:1 -- invisible.
   Same shape as the .callout fix above. Pins the platform token, not a colour, so the
   card still follows a theme change. Platform-side fix is in flight (issue #1777);
   remove this block once that ships. */
.platform-subscription-result p {
  color: var(--sc-text-muted, #656970) !important;
}

/* A third-level flyout is positioned left:100%, outside its parent panel's box, so the
   overflow:hidden that clips the panel to its rounded corners painted it away entirely --
   the arrow showed (it is inside the panel) and nothing else did. :has() keeps the clipping
   on every dropdown that has no flyout, so only Solutions changes. (0,4,0) beats the
   (0,3,0) rule above it. */
.header-item .is-dropdown-submenu.is-dropdown-submenu:has(.is-dropdown-submenu) {
  overflow: visible;
}

/* The platform's .callout ink guard declares color:inherit !important at (0,1,1); a plain
   .text-white is (0,1,0) and loses, so white text asked for inside a callout came out as the
   callout's dark ink -- 1.22:1 on the navy accreditation bars. !important alone does not help
   (both are then !important and specificity decides); doubling the class takes it to (0,2,0).
   Platform fix is in flight (issue #1784); remove this block once that ships. */
.text-white.text-white {
  color: #ffffff !important;
}

/* ============================================================================
   Navigation: third-level "Depth" treatment.
   The third level was hard to notice and, once open, hard to place -- both panels
   were 280px with the same type and the same fill, so the flyout read as a second
   copy of its parent rather than a child of it.
   ============================================================================ */

/* 1. The decorative chevron sat on all nine second-level rows and only one of them
      has children, so the same glyph meant "menu item" nine times and "opens a
      submenu" once, in one panel. Hidden here; the real parent arrow comes from
      platform.css and is the only one left. */
#platform-menu .is-dropdown-submenu a > i.fa-angle-right.float-left {
  display: none;
}

/* 2. Room to breathe. At 320px nothing in the second level wraps any more. */
#platform-menu .is-dropdown-submenu.first-sub {
  min-width: 320px;
  padding: 6px;
}
#platform-menu .is-dropdown-submenu a {
  border-radius: 10px;
  padding: 10px 14px;
}
#platform-menu .is-dropdown-submenu li:hover > a {
  background: rgba(255, 255, 255, .07);
}

/* 3. A parent looks like one, and stays lit while its flyout is open, so you can
      see where you are -- the thing three levels of hover menu usually lose. */
#platform-menu .is-dropdown-submenu .is-dropdown-submenu-parent > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#platform-menu .is-dropdown-submenu .is-dropdown-submenu-parent:hover > a {
  background: #3b3b3b;
  color: var(--sc-topbar-menu-hover-text-color, #ff8c00);
}

/* 4. The flyout is a child, not a sibling: the lit parent's surface continues into
      it, with an orange edge and a connector back to the row that opened it.
      Deliberately no font-size step-down: the site rule above sets 16.5px with
      !important, and adding a second !important to beat it is the pattern that
      broke .text-white. The surface, edge and connector carry the depth cue. */
#platform-menu .is-dropdown-submenu .is-dropdown-submenu {
  background: #3b3b3b;
  border-left: 2px solid var(--sc-topbar-menu-hover-text-color, #ff8c00);
  margin-left: 6px;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .85);
}
#platform-menu .is-dropdown-submenu .is-dropdown-submenu::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 18px;
  width: 6px;
  height: 2px;
  background: var(--sc-topbar-menu-hover-text-color, #ff8c00);
}

/* 5. Two leftovers from the state styling above.

      The blue: Foundation's own .menu .is-active > a paints #1779ba, so opening a
      parent by click or keyboard gave a stock blue row while hovering it gave the
      #3b3b3b above -- two different "open" appearances, and the blue is the same
      unthemed Foundation colour issues #1775/#1776 removed from the arrow.

      The arrow: theme.topbar.menu.arrow.color pins it to a fixed colour, so it
      stayed white while its own row's text went orange. The theme colour still
      governs the resting state; on hover and while open the arrow now takes the
      colour of the label it belongs to. */
#platform-menu .is-dropdown-submenu .is-active > a {
  background: #3b3b3b;
}
#platform-menu .dropdown.menu > li.is-dropdown-submenu-parent:hover > a::after,
#platform-menu .is-dropdown-submenu .is-dropdown-submenu-parent:hover > a::after,
#platform-menu .is-dropdown-submenu .is-active > a::after {
  color: inherit;
}
/* ---- industry-news-h1 ---- /industry-news was the only page of 134 with no h1: its section title was an h2, the same rank as the article headings beneath it. The title treatment here is keyed to the h2 tag, so promoting the tag alone dropped all of it -- measured after: 40px/500, left-aligned, no accent, against 32px/800 centred with a 190px accent before. This restates that treatment for the h1, scoped to this page, the way the subscribe page already does it. The values are the measured ones, so the page looks exactly as it did. */
.industry-news-intro h1 { font-size: 32px; font-weight: 800; line-height: 38.4px; color: #ffffff; text-align: center; margin: 0 0 6.4px; }
.industry-news-intro h1::after { content: ""; display: block; width: 190px; height: 3px; margin: 14px auto 0; background: linear-gradient(90deg, rgba(255,140,0,0), rgb(255,140,0) 50%, rgba(255,140,0,0)); }