/* ==========================================================================
   SRISYS Enterprise Experience System (SEES) v1.0 — Style Guide
   Generated from: SRISYS Enterprise Experience System.docx
   Scope: Design tokens + base/component styles per doc Pages 5–11
   Rule (Page 5): "No custom colors. Design tokens only."
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. DESIGN TOKENS  (Page 5 Color System · Page 6 Typography · Page 7 Layout)
   -------------------------------------------------------------------------- */
:root {
  /* Brand color palette — Page 5 */
  --color-primary-900: #0B2E63;
  /* Header, Footer, CTA */
  --color-primary-800: #123D7A;
  /* Hover states */
  --color-primary-700: #1E5AA8;
  /* Links */
  --color-primary-100: #EDF4FD;
  /* Light background */
  --color-white: #FFFFFF;
  /* Primary background */
  --color-surface: #F8FAFC;
  --color-surface-light: #F4F6F8;
  /* Alternate sections */
  --color-border: #E5E7EB;
  /* Cards & dividers */
  --color-text-primary: #000000;
  /* Headlines */
  --color-text-secondary: #1F2937;
  /* Body text */
  /* Accent colors — Page 5 */
  --color-orange: #F59E0B;
  /* Primary CTA */
  --color-green: #22C55E;
  /* Success */
  --color-red: #EF4444;
  /* Error */
  --color-purple: #7C3AED;
  /* AI */
  --color-cyan: #06B6D4;
  /* Data */
  --color-indigo: #4F46E5;
  --color-muted: #6B7280;
  /* Architecture */
  /* Typography — Page 6 */
  --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.4;
  /* 140% */
  --font-size-display-xl: 56px;
  --font-size-display-l: 48px;
  --font-size-h1: 42px;
  --font-size-h2: 36px;
  --font-size-h3: 30px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-h6: 18px;
  --font-size-body-lg: 18px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-caption-sm: 13px;
  --font-size-caption: 12px;
  /* Spacing tokens — Page 7 */
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-section: 36px;
  /* Radius tokens — Page 7 */
  --radius-card: 16px;
  --radius-button: 10px;
  --radius-input: 10px;
  /* Elevation — Page 9 ("Small" shadow, hover "Shadow Increase") */
  --shadow-small: 0 2px 8px rgba(11, 46, 99, .08);
  --shadow-hover: 0 8px 20px rgba(11, 46, 99, .14);
  /* Grid & container — Page 7 */
  --content-width: 1440px;
  --max-width: 1440px;
  --container-padding: 32px;
  .w-100 {
    min-width: 100%
  }
  /* Breakpoints (reference only — CSS custom properties can't drive
     @media queries; kept here for documentation, used literally below) — Page 11
     Mobile: <768px · Tablet: 768–1023px · Desktop: ≥1024px */
}
/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background: var(--color-white);
  text-align: left;
  /* Page 6: Text Alignment = Left */
}
body>main {
  flex: 1 0 auto;
}
body>.site-footer {
  flex-shrink: 0;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--color-primary-700);
  text-decoration: none;
}
/* Page 5: Links = Primary 700 */
a:hover {
  text-decoration: underline;
}
/* Page 6: Underline = Links Only */
/* Focus visibility — accessibility (Page 8 States: Focus = Blue Outline) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary-700);
  outline-offset: 2px;
}
/* --------------------------------------------------------------------------
   3. TYPOGRAPHY  (Page 6)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.display-xl, .display-l {
  margin: 0 0 var(--space-s);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}
.display-xl {
  font-size: var(--font-size-display-xl);
  font-weight: var(--font-weight-bold);
}
.display-l {
  font-size: var(--font-size-display-l);
  font-weight: var(--font-weight-bold);
}
h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
}
/* Rule: Single H1 per page */
h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}
h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}
h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
}
h5 {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
}
/* no doc token — falls back to Body Large */
h6 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* no doc token — treated as a Label-style heading */
p, .body-large, .body, .text-small, .caption {
  margin: 0 0 var(--space-s);
  color: var(--color-text-secondary);
  max-width: 80ch;
  /* Rule: Paragraph Width = 70–80 characters */
}
.body-large {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
}
.body {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
}
.text-small, small {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}
.caption {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}
.label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  /* Rule: Uppercase = Labels Only */
  letter-spacing: .04em;
  color: var(--color-text-secondary);
}
/* --------------------------------------------------------------------------
   3B. STANDARD HTML ELEMENTS
   Bare-tag defaults so unstyled markup already matches SEES tokens.
   -------------------------------------------------------------------------- */
/* Inline text semantics */
strong, b {
  font-weight: var(--font-weight-bold);
  color: inherit;
}
em, i {
  font-style: italic;
}
mark {
  background: var(--color-primary-100);
  color: var(--color-text-primary);
  padding: 0 .15em;
}
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
/* Code */
code, kbd, samp, pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .9em;
}
code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .15em .4em;
}
pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-s);
  overflow-x: auto;
}
pre code {
  background: none;
  border: 0;
  padding: 0;
}
kbd {
  background: var(--color-text-primary);
  color: var(--color-white);
  border-radius: 4px;
  padding: .1em .4em;
}
/* Lists */
ul, ol {
  margin: 0 0 var(--space-s);
  padding-left: var(--space-m);
  color: var(--color-text-secondary);
}
li {
  margin-bottom: var(--space-xs);
}
li>ul, li>ol {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}
dl {
  margin: 0 0 var(--space-m);
}
dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
dd {
  margin: 0 0 var(--space-s);
  color: var(--color-text-secondary);
}
/* Quotes */
blockquote {
  margin: 0 0 var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-left: 3px solid var(--color-primary-700);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-body-lg);
  font-style: italic;
}
blockquote p:last-child {
  margin-bottom: 0;
}
cite {
  font-style: normal;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}
/* Rule */
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-l) 0;
}
/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-m);
  font-size: var(--font-size-body);
}
caption {
  text-align: left;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}
