:root {
  --main: #4E70D8;
  --ocgt-primary: #4E70D8;
  --ocgt-dark: #16285E;
  --ocgt-accent: #5C78D4;
  --ocgt-cyan: #38BDF8;
  /* Use these two for TEXT/icons in brand blue or cyan — the fill values above
     fail WCAG AA as text on the page backdrop. See OCGT_COLORS above. */
  --ocgt-primary-text: #B4C2EE;
  --ocgt-cyan-text: #7DD3FC;

  --bg: #1B2F6E;
  --white: #1B2F6E;
  --lightest: #243C82;
  --lighter: #2E4A9E;
  --light: #3B57A8;
  --medium: #3B57A8;
  --dark: #AEBCE0;
  --darkest: #F2F5FC;
}

html,
body {
  background-color: #1B2F6E !important;
  color: #F2F5FC !important;
}

#flexible,
.component {
  background-color: #1B2F6E;
  color: #F2F5FC;
}

.component:nth-child(even) {
  background-color: #243C82;
}

/* Hero + About sit over the persistent globe Canvas — keep transparent. */
.ocgt-intro-band {
  background: transparent !important;
}

.ocgt-intro-band > .component {
  background-color: transparent !important;
  background-image: none !important;
}

/* Stats grid (Services act) sits over the globe — keep transparent. */
.ocgt-stats-band {
  background: transparent !important;
  position: relative;
  /* The solutions glow below is a blurred pseudo-element bled 5% past both
     edges (::after, :270). The left bleed is free, the right one is scrollable
     overflow: the page measured 1344 wide in a 1280 viewport, 1512 at 1440,
     2016 at 1920 — always exactly 5%, and always a phantom horizontal
     scrollbar. Clip it here rather than pull the bleed in, which is what keeps
     the glow soft at the edges instead of ending on a hard line.
     clip, not hidden: hidden makes this a scroll container and forces the other
     axis to auto, which would break the sticky pin on .sticky inside. */
  overflow-x: clip;
}

.ocgt-stats-band__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: 
  radial-gradient(ellipse 130% 85% at 50% -18%, #2E4A9E70 0%, transparent 56%),
  radial-gradient(circle at 78% 46%, #2E4A9E88 0%, transparent 52%),
  linear-gradient(
    180deg,
    #243C82 0%,
    #243C82 24%,
    #1B2F6E 34%,
    #16285E 50%,
    #0a1428 74%,
    #070d22 100%
  )
;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 18%,
    rgba(0, 0, 0, 0.38) 36%,
    rgba(0, 0, 0, 0.72) 52%,
    #000 68%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 18%,
    rgba(0, 0, 0, 0.38) 36%,
    rgba(0, 0, 0, 0.72) 52%,
    #000 68%
  );
}

.ocgt-stats-band > .component {
  position: relative;
  z-index: 1;
}

.ocgt-stats-band .component--gridnumbers.vertical::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(10rem, 30vh, 18rem);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 55%,
    #16285E0c 78%,
    #16285E1a 100%
  );
}

.ocgt-stats-band .component--contentscrollcenter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(8rem, 24vh, 14rem);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    #16285E14 0%,
    #16285E08 42%,
    transparent 100%
  );
}

.ocgt-stats-band .component--contentscrollcenter {
  position: relative;
}

.ocgt-stats-band .component--contentscrollcenter::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: clamp(9rem, 24vh, 16rem);
  pointer-events: none;
  z-index: 0;
  transform: translateY(35%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    #070d2255 42%,
    #0a142870 100%
  );
  filter: blur(40px);
  -webkit-filter: blur(40px);
}

.ocgt-stats-band > .component,
.ocgt-stats-band .component--contentscrollcenter,
.ocgt-stats-band .component--contentscrollcenter .container,
.ocgt-stats-band .component--contentscrollcenter .sticky,
.ocgt-stats-band .component--contentscrollcenter .content,
.ocgt-stats-band .component--contentscrollcenter .content .image,
.ocgt-stats-band .component--contentscrollcenter .content .info {
  background-color: transparent !important;
  background-image: none !important;
}

/* Theme paints a solid panel here — that caused the hard seam */
.component--contentscrollcenter .content .image img {
  display: none !important;
}

.ocgt-stats-band .component--contentscrollcenter .anchors .anchor {
  color: #AEBCE0 !important;
}

.ocgt-stats-band .component--contentscrollcenter .anchors .anchor.--active {
  color: #F2F5FC !important;
}

.component--contentscrollcenter {
  background-color: transparent !important;
}

/* Header — transparent over fixed globe stage (no colour seam) */
.header,
#flexible > .header,
#main .header {
  background-color: transparent !important;
  border-bottom: none !important;
}

.header .box {
  background-color: transparent !important;
  background-image: none !important;
}

.scrolled .header,
.scrolled .header .box {
  background-color: transparent !important;
  background-image: none !important;
}

.header .columns:after,
.header .columns:before {
  opacity: 0 !important;
  background-color: transparent !important;
}

.header .columns .item:last-child .lang-switcher {
  border-left: none !important;
}

.header .trigger {
  border-left-color: #3B57A8 !important;
}

.header .menu-header > li > a,
.header .navigation .content .menu li a,
.header .trigger .text {
  color: #F2F5FC !important;
}

