/*
 * Hand-compiled from assets/src/scss (reset, variables, header, footer, hero).
 * Running `npm run build:css` will regenerate this file from source — safe
 * to overwrite once you run the build; the two are kept in sync.
 */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
}

:root {
  /* Official Orchasp Brand Palette */
  --color-orchasp-navy: #0a2e4f;
  --color-orchasp-blue: #1b7fc4;
  --color-sail-cyan: #4eb8e5;
  --color-deep-teal: #0e7c7b;
  --color-ember-orange: #c1521f;
  --color-ink: #0f1b2a;
  --color-slate: #64748b;
  --color-mist: #f4f8fb;
  --color-hairline: #e4ebf2;
  --color-white: #ffffff;

  /* Theme Token Aliases */
  --color-navy-950: #0a2e4f;
  --color-navy-900: #0a2e4f;
  --color-navy-800: #0a2e4f;
  --color-accent-blue: #1b7fc4;
  --color-cta-blue: #1b7fc4;
  --color-accent-light-blue: #4eb8e5;
  --color-body-muted: #64748b;
  --color-text-faint: #64748b;
  --color-text-muted: #b7c2d6;
  --color-surface-muted: #f4f8fb;
  --color-card-bg: #ffffff;
  --color-card-border: #e4ebf2;
  --color-border-subtle-light: #e4ebf2;
  --color-icon-bg: #e7f1fb;
  --color-header-border: #e4ebf2;
  --color-header-nav-text: #0f1b2a;

  --color-icon-bg-dark: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.16);
  --color-border-faint: rgba(255, 255, 255, 0.1);

  --color-positive: #10b981;
  --color-positive-bg: rgba(16, 185, 129, 0.12);
  --color-negative: #ef4444;
  --color-negative-bg: rgba(239, 68, 68, 0.12);
  --color-accent-terracotta: #c1521f;

  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-stat: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace, sans-serif;

  --container-max-width: 1320px;
  --container-max-width-wide: 1600px;
  --container-padding-inline: 40px;
  --header-height: 84px;

  --radius-button: 12px;
}

html {
  font-family: var(--font-family-base);
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  color: var(--color-ink);
  font-family: var(--font-family-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  color: inherit;
}



/* ---- Header ---- */

/* Header is fixed and out of flow; #site-scroll (header.php/footer.php)
   holds everything else and does its own internal scrolling, sized to
   exactly the remaining viewport height below the header. This is what
   makes the page's scrollbar start below the header instead of running
   the full viewport height beside it. overflow: hidden on html/body also
   establishes a block formatting context, keeping #site-scroll's top
   margin from collapsing into body. */
html,
body {
  height: 100%;
  overflow: hidden;
}

.site-scroll {
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  margin-top: var(--header-height);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

[id] {
  scroll-margin-top: 36px;
}

body.is-menu-open .site-scroll {
  overflow: hidden !important;
}




/* The WP admin toolbar (when logged in) is ALSO position: fixed, pinned to
   the real viewport top with a much higher z-index — and unlike normal
   content, our fixed header doesn't get pushed down by WP core's
   `html { margin-top: 32px }` trick, since a fixed element's containing
   block is the viewport itself, not an ancestor's box. Without this, the
   toolbar sits on top of our header's own top slice, making the (still
   correctly centered) logo/nav look shifted up in whatever's left visible
   below it. WP adds .admin-bar to <body> automatically whenever the
   toolbar shows (see body_class() in header.php), and switches the
   toolbar to 46px tall at its own 782px breakpoint — matched here exactly. */
body.admin-bar .site-header {
  top: 32px;
}

/* margin-top intentionally NOT overridden here — WP core already adds
   `html { margin-top: 32px }` whenever the admin bar shows, which pushes
   every normal-flow element (this one included) down for free.
   .site-scroll's own base margin-top: var(--header-height) is enough;
   adding another +32px on top of that double-counts the offset. Only the
   height needs adjusting, so the bottom edge still lines up with the
   *visible* viewport instead of running 32px past it (html being
   32px-margined but still height: 100% would otherwise push the last
   32px of scrollable content below the fold). */
body.admin-bar .site-scroll {
  height: calc(100vh - var(--header-height) - 32px);
}

@media (max-width: 1024px) {
  body.admin-bar .site-header__panel {
    top: calc(var(--header-height) + 32px);
    height: calc(100dvh - var(--header-height) - 32px);
  }
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }

  body.admin-bar .site-scroll {
    height: calc(100vh - var(--header-height) - 46px);
  }

  body.admin-bar .site-header__panel {
    top: calc(var(--header-height) + 46px);
    height: calc(100dvh - var(--header-height) - 46px);
  }
}


.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--color-white);
  border-top: 2px solid var(--color-header-border);
}

.site-header__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 24px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.site-header__logo img {
  display: block;
  max-height: 68px;
  width: auto;
  margin-top: 3px;
}


.site-header__logo--fallback {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
}

.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.site-header__toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-ink);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.site-header__toggle[aria-expanded="true"]
  .site-header__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"]
  .site-header__toggle-line:nth-child(2) {
  opacity: 0;
}

.site-header__toggle[aria-expanded="true"]
  .site-header__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header__panel {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  justify-content: flex-end;
}

.site-header__menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-header__menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-header-nav-text);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-header__menu a:hover {
  color: var(--color-ink);
}

.site-header__menu > li.current-menu-item > a,
.site-header__menu > li.current-menu-ancestor > a,
.site-header__menu > li.current_page_item > a,
.site-header__menu > li > a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
  position: relative;
}

.site-header__menu > li.current-menu-item > a::before,
.site-header__menu > li.current-menu-ancestor > a::before,
.site-header__menu > li.current_page_item > a::before,
.site-header__menu > li > a[aria-current="page"]::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-accent-blue);
  border-radius: 1px;
}

.site-header__menu .menu-item-has-children {
  position: relative;
}

.site-header__menu .menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
}

.site-header__menu .sub-menu {
  display: none;
}

.site-header__menu .sub-menu a,
.site-header__menu .sub-menu li.current-menu-item > a,
.site-header__menu .sub-menu li.current-menu-ancestor > a,
.site-header__menu .sub-menu li.current_page_item > a,
.site-header__menu .sub-menu a[aria-current="page"] {
  color: var(--color-header-nav-text);
  font-weight: 500;
}

.site-header__menu .sub-menu a::before,
.site-header__menu .sub-menu li.current-menu-item > a::before,
.site-header__menu .sub-menu li.current-menu-ancestor > a::before,
.site-header__menu .sub-menu li.current_page_item > a::before,
.site-header__menu .sub-menu a[aria-current="page"]::before {
  content: none !important;
  display: none !important;
}

.site-header__menu .sub-menu a:hover {
  color: var(--color-ink);
}


.site-header__menu .sub-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

/*
 * Desktop-only dropdown reveal (min-width, not max-width) — kept mutually
 * exclusive from the mobile accordion rules below. Without this split,
 * tapping a link on mobile triggers :focus-within (a well-known
 * mobile-browser quirk), and since this rule has higher specificity than
 * the mobile override, the floating desktop card would win and render on
 * top of the accordion.
 */
@media (min-width: 1025px) {
  .site-header__menu .menu-item-has-children:hover > .sub-menu,
  .site-header__menu .menu-item-has-children:focus-within > .sub-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    padding: 8px;
    margin-top: 12px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    z-index: 10;
  }

  .site-header__menu .sub-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--color-header-nav-text);
  }

  .site-header__menu .sub-menu a:hover {
    background-color: rgba(22, 35, 63, 0.06);
  }
}

.site-header__cta {
  flex-shrink: 0;
}

.site-header__cta-menu {
  display: flex;
}

.site-header__cta-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-sail-cyan);
  color: var(--color-navy-950);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--radius-button);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-header__cta-menu a:hover {
  background-color: var(--color-orchasp-blue);
  color: var(--color-white);
}


@media (max-width: 1024px) {
  .site-header__toggle {
    display: flex;
  }

  .site-header__panel {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background-color: var(--color-white);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    z-index: 100;
    padding-bottom: 80px;
  }





  .site-header__panel.is-open {
    display: flex;
  }

  .site-header__nav {
    width: 100%;
    touch-action: pan-y;
  }

  .site-header__menu {
    touch-action: pan-y;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-top: 1px solid var(--color-border-subtle-light);
  }


  .site-header__menu > li {
    border-bottom: 1px solid var(--color-border-subtle-light);
  }

  .site-header__menu > li > a {
    display: flex;
    width: 100%;
    padding: 22px 24px;
    font-size: 19px;
  }

  .site-header__menu .menu-item-has-children > a::after {
    margin-left: auto;
  }

  .site-header__menu .menu-item-has-children.is-submenu-open > a::after {
    transform: rotate(225deg);
  }

  .site-header__menu .menu-item-has-children .sub-menu {
    display: none;
    position: static;
    box-shadow: none;
    margin-top: 0;
    padding: 4px 0 20px 48px;
    background-color: transparent;
    border-radius: 0;
  }

  .site-header__menu .menu-item-has-children.is-submenu-open > .sub-menu {
    display: block;
  }

  .site-header__menu .sub-menu a {
    padding: 10px 0;
    font-size: 16px;
    color: var(--color-header-nav-text);
    opacity: 0.65;
  }

  .site-header__cta {
    padding: 20px 24px 24px;
  }

  .site-header__cta-menu {
    width: 100%;
  }

  .site-header__cta-menu a {
    width: 100%;
  }
}

/* ---- Footer ---- */

.site-footer {
  min-height: 1px;
  background: #0a2e4f;
  color: var(--color-white);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) minmax(120px, 0.85fr) minmax(200px, 1.35fr) minmax(200px, 1.35fr) minmax(160px, 1.05fr);
  gap: 32px;
  max-width: var(--container-max-width-wide);
  padding: 36px var(--container-padding-inline) 40px;
  margin-inline: auto;
  align-items: start;
}

.site-footer__brand-col,
.site-footer__links,
.site-footer__contact,
.site-footer__us-contact,
.site-footer__legal-col,
.site-footer__legal {
  min-width: 0;
}

.site-footer__brand-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.site-footer__logo-img {
  display: block;
  width: auto;
  height: auto;
  max-height: 105px;
  max-width: 175px;
  object-fit: contain;
  object-position: left center;
}


.site-footer__identity-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-footer__identity-copy p,
.site-footer__cin,
.site-footer__copyright,
.site-footer__reg-no {
  margin: 0 0 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-style: normal;
  line-height: 1.45;
}

.site-footer__identity-copy p:last-child {
  margin-bottom: 0;
}

.site-footer p,
.site-footer address,
.site-footer__nav a {
  margin: 0 0 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-style: normal;
  line-height: 1.45;
  text-decoration: none;
}

.site-footer__nav li {
  margin: 0 0 10px;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
}

.site-footer__nav,
.site-footer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social-wrap {
  margin-top: 20px;
}