th, td {
  text-align: left;
  padding: var(--space-xs) var(--space-s);
  border-bottom: 1px solid var(--color-border);
}
th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-surface);
}
tfoot td {
  font-weight: var(--font-weight-semibold);
}
/* Figures */
figure {
  margin: 0 0 var(--space-m);
}
figcaption {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}
/* Address */
address {
  font-style: normal;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}
/* Semantic layout elements — sensible bare-tag defaults;
   .site-header / .site-footer / .card / .hero classes above override these
   with the fully-specified component styles. */
header {
  display: block;
}
nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
nav a {
  color: var(--color-text-primary);
}
main {
  display: block;
  background-color: var(--color-white);
}
/* section{ padding-block:var(--space-section); } /* mirrors .section, Page 7 Section Gap */
article {
  display: block;
  margin-bottom: var(--space-l);
}
aside {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-m);
}
footer {
  background: var(--color-white);
  /* mirrors .site-footer, Page 5: Footer = Primary 900 */
  color: var(--color-primary-900);
  padding-block: var(--space-xl);
}
footer a {
  color: var(--color-primary-900);
}
footer a:hover {
  color: var(--color-primary-100);
}
/* Forms — bare tags, mirrors .btn / .field above */
form {
  margin: 0;
}
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-m);
  margin: 0 0 var(--space-m);
}
legend {
  font-weight: var(--font-weight-semibold);
  padding: 0 var(--space-xs);
}
label {
  display: block;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}
input, textarea, select {
  height: 52px;
  /* Page 8: Input Height = 52px */
  padding-inline: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  /* Page 8: Radius = 10px */
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background: var(--color-white);
}
textarea {
  height: auto;
  min-height: 120px;
  padding-block: var(--space-xs);
}
input[type="checkbox"], input[type="radio"] {
  height: auto;
  width: auto;
  accent-color: var(--color-orange);
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 52px;
  /* mirrors .btn, Page 8: Height = 52px */
  padding-inline: var(--space-m);
  border-radius: var(--radius-button);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--color-orange);
  /* Page 5 Color Usage Rules: Buttons = Orange */
  color: var(--color-text-primary);
  transition: filter .15s ease, opacity .15s ease;
}
button:hover {
  filter: brightness(.92);
}
/* Page 8 States: Hover = Darken 8% */
button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

button[aria-label="Search"] {
  padding-inline: var(--space-xs);
}
/* Page 8 States: Disabled = 40% Opacity */
/* --------------------------------------------------------------------------
   4. LAYOUT, GRID & SPACING  (Page 7)
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.container--wide {
  max-width: var(--max-width);
}
.section+section {
  padding-block: var(--space-section);
}
/* Section Gap = 96px */
.grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(4, 1fr);
  /* Mobile: 4 columns */
}
@media (min-width:768px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
  /* Tablet: 8 columns */
}
@media (min-width:1024px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  /* Desktop: 12 columns */
}
/* --------------------------------------------------------------------------
   5. BUTTONS & FORMS  (Page 8)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 46px;
  padding-inline: var(--space-s);
  border-radius: var(--radius-button);
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .15s ease, opacity .15s ease;
}
/* Icons inside a button always match the button's own text color — without
   this, .icon's class-level color:var(--color-primary-700) default beats
   plain CSS inheritance from the button (a class-based rule "counts" as
   specified even though it's just the design system's default), so a
   button's arrow icon would render blue regardless of what color the
   button text itself was set to. */
.btn .icon {
  color: inherit;
}
.btn-primary {
  background: var(--color-orange);
  color: var(--color-white);
  border-color: transparent;
}
.btn-primary:hover {
  color: var(--color-white);
  background-color: #D97706;
  text-decoration: none;
}
/* Hover = Darken 8% */
.btn-secondary {
  background: var(--color-white);
  color: var(--color-primary-900);
  border-color: var(--color-primary-900);
}
.btn-secondary:hover {
  filter: brightness(.92);
}
.play-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary-900);
  color: var(--color-white);
}
.play-badge .icon {
  width: 10px;
  height: 10px;
  font-size: 10px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .4;
  /* Disabled = 40% Opacity */
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-loading {
  color: transparent;
  position: relative;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--color-white);
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-m);
}
.field label {
  order: -1;
  /* Label Position = Above */
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.field input,
.field textarea,
.field select {
  height: 52px;
  padding-inline: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background: var(--color-white);
}
.field textarea {
  height: auto;
  min-height: 120px;
  padding-block: var(--space-xs);
}
.field-error {
  font-size: var(--font-size-small);
  color: var(--color-red);
}
/* Validation = Inline */
.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: var(--color-red);
}
/* --------------------------------------------------------------------------
   6. CARDS & ELEVATION  (Page 9)
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-small);
  padding: var(--space-s);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-4px);
  /* Hover = Lift 4px */
  box-shadow: var(--shadow-hover);
  /* Shadow Increase */
}
/* --------------------------------------------------------------------------
   7. ICONS & IMAGERY  (Page 10)
   -------------------------------------------------------------------------- */
.icon {
  width: 48px;
  height: 48px;
  font-size: 48px;
  /* only used if this turns out to be a Dashicon — see srisyskb_icon_markup() */
  stroke-width: 2px;
  fill: none;
  color: var(--color-primary-900);
  /* Color = Theme Accent */
}
/* Per-term uploaded image standing in for an icon (srisyskb_term_visual_html())
   carries class="icon" too, so it inherits every context's width/height rule —
   this just adds the image-specific fit/shape on top. */
img.icon {
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
/* Dashicon standing in for a sprite icon (srisyskb_icon_markup()) — also
   class="icon", so it inherits every context's width/height like the SVG
   does; a dashicon's actual visible size comes from font-size though, not
   the box, so every ".xxx .icon{ width:Npx; height:Npx }" rule below also
   sets a matching font-size for its dashicon case. */
span.icon.dashicons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
span.icon.dashicons:before {
  width: 1em;
  height: 1em;
}
.icon--lg {
  width: 64px;
  height: 64px;
}
.img-responsive {
  width: 100%;
  height: auto;
}
/* --------------------------------------------------------------------------
   8. HEADER  (Page 14–15)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 76px;
  display: flex;
  align-items: center;
  background: var(--color-white);
  box-shadow: none;
  transition: box-shadow .2s ease;
  box-shadow: 0 2px 12px rgba(11, 46, 99, .06) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--shell-border) !important;
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-small);
}
/* Shadow = On Scroll */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}
.site-nav a {
  color: var(--color-primary-900);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}