.header .menu-header > li > a:hover,
.header .navigation .content .menu li a:hover {
  color: #AEBCE0 !important;
}

/* Legacy theme footer — replaced by .ocgt-footer on all pages */
.footer:not(.ocgt-footer) {
  background-color: #243C82 !important;
  color: #F2F5FC !important;
  border-top-color: #3B57A8 !important;
}

.footer:not(.ocgt-footer) .title,
.footer:not(.ocgt-footer) .display,
.footer:not(.ocgt-footer) .text,
.footer:not(.ocgt-footer) .wysiwyg {
  color: #F2F5FC !important;
}

.footer:not(.ocgt-footer) .copyright .wysiwyg,
.footer:not(.ocgt-footer) .menu-legal a {
  color: #AEBCE0 !important;
}

/* Typography on dark surfaces */
.display,
.title,
.text,
.wysiwyg,
.label {
  color: inherit;
}

.component .display,
.component .title:not(.number),
.component .text-block-left .wysiwyg,
.component .text-block-center .wysiwyg,
.component .text-block-center .title,
.component .text-block-left .wysiwyg p {
  color: #F2F5FC;
}

.component .label {
  color: #AEBCE0 !important;
}

/* Custom cursor overlay — hide it (theme dot shows as a stray white dot on
   our dark surfaces); native cursor stays for usability. */
.cursor {
  display: none !important;
}

.component--contentscrollcenter .sticky {
  isolation: isolate;
}

.component--contentscrollcenter .content {
  z-index: 1 !important;
}

.component--contentscrollcenter .content .image {
  display: none !important;
}

.component--contentscrollcenter .content .info {
  z-index: 2 !important;
}

.component--contentscrollcenter .content .info .title,
.component--contentscrollcenter .content .info .title .line,
.component--contentscrollcenter .content .info .title .char {
  display: none !important;
}

.component--contentscrollcenter .content .info .text-block-left .wysiwyg {
  color: #F2F5FC !important;
}



/* Navigation states — active stays white; brand blue underline only */
.header .navigation .content .menu li.is-active a,
.header .menu-header > li.is-active > a {
  color: #F2F5FC !important;
}

.header .menu-header > li .underline {
  background-color: #4E70D8 !important;
}

.menu-sidebar .inner .menu li.current-menu-item .menu-icon span {
  background-color: var(--main) !important;
}

/* Links & CTAs */
.link,
.link .text {
  color: #F2F5FC !important;
}

.link .underline {
  background-color: #F2F5FC !important;
}

.link:hover .underline {
  background-color: var(--ocgt-cyan) !important;
}

.text-block-left.--white .button.--primary {
  color: var(--main) !important;
}

/* Indicators & section accent lines */
.dots .dot.--active,
.draggable .dots .dot.--active {
  background-color: var(--ocgt-cyan) !important;
}

.draggable .thumbnails .thumbnail.--active {
  border-color: var(--ocgt-cyan) !important;
}

.component--contentsticky > .container > .flexible-content > div {
  border-top-color: var(--ocgt-cyan) !important;
}

/* Editorial highlights */
.display b,
.display strong,
.text ol li::marker,
.text ul li::marker {
  color: var(--ocgt-cyan) !important;
}

.component--gridnumbers .group .title,
.component--gridnumbers .group .title.number {
  color: #F2F5FC !important;
}

.component--timeline .snap .numbers .number .title,
.component--error404 .group .title {
  color: var(--ocgt-cyan) !important;
}

.component--gridnumbers .group .wysiwyg,
.component--gridnumbers .group .text {
  color: #F2F5FC !important;
}

.component--gridnumbers .columns .item,
.component--gridnumbers .content {
  border-color: #3B57A8 !important;
}

/* Contact page styles — see src/lib/contact.ts (OCGT_CONTACT_PAGE_CSS) */

/* Cards & panels */
.card-holder,
.card,
.lang-switcher__dropdown {
  background-color: #243C82 !important;
  border-color: #3B57A8 !important;
}

/* Hero + About — gradient lives on .ocgt-intro-band wrapper */
#ocgt-hero-mount .title,
#ocgt-hero-mount .text,
#ocgt-hero-mount .wysiwyg p,
#ocgt-hero-mount .link .text {
  color: #F2F5FC !important;
}

#ocgt-hero-mount .label.scroll {
  color: #AEBCE0 !important;
}

section.component--textblocklarge.ocgt-about-blurb {
  position: relative;
  overflow: hidden;
}

/* The measure + page-edge inset live on .container only — .text-block-center
   is nested inside it, so repeating them there just insets the copy twice.
   Desktop-only: home-css.ts's <=1100px block already gives the section its
   own gutter padding and zeroes .text-block-center's box, so applying this
   below 1101px would inset the copy a second time. */
@media (min-width: 1101px) {
  section.component--textblocklarge.ocgt-about-blurb .container {
    max-width: 52rem;
    margin-inline: auto;
    padding-inline: var(--ocgt-gutter);
  }
}

section.component--textblocklarge.ocgt-about-blurb .container,
section.component--textblocklarge.ocgt-about-blurb .text-block-center {
  position: relative;
  z-index: 1;
}

