/*
Theme Name: Simplicity IT
Theme URI: https://simplicityitinc.com
Version: 2026.09.06.1
Requires at least: WordPress 6.3
Tested up to: WordPress 6.7
Requires PHP: 8.1
Text Domain: simplicity-it
Description: A dark, premium WordPress theme for Simplicity IT Inc, Microsoft Solutions Partner.
Author: Simplicity IT Inc
Author URI: https://simplicityitinc.com
*/

/* ============================================================================
   CSS CUSTOM PROPERTIES & DESIGN TOKENS
   ============================================================================ */

:root {
  /* ------------------------------------------------------------------------
     THE SIX BRAND COLOURS

     These are the palette. Everything else in this block is either a derived
     tint of one of them or an alias kept so existing rules keep working.
     theme.json carries the same six values, so the editor and the front end
     agree. If you change one here, change it there.

     Contrast, measured against the two page backgrounds:

       on Night Sky #112032   on Prussian #182C43
       White          16.45   AAA        14.19  AAA
       Ocean Green     6.42   AA          5.54  AA
       Orange          5.13   AA          4.42  large text only
       Azure           3.63   large only  3.13  large only

     Azure is the weakest of the six on dark and is limited to Microsoft
     context by decision D-4, which suits it: as a filled button with white
     text it measures 4.53 and passes, and that is mostly how it is used.
     ------------------------------------------------------------------------ */
  --sit-night-sky:     #112032;
  /* The same colour as three numbers, so it can be given a variable alpha.
     rgba() cannot take a hex token and an opacity separately, and the hero
     scrim needs exactly that: one colour, a different opacity per photograph.
     Written out rather than derived, because a relative-colour syntax that one
     browser supports and another does not would make the hero unreadable on
     the browser that does not, and unreadable is the one failure mode a scrim
     exists to prevent. Kept adjacent to the hex so the two cannot be edited
     apart. */
  --sit-night-sky-rgb: 17, 32, 50;
  --sit-prussian:      #182C43;
  --sit-ocean-green:   #46B491;
  --sit-azure:         #0078D4;
  --sit-orange:        #DC740E;
  --sit-white:         #FFFFFF;

  /* Derived tints. Each is a fixed mix of two brand colours, computed once and
     written out rather than mixed at runtime, so the value is the same in every
     browser and can be checked for contrast the same way a literal can. */
  --sit-surface:       #26394E; /* Prussian + 6% white. Raised card on a Prussian page. */
  --sit-green-light:   #6BC3A7; /* Ocean Green + 20% white. Hover only. */
  --sit-green-dark:    #398F79; /* Ocean Green + 25% Night Sky. */
  --sit-azure-light:   #4CA0E1; /* Azure + 30% white. */
  --sit-azure-dark:    #0366B4; /* Azure + 20% Night Sky. Hover on an Azure fill. */
  --sit-orange-light:  #E18932; /* Orange + 15% white. Hover only. */

  /* Status colours. Not brand colours, and deliberately not drawn from the six:
     a warning that is Ocean Green tells the reader nothing. These are tuned for
     the dark surfaces this theme actually uses and are not legible on white. */
  --sit-danger:        #FF7A7A; /* 6.52 on Night Sky, 4.68 on the card surface. */
  --sit-warning:       #F59E0B; /* 7.66 on Night Sky, 5.50 on the card surface. */
  --sit-info:          #6BA6F5; /* 6.58 on Night Sky, 4.72 on the card surface. */

  /* Aliases. The older names are used in several hundred places, so they stay,
     pointing at the canonical values. New rules should use the names above. */
  --sit-navy:          var(--sit-prussian);
  --sit-navy-dark:     var(--sit-night-sky);
  --sit-navy-card:     var(--sit-surface);
  --sit-navy-border:   rgba(70,180,145,0.15);
  --sit-green:         var(--sit-ocean-green);
  --sit-green-glow:    rgba(70,180,145,0.25);
  /* The brand green as text on the raised card surface. --sit-green itself is
     rgb(70,180,145), which is 49 percent lightness in HSL and measures between
     3.6 and 3.9 to 1 there depending on the tint over the card, short of the
     4.5 that text below 18.66px bold needs. This is the same hue and the same
     saturation with the lightness raised to 63, so it still reads as the brand
     green, and it measures 5.23 on the testimonial metric, 4.78 on the
     testimonial avatar and 6.97 on the case study badge.

     A token rather than a third hard coded copy: this value was already typed
     inline once, at .sit-case-study__badge, with the reasoning attached to that
     one occurrence only, which is how a fourth copy gets added. --sit-green is
     deliberately left alone, because it passes nearly everywhere else and
     moving it would restyle the site and invalidate every contrast measurement
     already recorded. */
  --sit-green-on-surface: #77cab0;

  /* The warning red as text on a dark surface. The theme's red is #ef4444, and
     as text it measures 4.04 on the E7 risk card and 4.25 on the section behind
     the risk label, both short of the 4.5 that 16px bold and 12px bold need,
     since the bold large text exemption does not start until 18.66px.

     The value is not new. page-resources.php already pairs a badge_color of
     #ef4444 with a badge_text of #f69696, keeping the fill saturated and
     lightening the ink, and that is the same correction those two components
     need. #f69696 measures 7.00 on the risk card and 7.43 on the section.

     A minimal correction was measured and rejected: sweeping the lightness of
     #ef4444, the first value that clears is #f15757 at exactly 4.50 on the risk
     icon. Meeting the threshold to two decimal places and no further leaves
     nothing for an antialiasing or background change to take, so the theme's
     existing lightened red is used instead.

     #ef4444 itself is deliberately left alone. Its other uses are fills,
     borders and an SVG stroke rather than text, so none of them is subject to
     the text contrast rule, and moving the token would restyle them for no
     accessibility gain. The literal in page-resources.php is left alone too:
     that file is not failing and its copy is a data value in a PHP array, not a
     CSS declaration. It is named here so it can be found rather than
     rediscovered. */
  --sit-red-on-surface: #f69696;

  --sit-white-70:      rgba(255,255,255,0.70);
  /* Measured 5.06 on Night Sky and 4.24 on --sit-surface. So this token is
     correct on the page background and wrong on a raised card, and muted body
     text on a card has to use --sit-white-70, which measures 6.70 there.

     This note used to end "Of the fifteen places this token is used, exactly
     two sat on a card and both failed; the other thirteen sit on Night Sky and
     pass." Both numbers were wrong, and they are corrected here rather than
     silently dropped. The token appears 53 times across the theme, 47 of them
     as a text colour, and a site-wide sweep found seven distinct components
     failing on the card surface, not two. Fifteen is the count in this file
     alone; most uses are in the page templates, and five of the seven failures
     were in page-e7-readiness.php.

     No count is given now, on purpose. A number here goes stale the first time
     anyone adds a use, and a stale number in a comment reads as verified. The
     two ratios and the rule they imply are what is worth recording. */
  --sit-white-50:      rgba(255,255,255,0.50);
  --sit-white-30:      rgba(255,255,255,0.30);
  --sit-white-10:      rgba(255,255,255,0.10);

  /* ------------------------------------------------------------------------
     LINK COLOURS

     These exist because `a:hover` has specificity (0,1,1) and a component
     class such as `.sit-ribbon__link` or `.sit-btn--azure` has (0,1,0). A
     component that paints its own surface can therefore set its resting text
     colour and still lose it the instant the pointer arrives, because the
     global hover rule outranks it. That is not a hypothetical: it was three of
     the eight measured contrast failures in this round, and the worst of them
     was 1.22 to 1, which is text you cannot read at all.

     Raising the component's specificity fixes one component. Indirecting the
     value fixes the class of bug: `a` and `a:hover` now read these two
     properties, and a component overrides them on itself or on any ancestor.
     Custom properties inherit and are resolved against the element's own
     inherited value, so there is no specificity contest left to lose.

     The defaults are the values the two rules used to hard-code, so every link
     on the site that does not opt out computes exactly what it did before.
     ------------------------------------------------------------------------ */
  --sit-link:          var(--sit-green);
  --sit-link-hover:    var(--sit-green-light);
  /* No web font is loaded. Decision D-2 holds these to approved fallbacks until
     licensing is confirmed, and the Google Fonts request has been removed from
     functions.php. The commercial faces stay at the front of each stack so that
     self hosting them later is a drop in change, and everything after them is a
     system font that is already on the reader's machine. */
  --sit-font-display: 'All Round Gothic', 'Sofia Pro', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sit-font-body:    'Sofia Pro', 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sit-font-mono:    'DM Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Was 6rem, which is 192 pixels of combined vertical padding. The 41-route
     survey at 1440 by 900 found that value on sections whose content measured
     between 57 and 74 percent of the band, meaning up to two fifths of the
     band was padding. 4.5rem is a quarter off, matching the reduction the
     lead-magnet pages already took, and leaves 144 pixels between adjacent
     bands. The 768 and 480 steps of this ladder are left alone below: they were
     already tighter than the flat .sit-section rule they compete with, and the
     phone problem this pass found was that rule, not this token. */
  --sit-section-pad: 4.5rem;
  --sit-container:   1280px;
  --sit-radius:      12px;
  --sit-radius-lg:   20px;
  --sit-radius-sm:   8px;
  --sit-shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --sit-shadow-glow: 0 0 40px rgba(70,180,145,0.15);
}

/* ============================================================================
   RESET & BASE STYLES
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* The hidden attribute has to actually hide things.

   A browser hides [hidden] with display: none from its own user agent sheet,
   and any author rule that sets display beats a user agent rule no matter how
   specific it is. So .sit-form__fields { display: flex } below silently
   defeated fieldset.hidden = true in the shared lead handler, and a form kept
   showing its inputs after a submission was accepted.

   The visible half of that was minor, an empty form under the success panel
   inviting a second identical submission. The other half was not: hidden is
   what takes content out of the accessibility tree, and it only does that by
   way of display: none. With display overridden the inputs stayed exposed and
   stayed in the tab order, so a keyboard user could tab into fields the page
   had already marked as gone.

   !important rather than relying on source order, because order only holds
   until the next rule is added below this one, and the failure is invisible
   on screen for anything that was hidden from the server. Nothing in this
   theme wants a hidden element rendered: at the time of writing the only
   elements carrying the attribute are .sit-form__success and
   .sit-lm__delivered, neither of which declares display, so both were already
   behaving and neither changes here. */
[hidden] {
  display: none !important;
}

body {
  background-color: var(--sit-navy-dark);
  color: var(--sit-white-70);
  font-family: var(--sit-font-body);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   CONTAINER
   ============================================================================ */

.container,
.wp-container {
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 768px) {
  .container,
  .wp-container {
    padding: 0 1rem;
  }
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sit-font-display);
  font-weight: 800;
  line-height: 1.1;
  color: var(--sit-white);
  margin-bottom: 1rem;
  margin-top: 0;
}

h1 {
  font-size: 3.5rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.75rem;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 2rem;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-bottom: 1.5rem;
  line-height: 1.75;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--sit-link);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--sit-link-hover);
}

strong,
b {
  font-weight: 700;
  color: var(--sit-white);
}

em,
i {
  font-style: italic;
}

code {
  font-family: var(--sit-font-mono);
  background-color: var(--sit-navy-card);
  color: var(--sit-azure-light);
  padding: 0.25rem 0.5rem;
  border-radius: var(--sit-radius-sm);
  font-size: 0.9em;
}

pre {
  background-color: var(--sit-navy-card);
  color: var(--sit-white-70);
  padding: 1.5rem;
  border-radius: var(--sit-radius);
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border: 1px solid var(--sit-navy-border);
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

blockquote {
  border-left: 4px solid var(--sit-green);
  padding-left: 1.5rem;
  margin-left: 0;
  margin-bottom: 1.5rem;
  color: var(--sit-white-70);
  font-style: italic;
}

ul,
ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

li {
  margin-bottom: 0.5rem;
}

/* ::marker, not :marker. The single-colon form is not a valid selector, so the
   browser discarded this rule entirely and every list marker on the site was
   rendering in the inherited body colour instead of Ocean Green. Fixed in
   L-25. */
ul li::marker,
ol li::marker {
  color: var(--sit-green);
}

/* ============================================================================
   URGENCY RIBBON
   ============================================================================ */

.sit-urgency-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #d63031 0%, #41B592 100%);
  color: var(--sit-white);
  padding: 1rem 2rem;
  text-align: center;
  font-weight: 600;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 0.95rem;
}

.sit-urgency-ribbon.hidden {
  display: none;
}

.sit-urgency-ribbon__close {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--sit-white);
  padding: 0;
  margin-left: auto;
}

.sit-urgency-ribbon__close:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .sit-urgency-ribbon {
    flex-direction: column;
    gap: 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }

  .sit-urgency-ribbon__close {
    margin-left: 0;
  }
}

/* ============================================================================
   STICKY NAVIGATION
   ============================================================================ */

.sit-header {
  position: sticky;
  top: 0;
  background-color: var(--sit-navy);
  z-index: 1000;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.sit-header.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  background-color: rgba(22, 44, 67, 0.98);
}

.sit-header__wrapper {
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sit-logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

.sit-logo__text {
  font-size: 1rem;
  line-height: 1.2;
}

.sit-nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin: 0;
}

.sit-nav__link {
  color: var(--sit-white-70);
  font-weight: 500;
  position: relative;
  padding-bottom: 0.25rem;
  transition: color 0.3s ease;
}

.sit-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--sit-green);
  transition: width 0.3s ease;
}

.sit-nav__link:hover {
  color: var(--sit-white);
}

.sit-nav__link:hover::after {
  width: 100%;
}

.sit-nav__item--solutions {
  position: relative;
}

.sit-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  min-width: 200px;
  margin-top: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 1001;
  box-shadow: var(--sit-shadow-card);
}

.sit-nav__item--solutions:hover .sit-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sit-nav__dropdown-item {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--sit-white-70);
  font-size: 0.95rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sit-nav__dropdown-item:first-child {
  border-radius: var(--sit-radius) var(--sit-radius) 0 0;
}

.sit-nav__dropdown-item:last-child {
  border-radius: 0 0 var(--sit-radius) var(--sit-radius);
}

.sit-nav__dropdown-item:hover {
  background-color: rgba(65, 181, 146, 0.1);
  color: var(--sit-white);
}

/* WordPress native sub-menu dropdown support */
.sit-nav__list .menu-item-has-children {
  position: relative;
}

.sit-nav__list .menu-item-has-children > a::after {
  content: '';

  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.sit-nav__list .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

.sit-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  min-width: 260px;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 1001;
  box-shadow: var(--sit-shadow-card);
  list-style: none;
}

.sit-nav__list .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sit-nav__list .sub-menu li {
  list-style: none;
}

.sit-nav__list .sub-menu li a {
  display: block;
  padding: 0.65rem 1.5rem;
  color: var(--sit-white-70);
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

.sit-nav__list .sub-menu li:first-child a {
  border-radius: var(--sit-radius) var(--sit-radius) 0 0;
}

.sit-nav__list .sub-menu li:last-child a {
  border-radius: 0 0 var(--sit-radius) var(--sit-radius);
}

.sit-nav__list .sub-menu li a:hover {
  background-color: rgba(65, 181, 146, 0.1);
  color: var(--sit-white);
}

.sit-cta-nav {
  display: flex;
  gap: 1rem;
}

.sit-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.5rem;
}

.sit-hamburger__line {
  width: 24px;
  height: 2px;
  background-color: var(--sit-white);
  transition: all 0.3s ease;
}

.sit-hamburger.active .sit-hamburger__line:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px);
}

.sit-hamburger.active .sit-hamburger__line:nth-child(2) {
  opacity: 0;
}

.sit-hamburger.active .sit-hamburger__line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/*
 * Everything from .sit-header__wrapper above down to the end of the block below
 * is a generation of markup this theme no longer renders. .sit-hamburger,
 * .sit-nav--mobile, .sit-cta-nav and .sit-header__wrapper appear in no template
 * in this theme or in any archived version of it. The rules are left in place
 * rather than deleted, because deleting unrelated code is not this change's job
 * and they match nothing, so they cost nothing.
 *
 * One rule in here was not harmless. This block used to open with
 *
 *     .sit-nav { display: none; }
 *
 * and .sit-nav IS rendered: it is the <nav> element in header.php that contains
 * the logo, the menu and the toggle button. So at 1024 pixels and below the
 * entire header disappeared, measured header height 0 and zero visible header
 * controls at both 768 and 360. There was no hamburger to press because the
 * hamburger was inside the thing being hidden, and the replacement the block
 * offered, .sit-nav--mobile, was never rendered by anything.
 *
 * The rule is gone. The working mobile navigation is the .sit-nav__panel block
 * further down this file, which is keyed to the class names header.php actually
 * emits and is exercised by keyboard and viewport tests.
 */
@media (max-width: 1024px) {
  .sit-cta-nav {
    display: none;
  }

  .sit-hamburger {
    display: flex;
  }

  .sit-header__wrapper {
    padding: 1rem 1.5rem;
  }

  .sit-nav--mobile {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--sit-navy-card);
    border-top: 1px solid var(--sit-navy-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 999;
  }

  .sit-nav--mobile.active {
    max-height: 500px;
  }

  .sit-nav--mobile .sit-nav__item {
    display: block;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--sit-navy-border);
  }

  .sit-nav--mobile .sit-nav__link {
    display: block;
    color: var(--sit-white-70);
  }

  .sit-nav--mobile .sit-cta-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
  }
}

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

.sit-btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: var(--sit-radius-sm);
  font-family: var(--sit-font-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  font-size: 1rem;
  line-height: 1.5;
}

/* The primary button used to be white text on Ocean Green, which measures
   2.56 to 1 and fails WCAG AA by a wide margin. It is the most used button on
   the site, so this was the largest single contrast defect in the theme. Dark
   text on the same fill measures 6.42 and passes, and it reads as more
   deliberate besides. The fill colour is unchanged. */
.sit-btn--primary {
  background-color: var(--sit-green);
  color: var(--sit-night-sky);
  border: 2px solid var(--sit-green);
}

.sit-btn--primary:hover {
  background-color: var(--sit-green-light);
  border-color: var(--sit-green-light);
  color: var(--sit-night-sky);
  box-shadow: 0 8px 20px rgba(70, 180, 145, 0.25);
  transform: translateY(-2px);
}

.sit-btn--ghost {
  background-color: transparent;
  color: var(--sit-green);
  border: 2px solid var(--sit-green);
}

.sit-btn--ghost:hover {
  background-color: rgba(70, 180, 145, 0.1);
  border-color: var(--sit-green-light);
  color: var(--sit-green-light);
}

/* White on either Azure fill: 4.53 to 1 at rest, 5.25 to 1 on the hover fill.
   The variant measured 2.50 to 1 on hover regardless, because these buttons
   are anchors and neither this block nor its :hover twin restated the colour,
   so the global a:hover repainted the label green. Pinning both link tokens
   holds the label white through every state.

   Note that .sit-btn--azure is declared a second time further down this file,
   in the button block near .sit-btn--ghost, with a different hover fill
   (#106ebe there, --sit-azure-dark here). Source order gives the later block
   the background, which is why the measured hover fill was #106ebe. Both
   values pass with white, so the duplication is recorded rather than resolved:
   collapsing two button systems into one is its own piece of work. */
.sit-btn--azure {
  background-color: var(--sit-azure);
  color: var(--sit-white);
  --sit-link: var(--sit-white);
  --sit-link-hover: var(--sit-white);
  border: 2px solid var(--sit-azure);
}

.sit-btn--azure:hover {
  background-color: var(--sit-azure-dark);
  border-color: var(--sit-azure-dark);
  box-shadow: 0 8px 20px rgba(0, 120, 212, 0.25);
  transform: translateY(-2px);
}

.sit-btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
}

.sit-btn--lg {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
}

.sit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sit-btn--loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.sit-hero {
  min-height: 90vh;
  background-color: var(--sit-navy);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(65, 181, 146, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 120, 212, 0.05) 0%, transparent 50%);
  display: flex;
  align-items: center;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.sit-hero__wrapper {
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.sit-hero__content {
  z-index: 2;
}

.sit-hero__title {
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--sit-white);
}

.sit-hero__title span {
  color: var(--sit-green);
}

.sit-hero__description {
  font-size: 1.25rem;
  color: var(--sit-white-70);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.sit-hero__cta {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.sit-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--sit-navy-border);
}

.sit-hero__stat {
  text-align: left;
}

.sit-hero__stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--sit-green);
  font-family: var(--sit-font-display);
  margin-bottom: 0.5rem;
}