.site-footer__social {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.site-footer__social a:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

.site-footer__social svg {
  width: 16px;
  height: 16px;
  display: block;
}

.site-footer__social span {
  font-size: 16px;
  font-weight: 700;
}

.site-footer__contact a,
.site-footer__us-contact a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.site-footer__contact-company {
  margin: 0 0 8px;
  color: var(--color-white);
  font-weight: 600;
}


.legal-page {
  background: var(--color-surface-muted);
}

.legal-page__header {
  background: var(--color-navy-900);
  color: var(--color-white);
  padding-block: 72px 64px;
}

.legal-page__container {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.legal-page__header h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2rem, 1.55rem + 1.8vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-white);
}

.legal-page__body {
  padding-block: 72px 96px;
}

.legal-page__content {
  color: var(--color-body-muted);
  font-size: 17px;
  line-height: 1.8;
}

.legal-page__content > * + * {
  margin-top: 24px;
}

.legal-page__content h2,
.legal-page__content h3 {
  color: var(--color-ink);
  font-weight: 800;
  line-height: 1.25;
}

.legal-page__content h2 {
  font-size: 28px;
}

.legal-page__content h3 {
  font-size: 22px;
}

.legal-page__content a {
  color: var(--color-accent-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page__content ul,
.legal-page__content ol {
  padding-inline-start: 24px;
  list-style: revert;
}

.legal-page__content li + li {
  margin-top: 8px;
}

.contact-page {
  background: var(--color-white);
}

.contact-page .hero__heading {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 3.375rem);
  line-height: 1.15;
}


.contact-page__hero {
  background: var(--color-surface-muted);
  padding-block: 56px 32px;
  text-align: center;
}

.contact-page__container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.contact-page__hero h1 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(2.25rem, 1.7rem + 2vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.contact-page__body {
  padding-block: 48px 96px;
}

.contact-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.contact-page__form,
.contact-page__details {
  max-width: 680px;
}

.contact-page__form {
  display: grid;
  gap: 24px;
}

.contact-page__name-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.contact-page label {
  display: grid;
  gap: 8px;
  color: var(--color-body-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-page input,
.contact-page select,
.contact-page textarea {
  width: 100%;
  border: 1px solid var(--color-card-border);
  border-radius: 2px;
  background: var(--color-surface-muted);
  color: var(--color-ink);
  padding: 13px 14px;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-family-base);
}

.contact-page select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230f1b2a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.contact-page textarea {
  min-height: 210px;
  resize: vertical;
}

.contact-page input:focus,
.contact-page select:focus,
.contact-page textarea:focus {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 1px;
}

.contact-page button {
  min-height: 54px;
  border-radius: var(--radius-button);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
  cursor: pointer;
  border: none;
}

.contact-page button:hover,
.contact-page button:focus-visible {
  background: var(--color-accent-blue);
}

.contact-page__details {
  color: var(--color-body-muted);
  font-size: 17px;
  line-height: 1.7;
}

.contact-page__details > * + * {
  margin-top: 24px;
}

.contact-page__heading {
  color: var(--color-ink);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.contact-page__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}

.contact-page__intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-body-muted);
  margin-bottom: 24px;
}

.contact-page__details h2:not(.contact-page__heading) {
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}


.contact-page__company-details {
  margin-top: 48px;
}

.contact-page__company-details--us {
  margin-top: 32px;
}

.contact-page__company-details--info {
  margin-top: 32px;
}

.contact-page__company-details h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.contact-page__company-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
  margin-top: 6px !important;
}

.contact-page__company-address {
  font-size: 16px;
  margin-top: 4px !important;
  color: var(--color-body-muted);
  line-height: 1.6;
}

.contact-page__company-details p {
  margin-top: 8px;
  line-height: 1.6;
}

.contact-page__company-details a {
  color: var(--color-accent-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}



.contact-page__notice {
  margin-bottom: 24px;
  padding: 14px 16px;
  border-left: 4px solid var(--color-accent-blue);
  background: var(--color-surface-muted);
  color: var(--color-ink);
  border-radius: 0 6px 6px 0;
}

.contact-page__notice--success {
  border-color: var(--color-positive);
  background: rgba(31, 146, 84, 0.08);
}

.contact-page__notice--error {
  border-color: var(--color-negative);
  background: rgba(192, 57, 43, 0.08);
}


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

  .contact-page__form,
  .contact-page__details {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .contact-page__container {
    padding-inline: 24px;
  }

  .contact-page__hero {
    padding-block: 44px 28px;
  }

  .contact-page__body {
    padding-block: 36px 64px;
  }

  .contact-page__name-fields {
    grid-template-columns: 1fr;
  }

  .contact-page__company-details {
    margin-top: 44px;
  }
}

@media (max-width: 560px) {
  .legal-page__header {
    padding-block: 48px;
  }

  .legal-page__body {
    padding-block: 48px 64px;
  }

  .legal-page__container {
    padding-inline: 24px;
  }

  .legal-page__content {
    font-size: 16px;
  }
}

@media (max-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    padding-bottom: 48px;
  }


  .site-footer__links,
  .site-footer__legal {
    align-self: start;
  }
}

@media (max-width: 560px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-inline: 24px;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 20px));
  }

  .site-footer__links,
  .site-footer__legal {
    align-self: start;
  }
}


/* ---- Hero ---- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  color: var(--color-white);
}

.hero__slides {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.hero__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__image--gradient {
  background: radial-gradient(
    circle at center,
    #5b93d6 0%,
    #3a64a8 45%,
    #2c4f8f 100%
  );
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(8, 14, 27, 0.96) 0%,
      rgba(8, 14, 27, 0.88) 32%,
      rgba(8, 14, 27, 0.55) 60%,
      rgba(8, 14, 27, 0.25) 100%
    ),
    linear-gradient(0deg, rgba(8, 14, 27, 0.5) 0%, rgba(8, 14, 27, 0) 30%);
}

.hero__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  width: 100%;
  padding-block: 96px 64px;
  padding-inline: clamp(84px, 8vw, 120px);
}




.hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-light-blue);
  margin-bottom: 20px;
}

.hero__heading {
  max-width: 900px;
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 3.625rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: 28px;
}

.hero__description {
  max-width: 660px;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  color: var(--color-hairline);
  margin-bottom: 40px;
}



.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-white);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 600;
  padding: 18px 30px;
  border-radius: var(--radius-button);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.hero__cta:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.hero__cta-icon {
  flex-shrink: 0;
}

/* The arrow icon sets its own width/height inline (hardcoded markup, not
   from the icon library); the document icon comes from
   orchasp_get_icon_svg() instead, which returns a raw library SVG with
   no size attributes of its own — sized here to match. */
.hero__cta-icon--document svg {
  width: 16px;
  height: 16px;
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  backdrop-filter: blur(4px);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.hero__arrow:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}

.hero__arrow--prev {
  left: 24px;
}

.hero__arrow--next {
  right: 24px;
}

@media (max-width: 1024px) {
  .hero {
    min-height: 560px;
  }

  .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 14, 27, 0.92) 0%,
      rgba(8, 14, 27, 0.82) 55%,
      rgba(8, 14, 27, 0.9) 100%
    );
  }

  .hero__content {
    padding-block: 64px 48px;
    padding-inline: 72px;
  }
}

@media (max-width: 560px) {
  .hero {
    min-height: 520px;
  }

  .hero__content {
    padding-block: 48px 44px;
    padding-inline: 56px;
  }


  .hero__eyebrow {
    font-size: 11px;
    margin-bottom: 14px;
  }

  .hero__description {
    margin-bottom: 24px;
  }


  .hero__cta {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 14px;
  }

  .hero__arrow {
    width: 36px;
    height: 36px;
  }

  .hero__arrow--prev {
    left: 10px;
  }

  .hero__arrow--next {
    right: 10px;
  }
}

/* ---- Ecosystems ---- */

.ecosystems {
  background-color: var(--color-surface-muted);
}

.ecosystems__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.ecosystems__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 48px;
}

.ecosystems__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}


.ecosystems__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ecosystem-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  padding: 32px;
}

.ecosystem-card__image {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}

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

.ecosystem-card__category {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 10px;
}

.ecosystem-card__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.ecosystem-card__description {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-body-muted);
  margin-bottom: 20px;
}

.ecosystem-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent-blue);
  transition: gap 0.15s ease;
}

.ecosystem-card__link:hover {
  gap: 9px;
}

.ecosystem-card__link-icon {
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .ecosystems__content {
    padding-block: 80px;
  }

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

@media (max-width: 560px) {
  .ecosystems__content {
    padding-block: 56px;
  }

  .ecosystems__heading {
    margin-bottom: 36px;
  }

  .ecosystems__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ecosystem-card {
    padding: 24px;
  }
}

/* ---- Core Enablers ---- */

.core-enablers {
  background-color: var(--color-navy-950);
  color: var(--color-white);
}

.core-enablers__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.core-enablers--no-intro .core-enablers__content {
  padding-top: 8px;
}

.core-enablers--careers {
  background-color: #1b7fc4;
}

.core-enablers--careers .core-enablers__eyebrow {
  color: var(--color-white);
  opacity: 0.9;
}

.core-enablers--careers .core-enablers__heading {
  color: var(--color-white);
}

.core-enablers--careers .core-enablers__item {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.core-enablers--careers .core-enablers__icon {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

.core-enablers--careers .core-enablers__item-title {
  color: var(--color-white);
}

.core-enablers--careers .core-enablers__item-description {
  color: rgba(255, 255, 255, 0.88);
}

.core-enablers--careers .core-enablers__item-link {
  color: var(--color-white);
}


.core-enablers__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-light-blue);
  margin-bottom: 20px;
}

.core-enablers__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin-bottom: 48px;
}

.core-enablers__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-sail-cyan);
  margin-top: 14px;
}


/* 3-per-row card grid — same pattern as the About Us "Mission & Values"
   cards (.company-value-card), recolored for this section's own dark
   background instead of sharing styles across sections. */
/* grid-template-rows: 1fr (not the auto default) is what actually
   guarantees every card is the same height regardless of content length:
   for an intrinsically-sized grid container, explicit fr row tracks are
   resolved from the SAME per-fr value — i.e. the tallest row's content —
   and applied to every row, not just the one that needed it.
   align-items: stretch then makes each card actually fill that shared
   row height rather than just being allowed to. Two rows for 6 items at
   3 columns. */
.core-enablers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

.core-enablers__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #103960;
  border: 1px solid rgba(78, 184, 229, 0.22);
  border-radius: 20px;
  padding: 32px;
  height: 100%;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.core-enablers__item:hover {
  transform: translateY(-2px);
  border-color: var(--color-sail-cyan);
}

.core-enablers__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: rgba(78, 184, 229, 0.15);
  color: var(--color-sail-cyan);
  margin-bottom: 20px;
}

.core-enablers__icon svg {
  width: 24px;
  height: 24px;
}

.core-enablers__item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}

.core-enablers__item-description {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  min-height: 3.1em;
}

/* Optional per-card "Learn More" link — same placement/pattern as the
   homepage Ecosystems cards' .ecosystem-card__link (margin-top: auto
   pins it to the bottom of the equal-height card regardless of
   description length), recolored for this section's dark background. */
.core-enablers__item-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-sail-cyan);
  transition: gap 0.15s ease, color 0.15s ease;
}

.core-enablers__item-link:hover {
  color: var(--color-white);
  gap: 9px;
}


.core-enablers__item-link-icon {
  flex-shrink: 0;
}