/* .container no longer sets a width above — without one, the legacy theme's
   own .text-block-center{width:60vw} would win and overflow .container's
   measure. Fill the parent's content box instead. */
section.component--textblocklarge.ocgt-about-blurb .text-block-center {
  width: 100%;
}

section.component--textblocklarge.ocgt-about-blurb .label {
  color: #AEBCE0 !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: max(14px, clamp(0.8125rem, 1.1vw, 1rem)) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.4 !important;
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(6, 12, 35, 0.55);
}

section.component--textblocklarge.ocgt-about-blurb .title {
  color: #F2F5FC !important;
  -webkit-text-fill-color: #F2F5FC !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(1.5rem, 2.75vw, 2.375rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.45 !important;
  text-align: center;
  text-wrap: pretty;
  text-shadow:
    0 1px 2px rgba(6, 12, 35, 0.85),
    0 4px 24px rgba(6, 12, 35, 0.55);
}

/* Team archive page (/team) — rides the continuous navy page gradient set by
   OCGT_TEAM_HERO_CSS in src/lib/team.ts, so the section paints nothing itself
   and the cards read as lifted panels on it. Home carousel unchanged. */
section.component--teamarchive.ocgt-team-page {
  background-color: transparent !important;
  background-image: none !important;
  margin-top: -1px !important;
  padding-top: clamp(0.75rem, 1.75vw, 1.5rem) !important;
  border: none !important;
  box-shadow: none !important;
}

section.component--herosimpletext.ocgt-team-hero + section.component--teamarchive.ocgt-team-page {
  margin-top: -1px !important;
}

/* Match hero stats glass: soft white frosted panel on navy. */
section.component--teamarchive.ocgt-team-page .card-team {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
}

/* The legacy theme pins the desktop card at .card-team{height:33.333vw}, and
   the overflow:hidden above (needed to clip the image into the 14px corner
   radius) turned what used to be harmless visible overflow into a clip: a
   member whose name wraps to two lines pushes the position label past the
   fixed card bottom and it disappears. height:auto sizes every card to its
   content (at common desktop widths content already runs ~0.15vw past the
   legacy floor, so the min-height only actually binds on very wide screens
   >=~1972px — it's a guard against short-content cards there, not the
   day-to-day sizer), and it holds for any locale whose translated position
   wraps to two lines. Desktop-scoped alongside the flush-row rules below:
   the ≤1100px block further down resets height but not min-height, so an
   unscoped 33.333vw floor would lurk there for any future patch that
   re-shows [data-desktop] below the breakpoint (one such patch already
   exists for 1023-1100px landscape in team.ts). */
@media (min-width: 1101px) {
  section.component--teamarchive.ocgt-team-page .card-team[data-desktop] {
    height: auto;
    min-height: 33.333vw;
  }
}

/* Flush row bottoms: .columns is a wrapping flex container, so each .item
   already stretches to its flex line's height (a long-name card sets it) —
   making .item itself a flex column lets the sibling cards in that row fill
   the same height instead of leaving a ragged bottom edge. Split across two
   media blocks only because the flex:1 has to name the card variant that is
   visible in each band — [data-desktop] here, [data-mobile] in the <=1100px
   counterpart further down. */
@media (min-width: 1101px) {
  section.component--teamarchive.ocgt-team-page .columns .item {
    display: flex;
    flex-direction: column;
  }

  section.component--teamarchive.ocgt-team-page .columns .item .card-team[data-desktop] {
    flex: 1 1 auto;
  }
}

section.component--teamarchive.ocgt-team-page .card-team .image-group {
  background: transparent !important;
}

section.component--teamarchive.ocgt-team-page .card-team .image,
section.component--teamarchive.ocgt-team-page .card-team .image img {
  background: transparent !important;
  filter: grayscale(0) !important;
}

section.component--teamarchive.ocgt-team-page .card-team .image-group .overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

section.component--teamarchive.ocgt-team-page .card-team .group {
  background: transparent !important;
  margin-top: 0 !important;
  padding: clamp(0.7rem, 1.1vw, 0.95rem) clamp(0.65rem, 1vw, 0.85rem)
    clamp(0.85rem, 1.25vw, 1.1rem);
  border-top: none !important;
}

section.component--teamarchive.ocgt-team-page .card-team .group .title {
  color: #F2F5FC !important;
  -webkit-text-fill-color: #F2F5FC !important;
}

section.component--teamarchive.ocgt-team-page .card-team .group .wysiwyg,
section.component--teamarchive.ocgt-team-page .card-team .group .wysiwyg.--grey {
  color: #AEBCE0 !important;
  -webkit-text-fill-color: #AEBCE0 !important;
}