.site-nav a:hover {
  color: var(--color-primary-700);
  text-decoration: none;
}
/* Active nav item — current page's top-level link, underlined + accent color. */
.site-nav a.is-active,
.nav-item.is-active>.nav-link,
.site-header .nav-item.is-active,
.site-header .nav-link.is-active {
  color: var(--color-primary-700) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--color-orange) !important;
  text-underline-offset: 30px !important;
  text-decoration-thickness: 3px !important;
}
.nav-toggle {
  display: none;
}
/* Hamburger — shown only on mobile, see §10 */
/* Submenu — dropdown on hover/focus for nav items with children (Solutions, Industries) */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 76px;
}
.nav-item .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-item .chevron {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  color: currentColor;
  transition: transform .15s ease;
}
.nav-item:hover .chevron, .nav-item:focus-within .chevron {
  transform: rotate(180deg);
}
.submenu {
  display: none;
  position: absolute;
  top: calc(100% - 20px);
  left: 0;
  min-width: 390px;
  margin: 0;
  padding: 12px;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-hover);
  z-index: 110;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu {
  display: block;
}
.submenu li {
  margin-bottom: 0px;
}
.submenu li a {
  display: block;
  padding: 9px 11px;
  border-radius: 6px;
  color: var(--color-primary-900);
  font-weight: var(--font-weight-medium);
  font-size: 13px;
  text-transform: none;
  min-height: 42px;
  text-transform: uppercase;
}
.submenu li a:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  text-decoration: none;
}
/* --------------------------------------------------------------------------
   9. HERO  (Page 16–17)
   -------------------------------------------------------------------------- */
.hero {
  min-height: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 50 / 50 */
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}
.hero-content {
  padding: var(--space-xl);
}
.hero-image {
  height: 100%;
  overflow: hidden;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--space-s);
}
/* Touch target minimum — Page 11 checklist: Touch targets ≥44px */
.btn, .nav-toggle, .icon-button {
  min-height: 44px;
  min-width: 44px;
}
/* --------------------------------------------------------------------------
   11. CARD GRID & CTA ROW UTILITIES
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(4, 1fr);
}
.cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}
/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-sm);
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 0 18px !important;
  border-top: 1px solid var(--color-border) !important;
  background: var(--color-surface-light) !important;
  color: var(--color-primary-900) !important;
  font-family: var(--shell-font) !important;
}
.site-footer a {
  color: var(--color-primary-900);
}
.site-footer a:hover {
  color: var(--color-primary-100);
}
/* --------------------------------------------------------------------------
   13. CTA BANNER
   -------------------------------------------------------------------------- */
.cta-banner {
  background: var(--color-primary-900);
  /* CTA Banner = Primary 900 */
  color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-s) var(--space-l);
}
.cta-banner .btn-primary {
  background: var(--color-orange);
}
/* Buttons = Orange */
/* --------------------------------------------------------------------------
   14. PAGE — LANDING
   Composition for the SRISYS Landing Page reference. Everything here is
   layout/assembly on top of the tokens and components above — nothing here
   introduces a new color, font size, spacing, or radius value.
   -------------------------------------------------------------------------- */
/* Static bordered container (no hover-lift) — Card standards (Page 9) minus the interactive Hover rule,
   used for section wrappers like Industries that borrow the card look without being clickable content. */
.panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-xs);
}
/* Icon rows — Solutions (Page 18) & Industries use the same pattern, two weights */
.icon-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-l) var(--space-m);
  text-align: center;
}
.icon-row .icon-item {
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
.icon-row .icon-item span {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-900);
  line-height: 1.3;
}
.icon-row .icon {
  color: var(--color-primary-900);
}
/* Page 10: Color = Theme Accent */
.icon-row--muted .icon-item {
  width: 104px;
}
.icon-row--muted .icon-item span {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}
.icon-row--muted .icon {
  color: var(--color-primary-700);
}
/* Stat cards — Page 5 Color Usage: Section Background = White or Surface
   Layout: column 1 = icon, column 2 = number stacked over description text. */
.stats-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(4, 1fr);
}
.stat-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  text-align: left;
  background: var(--color-surface);
}
.stat-card .stat-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-primary-100);
  /* light badge behind the icon, per reference */
  color: var(--color-primary-900);
}
.stat-card .stat-icon .icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
}
.stat-card .stat-body {
  min-width: 0;
}
.stat-card strong {
  display: block;
  font-size: var(--font-size-h2);
  color: var(--color-primary-900);
  line-height: 1.1;
}
.stat-card p {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-small);
}
/* CTA banner composition (icon + copy + checklist + action) — nowrap keeps
   everything on a single row per reference; on narrow viewports the mobile
   media query below switches to flex-direction:column instead. */
.cta-banner {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  flex-wrap: nowrap;
}
.cta-banner .cta-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 2px solid var(--color-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-banner .cta-body {
  flex: 1 1 260px;
  min-width: 0;
}
.cta-banner .cta-eyebrow {
  color: var(--color-orange) !important;
  font-weight: var(--font-weight-semibold);
}
/* 3 items in a single row, each with its own icon-in-a-circle and a
   vertical divider between items (not before the first). */
.cta-banner .cta-checklist {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  font-size: var(--font-size-small);
}
.cta-banner .cta-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0 var(--space-m);
  border-left: 1px solid rgba(255, 255, 255, .2);
  color: var(--color-white);
  max-width: 150px;
}
.cta-banner .cta-checklist li:first-child {
  border-left: 0;
  padding-left: 0;
}
.cta-banner .cta-checklist-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-banner .cta-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
}
.cta-banner .cta-action small {
  color: var(--color-primary-100);
}
.cta-banner p, .cta-banner .cta-eyebrow {
  color: var(--color-white);
  max-width: none;
}
/* Logo strip — Page 5: Section Background = Surface */
.logo-strip {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  text-align: center;
}
.logo-strip .logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-l);
  margin: var(--space-m) 0;
}
.logo-strip .logos span {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  filter: grayscale(1);
  opacity: .7;
  font-size: var(--font-size-body-lg);
}
/* Insight cards — extend .card with a full-bleed top image (rounded top corners only)
   and a padded body below, per reference: the photo runs to the card edges, text doesn't. */