.core-enablers__item-link-icon--document svg {
  width: 14px;
  height: 14px;
}

/* Modifier for the Platforms page's 3-item instance (see
   section-platforms-core-enablers.php) — same 3-column desktop layout as
   the base grid already has, just 1 row instead of 2 since there are
   only 3 items total, not 6. Only the row math differs from the base
   .core-enablers__grid; column counts and the mobile single-column
   collapse stay the same. */
.core-enablers__grid--three {
  grid-template-rows: repeat(1, 1fr);
}

@media (max-width: 1024px) {
  .core-enablers__content {
    padding-block: 80px;
  }

  .core-enablers__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  /* 3 items at 2 columns = 2 rows. */
  .core-enablers__grid--three {
    grid-template-rows: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .core-enablers__content {
    padding-block: 56px;
  }

  .core-enablers__heading {
    margin-bottom: 36px;
  }

  .core-enablers__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .core-enablers__item {
    padding: 24px;
  }
}

/* ---- Industry Impact ---- */

.industry-impact {
  background-color: var(--color-surface-muted);
}

.industry-impact__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.industry-impact__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
}

.industry-impact__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 40px;
}

.industry-impact__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}


/* position: relative so the prev/next arrows below can float as an
   overlay (position: absolute) rather than sit inline before/after the
   tab list — that inline layout used to push the first tab to the right
   of the heading above whenever there was overflow. Floating them
   instead means the tab list always starts flush with the heading, and
   the arrows can stay permanently visible/enabled without ever
   affecting that alignment. */
.industry-impact__tabs-row {
  position: relative;
  border-bottom: 1px solid var(--color-border-subtle-light);
  margin-bottom: 56px;
}

/* .industry-impact__tab has padding: 0 0 16px (zero on top) so its text
   sits flush at the top of its box, reserving the bottom 16px for the
   active-tab underline — it isn't vertically centered in its own box.
   This icon otherwise would be centered against the row's full height
   (tab text + reserved underline space), landing visibly lower than the
   tab text next to it. Nudged up by half that reserved space to match
   the text's actual vertical center instead. */
.industry-impact__tabs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 8px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-button);
  background-color: var(--color-white);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: var(--color-ink);
  z-index: 2;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.industry-impact__tabs-arrow:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-accent-blue);
}

.industry-impact__tabs-arrow--prev {
  left: 0;
}

.industry-impact__tabs-arrow--next {
  right: 0;
}

/* Hidden only when the tabs already fit on one line with nothing to
   scroll to in either direction (see initIndustryImpactTabs() in
   main.js) — otherwise always visible, just disabled/faded at whichever
   edge is currently reached, per request. */
.industry-impact__tabs-arrow[hidden] {
  display: none;
}

.industry-impact__tabs-arrow:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* Single line, scrolled horizontally rather than wrapped — the prev/next
   arrows above drive it, plus native touch/trackpad scrolling. Scrollbar
   is hidden (all 3 browser-specific ways) since the arrows and visible
   tab underline are the intended scroll UI. */
/* overflow-y explicit, not left to default — per the CSS overflow spec,
   an unset overflow-y silently becomes "auto" too as soon as overflow-x
   isn't "visible", making this vertically scrollable by accident and
   letting a vertical wheel/trackpad gesture grab it for a moment before
   falling through to the page scroll. Locked to hidden so only
   left/right scrolling is ever possible. */
.industry-impact__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.industry-impact__tabs::-webkit-scrollbar {
  display: none;
}

.industry-impact__tab {
  position: relative;
  flex-shrink: 0;
  padding: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-body-muted);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.industry-impact__tab:hover {
  color: var(--color-ink);
}

.industry-impact__tab.is-active {
  color: var(--color-ink);
  font-weight: 600;
}

.industry-impact__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--color-accent-blue);
}

.industry-impact__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.industry-impact__panel[hidden] {
  display: none;
}

.industry-impact__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body-muted);
  margin-bottom: 16px;
}

.industry-impact__title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-ink);
  margin-bottom: 20px;
}

.industry-impact__description {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-body-muted);
  margin-bottom: 32px;
}

.industry-impact__stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 20px;
  margin-bottom: 36px;
}

.industry-impact__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.industry-impact__stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1;
}

.industry-impact__stat-label {
  font-size: 14px;
  color: var(--color-body-muted);
}

.industry-impact__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-navy-950);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 28px;
  border-radius: var(--radius-button);
  transition: background-color 0.15s ease;
}

.industry-impact__cta:hover {
  background-color: var(--color-ink);
}

.industry-impact__cta-icon {
  flex-shrink: 0;
}

.industry-impact__panel-media {
  width: 100%;
}

.industry-impact__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

@media (max-width: 1024px) {
  .industry-impact__content {
    padding-block: 80px;
  }

  .industry-impact__panel {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .industry-impact__content {
    padding-block: 56px;
  }

  .industry-impact__heading {
    margin-bottom: 32px;
  }

  .industry-impact__tabs-row {
    margin-bottom: 40px;
  }

  .industry-impact__tabs {
    gap: 28px;
  }
}

/* ---- Vision & Investors ---- */

.vision-investors {
  background-color: var(--color-white);
}

.vision-investors__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: stretch;
  padding-block: 120px;
}

.vision-investors__future {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--color-navy-950);
  border-radius: 28px;
  padding: 56px 40px;
}

.vision-investors__future-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-light-blue);
  margin-bottom: 24px;
}

.vision-investors__future-year {
  font-size: clamp(3.5rem, 2.6rem + 3.5vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-white);
  margin-bottom: 24px;
}

.vision-investors__future-description {
  max-width: 320px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 40px;
}

.vision-investors__future-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-button);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-white);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.vision-investors__future-cta:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.vision-investors__investor {
  display: flex;
  flex-direction: column;
}

.vision-investors__investor-heading {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 28px;
}

.vision-investors__documents {
  border-top: 1px solid var(--color-border-subtle-light);
  margin-bottom: 32px;
}

.vision-investors__portal-cta {
  display: block;
  width: 100%;
  background-color: var(--color-navy-950);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding: 20px 28px;
  border-radius: var(--radius-button);
  margin-top: auto;
  transition: background-color 0.15s ease;
}

.vision-investors__portal-cta:hover {
  background-color: var(--color-ink);
}

.investor-document {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
  border-bottom: 1px solid var(--color-border-subtle-light);
  color: var(--color-ink);
  transition: color 0.15s ease;
}

.investor-document:hover {
  color: var(--color-accent-blue);
}

.investor-document__title {
  font-size: 16px;
  font-weight: 500;
}

.investor-document__icon {
  flex-shrink: 0;
  color: var(--color-body-muted);
}

@media (max-width: 1024px) {
  .vision-investors__content {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: 80px;
  }
}

@media (max-width: 560px) {
  .vision-investors__content {
    padding-block: 56px;
  }

  .vision-investors__future {
    padding: 40px 24px;
    border-radius: 20px;
  }
}

/* ---- Clients ---- */

.clients {
  background-color: var(--color-white);
}

/* container-wide (not the standard container) — same treatment as
   Enterprise Platform Modules, so the logo carousel spreads further
   across the screen instead of sitting in the narrower 1320px column. */
.clients__content {
  max-width: var(--container-max-width-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 80px;
}

.clients__eyebrow {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 40px;
}

.clients__carousel {
  display: flex;
  align-items: center;
  gap: 16px;
}

.clients__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-subtle-light);
  border-radius: var(--radius-button);
  color: var(--color-ink);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.clients__arrow:hover {
  background-color: var(--color-surface-muted);
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.clients__viewport {
  flex: 1;
  overflow: hidden;
}

.clients__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  will-change: transform;
}

.clients__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 36px;
  margin-top: 4px;
}


.clients__logo img {
  display: block;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .clients__content {
    padding-block: 56px;
  }
}

@media (max-width: 560px) {
  .clients__content {
    padding-block: 40px;
  }

  .clients__eyebrow {
    margin-bottom: 28px;
  }

  .clients__track {
    gap: 36px;
  }
}

/* ---- Company Stats ---- */

.company-stats {
  background-color: var(--color-sail-cyan);
  color: var(--color-white);
}

.company-stats__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 64px;
}

.company-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.company-stats__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.company-stats__value {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-white);
}

.company-stats__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
}


@media (max-width: 1024px) {
  .company-stats__content {
    padding-block: 48px;
  }

  .company-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
}

@media (max-width: 560px) {
  .company-stats__content {
    padding-block: 32px;
  }
}

/* ---- About Legacy ---- */

/* Shared by two independent instances: the Industries page's own Legacy
   section (section-industries-legacy.php — still text + image, 2-column
   grid, unchanged) and the About Us page's Legacy instances
   (legacy-section-item.php — text only now, no image, via the
   .about-legacy__content--text-only modifier below). Don't remove
   __media/__image or the base grid — Industries still depends on them. */
.about-legacy {
  background-color: var(--color-white);
}

.about-legacy__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 68px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 64px;
}

/* About Us's Legacy instances only (see legacy-section-item.php) — no
   image to pair with, so this collapses the 2-column grid to one
   column. No max-width on the text either (per request, it should
   spread across the full container instead of leaving a narrow column
   with empty space beside it) — Industries' section-industries-legacy.php
   never applies this modifier, so its 2-column image layout above is
   untouched. */
.about-legacy__content--text-only {
  grid-template-columns: 1fr;
}

/* --about-legacy-text-color is set inline per-instance (see
   legacy-section-item.php) as a custom property, not a plain `color`,
   specifically so it can override this default — an ancestor's plain
   `color` wouldn't win over this element's own explicit color, but an
   inherited custom property does. Industries' instance never sets this
   custom property, so it keeps the fallback var(--color-ink) as before. */
.about-legacy__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--about-legacy-text-color, var(--color-ink));
  margin-bottom: 18px;
}

.about-legacy__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}


/* Tightened from 1.75/20px/8px — felt like too much air between lines
   and paragraphs, per request. */
.about-legacy__body {
  color: var(--about-legacy-text-color, var(--color-body-muted));
  font-size: 16px;
  line-height: 1.6;
}

.about-legacy__body p {
  margin-bottom: 14px;
}

.about-legacy__body p:last-child {
  margin-bottom: 0;
}

/* Global reset (assets/src/scss/base/_reset.scss) strips list-style and
   padding from every <ul>/<ol> site-wide — restored here so a
   bulleted/numbered list typed into the WYSIWYG editor actually renders
   as one instead of looking like plain unmarked paragraphs. Applies to
   both instances sharing __body (Industries' WYSIWYG field can use
   lists too, not just About Us's). */
.about-legacy__body ul,
.about-legacy__body ol {
  padding-left: 22px;
  margin-bottom: 14px;
}

.about-legacy__body ul {
  list-style: disc;
}

.about-legacy__body ol {
  list-style: decimal;
}

.about-legacy__body li {
  margin-bottom: 6px;
}

.about-legacy__body li:last-child {
  margin-bottom: 0;
}

.about-legacy__body ul:last-child,
.about-legacy__body ol:last-child {
  margin-bottom: 0;
}

.about-legacy__media {
  border-radius: 20px;
  overflow: hidden;
}