/* Team archive — 2-column mobile grid with room for names */
@media (max-width: 1100px) {
  section.component--teamarchive.ocgt-team-page .columns .item {
    width: calc(50% - min(0.833vw, 3.3075px)) !important;
  }

  /* overflow:hidden, matching the desktop card above: the image-group is a
     square-cornered box flush to the card's top edge, so while this was
     visible the photo painted over both top corners and the 14px radius read
     as broken. Safe here — the fixed-height clip described above needs
     height:33.333vw, and this card is height:auto, so nothing but the corner
     slivers is outside the padding box. */
  section.component--teamarchive.ocgt-team-page .card-team {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  section.component--teamarchive.ocgt-team-page .card-team .image-group {
    height: auto !important;
    aspect-ratio: 0.84 !important;
    overflow: hidden !important;
  }

  section.component--teamarchive.ocgt-team-page .card-team .image {
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  section.component--teamarchive.ocgt-team-page .card-team .image img {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 12% !important;
  }

  section.component--teamarchive.ocgt-team-page .card-team .group {
    padding: clamp(0.65rem, 2.5vw, 0.9rem) clamp(0.5rem, 2vw, 0.75rem)
      clamp(0.8rem, 3vw, 1rem) !important;
  }

  section.component--teamarchive.ocgt-team-page .card-team .group .title {
    font-size: max(14px, clamp(0.82rem, 3.4vw, 1rem)) !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }

  section.component--teamarchive.ocgt-team-page .card-team .group .wysiwyg {
    font-size: max(14px, clamp(0.72rem, 2.8vw, 0.85rem)) !important;
    line-height: 1.35 !important;
    margin-top: 0.25rem !important;
  }

  /* Flush row bottoms — the <=1100px counterpart of the >=1101px block above.
     Same mechanism, on the card variant this band actually shows: the frosted
     panel is height:auto here, so without this it wrapped its own text and a
     row's cards ended at different depths. */
  section.component--teamarchive.ocgt-team-page .columns .item {
    display: flex;
    flex-direction: column;
  }

  section.component--teamarchive.ocgt-team-page .columns .item .card-team[data-mobile] {
    flex: 1 1 auto;
  }
}

/* Careers, service & team — unified page canvas. :not(.ocgt-stage-bg) because
   every one of those pages now rides the shared fixed stage backdrop
   (OCGT_STAGE_BACKDROP_CSS): a solid canvas on the wrappers would cover it.
   Kept as the fallback for any page that opts out of the backdrop. */
body.ocgt-page-canvas:not(.ocgt-stage-bg) {
  background-color: #253676 !important;
}

body.ocgt-page-canvas:not(.ocgt-stage-bg) #flexible,
body.ocgt-page-canvas:not(.ocgt-stage-bg) .component {
  background-color: #253676 !important;
}

body.ocgt-page-canvas:not(.ocgt-stage-bg) .component:nth-child(even) {
  background-color: #253676 !important;
}


body.ocgt-stage-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: 
  radial-gradient(ellipse 130% 85% at 50% -18%, #2E4A9E70 0%, transparent 56%),
  radial-gradient(circle at 78% 46%, #2E4A9E88 0%, transparent 52%),
  linear-gradient(
    180deg,
    #243C82 0%,
    #243C82 24%,
    #1B2F6E 34%,
    #16285E 50%,
    #0a1428 74%,
    #070d22 100%
  )
;
}

/* The backdrop is a positioned child of <body>, so a static #main would paint
   under it. Same lift site-nav.ts already applies on .ocgt-page-canvas pages —
   restated here so team/careers/contact (no page-canvas class) get it too.
   #header is left alone: the theme header is already positioned and later in
   tree order, so it paints above the backdrop unaided (as on home). */
body.ocgt-stage-bg #main {
  position: relative;
  z-index: 10;
}

/* Wrappers and sections stay transparent so the one backdrop shows through
   with no seams. background-image is only reset on the page wrappers — a
   blanket reset on .component would also drop legitimate section artwork. */
body.ocgt-stage-bg #main,
body.ocgt-stage-bg #flexible,
body.ocgt-stage-bg #app {
  background-color: transparent !important;
  background-image: none !important;
}

body.ocgt-stage-bg #flexible .component,
body.ocgt-stage-bg #flexible .component:nth-child(even),
body.ocgt-stage-bg .component,
body.ocgt-stage-bg .component:nth-child(even) {
  background-color: transparent !important;
}


/* Desktop nav shows only the language switcher on the right — the theme's
   hamburger trigger is mobile-drawer-only (see OCGT_MOBILE_NAV_CSS breakpoint). */
@media (min-width: 1101px) {
  .header .trigger {
    display: none !important;
  }

  /* The gap the team grid hit (src/lib/team.ts), one level worse: the theme
     only hides [data-mobile] under (min-width: 1023px) and (orientation:
     landscape), while every rule that makes the drawer look like a drawer —
     the theme's position:fixed/translateY(-120%) .content and all of
     OCGT_MOBILE_NAV_CSS — is scoped to (max-width: 1100px). So above 1100px in
     *portrait* the drawer subtree laid out in normal flow and its
     <ul id="menu-mobile" class="menu menu-header"> picked up the always-on
     desktop nav rules: a second nav row and a second language switcher inside
     the 5vw bar, plus 7 duplicate tab stops. The .box goes with it — it is the
     drawer's backdrop (opacity .0001, z-index -1) and has no job up here.
     No !important needed: the only display declaration in play is the theme's
     .header .columns .item{display:flex}, which these selectors out-specify. */
  .header .columns > .item[data-mobile],
  .header .columns > .box[data-mobile] {
    display: none;
  }

  /* Active-item indicator, moved back under the label.
   *
   * The theme parks the 2px bar with
   * .header .menu-header > li .text { bottom: 1.667vw } — 28.8px at 1440 —
   * which worked in the original theme because its <li> was height:100% of an
   * 86px header, so 28.8px up from the li's bottom still landed below the text.
   * Here the header row is a content-height flex line, so height:100% resolves
   * to auto and the li is only as tall as its 17px label: 28.8px up from its
   * bottom put the bar ABOVE the word.
   *
   * Anchoring to top: calc(100% + gap) instead of re-tuning bottom measures
   * from the li's own bottom edge, so the bar cannot climb over the label again
   * if the header height or nav font ever changes. px floor on the gap because
   * a bare rem tracks the 0.667vw root (0.5rem is 4.8px at 1440).
   *
   * Desktop only: the drawer reuses the same markup and hides .text outright
   * (OCGT_MOBILE_NAV_CSS). */
  .header .menu-header > li .text {
    top: calc(100% + max(6px, 0.5rem));
    bottom: auto;
  }
}

body.ocgt-news-page #main,
body.ocgt-news-article-page #main,
body.ocgt-page-canvas #main {
  position: relative;
  z-index: 10;
}