.insight-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Positioning context for .insight-tag is the image wrapper, not the whole
   card — anchoring to the card would put "bottom" near the card's bottom
   edge (under the title/date text), not the image's bottom edge. */
.insight-thumb-wrap {
  position: relative;
}
.insight-card .insight-thumb {
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.insight-card .insight-thumb .icon {
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: var(--color-white);
}
.insight-card .insight-body {
  padding: var(--space-xs);
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Pins date/read-time (and the Read More link after it) to the card bottom
   regardless of title length, so meta lines up across cards in a row —
   grid items stretch to equal height by default, but block content alone
   stacks right under the title instead of using that extra space. */
.insight-meta {
  margin-top: auto;
  padding-top: var(--space-xs);
}
/* Type badge (Insight/Whitepaper/Executive Guide) — floats over the bottom-left
   corner of the featured image per reference, not inline in the card body. */
.insight-tag {
  position: absolute;
  bottom: var(--space-s);
  left: var(--space-s);
  z-index: 1;
  color: var(--color-white);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 0px;
}
.section-header {
  text-align: center;
  margin-bottom: var(--space-s);
  color: var(--color-primary-900);
}
/* nowrap so the heading + link never split onto separate lines even in a
   narrow column (e.g. Resource Library's 1fr side of .kb-insights-row) — if
   the heading text itself is too long it wraps internally instead (see the
   min-width:0/flex:1 on its own rule below), the link stays pinned on the
   first line. */
.section-header--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: nowrap;
  text-align: left;
}
.section-header--split>*:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.section-header--split>a {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Hero — the content/image divider isn't a clean curve, it's an irregular soft white
   wash bleeding over the left edge of the photo (Page 16: "Curve | Required" reads as
   organic, not geometric — matches the reference exactly, not a border-radius cutout). */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-image {
  position: relative;
}
/* .hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 6% 12%,  #fff 0 7%, transparent 12%),
    radial-gradient(circle at 3% 34%,  #fff 0 10%, transparent 16%),
    radial-gradient(circle at 9% 58%,  #fff 0 8%, transparent 14%),
    radial-gradient(circle at 4% 80%,  #fff 0 9%, transparent 15%),
    radial-gradient(circle at 11% 96%, #fff 0 6%, transparent 11%),
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.9) 5%, rgba(255,255,255,.55) 12%, rgba(255,255,255,.15) 20%, transparent 30%);
  filter: blur(22px);
} */
.hero-badges .badge {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-white);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.hero-badges .badge .icon {
  color: var(--color-white);
  background: rgba(11, 46, 99, .55);
  border-radius: 50%;
  padding: 10px;
  box-sizing: content-box;
}
.badge--strategy {
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
}
.badge--ai {
  top: 32%;
  right: 4%;
}
.badge--innovation {
  bottom: 10%;
  right: 8%;
}
.badge--efficiency {
  bottom: 10%;
  left: 6%;
}
.badge--growth {
  top: 32%;
  left: 2%;
}
/* Header — mobile nav (Page 11: Navigation = Hamburger under 768px) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  color: var(--color-primary-900);
}
.mobile-nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-hover);
  padding: 0 var(--container-padding);
  z-index: 99;
}
.mobile-nav a {
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}
.mobile-nav.is-open {
  display: flex;
}
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}
/* WP's wp_nav_menu() wraps items in <ul><li> — flatten so .mobile-nav a still lays out as a plain column */
.mobile-nav li {
  display: contents;
}
/* Footer composition — compact single row: brand · nav links · social, then a divider, then the bottom bar */
.site-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-l);
  justify-content: space-between;
  padding: 0px var(--space-m);
}
.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.site-footer .footer-tagline {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-links a {
  color: var(--color-primary-900);
  text-decoration: none;
  text-transform: capitalize;
  font-size: 13px;
  font-weight: 600;
}
.site-footer .footer-links a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.site-footer .social-row {
  display: flex;
  gap: var(--space-s);
}
.site-footer .social-row a {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-primary-900);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-900);
}
.site-footer .social-row a .icon {
  width: 15px;
  height: 15px;
  font-size: 15px;
  color: inherit;
}
.site-footer .social-row a:hover {
  background: var(--color-primary-900);
  color: var(--color-white);
}
.site-footer .footer-divider {
  border: 0;
  background: var(--color-border);
  margin: 18px 0 12px !important;
}
.site-footer .footer-bottom {
  padding-block: var(--space-s);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--font-size-caption);
  color: var(--color-muted);
  padding-top: 0px;
  padding-bottom: 0px;
}
.site-footer .footer-bottom a {
  color: var(--color-muted);
}
.site-footer .footer-bottom a:hover {
  color: var(--color-primary-700);
}
.site-footer .legal {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.site-footer .legal span {
  color: var(--color-border);
}
.site-header .nav-cta {
  display: inline-flex !important;
  flex: 0 0 232px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 232px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
}
.site-header .nav-cta::after { margin-left: 8px !important; content: "→" !important; font-size: 17px !important; }
.site-header .nav-cta:hover { background: #D97706 !important; transform: none !important; }
.site-header .mobile-nav-cta { display: none !important; }
/* --------------------------------------------------------------------------
   15. LANDING PAGE — RESPONSIVE  (Page 11 breakpoints: <768 / 768–1023 / ≥1024)
   -------------------------------------------------------------------------- */
@media (max-width:1023px) {
  .hero-image::before {
    display: none;
  }
  /* the spray only reads correctly against the side-by-side layout */
}
@media (max-width:767px) {
  .site-header .container {
    position: relative;
  }
  .site-header .btn-primary {
    display: none;
  }
  /* folded into .mobile-nav on mobile */
  .nav-toggle {
    display: inline-flex;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-image {
    order: -1;
    min-height: 240px;
  }
  .hero-content {
    padding: var(--space-l);
  }
  .stats-grid, .insight-card {
    grid-template-columns: 1fr;
  }
  .cta-banner {
    flex-direction: column;
    text-align: center;
  }
  .cta-banner .cta-checklist {
    flex-direction: column;
    align-items: center;
  }
  .cta-banner .cta-checklist li {
    border-left: 0;
    padding: 0;
    max-width: none;
  }
  .section-header--split {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-badges .badge {
    display: none;
  }
  /* keeps the mobile hero image legible per Page 11: Hero = Stack */
  .site-footer .footer-top {
    flex-direction: column;
    text-align: center;
  }
  .site-footer .footer-links {
    justify-content: center;
    list-style: none;
    margin: 0px;
    padding: 0px;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .cta-banner .cta-body {
    flex: 1 1 180px;
  }
}
@media (min-width:768px) and (max-width:1023px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* --------------------------------------------------------------------------
   10. RESPONSIVE DESIGN STANDARDS  (Page 11)
   -------------------------------------------------------------------------- */
@media (max-width:767px) {
  .site-nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  /* Navigation = Hamburger */
  .hero {
    grid-template-columns: 1fr;
  }
  /* Hero = Stack */
  .hero-image {
    order: -1;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
  /* Cards = Single Column */
  .cta-row {
    flex-direction: column;
  }
  /* CTA = Vertical */
  .site-footer {
    /* Footer = Accordion */
  }
  .section {
    padding-block: var(--space-xs);
  }
}
@media (min-width:768px) and (max-width:1023px) {
  .site-nav {
    display: flex;
  }
  /* Collapsible on tablet; JS toggles as needed */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Cards = 2 Across */
}
@media (min-width:1024px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Cards = 3–4 Across */
}
@media (max-width: 1050px) {
  .site-header > .container > .nav-cta,
  .site-header .nav-wrap > .nav-cta {
    display: none !important;
  }
  .site-header .mobile-nav-cta,
  .mobile-nav .mobile-nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 14px 0 10px 0 !important;
    padding: 12px 20px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 10px !important;
    background: var(--color-orange, #ff5b00) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-align: center !important;
    box-shadow: 0 8px 18px rgba(255, 91, 0, 0.20) !important;
  }
  .site-header .mobile-nav-cta::after,
  .mobile-nav .mobile-nav-cta::after {
    margin-left: 8px !important;
    content: "→" !important;
    font-size: 17px !important;
  }
  .site-header .mobile-nav-cta:hover,
  .mobile-nav .mobile-nav-cta:hover {
    background: #D97706 !important;
  }
}
@media (min-width: 1051px) {
  .site-header .nav-wrap {
    display: grid !important;
    grid-template-columns: 198px minmax(0, 1fr) 242px !important;
    align-items: center !important;
    column-gap: 26px !important;
    width: min(1376px, calc(100% - 56px)) !important;
    height: 76px !important;
    padding-inline: 0px;
  }
  .site-header .brand {
    display: inline-flex !important;
    align-items: center !important;
    width: 198px !important;
    min-width: 0 !important;
    height: 76px !important;
  }
  .site-header .brand img {
    width: 184px !important;
    height: 56px !important;
    max-width: 184px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  .site-header .site-nav {
    display: grid !important;
    grid-template-columns: 112px 112px 174px 78px !important;
    justify-content: end !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: auto !important;
    height: 76px !important;
    margin: 0 !important;
  }
  .site-header .nav-slot,
  .site-header .nav-slot--solutions,
  .site-header .nav-slot--industries,
  .site-header .nav-slot--knowledge,
  .site-header .nav-slot--about {
    width: auto !important;
  }
  .site-header .nav-dropdown {
    height: 76px !important;
  }
  .site-header .nav-item,
  .site-header .nav-link {
    min-width: 0 !important;
    padding-inline: 12px !important;
    font-size: var(--font-size-small);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .site-header .nav-cta {
    justify-self: end !important;
    width: 242px !important;
    min-width: 242px !important;
    max-width: 242px !important;
    flex: none !important;
  }
  .site-header .nav-item::before,
  .site-header .nav-link::before {
    display: none !important;
  }
}
@media (min-width:1280px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* --------------------------------------------------------------------------
   16. KNOWLEDGE CENTER PAGE
   Composition for the WordPress Knowledge Center template — same rule as the
   rest of this file: everything below reuses existing tokens, nothing new.
   -------------------------------------------------------------------------- */
/* Hero: headline + search, then a stats strip on a darker inset panel */
.kb-hero {
  background: var(--color-primary-900);
  color: var(--color-white);
  padding-block: var(--kb-section-padding, var(--space-l));
  position: relative;
  overflow: hidden;
}
.kb-hero h1, .kb-hero p {
  color: var(--color-white);
}
.kb-hero .kb-eyebrow {
  color: var(--color-primary-100);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
}
.kb-hero>.container {
  position: relative;
  z-index: 1;
}
.kb-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr .85fr;
  gap: var(--space-l);
  align-items: center;
}
/* Uploaded hero image — a sibling of .container, not a grid item, so it can
   cover the full hero section height (headline row + stats strip below)
   instead of being boxed into just the grid row. Faded on its left edge so
   the headline/search text stays legible over it. */
.kb-hero-bg-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34%;
  min-width: 280px;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.kb-hero-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-primary-900) 0%, rgba(11, 46, 99, .35) 35%, transparent 65%);
}
.kb-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kb-hero-art .glow-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 55%, transparent 68%),
    radial-gradient(circle, var(--color-primary-700) 0%, var(--color-primary-900) 72%);
  box-shadow: 0 0 70px rgba(30, 90, 168, .55), inset 0 0 40px rgba(255, 255, 255, .08);
}
.kb-hero-art .glow-circle .icon {
  width: 96px;
  height: 96px;
  font-size: 96px;
  color: var(--color-white);
}
.kb-hero-art .spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .9);
}
.kb-hero-art .spark:nth-child(2) {
  top: 10%;
  left: 20%;
}
.kb-hero-art .spark:nth-child(3) {
  top: 70%;
  left: 8%;
  width: 3px;
  height: 3px;
}
.kb-hero-art .spark:nth-child(4) {
  top: 22%;
  left: 82%;
}
.kb-hero-art .spark:nth-child(5) {
  top: 80%;
  left: 78%;
  width: 3px;
  height: 3px;
}
.kb-search label {
  display: block;
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-s);
}
.kb-search-box {
  display: flex;
  background: var(--color-white);
  border-radius: var(--radius-input);
  overflow: hidden;
}
.kb-search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0 var(--space-m);
  height: 52px;
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
}
.kb-search-box input:focus {
  outline: none;
}
.kb-search-box button {
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  width: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kb-search-box button:hover {
  color: var(--color-primary-700);
}
.kb-trending {
  margin-top: var(--space-m);
  font-size: var(--font-size-small);
  color: var(--color-primary-100);
}
.kb-trending strong {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  margin-right: var(--space-xs);
}
.kb-trending a {
  color: var(--color-white);
  text-decoration: underline;
  margin-right: var(--space-s);
}
.kb-stats-strip {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-card);
  margin-top: var(--space-m);
  padding: var(--space-m);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
}
.kb-stat {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.kb-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--color-white);
}
.kb-stat-icon .icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
  color: var(--color-white);
}
.kb-stat strong {
  display: block;
  font-size: var(--font-size-h3);
  color: var(--color-white);
  line-height: 1.1;
}
.kb-stat span {
  font-size: var(--font-size-small);
  color: var(--color-primary-100);
}
/* Browse by Topic — static fallback grid (kb_topics_carousel = off) */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-s);
}
.topic-card {
  text-align: center;
  /* No explicit height here on purpose — flex/grid's default align-items:stretch
     already equalizes every card to the row's tallest card, but only when the
     item's own cross-axis size computes to auto. Setting height:100% here would
     override that auto and *disable* the stretch (the parent's own height is
     itself auto/content-driven, so 100% doesn't resolve to anything useful). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* icon at top, title+count pushed to the bottom — fills the box instead of clumping at the top */
}
.topic-card .icon {
  width: 40px;
  height: 40px;
  font-size: 40px;
  margin-bottom: var(--space-s);
}
.topic-card h3 {
  font-size: var(--font-size-body);
  margin-bottom: var(--space-xs);
}
.topic-card .topic-count {
  font-size: calc(var(--font-size-caption) - 0px);
  font-weight: var(--font-weight-semibold);
}
/* Icon-beside-title variant — Customizer: Browse by Topic → Card icon position.
   Shorter cards, so more fit on screen / the carousel needs less width per item. */