.about-legacy__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .about-legacy__content {
    padding-block: 48px;
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 560px) {
  .about-legacy__content {
    padding-block: 36px;
  }
}

/* ---- Mission & Values ---- */

.mission-values {
  background-color: var(--color-surface-muted);
}

.mission-values__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.mission-values--platforms .mission-values__content {
  padding-top: 16px;
}


.mission-values__heading {
  text-align: center;
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 48px;
}

.mission-values__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
  margin-inline: auto;
}


/* --mv-grid-rows is set inline per-render (see section-mission-values.php)
   to ceil(post count / 3), since Company Value is an open-ended CPT and
   the row count isn't knowable here the way Core Enablers' fixed 6 items
   is. Explicit 1fr row tracks are what make every card match the
   tallest row's height regardless of description length — same
   technique as .core-enablers__grid, just fed a dynamic count instead
   of a hardcoded one. */
.mission-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(var(--mv-grid-rows, 1), 1fr);
  gap: 24px;
  align-items: stretch;
}

.investor-grievances__grid {
  grid-template-columns: repeat(var(--mv-grid-cols, 3), 1fr);
}

@media (max-width: 900px) {
  .investor-grievances__grid {
    grid-template-columns: 1fr;
  }
}

.company-value-card {

  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-card-bg);
  border-radius: 20px;
  padding: 32px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.05),
    0 10px 24px rgba(15, 23, 42, 0.05);
}

.company-value-card__icon {
  display: inline-flex;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
}

.company-value-card__icon svg {
  width: 30px;
  height: 30px;
}

/* Used by the Careers page "Why Orchasp" cards (see
   career-benefit-card.php) — a light-blue chip background behind the
   icon, matching that specific design reference; Mission & Values' own
   cards use the plain .company-value-card__icon above with no chip. */
.company-value-card__icon--chip {
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--color-icon-bg);
}

.company-value-card__icon--chip svg {
  width: 22px;
  height: 22px;
}

/* Used by the Platforms page's own "Mission & Values" cards (see
   platform-value-card.php) in place of .company-value-card__icon above
   — a real uploaded image instead of the inline-SVG icon library,
   bounded to a consistent logo-style box (object-fit: contain, so it
   never distorts/crops whatever aspect ratio gets uploaded). */
.company-value-card__image {
  display: inline-flex;
  align-items: center;
  height: 52px;
  margin-bottom: 20px;
}

.company-value-card__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.company-value-card__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.company-value-card__description {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-body-muted);
}

@media (max-width: 1024px) {
  .mission-values__content {
    padding-block: 80px;
  }

  .mission-values__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

@media (max-width: 560px) {
  .mission-values__content {
    padding-block: 56px;
  }

  .mission-values__heading {
    margin-bottom: 32px;
  }
}

.leadership {
  background-color: var(--color-white);
}

.leadership__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.leadership__header {
  margin-bottom: 48px;
}

.leadership__heading {
  font-size: 29px;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.leadership__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
  margin-bottom: 12px;
}


.leadership__description {
  font-size: 16px;
  color: var(--color-body-muted);
}

.leadership__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Redesigned to carry a bio paragraph (see leadership-card.php) — now a
   bordered card with a padded text block, same family as .video-card /
   .media-report-card, rather than a bare image+caption. */
.leadership-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  overflow: hidden;
}

/* Square — a middle ground between 4/3 (too short, was cropping heads
   out of taller headshot photos) and 3/4 (fixed that, but ended up too
   tall per follow-up feedback). */
.leadership-card__media {
  aspect-ratio: 1 / 1;
}

.leadership-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leadership-card__body {
  padding: 24px;
}

.leadership-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.leadership-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-blue);
  margin-bottom: 16px;
}

/* The bio itself no longer renders here (see leadership-card.php) —
   this button opens .leadership-modal instead. Same small-link pattern
   as .ecosystem-card__link / .core-enablers__item-link elsewhere in
   this theme. */
.leadership-card__view-bio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-blue);
  transition: gap 0.15s ease;
}

.leadership-card__view-bio:hover {
  gap: 9px;
}

.leadership-card__view-bio-icon {
  flex-shrink: 0;
}

/* Shared "View bio" modal (see
   template-parts/partials/leadership-bio-modal.php) — a native
   <dialog>, so the backdrop/centering/focus-trap/Escape-to-close all
   come from the browser; only its own visual styling and the
   ::backdrop color are set here. */
.leadership-modal {
  max-width: 560px;
  width: calc(100% - 48px);
  /* The global reset's `* { margin: 0; }` (assets/src/scss/base/_reset.scss)
     wipes out the browser's own `margin: auto` that native <dialog>
     relies on to center itself — without restoring it explicitly here,
     the dialog renders pinned to the top-left instead of centered. */
  margin: auto;
  border: none;
  border-radius: 20px;
  padding: 0;
  background-color: var(--color-card-bg);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.leadership-modal::backdrop {
  background-color: rgba(10, 17, 32, 0.6);
}

.leadership-modal__content {
  padding: 36px;
}

.leadership-modal__name {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.leadership-modal__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
}

.leadership-modal__bio {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-body-muted);
  margin-bottom: 28px;
}

.leadership-modal__close {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-body-muted);
  transition: color 0.15s ease;
}

.leadership-modal__close:hover {
  color: var(--color-ink);
}

@media (max-width: 1024px) {
  .leadership__content {
    padding-block: 80px;
  }

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

@media (max-width: 560px) {
  .leadership__content {
    padding-block: 56px;
  }

  .leadership__header {
    margin-bottom: 32px;
  }

  .leadership__grid {
    grid-template-columns: 1fr;
  }

  .leadership-modal__content {
    padding: 28px;
  }
}

.cta-banner {
  background-color: var(--color-surface-muted);
}

.cta-banner__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.cta-banner__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--color-cta-blue);
  border-radius: 28px;
  padding: 72px 40px;
}

.cta-banner__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin-bottom: 16px;
}

.cta-banner__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-sail-cyan);
  margin-top: 14px;
  margin-inline: auto;
}


.cta-banner__description {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 40px;
}

.cta-banner__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cta-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button);
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 700;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.cta-banner__cta--primary {
  background-color: var(--color-white);
  color: var(--color-accent-blue);
}

.cta-banner__cta--primary:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.cta-banner__cta--secondary {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
}

.cta-banner__cta--secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
  .cta-banner__content {
    padding-block: 80px;
  }
}

@media (max-width: 560px) {
  .cta-banner__content {
    padding-block: 56px;
  }

  .cta-banner__card {
    padding: 48px 24px;
    border-radius: 20px;
  }

  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cta-banner__cta {
    padding: 15px 24px;
  }
}

/* ---- Industries Challenges ---- */

.industries-challenges {
  background-color: var(--color-surface-muted);
}

.industries-challenges__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.industries-challenges--no-intro .industries-challenges__content {
  padding-top: 8px;
}

.industries-challenges__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
}

.industries-challenges__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 40px;
}

.industries-challenges__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}


/* --ic-rows-desktop / --ic-rows-tablet are set inline per-render (see
   section-industries-challenges.php) to ceil(post count / columns) at
   each breakpoint's own column count, since Industry Challenge is an
   open-ended CPT and the row count isn't knowable here. Explicit 1fr row
   tracks are what make every card match the tallest row's height
   regardless of description length, at any card count — same technique
   as .core-enablers__grid / .mission-values__grid, just fed two dynamic
   counts instead of one (this grid has an extra 2-column tablet step
   between its 4-column desktop and 1-column mobile layouts, each needing
   its own row count). */
.industries-challenges__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(var(--ic-rows-desktop, 1), 1fr);
  gap: 24px;
  align-items: stretch;
}

.industries-challenges__item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-card-bg);
  border-radius: 20px;
  padding: 32px;
}

/* Plain colored icon, no chip/background box behind it — deliberately
   different treatment from Ecosystems/Core Enablers' icon chips. */
.industries-challenges__icon {
  display: inline-flex;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
}

.industries-challenges__icon svg {
  width: 30px;
  height: 30px;
}

.industries-challenges__item-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 12px;
  min-height: 50px;
}

@media (max-width: 560px) {
  .industries-challenges__item-title {
    min-height: auto;
    font-size: 17px;
  }
}



.industries-challenges__item-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-body-muted);
}

@media (max-width: 1024px) {
  .industries-challenges__content {
    padding-block: 80px;
  }

  .industries-challenges__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(var(--ic-rows-tablet, 1), 1fr);
  }
}

@media (max-width: 560px) {
  .industries-challenges__content {
    padding-block: 56px;
  }

  .industries-challenges__heading {
    margin-bottom: 32px;
  }

  .industries-challenges__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }
}

/* ---- Engineering Lifecycle ---- */

.engineering-lifecycle {
  background-color: var(--color-surface-muted);
}

.engineering-lifecycle__content {
  max-width: var(--container-max-width-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.engineering-lifecycle--no-intro .engineering-lifecycle__content {
  padding-top: 56px;
}

.engineering-lifecycle__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
}

.engineering-lifecycle__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 48px;
}

.engineering-lifecycle__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}

.engineering-lifecycle__track-wrap {
  width: 100%;
}

.engineering-lifecycle__timeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

@media (max-width: 1360px) {
  .engineering-lifecycle__timeline {
    gap: 12px;
  }
}

@media (max-width: 1024px) {
  .engineering-lifecycle__timeline {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 580px;
    margin-inline: auto;
  }
}

.engineering-lifecycle__step {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (max-width: 1024px) {
  .engineering-lifecycle__step {
    width: 100%;
  }
}

.engineering-lifecycle__badge-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  height: 38px;
}

@media (max-width: 1024px) {
  .engineering-lifecycle__badge-row {
    margin-bottom: 12px;
    height: 36px;
  }
}

.engineering-lifecycle__badge {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #1b7fc4;
  color: var(--color-white);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(27, 127, 196, 0.35);
  flex-shrink: 0;
}

.engineering-lifecycle__connector {
  position: absolute;
  left: calc(50% + 18px);
  width: calc(100% + 16px - 36px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  height: 12px;
  pointer-events: none;
}

@media (max-width: 1360px) {
  .engineering-lifecycle__connector {
    width: calc(100% + 12px - 36px);
  }
}

@media (max-width: 1024px) {
  .engineering-lifecycle__connector {
    display: none;
  }
}

.engineering-lifecycle__connector-arrow {
  width: 100%;
  height: 12px;
  display: block;
}

.engineering-lifecycle__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
  background-color: var(--color-card-bg);
  border-radius: 28px 28px 16px 16px;
  border: 1px solid var(--color-hairline);
  box-shadow: 0 4px 16px rgba(10, 46, 79, 0.04);
  padding: 30px 18px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.engineering-lifecycle__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10, 46, 79, 0.08);
}

@media (max-width: 1024px) {
  .engineering-lifecycle__card {
    border-radius: 24px;
    padding: 28px 24px 26px;
    text-align: center;
    align-items: center;
  }
}

@media (max-width: 560px) {
  .engineering-lifecycle__card {
    padding: 24px 20px 22px;
  }
}

.engineering-lifecycle__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  color: #1b7fc4;
  margin-bottom: 20px;
}

.engineering-lifecycle__icon svg {
  width: 48px;
  height: 48px;
  display: block;
}