/* News listing — navy page canvas so transparent header matches homepage */
body.ocgt-page-canvas.ocgt-news-page {
  background: #0B1F5B !important;
}

/* Article pages — the solid navy bar existed to hold white links over the old
   light editorial body. The article now rides the shared stage backdrop, so a
   solid #0B1F5B bar would cut a seam across it; a scrim that fades out keeps
   the links off the raw backdrop without drawing that edge. Same treatment as
   the careers header (src/lib/careers.ts). */
body.ocgt-news-article-page .header,
body.ocgt-news-article-page.scrolled .header {
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    #0B1F5Bbf 0%,
    #0B1F5B59 58%,
    transparent 100%
  ) !important;
}

body.ocgt-news-article-page .header .box,
body.ocgt-news-article-page.scrolled .header .box {
  background-color: transparent !important;
  background-image: none !important;
}

body.ocgt-news-article-page .header .menu-header > li > a,
body.ocgt-news-article-page .header .navigation .content .menu li a,
body.ocgt-news-article-page .header .trigger .text {
  color: #F2F5FC !important;
}

body.ocgt-news-article-page .header .menu-header > li > a:hover,
body.ocgt-news-article-page .header .navigation .content .menu li:not(.is-active) a:hover {
  color: #AEBCE0 !important;
}

/* Desktop inline nav keeps the plain-text active treatment on article pages;
   the mobile drawer keeps its cyan accent (mobile-nav.ts) — this selector
   out-specifies the drawer rule, so the drawer half must restate it. */
body.ocgt-news-article-page .header .menu-header > li.is-active > a {
  color: #F2F5FC !important;
}

body.ocgt-news-article-page .header .navigation .content .menu li.is-active a {
  color: #38BDF8 !important;
}

body.ocgt-news-article-page .header .trigger {
  border-left-color: rgba(184, 204, 245, 0.35) !important;
}


/**
 * Desktop root font floor.
 *
 * The legacy theme sets html { font-size: var(--font-size) } with
 * --font-size: 0.667vw and no lower bound, so 1rem tracks viewport width all
 * the way down: 7.34px at 1101px, 8.54px at 1280px, 9.60px at 1440px. The
 * mobile block below floors it, but only inside max-width:1100px — which left
 * the 1101-1349px laptop band as the WORST case on the whole site, worse than
 * any phone. 116 font-size declarations computed under 14px there.
 *
 * max(), not clamp(9px, 0.667vw, 12.8px): an upper bound caps growth at 1920px,
 * which would SHRINK type 25% on a 2560px monitor and 50% on 4K. The design
 * scales without limit by intent; only the small end was broken.
 *
 * Unscoped rather than a @media (min-width: 1100.02px) twin — a fractional
 * width between the two queries (browser zoom, hidpi scrollbars) would be
 * covered by neither. This is injected by Header.tsx after the theme
 * stylesheet, and the mobile block below is both later in source order and
 * equally !important, so it still wins at <=1100px.
 */
:root {
  --font-size: max(9px, 0.667vw) !important;
}