.topic-card--icon-left {
  flex-direction: row;
  justify-content: flex-start;
  height: auto;
  align-items: center;
  gap: var(--space-s);
  text-align: left;
  padding: var(--space-s);
}
.topic-card--icon-left .icon {
  width: 28px;
  height: 28px;
  font-size: 28px;
  margin-bottom: 0;
  flex: 0 0 auto;
}
.topic-card--icon-left .topic-card-body {
  min-width: 0;
}
.topic-card--icon-left h3 {
  margin-bottom: 2px;
}
/* Icon size — Customizer: Browse by Topic → Icon size (%). The wrapper's
   inline width/height (set from that setting, see the template) is what
   actually governs the rendered size; the icon fills it at 100%. */
.topic-card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.topic-card-icon-wrap .icon {
  width: 100% !important;
  height: 100% !important;
  font-size: inherit !important;
  margin-bottom: 0 !important;
}
.topic-card .topic-card-icon-wrap {
  margin-bottom: var(--space-s);
}
.topic-card--icon-left .topic-card-icon-wrap {
  margin-bottom: 0;
}
/* Browse by Topic — carousel (kb_topics_carousel = on, the default).
   Items-per-view come from --kb-carousel-items-* custom properties, printed
   inline by the template from the Customizer settings; see inc/customizer.php. */