@media (max-width: 1024px) {
  .engineering-lifecycle__icon {
    height: 44px;
    margin-bottom: 16px;
  }

  .engineering-lifecycle__icon svg {
    width: 44px;
    height: 44px;
  }
}

.engineering-lifecycle__card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
  margin-bottom: 12px;
  min-height: 58px;
}

@media (max-width: 1360px) and (min-width: 1025px) {
  .engineering-lifecycle__card-title {
    min-height: 68px;
  }
}

@media (max-width: 1024px) {
  .engineering-lifecycle__card-title {
    min-height: auto;
    font-size: 15px;
    margin-bottom: 8px;
  }
}



.engineering-lifecycle__card-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-body-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .engineering-lifecycle__card-desc {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

@media (max-width: 1024px) {
  .engineering-lifecycle__content {
    padding-block: 80px;
  }
}

@media (max-width: 560px) {
  .engineering-lifecycle__content {
    padding-block: 56px;
    padding-inline: 24px;
  }

  .engineering-lifecycle__heading {
    margin-bottom: 32px;
  }
}


/* ---- Enterprise Modules ---- */


.enterprise-modules {
  background-color: var(--color-surface-muted);
  overflow-x: hidden;
}


/* Deliberately container-wide, not the standard container — this
   section's cards are meant to spread further across the screen than
   the usual 1320px content column, not sit in a narrower centered block
   like every other section. */
.enterprise-modules__content {
  max-width: var(--container-max-width-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
  text-align: center;
}

.enterprise-modules__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.enterprise-modules__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
  margin-inline: auto;
  margin-bottom: 12px;
}


.enterprise-modules__description {
  font-size: 16px;
  color: var(--color-body-muted);
  margin-bottom: 48px;
}

/* --em-rows-desktop / --em-rows-tablet are set inline per-render (see
   section-enterprise-modules.php) to ceil(post count / columns) at each
   breakpoint's own column count, since Enterprise Module is an
   open-ended CPT and the row count isn't knowable here. Explicit 1fr row
   tracks are what make every card match the tallest row's height
   regardless of content length, at any card count — same technique as
   .industries-challenges__grid. */
.enterprise-modules__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(var(--em-rows-desktop, 1), 1fr);
  gap: 24px;
  align-items: stretch;
  text-align: center;
}

.enterprise-modules__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  background-color: var(--color-card-bg);
  border-radius: 16px;
  padding: 32px 24px;
}

/* Plain colored icon, no chip/background box behind it — same treatment
   as .industries-challenges__icon. */
.enterprise-modules__icon {
  display: inline-flex;
  color: var(--color-accent-blue);
  margin-bottom: 16px;
}

.enterprise-modules__icon svg {
  width: 26px;
  height: 26px;
}

.enterprise-modules__item-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
}

/* Clamped to 3 lines regardless of actual copy length — the "Show more"
   button below reveals the full, unclamped text in a modal (see
   .enterprise-module-modal below), same reasoning as the About Us
   Leadership cards' "View bio" button. */
.enterprise-modules__item-description {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-body-muted);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Same small-link pattern as .leadership-card__view-bio /
   .ecosystem-card__link elsewhere in this theme. */
.enterprise-modules__show-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-blue);
  transition: gap 0.15s ease;
}

.enterprise-modules__show-more:hover {
  gap: 9px;
}

.enterprise-modules__show-more-icon {
  flex-shrink: 0;
}

/* Shared "Show more" modal (see
   template-parts/partials/enterprise-module-modal.php) — same native
   <dialog> pattern as .leadership-modal, just its own class/copy. */
.enterprise-module-modal {
  max-width: 560px;
  width: calc(100% - 48px);
  margin: auto;
  border: none;
  border-radius: 20px;
  padding: 0;
  background-color: var(--color-card-bg);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.enterprise-module-modal::backdrop {
  background-color: rgba(10, 17, 32, 0.6);
}

.enterprise-module-modal__content {
  padding: 36px;
}

.enterprise-module-modal__name {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 20px;
}

.enterprise-module-modal__description {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-body-muted);
  margin-bottom: 28px;
}

.enterprise-module-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.enterprise-module-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background-color: var(--color-sail-cyan);
  color: var(--color-navy-950);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(78, 184, 229, 0.25);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.enterprise-module-modal__cta:hover {
  background-color: var(--color-orchasp-blue);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(27, 127, 196, 0.35);
  transform: translateY(-1px);
}

.enterprise-module-modal__cta:hover .enterprise-module-modal__cta-icon {
  transform: translateX(3px);
}

.enterprise-module-modal__cta-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.enterprise-module-modal__close {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-body-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  margin-left: auto;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.enterprise-module-modal__close:hover {
  color: var(--color-ink);
  background-color: var(--color-surface-muted);
}


@media (max-width: 1024px) {
  .enterprise-modules__content {
    padding-block: 80px;
  }

  .enterprise-modules__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(var(--em-rows-tablet, 1), 1fr);
  }
}

@media (max-width: 560px) {
  .enterprise-modules__content {
    padding-block: 56px;
  }

  .enterprise-modules__description {
    margin-bottom: 32px;
  }

  .enterprise-modules__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .enterprise-module-modal__content {
    padding: 28px;
  }
}

.investor-filings {
  background-color: var(--color-white);
}

.investor-filings__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.investor-filings__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.investor-filings__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 12px;
}

.investor-filings__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 0;
}

.investor-filings__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}


.investor-filings__year-field {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.investor-filings__year-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-body-muted);
}

.investor-filings__year-select {
  appearance: none;
  min-width: 170px;
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--color-border-subtle-light);
  border-radius: var(--radius-button);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230f1b2a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.investor-filings__year-select:hover,
.investor-filings__year-select:focus-visible {
  border-color: var(--color-accent-blue);
  outline: none;
}

.investor-filings__tabs-row {
  margin-bottom: 40px;
}

.investor-filings__body {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 48px;
  align-items: start;
}

.investor-filings__panels {
  min-width: 0;
}

.investor-filings__panel[hidden] {
  display: none;
}

.investor-filings__year-panel[hidden] {
  display: none;
}

.investor-filings__empty {
  font-size: 15px;
  color: var(--color-body-muted);
  padding-block: 32px;
}

/* position: relative so the prev/next arrows float as an overlay
   (position: absolute) instead of sitting inline beside the row — same
   reasoning as .industry-impact__tabs-row: an inline arrow pushed the
   first card to the right of the tab label above it whenever it was
   visible. Floating them means the row always starts flush with the tab
   above, and the arrows can stay permanently visible/enabled without
   ever affecting that alignment. */
.investor-filings__cards-row-wrap {
  position: relative;
}

.investor-filings__cards-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-button);
  background-color: var(--color-card-bg);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: var(--color-ink);
  z-index: 2;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.investor-filings__cards-arrow:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-accent-blue);
}

.investor-filings__cards-arrow--prev {
  left: 0;
}

.investor-filings__cards-arrow--next {
  right: 0;
}

/* Hidden only when the row already fits with nothing to scroll to in
   either direction (see initInvestorFilingsCardScroll() in main.js) —
   otherwise always visible, just disabled/faded at whichever edge is
   currently reached, per request. */
.investor-filings__cards-arrow[hidden] {
  display: none;
}

.investor-filings__cards-arrow:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


.investor-filings__cards-row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.investor-filings__cards-row::-webkit-scrollbar {
  display: none;
}

.investor-filings__report-card {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  overflow: hidden;
}

.investor-filings__report-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.investor-filings__report-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
}

.investor-filings__report-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
}

.investor-filings__report-card-description {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-body-muted);
  margin-bottom: 4px;
}

.investor-filings__report-card-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-blue);
  transition: color 0.15s ease;
}

.investor-filings__report-card-action:hover {
  color: var(--color-ink);
}

.investor-filings__list {
  border-top: 1px solid var(--color-border-subtle-light);
}

.investor-filings__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--color-border-subtle-light);
  color: var(--color-ink);
  transition: color 0.15s ease;
}

.investor-filings__list-item:hover {
  color: var(--color-accent-blue);
}

.investor-filings__list-item-title {
  font-size: 15px;
  font-weight: 500;
}

.investor-filings__list-item-icon {
  flex-shrink: 0;
  color: var(--color-body-muted);
}

.investor-filings__quick-resources {
  background-color: var(--color-navy-950);
  border-radius: 24px;
  padding: 36px 32px;
}

.investor-filings__quick-resources-heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
}

.investor-filings__quick-links {
  margin-top: 20px;
  border-top: 1px solid var(--color-border-subtle);
}

.investor-filings__quick-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-white);
  transition: color 0.15s ease;
}

.investor-filings__quick-link:hover {
  color: var(--color-accent-light-blue);
}

.investor-filings__quick-link-title {
  font-size: 15px;
  font-weight: 500;
}

.investor-filings__quick-link-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .investor-filings__content {
    padding-block: 80px;
  }

  .investor-filings__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .investor-filings__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .investor-filings__content {
    padding-block: 56px;
  }

  .investor-filings__report-card {
    flex-basis: 260px;
  }

  .investor-filings__quick-resources {
    padding: 28px 24px;
    border-radius: 20px;
  }
}

.stock-overview {
  background-color: var(--color-white);
}

.stock-overview__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

/* Stock Overview card sits beside the single Digital Annual Report card —
   exactly 2 cards in this row. align-items is left at its grid default
   (stretch), not overridden to start, specifically so both columns match
   the taller card's height rather than each sizing to its own content.
   Collapses to one column on tablet, Stock Overview above the report
   card. */
.stock-overview__row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}

.stock-overview__card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  padding: 32px;
}

/* The Digital Annual Report card — sized by its grid column's own 1fr
   track; height comes from .stock-overview__row's align-items: stretch,
   matching the Stock Overview card next to it rather than its own
   content. */
.report-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  padding: 40px 32px;
}

.report-highlight__heading {
  display: inline-block;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-accent-blue);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 20px;
}

.report-highlight__description {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-body-muted);
  margin-bottom: 20px;
}

.report-highlight__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent-terracotta);
  transition: opacity 0.15s ease;
}

.report-highlight__link:hover {
  opacity: 0.75;
}

.stock-info {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  padding: 32px;
}

.stock-info__heading {
  display: block;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--color-border-subtle-light);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-ink);
}

.stock-info__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.stock-info__logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--color-icon-bg);
}

.stock-info__company-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
}

.stock-overview__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.stock-overview__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-accent-blue);
}

.stock-overview__icon svg {
  width: 26px;
  height: 26px;
}

.stock-overview__heading {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-ink);
}

.stock-overview__tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--color-border-subtle-light);
  margin-bottom: 24px;
}

.stock-overview__tab {
  position: relative;
  flex: 1;
  padding-bottom: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-body-muted);
  text-align: center;
  transition: color 0.15s ease;
}

.stock-overview__tab:hover {
  color: var(--color-ink);
}

.stock-overview__tab.is-active {
  color: var(--color-ink);
}

.stock-overview__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--color-accent-blue);
}

.stock-overview__status {
  font-size: 14px;
  color: var(--color-body-muted);
  padding-block: 24px;
  text-align: center;
}

.stock-overview__ticker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.stock-overview__symbol {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-body-muted);
}