@media (max-width: 1100px) {
  :root {
    --font-size: clamp(8.5px, 2.7vw, 11px) !important;
  }

  section.component--herosimpletext {
    padding-top: clamp(5.5rem, 24vw, 8rem) !important;
  }

  /* The theme's hamburger (.header .trigger) is position:absolute; right:0 —
     entirely out of normal flex flow, so DOM order alone can't put anything
     reliably beside it (a normal flex sibling lands wherever .columns'
     justify-content puts it, independent of the trigger's own fixed slot).
     Pin this one explicitly the same way, immediately left of the trigger's
     own reserved width, so read order is lang icon then hamburger. */
  .header .columns > .item.ocgt-header-lang-compact {
    position: absolute;
    top: 0;
    right: calc(min(16.667vw, 66.15px) + 0.25rem);
    height: 100%;
    display: flex;
    align-items: center;
  }

  /*
   * Hamburger bar geometry, restated orientation-agnostically.
   *
   * The theme only sizes .trigger .bars inside
   * @media (max-width:1100px) and (orientation:portrait). Its unmediated
   * base rule is height:.5vw; width:1.25vw; gap:.417vw with
   * flex-direction:column; flex-wrap:wrap and span{height:2px;width:100%}.
   * So the moment that portrait term misses — a phone held sideways, 844x390 —
   * the box is 4.2px tall while two 2px bars plus a 3.5px gap need 7.5px, the
   * wrap kicks in, and bar 2 moves into a SECOND COLUMN: two dashes side by
   * side, each 100% of the 10.5px box, spilling past the trigger. Chrome device
   * mode hid it because emulation defaults to portrait.
   *
   * Values are the theme's own portrait numbers, so portrait renders
   * byte-identically to before; only the gate is gone. nowrap plus flex:none
   * make the collapse unreachable even if the box is ever shorter than its
   * contents. Selector is (0,3,0) against the theme's (0,2,0), so it wins on
   * specificity and needs no !important.
   *
   * HeaderInteractions.tsx measures this box (getBoundingClientRect().height)
   * to place the open-state X, so the collapsed height broke that animation
   * too — fixing the geometry fixes both.
   */
  .header .trigger .bars {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(5.556vw, 22.05px);
    height: min(2.778vw, 11.025px);
    gap: min(1.667vw, 6.615px);
    flex-wrap: nowrap;
  }

  .header .trigger .bars span {
    width: 100%;
    height: 2px;
    flex: none;
  }

  /*
   * Scroll lock while the drawer is open (HeaderInteractions toggles
   * .--nav-open on <html>). The drawer's .navigation .content is
   * position:fixed in the theme stylesheet, so the page would otherwise keep
   * scrolling behind it. The drawer's own overflow-y:auto below is
   * unaffected — only the document scroller is frozen.
   *
   * html only, longhand overflow-y only: an "overflow: hidden" shorthand
   * would stomp home-css.ts's deliberate overflow-x: clip (clip is not a
   * scroll container; hidden is), and locking body too would turn body into
   * a scroll container, breaking position:sticky descendants (service page
   * pin). scrollbar-gutter keeps the layout from reflowing ~15px when a
   * classic (non-overlay) scrollbar disappears on lock.
   *
   * Deliberately scoped inside this breakpoint: the hamburger is hidden above
   * 1100px (OCGT_SITE_HEADER_PARITY_CSS); the JS side releases its half of
   * the lock (Lenis) through a matchMedia listener on this same query.
   *
   * iOS Safari: overflow:hidden alone can still rubber-band the page. If that
   * shows up on real hardware, escalate to the heavier pattern — position:fixed
   * with top:-scrollY on <body> at open, restoring scrollY at close.
   */
  html.--nav-open {
    overflow-y: hidden !important;
    overscroll-behavior: none;
    scrollbar-gutter: stable;
  }

  /*
   * Repaint the header strip the open drawer cannot reach.
   *
   * The drawer (.navigation .content) starts at top: min(16.667vw, 66.15px) —
   * below the header row — so the theme covers the row itself with a separate
   * backdrop, .box[data-mobile] (absolute, 101% of .columns; the 1% overshoot
   * seals the seam against the drawer's top edge), which HeaderInteractions
   * fades opacity .0001 -> 1 on open.
   *
   * colors.ts neuters that box with .header .box { background-color:
   * transparent !important } so the CLOSED header reads transparent over the
   * globe stage on every page — but that also killed the open-state paint, so
   * the page hero showed through behind the logo / globe / close-X.
   *
   * Scoped to --nav-open, which HeaderInteractions sets only in openDrawer, so
   * the closed header everywhere is untouched.
   *
   * The #header in the selector is load-bearing, not decoration. Six rules
   * compete for this element and every one of them is
   * "background-color: transparent !important", so the winner is decided purely
   * on specificity:
   *
   *   (1,3,1)  body.ocgt-careers-page.scrolled #header .box   careers.ts:151-152
   *   (1,3,1)  body.ocgt-legal-page.scrolled   #header .box   privacy.ts:80-81
   *   (1,3,1)  body.ocgt-team-body.scrolled    #header .box   team.ts:139-140
   *   (0,4,1)  body.ocgt-news-article-page.scrolled .header .box  site-nav.ts:95-96
   *   (0,3,0)  .scrolled .header .box                         colors.ts:332
   *   (0,2,0)  .header .box                                   colors.ts:326
   *
   * The first three carry an ID, and one ID outranks any number of classes, so
   * a class-only selector here loses on /careers, /careers/apply/*, /team and
   * /privacy-policy no matter how many classes it stacks or where it sits in
   * source order — that is 28 built pages (careers 4, careers/apply 16, team 4,
   * privacy-policy 4) where the hero showed through behind the logo / globe /
   * close-X. Matching their ID
   * count and adding classes puts this rule at (1,4,1), which beats all six.
   *
   * Paint alone does not reveal the strip: the GSAP opacity fade on the box
   * still gates whether any of it is visible.
   */
  html.--nav-open #header .columns > .box[data-mobile] {
    background-color: var(--white) !important;
  }

  .header .navigation .content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Contain scroll chaining at the drawer's own scroll ends — without
       this, reaching the end of the drawer list hands the gesture to the
       document, which matters exactly when the html lock is the unreliable
       part (iOS). */
    overscroll-behavior: contain;
    background-color: var(--white) !important;
    text-align: left !important;
  }

  .header .navigation .content .menu {
    flex: 1 1 auto;
    width: 100% !important;
    margin-bottom: 0 !important;
    /* Top padding only was raised (was 1.25/6vw/1.75rem all round) so the
       display-scale list below clears the drawer's own top border instead of
       crowding it: 25.2px at 360w, 27.3px at 390w, capped 30.3px from ~432w.

       Inline padding is the shared page gutter, moved here in the same pass as
       the language-switcher row below so the two stay flush and the drawer's
       left edge lines up with the header logo above it. That alignment holds
       because .container.--wide is width:100% at this breakpoint and .header
       .brand carries the same token as its margin-left (branding.ts), while
       the drawer .content is position:fixed left:0 -- so both measure from the
       viewport edge. The old clamp resolved to 15.1 / 17.0 / 18.4px at
       320 / 360 / 390w against the logo's flat 20px, a visible 2-5px step. */
    padding: clamp(2rem, 7vw, 2.75rem) var(--ocgt-gutter)
      clamp(0.75rem, 3vw, 1rem) !important;
  }

  .header .navigation .content .menu li {
    margin-bottom: 1.5rem !important;
    /* The theme sets white-space: nowrap here. At the display scale below
       that is a clipping hazard, not a layout choice: .content above is
       overflow-x: hidden, so an over-long label would be silently cut off at
       the viewport edge with no scrollbar and no visible cause. There is no
       Tamil webfont (src/lib/fonts.ts), so its fallback metrics vary per
       device and the widest label cannot be bounded at build time -- let it
       wrap instead. Latin/CJK labels are far too short to reach two lines. */
    white-space: normal !important;
  }

  .header .navigation .content .menu li:last-child {
    margin-bottom: 0 !important;
  }

  .header .navigation .content .menu li a {
    display: block !important;
    width: 100% !important;
    /*
     * Display-scale drawer links, matched to the reference design. Plain rem
     * on purpose: the root is already fluid at this breakpoint
     * (--font-size: clamp(8.5px, 2.7vw, 11px) at the top of this block), so
     * 2.75rem resolves to 26.8px at 360w, 29px at 390w and caps at 30.25px
     * from 408w up, where the root hits its own 11px ceiling.
     *
     * A clamp() would be decoration here. Because 1rem IS 2.7vw over the
     * whole phone range, 2.75rem == 7.425vw, so any vw middle term either
     * never wins or silently replaces the rem the value is written in. One
     * honest term beats three terms where two are unreachable.
     *
     * padding-block carries the row past the 44px touch-target minimum on the
     * narrowest phones, where the smaller 1.15 line box alone no longer does:
     * 26.9px at 320w against the old 0.5rem padding-block's 35.4px total, so
     * padding-block goes to 1rem here to make up the difference (43.9px
     * total at 320w, ~44px everywhere wider).
     */
    font-size: 2.75rem !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    padding-block: 1rem !important;
    text-align: left !important;
    color: var(--darkest) !important;
    transform: none !important;
    /*
     * The one declaration in this file that must NOT be !important.
     * RootLayoutBody's Tamil guard is [html[data-locale="ta"] *] with
     * !important -- specificity (0,1,1) against this rule's (0,4,2). Between
     * two !important declarations the more specific one wins, so an
     * !important here would beat the guard and shatter Tamil grapheme
     * clusters (the exact bug commit 1330c5d fixed). Left un-important, the
     * guard wins on Tamil and this still applies everywhere else, because a
     * direct declaration always beats the -0.01em inherited from html and the
     * theme ships no !important letter-spacing at all.
     */
    letter-spacing: -0.02em;
  }

  /*
   * Tamil has no webfont, so it renders in a system fallback whose line box
   * is taller than PP Neue Montreal's and whose combining vowel signs sit
   * well above and below the baseline. 1.15 is too tight for that, and it is
   * also the locale most likely to reach a second line -- overflow-wrap
   * matches how the homepage hero already handles long Tamil compounds
   * (src/lib/home-css.ts).
   */
  html[data-locale="ta"] .header .navigation .content .menu li a {
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }

  .header .navigation .content .menu li.is-active a {
    color: var(--ocgt-cyan) !important;
  }

  /*
   * The desktop active-underline bar (.text > .underline, positioned by the
   * theme stylesheet) is shared markup: NavMenu renders the same
   * "menu menu-header" list into the mobile drawer. The theme's .text rules
   * are not desktop-scoped, so without this the drawer gets a stray 2px bar
   * under every item. Mobile keeps the colored-text active treatment above.
   */
  .header .navigation .content .menu li .text {
    display: none !important;
  }

  /* Drawer-scoped focus ring, same cyan as the active treatments; UA default
     rings are low-contrast on the drawer's navy. The lang-switcher used to
     have its own drawer-scoped copy here too — removed along with the
     drawer's own <LanguageSwitcher> instance (Header.tsx) once the compact
     one beside the hamburger made it redundant. */
  .header .navigation .content .menu li a:focus-visible {
    outline: 2px solid var(--ocgt-cyan);
    outline-offset: 3px;
  }

  .header .columns > .item[data-desktop] .lang-switcher {
    position: relative;
    bottom: auto;
    left: auto;
    flex-direction: row;
    width: auto;
    margin-top: 0;
    padding: 0 2.5vw;
    border-top: none;
  }
}