.topic-carousel {
  position: relative;
}
.topic-carousel-track {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}
.topic-carousel-track::-webkit-scrollbar {
  display: none;
}
/* Pointer-drag scrolling — knowledge-center.js toggles this class between
   pointerdown and pointerup/pointercancel. scroll-snap and smooth-scroll
   both fight manual scrollLeft updates during an active drag (snap yanks
   the track back mid-gesture, smooth-scroll queues a stale animation), so
   both are switched off only while dragging. user-select is also off so a
   drag doesn't select the card text underneath the pointer. */
.topic-carousel-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
  -webkit-user-select: none;
}
/* Room for the floating overlay arrows (Arrow position = Sides) so they
   don't sit directly on top of the first/last card's text. */
.topic-carousel-track.has-overlay-arrows {
  padding-inline: 56px;
}
.carousel-slide {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--kb-carousel-items-desktop, 6) - 1) * var(--space-m)) / var(--kb-carousel-items-desktop, 6));
}
@media (max-width:1023px) {
  .carousel-slide {
    flex-basis: calc((100% - (var(--kb-carousel-items-tablet, 3) - 1) * var(--space-m)) / var(--kb-carousel-items-tablet, 3));
  }
}
@media (max-width:767px) {
  .carousel-slide {
    flex-basis: calc((100% - (var(--kb-carousel-items-mobile, 2) - 1) * var(--space-m)) / var(--kb-carousel-items-mobile, 2));
  }
}
/* Arrows for the "sides" position (Customizer: Browse by Topic → Arrow
   position) float over the card row rather than pushing it inward as flex
   siblings — absolutely positioned inside .topic-carousel, overlapping the
   first/last card. The "top"/"bottom" position variants render these same
   buttons in .carousel-arrows-top/-bottom instead (plain flex row there,
   this positioning doesn't apply to them). */