.stock-overview__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.stock-overview__price {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.stock-overview__change {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-negative);
}

.stock-overview__change.is-positive {
  color: var(--color-positive);
}

.stock-overview__change.is-negative {
  color: var(--color-negative);
}

.stock-overview__change-period {
  font-size: 13px;
  color: var(--color-body-muted);
}

.stock-overview__chart {
  width: 100%;
  margin-bottom: 20px;
}

.stock-overview__chart.is-empty .stock-overview__chart-plot,
.stock-overview__chart.is-empty .stock-overview__chart-xaxis {
  display: none;
}

.stock-overview__chart-plot {
  display: flex;
  height: 180px;
}

.stock-overview__chart-svg-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  cursor: crosshair;
}

.stock-overview__chart-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.stock-overview__chart-line {
  stroke: var(--color-accent-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.15s ease;
}

.stock-overview__chart-line.is-positive {
  stroke: var(--color-positive);
}

.stock-overview__chart-line.is-negative {
  stroke: var(--color-negative);
}

.stock-overview__chart-grid-line {
  stroke: var(--color-border-subtle-light);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.stock-overview__chart-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-negative);
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 4px rgba(10, 17, 32, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.stock-overview__chart-dot.is-positive {
  background-color: var(--color-positive);
}

.stock-overview__chart-dot.is-negative {
  background-color: var(--color-negative);
}

.stock-overview__chart-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 8px;
  background-color: var(--color-navy-950);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}

.stock-overview__chart-tooltip[hidden] {
  display: none;
}

.stock-overview__chart-tooltip-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

.stock-overview__chart-tooltip-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.stock-overview__chart-yaxis {
  position: relative;
  width: 44px;
  flex-shrink: 0;
}

.stock-overview__chart-yaxis span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--color-body-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stock-overview__chart-xaxis {
  position: relative;
  height: 16px;
  margin-top: 8px;
  margin-right: 44px;
}

.stock-overview__chart-xaxis span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--color-body-muted);
  white-space: nowrap;
}

.stock-overview__chart-xaxis span.is-first {
  transform: translateX(0);
}

.stock-overview__chart-xaxis span.is-last {
  transform: translateX(-100%);
}

.stock-overview__meta {
  font-size: 13px;
  color: var(--color-body-muted);
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border-subtle-light);
}



.stock-overview__stats {
  display: flex;
  flex-direction: column;
}

.stock-overview__stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--color-border-subtle-light);
}

.stock-overview__stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stock-overview__stat-row[hidden] {
  display: none;
}

.stock-overview__stat-label {
  font-size: 14px;
  color: var(--color-body-muted);
}

.stock-overview__stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
  .stock-overview__content {
    padding-block: 80px;
  }

  .stock-overview__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .stock-overview__content {
    padding-block: 56px;
  }

  .stock-overview__card {
    padding: 24px;
    border-radius: 16px;
  }

  .report-highlight {
    padding: 32px 24px;
    border-radius: 16px;
  }

  .stock-info {
    padding: 24px;
    border-radius: 16px;
  }
}

.capabilities {
  background-color: var(--color-white);
}

/* No max-width container at all here (unlike container-wide elsewhere in
   this theme) — per the reference design, this section spans the full
   viewport with only the standard side gutter, not a centered column of
   any fixed width. */
.capabilities__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.capabilities__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 16px;
}

.capabilities__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 20px;
}

.capabilities__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}


.capabilities__description {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body-muted);
  margin-bottom: 40px;
}

/* Pill tab row — wraps to further rows once it has more tabs than fit on
   one line (this is an open-ended CPT, not a fixed count), unlike the
   Industry Impact tabs which stay single-line and scroll horizontally. */
.capabilities__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.capabilities__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid var(--color-border-subtle-light);
  border-radius: 999px;
  background-color: var(--color-white);
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.capabilities__tab:hover {
  border-color: var(--color-accent-blue);
}

.capabilities__tab.is-active {
  background-color: var(--color-sail-cyan);
  border-color: var(--color-sail-cyan);
  color: var(--color-navy-950);
  font-weight: 700;
}


.capabilities__tab-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.capabilities__tab-icon svg {
  width: 16px;
  height: 16px;
}

.capabilities__panel {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-subtle-light);
  border-radius: 20px;
  padding: 40px;
}

.capabilities__panel[hidden] {
  display: none;
}

.capabilities__panel-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
}

.capabilities__panel-heading {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 20px;
}

.capabilities__panel-subheading {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.capabilities__panel-description {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-body-muted);
  margin-bottom: 28px;
}

.capabilities__enable-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body-muted);
  margin-bottom: 16px;
}

.capabilities__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.capabilities__chip {
  padding: 11px 18px;
  border: 1px solid var(--color-border-subtle-light);
  border-radius: 10px;
  background-color: var(--color-card-bg);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
}

.capabilities__panel-sidebar {
  display: flex;
  flex-direction: column;
}

.capabilities__why-box {
  background-color: var(--color-icon-bg);
  border: 1.5px solid var(--color-accent-blue);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
}

.capabilities__why-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.capabilities__why-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-body-muted);
}

.capabilities__ecosystems-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body-muted);
  margin-bottom: 16px;
}

.capabilities__ecosystem-tags {
  display: grid;
  grid-template-columns: repeat(var(--ecosystem-columns), minmax(0, 1fr));
  gap: 10px;
}

.capabilities__ecosystem-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: var(--color-sail-cyan);
  color: var(--color-navy-950);
  font-size: 13px;
  font-weight: 600;
}


@media (max-width: 560px) {
  .capabilities__ecosystem-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .capabilities__content {
    padding-block: 80px;
  }

  .capabilities__panel-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 560px) {
  .capabilities__content {
    padding-block: 56px;
  }

  .capabilities__panel {
    padding: 28px 24px;
    border-radius: 16px;
  }
}

.value-impact {
  background-color: var(--color-surface-muted);
}

/* No max-width container (same reasoning as .capabilities__content) —
   per the reference design, this section spans the full viewport with
   only the standard side gutter, not a centered column of any fixed
   width. */
.value-impact__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.value-impact__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 16px;
}

.value-impact__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 20px;
}

.value-impact__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}


.value-impact__description {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body-muted);
  margin-bottom: 48px;
}

.value-impact__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

/* Grid's default align-items: stretch already makes this column fill
   the row's full height (matching its sibling); flex-direction: column
   here just lets the card/grid inside it (below) grow to actually use
   that height via flex: 1, instead of sitting at its own shorter
   intrinsic height with empty space left over beneath it. */
.value-impact__column {
  display: flex;
  flex-direction: column;
}

.value-impact__column-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body-muted);
  margin-bottom: 20px;
}

/* Industries Served — one bordered card, dividers on each item's own
   bottom edge rather than the card, so with no grid gap between the two
   columns the borders read as one continuous line spanning the card's
   full width. .is-last-row (added server-side, since this is an
   open-ended CPT and the final row's item count isn't fixed) removes the
   divider from whichever item(s) end up in the last row. */
.value-impact__industries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Matches the deliverables grid's height instead of sitting at its
     own shorter content height — see .value-impact__column above. */
  flex: 1;
  /* stretch (not start) — grows each row's own height evenly to fill
     the box, rather than leaving the rows compact with empty space
     below. Row dividers stay flush/continuous either way since it's
     the rows themselves growing, not gaps opening up between them. */
  align-content: stretch;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  overflow: hidden;
}

.value-impact__industry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--color-border-subtle-light);
}

.value-impact__industry.is-last-row {
  border-bottom: none;
}

.value-impact__industry-icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}

.value-impact__industry-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
}

.value-impact__industries-cta {
  margin-top: 24px;
  display: flex;
  justify-content: flex-start;
}

.value-impact__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-button);
  background-color: var(--color-sail-cyan);
  color: var(--color-navy-950);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.value-impact__cta-button span {
  color: inherit;
}

.value-impact__cta-button svg {
  width: 14px;
  height: 14px;
  color: inherit;
  stroke: currentColor;
}

.value-impact__cta-button:hover,
.value-impact__cta-button:focus-visible {
  background-color: var(--color-orchasp-blue);
  color: var(--color-white);
  text-decoration: none;
  outline: none;
}



/* Deliverables — reuses the Industries page Enterprise Platform Modules

   pattern (see the .enterprise-modules__grid rules above): equal card
   height via explicit 1fr row tracks, row count computed server-side
   since this is an open-ended CPT. Left-aligned instead of centered, and
   2 columns instead of 4, per the design reference. */
.value-impact__deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(var(--dv-rows, 1), 1fr);
  gap: 20px;
  align-items: stretch;
  /* Symmetric with .value-impact__industries above, so whichever
     column's content happens to be taller, both stay equal height —
     not just "industries stretches to match deliverables' current
     height" in one direction. */
  flex: 1;
}

.value-impact__deliverable {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: 100%;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  padding: 24px;
}

/* Plain colored icon, no chip/background box behind it — same treatment
   as .enterprise-modules__icon. */
.value-impact__deliverable-icon {
  display: inline-flex;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
}

.value-impact__deliverable-icon svg {
  width: 22px;
  height: 22px;
}

.value-impact__deliverable-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.value-impact__deliverable-description {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-body-muted);
}

@media (max-width: 1024px) {
  .value-impact__content {
    padding-block: 80px;
  }

  .value-impact__columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .value-impact__content {
    padding-block: 56px;
  }

  .value-impact__industries {
    grid-template-columns: 1fr;
    flex: initial;
  }

  .value-impact__industry.is-last-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-subtle-light);
  }

  .value-impact__industry:last-child {
    border-bottom: none;
  }

  .value-impact__deliverables {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    flex: initial;
  }
}

/* Same background as the section above it (Value Impact) — this thin top
   rule is what visually separates the two rather than a color change. */
.enabling-ecosystem {
  background-color: var(--color-surface-muted);
  border-top: 1px solid var(--color-border-subtle-light);
}

.enabling-ecosystem__content {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  text-align: center;
  padding-block: 120px;
}

.enabling-ecosystem__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 28px;
}

.enabling-ecosystem__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
  margin-inline: auto;
}


.enabling-ecosystem__paragraph {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-body-muted);
  margin-bottom: 24px;
}

.enabling-ecosystem__paragraph:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .enabling-ecosystem__content {
    padding-block: 80px;
  }
}

@media (max-width: 560px) {
  .enabling-ecosystem__content {
    padding-block: 56px;
  }
}

/* Dark panel pairing a uniform bulleted list of plain text rows (no
   separate heading treatment, and sized down from the original
   heading-scale text per request) with an image alongside it. */
.platforms-journey {
  background-color: var(--color-navy-950);
  color: var(--color-white);
}

/* Reduced from the default 120/80/56 — per request, this section was
   leaving a lot of empty space top and bottom. */
.platforms-journey__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* stretch (not center) — makes .platforms-journey__media fill the
     row's height, which is set by the list's own content (see
     .platforms-journey__media/.platforms-journey__image below for how
     the image is kept from inflating that height itself). */
  align-items: stretch;
  gap: 56px;
}

/* No divider lines between rows — spacing comes from the list's own
   gap instead of each item's border-bottom. */
.platforms-journey__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 480px;
  list-style: none;
}