/* Landscape phones (e.g. 844x390): the drawer box is only ~274px tall there
   and the display-scale list runs ~520px — two items plus the switcher would
   sit below the fold with no scroll affordance at the drawer's edge. Step the
   scale down so the whole list fits the short viewport. */
@media (max-width: 1100px) and (max-height: 600px) {
  .header .navigation .content .menu li a {
    font-size: 2.25rem !important;
    padding-block: 0.35rem !important;
  }

  .header .navigation .content .menu li {
    margin-bottom: 0.75rem !important;
  }

  .header .navigation .content .menu {
    padding-top: clamp(1.25rem, 4vw, 1.75rem) !important;
  }
}

/* Tablet portrait (the theme only hides the drawer at >=1023px LANDSCAPE, so
   iPad portrait at 1024px still shows it): phone-scale links float in the
   top-left of a 1300px-tall panel and read as a stretched phone menu. Step
   the type up toward the same visual proportion the phone gets — but not as
   far as before now that the phone scale itself came down (2.75rem). */
@media (min-width: 768px) and (max-width: 1100px) and (min-height: 601px) {
  .header .navigation .content .menu li a {
    font-size: 4rem !important;
  }

  .header .navigation .content .menu li {
    margin-bottom: 2rem !important;
  }
}


.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: clamp(4.5rem, 5.833vw, 6.5rem);
  padding: 0;
  border-left: none;
  transition: background-color 0.6s cubic-bezier(0.5, 1, 0.89, 1);
}
.lang-switcher__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0 clamp(1rem, 2.5vw, 2.5rem);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang-switcher__trigger:hover {
  color: var(--main);
}
.lang-switcher__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.lang-switcher__mobile-label,
.lang-switcher__current {
  display: none;
}
.lang-switcher__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 10.5rem;
  padding: 6px;
  background: var(--white);
  border: 1px solid #3B57A8;
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 30;
}
.lang-switcher__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 10px 14px;
  font-size: max(14px, 13px);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #F2F5FC;
  border-radius: 0.35rem;
  white-space: nowrap;
}
.lang-switcher__option[data-locale="zh"],
.lang-switcher__option[data-locale="ta"] {
  text-transform: none;
  font-size: 14px;
}
.lang-switcher__option[data-locale="zh"] {
  letter-spacing: 0.02em;
}
/* Tracking breaks Tamil conjuncts. The blanket reset in
   src/island/RootLayoutBody.tsx is keyed on html[data-locale="ta"], so it only
   fires on Tamil pages — not on this Tamil label sitting in the switcher on an
   en/bm/zh page. */