.topic-carousel>.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translate(-40%, -50%);
  z-index: 2;
  padding: 10px;
}
.topic-carousel>.carousel-arrow.carousel-arrow--prev {
  left: 8px;
}
.topic-carousel>.carousel-arrow.carousel-arrow--next {
  right: 8px;
}
.carousel-arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-primary-900);
  box-shadow: var(--shadow-small);
}
.carousel-arrow:hover {
  background: var(--color-primary-100);
}
.carousel-arrow .icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
/* rotation to point the chosen icon left/right is set inline per-icon — see srisyskb_icon_right_rotation() */
/* Arrow position — Customizer: Browse by Topic → Arrow position.
   Default "sides" flanks the track (.carousel-arrow sits directly in .topic-carousel);
   these two are the other two placements. */
.carousel-arrows-top {
  display: flex;
  gap: var(--space-xs);
  flex: 0 0 auto;
}
.carousel-arrows-bottom {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-s);
}
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--color-border);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.carousel-dot.is-active {
  background: var(--color-primary-700);
  width: 20px;
  border-radius: 4px;
}
/* Resource Library rows (left column) */
.resource-list {
  display: flex;
  flex-direction: column;
}
.resource-row {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  /* padding:var(--space-xs) var(--space-s); */
  border-bottom: 1px solid var(--color-border);
  /* border-radius:var(--radius-input); */
  transition: border-color .15s ease, box-shadow .15s ease;
  padding: var(--space-xs) 0px;
}
/* .resource-row:hover{ border-color:var(--color-primary-700); box-shadow:var(--shadow-small); } */
.resource-row .resource-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary-100);
  color: var(--color-primary-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.resource-row .resource-icon .icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.resource-row .resource-body {
  flex: 1;
  min-width: 0;
}
.resource-row:hover .resource-body h4, .resource-row:hover .resource-body p, .resource-row:hover .resource-body span {
  color: var(--color-primary-700);
}
.resource-row .resource-body h4 {
  font-size: var(--font-size-small);
  margin-bottom: 2px;
}
.resource-row .resource-body p {
  font-size: var(--font-size-small);
  margin: 0 0 2px;
}
.resource-row .resource-count {
  display: block;
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}
.resource-row .chevron-right {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
  transform: rotate(-90deg);
  flex: 0 0 auto;
}
/* Popular Resources sidebar (right column) */
.popular-list {
  display: flex;
  flex-direction: column;
}
.popular-item {
  display: flex;
  align-items: flex-start;
  padding: var(--space-xs) 0px;
}
.popular-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}
.popular-item .file-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.popular-item .file-icon .icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}
.popular-item .popular-body {
  flex: 1;
  min-width: 0;
}
.popular-item:hover .file-icon  .icon {
  color: var(--color-primary-700);
}
.popular-item .popular-body a {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-900);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.popular-item .popular-body a:hover {
  color: var(--color-primary-700);
}
.popular-item .popular-body span {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* "Can't find what you need?" contact box */
.contact-box {
  background: var(--color-primary-900);
  color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-m);
}
.contact-box h4 {
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}
.contact-box p {
  color: var(--color-primary-100);
  font-size: var(--font-size-small);
}
/* Icon sits to the left of the button, not floating alone above the heading.
   The sidebar column this lives in is only ~200px (minus padding, ~150px
   usable), so the button is intentionally compact — smaller icon, tighter
   padding/font, and no forced nowrap so 2-word-per-line wrap is allowed
   instead of the 1-word-per-line squeeze a full-size button caused there. */
.contact-box .contact-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}
.contact-box .contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.contact-box .contact-icon .icon {
  width: 14px;
  height: 14px;
}
.contact-box .btn-primary {
  flex: 1;
  height: auto;
  padding: 10px var(--space-s);
  font-size: var(--font-size-small);
  white-space: normal;
  text-align: center;
}
.contact-box .btn-primary .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* Light CTA banner variant — the closing "Turn Insights Into Impact" banner
   is a light bordered panel, not the navy pattern used on the other CTAs. */
.cta-banner--light {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cta-banner--light .cta-icon {
  border-color: var(--color-primary-700);
}
.cta-banner--light .cta-icon .icon {
  color: var(--color-primary-700) !important;
}
.cta-banner--light h3 {
  color: var(--color-text-primary) !important;
}
.cta-banner--light p, .cta-banner--light .cta-eyebrow {
  color: var(--color-text-secondary) !important;
}
.cta-banner--light .cta-checklist li {
  color: var(--color-text-primary);
  border-left-color: var(--color-border);
}
.cta-banner--light .cta-checklist .icon {
  color: var(--color-primary-700) !important;
}
.cta-banner--light .cta-checklist-icon {
  background: var(--color-primary-100);
}
.cta-banner--light .btn-primary {
  background: var(--color-primary-900);
  color: var(--color-white);
}
/* Content layout: main column (Browse by Topic full-width, then Featured
   Insights + Resource Library side by side) beside a persistent right
   sidebar (Popular Resources + Contact box) that spans the same height —
   matches the reference: the sidebar starts level with "Browse by Topic"
   and runs down to the bottom of "Resource Library", not just alongside
   the Featured Insights cards. */
.kb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-l);
  align-items: start;
}
.kb-main {
  min-width: 0;
}
.kb-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.kb-insights-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-l);
  align-items: start;
  margin-top: var(--space-m);
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
}
@media (max-width:1023px) {
  .kb-hero-grid {
    grid-template-columns: 1fr;
  }
  .kb-hero-art {
    display: none;
  }
  /* the glow illustration only earns its space in the 3-column layout */
  .kb-hero-bg-image {
    display: none;
  }
  .kb-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .kb-layout {
    grid-template-columns: 1fr;
  }
  .kb-insights-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width:767px) {
  .kb-stats-strip {
    grid-template-columns: 1fr;
  }
  .featured-grid {
    grid-template-columns: 1fr;
  }
}
/* --------------------------------------------------------------------------
   TAXONOMY TERM ARCHIVES — kb_topic / resource_type single-term pages
   (taxonomy-kb_topic.php, taxonomy-resource_type.php via
   template-parts/taxonomy-term-archive.php) + the standalone Categories
   page template (page-templates/categories.php).
   -------------------------------------------------------------------------- */