.platforms-journey__item {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Plain bullet dot in place of the removed row divider. */
.platforms-journey__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent-light-blue);
}

/* position: relative + an absolutely-positioned .platforms-journey__image
   inside is what actually makes "image height == list height" work — a
   height: 100% <img> alone still lets its own natural pixel dimensions
   influence how tall the grid row calculates itself to be in the first
   place, which is why the image kept coming out taller than the list
   even with align-items: stretch. Taking the image out of flow entirely
   (absolute positioning) removes it from that calculation, so the row's
   auto height is driven purely by the list, and .platforms-journey__media
   just stretches to match it. */
.platforms-journey__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.platforms-journey__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .platforms-journey__content {
    padding-block: 56px;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Below tablet the columns stack instead of sitting side-by-side —
     there's no sibling row height left to match, so this needs its own
     explicit ratio instead. */
  .platforms-journey__media {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .platforms-journey__content {
    padding-block: 40px;
  }

  .platforms-journey__item {
    font-size: 14px;
  }
}

.why-orchasp {
  background-color: var(--color-white);
}

/* No max-width container (same reasoning as .capabilities__content /
   .value-impact__content) — per the reference design, this section spans
   the full viewport with only the standard side gutter, not a centered
   column of any fixed width. */
.why-orchasp__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 64px;
  align-items: start;
}

.why-orchasp__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
}


.why-orchasp__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 24px;
}

.why-orchasp__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}


.why-orchasp__paragraph {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-body-muted);
  margin-bottom: 24px;
}

.why-orchasp__paragraph:last-child {
  margin-bottom: 0;
}

/* Reuses .company-value-card (see the Mission & Values rules above) at 2
   per row instead of 3, per request — same equal-card-height technique
   (--wo-grid-rows set inline per-render, see section-why-orchasp.php,
   since Career Benefit is an open-ended CPT). */
.why-orchasp__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(var(--wo-grid-rows, 1), 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .why-orchasp__content {
    padding-block: 80px;
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .why-orchasp__content {
    padding-block: 56px;
  }

  .why-orchasp__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

/* No max-width container — per the reference design, this section spans
   the full viewport with only the standard side gutter, same reasoning
   as .capabilities__content / .why-orchasp__content. */
.vision-2030 {
  background-color: var(--color-navy-950);
  color: var(--color-white);
}

.vision-2030__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.vision-2030__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-light-blue);
  margin-bottom: 20px;
}


.vision-2030__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin-bottom: 48px;
}

.vision-2030__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-sail-cyan);
  margin-top: 14px;
}


/* --v2030-rows-desktop / --v2030-rows-tablet are set inline per-render
   (see section-vision-2030.php) to ceil(post count / columns) at each
   breakpoint's own column count, since Vision Pillar is an open-ended
   CPT and the row count isn't knowable here. Explicit 1fr row tracks are
   what make every card match the tallest row's height regardless of
   content length, at any card count — same technique as
   .enterprise-modules__grid. */
.vision-2030__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(var(--v2030-rows-desktop, 1), 1fr);
  gap: 24px;
  align-items: stretch;
}

.vision-2030__card {
  display: flex;
  flex-direction: column;
  background-color: #103960;
  border: 1px solid rgba(78, 184, 229, 0.22);
  border-radius: 20px;
  padding: 28px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.vision-2030__card:hover {
  transform: translateY(-2px);
  border-color: var(--color-sail-cyan);
}

.vision-2030__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(78, 184, 229, 0.15);
  color: var(--color-sail-cyan);
  flex-shrink: 0;
  margin-bottom: 20px;
}

.vision-2030__icon svg {
  width: 20px;
  height: 20px;
}

.vision-2030__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 12px;
}

.vision-2030__description {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}


@media (max-width: 1024px) {
  .vision-2030__content {
    padding-block: 80px;
  }

  .vision-2030__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(var(--v2030-rows-tablet, 1), 1fr);
  }
}

@media (max-width: 560px) {
  .vision-2030__content {
    padding-block: 56px;
  }

  .vision-2030__heading {
    margin-bottom: 36px;
  }

  .vision-2030__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .vision-2030__card {
    padding: 24px;
  }
}

/* Adapted from a reference design that used a different type family and
   color palette — restyled here to this theme's own tokens/fonts (see
   section-open-roles.php's own docblock). */
.open-roles {
  background-color: var(--color-surface-muted);
}

/* No max-width container — per request, this section spans the full
   viewport with only the standard side gutter, same reasoning as
   .capabilities__content / .why-orchasp__content / .vision-2030__content. */
.open-roles__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.open-roles__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 20px;
}

.open-roles__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 20px;
}

.open-roles__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}


.open-roles__description {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body-muted);
  margin-bottom: 56px;
}

.open-roles__group {
  margin-bottom: 48px;
}

.open-roles__group:last-child {
  margin-bottom: 0;
}

.open-roles__group-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-subtle-light);
  margin-bottom: 20px;
}

.open-roles__group-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.open-roles__group-count {
  font-size: 13px;
  color: var(--color-body-muted);
}

.open-roles__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-listing {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  overflow: hidden;
}

.job-listing__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 28px;
  text-align: left;
}

.job-listing__summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.job-listing__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
}

.job-listing__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-listing__badge {
  padding: 6px 14px;
  border-radius: 999px;
  background-color: var(--color-surface-muted);
  color: var(--color-body-muted);
  font-size: 13px;
  font-weight: 600;
}

.job-listing__badge--highlight {
  background-color: var(--color-icon-bg);
  color: var(--color-accent-blue);
}

.job-listing__posted-time {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-body-muted);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.job-listing__posted-label {
  font-weight: 600;
  color: var(--color-body-muted);
}

@media (max-width: 560px) {
  .job-listing__posted-time {
    display: none;
  }
}



/* Plus/minus indicator — a horizontal bar always shown, plus a vertical
   bar that scales away when the panel is open, turning "+" into "−". */
.job-listing__icon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-subtle-light);
  border-radius: 50%;
  color: var(--color-ink);
  transition: border-color 0.15s ease;
}

.job-listing__icon-bar {
  position: absolute;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform 0.15s ease;
}

.job-listing__icon-bar--h {
  width: 14px;
  height: 1.5px;
}

.job-listing__icon-bar--v {
  width: 1.5px;
  height: 14px;
}

.job-listing__toggle:hover .job-listing__icon {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.job-listing__toggle[aria-expanded="true"] .job-listing__icon-bar--v {
  transform: scaleY(0);
}

.job-listing__panel {
  border-top: 1px solid var(--color-border-subtle-light);
}

.job-listing__panel[hidden] {
  display: none;
}

.job-listing__panel-inner {
  padding: 28px;
}

.job-listing__paragraph {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-body-muted);
  margin-bottom: 24px;
}

.job-listing__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  margin-bottom: 14px;
}

.job-listing__label:not(:first-child) {
  margin-top: 28px;
}

.job-listing__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.job-listing__chip {
  padding: 8px 14px;
  border-radius: 8px;
  background-color: var(--color-surface-muted);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
}

.job-listing__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.job-listing__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-body-muted);
}

.job-listing__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-body-muted);
}

.job-listing__list-paragraph {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-body-muted);
}

.job-listing__resume {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle-light);
  font-size: 15px;
  color: var(--color-ink);
}

.job-listing__resume a {
  color: var(--color-accent-blue);
  font-weight: 600;
}

.job-listing__resume a:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .open-roles__content {
    padding-block: 80px;
  }
}

@media (max-width: 560px) {
  .open-roles__content {
    padding-block: 56px;
  }

  .job-listing__toggle {
    padding: 20px;
  }

  .job-listing__panel-inner {
    padding: 20px;
  }
}

.careers-cta {
  background-color: var(--color-white);
}

.careers-cta__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 80px;
}

.careers-cta__card {
  position: relative;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
}

.careers-cta__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fades from opaque (left, where the text sits) to more visible image on
   the right, matching the reference. */
.careers-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 17, 32, 0.92) 0%,
    rgba(10, 17, 32, 0.78) 45%,
    rgba(10, 17, 32, 0.35) 100%
  );
}

.careers-cta__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  max-width: 640px;
  padding: 56px;
}

.careers-cta__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.careers-cta__heading {
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin-bottom: 20px;
}

.careers-cta__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-sail-cyan);
  margin-top: 14px;
}


.careers-cta__description {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.careers-cta__link {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.careers-cta__link:hover {
  color: var(--color-accent-light-blue);
}

@media (max-width: 1024px) {
  .careers-cta__content {
    padding-block: 64px;
  }
}

@media (max-width: 560px) {
  .careers-cta__content {
    padding-block: 48px;
  }

  .careers-cta__card {
    min-height: 360px;
    border-radius: 20px;
  }

  .careers-cta__text {
    padding: 32px 24px;
  }
}

/* Adapted from a reference design that used a different type family and
   scale — restyled here to this theme's own tokens/fonts (see
   section-media-videos.php's own docblock). */
.media-videos {
  background-color: var(--color-white);
}

.media-videos__content {
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.media-videos__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border-subtle-light);
}

.media-videos__heading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.media-videos__heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 8px;
}


/* Shared by both this section's dropdown and .media-reports__header's —
   defined once here since the markup/behavior is identical in both
   places (see initYearFilter() in main.js), same precedent as
   .about-legacy being one definition reused across independent pages. */
.media-year-filter {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.media-year-filter__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-body-muted);
}

.media-year-filter__select {
  appearance: none;
  min-width: 120px;
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--color-border-subtle-light);
  border-radius: var(--radius-button);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230f1b2a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.media-year-filter__select:hover,
.media-year-filter__select:focus-visible {
  border-color: var(--color-accent-blue);
  outline: none;
}

.media-videos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.video-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 14px;
  overflow: hidden;
}

.video-card[hidden] {
  display: none !important;
}


.video-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--color-navy-950);
}

.video-card__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-navy-950);
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 8px 20px rgba(10, 17, 32, 0.35);
  transition: transform 0.15s ease;
}

/* Optical centering — a solid triangle sits slightly left of a true
   visual center, so nudge it right within the circle. */
.video-card__play svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.video-card__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.video-card__footer {
  padding: 20px 24px;
}

.video-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
}

@media (max-width: 1024px) {
  .media-videos__content {
    padding-block: 80px;
  }

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

@media (max-width: 560px) {
  .media-videos__content {
    padding-block: 56px;
  }

  .media-videos__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Adapted from a reference design that used a different type family and
   scale — restyled here to this theme's own tokens/fonts (see
   section-media-reports.php's own docblock). Full-bleed from the start —
   every section built after Capabilities has ended up with this same
   no-max-width, side-gutter-only treatment on request, see
   .media-videos__content / .careers-cta__content for the identical
   reasoning. */
.media-reports {
  background-color: var(--color-surface-muted);
}

.media-reports__content {
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.media-reports__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border-subtle-light);
}

.media-reports__heading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.media-reports__heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 8px;
}


.media-reports__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.media-report-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 14px;
  padding: 20px;
}

.media-report-card[hidden] {
  display: none !important;
}


.media-report-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90px;
}

.media-report-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.media-report-card__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border: 1.5px solid var(--color-accent-blue);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.media-report-card__view:hover {
  background-color: var(--color-accent-blue);
  color: var(--color-white);
}