.lang-switcher__option[data-locale="ta"] {
  letter-spacing: normal;
}
.lang-switcher__option:hover {
  background: #2E4A9E;
}
.lang-switcher__option.is-current {
  /* The panel's `background: var(--white)` above is misleading — the cards &
     panels !important rule in src/lib/colors.ts forces .lang-switcher__dropdown
     to `surface` #243C82, so the old dark primaryFill measured 1.19:1 here and
     the selected row was invisible. cyanText is 6.16:1 on #243C82 and 4.86:1 on
     the #2E4A9E hover fill. The check icon carries the state without colour
     (WCAG 1.4.1); aria-current carries it for AT. */
  color: #7DD3FC;
}
.lang-switcher__check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .lang-switcher:hover,
  .lang-switcher:focus-within,
  .lang-switcher.is-open {
    background-color: rgba(255, 255, 255, 0.04);
  }
  .lang-switcher:hover .lang-switcher__dropdown,
  .lang-switcher:focus-within .lang-switcher__dropdown,
  .lang-switcher.is-open .lang-switcher__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}
/* Touch / click — dropdown follows .is-open from the trigger script */
.lang-switcher.is-open .lang-switcher__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


.brand,
.header .brand,
.header .columns .item:first-child,
.header .columns .item:first-child .brand,
a.brand {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  -webkit-tap-highlight-color: transparent;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.brand:hover,
.brand:focus,
.brand:active,
.header .brand:hover,
.header .brand:focus,
.header .brand:active,
a.brand:hover,
a.brand:focus,
a.brand:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.header .brand {
  width: auto !important;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 !important;
  margin: 0;
  margin-left: var(--ocgt-gutter);
  text-decoration: none !important;
}
/* Hide desktop dropdown caret — its reserved width widened the gap after the
   "Service" item (a menu-item-has-children). Keeps nav spacing even. */
.header .menu-header > li.menu-item-has-children:after {
  display: none !important;
}
/* 6rem == 4.002vw, so the mark holds a constant 80% of the 5vw header bar at
   every desktop width. Do not add a px floor here — a fixed height in a fluid
   bar lets that ratio drift with the viewport, and 50px in particular crowds
   the 1101px seam, where it fills 90.8% of a 55.05px bar. */
.ocgt-logo {
  height: 6rem;
  width: auto;
  object-fit: contain;
  display: block;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
@media (max-width: 1100px) {
  .header .brand {
    margin-left: var(--ocgt-gutter);
    width: auto !important;
  }
  /* Floor binds only below 351.9px, and cannot drift the ratio the way it
     would on desktop: --font-size is itself px-clamped here (mobile-nav.ts:9). */
  .ocgt-logo {
    height: max(38px, 4rem);
  }
}