.kb-term-hero-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .15);
  border-radius: var(--radius-card);
}
.kb-term-hero-icon .icon {
  width: 28px;
  height: 28px;
  font-size: 28px;
  color: var(--color-white);
}
.kb-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-l);
}
.kb-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}
.kb-pagination a.page-numbers:hover {
  border-color: var(--color-primary-700);
  color: var(--color-primary-700);
}
.kb-pagination .page-numbers.current {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: var(--color-white);
}
.kb-pagination .page-numbers.dots {
  border-color: transparent;
}
/* --------------------------------------------------------------------------
   SINGLE POSTS / RESOURCES
   Generic single.php article layout using existing SEES tokens.
   -------------------------------------------------------------------------- */
.kb-single-hero {
  padding-block: 0px;
}
.kb-single-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-l);
  /* padding-block:var(--space-xl); */
}
.kb-single-hero-inner.has-featured-image {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
}
.kb-single-hero-copy {
  max-width: 820px;
}
.kb-single-hero-image {
  height: 100%;
  min-height: 320px;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}
.kb-single-hero-image img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.kb-single-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary-100);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-s);
}
.kb-single-back::before {
  content: "\2190";
}
.kb-single-back:hover {
  color: var(--color-white);
}
.kb-single-hero h1 {
  max-width: 920px;
  color: var(--color-white);
}
.kb-single-excerpt {
  max-width: 760px;
  margin-top: var(--space-m);
}
.kb-single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}
.kb-single-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--space-s);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  background: rgba(255, 255, 255, .08);
}
.kb-single-shell {
  padding-block: var(--space-xl);
}
.kb-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-xl);
  align-items: start;
}
.kb-single-main {
  min-width: 0;
}
.kb-single-content {
  font-size: var(--font-size-body-lg);
  color: var(--color-text-secondary);
}
.kb-single-content>* {
  max-width: 80ch;
}
.kb-single-content h2,
.kb-single-content h3,
.kb-single-content h4 {
  margin-top: var(--space-l);
}
.kb-single-content p,
.kb-single-content ul,
.kb-single-content ol {
  font-size: inherit;
}
.kb-single-content img,
.kb-single-content figure,
.kb-single-content .wp-block-image,
.kb-single-content .wp-block-embed,
.kb-single-content .alignwide,
.kb-single-content .alignfull {
  max-width: 100%;
}
.kb-single-content .aligncenter {
  margin-inline: auto;
}
.kb-single-pages {
  margin-bottom: var(--space-l);
}
.post-navigation {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-m);
}
.post-navigation .nav-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
.post-navigation a {
  display: block;
  padding: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  background: var(--color-white);
  box-shadow: var(--shadow-small);
}
.post-navigation a:hover {
  border-color: var(--color-primary-700);
  text-decoration: none;
}
.post-navigation .nav-next {
  text-align: right;
}
.post-navigation strong {
  display: block;
  margin-top: 4px;
}
.kb-single-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  position: sticky;
  top: calc(var(--space-l) + 72px);
}
/* .kb-single-context{ padding:var(--space-m); } 
.kb-single-context:hover{ transform:none; box-shadow:var(--shadow-small); } */
.kb-single-context h2 {
  font-size: var(--font-size-h5);
  margin-bottom: var(--space-s);
}
.kb-single-context dl {
  margin-bottom: 0;
}
.kb-single-context dd:last-child {
  margin-bottom: 0;
}
.kb-single-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.kb-single-terms a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--space-s);
  border-radius: 999px;
  background: var(--color-primary-100);
  color: var(--color-primary-900);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}
.kb-single-terms a:hover {
  color: var(--color-primary-700);
  text-decoration: none;
}
.ast-separate-container .ast-article-single {
  padding: 0px;
}
@media (max-width:767px) {
  .kb-term-hero-icon {
    width: 44px;
    height: 44px;
  }
  .kb-term-hero-icon .icon {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }
  .kb-single-hero {
    padding-block: 0px;
  }
  .kb-single-hero-inner {
    padding-block: var(--space-l);
  }
  .kb-single-hero-inner.has-featured-image {
    grid-template-columns: 1fr;
  }
  .kb-single-hero-image {
    order: -1;
    min-height: 220px;
  }
  .kb-single-hero-image img {
    min-height: 220px;
  }
  .kb-single-shell {
    padding-block: var(--space-l);
  }
  .kb-single-layout {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .kb-single-sidebar {
    position: static;
  }
  .post-navigation .nav-links {
    grid-template-columns: 1fr;
  }
  .post-navigation .nav-next {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   TAXONOMY TERM ARCHIVES — kb_topic / resource_type single-term pages
   (taxonomy-kb_topic.php, taxonomy-resource_type.php via
   template-parts/taxonomy-term-archive.php) + the standalone Categories
   page template (page-templates/categories.php).
   -------------------------------------------------------------------------- */
.kb-term-hero-icon{ width:56px; height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.15); border-radius:var(--radius-card); }
.kb-term-hero-icon .icon{ width:28px; height:28px; font-size:28px; color:var(--color-white); }
 
.kb-topic-series{
  margin-bottom:var(--space-l);
  padding-bottom:var(--space-l);
  border-bottom:1px solid var(--color-border);
}
.topic-series-grid{ margin-top:var(--space-s); }
.topic-series-card{ justify-content:flex-start; align-items:flex-start; }
.topic-series-icon-wrap{
  width:36px;
  height:36px;
  padding:8px;
  border-radius:var(--radius-card);
  background:var(--color-primary-100);
}
.topic-series-icon-wrap .icon{ width:100%; height:100%; }
.topic-series-description{
  display:block;
  margin-top:4px;
  color:var(--color-text-secondary);
  font-size:var(--font-size-small);
  line-height:1.4;
}