@media (max-width: 1024px) {
  .media-reports__content {
    padding-block: 80px;
  }

  .media-reports__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .media-reports__content {
    padding-block: 56px;
  }

  .media-reports__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Adapted from a reference design that used a different type family and
   scale — restyled here to this theme's own tokens/fonts (see
   section-featured-media.php's own docblock). Full-bleed per request —
   same no-max-width, side-gutter-only treatment as .media-videos__content
   / .media-reports__content above it. */
.featured-media {
  background-color: var(--color-white);
}

.featured-media__content {
  padding-inline: var(--container-padding-inline);
  padding-block: 120px;
}

.featured-media__header {
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--color-border-subtle-light);
}

.featured-media__heading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.featured-media__heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 8px;
}


/* Image column noticeably narrower than the text column, matching the
   reference's roughly 1:2 split — not an even 1fr/1fr. */
.featured-media__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 48px;
}

.featured-media__visual {
  border-radius: 16px;
  overflow: hidden;
}

.featured-media__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.featured-media__description {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-ink);
}

@media (max-width: 1024px) {
  .featured-media__content {
    padding-block: 80px;
  }

  .featured-media__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 560px) {
  .featured-media__content {
    padding-block: 56px;
  }

  .featured-media__description {
    font-size: 18px;
  }
}

  .duns-badge {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 170px;
    padding: 8px 12px 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(4, 32, 55, 0.2);
    color: #0a2e4f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .duns-badge--has-image {
    min-width: auto;
    padding: 6px 10px;
    border-radius: 8px;
  }

  .duns-badge:hover,
  .duns-badge:focus-visible {
    color: #0a2e4f;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(4, 32, 55, 0.28);
  }

  .duns-badge__seal-img {
    display: block;
    max-height: 54px;
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .duns-badge__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid #0a5c82;
    border-radius: 50%;
    color: #0a5c82;
    font-size: 11px;
    letter-spacing: -0.04em;
  }

  .duns-badge__text {
    letter-spacing: 0.02em;
  }

  @media (max-width: 560px) {
    .duns-badge {
      right: 12px;
      bottom: 12px;
      min-width: 150px;
      padding: 7px 9px 7px 8px;
    }

    .duns-badge--has-image {
      min-width: auto;
      padding: 5px 8px;
    }

    .duns-badge__seal-img {
      max-height: 44px;
      max-width: 140px;
    }

    .duns-badge__mark {
      width: 34px;
      height: 34px;
    }
  }
}

/* About Us Page — Vision 2030 Infographic Section */
.about-vision {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

.about-vision__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 100px;
}

@media (max-width: 900px) {
  .about-vision__content {
    padding-block: 70px;
  }
}

@media (max-width: 560px) {
  .about-vision__content {
    padding-block: 48px;
  }
}

.about-vision__header {
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
  margin-bottom: 56px;
}

.about-vision__eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.about-vision {
  background: linear-gradient(180deg, var(--color-mist) 0%, #edf3f8 100%);
  position: relative;
  overflow: hidden;
}

.about-vision__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: 100px;
}

@media (max-width: 900px) {
  .about-vision__content {
    padding-block: 70px;
  }
}

@media (max-width: 560px) {
  .about-vision__content {
    padding-block: 48px;
  }
}

.about-vision__header {
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
  margin-bottom: 56px;
}

.about-vision__eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.about-vision__eyebrow {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(27, 127, 196, 0.1);
  color: var(--color-orchasp-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(27, 127, 196, 0.2);
}

.about-vision__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 20px;
}

.about-vision__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
  margin-inline: auto;
}


.about-vision__description {
  font-size: clamp(15px, 14px + 0.3vw, 17px);
  line-height: 1.65;
  color: var(--color-slate);
  max-width: 780px;
  margin-inline: auto;
}

.about-vision__diagram {
  max-width: 1080px;
  margin-inline: auto;
}

.about-vision__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  position: relative;
}

@media (max-width: 900px) {
  .about-vision__pillars {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.about-vision__pillar-item {
  display: flex;
  align-items: center;
  position: relative;
}

.about-vision__connector {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: 0 4px 12px rgba(15, 27, 42, 0.08);
  border: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sail-cyan);
}

@media (max-width: 900px) {
  .about-vision__connector {
    display: none;
  }
}

.about-vision__foundation-connectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-block: 16px 14px;
}

@media (max-width: 900px) {
  .about-vision__foundation-connectors {
    display: none;
  }
}

.about-vision__foundation-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-sail-cyan);
  opacity: 0.9;
}

.about-vision__foundation-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-orchasp-navy);
  border-radius: 20px;
  padding: 32px 36px;
  color: var(--color-white);
  box-shadow: 0 12px 32px rgba(10, 46, 79, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: visible;
}

@media (max-width: 900px) {

  .about-vision__foundation-card {
    padding: 28px 20px 24px;
    margin-top: 20px;
  }
}

.about-vision__foundation-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-orchasp-navy);
  font-weight: 800;
  font-size: 14px;
  border: 2px solid var(--color-orchasp-navy);
  box-shadow: 0 3px 10px rgba(10, 46, 79, 0.25);
  z-index: 3;
}

.about-vision__foundation-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.about-vision__foundation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--color-white);
  color: var(--color-orchasp-navy);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.about-vision__foundation-icon svg {
  width: 26px;
  height: 26px;
}


.about-vision__foundation-body {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}

.about-vision__foundation-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 8px;
  text-align: center;
}

.about-vision__foundation-description {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto;
  text-align: center;
}

.about-vision-card {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: 20px;
  padding: 32px 24px 28px;
  position: relative;
  box-shadow: 0 4px 16px rgba(15, 27, 42, 0.03);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.about-vision-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-sail-cyan);
}

.about-vision-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-orchasp-blue);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(27, 127, 196, 0.35);
}

.about-vision-card--step-2 .about-vision-card__badge {
  background-color: var(--color-sail-cyan);
  box-shadow: 0 2px 8px rgba(78, 184, 229, 0.35);
}

.about-vision-card--step-3 .about-vision-card__badge {
  background-color: var(--color-deep-teal);
  box-shadow: 0 2px 8px rgba(14, 124, 123, 0.35);
}

.about-vision-card__icon-wrap {
  margin-top: 8px;
  margin-bottom: 18px;
}

.about-vision-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(27, 127, 196, 0.1);
  color: var(--color-orchasp-blue);
}

.about-vision-card__icon svg {
  width: 30px;
  height: 30px;
}

.about-vision-card--step-2 .about-vision-card__icon {
  background: rgba(78, 184, 229, 0.12);
  color: var(--color-sail-cyan);
}

.about-vision-card--step-3 .about-vision-card__icon {
  background: rgba(14, 124, 123, 0.12);
  color: var(--color-deep-teal);
}

.about-vision-card__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 14px;
}

.about-vision-card__divider {
  width: 32px;
  height: 2px;
  background-color: var(--color-hairline);
  margin-bottom: 14px;
}

.about-vision-card__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-slate);
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Section: Orchasp at a Glance
 * ------------------------------------------------------------------------- */
.about-glance {
  background-color: var(--color-surface-muted);
  padding-block: 120px;
}

@media (max-width: 900px) {
  .about-glance {
    padding-block: 80px;
  }
}

@media (max-width: 600px) {
  .about-glance {
    padding-block: 56px;
  }
}

.about-glance__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.about-glance__header {
  text-align: left;
  max-width: 800px;
  margin-bottom: 48px;
}

.about-glance__eyebrow-wrap {
  margin-bottom: 16px;
}

.about-glance__eyebrow {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(27, 127, 196, 0.1);
  color: var(--color-orchasp-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(27, 127, 196, 0.2);
}

.about-glance__heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.about-glance__heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}

.about-glance__description {
  font-size: clamp(15px, 14px + 0.3vw, 17px);
  line-height: 1.65;
  color: var(--color-slate);
  margin: 0;
  text-align: left;
}


.about-glance__grid-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 24px;
}

.about-glance__grid-wrap::before {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 0;
  border-top: 2px dotted #4eb8e5;
  z-index: 1;
  pointer-events: none;
}

.about-glance__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

.about-glance__item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.about-glance__item--blue .about-glance__badge {
  border-color: var(--color-orchasp-blue);
  color: var(--color-orchasp-blue);
}

.about-glance__item--blue .about-glance-card__accent-bar {
  background-color: var(--color-orchasp-blue);
}

.about-glance__item--blue .about-glance-card__icon {
  color: var(--color-orchasp-blue);
}

.about-glance__item--teal .about-glance__badge {
  border-color: var(--color-sail-cyan);
  color: var(--color-deep-teal);
}

.about-glance__item--teal .about-glance-card__accent-bar {
  background-color: var(--color-sail-cyan);
}

.about-glance__item--teal .about-glance-card__icon {
  color: var(--color-deep-teal);
}

.about-glance__item--orange .about-glance__badge {
  border-color: var(--color-orchasp-blue);
  color: var(--color-orchasp-blue);
}

.about-glance__item--orange .about-glance-card__accent-bar {
  background-color: var(--color-orchasp-blue);
}

.about-glance__item--orange .about-glance-card__icon {
  color: var(--color-ember-orange);
}

.about-glance__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

.about-glance__badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-heading);
  font-size: 14px;
  font-weight: 800;
  border: 2.5px solid var(--color-orchasp-blue);
  box-shadow: 0 4px 10px rgba(10, 46, 79, 0.12);
  z-index: 3;
}

.about-glance__dropline {
  width: 0;
  height: 16px;
  border-left: 2px dotted #4eb8e5;
  margin-top: 4px;
}

.about-glance-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: 18px;
  padding: 28px 16px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 27, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-glance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(10, 46, 79, 0.1);
}

.about-glance-card__accent-bar {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 4px;
  border-radius: 0 0 4px 4px;
}

.about-glance-card__icon-wrap {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-glance-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about-glance-card__icon svg {
  width: 48px;
  height: 48px;
}

.about-glance-card__image-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}


.about-glance-card__title {
  font-family: var(--font-family-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.25;
  margin-bottom: 12px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-glance-card__description {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0;
  font-weight: 500;
}

.about-glance__narrative {
  margin-top: 68px;
  text-align: left;
}

.about-glance__narrative-heading {
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 24px;
}

.about-glance__narrative-heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-orchasp-blue);
  margin-top: 14px;
}

.about-glance__narrative-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-body-muted);
}

.about-glance__narrative-text p {
  margin-bottom: 14px;
}

.about-glance__narrative-text p:last-child {
  margin-bottom: 0;
}

.about-glance__narrative-text ul,
.about-glance__narrative-text ol {
  padding-left: 22px;
  margin-bottom: 14px;
}

.about-glance__narrative-text ul {
  list-style: disc;
}

.about-glance__narrative-text ol {
  list-style: decimal;
}

.about-glance__narrative-text li {
  margin-bottom: 6px;
}

.about-glance__narrative-text li:last-child {
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .about-glance__grid-wrap::before {
    display: none;
  }

  .about-glance__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .about-glance__dropline {
    display: none;
  }
}

@media (max-width: 680px) {
  .about-glance__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-glance__narrative {
    margin-top: 40px;
  }
}