.sit-hero__stat-label {
  color: var(--sit-white-70);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sit-hero__cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sit-hero__card {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 2rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.sit-hero__card:hover {
  border-color: var(--sit-green);
  box-shadow: var(--sit-shadow-glow);
  transform: translateY(-5px);
}

.sit-hero__card-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  height: 40px;
  display: flex;
  align-items: center;
}

.sit-hero__card-title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.sit-hero__card-description {
  color: var(--sit-white-50);
  font-size: 0.95rem;
}

@media (max-width: 1024px) {
  .sit-hero__wrapper {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .sit-hero__title {
    font-size: 2.75rem;
  }

  .sit-hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sit-hero {
    min-height: 60vh;
    padding: 2rem 0;
  }

  .sit-hero__wrapper {
    padding: 0 1rem;
  }

  .sit-hero__title {
    font-size: 2rem;
  }

  .sit-hero__description {
    font-size: 1rem;
  }

  .sit-hero__cta {
    flex-direction: column;
  }

  .sit-hero__stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .sit-hero__cards {
    gap: 1rem;
  }
}

/* ============================================================================
   DESIGNATION BADGES STRIP
   ============================================================================ */

.sit-badges {
  background-color: var(--sit-navy-card);
  padding: 4rem 2rem;
  border-top: 1px solid var(--sit-navy-border);
  border-bottom: 1px solid var(--sit-navy-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sit-badges__wrapper {
  max-width: var(--sit-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}

.sit-badge {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Kept in step with --sit-badge-w deliberately. This selector is `.sit-badge`
   plus an element, so it outranks the `.sit-badge__image` class rule further
   down the file and is what actually sizes the live artwork. Left as a hard
   200px it silently overrode the responsive width and pushed the image out of
   its own box below 768px. */
.sit-badge img {
  width: var(--sit-badge-w, 200px);
  height: auto;
  display: block;
}

.sit-badge--placeholder {
  color: var(--sit-white-30);
  font-size: 3rem;
  font-family: var(--sit-font-display);
}

/* There is deliberately no .sit-badge:hover rule.
   The strip is plain artwork, not a link and not a control, so it must not
   offer a hover affordance that implies otherwise. The rule that used to sit
   here faded the badge to 0.9 opacity on hover, which reads as "clickable" on
   an element that does nothing when clicked. Removed at L-98. If a verified
   Microsoft partner directory listing is ever supplied, the footer line becomes
   the link, not the badges. */

@media (max-width: 1024px) {
  .sit-badges__wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .sit-badges {
    padding: 2rem 0;
    overflow-x: auto;
  }

  .sit-badges__wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0 1rem;
    min-width: max-content;
  }
}

/* ============================================================================
   SOLUTIONS GRID
   ============================================================================ */

.sit-solutions {
  padding: var(--sit-section-pad) 2rem;
  background-color: var(--sit-navy-dark);
}

.sit-solutions__header {
  max-width: var(--sit-container);
  margin: 0 auto 3rem;
  text-align: center;
}

.sit-solutions__title {
  margin-bottom: 1rem;
}

.sit-solutions__subtitle {
  color: var(--sit-white-70);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

.sit-solutions__grid {
  max-width: var(--sit-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.sit-solution-card {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 2.5rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sit-solution-card:hover {
  border-color: var(--sit-green);
  box-shadow: var(--sit-shadow-glow);
  transform: translateY(-8px);
}

.sit-solution-card__icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  height: 60px;
  display: flex;
  align-items: center;
}

.sit-solution-card__title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.sit-solution-card__description {
  color: var(--sit-white-70);
  margin-bottom: 2rem;
  flex-grow: 1;
  line-height: 1.75;
}

.sit-solution-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sit-green);
  font-weight: 600;
  transition: all 0.3s ease;
}

.sit-solution-card__link:hover {
  color: var(--sit-green-light);
  transform: translateX(5px);
}

@media (max-width: 1024px) {
  .sit-solutions__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sit-solutions {
    padding: 3rem 1rem;
  }

  .sit-solutions__title {
    font-size: 2rem;
  }

  .sit-solution-card {
    padding: 1.5rem;
  }
}

/* ============================================================================
   AZURE MARKETPLACE OFFER CARDS
   ============================================================================ */

.sit-offers {
  padding: var(--sit-section-pad) 2rem;
  background-color: var(--sit-navy);
}

.sit-offers__header {
  max-width: var(--sit-container);
  margin: 0 auto 3rem;
  text-align: center;
}

.sit-offers__title {
  margin-bottom: 1rem;
}

.sit-offers__grid {
  max-width: var(--sit-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.sit-offer-card {
  background-color: var(--sit-navy-card);
  border: 2px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 2rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.sit-offer-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sit-green), var(--sit-azure));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sit-offer-card:hover {
  border-color: var(--sit-green);
  box-shadow: var(--sit-shadow-glow);
  transform: translateY(-8px);
}

.sit-offer-card:hover::before {
  opacity: 1;
}

.sit-offer-badge {
  display: inline-block;
  background-color: rgba(65, 181, 146, 0.2);
  color: var(--sit-green);
  padding: 0.35rem 0.75rem;
  border-radius: var(--sit-radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  width: fit-content;
}

.sit-offer-card__title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.sit-offer-card__title a {
  color: var(--sit-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.sit-offer-card__title a:hover {
  color: var(--sit-green);
}

.sit-offer-card__bullets {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.sit-offer-card__bullet {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--sit-white-70);
  font-size: 0.95rem;
}

.sit-offer-card__bullet::before {
  content: '✓';
  color: var(--sit-green);
  font-weight: 800;
  flex-shrink: 0;
}

.sit-offer-card__buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sit-offer-card__tier {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid var(--sit-navy-border);
  color: var(--sit-white-50);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  .sit-offers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sit-offers {
    padding: 3rem 1rem;
  }

  .sit-offers__grid {
    grid-template-columns: 1fr;
  }

  .sit-offer-card__buttons {
    flex-direction: column;
  }
}

/* ============================================================================
   CASE STUDIES / PROOF SECTION
   ============================================================================ */

.sit-proof {
  padding: var(--sit-section-pad) 2rem;
  background-color: var(--sit-navy-dark);
}

.sit-proof__header {
  max-width: var(--sit-container);
  margin: 0 auto 3rem;
  text-align: center;
}

.sit-proof__title {
  margin-bottom: 1rem;
}

.sit-proof__subtitle {
  color: var(--sit-white-70);
  font-size: 1.1rem;
}

.sit-proof__metrics {
  max-width: var(--sit-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.sit-metric-card {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.sit-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--sit-green);
  border-radius: var(--sit-radius) var(--sit-radius) 0 0;
}

.sit-metric-card:hover {
  box-shadow: var(--sit-shadow-glow);
  transform: translateY(-5px);
}

.sit-metric-card__number {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--sit-green);
  font-family: var(--sit-font-display);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.sit-metric-card__label {
  color: var(--sit-white-70);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  .sit-proof__metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sit-proof {
    padding: 3rem 1rem;
  }

  .sit-proof__metrics {
    grid-template-columns: 1fr;
  }

  .sit-metric-card__number {
    font-size: 2.5rem;
  }
}

/* ============================================================================
   IMPACT INFOGRAPHIC SECTION
   ============================================================================ */

.sit-infographic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 0 2rem;
}

.sit-infographic__card {
  background: linear-gradient(145deg, var(--sit-navy-card), rgba(22,44,67,0.6));
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius-lg);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sit-infographic__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sit-green), var(--sit-azure-light));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sit-infographic__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sit-shadow-glow);
}

.sit-infographic__card:hover::before {
  opacity: 1;
}

/* Ring */
.sit-infographic__ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 1.5rem;
}

.sit-infographic__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sit-infographic__ring-bg {
  fill: none;
  stroke: var(--sit-white-10);
  stroke-width: 8;
}

.sit-infographic__ring-fill {
  fill: none;
  stroke: var(--sit-green);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.sit-infographic__ring-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--sit-green);
  opacity: 0.85;
}

/* Value counter */
.sit-infographic__value {
  font-family: var(--sit-font-display);
  font-size: 3rem;
  font-weight: 800;
  color: var(--sit-white);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.sit-infographic__label {
  font-family: var(--sit-font-body);
  font-size: 0.95rem;
  color: var(--sit-white-70);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
}

/* Horizontal bar */
.sit-infographic__bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--sit-white-10);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.sit-infographic__bar {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sit-green), var(--sit-azure-light));
  transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Star rating */
.sit-infographic__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 0.5rem;
}

.sit-infographic__star {
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
}

.sit-infographic__star::before {
  content: '\2605';
  font-size: 22px;
  color: var(--sit-white-30);
  position: absolute;
  inset: 0;
}

.sit-infographic__star--full::after,
.sit-infographic__star--partial::after {
  content: '\2605';
  font-size: 22px;
  color: var(--sit-green);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sit-infographic__star--partial::after {
  width: var(--fill, 100%);
  display: inline-block;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 1024px) {
  .sit-infographic {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .sit-infographic {
    grid-template-columns: 1fr;
    max-width: 400px;
    gap: 2rem;
  }

  .sit-infographic__value {
    font-size: 2.5rem;
  }

  .sit-infographic__ring-wrap {
    width: 120px;
    height: 120px;
  }
}

/* ============================================================================
   INSIGHTS PREVIEW / BLOG CARDS
   ============================================================================ */

.sit-insights {
  padding: var(--sit-section-pad) 2rem;
  background-color: var(--sit-navy);
}

.sit-insights__header {
  max-width: var(--sit-container);
  margin: 0 auto 3rem;
  text-align: center;
}

.sit-insights__title {
  margin-bottom: 1rem;
}

.sit-insights__grid {
  max-width: var(--sit-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.sit-post-card {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sit-post-card:hover {
  box-shadow: var(--sit-shadow-glow);
  transform: translateY(-8px);
  border-color: var(--sit-green);
}

.sit-post-card__image {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--sit-navy) 0%, var(--sit-navy-card) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sit-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sit-post-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sit-post-card__tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: var(--sit-radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  width: fit-content;
}

.sit-post-card__tag--case-study {
  background-color: rgba(65, 181, 146, 0.2);
  color: var(--sit-green);
}

.sit-post-card__tag--insight {
  background-color: rgba(0, 120, 212, 0.2);
  color: var(--sit-azure-light);
}

.sit-post-card__tag--announcement {
  background-color: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.sit-post-card__title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.sit-post-card__meta {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--sit-white-50);
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .sit-insights__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sit-insights {
    padding: 3rem 1rem;
  }

  .sit-insights__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   INSIGHTS HUB / BLOG LISTING
   ============================================================================ */

.sit-hub {
  padding: 3rem 2rem var(--sit-section-pad);
  background-color: var(--sit-navy-dark);
}

.sit-hub__wrapper {
  max-width: var(--sit-container);
  margin: 0 auto;
}

.sit-hub__header {
  margin-bottom: 3rem;
}

.sit-hub__title {
  margin-bottom: 2rem;
}

/* THE STYLED FILTER CONTROL AND THE RENDERED FILTER CONTROL WERE NOT THE SAME
   CLASS, AND THE RENDERED ONE HAD NO STYLING AT ALL.

   .sit-filter-btn and .sit-hub__filters appear nowhere in any template. The
   templates that actually render a filter row, page-insights.php and
   archive.php, use .sit-filter-tab and .sit-filter-tabs. The class was renamed
   in the markup at some point and the stylesheet was never renamed with it, so
   this block has been styling nothing and the live control has been inheriting
   nothing.

   What that looked like on the page: three user-agent default buttons, light
   grey fill on black text, 65 by 19 pixels, sitting on the Night Sky background
   of /insights/. Not a subtle regression. It survived because a default button
   is still a button, so the route audit saw a 200, the screenshot suite
   photographed something that looked like a control, and the density inventory
   counted three targets under 44 pixels among 35 others.

   Extending the selectors rather than writing a parallel block, so there is one
   filter treatment in this theme instead of two that will drift apart. The dead
   half is left in place rather than deleted, because deleting it is a separate
   decision from fixing the live half.

   Target size: 128.8 by 43 at 1440 and 104.5 by 33 at 360, from the padding
   alone, against the 24 by 24 that WCAG 2.2 SC 2.5.8 asks for. */
.sit-hub__filters,
.sit-filter-tabs {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.sit-filter-btn,
.sit-filter-tab {
  padding: 0.75rem 1.5rem;
  background-color: var(--sit-navy-card);
  color: var(--sit-white-70);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius-sm);
  cursor: pointer;
  font-weight: 600;
  /* NAMED PROPERTIES, NOT "all", AND THE REASON IS THE FOCUS RING.

     This rule previously read transition: all 0.3s ease, which was harmless
     while it applied to nothing. Extending the selector to .sit-filter-tab gave
     the live control that transition, and "all" includes outline-width. The
     ACCESSIBILITY block at the end of this file draws keyboard focus as a 3px
     outline, so with "all" the ring animated in from 0: measured at 0px on the
     frame focus landed, 1px after 100ms, and 3px only after roughly 300ms.

     That is not a WCAG 2.4.7 failure, because the ring does arrive, but a focus
     indicator that fades in over a third of a second is the wrong behaviour for
     the one user who depends on it, and a keyboard user tabbing quickly through
     a row of three tabs would outrun it entirely. Nothing here wants outline
     animated. Naming the three properties that are actually meant to move keeps
     the hover fade and gives the ring back its instant appearance.

     This also had a second effect worth recording: it is why the first run of
     sit-target-size.spec.js reported a 0px focus ring on a control that has a
     3px one. A transitioned property cannot be read on the frame it changes. */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  font-size: 0.95rem;
  /* archive.php renders these as anchors and page-insights.php renders them as
     buttons, so the shared rule has to suppress the underline a button never
     had. */
  text-decoration: none;
}

/* THE ACTIVE STATE INHERITED FROM THE DEAD BLOCK WOULD HAVE FAILED WCAG 1.4.3
   THE MOMENT IT STARTED RENDERING.

   White on Ocean Green is 2.56 to 1. The label is 0.95rem at weight 600, which
   is 15.2 pixels, well below the 18.66 pixel bold threshold for large text, so
   the bar it has to clear is 4.5 to 1 and it misses by a wide margin. Nobody
   caught it because the rule has never painted a pixel.

   Night Sky on Ocean Green is 6.42 to 1, measured on the rendered control, and
   it is the same decision already taken for .sit-ribbon: on a light fill the
   theme's usual "lighten toward white" direction is the direction that loses
   legibility. The green fill against the page is 6.42 to 1 as well, so the
   selected state is identifiable by more than colour weight alone. */
.sit-filter-btn:hover,
.sit-filter-btn.active,
.sit-filter-tab:hover,
.sit-filter-tab--active {
  background-color: var(--sit-green);
  color: var(--sit-night-sky);
  border-color: var(--sit-green);
}

.sit-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1024px) {
  .sit-hub__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sit-hub {
    padding: 2rem 1rem 3rem;
  }

  .sit-hub__grid {
    grid-template-columns: 1fr;
  }

  .sit-hub__filters,
  .sit-filter-tabs {
    gap: 0.5rem;
  }

  .sit-filter-btn,
  .sit-filter-tab {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

/* ============================================================================
   SINGLE POST / ARTICLE
   ============================================================================ */

.sit-post {
  background-color: var(--sit-navy-dark);
  padding-bottom: var(--sit-section-pad);
}

.sit-post__hero {
  min-height: 60vh;
  background: linear-gradient(135deg, var(--sit-navy) 0%, var(--sit-navy-card) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.sit-post__hero-content {
  max-width: 800px;
  z-index: 2;
}

.sit-post__tag {
  display: inline-block;
  background-color: rgba(65, 181, 146, 0.2);
  color: var(--sit-green);
  padding: 0.35rem 0.75rem;
  border-radius: var(--sit-radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.sit-post__title {
  font-size: 2.75rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.sit-post__meta {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--sit-white-70);
}

.sit-post__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sit-post__body {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.sit-post__content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.sit-post__content h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.sit-post__content p {
  margin-bottom: 1.5rem;
}

.sit-post__content blockquote {
  border-left: 4px solid var(--sit-green);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--sit-white-50);
}

.sit-post__content .wp-block-image,
.sit-post__content figure {
  margin: 2rem 0;
  border-radius: var(--sit-radius);
  overflow: hidden;
}

.sit-post__content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sit-radius);
}

.sit-post__content ul,
.sit-post__content ol {
  margin-bottom: 1.5rem;
}

.sit-post__content li {
  margin-bottom: 0.5rem;
}

.sit-post__author {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sit-navy-border);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  align-items: start;
}

.sit-post__author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--sit-navy-card);
  border: 2px solid var(--sit-green);
}

.sit-post__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sit-post__author-name {
  font-size: 1.1rem;
  font-weight: 700;
}

.sit-post__author-bio {
  color: var(--sit-white-70);
  font-size: 0.95rem;
  line-height: 1.6;
}

.sit-post__related {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--sit-navy-border);
}

.sit-post__related-title {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.sit-post__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1024px) {
  .sit-post__related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sit-post__hero {
    min-height: 40vh;
    padding: 2rem 1rem;
  }

  .sit-post__title {
    font-size: 1.75rem;
  }

  .sit-post__meta {
    flex-direction: column;
    gap: 0.5rem;
  }

  .sit-post__body {
    padding: 2rem 1rem;
  }

  .sit-post__author {
    grid-template-columns: 60px 1fr;
    gap: 1rem;
  }

  .sit-post__author-avatar {
    width: 60px;
    height: 60px;
  }

  .sit-post__related-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   CONTACT PAGE
   ============================================================================ */

.sit-contact {
  padding: var(--sit-section-pad) 2rem;
  background-color: var(--sit-navy);
}

.sit-contact__wrapper {
  max-width: var(--sit-container);
  margin: 0 auto;
}

.sit-contact__header {
  text-align: center;
  margin-bottom: 3rem;
}

.sit-contact__title {
  margin-bottom: 1rem;
}

.sit-contact__subtitle {
  color: var(--sit-white-70);
  font-size: 1.1rem;
}

.sit-contact__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.sit-contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sit-form-group {
  display: flex;
  flex-direction: column;
}

.sit-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--sit-white);
  font-weight: 600;
  font-size: 0.95rem;
}

.sit-form-group input,
.sit-form-group textarea,
.sit-form-group select {
  padding: 0.75rem 1rem;
  background-color: var(--sit-navy-card);
  color: var(--sit-white);
  border: 2px solid var(--sit-navy-border);
  border-radius: var(--sit-radius-sm);
  font-family: var(--sit-font-body);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.sit-form-group input::placeholder,
.sit-form-group textarea::placeholder {
  color: var(--sit-white-30);
}

.sit-form-group input:focus,
.sit-form-group textarea:focus,
.sit-form-group select:focus {
  outline: none;
  border-color: var(--sit-green);
  box-shadow: 0 0 0 3px rgba(65, 181, 146, 0.1);
}

.sit-form-group textarea {
  resize: vertical;
  min-height: 150px;
}

.sit-form-group--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.sit-form-group--checkbox input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  /* NOT A TARGET-SIZE CORRECTION. The pointer target here is the label, which
     wraps the input and measures 468 by 27 on desktop and 250 by 80 on a phone,
     so SC 2.5.8 was never in question. This is a deformation the target-size
     audit happened to expose: the width above was not holding on small screens.

     page-partner-portal.php styles the wrapping label as a flex row, so the
     checkbox is a flex item with the default flex-shrink: 1 and min-width: auto.
     For a replaced element the automatic minimum resolves to its intrinsic
     size, 13 pixels, so once the agreement sentence stopped fitting on one line
     the box was squeezed from 20 by 20 to 13 by 20 and rendered as a visibly
     squashed rectangle at 360.

     flex: 0 0 auto is not a new judgement. .sit-form__checkbox, the other
     checkbox pattern in this theme, already carries it; this one was written
     without it. */
  flex: 0 0 auto;
}

.sit-form-group--checkbox label {
  margin-bottom: 0;
  cursor: pointer;
}

/* The label wraps the box and the sentence, so the label is the flex row and
   the group is not. page-partner-portal.php has carried an identical rule in
   its own inline block since before this one existed; the contact form needed
   the same pattern and a second page-local copy would have been the third
   place this could drift. */
.sit-form-group--checkbox label.sit-form-label--checkbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 400;
  cursor: pointer;
}

/* A consent sentence runs to two or three lines, which is where align-items:
   center stops looking deliberate: the box floats beside the middle of a
   paragraph instead of beside the line it belongs to. Aligning to the start and
   nudging the box down by the difference between the control and the cap height
   puts it where a reader expects it.

   Body weight, not 600. A permission somebody is free to decline should not be
   set heavier than the question it sits under. The colour is inherited rather
   than dimmed: optional is not the same as fine print, and text a visitor is
   asked to agree to has to stay at full contrast.

   Not a target-size change. The pointer target is the whole label, which is the
   full column width and at least one line tall. */
.sit-form-group--consent {
  align-items: flex-start;
  /* Separation from the submit button, and this one IS a 2.5.8 correction.

     #sit-contact-form is display: block with no gap, so every group butts
     directly against the next and the vertical rhythm comes from the padding
     inside each control. That reads fine when the thing above the button is a
     150 pixel textarea. It stops being fine when the thing above the button is
     a 20 pixel checkbox: measured at 1440, the box ran from y1102 to y1122 and
     Send Message started at y1121, so a 24 pixel circle centred on the box
     overlapped a 171 by 52 primary button and SC 2.5.8's spacing exception was
     lost. A person aiming at the checkbox could submit the form instead.

     16 pixels leaves the circle clear of the button by 14. Spacing rather than
     enlargement, per the owner decision of 25 August 2026 not to inflate native
     controls to clear exceptions the criterion already grants them.

     Not .sit-contact__form-submit, which carries margin-top: 1rem and would be
     the obvious place for this. That class is on no element; the button is
     .sit-form-submit. Putting the rule on the group keeps it beside the control
     it is spacing rather than on a selector that matches nothing. */
  margin-bottom: 1rem;
}

.sit-form-group--consent label.sit-form-label--checkbox {
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
}

.sit-form-group--consent input[type="checkbox"] {
  margin-top: 0.2rem;
}

.sit-contact__form-submit {
  margin-top: 1rem;
}

.sit-contact__info {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.sit-contact__info-block {
  display: flex;
  gap: 1.5rem;
}

.sit-contact__info-icon {
  font-size: 2rem;
  color: var(--sit-green);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sit-contact__info-content h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.sit-contact__info-content p {
  color: var(--sit-white-70);
  margin-bottom: 0;
}

.sit-contact__info-content a {
  color: var(--sit-green);
  transition: color 0.3s ease;
}

.sit-contact__info-content a:hover {
  color: var(--sit-green-light);
}

.sit-form-success {
  display: none;
  text-align: center;
  padding: 2rem;
  background-color: rgba(65, 181, 146, 0.1);
  border: 2px solid var(--sit-green);
  border-radius: var(--sit-radius);
}

.sit-form-success.show {
  display: block;
  animation: slideIn 0.5s ease;
}

.sit-form-success__icon {
  font-size: 3rem;
  color: var(--sit-green);
  margin-bottom: 1rem;
}

.sit-form-success__message {
  color: var(--sit-white);
  font-weight: 600;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .sit-contact__body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .sit-contact {
    padding: 3rem 1rem;
  }

  .sit-contact__title {
    font-size: 2rem;
  }
}

/* ============================================================================
   ABOUT PAGE
   ============================================================================ */

.sit-about {
  background-color: var(--sit-navy-dark);
}

.sit-about__story {
  padding: var(--sit-section-pad) 2rem;
  background-color: var(--sit-navy);
}

.sit-about__story-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.sit-about__story-title {
  margin-bottom: 2rem;
}

.sit-about__story-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.sit-about__values {
  padding: var(--sit-section-pad) 2rem;
  background-color: var(--sit-navy-dark);
}

.sit-about__values-header {
  max-width: var(--sit-container);
  margin: 0 auto 3rem;
  text-align: center;
}

.sit-about__values-title {
  margin-bottom: 1rem;
}

.sit-about__values-grid {
  max-width: var(--sit-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.sit-value-card {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.sit-value-card:hover {
  border-color: var(--sit-green);
  box-shadow: var(--sit-shadow-glow);
  transform: translateY(-5px);
}

.sit-value-card__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sit-green);
}

.sit-value-card__icon svg {
  width: 48px;
  height: 48px;
  stroke-width: 1.5;
}

.sit-value-card__title {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.sit-value-card__description {
  color: var(--sit-white-70);
  font-size: 0.9rem;
  line-height: 1.6;
}

.sit-about__metrics {
  padding: var(--sit-section-pad) 2rem;
  background-color: var(--sit-navy);
}

.sit-about__metrics-wrapper {
  max-width: var(--sit-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.sit-about__metric {
  padding: 2rem;
  border-radius: var(--sit-radius);
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
}

.sit-about__metric-number {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--sit-green);
  font-family: var(--sit-font-display);
  margin-bottom: 0.5rem;
}

.sit-about__metric-label {
  color: var(--sit-white-70);
  font-size: 0.95rem;
}

@media (max-width: 1024px) {
  .sit-about__values-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sit-about__metrics-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sit-about__story {
    padding: 3rem 1rem;
  }

  .sit-about__values {
    padding: 3rem 1rem;
  }

  .sit-about__values-grid {
    grid-template-columns: 1fr;
  }

  .sit-about__metrics {
    padding: 3rem 1rem;
  }

  .sit-about__metrics-wrapper {
    grid-template-columns: 1fr;
  }

  .sit-about__story-content p {
    font-size: 1rem;
  }
}

/* ============================================================================
   404 PAGE
   ============================================================================ */

.sit-404 {
  padding: var(--sit-section-pad) 2rem;
  background-color: var(--sit-navy);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sit-404__wrapper {
  text-align: center;
  max-width: 600px;
}

.sit-404__code {
  font-size: 6rem;
  font-weight: 800;
  color: var(--sit-green);
  font-family: var(--sit-font-display);
  margin-bottom: 1rem;
  line-height: 1;
}

.sit-404__title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.sit-404__description {
  color: var(--sit-white-70);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.sit-404__links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .sit-404 {
    padding: 3rem 1rem;
    min-height: 60vh;
  }

  .sit-404__code {
    font-size: 4rem;
  }

  .sit-404__title {
    font-size: 1.5rem;
  }

  .sit-404__links {
    flex-direction: column;
  }
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.sit-footer {
  background-color: var(--sit-navy-dark);
  border-top: 1px solid var(--sit-navy-border);
  padding: 4rem 2rem 2rem;
}

.sit-footer__wrapper {
  max-width: var(--sit-container);
  margin: 0 auto;
}

.sit-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.sit-footer__col h3 {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.sit-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sit-footer__col li {
  margin-bottom: 0.75rem;
}

.sit-footer__col a {
  color: var(--sit-white-70);
  transition: color 0.3s ease;
  font-size: 0.95rem;
}

.sit-footer__col a:hover {
  color: var(--sit-white);
}

.sit-footer__brand-info {
  color: var(--sit-white-70);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.sit-footer__social,
.sit-footer__socials {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.sit-footer__social-link {
  width: 40px;
  height: 40px;
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sit-white);
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.sit-footer__social-link:hover {
  background-color: var(--sit-green);
  border-color: var(--sit-green);
}

/* The same control, rendered by sit_social_icons() in inc/template-tags.php and
   used once, in the "Connect With Us" block on /contact/. It had no rule of any
   kind in this stylesheet, so it was an inline anchor wrapped straight around a
   20px SVG: a 20 by 20 target on desktop and 20 by 19 on a phone, where the
   line box is what decided its height.

   Box only. The icon paints with currentColor and inherits the surrounding text
   colour, and that is left exactly as it was, so nothing in the contrast record
   moves. The footer's circular fill and border are deliberately not copied
   either: this sits on a contact card rather than in the footer, and matching
   the footer's chrome here would be a design change rather than a target-size
   correction.

   44 by 44 is practical in this position, unlike the ribbon's dismiss control,
   because there is a whole card to spend it in. */
.sit-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sit-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.sit-footer__bottom {
  border-top: 1px solid var(--sit-navy-border);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.sit-footer__copyright {
  color: var(--sit-white-50);
  font-size: 0.85rem;
}

.sit-footer__legal {
  display: flex;
  gap: 2rem;
}

.sit-footer__legal-link {
  color: var(--sit-white-50);
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.sit-footer__legal-link:hover {
  color: var(--sit-white);
}

@media (max-width: 1024px) {
  .sit-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sit-footer {
    padding: 2rem 1rem 1rem;
  }

  .sit-footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sit-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .sit-footer__legal {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ============================================================================
   BOOKING CTA BANNER
   ============================================================================ */

.sit-booking-banner {
  background: linear-gradient(135deg, var(--sit-green) 0%, var(--sit-azure) 100%);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--sit-white);
}

.sit-booking-banner__wrapper {
  max-width: var(--sit-container);
  margin: 0 auto;
}

.sit-booking-banner__title {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  color: var(--sit-white);
}

.sit-booking-banner__description {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.sit-booking-banner__cta {
  display: inline-block;
}

@media (max-width: 768px) {
  .sit-booking-banner {
    padding: 2rem 1rem;
  }

  .sit-booking-banner__title {
    font-size: 1.5rem;
  }

  .sit-booking-banner__description {
    font-size: 1rem;
  }
}

/* ============================================================================
   SCROLL REVEAL ANIMATION
   ============================================================================ */

.sit-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sit-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sit-reveal--delay-1 {
  transition-delay: 0.1s;
}

.sit-reveal--delay-2 {
  transition-delay: 0.2s;
}

.sit-reveal--delay-3 {
  transition-delay: 0.3s;
}

.sit-reveal--delay-4 {
  transition-delay: 0.4s;
}

.sit-reveal--delay-5 {
  transition-delay: 0.5s;
}

/* ============================================================================
   FORMS
   ============================================================================ */

.sit-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sit-form__field {
  display: flex;
  flex-direction: column;
}

.sit-form__label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--sit-white);
  font-weight: 600;
  font-size: 0.95rem;
}

.sit-form__input,
.sit-form__select,
.sit-form__textarea {
  padding: 0.75rem 1rem;
  background-color: var(--sit-navy-card);
  color: var(--sit-white);
  border: 2px solid var(--sit-navy-border);
  border-radius: var(--sit-radius-sm);
  font-family: var(--sit-font-body);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.sit-form__input::placeholder,
.sit-form__textarea::placeholder {
  color: var(--sit-white-30);
}

.sit-form__input:focus,
.sit-form__select:focus,
.sit-form__textarea:focus {
  outline: none;
  border-color: var(--sit-green);
  box-shadow: 0 0 0 3px rgba(65, 181, 146, 0.1);
}

.sit-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.sit-form__submit {
  align-self: flex-start;
  margin-top: 1rem;
}

/* The error slot is rendered empty for every field and wired into
   aria-describedby before anything goes wrong, so an error message can appear
   without the field's accessible description changing shape mid-interaction.
   That means it has to take up no room while it is empty. */
.sit-form__error {
  color: var(--sit-danger);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.sit-form__error:empty {
  display: none;
}

.sit-form__success {
  background-color: rgba(70, 180, 145, 0.1);
  border: 2px solid var(--sit-green);
  color: var(--sit-green);
  padding: 1rem;
  border-radius: var(--sit-radius);
  text-align: center;
}

/* ----------------------------------------------------------------------------
   SHARED LEAD FORM

   Styles for template-parts/forms/lead-form.php and its field part. Colour is
   never the only signal: an invalid field gets a red border and an error
   message, and the message is what a colour blind or screen reader user acts
   on.
   ---------------------------------------------------------------------------- */

.sit-form__title {
  margin: 0 0 0.5rem;
  font-family: var(--sit-font-display);
}

.sit-form__intro {
  margin: 0 0 0.5rem;
  color: var(--sit-white-70);
}

.sit-form__fields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sit-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.sit-form__help {
  margin: 0.35rem 0 0;
  color: var(--sit-white-70);
  font-size: 0.85rem;
}

.sit-form__footnote {
  margin: 0;
  color: var(--sit-white-50);
  font-size: 0.8rem;
}

.sit-form__required {
  color: var(--sit-danger);
  margin-left: 0.15rem;
}

.sit-form__label--inline {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
}

.sit-form__checkbox {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex: 0 0 auto;
  accent-color: var(--sit-ocean-green);
}

.sit-form__input[aria-invalid="true"] {
  border-color: var(--sit-danger);
}

.sit-form__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(255, 122, 122, 0.2);
}

.sit-form__status {
  margin: 0;
  color: var(--sit-white-70);
  font-size: 0.9rem;
}

.sit-form__status:empty {
  display: none;
}

/* A form is submitting. Dim it, but leave it readable, and let the pointer say
   so. The submit button is disabled in script; this is the visible half. */
.sit-form[aria-busy="true"] .sit-form__fields {
  opacity: 0.6;
  cursor: progress;
}

/* Rendered when the lead handler is not loaded. A form that silently discards
   what someone typed is worse than no form, so the part offers an email
   address instead and this styles it as a notice rather than a failure. */
.sit-form--unavailable {
  background-color: var(--sit-surface);
  border: 2px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 1.25rem;
}

/* ----------------------------------------------------------------------------
   GATED PURCHASE LINK

   Shown by template-parts/procurement/offer-link.php when a marketplace link
   has not been verified. The note explains the detour so the substitute button
   does not read as a bait and switch.
   ---------------------------------------------------------------------------- */

.sit-offer-link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.sit-offer-link__note {
  margin: 0;
  max-width: 32ch;
  color: var(--sit-white-70);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */

.sit-breadcrumbs,
.breadcrumb {
  padding: 1rem 0;
  font-size: 0.9rem;
  color: var(--sit-white-70);
}

.sit-breadcrumbs a,
.breadcrumb a {
  color: var(--sit-green);
  text-decoration: none;
  transition: color 0.3s ease;
}

.sit-breadcrumbs a:hover,
.breadcrumb a:hover {
  color: var(--sit-green-light);
}

.sit-breadcrumbs span,
.breadcrumb span {
  margin: 0 0.5rem;
  color: var(--sit-white-50);
}

.wp-container-breadcrumbs {
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 1rem 2rem;
  font-size: 0.9rem;
  color: var(--sit-white-70);
}

@media (max-width: 768px) {
  .wp-container-breadcrumbs {
    padding: 1rem;
  }
}

/* ============================================================================
   SKIP TO CONTENT
   ============================================================================ */

.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: var(--sit-green);
  /* Dark text on the green fill. White measured 2.56 to 1 and failed.
     The resting colour here was already correct and the element still failed,
     at 1.22 to 1, because it is an <a> and the global a:hover outranked this
     rule the moment the pointer touched it. Overriding the two link tokens
     fixes the state the same way the ribbon does. */
  color: var(--sit-link);
  --sit-link: var(--sit-night-sky);
  --sit-link-hover: var(--sit-prussian);
  padding: 0.75rem 1rem;
  text-decoration: none;
  z-index: 100;
  border-radius: 0 0 var(--sit-radius-sm) 0;
  font-weight: 600;
}

.skip-to-content:focus {
  top: 0;
}

/* ============================================================================
   LOADING SPINNER
   ============================================================================ */

.sit-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--sit-white);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.sit-btn--loading .sit-spinner {
  margin-right: 0.5rem;
}

/* ============================================================================
   WORDPRESS CORE CLASSES
   ============================================================================ */

.wp-block-image {
  margin-bottom: 1.5rem;
}

.wp-block-image img {
  border-radius: var(--sit-radius);
}

.wp-block-quote {
  border-left: 4px solid var(--sit-green);
  padding-left: 1.5rem;
  margin: 0 0 1.5rem 0;
  color: var(--sit-white-70);
}

.wp-block-quote p {
  font-style: italic;
}

.wp-block-gallery {
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.wp-block-column {
  min-width: 0;
}

@media (max-width: 768px) {
  .wp-block-columns {
    grid-template-columns: 1fr;
  }
}

.wp-block-separator {
  border: none;
  border-top: 1px solid var(--sit-navy-border);
  margin: 2rem 0;
}

.has-text-color {
  color: inherit;
}

.wp-block-button__link {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background-color: var(--sit-green);
  color: var(--sit-white);
  border-radius: var(--sit-radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.wp-block-button__link:hover {
  background-color: var(--sit-green-light);
  transform: translateY(-2px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--sit-green);
  border: 2px solid var(--sit-green);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: rgba(65, 181, 146, 0.1);
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

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

  html {
    scroll-behavior: auto;
  }
}

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

@media (max-width: 1024px) {
  /* Was 4rem. Held proportional to the 4.5rem base above rather than cut to a
     round number, so the ladder keeps its shape. */
  :root {
    --sit-section-pad: 3.5rem;
  }

  h1 {
    font-size: 2.75rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  h3 {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  :root {
    --sit-section-pad: 3rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  body {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    --sit-section-pad: 2rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .sit-btn {
    width: 100%;
    text-align: center;
  }

  .sit-cta-nav {
    width: 100%;
    flex-direction: column;
  }

  .sit-cta-nav .sit-btn {
    width: 100%;
  }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  body {
    background-color: var(--sit-white);
    color: #000;
  }

  .sit-header,
  .sit-urgency-ribbon,
  .sit-booking-banner,
  .sit-footer {
    display: none;
  }

  a {
    color: #0078D4;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #000;
  }
}

/* ============================================================================
   NAVIGATION FIX: Bridge between header.php classes and CSS
   ============================================================================ */

.sit-site-header {
  position: sticky;
  top: 0;
  background-color: var(--sit-navy);
  z-index: 1000;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.sit-site-header.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  background-color: rgba(22, 44, 67, 0.98);
}

.sit-nav__container {
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.sit-nav__brand a {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sit-nav__brand img,
.sit-nav__brand .custom-logo {
  max-height: 40px;
  width: auto;
  display: block;
}

.sit-nav__brand .custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Nav menu list: horizontal */
.sit-nav__menu .sit-nav__list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sit-nav__menu .sit-nav__list .menu-item a {
  color: var(--sit-white-70);
  font-weight: 500;
  position: relative;
  padding-bottom: 0.25rem;
  transition: color 0.3s ease;
  text-decoration: none;
  font-size: 0.95rem;
}

.sit-nav__menu .sit-nav__list .menu-item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--sit-green);
  transition: width 0.3s ease;
}

.sit-nav__menu .sit-nav__list .menu-item a:hover {
  color: var(--sit-white);
}

.sit-nav__menu .sit-nav__list .menu-item a:hover::after {
  width: 100%;
}

.sit-nav__menu .sit-nav__list .current-menu-item a {
  color: var(--sit-white);
}

.sit-nav__menu .sit-nav__list .current-menu-item a::after {
  width: 100%;
}

/* Nav CTA button */
.sit-nav__actions .sit-btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

/* ---- MOBILE NAVIGATION ----------------------------------------------------
 *
 * The panel wrapper. Above the breakpoint it is an ordinary flex row holding the
 * menu and the Book a Call button, which is the layout the header always had.
 * Below the breakpoint it becomes the drop-down panel and carries both, so the
 * CTA stays reachable instead of being hidden with display:none as it was.
 *
 * The breakpoint is 1024px inclusive, matching the mandate, so an iPad in
 * portrait at exactly 1024 gets the menu control rather than a squeezed row.
 */
.sit-nav__panel {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Mobile menu control */
.sit-nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  /* rgba(255,255,255,0.50) composites to #8B95A1 over the Prussian header, which
   * measures 4.62:1 against it. WCAG 1.4.11 asks 3:1 of a UI boundary, so the
   * control has a visible edge of its own rather than relying on three thin
   * lines to imply one. */
  border: 1px solid var(--sit-white-50);
  border-radius: var(--sit-radius-sm);
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  color: var(--sit-white);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  /* 44px minimum in both directions. Anything smaller is a target most thumbs
   * miss, and this is the only way into the menu on a phone. */
  min-height: 44px;
  min-width: 44px;
}

.sit-nav-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sit-nav-toggle__icon {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--sit-white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* The open state turns the three bars into a cross. It keys off aria-expanded
 * rather than a second class, so the visual state cannot drift away from the
 * state announced to assistive technology: there is only one source of truth. */
.sit-nav-toggle[aria-expanded="true"] .sit-nav-toggle__icon:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sit-nav-toggle[aria-expanded="true"] .sit-nav-toggle__icon:nth-child(2) {
  opacity: 0;
}

.sit-nav-toggle[aria-expanded="true"] .sit-nav-toggle__icon:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.sit-nav-toggle:hover {
  border-color: var(--sit-green);
}

.sit-nav-toggle:focus-visible {
  outline: 3px solid var(--sit-green);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .sit-nav-toggle {
    display: inline-flex;
  }

  /* The panel is hidden with display:none, not with max-height or opacity or a
   * transform off-screen. Every one of those leaves the links in the tab order
   * while they are invisible, which is how a keyboard user ends up tabbing
   * through a menu they cannot see. display:none removes them from the tab
   * order as well as from the page, and it is the only one of the four that
   * does both. The cost is that the open cannot be animated, which is a fair
   * trade for a control that works. */
  .sit-nav__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background-color: var(--sit-navy);
    border-top: 1px solid var(--sit-white-10);
    padding: 0.5rem 1.5rem 1.5rem;
    /* Above the sticky header's own children and above page content, but below
     * the cookie banner, which must stay reachable. */
    z-index: 1002;
    /* A long menu on a short phone in landscape has to scroll rather than run
     * off the bottom of the screen with no way to reach the last item. */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    /* Belt and braces against horizontal overflow: the panel is bounded by the
     * viewport on both sides and nothing inside it may push wider. */
    max-width: 100%;
  }

  .sit-nav__panel.is-open {
    display: flex;
  }

  .sit-nav__menu {
    width: 100%;
  }

  .sit-nav__menu .sit-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .sit-nav__menu .sit-nav__list .menu-item {
    width: 100%;
    border-bottom: 1px solid var(--sit-white-10);
  }

  .sit-nav__menu .sit-nav__list .menu-item a {
    display: block;
    font-size: 1.0625rem;
    /* 44px tall rows. The underline pseudo-element the desktop nav uses is
     * suppressed below, because a 2px bar sliding under a full-width row reads
     * as a divider rather than as a hover cue. */
    padding: 0.875rem 0;
    min-height: 44px;
  }

  .sit-nav__menu .sit-nav__list .menu-item a::after {
    content: none;
  }

  /* Sub-menus flatten into the list instead of floating. The desktop rules
   * position them absolutely and reveal them on :hover, and hover does not
   * exist on a touch screen, so on a phone those rules make a whole level of
   * the site unreachable. Indented and always visible is worse-looking and
   * strictly more usable. */
  .sit-nav__menu .sit-nav__list .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0 0 0 1rem;
    border: none;
    box-shadow: none;
    background-color: transparent;
  }

  .sit-nav__menu .sit-nav__list .menu-item-has-children:hover > .sub-menu {
    transform: none;
  }

  .sit-nav__menu .sit-nav__list .sub-menu li a {
    white-space: normal;
    padding: 0.75rem 0;
    min-height: 44px;
    font-size: 1rem;
  }

  /* The parent of a sub-menu keeps its caret but must not swallow the tap. On
   * desktop the caret means "hover me"; here every level is already open, so
   * the caret is removed and the parent link behaves like any other link. */
  .sit-nav__menu .sit-nav__list .menu-item-has-children > a::after {
    content: none;
  }

  .sit-nav__actions {
    display: block;
    width: 100%;
    padding-top: 1rem;
  }

  .sit-nav__actions .sit-btn {
    display: block;
    width: 100%;
    text-align: center;
    min-height: 44px;
  }
}

/* ============================================================================
   COMPREHENSIVE CSS OVERRIDES FOR TEMPLATE CLASS NAMES
   Bridges HTML template classes to design system styles
   ============================================================================ */

/* ---- GENERAL LAYOUT ---- */

.sit-container {
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Section 4 asks to tighten oversized gaps and reduce excessive section
   padding while preserving readability. This rule is the site's single largest
   contributor to vertical space, and the measurement that led here is worth
   recording because it found something other than "4rem looks big".

   THE TWO PADDING SYSTEMS WERE INVERTED AGAINST EACH OTHER ON PHONES.

   The theme has two ways of setting a band's vertical padding. --sit-section-pad
   carries a full responsive ladder near the top of this file, stepping 6rem,
   4rem at 1024, 3rem at 768 and 2rem at 480. This rule had no media override
   anywhere in the stylesheet. The consequence at a 360px viewport was that a
   token-driven band paid 64 pixels of combined padding while a plain .sit-section
   band paid 128, twice as much, on a screen with a fifth of the vertical room.
   A survey of all 41 routes at 360 by 740 measured a median of 128 and a maximum
   of only 140, which is this flat rule having quietly become the ceiling on the
   viewport where space is scarcest.

   So the fix is not only a smaller number. It is the missing ladder, set to the
   same breakpoints --sit-section-pad already uses so the two systems step
   together instead of crossing over.

   WHY THE LADDER IS HERE AND NOT WITH THE OTHER ONE

   The :root steps live inside the RESPONSIVE UTILITIES media queries earlier in
   this file. Putting these overrides there too would read better and would do
   nothing at all: a media query adds no specificity, so a .sit-section rule at
   line 3030 loses on source order to the .sit-section rule below it. They sit
   immediately after the rule they modify for that reason.

   The 2.25rem step at 768 is not a new judgement. It is the value the three
   lead-magnet pages already use, chosen and reasoned in the .sit-lm block near
   the end of this file; extending it to the rest of the site makes those pages
   consistent with everything else rather than an exception.

   Heroes are unaffected on the .sit-hero shape, which sets its own 4rem 0 2rem
   later in this file and wins on source order. The .sit-section--hero shape has
   no padding rule of its own and does inherit the reduction, which is intended:
   both shapes carry min-height: clamp(320px, 42vh, 460px), so a short hero is
   floored by that clamp rather than by its padding. */
.sit-section {
  padding: 3rem 0;
}

@media (max-width: 1024px) {
  .sit-section {
    padding: 2.75rem 0;
  }
}

@media (max-width: 768px) {
  .sit-section {
    padding: 2.25rem 0;
  }
}

@media (max-width: 480px) {
  .sit-section {
    padding: 2rem 0;
  }
}

.sit-section__header {
  text-align: center;
  margin-bottom: 3rem;
}

.sit-section__title {
  color: var(--sit-white);
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  font-family: var(--sit-font-display);
}

.sit-section__subtitle {
  color: var(--sit-white-70);
  font-size: 1.125rem;
}

/* ---- RIBBON BANNER ---- */

/* The ribbon is the one full-width band on the site with a light fill, and it
   was written as white on Ocean Green, which measures 2.56 to 1. It is the
   first thing on every page, so that one pairing was three of the eight
   measured failures and it repeated on all thirty-two routes.

   Night Sky on Ocean Green measures 6.42 to 1, the same figure the primary
   button already relies on, so the fix is the pairing the theme had already
   settled on elsewhere rather than a new colour. Setting it on the container
   carries it to the text, the link and the dismiss control at once: the SVG in
   the dismiss button strokes with currentColor, so it followed the container's
   white and sat at 2.56 as a 20px graphic, below the 3:1 that WCAG 1.4.11 asks
   of a control's only visual identifier. The contrast sweep never reported
   that one, because the button holds no text node for it to measure. */
.sit-ribbon {
  background: var(--sit-green);
  color: var(--sit-night-sky);
  /* Both link states, so the global a:hover cannot repaint a link that sits on
     this fill. See the LINK COLOURS note in the token block. Hover darkens to
     Prussian, 5.54 to 1, because on a light fill the theme's usual "hover
     lightens" direction is the direction that loses legibility. */
  --sit-link: var(--sit-night-sky);
  --sit-link-hover: var(--sit-prussian);
  padding: 0.5rem 0;
  font-size: 0.875rem;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  /* THIS NUMBER WAS CUTTING THE RIBBON'S ONLY CALL TO ACTION OFF EVERY PHONE.
     max-height exists here purely to give the dismiss transition a finite value
     to animate from, because .sit-ribbon--hidden below animates it to 0 and a
     transition cannot run from "auto". It is not a design height, and nothing
     wants the bar capped in its open state. At 60px it was capping it anyway.
     On a 360px viewport the sentence wraps to three lines, so the container
     measures 89.5px, and overflow: hidden was clipping the last 29.5px of it.
     That clipped band contained the whole "Learn More" link. Clipping removes
     an element from hit testing as well as from paint, so elementFromPoint at
     the link's own centre returned the navigation container underneath it: the
     link was not merely hard to see on a phone, it was unreachable. Raised to a
     value comfortably above the tallest real content at any supported width, so
     the open state is never capped and the dismiss transition still has a
     number to animate from. Setting it higher costs nothing, because max-height
     caps a height and does not set one; the desktop bar stays at 40.5px.
     Keep this declaration ABOVE .sit-ribbon--hidden. Both selectors are one
     class deep, so the hidden state only wins on source order, and moving this
     rule below it would stop the ribbon dismissing at all. */
  max-height: 200px;
  overflow: hidden;
}

.sit-ribbon--hidden {
  max-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.sit-ribbon__container {
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sit-ribbon__text {
  margin: 0;
  /* A flex item's automatic minimum size is its longest unbreakable word, so
     without this the sentence refuses to shrink past that width and the row
     overflows to the right instead. That was invisible while the dismiss button
     was 20px wide and appeared the moment it was widened to 44: the button slid
     16px right on a 360 viewport, past the container's own padding, and its
     target ended 4px from the screen edge. Letting the sentence shrink puts the
     button back on the padding edge where it was. */
  min-width: 0;
}

.sit-ribbon__link {
  color: var(--sit-link);
  font-weight: 700;
  text-decoration: underline;
}

/* WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA, adopted for this build by
   owner decision on 25 August 2026. This control was the named example: a 20px
   SVG in a button with padding: 0, so its target measured 20 by 20 on all 41
   routes at every viewport, against a 24 by 24 minimum.

   It did technically satisfy the criterion's spacing exception, because nothing
   else sits within 24 pixels of it. That exception is real but thin: it holds
   only for as long as nobody puts anything near the control, and it is not the
   reason this button is small. The button is small because it was never given
   any padding. Corrected rather than excepted, for that reason.

   THE TWO NUMBERS BELOW ARE TIED TO .sit-ribbon's OWN PADDING AND MUST MOVE WITH IT.

   The bar is 40.5px tall: a 24.5px line box plus 0.5rem of padding top and
   bottom. min-height: 40px fills that box almost exactly, and margin: -8px
   cancels the bar's padding so the flex row, and therefore the bar, keeps the
   height it had. min-width: 44px widens the target and the -12px horizontal
   margins take the extra width back out of layout, so the outer box stays 20px
   wide exactly as before and the icon does not move by a pixel. Verified:
   the icon centre is 1318, 20.3 at 1440 and 318, 44.8 at 360, before and after.

   Growing the bar instead would have been the simpler edit and the wrong one.
   It would have cost about 20 pixels above the fold on every page, immediately
   after row L-74 spent a pass recovering that kind of space, for a control
   nobody is meant to use twice.

   The owner's preference is 44 by 44 where practical. 44 by 40 is what fits
   inside a 40.5 pixel bar without either making the bar taller or letting the
   target hang off the top of the document, and 40 is well clear of the 24 the
   criterion asks for. */
.sit-ribbon__close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  min-height: 40px;
  margin: -8px -12px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- HERO SECTION ---- */

.sit-hero {
  padding: 4rem 0 2rem;
  background: var(--sit-navy-dark);
}

/*
 * The homepage eyebrow and headline are laid out against the whole container
 * rather than against half of it. The measurements are in the comment in
 * front-page.php; the short version is that `.sit-hero__grid` below is
 * `1fr 1fr`, which pins the left column at 576px at every desktop width
 * including 1920px, and 137 characters set at 56px in 576px comes out as eight
 * lines averaging sixteen characters with a badly see-sawing rag.
 *
 * Both rules are inside a `min-width` query, and that is load-bearing rather
 * than tidy. `.sit-hero__head .sit-hero__title` is (0,2,0) while the rule that
 * shrinks the headline to 2.5rem at `max-width: 768px` is (0,1,0), so an
 * unscoped version would outrank it and hold the headline at desktop size on a
 * phone. Staying above the breakpoint means the two never compete.
 */

/*
 * The size floor stops at 769 rather than 1025 because the headline is already
 * full width from 1024 down: `.sit-hero__grid` collapses to a single column at
 * `max-width: 1024px`. Leaving this at 1025 produced a step in the wrong
 * direction, 48px at 1025 and 56px at 1024, so the type grew as the window
 * narrowed. At 1024 the 56px setting also broke 137 characters into five lines
 * ragged 51, 32, 176, 56 with "matter." alone on the last one.
 *
 * Scoped to the head rather than set on `.sit-hero__title` directly, because
 * that class is shared with the inner-page hero where the headline is short and
 * 3.5rem is correct.
 */
@media (min-width: 769px) {
  .sit-hero__head .sit-hero__title {
    font-size: 3rem;
  }
}

/*
 * The extra gap below the head is desktop-only, because from 1024 down the grid
 * is a single column and the head sits directly above the subtitle, where the
 * headline's own 1.5rem is already the right gap and always has been.
 *
 * `.sit-hero__head` carries no padding or border, so the headline's
 * `margin-bottom: 1.5rem` collapses with this one. The gap below the head is
 * therefore the larger of the two, 2.5rem, not their sum.
 */
@media (min-width: 1025px) {
  .sit-hero__head {
    margin-bottom: 2.5rem;
  }
}

.sit-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* White rather than Ocean Green, for the reason set out in full at the hero
   ghost-button override. Short version: this eyebrow sits on the hero
   photograph at 12.8px, where Ocean Green composites to 3.195:1 against a
   4.5:1 requirement, and white reaches 8.184 to 8.313:1 over the same twelve
   solved grounds. Approved by Ameer on 24 August 2026.

   The eyebrow keeps its separation from the headline below it by size, weight
   and letter-spacing rather than by hue. It is 12.8px at 600 with 0.15em
   tracking against a headline several times its size, so removing the colour
   difference does not make the two read as one block. */
.sit-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sit-white);
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.sit-hero__title {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--sit-white);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  font-family: var(--sit-font-display);
}

.sit-hero__subtitle {
  font-size: 1.125rem;
  color: var(--sit-white-70);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.sit-hero__ctas {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.sit-hero__stats {
  display: flex;
  gap: 2rem;
  flex-wrap: nowrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
}

.sit-hero__stat strong {
  font-size: 1.5rem;
  color: var(--sit-green);
  display: block;
}

/* --sit-white-70 rather than --sit-white-50, and the reason is measured.
   These labels sit on the hero photograph on desktop, where white-50
   composites to 3.406:1 against the solved grounds and fails AA at 12.8px.
   White-70 measures 5.001 to 5.041 across all twelve solved hero grounds and
   8.621:1 on the flat Night Sky band the labels sit on at mobile, so it clears
   4.5:1 everywhere this rule can apply.

   The strong above is left alone deliberately. It is Ocean Green at 24px and
   700 weight, which is large text, so its 3.2:1 is measured against the 3:1
   large-text threshold and passes. Changing it to match the label would be
   tidiness rather than a fix. */
.sit-hero__stat span {
  font-size: 0.8rem;
  color: var(--sit-white-70);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sit-hero__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.sit-hero__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--sit-radius);
  padding: 1.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: block;
  color: inherit;
}

.sit-hero__card:hover {
  border-color: var(--sit-green);
  transform: translateY(-2px);
}

.sit-hero__card-icon {
  color: var(--sit-green);
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.sit-hero__card-title {
  color: var(--sit-white);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

/* --sit-white-70, not --sit-white, and the difference is deliberate.

   Ocean Green measured 3.195:1 here over the hero grounds at 12.8px and had to
   go. The card title directly above this line is already var(--sit-white), so
   painting the description white as well would erase the only remaining signal
   that one is a heading and the other is its supporting line. White-70
   measures 5.001 to 5.041 over all twelve solved grounds, which clears 4.5:1
   with the margin this project asks for, and it keeps the two lines visibly
   ranked. Approved by Ameer on 24 August 2026. */
.sit-hero__card-desc {
  color: var(--sit-white-70);
  font-size: 0.8rem;
}

/* ---- BADGES STRIP ---- */

.sit-badges-strip {
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * The white panel. This is the explicit component that replaces the two
 * !important overrides in functions.php, one of which was a :has() rule that
 * painted the entire surrounding <section> and made its heading and paragraph
 * invisible on /about/ and /solutions/.
 *
 * The rule that matters is the second one: a component that sets its own
 * background must also set its own foreground. Everything inside this panel is
 * on white, so every text colour inside it is declared here against white
 * rather than inherited from a dark page.
 */
/*
 * Badge width and clear space are one calculation, not two numbers.
 *
 * Microsoft's badge usage guide (AI Cloud Partner Program, March 2024) sets two
 * hard constraints, and both are expressed relative to the artwork rather than
 * in absolute page pixels, so they are derived here rather than typed:
 *
 *   Minimum size. Page 16 gives the solution area badge minimum twice, as
 *   "1.75 inches or 168 pixels" in the body text and as "1.8 inches / 130px" in
 *   the diagram. Those are the same physical size quoted at 96dpi and at 72dpi.
 *   168px is the stricter pixel figure, so it is the floor used here.
 *
 *   Clear space. Two Microsoft symbol heights on every side, including from the
 *   edge of the asset the badge sits on. The symbol is not a fixed pixel size,
 *   it scales with the badge, so the ratio was measured from the supplied
 *   artwork: the symbol occupies 136px of vertical space in a 1043px wide
 *   badge, which is 0.1304 of the badge width. Two of those is 0.2608.
 *
 * Expressing it this way means changing --sit-badge-w at a breakpoint moves the
 * spacing with it and cannot silently fall out of compliance. The previous
 * values were a 2rem gap and 1.5rem of side padding, both well under the 52.2px
 * that a 200px badge requires.
 */
/*
 * The container is a WRAPPING ROW, and its two flex items are the two tier
 * groups, not the four badges.
 *
 * Owner decision, 27 August 2026, superseding the column of 26 August 2026:
 * "The badges should be on one row", in the order Microsoft Cloud, AI Business
 * Solutions, Cloud & AI Platforms, Security. That is already the order
 * sit_designation_badges() emits, so nothing in the markup moved. Only this
 * axis changed.
 *
 * WHY THE TIER GROUPS SURVIVE THE FLATTENING. The 26 August decision that
 * Microsoft Cloud is the top level recognition rather than a fourth peer
 * designation still stands, and the current mandate still protects it. What
 * changed is how it is drawn, not what is claimed. So the two role="group"
 * wrappers stay, with real boxes and real accessible names, and the row is
 * achieved by laying the groups out side by side rather than by dissolving
 * them. display:contents would have dissolved them into direct flex items and
 * given tidier wrapping at 768, and it was rejected: whether an element with
 * display:contents is still exposed to assistive technology has been a browser
 * bug for years and is not uniform, and the semantics here are the part that
 * must not be gambled on browser behaviour.
 *
 * WHY NESTING DOES NOT BREAK THE CLEAR SPACE MEASUREMENT. A flex item sits
 * flush against its container's CONTENT box by definition, so measuring a badge
 * to the content box always returns 0 and would report clear space missing
 * precisely because it is present. badge-guideline-compliance.js measures to the
 * BORDER box for that reason, and the chain still holds with a group in between:
 * badge to group edge is 0, group edge to container content box is 0, content
 * box to border box is the padding, which is the clear space. Nothing is lost by
 * the extra level.
 *
 * WHY ONE VALUE IS USED THREE TIMES. --sit-badge-clear is the container padding
 * on all four outer edges, the gap between the two tier groups, and the gap
 * between badges inside a group. Every side of every badge therefore keeps its
 * two symbol heights, whatever the row wraps to and whichever breakpoint changed
 * the badge width. flex `gap` covers wrapped lines on both axes, so this holds
 * when the panel is one line and when it is four.
 *
 * WHERE ONE ROW IS ARITHMETICALLY IMPOSSIBLE. Four badges across need five
 * units of clear space: the padding either side and the three gaps between
 * them. At 0.2608 badge widths each that is 5.304 badge widths in total.
 * Microsoft's floor for a solution area badge is 168px, so the narrowest four
 * across can ever be is 891.1px of panel, and .sit-container takes 92px of the
 * viewport before the panel gets any: 2rem on the left and the 60px chat
 * launcher lane on the right. Below roughly 983px of viewport the row wraps no
 * matter what is written here, and forcing it flat would mean drawing badges
 * under the floor. It wraps, and reading order is preserved when it does. See
 * the badge row breakpoint in the responsive overrides for the full budget.
 */
.sit-badges-strip__container {
  --sit-badge-w: 200px;
  --sit-badge-clear: calc(var(--sit-badge-w) * 0.2608);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sit-badge-clear);
  background-color: var(--sit-white);
  border-radius: var(--sit-radius);
  padding: var(--sit-badge-clear);
  margin: 1rem auto;
  max-width: 1280px;
  /* Microsoft badge artwork is supplied on white. The panel exists so the
     badges sit on the background they were drawn for, and it satisfies the
     guide's rule against busy, textured, photographic or low contrast
     backgrounds. */
  color: var(--sit-prussian);
}

/* The tier groups. Identical layout, different contents, kept as two selectors
   rather than one shared class because the wrappers also carry role="group" and
   distinct accessible names, and a reviewer reading the stylesheet should be
   able to see that both tiers exist.

   These are the two flex items of the row above. On a wide screen they sit side
   by side, the recognition group contributing one badge and the designation
   group contributing three, and the result reads as the single row of four the
   owner asked for on 27 August 2026.

   flex-wrap stays on, on both levels. The container wraps between the two
   groups; each group wraps between its own badges. At 768 the container has
   610.1px of content and the two groups want 860.8px, so the recognition group
   takes the first line and the designation group takes the second, where it has
   room for 2 of its 3 badges and puts Security on a third line. Security is
   still at the end and still out from between the two badges it matches in
   height. Shrinking to force fewer lines was rejected for the same reason as
   before: 3 designation badges fit at about 170px, which clears Microsoft's
   168px floor by 2px and is not a margin worth having. */
.sit-badges-strip__recognition,
.sit-badges-strip__designations {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sit-badge-clear);
  flex-wrap: wrap;
  max-width: 100%;
}

.sit-badges-strip__container .sit-badge__placeholder {
  /* #182C43 on #E8ECF0 measures 11.84:1. The placeholder used to be
     rgba(255,255,255,0.5) on rgba(255,255,255,0.1), which over this white panel
     composited to near-white on near-white and measured 1:1. It was the single
     worst contrast result on the site and it appeared 48 times across three
     routes. */
  background: #E8ECF0;
  color: var(--sit-prussian);
  border: 1px solid #C6CFD8;
}

/* flex-basis rather than width, with shrink off, because a flex item with
   width:200px still shrinks below it when the row is short of space. That is
   exactly how the 168px minimum would get breached without anything looking
   broken. With shrink off the row wraps instead, which is safe. The fallback
   covers a .sit-badge rendered outside the strip container, where the custom
   property would not be inherited. */
.sit-badge {
  flex: 0 0 var(--sit-badge-w, 200px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sit-badge__image {
  width: var(--sit-badge-w, 200px);
  height: auto;
  display: block;
}

.sit-badge__placeholder {
  width: 120px;
  height: 120px;
  border-radius: var(--sit-radius-sm);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
}

/* ---- SOLUTIONS GRID ---- */

.sit-solutions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sit-solution-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--sit-radius);
  padding: 2rem;
  transition: all 0.3s ease;
}

.sit-solution-card:hover {
  border-color: var(--sit-green);
  transform: translateY(-4px);
}

.sit-solution-card__icon {
  color: var(--sit-green);
  margin-bottom: 1rem;
  font-size: 2rem;
}

.sit-solution-card__title {
  color: var(--sit-white);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.sit-solution-card__desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.sit-solution-card__link {
  color: var(--sit-green);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sit-solution-card__link:hover {
  color: var(--sit-green-light);
}

/*
 * A hub card whose detail page has not been published keeps its name, icon and
 * description and drops its link. The hover treatment on .sit-solution-card is
 * an affordance rather than decoration: the lift, the green border and the glow
 * all say "this is clickable". On a card that is not, they are a quiet lie, and
 * the visitor finds out by clicking a card that does nothing.
 *
 * This sits here, after the last .sit-solution-card:hover rule in the file, on
 * purpose. Both hover rules have the same specificity as this one, so source
 * order decides, and the value below is the same border colour the base rule
 * two blocks up already sets. Moving this rule earlier silently disables it.
 */
.sit-solution-card--unlinked:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transform: none;
}

.sit-solutions__footer {
  text-align: left;
  margin-top: 2rem;
}

.sit-solutions__more {
  color: var(--sit-green);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sit-solutions__more:hover {
  color: var(--sit-green-light);
}

/* ---- PROOF / METRICS SECTION ---- */

.sit-proof {
  background: transparent;
}

.sit-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}

.sit-proof__card {
  padding: 2rem;
}

.sit-proof__metric {
  font-size: 3rem;
  font-weight: 800;
  color: var(--sit-green);
  margin-bottom: 0.75rem;
  font-family: var(--sit-font-display);
}

.sit-proof__desc {
  color: var(--sit-white-70);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---- INSIGHTS / BLOG PREVIEW ---- */

.sit-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sit-insight-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--sit-radius);
  padding: 2rem;
  transition: all 0.3s ease;
}

.sit-insight-card:hover {
  border-color: var(--sit-green);
  transform: translateY(-4px);
}

.sit-insight-card__tag {
  background: rgba(65, 181, 146, 0.15);
  color: var(--sit-green);
  padding: 0.25rem 0.75rem;
  border-radius: var(--sit-radius-lg);
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1rem;
}

.sit-insight-card__title a {
  color: var(--sit-white);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}

.sit-insight-card__title a:hover {
  color: var(--sit-green);
}

.sit-insight-card__meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.sit-insight-card__excerpt {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.sit-insight-card__link {
  color: var(--sit-green);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sit-insight-card__link:hover {
  color: var(--sit-green-light);
}

.sit-insights__footer {
  text-align: left;
  margin-top: 2rem;
}

.sit-insights__more {
  color: var(--sit-green);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sit-insights__more:hover {
  color: var(--sit-green-light);
}

/* ---- CTA BANNER ---- */

/* The closing band is the second full-width light fill on the site, and it had
   the ribbon's problem for the same reason: white text on Ocean Green, 2.56 to
   1, on the twenty-one routes that close with it. That was half of every
   failing row the site-wide sweep found.

   Night Sky on Ocean Green measures 6.42 to 1, which is the ribbon's fix and
   the pairing the banner's own buttons already use, so nothing new is
   introduced. The three text colours below were white, 90 percent white and
   --sit-white-70; measured on the painted fill those are 2.56, 2.35 and 1.96,
   so the muted variants were worse than the plain one and none of them could be
   kept. On a mid green, lightening the ink is the direction that loses. All
   three are now solid, and the hierarchy is carried by 2.5rem at weight 800
   against 0.9375rem at weight 400, which it largely was already.

   None of this is what reached the screen before. A wp_head block in
   functions.php forces color: #ffffff !important on every p, span and heading
   in here, so all three computed a flat white whatever was declared. That block
   has been corrected to the same Night Sky, and these declarations are
   corrected as well so that removing it later cannot quietly restore a 2.56 to
   1 banner. Same reasoning as the .sit-btn--light note further down. */
.sit-cta-banner {
  background: var(--sit-green);
  color: var(--sit-night-sky);
  /* The functions.php selector excludes `a`, and the site default --sit-link is
     --sit-green, which on this fill is green on green. No anchor in this banner
     is currently anything but an .sit-btn, which the actions rule below already
     paints, so this changes nothing today; it closes the one gap neither rule
     covers. Hover darkens to Prussian, 5.54 to 1, because on a light fill the
     theme's usual "hover lightens" direction is the one that loses legibility.
     See the LINK COLOURS note in the token block. */
  --sit-link: var(--sit-night-sky);
  --sit-link-hover: var(--sit-prussian);
  padding: 4rem 0;
  text-align: center;
}

.sit-cta-banner__title {
  color: var(--sit-night-sky);
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  font-family: var(--sit-font-display);
}

.sit-cta-banner__subtitle {
  color: var(--sit-night-sky);
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.sit-cta-banner__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* This descendant selector outranks .sit-btn--primary, so a primary button
   placed inside the CTA banner is styled from here and not from the primary
   rules further down. Correcting .sit-btn--primary alone would have missed it.

   Green text on white measures 2.56 to 1, the same failing figure as white on
   green, because contrast is symmetric. The fill stays white so the button
   still reads as a white pill against the green banner; only the label colour
   changes, to night sky, which measures 14.19 to 1 on white. */
.sit-cta-banner__actions .sit-btn {
  background: var(--sit-white);
  color: var(--sit-night-sky);
  font-weight: 700;
  padding: 0.875rem 2rem;
  border-radius: var(--sit-radius-sm);
}

.sit-cta-banner__actions .sit-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* Same 2.56 to 1 pairing as the banner button above, inverted. In practice
   this variant is only ever used alongside .sit-btn--primary, which is
   declared later and wins, so the failing colour never reached the screen.
   It is corrected anyway rather than left as a trap for the next use. */
.sit-btn--light {
  background: var(--sit-white);
  color: var(--sit-night-sky);
}

.sit-btn--light:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* ---- BUTTON STYLES ---- */

.sit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--sit-radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  font-family: var(--sit-font-body);
}

/* This is the SECOND definition of .sit-btn and .sit-btn--primary in this
   file. The first is at the top of the BUTTONS section, and it was already
   corrected to dark text on green with a comment explaining why. That
   correction was dead the moment it was written, because this block comes
   later at equal specificity and wins, and it set color: var(--sit-white).
   White on Ocean Green measures 2.56 to 1 against a 4.5 requirement, so every
   primary button on the site was failing while the file contained a comment
   claiming the opposite.

   Both blocks now say the same thing. The duplicate is left in place rather
   than deleted: this block also redefines .sit-btn's display, padding and
   alignment, so the layout of every button on the site currently comes from
   here and removing it would change spacing everywhere. Merging the two is a
   separate piece of work with its own regression surface.

   Measured with the page's own computed colours, night sky on each fill:
     base      #112032 on #46B491  6.42:1  pass
     hover     #112032 on #6BC3A7  7.83:1  pass
     active    #112032 on #46B491  6.42:1  pass
     disabled  white-70 on #26394E 6.72:1  pass

   The old hover fill was the literal #369e7f, which is not a theme token and
   measured 3.30 to 1 with the white text it was paired with. It is replaced
   by --sit-green-light, the token the first block already named, so hovering
   lightens the fill the same way every other hover in this theme does. */
.sit-btn--primary {
  background: var(--sit-green);
  color: var(--sit-night-sky);
}

.sit-btn--primary:hover {
  background: var(--sit-green-light);
  color: var(--sit-night-sky);
  transform: translateY(-2px);
}

/* Pressed. The fill stays on the base token so the contrast figure cannot
   drift: the darker --sit-green-dark measures 4.21 to 1 with night sky text,
   which is below AA, so the pressed feedback is the loss of the hover lift
   rather than a darker colour. */
.sit-btn--primary:active {
  background: var(--sit-green);
  color: var(--sit-night-sky);
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(17, 32, 50, 0.30);
}

/* The focus ring is defined once in the ACCESSIBILITY section at the end of
   the file: a 3px white outline at 2px offset, on :focus-visible. The offset
   puts the ring outside the button, on the page background, so it never sits
   on the green fill. This rule exists only to stop the ring being clipped by
   the overflow of a button that has a transform applied. */
.sit-btn--primary:focus-visible {
  transform: none;
}

/* Disabled used to be opacity: 0.5 on the whole element, which composites the
   fill against whatever is behind it. On the night sky page background that
   put night sky text on a #2C6A62 composite at 2.62 to 1. WCAG 1.4.3 exempts
   inactive controls, so this was not a violation, but an unreadable button is
   still an unreadable button and a composited value cannot be measured from
   the stylesheet. It is now an opaque surface fill with a fixed, checkable
   contrast figure, and it reads as disabled because it loses the green. */
.sit-btn:disabled,
.sit-btn[aria-disabled="true"] {
  background: var(--sit-surface);
  color: var(--sit-white-70);
  border-color: var(--sit-navy-border);
  box-shadow: none;
  transform: none;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

.sit-btn--ghost {
  background: transparent;
  border: 2px solid var(--sit-green);
  color: var(--sit-green);
}

.sit-btn--ghost:hover {
  background: rgba(65, 181, 146, 0.1);
  transform: translateY(-2px);
}

/* GHOST BUTTONS OVER A HERO PHOTOGRAPH: WHITE LABEL, GREEN BORDER KEPT
   Approved by Ameer on 24 August 2026 after the three remedies were measured.

   Ocean Green is not the problem and this rule does not treat it as one. It
   measures 6.422:1 on the flat Night Sky band and passes AA comfortably
   everywhere else on the site, which is why the override is scoped to the two
   hero wrappers rather than applied to .sit-btn--ghost itself. Off a hero this
   button is unchanged.

   Over the solved hero grounds the same colour composites to 3.195:1 at worst
   and 3.245:1 at best, against a 4.5:1 requirement at 16px and 600 weight.
   White reaches 8.184 to 8.313:1 over those same twelve grounds.

   THE BORDER STAYS OCEAN GREEN ON PURPOSE, AND THAT IS NOT AN OVERSIGHT.
   1.4.11 asks 3:1 of a non-text element needed to identify a control. The
   border's worst measurement over these grounds is 3.195:1, so it clears that
   threshold on its own terms. Only the label was ever failing, because only
   the label is text and only text is held to 4.5:1. Repainting the border
   white would have removed the last green from the hero for no measured gain.

   The two rejected remedies, recorded so nobody reprices them:
   a Night Sky panel behind the text reaches 6.422:1 but hides more of a
   photograph that was deliberately tuned to stay visible; a mint tint at
   #99D6C2 reaches 4.963:1 but adds a seventh colour to a palette section 4
   fixes at six. Raising the scrim alpha was rejected earlier still: carrying
   Ocean Green to 4.5:1 needs 0.841 rather than the solved 0.710, which drops
   image visibility from 29 percent to 16 percent and returns the heroes to the
   tinted rectangles the per-image solve exists to prevent.

   Hover is restated because .sit-btn--ghost:hover above is also two classes
   deep, so a single-class override would tie on specificity and lose to source
   order. The hover fill is Ocean Green at 10 percent over the same ground,
   which moves the measurement by too little to matter, so the label stays
   white through every state rather than reverting to green on pointer. */
.sit-hero .sit-btn--ghost,
.sit-section--hero .sit-btn--ghost {
  color: var(--sit-white);
}

.sit-hero .sit-btn--ghost:hover,
.sit-section--hero .sit-btn--ghost:hover {
  color: var(--sit-white);
  border-color: var(--sit-green-light);
}

.sit-btn--azure {
  background: var(--sit-azure);
  color: var(--sit-white);
}

.sit-btn--azure:hover {
  background: #106ebe;
  transform: translateY(-2px);
}

/* ---- FOOTER ---- */

.sit-footer {
  background: var(--sit-navy-dark);
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--sit-white);
}

.sit-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.sit-footer__col {
  display: flex;
  flex-direction: column;
}

.sit-footer__brand {
  margin-bottom: 1rem;
}

.sit-footer__brand img {
  max-height: 40px;
  width: auto;
}

.sit-footer__tagline {
  color: var(--sit-white-70);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.sit-footer__heading {
  color: var(--sit-white);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-family: var(--sit-font-display);
}

.sit-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sit-footer__link {
  color: var(--sit-white-70);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.sit-footer__link:hover {
  color: var(--sit-green);
}

.sit-footer__badges {
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sit-footer__badges-container {
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.sit-footer__badge {
  width: 200px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sit-footer__badge-image {
  width: 200px;
  height: auto;
  display: block;
}

.sit-footer__badge-placeholder {
  width: 120px;
  height: 120px;
  border-radius: var(--sit-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
}

.sit-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.sit-footer__copyright {
  color: var(--sit-white-50);
  font-size: 0.85rem;
}

/* ============================================================================
   SOLUTION DETAIL PAGE STYLES
   ============================================================================ */

/* Solution Detail Hero Section */
.sit-solution-detail__hero {
  padding: 6rem 0 4rem;
}

.sit-solution-detail__badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--sit-green), var(--sit-green-light));
  color: var(--sit-navy-dark);
  padding: 0.5rem 1rem;
  border-radius: var(--sit-radius);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.sit-solution-detail__title {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--sit-white);
}

.sit-solution-detail__subtitle {
  font-size: 1.25rem;
  color: var(--sit-white-70);
  line-height: 1.6;
  max-width: 700px;
}

/* Description Section */
.sit-solution-detail__description {
  max-width: 900px;
  margin: 0 auto;
}

.sit-solution-detail__description-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--sit-white-70);
}

.sit-solution-detail__description-content p {
  margin-bottom: 1.5rem;
}

.sit-solution-detail__description-content p:last-child {
  margin-bottom: 0;
}

/* Features Grid Section */
.sit-solution-detail__features {
  background: rgba(30, 58, 85, 0.4);
  padding: var(--sit-section-pad) 0;
  border-radius: var(--sit-radius-lg);
  border: 1px solid var(--sit-navy-border);
}

.sit-solution-detail__features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}

.sit-solution-detail__feature-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: rgba(22, 44, 67, 0.5);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  transition: all 0.3s ease;
}

.sit-solution-detail__feature-card:hover {
  background: rgba(30, 58, 85, 0.8);
  border-color: var(--sit-green);
  box-shadow: 0 0 20px rgba(65, 181, 146, 0.1);
}

.sit-solution-detail__feature-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sit-green), var(--sit-green-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sit-navy-dark);
  margin-top: 0.25rem;
}

.sit-solution-detail__feature-icon svg {
  width: 18px;
  height: 18px;
}

.sit-solution-detail__feature-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sit-white);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Use Cases Section */

/* Was margin-top: 6rem. This element is a <section class="sit-section ...">,
   so it already carries the section padding, and 6rem added another 96 pixels
   on top of it. A browser probe of the adjacent-sibling gaps on this template
   measured 96px between this band and the one before it against roughly half
   that between every other pair on the page.

   The margin is removed rather than reduced because the emphasis it implies is
   not real. The bands either side of this one, __challenges and __deliverables,
   are ordinary content bands with no extra margin, and so is this one. Nothing
   about a use-case list asks to be set further apart than a deliverables list.
   The CTA panel below keeps a reduced margin because it genuinely is a
   different kind of block. */
.sit-solution-detail__use-cases {
  margin-top: 0;
}

.sit-solution-detail__use-cases-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
}

.sit-solution-detail__use-case-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 2rem;
  background: rgba(30, 58, 85, 0.3);
  border-left: 3px solid var(--sit-green);
  border-radius: var(--sit-radius-sm);
  transition: all 0.3s ease;
}

.sit-solution-detail__use-case-item:hover {
  background: rgba(30, 58, 85, 0.6);
  padding-left: 2.25rem;
}

.sit-solution-detail__use-case-marker {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sit-green), var(--sit-green-light));
  margin-top: 0.375rem;
}

.sit-solution-detail__use-case-item p {
  font-size: 1.05rem;
  color: var(--sit-white-70);
  line-height: 1.6;
  margin: 0;
}

/* Benefits Section */
/* Was margin-top: 6rem, removed for the same reason as __use-cases above. This
   band does have a tinted panel of its own, but the panel is what sets it
   apart, and it carries var(--sit-section-pad) internally as well, so the
   separation was being paid for three times over. */
.sit-solution-detail__benefits {
  margin-top: 0;
  background: linear-gradient(135deg, rgba(65, 181, 146, 0.05), rgba(0, 120, 212, 0.05));
  padding: var(--sit-section-pad) 0;
  border-radius: var(--sit-radius-lg);
  border: 1px solid var(--sit-navy-border);
}

.sit-solution-detail__benefits-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.sit-solution-detail__benefit-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.sit-solution-detail__benefit-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sit-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sit-navy-dark);
  margin-top: 0.25rem;
}

.sit-solution-detail__benefit-icon svg {
  width: 16px;
  height: 16px;
}

.sit-solution-detail__benefit-item p {
  font-size: 1rem;
  color: var(--sit-white-70);
  line-height: 1.6;
  margin: 0;
}

/* CTA Section
 *
 * This block used to fill with linear-gradient(135deg, var(--sit-green),
 * rgba(65, 181, 146, 0.3)), which ran from opaque light green to nearly
 * transparent, letting the night-sky page show through. No single text colour
 * clears AA across a gradient with that much range: white on the green end
 * measured 2.56 to 1, which fails AA and also fails the 3 to 1 large-text
 * threshold, and dark text that worked on the green end failed on the dark end.
 * The same 2.56 measurement is recorded against the green fill on the skip
 * link, so this is the second place it has bitten.
 *
 * The fill is now two dark navies. It is uniform enough that both text colours
 * clear AA at every point: white-70 measures 6.73 to 1 on --sit-surface and
 * 7.71 to 1 on --sit-prussian, and plain white is far higher on both. Both ends
 * are lighter than the --sit-night-sky page background, so the block still
 * reads as a raised panel, and the green border and green primary button keep
 * the accent that the green fill used to carry.
 */
.sit-solution-detail__cta {
  background: linear-gradient(135deg, var(--sit-surface), var(--sit-prussian));
  border: 1px solid var(--sit-green);
  padding: 4rem;
  border-radius: var(--sit-radius-lg);
  text-align: center;
  /* Was 6rem top and bottom, halved rather than removed. Unlike the two bands
     above, this one earns extra separation: it is a bordered panel that asks
     for a decision, and running it hard against the band before it would read
     as part of that band's content. 3rem still leaves it clearly free-standing
     while giving back 96 pixels of the 192 it was taking. It also keeps its own
     padding: 4rem inside, which overrides the .sit-section padding entirely
     because both selectors are one class deep and this rule comes later. */
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.sit-solution-detail__cta-content {
  margin-bottom: 3rem;
}

.sit-solution-detail__cta-title {
  font-size: 2.25rem;
  color: var(--sit-white);
  margin-bottom: 1rem;
}

.sit-solution-detail__cta-subtitle {
  font-size: 1.1rem;
  color: var(--sit-white-70);
  max-width: 600px;
  margin: 0 auto;
}

.sit-solution-detail__cta-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Back to Solutions Link */

/* Was margin-bottom: 4rem, being 64 pixels of empty space below a single text
   link at the very end of the page, on top of the section padding this element
   already carries. 2rem is enough to keep it off the footer. */
.sit-solution-detail__back-link {
  margin-bottom: 2rem;
  text-align: left;
}

.sit-solution-detail__back-btn {
  display: inline-flex;
  align-items: center;
  color: var(--sit-green);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--sit-radius);
  border: 1px solid var(--sit-green);
  transition: all 0.3s ease;
}

.sit-solution-detail__back-btn:hover {
  background: rgba(65, 181, 146, 0.1);
  color: var(--sit-green-light);
  border-color: var(--sit-green-light);
}

/* ---- SCROLL REVEAL ANIMATIONS ---- */

.sit-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sit-reveal.revealed,
.sit-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================================
   RESPONSIVE OVERRIDES
   ============================================================================ */

/* Badge row breakpoint. Derived, not chosen, and it sits above the tablet
   breakpoint on purpose.

   Four badges across occupy 5.304 badge widths: the four badges themselves plus
   five units of clear space at 0.2608 widths each, being the panel padding on
   both sides and the three gaps between the badges. At 200px that is 1060.8px.

   THE BUDGET IS SMALLER THAN THE VIEWPORT BY 92px, NOT 64px, and that is the
   number that decides this rule. .sit-container is in group A of the chat
   launcher clearance further down this file, so it carries 2rem on the left and
   60px on the right rather than 2rem on both. The launcher floats over that
   lane, and a badge underneath it would be obscured artwork, which is the thing
   Microsoft's clear space rule exists to prevent. So the lane is respected and
   the panel has 28px less to work with than the page padding alone would
   suggest. Measured rather than assumed: at a 1024px viewport the panel renders
   932px wide, not 960px.

   200px therefore needs a 1152.8px viewport, and about 1170px once a real
   browser has taken 17px for a classic scrollbar. This query hands over at
   1200px, which leaves roughly 31px of slack at the handover rather than 11px.

   172px needs 912.3px. At 1024 that is 932px available headless and 915px with
   a 17px scrollbar, so it holds in both. It keeps 4px over Microsoft's 168px
   minimum for a solution area badge. Four pixels is thin, and it is thin for a
   reason worth naming rather than hiding: the 28px chat lane is almost exactly
   the headroom this breakpoint would otherwise have had. Anything larger wraps
   at 1024 in a browser with a scrollbar.

   The 768px block further down still sets 180px and must keep winning there:
   below roughly 955px of viewport the row cannot hold four badges at any size
   Microsoft permits, so the narrow layout is optimising for something else and
   this rule has nothing left to buy it. */
@media (max-width: 1200px) {
  .sit-badges-strip__container {
    --sit-badge-w: 172px;
  }
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .sit-hero__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sit-solutions__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sit-proof__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .sit-insights__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sit-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Solution Detail Responsive - Tablet */
  .sit-solution-detail__features-grid {
    grid-template-columns: 1fr;
  }

  .sit-solution-detail__benefits-list {
    grid-template-columns: 1fr;
  }

  .sit-solution-detail__title {
    font-size: 2.25rem;
  }

  .sit-solution-detail__cta {
    padding: 3rem 2rem;
  }

  .sit-solution-detail__cta-actions {
    flex-direction: column;
  }

  .sit-solution-detail__cta-actions .sit-btn {
    width: 100%;
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .sit-section__title {
    font-size: 2rem;
  }

  .sit-hero {
    padding: 3rem 0 2rem;
  }

  .sit-hero__title {
    font-size: 2.5rem;
  }

  .sit-hero__stats {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .sit-hero__cards {
    grid-template-columns: 1fr;
  }

  .sit-solutions__grid {
    grid-template-columns: 1fr;
  }

  .sit-proof__grid {
    grid-template-columns: 1fr;
  }

  .sit-insights__grid {
    grid-template-columns: 1fr;
  }

  /* One number, not three. Dropping the badge width pulls the gap and the panel
     padding down with it, because both are derived from it, so the two symbol
     clear space still holds at this breakpoint. 180px keeps 12px of headroom
     over Microsoft's 168px floor; a 200px badge plus its required 52.2px of
     clear space on each side needs 304px, which does not fit a 360px screen
     once the page container has taken its own 2rem either side.

     This RAISES the width back above the 172px set in the badge row breakpoint,
     and that is deliberate rather than an oversight. 172px was bought to keep
     four badges on one line at 1024 and 1025. At 768 and below, four across is
     impossible at any width Microsoft permits: four badges plus five units of
     clear space need 891.1px even drawn at the 168px floor, and the panel here
     measures 676px. So there is nothing left for a smaller badge to buy and the
     larger, more legible one wins. */
  .sit-badges-strip__container {
    --sit-badge-w: 180px;
  }

  .sit-cta-banner__title {
    font-size: 1.75rem;
  }

  .sit-footer__grid {
    grid-template-columns: 1fr;
  }

  .sit-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Solution Detail Responsive - Mobile */
  .sit-solution-detail__hero {
    padding: 4rem 0 3rem;
  }

  .sit-solution-detail__title {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
  }

  .sit-solution-detail__subtitle {
    font-size: 1rem;
  }

  .sit-solution-detail__features {
    padding: 3rem 0;
  }

  .sit-solution-detail__features-grid {
    gap: 1.5rem;
  }

  .sit-solution-detail__feature-card {
    padding: 1.25rem;
    gap: 0.75rem;
  }

  .sit-solution-detail__use-case-item {
    padding: 1.5rem;
    gap: 1rem;
  }

  .sit-solution-detail__use-case-item:hover {
    padding-left: 1.75rem;
  }

  .sit-solution-detail__benefits {
    padding: 3rem 0;
  }

  .sit-solution-detail__benefits-list {
    gap: 1.5rem;
  }

  /* Halved with the base rule above, keeping the phone step proportional. */
  .sit-solution-detail__cta {
    padding: 2.5rem 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .sit-solution-detail__cta-title {
    font-size: 1.75rem;
  }

  .sit-solution-detail__cta-subtitle {
    font-size: 1rem;
  }

  .sit-solution-detail__cta-actions {
    gap: 1rem;
  }

  .sit-solution-detail__back-btn {
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
  }
}

/* ============================================================================
   COOKIE CONSENT BANNER
   ============================================================================ */

.sit-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--sit-navy-card);
  border-top: 1px solid var(--sit-navy-border);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.4);
  animation: sitCookieSlideUp 0.5s ease forwards;
}

@keyframes sitCookieSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.sit-cookie-banner__inner {
  max-width: var(--sit-container);
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.sit-cookie-banner__text {
  flex: 1;
}

.sit-cookie-banner__text p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sit-white-70);
  line-height: 1.5;
}

.sit-cookie-banner__text a {
  color: var(--sit-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sit-cookie-banner__text a:hover {
  color: var(--sit-green-light);
}

.sit-cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.sit-cookie-banner__btn {
  padding: 0.6rem 1.25rem;
  border-radius: var(--sit-radius-sm);
  font-family: var(--sit-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}

.sit-cookie-banner__btn--accept {
  background: var(--sit-green);
  color: var(--sit-navy-dark);
}

.sit-cookie-banner__btn--accept:hover {
  background: var(--sit-green-light);
  transform: translateY(-1px);
}

.sit-cookie-banner__btn--essential {
  background: transparent;
  color: var(--sit-white-70);
  border: 1px solid var(--sit-white-30);
}

.sit-cookie-banner__btn--essential:hover {
  background: var(--sit-white-10);
  color: var(--sit-white);
}

@media (max-width: 768px) {
  .sit-cookie-banner__inner {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
  }

  .sit-cookie-banner__actions {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================================
   AI CHATBOT WIDGET
   ============================================================================ */

/* Container: fixed to the right of the viewport, vertically centred when there
   is room for it and lifted clear of the cookie consent banner when there is
   not.

   WHY THIS IS NOT SIMPLY top: 50%

   The consent banner is position: fixed, bottom: 0, at z-index 10000, one
   thousand above this widget. On a narrow viewport it wraps into a column
   layout and becomes tall enough to grow up into whatever is sitting near the
   bottom of the screen. Neither element knew the other existed, so the banner
   covered the chat toggle and swallowed the tap. The button looked completely
   normal and did nothing, with no error and nothing in the console.

   Raising the widget above the banner instead would be the wrong fix. The
   banner asks a consent question, so it is supposed to be the topmost thing on
   the page until it is answered. The widget moves; the banner does not.

   --sit-cookie-banner-h is published by initCookieConsent() in main.js from the
   banner's measured height, and cleared when the banner is dismissed. It is
   absent on every page load where consent has already been given, so the 0px
   fallback is the normal case and this maths collapses back to plain centring.

   WHY THE DEFAULT IS THE CORNER AND NOT THE CENTRE

   Vertical centring puts the toggle halfway down the right edge, which is only
   free space when the page has a gutter there. It does not always have one.
   .sit-container is max-width 1280px with 2rem of padding, so once the
   container is capped the text stops at 50vw + 608px, and below the cap it
   stops at 100vw - 32px. The toggle claims the last 80px of the viewport
   (1.5rem of offset plus a 56px button). Those two meet at 1376px, so on every
   viewport narrower than that the centred toggle sat directly on top of body
   copy. Measured at 768px wide: elementsFromPoint under all four corners and
   the centre of the toggle returned a paragraph of the page's own prose.

   So the corner is the default, because it is correct at every width, and the
   centring is restored only above the width where the gutter genuinely exists.

   The banner offset is in the default because it is needed at every width. The
   max() in the wide-viewport rule keeps the same promise there: whichever is
   further from the bottom, the 50% line or the top of the banner, wins. */
.sit-chatbot {
  /* 44px below 1440px, 56px above it. The size is not cosmetic: it is one of
     the three numbers that decide how much of the text column has to be given
     up for the launcher to stop covering it, and 44px is the smallest button
     that is still a comfortable touch target. See the CHAT LAUNCHER LANE block
     below for the arithmetic that ties this to --sit-chatbot-lane. */
  --sit-chatbot-toggle-size: 44px;
  --sit-chatbot-gap: 1rem;

  position: fixed;
  top: auto;
  right: 0.5rem;
  bottom: calc(var(--sit-cookie-banner-h, 0px) + var(--sit-chatbot-gap));
  transform: none;
  transition: bottom 0.3s ease;
  z-index: 9999;
  font-family: var(--sit-font-body);
}

/* 1700px, not the 1440px this rule used to carry.

   The old note here said 1440 "leaves 32px of real gap". It does not, and the
   rendered intersection sweep found it on 24 August 2026 once /partner-portal/
   was added to the audited route list. Measured, launcher.left minus the
   content box on the right:

     1439   +44     lane on, toggle 44px at 0.5rem
     1440   -12     lane off, toggle 56px at 1.5rem
     1500   -11
     1600    -8
     1650    -7
     1700    +2
     1800   +52

   Three things changed at once at 1440: the toggle grew from 44px to 56px, its
   offset went from 0.5rem to 1.5rem, and the reserved lane switched off. Each
   was defensible alone. Together they take 36px more room at the exact width
   where the lane stopped giving any back, so clearance went from +44 to -12 in
   one pixel of viewport.

   The 32px figure was arithmetic about the 44px button, not a measurement of
   the 56px one that this block installs. Nothing above ever re-checked it
   against the bigger button it introduces.

   Two more measurements decided 1700 rather than a smaller bump. At 1440 the
   ordinary .sit-container's right edge lands on exactly 1360, which is exactly
   the launcher's left edge: a gap of zero on every page on the site. This
   file's own rule, written directly above, is that touching is not clearance.
   And the natural gutter does not actually clear the launcher until about
   1700, which is where the container reaches its max-width and the margins
   start growing with the viewport instead of the box.

   So the full 56px button and the roomier 1.5rem offset come back at the first
   width where there is genuinely space for them, which is what the old comment
   intended and mis-measured.

   The reserved lane deliberately still switches off at 1440. Between 1440 and
   1700 the toggle is the 44px button at 0.5rem that the lane arithmetic was
   written for, and without any lane the measured clearance from rendered text
   and controls is +16 at 1440, rising to about +29 by 1699. That is above the
   8px the arithmetic asks for, so carving a lane through that band would
   narrow the text column on every page for no gain.

   Measure content, not wrappers, when re-checking this. Two boxes do still
   cross the launcher's left edge in that band and neither is a collision.
   /partner-portal/ has a .sit-container with max-width 1600px rather than the
   usual cap, so its box reaches 16px past the launcher, but it carries 32px of
   right padding and the text inside it stops 16px short. The other is the
   header's "Book a Call" button, which sits at the top of the page while the
   toggle is docked at the bottom, and is excluded from the lane for that
   reason in the note further down this file. Comparing wrapper boxes rather
   than painted content reports both as failures.

   The panel block at max-width 1699.98px below moves with this one and is not
   independent. The panel opens sideways only while the toggle is vertically
   centred, and it is this rule that centres it. */
@media (min-width: 1700px) {
  .sit-chatbot {
    --sit-chatbot-toggle-size: 56px;

    right: 1.5rem;
    bottom: max(
      calc(50% - (var(--sit-chatbot-toggle-size) / 2)),
      calc(var(--sit-cookie-banner-h, 0px) + var(--sit-chatbot-gap))
    );
  }
}

/* Somebody who has asked for less motion did not ask for a chat button that
   slides around when a banner is dismissed. */
@media (prefers-reduced-motion: reduce) {
  .sit-chatbot {
    transition: none;
  }
}

/* ── Toggle Button ────────────────────────────── */
.sit-chatbot__toggle {
  width: var(--sit-chatbot-toggle-size);
  height: var(--sit-chatbot-toggle-size);
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--sit-green) 0%, #2d9a7a 100%);
  color: var(--sit-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(65,181,146,0.4), 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
  position: relative;
}

.sit-chatbot__toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(65,181,146,0.5), 0 3px 12px rgba(0,0,0,0.3);
}

.sit-chatbot__toggle:active {
  transform: scale(0.96);
}

.sit-chatbot__toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sit-chatbot__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: #e74c3c;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Chat Window ──────────────────────────────── */
.sit-chatbot__window {
  position: absolute;
  bottom: auto;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  max-height: 520px;
  background: var(--sit-navy);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius-lg);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(65,181,146,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sitChatOpen 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes sitChatOpen {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

/* ── Header ────────────────────────────────────── */
.sit-chatbot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--sit-navy-card) 0%, var(--sit-navy) 100%);
  border-bottom: 1px solid var(--sit-navy-border);
}

.sit-chatbot__header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sit-chatbot__avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--sit-green), #2d9a7a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sit-white);
  flex-shrink: 0;
}

.sit-chatbot__name {
  display: block;
  color: var(--sit-white);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}

.sit-chatbot__status {
  display: block;
  font-size: 0.72rem;
  color: var(--sit-green);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sit-chatbot__close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--sit-white-10);
  border-radius: 8px;
  color: var(--sit-white-70);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.sit-chatbot__close:hover {
  background: var(--sit-white-30);
  color: var(--sit-white);
}

/* ── Messages Area ────────────────────────────── */
.sit-chatbot__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 280px;
  max-height: 340px;
  scrollbar-width: thin;
  scrollbar-color: var(--sit-white-10) transparent;
}

.sit-chatbot__messages::-webkit-scrollbar {
  width: 5px;
}

.sit-chatbot__messages::-webkit-scrollbar-track {
  background: transparent;
}

.sit-chatbot__messages::-webkit-scrollbar-thumb {
  background: var(--sit-white-10);
  border-radius: 3px;
}

/* ── Message Bubbles ──────────────────────────── */
.sit-chatbot__msg {
  max-width: 85%;
  padding: 0.65rem 1rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.55;
  word-wrap: break-word;
  animation: sitMsgIn 0.25s ease-out;
}

@keyframes sitMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sit-chatbot__msg--assistant {
  background: var(--sit-navy-card);
  color: var(--sit-white-70);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  border: 1px solid var(--sit-navy-border);
}

.sit-chatbot__msg--user {
  background: linear-gradient(135deg, var(--sit-green) 0%, #2d9a7a 100%);
  color: var(--sit-white);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.sit-chatbot__msg--typing {
  background: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  padding: 0.75rem 1.25rem;
}

.sit-chatbot__msg a {
  color: var(--sit-green-light);
  text-decoration: underline;
}

.sit-chatbot__msg--user a {
  color: var(--sit-white);
}

/* Typing dots */
.sit-chatbot__dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.sit-chatbot__dots span {
  width: 7px;
  height: 7px;
  background: var(--sit-white-30);
  border-radius: 50%;
  animation: sitDotPulse 1.2s ease-in-out infinite;
}

.sit-chatbot__dots span:nth-child(2) { animation-delay: 0.15s; }
.sit-chatbot__dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes sitDotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40%           { opacity: 1;   transform: scale(1); }
}

/* ── Input Area ───────────────────────────────── */
.sit-chatbot__input-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--sit-navy-border);
  background: var(--sit-navy-dark);
}

.sit-chatbot__input {
  flex: 1;
  background: var(--sit-white-10);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  color: var(--sit-white);
  font-family: var(--sit-font-body);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.sit-chatbot__input::placeholder {
  color: var(--sit-white-30);
}

.sit-chatbot__input:focus {
  border-color: var(--sit-green);
  background: rgba(65,181,146,0.06);
}

.sit-chatbot__send {
  width: 38px;
  height: 38px;
  border: none;
  background: var(--sit-green);
  border-radius: 10px;
  color: var(--sit-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}

.sit-chatbot__send:hover {
  background: var(--sit-green-light);
}

.sit-chatbot__send:active {
  transform: scale(0.92);
}

.sit-chatbot__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Responsive ───────────────────────────────── */

/* The docked panel: everywhere the toggle sits in the bottom corner.

   The default .sit-chatbot__window is centred on the toggle (top: 50% with a
   -50% translate) and opens sideways. That is correct only while the toggle is
   itself vertically centred, which it is at 1700px and above. Below 1700px the
   toggle is docked to the bottom corner, and a 421px panel centred on a 44px
   button then hangs roughly 190px below it, off the bottom of the screen.

   Measured on the homepage with the cookie banner showing, before this rule:

     768 x 900    panel spanned y508 to y928   28px past the bottom edge
     1439 x 900   panel spanned y567 to y987   87px past the bottom edge

   and the part cut off is the bottom of the panel, which is the message input
   and the send button. Without the banner it is worse, not better, because the
   toggle sits lower still.

   This block was already here in the 480px form, written when the toggle was
   only docked on phones. The toggle has been docked at every width below 1440px
   since the launcher lane went in on 23 August 2026, so the panel geometry has
   to move up to the same breakpoint. The 480px block below now overrides only
   the width, which is the one thing that genuinely differs on a phone.

   That breakpoint moved from 1440px to 1700px on 24 August 2026, and this
   block moved with it rather than being re-derived. The reason is the first
   paragraph above: this geometry is not keyed to a viewport width, it is keyed
   to whether the toggle is docked or centred, and the .sit-chatbot rule near
   the top of this file is what decides that. Leaving this at 1439.98px would
   have centred the panel on a still-docked button between 1440 and 1700 and
   hung the message input off the bottom of the screen in exactly the way the
   measurements above describe. The two numbers have to match; see the note on
   that rule for why it is 1700 and not 1440.

   The height cap is the space actually left above the banner rather than a flat
   70vh, because once the toggle has been lifted by the banner a full 70vh panel
   runs off the top and takes its header, and therefore its close button, with
   it. Trading an unreachable input for an unreachable close button is not a
   fix. The subtracted terms are the toggle, the gap above it, and 3rem of
   breathing room so the panel does not sit flush against the top edge; they are
   written as the custom properties rather than as a 7rem constant so that
   changing the toggle size cannot silently invalidate the cap.

   The animation is swapped for the same reason the transform is: sitChatOpen
   animates through translateY(-50%), so replaying it on a panel that is no
   longer centred would drop the panel half its own height and settle it back.
   sitChatOpenDocked is the same motion without the centring term. */
@media (max-width: 1699.98px) {
  .sit-chatbot__window {
    top: auto;
    right: 0;
    bottom: calc(100% + 8px);
    transform: none;
    animation-name: sitChatOpenDocked;
    max-height: min(
      70vh,
      calc(
        100vh - var(--sit-cookie-banner-h, 0px)
        - var(--sit-chatbot-toggle-size) - var(--sit-chatbot-gap) - 3rem
      )
    );
  }

  /* Kept in step with the panel above it. The 140px is the header and the input
     row, which are fixed height and do not scroll. */
  .sit-chatbot__messages {
    max-height: min(
      calc(70vh - 140px),
      calc(
        100vh - var(--sit-cookie-banner-h, 0px)
        - var(--sit-chatbot-toggle-size) - var(--sit-chatbot-gap) - 3rem - 140px
      )
    );
  }
}

@keyframes sitChatOpenDocked {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 480px) {
  /* The corner position is the default at every width below 1440px, and the
     0.5rem side offset is now also the default, so nothing about the horizontal
     placement needs restating here. It used to say right: 1rem, which has been
     removed: a larger offset pushes the button further from the edge and
     therefore further into the text, so it would have widened the reserved lane
     on exactly the viewport that can least afford it.

     The bottom is repeated rather than inherited on purpose: this is the exact
     viewport where the banner is tallest and the collision actually happens,
     and pinning it here means a future change to the default cannot quietly
     undo it. */
  .sit-chatbot {
    bottom: calc(var(--sit-cookie-banner-h, 0px) + var(--sit-chatbot-gap));
  }

  /* Width only. The panel's placement, its height cap and its open animation
     now live in the max-width: 1699.98px block above, because the toggle is
     docked at every width below 1700px and not only on phones. What is left
     here is the one thing that is genuinely different on a phone: a 380px panel
     on a 360px screen would be wider than the screen, so it takes the viewport
     less a 1rem gutter on each side instead. */
  .sit-chatbot__window {
    width: calc(100vw - 2rem);
  }
}

/* ──────────────────────────────────────────────
   CHAT LAUNCHER LANE
   ──────────────────────────────────────────────

   THE PROBLEM

   A launcher that is fixed to the viewport and a text column that runs to the
   edge of the viewport cannot both have the same pixels. Above 1440px there is
   no argument to have: the container caps at 1280px, the leftover margin is
   wider than the button, and the button sits in it. Below 1440px the container
   stops being capped, the text runs to within one padding step of the edge, and
   the button is on top of it.

   Measured before this block existed, at 768px wide, sweeping the full document
   height of /solutions/ma-it-integration/ and testing against the glyph
   rectangles returned by Range.getClientRects() rather than block boxes:

     scroll 0     1293px of body text under the button
     scroll 794    412px of body text
     scroll 2382   an h3 covered 4% of its area
     scroll 3970   an h2 covered 5%
     scroll 5557   an h2 covered 2%

   Not an edge case. The button sat on prose at every scroll position on the
   page, and the same is true of every page at every width below about 1352px.

   THE FIX AND WHAT IT COSTS

   Content stops short of the right edge by enough to clear the button. This is
   a real cost and it is paid on every page below 1440px: the text column gets
   narrower and the page is no longer perfectly centred. Approved by the owner
   on 23 August 2026 in preference to the alternative, which was to stop
   floating the launcher on narrow viewports and put it at the end of the
   document, where it would have been out of sight until someone scrolled to
   the bottom of a 7000px page.

   THE ARITHMETIC

   Three numbers decide the lane width, and all three live in .sit-chatbot above:

     toggle size    44px   the smallest comfortable touch target
     right offset   8px    0.5rem
     clearance      8px    so the button does not graze the text

   The button therefore occupies the last 52px of the viewport, and content must
   not cross 60px from the right edge.

   Two groups, because the wrappers do not all carry their own padding.

     GROUP A already has horizontal padding of its own, so padding-right here is
     the total and must be the full 60px.

     GROUP B has none and sits inside a section that supplies 2rem on desktop
     and 1rem below 768px. 60px minus the 1rem worst case is 44px.

   Both land in the same place. Worst case, a 360px phone:

     group A   content 16px to 300px   button starts at 308px
     group B   content 16px to 300px   button starts at 308px

   which is 284px of text where there used to be 328px. At 768px the column
   goes from 736px to 692px, and at 1439px the container is capped so the
   padding eats into the 1280px box instead of the margin, leaving the page
   28px off centre, which is 2% and not visible.

   WHAT IS DELIBERATELY NOT IN THE LIST

   .sit-header__wrapper, .sit-nav__container and .sit-ribbon__container are at
   the top of the page and the launcher is anchored to the bottom, so they
   cannot collide at any tested viewport height. Padding them would move the
   header CTA left on every page for no benefit.

   .sit-cookie-banner__inner is excluded for a different reason: the launcher is
   already lifted clear of the banner by --sit-cookie-banner-h, so it is above
   the banner rather than on it.

   If a page ever puts full-width interactive content in a wrapper that is not
   on this list, the overlap comes back for that page only. The check that
   catches it is the rendered intersection sweep, not this comment. */
@media (max-width: 1439.98px) {

  /* GROUP A: wrappers with their own horizontal padding. */
  .container,
  .wp-container,
  .wp-container-breadcrumbs,
  .sit-container,
  .sit-hero__wrapper,
  .sit-infographic,
  .sit-footer__badges-container,
  /* These two are in group A because they have no side padding at all, not
     because they have some. .sit-footer__container has no rule anywhere in this
     stylesheet, and .sit-footer sets padding: 4rem 0 2rem in the second of its
     two competing blocks, so the footer runs edge to edge and its headings were
     the last thing still under the launcher after the rest of the lane was in
     place. Measured at 768px: the "Simplicity IT" h3 spanned 0 to 753 and took
     957px of button on top of it.

     The 60px here removes that overlap. It does not fix the underlying problem,
     which is that the footer is the only region of the site with no container
     and no side padding, and that is reported separately rather than changed
     here: giving the footer the container treatment is a visible layout change
     to every page and is the owner's call, not a side effect of an
     accessibility fix. */
  .sit-footer__container,
  .sit-footer__bottom,
  /* Third region with no container, found the same way as the footer and for
     the same reason. .sit-cta-banner sets padding: 4rem 0 and sits directly
     inside .sit-section--cta in template-parts/page/cta-band.php and in seven
     page templates, so the green band and its text run edge to edge.
     front-page.php is the one place that wraps the banner in .sit-container,
     which is why the descendant selector is used here: it matches the
     container-less markup and leaves the homepage alone rather than padding it
     twice.

     Measured on /solutions/azure-optimization-modernization/ at 360px: the h2
     and the description ran 0 to 345 on a 345px client width and took up to
     44px of launcher, reachable by scrolling to 20808. Nine covered rectangles
     on that route alone.

     The selector is compound for the cascade reason as well. The base rule at
     .sit-cta-banner uses the padding shorthand, so a bare class here would be
     a (0,1,0) tie decided by source order. */
  .sit-section--cta .sit-cta-banner {
    padding-right: 60px;
  }


  /* GROUP B: wrappers that inherit their side spacing from the section. */
  .sit-badges__wrapper,
  .sit-solutions__header,
  .sit-solutions__grid,
  .sit-offers__header,
  .sit-offers__grid,
  .sit-proof__header,
  .sit-proof__metrics,
  .sit-insights__header,
  .sit-insights__grid,
  .sit-hub__wrapper,
  .sit-contact__wrapper,
  .sit-about__values-header,
  .sit-about__values-grid,
  .sit-about__metrics-wrapper,
  .sit-footer__wrapper,
  .sit-booking-banner__wrapper {
    padding-right: 44px;
  }
}

/* The shared page hero, which is the one content region with no container.

   template-parts/page/hero.php puts .sit-hero__inner directly inside
   .sit-section.sit-hero. .sit-section is padding: 4rem 0 and .sit-hero__inner
   is padding: 2rem 0 1rem with max-width: 860px, so there is no horizontal
   padding anywhere in that chain. Above 860px the max-width supplies margins
   and nothing is wrong. Below it the hero runs to both viewport edges: measured
   on /solutions/azure-optimization-modernization/ at 360px, the eyebrow, the
   h1, the paragraph and both CTA buttons all spanned x0 to x345 on a 345px
   client width.

   Same class of problem as the footer, and the same fix: this is where the
   launcher was still landing on hero headings and CTAs, so the lane has to
   close it. 2rem left and 60px right are the .sit-container numbers, so the
   hero's text column lines up with the section below it instead of starting
   16px further out. The ≤480 block below drops the left side to 1rem, again
   matching .sit-container.

   Capped at 859.98px on purpose. At any wider viewport the 860px max-width
   already leaves a margin bigger than the lane, so adding padding there would
   narrow the hero measure on desktop for no accessibility gain.

   The selector is compound on purpose. A media query contributes nothing to
   specificity, so a bare .sit-hero__inner here ties with the base rule further
   down the file at (0,1,0) and loses on source order. That base rule sets
   padding with the shorthand, which resets padding-right and padding-left to
   zero, so the lane silently did not exist: measured at 768px across the 14
   routes that render this part, computed padding-right was 0px on every one.
   .sit-hero .sit-hero__inner is (0,2,0) and wins wherever it sits, which also
   means appending a later rule cannot quietly switch the lane off again. */
@media (max-width: 859.98px) {
  .sit-hero .sit-hero__inner {
    padding-left: 2rem;
    padding-right: 60px;
  }
}

/* The left-hand half of the lane, on phones only.

   .sit-hero__card has a min-content width of 266px that it will not go below at
   any viewport, so on a 360px screen the hero grid is already nearly as wide as
   the phone. Adding the lane on the right without giving anything back on the
   left pushed .sit-container's min-content to 358px against a 345px viewport,
   the hero section's overflow: hidden clipped the difference, and a solution
   card ended up 5px under the launcher. 23px of overlap, but overlap.

   1rem is not a number invented to solve this. .container and .wp-container
   have dropped to 1rem below 480px since long before the lane existed, and
   .sit-container simply never got the same treatment. This brings it into line.

   The arithmetic at 360px, allowing for a 15px scrollbar:

     before the lane   content 32px to 313px   281px of text
     after both        content 16px to 285px   269px of text

   so the column is 12px narrower than it was rather than 44px, and the hero
   grid clears its 266px minimum with 3px to spare.

   The footer selectors are deliberately not in this list. They have no left
   padding at all today, and giving them some is a visible change to the footer
   rather than a consequence of moving the launcher. */
@media (max-width: 480px) {
  .sit-container,
  /* Compound for the same cascade reason as the lane block above: the base
     .sit-hero__inner rule uses the padding shorthand and would otherwise win on
     source order and reset this to zero. Each selector in a list carries its
     own specificity, so raising this one does not affect the others. */
  .sit-hero .sit-hero__inner,
  .sit-hero__wrapper,
  .sit-infographic,
  .wp-container-breadcrumbs,
  .sit-footer__badges-container {
    padding-left: 1rem;
  }

  /* Long headings are allowed to break on phones.

     .sit-section.sit-hero is a flex container and .sit-hero__inner is a flex
     item, so the item cannot be laid out narrower than its min-content width,
     and the min-content width of a heading is the width of its longest word.
     The hero h1 is 40px on a 360px phone, so a word like "confidentiality,"
     measures 292px against 269px of available space and the whole hero pushes
     out past its own container. Measured on /industries/legal/: the h1 ran to
     x308 inside a container that ends at x285.

     This predates the launcher lane. Before the lane the container ended at
     x313 and the h1 still ran to x323, so the heading was already overflowing;
     the launcher was simply sitting on top of the overflow rather than next to
     it. The lane cannot fix it, because no amount of padding on an ancestor
     makes a flex item narrower than its longest word.

     overflow-wrap: anywhere rather than break-word, because break-word does not
     reduce the min-content size and so would leave the flex item exactly as
     wide as it is now. anywhere only breaks a word that genuinely does not fit,
     which on a 360px screen is the right outcome: a hyphenless break inside one
     long word beats a heading that runs under the chat button.

     The heading being 40px on a 360px screen at all was a separate question,
     reported here rather than changed. It is answered by the rule below. */
  h1,
  h2,
  .sit-hero__title {
    overflow-wrap: anywhere;
  }

  /* The phone headline size, chosen by measurement rather than by eye.

     At 40px the homepage h1 wrapped to twelve lines on a 360px screen and stood
     528px tall, which is most of a phone screen spent on one sentence. The
     sentence is the approved positioning statement and is not being rewritten,
     so the only thing available to change is how it is set.

     Five candidates were injected into the live page and re-measured at 360 and
     390. 36px is the one worth naming, because it looks like a reasonable step
     down and is not: at 360 it still breaks to twelve lines and saves 53px, a
     smaller headline for the same wall of text. 32px is where the line count
     actually moves, to ten lines and 352px, and it holds at 390 as well, where
     it gives eight. Below that the returns collapse: 30px buys a further 22px
     and no fewer lines, and 28px starts to lose the gap between a display
     headline and the 18px paragraph under it.

     The inner-page heroes get the same treatment because they share the class,
     and they wanted it too: /industries/aec/ goes from eight lines to six and
     from 1153px to 1012px, and /services/ from three lines to two.

     32px is also what the older `.sit-hero__wrapper` block already declared for
     `max-width: 768px`. That rule has been dead since a later 2.5rem at the
     same specificity overrode it, so this is not a new opinion about the size
     so much as the original one, measured and put somewhere it applies. */
  .sit-hero__title {
    font-size: 2rem;
  }
}

/* The footer is the one region that needs clearance above 1440px as well, and
   for the same reason it needed the widest value below it: it has no container,
   so it does not get the free margin that caps every other wrapper at 1280px
   and hands the launcher a gutter. It runs to the edge of a 2560px monitor just
   as it runs to the edge of a phone.

   Measured at 1440x900 before this rule: the footer's "Contact" h4 took 271px
   of launcher across it at scroll 6210.

   92px, not 60px, because the launcher is back to its full 56px at 1.5rem here,
   so it occupies the last 80px rather than the last 52px.

   The container-less CTA banner is in the same position: it has no max-width,
   so it stays full bleed at every viewport and the free 1280px gutter never
   arrives to protect it. It gets the same 92px for the same reason. */
@media (min-width: 1440px) {
  .sit-footer__container,
  .sit-footer__bottom,
  .sit-section--cta .sit-cta-banner {
    padding-right: 92px;
  }
}

/* ──────────────────────────────────────────────
   Testimonials Section
   ────────────────────────────────────────────── */
.sit-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sit-testimonial-card {
  background: linear-gradient(135deg, var(--sit-navy-card) 0%, rgba(30, 58, 85, 0.5) 100%);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.sit-testimonial-card:hover {
  border-color: rgba(65, 181, 146, 0.3);
  transform: translateY(-2px);
}

.sit-testimonial-card__metric {
  display: inline-block;
  background: rgba(65, 181, 146, 0.1);
  /* Was --sit-green, 3.93 to 1 against rgb(41,69,85), which is the card's
     gradient seen through this tint. 12.8px at weight 700 is below the 18.66px
     the bold large text exemption starts at, so it needs 4.5. The lightened
     token measures 5.23 here. */
  color: var(--sit-green-on-surface);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(65, 181, 146, 0.2);
  width: fit-content;
}

.sit-testimonial-card__quote {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--sit-white-70, rgba(255, 255, 255, 0.7));
  margin: 0;
  font-style: normal;
  flex: 1;
}

.sit-testimonial-card__quote::before {
  content: '\201C';
  font-size: 2rem;
  line-height: 0;
  vertical-align: -0.5em;
  color: var(--sit-green);
  margin-right: 0.15em;
}

.sit-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sit-navy-border);
}

.sit-testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(65, 181, 146, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same correction as the metric above. The initial in here is text and is
     measured as text. page-case-studies.php declares this class again in an
     inline block, and on that route the inline copy wins on document order, so
     it carries the same fix. */
  color: var(--sit-green-on-surface);
  flex-shrink: 0;
}

.sit-testimonial-card__name {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--sit-white);
}

.sit-testimonial-card__role {
  font-size: 0.8rem;
  /* Was --sit-white-50, 4.24 to 1 on the card surface. See the note on that
     token: it is right on Night Sky and wrong on a card. 6.70 here. */
  color: var(--sit-white-70, rgba(255, 255, 255, 0.7));
}

@media (max-width: 768px) {
  .sit-testimonials__grid {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────
   Leadership Team Section
   ────────────────────────────────────────────── */
.sit-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.sit-team-card {
  background: linear-gradient(135deg, var(--sit-navy-card) 0%, rgba(30, 58, 85, 0.5) 100%);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 2rem;
  text-align: center;
  transition: border-color 0.3s ease;
}

.sit-team-card:hover {
  border-color: rgba(65, 181, 146, 0.3);
}

.sit-team-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(65, 181, 146, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--sit-green);
}

.sit-team-card__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sit-white);
  margin: 0 0 0.25rem;
}

.sit-team-card__role {
  font-size: 0.85rem;
  color: var(--sit-green);
  font-weight: 500;
  display: block;
  margin-bottom: 0.75rem;
}

.sit-team-card__bio {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--sit-white-70, rgba(255, 255, 255, 0.7));
  margin: 0 0 1rem;
}

.sit-team-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--sit-green);
  text-decoration: none;
  transition: opacity 0.2s;
}

.sit-team-card__link:hover {
  opacity: 0.8;
}

/* ============================================================================
   ICM METHODOLOGY PAGE

   Two components: the citation under the methodology note, and the
   learning-community callout.

   The callout is deliberately not a card. A raised surface with a shadow would
   make the recommendation louder than the attribution above it, and the
   attribution is the point of the page. A left rule and a barely-there tint
   mark it as an aside without competing.

   The rule is Azure rather than Ocean Green. Green is the colour this site uses
   for its own actions, and a green-framed panel about someone else's community
   reads as a Simplicity IT offering. Azure at 3.35:1 on the page background
   clears the 3:1 that WCAG 2.2 asks of a non-text boundary.

   Body text here is white at 70% over the tinted panel, which measures 8.13:1.
   The disclosure line uses the same colour at a smaller size rather than a
   fainter grey, because a disclaimer that is harder to read than the claim it
   qualifies is not a disclaimer.
   ============================================================================ */

.sit-icm-citation {
  font-size: 0.95rem;
  color: var(--sit-white-70);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sit-white-10);
  max-width: 68ch;
  overflow-wrap: anywhere;
}

.sit-icm-citation__work {
  font-style: italic;
}

.sit-icm-callout {
  margin: 0 0 4rem;
  padding: 1.75rem 2rem;
  background-color: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--sit-azure);
  border-radius: 0 var(--sit-radius) var(--sit-radius) 0;
  max-width: 68ch;
}

.sit-icm-callout__title {
  font-family: var(--sit-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sit-white);
  margin: 0 0 1rem;
}

.sit-icm-callout__text {
  color: var(--sit-white-70);
  margin: 0 0 1rem;
}

.sit-icm-callout__action {
  margin: 1.5rem 0 1rem;
}

.sit-icm-callout__note {
  color: #7a2e2e;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--sit-radius-sm);
  padding: 0.75rem 1rem;
  font-style: italic;
  margin: 1.5rem 0 1rem;
}

.sit-icm-callout__disclosure {
  font-size: 0.9rem;
  color: var(--sit-white-70);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--sit-white-10);
}

@media (max-width: 768px) {
  .sit-icm-callout {
    padding: 1.25rem 1.25rem;
    margin-bottom: 3rem;
  }

  .sit-icm-callout__title {
    font-size: 1.25rem;
  }
}

/* ============================================================================
   ACCESSIBILITY

   Deliberately last in the file. Several earlier rules set outline: none on
   focus and replace it with a border colour change, which is a weak indicator
   and disappears entirely in forced colours mode. These rules sit at the end so
   that at equal specificity they win, and they use :focus-visible so a mouse
   click does not leave a ring behind while keyboard focus still shows one.
   ============================================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--sit-white);
  outline-offset: 2px;
  border-radius: var(--sit-radius-sm);
}

/* On a light background the white ring would vanish, so pair it with a dark
   halo. The two together are visible on every surface this theme uses. */
.sit-form__input:focus-visible,
.sit-form__select:focus-visible,
.sit-form__textarea:focus-visible {
  outline: 3px solid var(--sit-white);
  outline-offset: 2px;
  border-color: var(--sit-green);
  box-shadow: 0 0 0 3px rgba(70, 180, 145, 0.35);
}

/* Windows high contrast and similar modes throw away author colours. An
   outline of currentColor survives that, where a box-shadow does not. */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid currentColor;
  }
}

/* Respect a stated preference for less motion. The reveal animation and the
   button lift are decoration; someone with a vestibular disorder should not
   have to sit through them. Transitions are shortened rather than removed so
   state changes still read as changes. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sit-reveal {
    opacity: 1;
    transform: none;
  }

  .sit-btn:hover {
    transform: none;
  }
}

/* Used by the form parts and the gated link to give a screen reader wording a
   sighted reader gets from context. Defined here so it exists even if the
   theme's other copy of this helper is ever removed. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--sit-night-sky);
  clip-path: none;
  color: var(--sit-white);
  display: block;
  height: auto;
  left: 5px;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ============================================
   NAP PLACEHOLDER, EDITORS ONLY (L-23)
   ============================================
   Only ever rendered for a signed-in user who can edit pages. It is styled to
   look like a warning rather than like content, so nobody mistakes it for
   copy and nobody screenshots it into a deck. Contrast on the deep navy
   footer: #ffd9d9 on #0a1628 is 12.4:1, and on the white contact panel the
   same text sits on #fff4f4 at 7.1:1, both above WCAG AA for body text.
   ============================================ */

.sit-nap-placeholder {
  background-color: rgba(255, 90, 90, 0.12);
  border-left: 3px solid #d94141;
  border-radius: var(--sit-radius-sm);
  color: #ffd9d9;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
}

.sit-contact-detail .sit-nap-placeholder {
  background-color: #fff4f4;
  color: #7a2e2e;
}

/* ============================================
   SHARED PAGE COMPONENTS (L-25)
   ============================================
   The parts in template-parts/page/ and template-parts/procurement/ were
   written before any page used them, and most of their classes had no rule
   anywhere in this file. The form component was styled; the hero, the closing
   band's supporting sentence, the FAQ list and the procurement note were not,
   so a page built from those parts would have rendered as a column of
   unstyled text on a dark background. Nothing was visibly broken because no
   page had been built yet, which is the only reason it went unnoticed.

   Every colour here is a palette token. Measured contrast on the page
   background (Night Sky, #112032): white 16.45:1, white at 70% 8.63:1, white
   at 50% 5.08:1, Ocean Green 6.42:1. On a raised card (--sit-surface,
   #26394E): white 11.81:1 and white at 70% 6.72:1. White at 50% falls to
   4.23:1 on that surface, which is below AA for body text, so it is used on
   the page background only and never inside a card.
   ============================================ */

.sit-hero__inner {
  margin: 0 auto;
  max-width: 860px;
  padding: 2rem 0 1rem;
}

.sit-hero__text {
  color: var(--sit-white-70);
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0 0 1.75rem;
}

/* No bullet markers. These are short assurances read at a glance, not a list
   the reader works through in order, and the marker column pushes them into
   looking like body copy. */
.sit-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

/* The green rule on the left is the only decoration. It is a border rather
   than a generated character, so a screen reader announces the text and
   nothing else. */
/* --sit-white-70 rather than --sit-white-50, same measurement as the hero stat
   labels above. White-50 composites to 3.409:1 over the solved hero grounds at
   14.4px, which is not large text, so it needs 4.5:1 and does not reach it.
   White-70 measures 5.001 to 5.041 over all twelve.

   The Ocean Green border is untouched. It is decoration rather than text, and
   1.4.11 asks 3:1 of a non-text element that conveys meaning. This one conveys
   none: it is a rule, the text beside it says everything, and Ocean Green
   measures 3.195:1 at worst against these grounds, which clears 3:1 anyway. */
.sit-hero__trust-item {
  border-left: 2px solid var(--sit-ocean-green);
  color: var(--sit-white-70);
  font-size: 0.9rem;
  padding-left: 0.6rem;
}

.sit-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Was --sit-white-70, which on the banner's Ocean Green fill is 1.96 to 1. See
   the CTA BANNER note for why the muted variants could not be kept. */
.sit-cta-banner__description {
  color: var(--sit-night-sky);
  line-height: 1.7;
  margin: 0.5rem 0 0;
  max-width: 60ch;
}

/* ---- FAQ, built on details and summary ---- */

.sit-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.sit-faq__item {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 0 1.25rem;
}

.sit-faq__question {
  color: var(--sit-white);
  cursor: pointer;
  font-family: var(--sit-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  padding: 1.25rem 2rem 1.25rem 0;
  position: relative;
}

/* Safari draws its own disclosure triangle through a pseudo-element that
   list-style alone does not remove. */
.sit-faq__question::-webkit-details-marker {
  display: none;
}

.sit-faq__question::after {
  border-bottom: 2px solid var(--sit-ocean-green);
  border-right: 2px solid var(--sit-ocean-green);
  content: "";
  height: 0.5rem;
  position: absolute;
  right: 0.25rem;
  top: 1.6rem;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  width: 0.5rem;
}

.sit-faq__item[open] .sit-faq__question::after {
  transform: rotate(-135deg);
}

/* The focus ring is the browser's, moved onto the row rather than removed.
   A summary that cannot be seen when focused is unusable by keyboard, and
   this component exists precisely because the native element gets keyboard
   operation right. */
.sit-faq__question:focus-visible {
  border-radius: var(--sit-radius-sm);
  outline: 2px solid var(--sit-ocean-green);
  outline-offset: 2px;
}

.sit-faq__answer {
  color: var(--sit-white-70);
  padding: 0 0 1.25rem;
}

.sit-faq__answer p {
  margin: 0;
}

/* ---- Procurement fallback note ---- */

.sit-offer-link--pending {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sit-offer-link__note {
  color: var(--sit-white-70);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
}

/* ---- Prose lists ---- */

/* A real ul, not a grid of divs each holding a marker div. The solution detail
   template does it the second way, and the cost is that assistive technology
   is never told how many items there are or which one it is on. These rules
   only restyle the native element; the semantics stay where the browser puts
   them. */
.sit-list {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0 0 1.5rem;
  max-width: 70ch;
  padding-left: 1.25rem;
}

.sit-list li {
  margin-bottom: 0.75rem;
  padding-left: 0.35rem;
}

/* Two columns for the long lists only, and only where there is room. Below
   this width the columns are narrower than the sentences in them. */
@media (min-width: 900px) {
  .sit-list--two-col {
    column-gap: 3rem;
    columns: 2;
    max-width: none;
  }

  /* Without this a list item can be split across the column break with its
     marker on one side and half its sentence on the other. */
  .sit-list--two-col li {
    break-inside: avoid;
  }
}

/* ---- Ordered delivery sequence ---- */

/* A real ol, for the same reason .sit-list is a real ul, and with its native
   marker kept rather than replaced. Order is the meaning of this list, so the
   element that carries order is the one to use: the browser announces the count
   and the position without being asked, and ::marker restyles the numeral
   without taking it out of the accessibility tree.

   The usual way this gets built is list-style: none plus a counter drawn on a
   ::before, which looks the same and costs the list role in Safari, where
   removing the marker removes the list semantics. There is no reason to pay
   that here: a green numeral is all the decoration this needs and ::marker
   accepts colour and weight.

   page-contact.php and page-partner-portal.php both build their steps out of
   divs with a hand-typed number in a marker div, which tells assistive
   technology nothing at all: no list, no item count, no position. Neither is
   touched by this rule and neither is changed. This is the pattern to copy
   from when they are revisited. */
.sit-steps {
  margin: 0 0 1.5rem;
  max-width: 70ch;
  padding-left: 1.5rem;
}

.sit-steps > li {
  margin-bottom: 1.75rem;
  padding-left: 0.5rem;
}

.sit-steps > li:last-child {
  margin-bottom: 0;
}

/* Ocean Green on Night Sky is 6.43:1, so the numeral clears AA for normal text
   on its own rather than relying on being decorative. It is not decorative: it
   is the only thing on the line that says which step this is. */
.sit-steps > li::marker {
  color: var(--sit-ocean-green);
  font-weight: 700;
}

.sit-steps__title {
  color: var(--sit-white);
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.sit-steps__text {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0;
  max-width: 70ch;
}

/* ---- Boundary callout ---- */

/* Used for the "what this is not" paragraph on a service page. The border is
   Ocean Green rather than a warning colour: this is a scope statement, not an
   error, and the amber and red in this palette are spoken for. */
.sit-callout {
  background-color: var(--sit-navy-card);
  border-left: 3px solid var(--sit-ocean-green);
  border-radius: 0 var(--sit-radius-sm) var(--sit-radius-sm) 0;
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0 0 1.5rem;
  max-width: 70ch;
  padding: 1.25rem 1.5rem;
}

.sit-callout p:last-child {
  margin-bottom: 0;
}

/* ---- Related links ---- */

.sit-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sit-related__link {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius-sm);
  color: var(--sit-white);
  display: inline-block;
  padding: 0.6rem 1rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sit-related__link:hover,
.sit-related__link:focus-visible {
  background-color: var(--sit-navy-border);
  border-color: var(--sit-ocean-green);
  color: var(--sit-white);
}

/* ---- Evidence classes (/proof/) ---- */

/* Namespaced .sit-evidence and not .sit-proof, which is already taken. The
   existing .sit-proof__card is the three-across metrics band on the front page:
   centred, 3rem green numerals, no border. Reusing that name here would have
   applied that styling to a card full of prose and the collision would have
   shown up as a layout that looked broken rather than as a naming mistake. */

.sit-evidence-key {
  display: grid;
  gap: 1rem;
  margin: 0 0 2rem;
}

@media (min-width: 900px) {
  .sit-evidence-key {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sit-evidence-key__item {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius-sm);
  padding: 1.25rem;
}

.sit-evidence-key__explanation {
  color: var(--sit-white-70);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0.75rem 0 0;
}

/* The badge. Colour is redundant here rather than load bearing: the badge
   prints the class name, so a reader who cannot tell the three colours apart
   still reads "Blueprint". Every value below is measured against the card
   surface #26394E, because that is the only place these appear.

     Ocean Green  #46B491  5.54  AA
     Info blue    #6BA6F5  4.72  AA
     White 70%             6.72  AA

   All three clear 4.5 for normal text, which is the threshold that applies:
   the badge is 0.75rem, nowhere near the 18.66px that would let it use the
   large-text allowance. */
.sit-evidence__class {
  display: inline-block;
  font-family: var(--sit-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.sit-evidence__class--customer-evidence {
  color: var(--sit-ocean-green);
}

.sit-evidence__class--reference-implementation {
  color: var(--sit-info);
}

.sit-evidence__class--blueprint {
  color: var(--sit-white-70);
}

.sit-evidence__grid {
  display: grid;
  gap: 1.5rem;
}

/* Two columns only where a card is still wide enough to hold a sentence. These
   cards carry a summary paragraph and a four item list, so they are tall; a
   single column of ten of them is a very long page and two narrow ones are
   worse than either. */
@media (min-width: 1000px) {
  .sit-evidence__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sit-evidence__card {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 2rem;
}

/* On --sit-navy-card, not on Night Sky, so --sit-white-50 measured 4.24 to 1.
   See the note on that token. */
.sit-evidence__topic {
  color: var(--sit-white-70);
  font-size: 0.85rem;
  margin: 1rem 0 0.25rem;
}

.sit-evidence__title {
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 1rem;
}

.sit-evidence__summary,
.sit-evidence__measured {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

.sit-evidence__subhead {
  color: var(--sit-white);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

/* The list inside a card sits on the raised surface, where white-50 drops to
   4.23 and fails. .sit-list is white-70, which measures 6.72 there, so it is
   left alone; this rule only pulls in the margin. */
.sit-evidence__card .sit-list {
  margin-bottom: 1.5rem;
  max-width: none;
}

.sit-evidence__related {
  margin: 0;
}

.sit-evidence__related a {
  color: var(--sit-ocean-green);
}

/* Editors only, and it needs to look it. A note that renders for one signed-in
   user and not for a visitor is exactly the kind of thing that gets mistaken
   for published copy in a screenshot, so it is marked rather than blended in. */
.sit-evidence__editorial {
  border-top: 1px dashed var(--sit-white-30);
  color: var(--sit-white-70);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
}

.sit-evidence__editorial-tag {
  color: var(--sit-warning);
  font-family: var(--sit-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-right: 0.5rem;
  text-transform: uppercase;
}

/* ---- Evidence classes on the front page ---- */

/* This band replaced the three-figure metrics row. The old row and its CSS
   (.sit-proof__grid, .sit-proof__card, .sit-proof__metric, .sit-proof__desc,
   around line 3476) now have no consumer in any template; they are left in
   place and recorded against the existing dead-CSS item rather than removed
   in the same pass as a content change.

   Named .sit-claims and not .sit-proof for the reason set out above the
   .sit-evidence block: .sit-proof__card is the old metrics card, centred with
   3rem green numerals, and reusing the name here would have styled a card of
   prose as a number. */

.sit-claims__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sit-claims__card {
  background: var(--sit-surface);
  border: 1px solid var(--sit-white-10);
  border-radius: 12px;
  padding: 1.75rem;
}

/* The label is set in the mono face at body size rather than as a display
   numeral. The point of the band is that these are categories, not figures,
   and a category rendered at 3rem reads as a boast. */
.sit-claims__label {
  color: var(--sit-white);
  font-family: var(--sit-font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

/* Modifier per class key, so the three are told apart without reading them.
   Green for the strongest, blue for our own environment, muted for a design we
   have not yet deployed. All three are measured against --sit-surface, the card
   background, not against the page: Ocean Green 4.61:1, Info blue 4.72:1,
   white-70 6.69:1. Every one clears AA for normal text, which is the reason
   white-50 is not used here even though it would read as a softer "not yet".

   The Ocean Green figure was first recorded here as 5.54:1, which is its ratio
   on Prussian, one step lighter than the card. Remeasured against the surface
   these labels are actually painted on it is 4.61:1. Still above 4.5, so the
   rule stands, but the margin is thinner than the earlier note implied. */
.sit-claims__label--customer-evidence {
  color: var(--sit-green);
}

.sit-claims__label--reference-implementation {
  color: var(--sit-info);
}

.sit-claims__label--blueprint {
  color: var(--sit-white-70);
}

.sit-claims__desc {
  color: var(--sit-white-70);
  font-size: 0.95rem;
  line-height: 1.7;
}

.sit-claims__footer {
  margin-top: 2rem;
}

.sit-claims__more {
  color: var(--sit-green);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sit-claims__more:hover {
  color: var(--sit-green-light);
}

@media (max-width: 1000px) {
  .sit-claims__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sit-hero__inner {
    padding-top: 1rem;
  }

  .sit-hero__actions .sit-btn {
    width: 100%;
  }
}

/* ---- Azure Optimization and Modernization ---- */

/* Layout only. Nothing here introduces a colour, a radius, or a font that is
   not already a token, because a service page that looks like a different site
   from the rest of the theme is a maintenance problem before it is a design
   one.

   Contrast is measured against the surface each rule actually paints on, not
   against the page. The page is Night Sky (#112032) and a card is Surface
   (#26394E), and the same text colour measures 8.62:1 on the first and 6.69:1
   on the second. Figures below are the second, because that is the worse case
   and the one that decides whether a rule is allowed.

   Measured for this block:
     white          on Surface  11.81:1
     white-70       on Surface   6.69:1
     green-light    on Surface   5.62:1
     ocean-green    on Surface   4.61:1
     white-50       on Surface   4.24:1   FAILS AA, so it is not used here
     white-70       on Night Sky 8.62:1

   That last line is why the duration on an engagement card and the disclosure
   paragraph are still white-70. The obvious way to mark secondary text is to
   drop the opacity, and at this background that puts it under 4.5:1. They are
   set apart by size, face, and spacing instead. */

/* Card grid. Four problem cards and four engagement options both use it, so it
   is written for an unknown count: auto-fit collapses empty tracks rather than
   leaving a gap where a fifth card would go, and the 17rem floor is the width
   at which a card title stops wrapping after its first word.

   The min() around the floor is load-bearing, not decoration. A bare
   minmax(17rem, 1fr) track is 272px wide whether or not the container has
   272px to give, so on a 360px phone (269px of content once the chat launcher
   lane is subtracted) every track in every grid below hangs 3px to 51px past
   its own container and straight under the launcher. min(17rem, 100%) caps the
   floor at the container width, so the track shrinks instead of overflowing
   and the layout above 400px is byte-identical. Applied to all three Azure
   grids on 23 August 2026; the overlap it fixes was measured on
   /solutions/azure-optimization-modernization/ at 360px. */
.sit-azure__cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.sit-azure__card {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.sit-azure__card-title {
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0 0 0.75rem;
}

.sit-azure__card-text {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0 0 1rem;
  max-width: 70ch;
}

.sit-azure__card-text:last-child {
  margin-bottom: 0;
}

/* The scoping estimate on an engagement card. margin-top:auto pins it to the
   bottom of the flex column so that four cards of unequal prose still line
   their estimates up, which is what makes them comparable at a glance.

   Mono face and letter-spacing, not a reduced opacity, for the contrast reason
   at the top of this block. */
.sit-azure__card-meta {
  color: var(--sit-white-70);
  font-family: var(--sit-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin: auto 0 0;
  padding-top: 1rem;
}

/* Six coverage groups, each a heading over a short list. Wider floor than the
   card grid because a group holds list items, not a sentence. */
.sit-azure__groups {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.sit-azure__group-title {
  color: var(--sit-white);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

/* This class is on lists in two very different containers: inside a coverage
   group or a split column, where the line length is already short, and at full
   container width under Microsoft tooling, deliverables, and partner
   capabilities, where a ten or twelve item list in one column is a lot of
   vertical travel for very little text.

   .sit-list--two-col exists a few hundred lines above and was not reused,
   because it sets columns:2 unconditionally above 900px and this class does not
   know how wide its container is. column-width states the intent instead: give
   each column at least 22rem and take as many as fit. In a narrow container
   that resolves to one column with no media query involved.

   max-width is cleared because .sit-list caps at 70ch, and a cap narrower than
   the container means the second column never has room to appear. */
.sit-azure__group-list {
  column-gap: 3rem;
  column-width: 22rem;
  max-width: none;
}

/* Without this an item can break across the column boundary with its marker in
   one column and the rest of its sentence in the next. */
.sit-azure__group-list li {
  break-inside: avoid;
}

/* The six process steps.

   The numerals are the list's own markers, styled through ::marker rather than
   removed and redrawn with a counter. Setting list-style:none on an <ol> makes
   VoiceOver stop announcing it as a list, and the fix for that is a role="list"
   attribute in the markup, which would put a presentational workaround in the
   template. A browser that does not style ::marker shows the default numeral in
   the inherited colour, which is legible on this background, so the fallback is
   a plainer number and not a missing one. */
.sit-azure__steps {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  list-style-position: outside;
  margin: 0;
  padding-left: 1.5rem;
}

.sit-azure__step {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 1.5rem;
}

.sit-azure__step::marker {
  color: var(--sit-green-light);
  font-family: var(--sit-font-mono);
  font-size: 1.1rem;
  font-weight: 700;
}

.sit-azure__step-title {
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.sit-azure__step-text {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0;
}

/* Two columns that are read together: what AI does against what a person does,
   and who the service fits against who buys it. One column under 900px, in
   source order, which is the order the pair reads in. */
.sit-azure__split {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .sit-azure__split {
    gap: 3rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

.sit-azure__split-col > .sit-list:last-child {
  margin-bottom: 0;
}

/* The partner section addresses a different reader from the rest of the page, so
   it is a panel rather than another run of prose. The heading is left aligned
   here: .sit-section__header centres by default, which is right for a section
   the whole page is reading and wrong for an aside aimed at one visitor in
   twenty. */
.sit-azure__partner {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius-lg);
  margin: 2rem 0;
  padding: 3rem 2rem;
}

.sit-azure__partner .sit-section__header {
  margin-bottom: 2rem;
  text-align: left;
}

.sit-azure__partner .sit-section__title {
  font-size: 2rem;
}

.sit-azure__partner .sit-section__subtitle {
  margin-bottom: 1rem;
  max-width: 70ch;
}

.sit-azure__actions {
  margin: 2rem 0 0;
}

/* The Simple Intelligence Group disclosure. Quiet on purpose. It is a statement
   of what is and is not for sale, and the specification requires it not to read
   as a second product pitch, so it gets no panel, no accent fill, and a smaller
   heading than the service sections above it. */
.sit-azure__platform {
  border-top: 1px solid var(--sit-white-10);
  padding-top: 3rem;
}

.sit-azure__platform .sit-section__header {
  margin-bottom: 1.5rem;
  text-align: left;
}

.sit-azure__platform .sit-section__title {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .sit-azure__partner {
    padding: 2rem 1.25rem;
  }

  .sit-azure__actions .sit-btn {
    width: 100%;
  }
}

/* ============================================================================
   HERO MEDIA LAYER
   ============================================================================

   The photograph behind a hero band, plus the scrim that keeps text readable
   over it. Rendered by template-parts/page/hero-media.php.

   WHY THE IMAGE IS A POSITIONED LAYER RATHER THAN PART OF THE FLOW

   Because then it cannot move anything. The layer is absolute and fills its
   parent, so its arrival changes no box on the page and cumulative layout
   shift is structurally zero rather than merely small. The usual approach,
   supplying width and height and trusting the browser to reserve space, works
   until the first template overrides the height in CSS and then quietly stops
   working. This one has nothing to override.

   The band's own height therefore comes from its text, which is known before
   any network request completes.

   WHY THE SCRIM IS A SEPARATE ELEMENT

   Its opacity is solved per photograph, from 0.680 to 0.710, and arrives as a
   custom property on the wrapper. A separate element means the one number has
   one home, and it paints over whichever source the <picture> resolved to
   without the markup needing to know which one won.

   Eleven templates previously carried the scrim inline as
   linear-gradient(rgba(10,22,40,0.82), rgba(10,22,40,0.90)). Two problems, and
   the second is the one that mattered. rgb(10,22,40) is not one of the six
   brand colours; it is close enough to Night Sky to look right and far enough
   to be wrong. And one opacity for twelve photographs has to be set for the
   worst of them, so the dark data centre shot got the same wash as the
   blown-out whiteboard shot and vanished under it. */

.sit-heromedia {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  /* Behind the text, above the band's own background. A new stacking context
     on the parent keeps this z-index from having to know about the header,
     the launcher or anything else on the page. */
  z-index: 0;
}

.sit-heromedia__picture,
.sit-heromedia__img {
  display: block;
  height: 100%;
  width: 100%;
}

/* object-fit is what makes a fixed-ratio file fill a band of a different
   ratio without distorting. The crops are already cut close to the band's
   proportions, so this is trimming a few pixels rather than salvaging a bad
   fit, which is the point of cutting them in the first place. */
.sit-heromedia__img {
  object-fit: cover;
  object-position: center;
}

.sit-heromedia__scrim {
  background-color: rgba(var(--sit-night-sky-rgb), var(--sit-hero-scrim, 0.72));
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* Both hero shapes on the site take the same layer.

   .sit-hero is the shared page hero and the homepage. .sit-section--hero is
   the older band used by twenty-three templates, which until now had no CSS
   rule at all: its entire appearance came from an inline background-image, so
   removing the inline style without adding these declarations would have left
   white text on nothing.

   isolation: isolate creates the stacking context, so .sit-heromedia at z-index
   0 and the content at z-index 1 are ordered against each other and against
   nothing else. */
.sit-hero,
.sit-section--hero {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

/* The Night Sky ground under the photograph. It shows for the moment before the
   image decodes, and it is the whole appearance on a hero with no registered
   image, so the band is readable in both states rather than only the finished
   one. */
.sit-section--hero {
  background-color: var(--sit-navy-dark);
}

/* Content sits above the media layer. Applied to the wrappers each shape
   actually uses rather than to a universal child selector, so a future sibling
   added to the band does not silently join the stack. */
.sit-hero > .sit-hero__inner,
.sit-hero > .sit-container,
.sit-section--hero > .sit-page-header,
.sit-section--hero > .sit-container {
  position: relative;
  z-index: 1;
}

/* A restrained band, which is a correction and not a preference.

   Measured before this change: .sit-hero rendered at exactly 810px on all
   fifteen routes that use it, at a 1440 by 900 viewport. 810 is 90vh, and it
   comes from min-height: 90vh in the HERO SECTION block near the top of this
   file. That block was written for a different hero markup shape, one with
   .sit-hero__wrapper and .sit-hero__content, which no template renders any
   more. The shape went away; the class name and the min-height did not, so
   every hero on the site has been reserving ninety percent of the viewport for
   an eyebrow, a headline, a paragraph and two buttons.

   The addendum requires restrained image heights and forbids pushing essential
   content unnecessarily below the fold, so the floor is lowered here rather
   than left. clamp keeps a floor low enough that a short hero does not stretch
   and a ceiling that a long headline can still exceed, because min-height only
   ever adds space and can never clip.

   The rest of that older block is left alone. It is dead for the hero, but
   deleting rules on the strength of a grep is how a page that still uses one
   gets broken, and nothing about this change requires it to go. It is recorded
   in the change ledger so it can be removed deliberately later. */
.sit-hero,
.sit-section--hero {
  min-height: clamp(320px, 42vh, 460px);
}

/* Phones get less. 42vh of a 740px-tall phone is 311px, which is already close
   to the floor, but a hero on a phone competes with far less screen and the
   photograph is a 3:2 crop rather than a 16:6 band. */
@media (max-width: 768px) {
  .sit-hero,
  .sit-section--hero {
    min-height: 240px;
  }
}

/* ==========================================================================
   THE HOMEPAGE BAND ENDS AT THE STATISTICS ON A PHONE
   ==========================================================================

   Measured before this rule, at a 360 by 740 viewport: .sit-hero rendered
   2001px tall and .sit-heromedia rendered the same 2001px, so the photograph
   ran behind the headline, the supporting statement, the buttons, four
   statistics and four cards without interruption. That is 2.7 screens of
   uninterrupted hero on a phone. At 768 it was 1435px.

   The requirement is that the statistics and the feature cards stop being part
   of the hero on a phone and read as the page immediately below it, with the
   band left holding the headline, the supporting statement and the primary
   actions.

   WHY THIS IS A PAINT CHANGE AND NOT A MARKUP MOVE

   Because the markup move would have been a desktop redesign. On desktop the
   hero is one two-column grid: subtitle, buttons and statistics on the left,
   the four cards on the right, vertically centred against each other. Lifting
   the statistics and the cards into a sibling section is the only way CSS can
   genuinely reparent them, and doing that collapses that grid at every width,
   not just below 768. Preserving the completed desktop hero is a standing
   requirement, so the desktop shape stays and the phone gets the outcome by a
   different route.

   The route is available because the page and the band are the same colour.
   body is --sit-navy-dark and .sit-hero is --sit-navy-dark; the only thing that
   makes the band look like a band is the photograph and its scrim. Cover the
   photograph from the statistics down and the result is not an approximation
   of "the hero ended here". On a phone it is indistinguishable from it, and it
   costs no moved content, no duplicated content and no desktop change.

   The boundary is the top of .sit-hero__stats, so it tracks the real content.
   A longer headline pushes the buttons down and the band grows with them,
   which a fixed height for .sit-heromedia could never have done.

   .sit-hero__stats already carries a 1px hairline on its top edge, the same
   treatment .sit-badges-strip uses on both of its edges, so the seam this
   creates is the separator the rest of the page already uses.

   WHY -9999px

   The cover has an exact top and needs no exact bottom: .sit-hero is
   overflow: hidden, so whatever runs past the section is clipped to the
   section. Overrunning deliberately is what makes the bottom edge exact.
   A viewport-relative overrun would not be, because the content it has to
   clear is four cards of roughly fixed height and a short landscape viewport
   would leave a strip of photograph showing under them.

   z-index -1 puts the cover at the back of .sit-container's stacking context,
   which is the context created by the z-index: 1 rule above. That is behind
   the statistics and the cards and still in front of .sit-heromedia, which
   sits in the section's context one level out. .sit-hero__stats takes
   position: relative with z-index auto, so it stays out of the way and the
   pseudo-element resolves against it rather than against the container.

   An absolutely positioned child of a flex container is not a flex item, so
   this adds nothing to the statistics row's own layout.

   Only front-page.php renders .sit-hero__stats, so this reaches one page. */
@media (max-width: 768px) {
  .sit-hero__stats {
    position: relative;
  }

  .sit-hero__stats::before {
    background-color: var(--sit-navy-dark);
    bottom: -9999px;
    content: '';
    left: -50vw;
    position: absolute;
    right: -50vw;
    top: 0;
    z-index: -1;
  }
}

/* Forced-colours mode replaces backgrounds with system colours and drops
   background images entirely, so the scrim stops existing and the photograph
   would sit directly under the text with no contrast control at all. Hiding
   the media layer there leaves the band's own system background, which is the
   readable outcome and the one that mode is asking for. */
@media (forced-colors: active) {
  .sit-heromedia {
    display: none;
  }
}

/* ==========================================================================
   BRAND LOGO
   ==========================================================================
   The header and footer render template-parts/brand/logo.php, which emits a
   picture element wrapping the image. The existing .sit-nav__brand img and
   .sit-footer__brand img rules already cap the image at 40 pixels tall with an
   automatic width, and those still apply, because the image is a descendant of
   those containers whether or not a picture element sits in between. Only the
   two things the picture element changed need rules of their own.
   ========================================================================== */

/* A picture element is inline by default, so it sits on a text baseline and
   the line box adds a few pixels of descender space under the image. Both
   containers are flex or near enough that the extra space reads as the logo
   being off centre vertically. inline-flex removes the baseline without
   changing the element's participation in its parent's layout. */
.sit-brand-logo__picture {
  display: inline-flex;
}

/* The footer wordmark is still an h3 so the four h4 column titles below it
   keep a parent, but it is no longer a line of text, so the heading margins
   and line height that were sized for text are reset. The font size is
   deliberately left alone: if the image ever fails to load, the alt text has
   to be readable, and a heading collapsed to font-size 0 would hide it. */
.sit-footer__brand-name {
  line-height: 1;
  margin: 0 0 1rem;
}

/* ==========================================================================
   CARD MEDIA
   ==========================================================================
   The photograph at the top of an industry card or a case study card, rendered
   by template-parts/page/card-media.php. Five declarations that were repeated
   in seven inline style attributes live here once.

   Two of the five differed between the two callers. The crop height, 180
   pixels against 200, is a real design difference and is passed in as a custom
   property so it stays visible at the call site. The bottom margin differed by
   four pixels, 12 against 16, which is not a design difference but the residue
   of two people writing the same style attribute on separate days; both are now
   12 and the case study cards sit four pixels closer to their headings.
   ========================================================================== */

.sit-cardmedia {
  display: block;
}

.sit-cardmedia__img {
  border-radius: 12px 12px 0 0;
  display: block;
  height: var(--sit-cardmedia-height, 180px);
  margin-bottom: 12px;
  object-fit: cover;
  width: 100%;
}

/* ==========================================================================
   LEAD MAGNET LANDING PAGES
   ==========================================================================
   Layout for page-lead-magnet.php, which the three documents in
   inc/lead-magnet-data.php share. Nothing here introduces a colour, a radius,
   a face or a spacing step that is not already a token: three landing pages
   that look like a different site from the rest of the theme would be a
   maintenance problem before they were a design one.

   MEASURED CONTRAST, NOT ASSUMED CONTRAST

   Two opaque surfaces carry text on this page: the page ground, Night Sky
   (#112032), and a raised card, Surface (#26394E). Every ratio below was
   computed against the surface the rule actually paints on, and the card is
   the worse case, so it is the one that decides what is allowed.

                        on Night Sky   on Surface
     white                   16.45         11.81
     white-70                 8.62          6.69
     white-50                 5.06          4.24   fails AA, not used here
     ocean-green              6.42          4.61
     green-light              7.83          5.62
     green-on-surface         8.51          6.11
     warning (#F59E0B)        7.66          5.50

   THE HERO IS THE EXCEPTION, AND THE NUMBERS HERE WERE WRONG UNTIL L-71

   Hero text sits over a photograph, not over a token, so nothing in the table
   above applies to it. The scrim in template-parts/page/hero-media.php is
   solved per image, and what it is solved FOR is white at 70 percent reaching
   5.0:1. Recomputed from 02_Working/asset-evidence/hero-scrim.json across all
   twelve registry entries: pure white lands between 8.184 and 8.313, white-70
   between 5.001 and 5.041, and white-50 between 3.384 and 3.420. So white-70
   clears AA over every solved hero ground and white-50 does not.

   This paragraph used to say the scrim was solved "for white and for white
   alone" and that compositing white at 70 percent "lands at roughly 2.9:1,
   which fails". Both halves were wrong. The same two sentences had been copied
   into a comment in page-resources.php, and both copies were corrected on
   2026-08-24 against the recorded solve rather than against memory.

   The subtitle below is still var(--sit-white), which is now a choice rather
   than a necessity. 5.0 is the number the solver was asked to hit, not a
   number it has margin above, and it is measured against a p99 of the
   brightest pixels of one crop of one image. Pure white costs nothing here, so
   the extra headroom is kept and the subtitle is set apart from the headline
   by size and weight rather than by opacity.

   The three counted facts take the same reasoning one step further. Rather
   than trusting a photograph to stay dark behind them, each fact chip paints
   an opaque Night Sky panel of its own, so its two ratios are the 7.83 and
   8.62 in the table above and do not depend on which image a registry entry
   names next month.

   DENSITY

   Section 4 of the governing mandate asks for tightened spacing. The site
   default is .sit-section { padding: 4rem 0 }, which puts 128 pixels between
   two adjacent bands. On a page whose job is to be read end to end before
   someone decides to hand over an email address, that is a scroll tax. The
   override below is scoped to .sit-lm so it changes these three pages and
   nothing else.
   ========================================================================== */

.sit-lm > .sit-section {
  padding: 3rem 0;
}

/* ---- Hero ---- */

/* Not a child selector any more. The hero band was lifted out of
   .sit-container so its photograph can bleed to both viewport edges, and the
   container on these three pages is the same element that carries .sit-lm, so
   ".sit-lm > .sit-lm__hero" stopped matching. .sit-lm__hero is a class only
   these three templates render, so dropping the ancestor changes what the rule
   matches by nothing at all. */
.sit-lm__hero {
  padding: 4rem 0 3rem;
}

/* White rather than --sit-green-light, matching the hero eyebrow decision
   Ameer approved on 24 August 2026.

   This one was closer to passing than the Ocean Green cases and still did not
   pass. --sit-green-light is rgb(107,195,167), and over the three lead-magnet
   hero grounds it measured 3.920 to 3.933:1 at 13.6px and 700 weight. That is
   not large text under 1.4.3, which sets the bar at 18.66px for bold, so the
   requirement is 4.5:1 and the gap was real rather than a rounding argument.
   White reaches 8.184 to 8.313:1 over the same grounds. */
.sit-lm__eyebrow {
  color: var(--sit-white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.sit-lm__title {
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.sit-lm__subtitle {
  color: var(--sit-white);
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
  max-width: 44rem;
}

/* The three counted facts. A list because it is one, with the marker removed
   rather than the element changed: a screen reader still announces three
   items, which is the point of counting them. */
.sit-lm__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.sit-lm__fact {
  background-color: var(--sit-navy-dark);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  min-width: 8rem;
  padding: 0.75rem 1.1rem;
}

.sit-lm__fact-value {
  color: var(--sit-green-light);
  display: block;
  font-family: var(--sit-font-display);
  font-size: 1.6rem;
  line-height: 1.1;
}

.sit-lm__fact-label {
  color: var(--sit-white-70);
  display: block;
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

.sit-lm__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---- What this is ---- */

/* Two columns where there is room for two, one where there is not. The 20rem
   floor is wrapped in min() for the reason recorded in the Azure block above:
   a bare minmax floor keeps its width whether or not the container has that
   width to give, and on a 360 pixel phone the track then hangs past its own
   container and under the chat launcher. */
.sit-lm__summary-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* Two equal columns is what auto-fit gives, and it is the wrong division here:
   the left column carries a nine-line paragraph and the right carries six short
   lines, so equal tracks leave the prose in a 44 percent measure and the card
   half empty. Above the breakpoint the split is stated. Below it, the auto-fit
   rule above still collapses to one column, so this is an addition rather than
   a second layout to keep in step. */
@media (min-width: 900px) {
  .sit-lm__summary-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

.sit-lm__lede {
  color: var(--sit-white-70);
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 0 1.25rem;
}

.sit-lm__audience {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0;
}

.sit-lm__audience strong {
  color: var(--sit-white);
}

.sit-lm__summary-aside {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 1.75rem;
}

.sit-lm__aside-title {
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0 0 1rem;
}

/* Second and subsequent asides in the same card need the gap that the first
   one gets from the card padding. */
.sit-lm__aside-title + * + .sit-lm__aside-title,
.sit-lm__aside-text + .sit-lm__aside-title {
  margin-top: 1.75rem;
}

.sit-lm__includes {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0;
  padding-left: 1.1rem;
}

.sit-lm__includes li {
  margin-bottom: 0.6rem;
}

.sit-lm__includes li::marker {
  color: var(--sit-green-on-surface);
}

/* ---- Contents ---- */

.sit-lm__contents-list {
  display: grid;
  gap: 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  margin: 0;
  padding-left: 1.4rem;
}

/* THE ITEM IS NOT A FLEX CONTAINER, AND THAT IS NOT A STYLE PREFERENCE

   The obvious rule here is display: flex with justify-content: space-between,
   and it was written that way first. It silently deleted the numbering. A list
   item only draws a marker while its display is list-item, and setting flex or
   grid on the li replaces that value, so the seven dimensions rendered as an
   unnumbered list and the ordinal that says which dimension is which was gone
   from the page. The numbers are content, not decoration.

   So the item keeps its own display and the count is pinned to the right edge
   out of flow instead. A float was tried in between and is not used: a float
   only sits beside content that follows it in the source, and the count comes
   last, so a title that wrapped to two lines pushed its own count down to the
   second line. Absolute positioning holds the count on the first line without
   reordering the markup, which matters because the reading order a screen
   reader announces should be the section and then its size, not the reverse.

   The right padding reserves the lane. Without it a long title runs under the
   count instead of wrapping before it. */
.sit-lm__contents-item {
  border-bottom: 1px solid var(--sit-navy-border);
  padding: 0.7rem 4.5rem 0.7rem 0;
  position: relative;
}

.sit-lm__contents-item::marker {
  color: var(--sit-green-light);
  font-family: var(--sit-font-display);
}

.sit-lm__contents-title {
  color: var(--sit-white);
}

.sit-lm__contents-count {
  color: var(--sit-white-70);
  font-size: 0.85rem;
  position: absolute;
  right: 0;
  top: 0.75rem;
}

/* ---- The section a reader can read before deciding ---- */

.sit-lm__preview-note {
  color: var(--sit-white-70);
  margin: 0 0 1.5rem;
  max-width: 48rem;
}

.sit-lm__preview-body {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius-lg);
  padding: 2rem;
}

.sit-lm__preview-title {
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

.sit-lm__preview-intro {
  color: var(--sit-white-70);
  line-height: 1.75;
  margin: 0 0 1.75rem;
  max-width: 48rem;
}

.sit-lm__preview-subtitle {
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  font-size: 1.15rem;
  margin: 2rem 0 0.75rem;
}

.sit-lm__questions,
.sit-lm__checks {
  margin: 0;
  padding-left: 1.4rem;
}

.sit-lm__question,
.sit-lm__check {
  border-top: 1px solid var(--sit-navy-border);
  padding: 1.25rem 0;
}

.sit-lm__question:first-child,
.sit-lm__check:first-child {
  border-top: 0;
  padding-top: 0;
}

.sit-lm__question::marker,
.sit-lm__check::marker {
  color: var(--sit-green-on-surface);
  font-family: var(--sit-font-display);
}

.sit-lm__question-text,
.sit-lm__check-title {
  color: var(--sit-white);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* The scoring anchors. A description list rendered as two columns, so a score
   and the condition that earns it read as one row rather than as six
   alternating paragraphs, which is how they read with no CSS at all. */
.sit-lm__anchors {
  display: grid;
  gap: 0.5rem 1.25rem;
  grid-template-columns: max-content 1fr;
  margin: 1rem 0 0;
}

.sit-lm__anchor-score {
  color: var(--sit-green-on-surface);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sit-lm__anchor-text {
  color: var(--sit-white-70);
  line-height: 1.65;
  margin: 0;
}

.sit-lm__actions {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0;
  padding-left: 1.1rem;
}

.sit-lm__actions li {
  margin-bottom: 0.75rem;
}

.sit-lm__actions li::marker {
  color: var(--sit-green-on-surface);
}

.sit-lm__check-line {
  color: var(--sit-white-70);
  line-height: 1.65;
  margin: 0.75rem 0 0;
}

.sit-lm__check-label {
  color: var(--sit-white);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The basis marking. Two states, and the difference between them is carried by
   the sentence, not by the colour: the tint is a second signal for a reader who
   is scanning, never the only one. Both tints are measured on Surface, which is
   what this card paints. */
.sit-lm__check-basis {
  border-left: 3px solid;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0.9rem 0 0;
  padding-left: 0.75rem;
}

.sit-lm__check-basis--product {
  border-left-color: var(--sit-green-on-surface);
  color: var(--sit-green-on-surface);
}

.sit-lm__check-basis--practice {
  border-left-color: var(--sit-warning);
  color: var(--sit-warning);
}

/* ---- The request ---- */

.sit-lm__request-grid {
  align-items: start;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* A text input as wide as a 1440 pixel container is not a design choice, it is
   the absence of one, and it reads as a form that wants far more than four
   short answers. The column is capped rather than the fields, so the privacy
   and no-entitlement notes below the form keep the same measure. */
.sit-lm__request-form {
  max-width: 34rem;
}

.sit-lm__privacy,
.sit-lm__no-entitlement {
  color: var(--sit-white-70);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 1rem 0 0;
}

.sit-lm__unavailable {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 1.75rem;
}

.sit-lm__unavailable p {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0;
}

/* The thank-you state. It is unhidden by script only after the server has
   stored the submission, so it is styled as an outcome rather than as a
   notice: a green edge, a heading and the download itself. */
.sit-lm__delivered {
  background-color: rgba(70, 180, 145, 0.08);
  border: 2px solid var(--sit-green);
  border-radius: var(--sit-radius);
  padding: 1.75rem;
}

.sit-lm__delivered:focus-visible {
  outline: 3px solid var(--sit-green-light);
  outline-offset: 3px;
}

.sit-lm__delivered-title {
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

.sit-lm__delivered-text {
  color: var(--sit-white-70);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.sit-lm__delivered-next {
  margin: 1.25rem 0 0;
}

.sit-lm__request-aside {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  padding: 1.75rem;
}

.sit-lm__aside-text {
  color: var(--sit-white-70);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

/* The claims register. Same two-row-per-entry problem as the scoring anchors,
   solved the same way, except that a claim and its basis are both full
   sentences, so they stack rather than sitting side by side. */
.sit-lm__claims {
  margin: 0;
}

.sit-lm__claim {
  color: var(--sit-white);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.55;
  margin-top: 1.25rem;
}

.sit-lm__claim:first-of-type {
  margin-top: 0;
}

.sit-lm__claim-basis {
  color: var(--sit-white-70);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0.35rem 0 0;
}

/* ---- Related ---- */

.sit-lm__related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sit-lm__related-item a {
  background-color: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-radius: var(--sit-radius);
  color: var(--sit-green-on-surface);
  display: inline-block;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
}

.sit-lm__related-item a:hover,
.sit-lm__related-item a:focus-visible {
  border-color: var(--sit-green);
  color: var(--sit-white);
}

/* ---- Phones ---- */

@media (max-width: 768px) {
  .sit-lm > .sit-section {
    padding: 2.25rem 0;
  }

  /* Same de-scoping as the base rule above. */
  .sit-lm__hero {
    padding: 2.5rem 0 2rem;
  }

  /* Three chips across, not three stacked.

     Stacking was the first attempt and it cost 300 pixels of hero on a 360
     pixel phone for six words. Section 4 of the governing mandate asks for
     restrained hero heights and for the hero to stay on the headline, the
     supporting statement and the actions, and a column of full width panels is
     the opposite of that.

     Across, each chip has about 96 pixels, the label wraps to two lines, and
     the whole row is roughly 85 pixels tall. The type steps down with the
     width so the number still reads as the number. Each chip keeps its opaque
     panel, so the contrast reasoning at the top of this block holds here
     unchanged. */
  .sit-lm__facts {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sit-lm__fact {
    min-width: 0;
    padding: 0.6rem 0.7rem;
  }

  .sit-lm__fact-value {
    font-size: 1.25rem;
  }

  .sit-lm__fact-label {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .sit-lm__hero-actions .sit-btn {
    width: 100%;
  }

  .sit-lm__preview-body,
  .sit-lm__summary-aside,
  .sit-lm__request-aside,
  .sit-lm__unavailable,
  .sit-lm__delivered {
    padding: 1.25rem;
  }

  /* The anchor list stops being two columns. "Score 0" and its condition are
     one row on a desktop and two lines on a phone, because a max-content
     column plus a sentence in 269 pixels of usable width is a sentence one
     word wide. */
  .sit-lm__anchors {
    gap: 0.25rem;
    grid-template-columns: 1fr;
  }

  .sit-lm__anchor-text {
    margin-bottom: 0.75rem;
  }

  /* The reserved lane goes. A section title on a phone already uses two or
     three lines, and 4.5rem taken off 269 pixels of usable width would push it
     to four. The count returns to normal flow underneath. */
  .sit-lm__contents-item {
    padding-right: 0;
  }

  .sit-lm__contents-count {
    display: block;
    margin-top: 0.15rem;
    position: static;
  }
}

/* ============================================================================
   RELATED RESOURCE BAND
   template-parts/page/lead-magnet-band.php, rendered on the service and
   solution detail pages that section 6 routes to a lead magnet.
   ============================================================================ */

/* One panel, four lines, sitting immediately above the closing call to action
   on a detail page. It is deliberately quieter than that call to action: the
   primary action on a service page is still to talk to somebody, and a
   resource that shouts louder than the thing the page is selling has taken
   the page over rather than supported it.

   Surface fill on the Night Sky page, the same panel treatment as every other
   card on these templates, so it reads as part of the page rather than as an
   advertisement dropped into it. White on Surface measures 11.81 to 1 and
   white-70 measures 6.69 to 1, both clear of the 4.5 to 1 AA threshold for
   normal text. The green accent uses --sit-green-on-surface, the lightened
   green that measures 6.11 to 1 on this fill, rather than --sit-green, which
   measures 4.61 and is a large-text-only pass. */
.sit-lm-band__inner {
  background: var(--sit-navy-card);
  border: 1px solid var(--sit-navy-border);
  border-left: 3px solid var(--sit-green-on-surface);
  border-radius: var(--sit-radius-sm);
  padding: 1.75rem 2rem;
}

.sit-lm-band__eyebrow {
  color: var(--sit-green-on-surface);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.sit-lm-band__title {
  color: var(--sit-white);
  font-family: var(--sit-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.sit-lm-band__text {
  color: var(--sit-white-70);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 0.6rem;
  /* The subtitles in the registry run to about twenty words. Left to the full
     container width on a wide screen that is one very long line, so the
     measure is capped where prose stops being comfortable to read. */
  max-width: 60ch;
}

/* The measured facts line: item count, file size, and the business email
   condition. Smaller and dimmer than the sentence above it because it is a
   qualifier rather than the pitch, but still white-70 rather than white-50,
   which fails AA on this fill at 4.24 to 1. */
.sit-lm-band__meta {
  color: var(--sit-white-70);
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
}

@media (max-width: 768px) {
  .sit-lm-band__inner {
    padding: 1.25rem;
  }

  .sit-lm-band__title {
    font-size: 1.15rem;
  }

  /* A 269 pixel usable width will not hold "Preview the Microsoft 365 AI
     Security and Governance Checklist" on one line whatever is done to it, so
     the button takes the full width and wraps inside itself rather than
     overflowing the panel. Same treatment as the lead magnet hero actions. */
  .sit-lm-band .sit-btn {
    width: 100%;
  }
}

/* ============================================================
   FORM STATUS MESSAGE
   ============================================================
   The one place a form tells a visitor that the intake refused the
   submission. Three pages gated a download or a report behind a form and
   showed the success panel whichever answer came back, because none of them
   had anywhere to put the answer. This is that place, shared, so there is one
   rule to keep correct rather than one per page.

   The text is white on whatever dark panel the form sits in, not on the red.
   A red foreground would not clear 4.5:1 against these backgrounds at this
   size, whereas white on the surface colour measures 11.81:1 and the ten
   percent overlay moves it by a fraction of a point. The red carries the
   meaning through the border and tint, and the wording carries it for anyone
   who cannot see either.

   :empty rather than a hidden attribute, so the element is in the document
   from the first paint. role="alert" on an element that is inserted or
   unhidden at the moment its text is written is announced inconsistently;
   writing text into a region that was already there is not. */
.sit-form-status {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: var(--sit-radius-sm, 8px);
  background: rgba(239, 68, 68, 0.10);
  color: var(--sit-white);
  font-size: 0.9rem;
  line-height: 1.55;
}

.sit-form-status:empty {
  display: none;
}

/* ============================================================
   MARKETPLACE SERVICE OFFER DRAFT PAGES
   ============================================================ */
.sit-marketplace-offer {
  padding-bottom: 5rem;
}

.sit-marketplace-offer__status {
  border: 1px solid rgba(220, 116, 14, 0.55);
  border-left: 4px solid var(--sit-orange, #DC740E);
  border-radius: var(--sit-radius-sm, 8px);
  background: rgba(220, 116, 14, 0.10);
  color: #DCE5EB;
  margin: 2rem 0 3rem;
  padding: 1rem 1.1rem;
}

.sit-marketplace-offer__status p {
  margin: 0;
}

.sit-marketplace-offer__status p + p {
  margin-top: 0.35rem;
}

.sit-marketplace-offer__status strong {
  color: #FFFFFF;
}

.sit-offer-artifacts {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.4rem;
}

.sit-offer-artifacts__item {
  border: 1px solid var(--sit-border, rgba(24, 44, 67, 0.18));
  border-radius: var(--sit-radius-sm, 8px);
  margin: 0;
  overflow: hidden;
}

.sit-offer-artifacts__item img {
  display: block;
  height: auto;
  width: 100%;
}

.sit-offer-artifacts__item figcaption {
  color: #B8C4CC;
  font-size: 0.9rem;
  padding: 0.75rem 0.9rem;
}

.sit-offer-flow {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sit-offer-flow__step {
  border-left: 3px solid var(--sit-green, #46B491);
  background: var(--sit-surface, #F6F8F9);
  padding: 1rem 1.1rem;
}

.sit-offer-flow__step h3 {
  color: #FFFFFF;
  font-family: var(--sit-font-display);
  font-size: 1.08rem;
  margin: 0 0 0.4rem;
}

.sit-offer-flow__step p {
  margin: 0;
}

.sit-offer-watch__frame {
  aspect-ratio: 16 / 9;
  background: var(--sit-night, #112032);
}

.sit-offer-watch__frame iframe {
  border: 0;
  height: 100%;
  width: 100%;
}

.sit-offer-lead .sit-btn {
  margin-top: 1rem;
}

@media (max-width: 720px) {
  .sit-offer-artifacts,
  .sit-offer-flow {
    grid-template-columns: 1fr;
  }
}