/* 3Lines public design system. Shared brand tokens live in 3lines.css. */
:root {
  /* Public aliases resolve to the supplied 3Lines tokens, in both themes. */
  --site-bg: var(--background);
  --site-ink: var(--foreground);
  --site-muted: var(--muted-foreground);
  --site-paper: var(--card);
  --site-soft: var(--secondary);
  --site-line: var(--border);
  --site-blue: var(--primary);
  --site-on-blue: var(--primary-foreground);
  --site-night: oklch(0.205 0 0);
  --site-inverse-ink: oklch(0.985 0 0);
  --site-inverse-muted: oklch(0.708 0 0);
  --site-inverse-line: oklch(1 0 0 / 20%);
  --site-sky: oklch(0.649 0.113 243.962);
  --site-white: oklch(1 0 0);
  --site-brand: oklch(0.549 0.113 243.962);
  --site-radius: var(--radius-xl);
  --site-shadow: var(--shadow-sm);
  --site-section: clamp(56px,7.5vw,112px);
  --site-gap: clamp(20px,3vw,40px);
  --wrap: 1440px;
  --pad: clamp(20px,4.5vw,80px);
  --ease: cubic-bezier(.22,.68,0,1.01);
  /* Motion scale: one easing family, three durations. */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .18s;
  --dur-2: .3s;
  --dur-3: .6s;
  /* Hover/pressed state of the brand blue (white text keeps > 4.5:1). */
  --site-blue-deep: oklch(0.47 0.12 243.962);
  /* Header height, mirrored from .hdr__inner's min-heights below, so the film
     hero can slide underneath the header without a script measuring it. */
  --hdr-h: 88px;
  --focus: var(--primary);
  --focus-halo: var(--background);
  --navy: var(--site-night);
  --cyan: var(--site-sky);
}
html.dark {
  /* The supplied lifted blue needs dark button text for AA contrast. */
  --site-on-blue: oklch(0.145 0 0);
  /* In dark mode the blue is light with dark text, so "deeper" means lighter. */
  --site-blue-deep: oklch(0.74 0.1 243.962);
  --destructive: oklch(0.704 0.191 22.216);
  --focus: var(--primary);
  --focus-halo: var(--background);
  color-scheme: dark;
}
*,*::before,*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-ink);
  font: 400 16px/1.65 var(--font-sans);
  overflow-wrap: break-word;
}
button,input,textarea,select {
  font: inherit;
}
button,summary,a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
  background: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img,svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,h2,h3,h4,p,ul {
  margin: 0;
}
h1,h2,h3,h4 {
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(36px,5.6vw,80px);
}
h2,.h2 {
  font-size: clamp(30px,3.6vw,52px);
}
h3,.h3 {
  font-size: clamp(23px,2.4vw,34px);
}
p {
  color: var(--site-muted);
}
ul {
  padding: 0;
  list-style: none;
}
::selection {
  background: var(--site-sky);
  color: var(--site-night);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 5px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}
.sr-only,.field--hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skips a {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--site-paper);
  transform: translateY(-180%);
}
.skips a:focus {
  transform: none;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section {
  padding-block: var(--site-section);
}
.section--mist {
  background: var(--site-soft);
}
/* The reference's muted text and blue miss AA on its secondary surface.
   Pair that surface with its supplied foreground; retain blue for icons/lines. */
.section--mist,.pagehead,.ovsplit__aside,.newsgrid--archive>.ncard:first-child,
.mapembed,.maploc__info,.form,.langmenu__list a:hover,.langmenu__list a[aria-current] {
  --site-muted: var(--secondary-foreground);
  --site-link-ink: var(--secondary-foreground);
}
.section--navy {
  background: var(--site-night);
  color: var(--site-white);
  position: relative;
  isolation: isolate;
}
.section--navy p {
  color: var(--site-inverse-muted);
}
.section--navy .kicker {
  color: var(--site-sky);
}
.section--navy .arrowlink {
  color: var(--site-white);
}
.section>.wrap>*+*:not(.kicker):not(.h2):not(.lede) {
  margin-top: var(--site-gap);
}
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--site-gap);
}
.sec-head>div {
  min-width: 0;
  max-width: 850px;
}
.sec-head>.arrowlink {
  flex-shrink: 0;
  margin-bottom: 5px;
}
.kicker {
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--site-link-ink,var(--site-blue));
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 18px;
}
.kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  margin-top: .75em;
  background: currentColor;
  flex: none;
}
.lede {
  max-width: 65ch;
  font-size: clamp(17px,1.6vw,21px);
  line-height: 1.7;
}
.h2+.lede {
  margin-top: 20px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  min-height: 52px;
  border: 1px solid var(--site-line);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
  width: fit-content;
}
.btn svg,.arrowlink svg,.go svg,.ncard__more svg,.megatab svg,.megalink svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
  transition: transform .25s var(--ease);
}
.btn--blue {
  background: var(--site-blue);
  /* The fill's own colour. --site-link-ink is darkened on soft surfaces for
     text-link contrast, and borrowing it here drew a near-black outline round
     every blue button on a grey section. The fill already carries the
     button's 3:1 non-text contrast. */
  border-color: var(--site-blue);
  color: var(--site-on-blue);
}
.btn--wire {
  background: transparent;
  color: var(--site-ink);
}
.btn--onDark {
  background: var(--site-white);
  border-color: var(--site-white);
  color: var(--site-brand);
}
/* One button system. Primary deepens its own blue, secondary takes the blue
   edge, on-dark stays white; all lift 2px and nudge the arrow. Hover only
   where there is a pointer that hovers, so it never sticks after a tap. */
@media(hover:hover) {
  .btn:hover {
    transform: translateY(-2px);
    border-color: var(--site-blue);
    color: var(--site-link-ink,var(--site-blue));
    box-shadow: var(--shadow-sm);
  }
  .btn--blue:hover {
    background: var(--site-blue-deep);
    border-color: var(--site-blue-deep);
    color: var(--site-on-blue);
    box-shadow: 0 14px 26px -14px color-mix(in srgb,var(--site-blue) 80%,transparent);
  }
  .btn--onDark:hover {
    background: var(--site-white);
    border-color: var(--site-white);
    color: var(--site-brand);
    box-shadow: 0 16px 30px -16px rgb(0 0 0 / .5);
  }
}
.btn:active {
  transform: translateY(0) scale(.98);
  transition-duration: .08s;
}
.btn:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}
.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--site-link-ink,var(--site-blue));
  padding-block: 8px;
  min-height: 40px;
}
@media(hover:hover) {
  .arrowlink:hover svg,.btn:hover svg {
    transform: translateX(4px);
  }
}
/* Global chrome */
.hdr {
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--site-bg);
  border-bottom: 1px solid var(--site-line);
  transition: box-shadow .25s;
}
.hdr.is-scrolled {
  box-shadow: var(--shadow-sm);
}
.hdr__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1600px;
  margin: auto;
  padding: 14px var(--pad);
  min-height: 88px;
}
.hdr__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.hdr__logo::before {
  content: '';
  width: 50px;
  height: 50px;
  background: var(--logo-mark-circle) center/contain no-repeat;
  flex: none;
}
.hdr__wordmark {
  display: flex;
  flex-direction: column;
  direction: ltr;
  gap: 3px;
}
.hdr__wordmark-name {
  font-size: 20px;
  line-height: 1;
  letter-spacing: .28em;
  color: var(--site-link-ink,var(--site-blue));
}
.hdr__wordmark-tag {
  font-size: 8px;
  letter-spacing: .025em;
  color: var(--site-link-ink,var(--site-blue));
}
.hdr .utility {
  margin-inline-start: auto;
}
.utility__inner {
  display: flex;
  align-items: center;
  gap: 26px;
}
.utility__inner>a {
  font-size: 14px;
  font-weight: 500;
  position: relative;
  padding-block: 12px;
  white-space: nowrap;
}
.utility__inner>a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 3px;
  height: 2px;
  background: var(--site-blue);
  transform: scaleX(0);
  transition: transform .2s;
}
.utility__inner>a:hover::after,.utility__inner>a[aria-current=page]::after {
  transform: scaleX(1);
}
.utility__inner>a[href$='/contact'] {
  background: var(--site-blue);
  color: var(--site-on-blue);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
@media(hover:hover) {
  .utility__inner>a[href$='/contact']:hover {
    background: var(--site-blue-deep);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -12px color-mix(in srgb,var(--site-blue) 80%,transparent);
  }
}
.utility__inner>a[href$='/contact']::after {
  display: none;
}
.hdr__burger,.hdr__search {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--site-line);
  border-radius: 50%;
  padding: 10px;
}
.hdr__burger {
  order: 4;
}
.hdr__search {
  border-color: transparent;
}
.hdr__burger:hover,.hdr__search:hover {
  background: var(--site-soft);
}
.hdr__burger svg,.hdr__search svg,.mega__close svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}
.langmenu {
  position: relative;
  font-size: 13px;
}
.langmenu summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  min-height: 44px;
  list-style: none;
}
.langmenu summary::-webkit-details-marker {
  display: none;
}
.langmenu__list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 14px);
  min-width: 180px;
  padding: 8px;
  background: var(--site-paper);
  border: 1px solid var(--site-line);
  box-shadow: var(--site-shadow);
  border-radius: var(--radius-md);
  z-index: 5;
}
.langmenu__list a {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px;
  border-radius: var(--radius-md);
}
.langmenu__list a:hover,.langmenu__list a[aria-current] {
  background: var(--site-soft);
  color: var(--site-link-ink,var(--site-blue));
}
.langmenu__code {
  font-size: 11px;
  color: var(--site-muted);
}
.mega,.searchlayer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--site-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s,transform .25s var(--ease),visibility .25s;
  overflow: auto;
  overscroll-behavior: contain;
}
.mega.is-open,.searchlayer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mega__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--site-line);
  position: sticky;
  top: 0;
  background: var(--site-bg);
  z-index: 1;
}
.mega__close {
  margin-inline-start: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}
.mega__body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 70px;
  max-width: var(--wrap);
  margin: auto;
  padding: 56px var(--pad) 80px;
}
.megatabs li+li {
  border-top: 1px solid var(--site-line);
}
.megatab,.megalink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 0;
  text-align: start;
  font-size: clamp(22px,2.2vw,30px);
}
.megatab[aria-expanded=true],.megatab:hover,.megalink:hover {
  color: var(--site-link-ink,var(--site-blue));
}
.megapanel {
  display: none;
}
.megapanel.is-on {
  display: block;
}
.megapanel :is(h2,h3) {
  font-size: 16px;
  color: var(--site-muted);
  margin-bottom: 24px;
}
.megapanel__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 30px;
}
.megapanel__links a {
  display: block;
  border-bottom: 1px solid var(--site-line);
  padding: 12px 0;
  font-size: 16px;
}
.megapanel__links a:hover {
  color: var(--site-link-ink,var(--site-blue));
}
.megapanel__cta {
  margin-top: 28px;
}
.searchlayer .close {
  position: absolute;
  inset-inline-end: var(--pad);
  top: 28px;
  padding: 10px;
}
.searchlayer__inner {
  width: 100%;
  max-width: 960px;
  margin: clamp(52px,10vh,120px) auto;
  padding: 30px var(--pad);
}
.searchlayer__title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--site-muted);
  margin-bottom: 12px;
}
.searchlayer__count {
  font-size: 13px;
  margin-top: 20px;
}
.searchlayer__field {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--site-blue);
}
.searchlayer__field>svg {
  width: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  flex: none;
}
.searchlayer input {
  font-size: clamp(22px,4vw,44px);
  background: transparent;
  color: var(--site-ink);
  border: 0;
  min-width: 0;
  width: 100%;
  padding: 20px 0;
}
.searchlayer__results {
  margin-top: 8px;
  display: grid;
}
.searchlayer__results a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--site-line);
  font-size: 19px;
}
.searchlayer__results a strong {
  font-weight: 500;
}
.searchlayer__results a small {
  display: block;
  font-size: 12px;
  color: var(--site-muted);
  margin-bottom: 4px;
}
.searchlayer__results a>svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.searchlayer__results a:hover {
  color: var(--site-link-ink,var(--site-blue));
}
.fallback-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 15px var(--pad);
  border-bottom: 1px solid var(--site-line);
}
html:not(.js) .hdr__burger,html:not(.js) .hdr__search,html:not(.js) .tl-theme {
  display: none;
}
/* CMS-owned copy and photography, framed by the 3Lines brand. */
.hero {
  background: var(--site-bg);
  color: var(--site-ink);
  border-bottom: 1px solid var(--site-line);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px,5vw,72px);
  align-items: center;
  padding-block: clamp(40px,5vw,72px);
}
.hero__content {
  min-width: 0;
}
.hero__media {
  align-self: stretch;
  position: relative;
  min-height: 420px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--site-soft);
}
.hero__media img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 50%;
}
.hero .kicker {
  font-size: 11px;
  margin-bottom: 28px;
  max-width: 52ch;
}
.hero h1 {
  font-size: clamp(40px,4.4vw,64px);
  max-width: 15ch;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.04em;
  margin-bottom: 24px;
}
.hero__focus {
  color: var(--site-link-ink,var(--site-blue));
}
.hero h1>span {
  display: block;
}
.hero__content>p:not(.kicker) {
  max-width: 57ch;
  font-size: 16px;
  line-height: 1.75;
}
.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 28px;
}
.hero__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--site-line);
  color: var(--site-muted);
  font: 400 12px/1.6 var(--font-mono);
}
.hero__capabilities li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__capabilities li::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--site-blue);
}
.hero+.section:has(.figures) {
  padding-block: 38px;
  border-bottom: 1px solid var(--site-line);
}
.figures {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 26px;
  padding-block: 10px;
}
.figures>div {
  padding-inline-start: 26px;
  border-inline-start: 1px solid var(--site-line);
}
.figures>div:first-child {
  border: 0;
  padding-inline-start: 0;
}
.figure__num {
  display: flex;
  align-items: baseline;
  color: var(--site-link-ink,var(--site-blue));
  font-size: clamp(36px,4vw,58px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  justify-content: flex-start;
}
.figure__pre {
  font-size: .65em;
  margin-inline-end: 3px;
}
.figure__lab {
  max-width: 26ch;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 10px;
  color: var(--site-muted);
}
/* Reusable CMS block bodies */
.defs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 32px;
  counter-reset: definition;
}
.defs[data-cols='2'] {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.defcard {
  border-top: 1px solid var(--site-line);
  padding-top: 24px;
  counter-increment: definition;
}
.defcard::before {
  content: counter(definition,decimal-leading-zero);
  display: block;
  font: 12px var(--font-mono);
  color: var(--site-link-ink,var(--site-blue));
  margin-bottom: 24px;
}
.defcard :is(h2,h3) {
  font-size: 23px;
  line-height: 1.3;
  margin-bottom: 14px;
}
.defcard p {
  font-size: 16px;
  line-height: 1.75;
}
.defcard__link {
  color: var(--site-link-ink,var(--site-blue));
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb,currentColor 35%,transparent);
  text-underline-offset: 4px;
}
.defcard__link:hover {
  text-decoration-color: currentColor;
}
.defcard__meta {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--site-line);
  font-size: 13px;
  color: var(--site-muted);
}
.defcard__meta b {
  color: var(--site-ink);
  font-weight: 500;
}
.companies {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 20px;
}
.ccard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid var(--site-line);
}
.ccard__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--site-soft);
  border-radius: var(--radius-md);
}
.ccard__logo {
  position: absolute;
  inset: 15%;
  width: 70%;
  height: 70%;
  object-fit: contain;
}
.ccard[data-plate=logo] .ccard__media {
  background: var(--site-soft);
}
.ccard[data-plate=logo] .ccard__logo[data-invert='1'] {
  filter: brightness(.35);
}
.ccard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 0 14px;
}
.ccard :is(h2,h3) {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.ccard p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.ccard .arrowlink {
  margin-top: auto;
  justify-content: space-between;
}
.ccard__status {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  font-size: 12px;
  background: var(--site-paper);
  padding: 4px 9px;
  border-radius: 3px;
}
.cards3 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
}
.pcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  padding: 24px;
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  background: var(--site-paper);
  transition: box-shadow .25s,border-color .25s,transform .25s var(--ease);
}
.pcard__media {
  grid-column: 1;
  grid-row: 1/4;
  aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  background: var(--site-soft);
}
.pcard__media>svg,.feature__media>svg,.tile>svg,.careers>svg {
  display: none;
}
.pcard :is(h2,h3) {
  font-size: 20px;
  line-height: 1.32;
  margin-bottom: 12px;
  letter-spacing: -.02em;
}
.pcard p {
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 18px;
}
.pcard .arrowlink {
  justify-content: space-between;
  align-self: end;
}
.pcard:has(a):hover,.pcard:focus-within {
  border-color: var(--site-link-ink,var(--site-blue));
  box-shadow: var(--site-shadow);
  transform: translateY(-3px);
}
.pcard a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--site-radius);
}
.content-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
  display: block;
}
.feature {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  align-items: center;
  gap: clamp(28px,5vw,72px);
}
.feature__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--site-radius);
  background: var(--site-soft);
}
.feature .h3 {
  margin-bottom: 22px;
}
.feature .arrowlink {
  margin-top: 18px;
}
.feature .figures {
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin-top: 25px;
}
.feature .figures>div {
  padding-inline-start: 0;
  border: 0;
}
.prose {
  max-width: 72ch;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.85;
}
.prose p+p {
  margin-top: 1.3em;
}
/* News articles: the body follows a full-width feature (photo + lede), so it
   aligns with that band's start edge instead of floating as a centred column. */
.feature+.prose {
  margin-inline: 0;
}
.section--company-intro>.wrap {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  align-items: start;
  gap: clamp(32px,5vw,76px);
}
/* The photo's own column. Stretched to the full height of the first row so the
   sticky photo inside it stops at the end of the text — its travel is bounded by
   this box, not by the whole grid, which also holds the full-width figures row. */
.company-intro__aside {
  align-self: stretch;
}
.company-intro__visual {
  position: sticky;
  top: 130px;
  height: clamp(440px,46vw,650px);
  overflow: hidden;
  border-radius: var(--site-radius);
  background: var(--site-night);
}
.company-intro__visual .content-image {
  object-position: 45% center;
}
.section--company-intro .prose {
  font-size: 16px;
  line-height: 1.85;
}
.section--company-intro .prose p:first-child {
  color: var(--site-ink);
  font-size: clamp(23px,2.2vw,32px);
  line-height: 1.5;
  letter-spacing: -.02em;
  margin-bottom: 32px;
}
.section--company-intro .figures {
  grid-column: 1/-1;
  width: 100%;
  margin-top: 0;
}
@media(max-width:767px) {
  .section--company-intro>.wrap { grid-template-columns: 1fr; }
  .company-intro__visual {
    position: static;
    height: auto;
    aspect-ratio: 16/10;
  }
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--site-link-ink,var(--site-blue));
}
.prose li {
  margin-top: 12px;
}
.section--navy .prose {
  font-size: clamp(22px,2.2vw,30px);
  line-height: 1.65;
}
.ovsplit {
  display: grid;
  grid-template-columns: minmax(0,1.7fr) minmax(240px,1fr);
  gap: 60px;
  align-items: start;
}
.ovsplit .h3 {
  margin-bottom: 22px;
  max-width: 26ch;
}
.ovsplit__aside {
  background: var(--site-soft);
  padding: 28px;
  border-radius: var(--radius-md);
}
.ticks {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
.ticks li {
  padding-inline-start: 22px;
  position: relative;
  color: var(--site-muted);
  font-size: 15px;
  line-height: 1.7;
}
.ticks li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .6em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--site-blue);
  transform: rotate(45deg);
}
.ticks b {
  color: var(--site-ink);
  font-weight: 600;
}
.speclist {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 32px;
}
.speclist>div {
  padding: 18px 0;
  border-bottom: 1px solid var(--site-line);
}
.tiles3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}
.tile {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background: var(--site-night) var(--img) center/cover;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .58);
}
.tile__body {
  position: relative;
  z-index: 1;
  padding: 28px;
  color: var(--site-white);
}
.tile__body :is(h2,h3) {
  font-size: 24px;
  margin-bottom: 20px;
}
.go {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
}
/* Proof panels: visible until controls are ready. */
.heroslides {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  isolation: isolate;
}
.proof__visual {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
  margin-bottom: 28px;
}
.heroslide {
  grid-column: 1;
  grid-row: 2;
}
.heroslide :is(h2,h3) {
  font-size: clamp(25px,3vw,42px);
  max-width: 24ch;
  margin-bottom: 18px;
}
.heroslide p {
  font-size: 17px;
  max-width: 52ch;
}
.heroslides.is-enhanced .heroslide:not(.is-on) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.heroslides:not(.is-enhanced) .heroslide {
  grid-row: auto;
  margin-bottom: 24px;
}
.dots {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  counter-reset: proof;
}
.dots .dot {
  counter-increment: proof;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 80px;
  padding: 23px 0;
  text-align: start;
  border-bottom: 1px solid var(--site-inverse-line);
  color: var(--site-inverse-muted);
  font-size: 17px;
  line-height: 1.5;
  transition: color .2s;
}
.dots .dot::before {
  content: counter(proof,decimal-leading-zero);
  font: 12px var(--font-mono);
  color: var(--site-sky);
}
.dots .dot[aria-selected=true] {
  color: var(--site-white);
  border-bottom-color: var(--site-sky);
}
.dots .dot[aria-selected=true] .dot__label {
  transform: translateX(5px);
}
.dot__label {
  transition: transform .2s;
}
.heroslides:not(.is-enhanced) .dots {
  display: none;
}
/* Internal pages and news */
.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--site-soft);
  padding-block: 38px clamp(50px,5.5vw,80px);
  border-bottom: 1px solid var(--site-line);
}
.pagehead h1 {
  font-size: clamp(36px,4.6vw,68px);
  line-height: 1.1;
  max-width: 24ch;
  letter-spacing: -.04em;
}
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 32px;
  font-size: 13px;
  color: var(--site-muted);
  max-width: 80ch;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--site-link-ink,var(--site-blue));
  text-underline-offset: 4px;
}
.crumbs a:hover {
  text-decoration: underline;
}
.crumbs [aria-current=page] {
  color: var(--site-ink);
}
.pagehead+.section {
  padding-top: 64px;
}
.newsgrid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 28px;
}
.ncard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-bottom: 1px solid var(--site-line);
}
.ncard__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--site-soft);
}
.ncard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 0 18px;
  gap: 18px;
}
.tag {
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--site-link-ink,var(--site-blue));
}
.ncard :is(h2,h3) {
  font-size: 23px;
  line-height: 1.35;
  flex: 1;
}
.ncard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--site-muted);
  font-size: 12px;
}
.ncard__meta .dot {
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
}
.ncard__more {
  color: var(--site-link-ink,var(--site-blue));
  margin-top: 5px;
}
.ncard:hover :is(h2,h3) {
  color: var(--site-link-ink,var(--site-blue));
}
.newsgrid--archive>.ncard:first-child {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  overflow: hidden;
  background: var(--site-soft);
  margin-bottom: 24px;
}
.newsgrid--archive>.ncard:first-child .ncard__media {
  border-radius: 0;
  aspect-ratio: auto;
  min-height: 350px;
}
.newsgrid--archive>.ncard:first-child .ncard__body {
  padding: clamp(24px,4vw,60px);
  justify-content: center;
  gap: 24px;
}
.newsgrid--archive>.ncard:first-child :is(h2,h3) {
  font-size: clamp(27px,2.8vw,42px);
  line-height: 1.2;
  flex: none;
}
.newsgrid--archive>.ncard:first-child .ncard__more {
  border: 1px solid var(--site-line);
  border-radius: 50%;
  padding: 13px;
  width: fit-content;
}
@media(max-width:767px) {
  .newsgrid--archive>.ncard:first-child {
    display: flex;
    margin-bottom: 8px;
  }
  .newsgrid--archive>.ncard:first-child .ncard__media {
    aspect-ratio: 16/10;
    min-height: 0;
  }
}
.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--site-muted);
  font-size: 14px;
  margin-bottom: 22px;
}
.article-related {
  padding-top: 0;
}
.article-related .sec-head {
  border-top: 1px solid var(--site-line);
  padding-top: 42px;
}
.certs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
.certs li {
  background: var(--site-white);
  border: 1px solid var(--site-line);
  padding: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
}
.certs img {
  max-height: 150px;
  object-fit: contain;
}
.certs li:first-child img {
  max-width: 150px;
}
/* Logos retain their original colours on white plates. */
.logos {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 20px;
}
.logos img[data-invert='1'] {
  filter: brightness(.25);
}
.logos--catalogue>div {
  position: relative;
  padding: 28px 20px 22px;
  border: 1px solid var(--site-line);
  border-radius: var(--radius-md);
  background: var(--site-paper);
  text-align: center;
}
.logos__tag {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--site-muted);
  margin-bottom: 16px;
}
.logos__mark {
  display: grid;
  place-items: center;
  height: 100px;
  padding: 14px;
  background: var(--site-white);
  border-radius: var(--radius-md);
}
.logos__mark img {
  max-height: 70px;
  max-width: 160px;
  object-fit: contain;
}
.logos__meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--site-muted);
}
.logos__meta strong {
  font-size: 16px;
  font-weight: 500;
  color: var(--site-ink);
}
.logos--marquee {
  display: block;
  position: relative;
  padding-top: 44px;
  direction: ltr;
}
/* Edge to edge: the band breaks out of the page's content width to both edges
   of the screen, white so every mark sits on the light ground it was drawn
   for, and fades out at the screen edges instead of cutting logos mid-glyph.
   Measured against the section (a size container), not 100vw: 100vw counts
   the scrollbar, which left an 8px gap on one side in Arabic. The clip is a
   safety net so the page can never scroll sideways. */
.section:has(.logos--marquee) {
  container-type: inline-size;
  overflow-x: clip;
}
.logos__viewport {
  margin-inline: calc(50% - 50vw);
  margin-inline: calc(50% - 50cqi);
  overflow: hidden;
  background: var(--site-white);
  border-block: 1px solid var(--site-line);
  -webkit-mask: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.logos__track {
  display: flex;
  width: max-content;
  animation: logos-scroll 55s linear infinite;
  padding-block: 22px;
}
.logos__track>div {
  display: grid;
  place-items: center;
  width: 180px;
  height: 86px;
  padding: 18px 24px;
  flex: none;
}
.logos__track>div>a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.logos__track img {
  max-width: 130px;
  max-height: 52px;
  object-fit: contain;
  width: auto;
  height: auto;
}
.logos__pause {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 32px;
  font-size: 12px;
  color: var(--site-muted);
  padding: 4px 0;
}
.logos__pause::before {
  content: '\2161';
  margin-inline-end: 8px;
}
.logos__pause[aria-pressed=true]::before {
  content: '\25b7';
}
/* Only the button pauses the strip for good. Hover and focus pause it while
   the reader is on a LOGO — never while on the button: the button sits inside
   the strip, so a strip-wide :hover/:focus-within kept it frozen after
   "Resume" was pressed (the pointer is still over the button, which also keeps
   focus), and on phones a tap leaves both states stuck. Hover pause is limited
   to devices that really hover. */
.logos--marquee.is-paused .logos__track,.logos__track:focus-within {
  animation-play-state: paused;
}
@media(hover:hover) {
  .logos__track:hover {
    animation-play-state: paused;
  }
}
html:not(.js) .logos__track {
  animation: none;
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
}
html:not(.js) .logos__track>[aria-hidden],html:not(.js) .logos__pause {
  display: none;
}
@keyframes logos-scroll {
  to {
    transform: translateX(-50%);
  }
}
/* Location and forms */
.maploc {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr);
  gap: 30px;
}
.mapembed {
  position: relative;
  aspect-ratio: 16/10;
  display: grid;
  place-items: center;
  background: var(--site-soft);
  border: 1px solid var(--site-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 24px;
}
.mapembed__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mapembed__pulse {
  opacity: .2;
}
.mapembed__panel {
  position: relative;
  z-index: 1;
  margin-top: 48px;
  max-width: 370px;
  background: var(--site-paper);
  padding: 26px;
  border: 1px solid var(--site-line);
  box-shadow: var(--site-shadow);
  border-radius: var(--radius-md);
  text-align: center;
}
.mapembed__place {
  font-size: 20px;
  color: var(--site-ink);
  font-weight: 600;
  margin-bottom: 10px;
}
.mapembed__addr {
  font-size: 14px;
  margin-bottom: 20px;
}
.mapembed__note {
  font-size: 12px;
  margin-top: 14px;
}
.mapembed.is-loaded {
  padding: 0;
  display: block;
}
.mapembed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.maploc__info {
  padding: 28px;
  background: var(--site-soft);
  border-radius: var(--radius-xl);
}
.maploc__rows {
  display: grid;
  gap: 24px;
}
.maploc__label {
  display: block;
  color: var(--site-muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.maploc__value {
  display: block;
  color: var(--site-ink);
  font-size: 16px;
}
.maploc__value a {
  color: var(--site-link-ink,var(--site-blue));
  text-decoration: underline;
  text-underline-offset: 4px;
}
.maploc__cta {
  margin-top: 28px;
}
.section>.wrap:has(>.form) {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 60px;
  align-items: start;
}
.section>.wrap:has(>.form)>.defs {
  grid-template-columns: 1fr;
  gap: 24px;
}
.section>.wrap:has(>.form) .defcard::before {
  display: none;
}
.section>.wrap:has(>.form) .defcard :is(h2,h3) {
  font-size: 17px;
  margin-bottom: 9px;
}
.section>.wrap:has(>.form)>.form {
  margin-top: 0;
}
.form {
  padding: 34px;
  background: var(--site-soft);
  border: 1px solid var(--site-line);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 720px;
}
.form__row {
  display: grid;
  gap: 22px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-size: 14px;
  font-weight: 500;
}
.field input,.field textarea {
  background: var(--site-paper);
  color: var(--site-ink);
  border: 1px solid var(--site-line);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  width: 100%;
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
}
.field textarea {
  min-height: 160px;
  resize: vertical;
}
.field input[aria-invalid=true],.field textarea[aria-invalid=true] {
  border-color: var(--destructive);
}
.field input[type=email] {
  direction: ltr;
  text-align: start;
}
.form .btn {
  margin-top: 26px;
}
.form__status {
  font-size: 14px;
  min-height: 1.5em;
  margin-top: 16px;
}
.form__status[data-state=ok] {
  color: var(--site-link-ink,var(--site-blue));
}
.form__status[data-state=bad],.form__status[data-state=err],.field__error {
  color: var(--destructive);
}
/* Error text keeps the reference destructive color on a readable card surface. */
.form__status[data-state=bad],.form__status[data-state=err],.field__error {
  background: var(--site-paper);
  border-inline-start: 2px solid var(--destructive);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.field__error {
  font-size: 13px;
}
html.dark .form__status[data-state=bad],html.dark .form__status[data-state=err],html.dark .field__error {
  color: var(--destructive);
}
/* Closing band and footer */
/* A flat brand-blue closing band, with the existing CMS photograph. */
.careers {
  background: var(--site-brand);
  color: var(--site-white);
  padding-block: clamp(48px,6vw,88px);
}
.careers>.wrap {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: clamp(32px,6vw,88px);
}
.careers h2 {
  font-size: clamp(32px,4vw,56px);
  max-width: 15ch;
}
.careers .btn {
  margin-top: 32px;
}
.careers__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16/10;
}
.careers__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.socialstrip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  padding-block: 30px;
  border-bottom: 1px solid var(--site-line);
}
.socialstrip>span {
  margin-inline-end: auto;
  font-size: 14px;
  color: var(--site-muted);
}
.socialstrip a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--site-line);
  border-radius: 50%;
  color: var(--site-link-ink,var(--site-blue));
}
.socialstrip a:hover {
  background: var(--site-soft);
}
.socialstrip svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.ftr {
  padding: 55px 0 24px;
}
/* The theme toggle is fixed to the bottom corner; without this the last line of
   the footer (the copyright) sits underneath it at the end of every page. */
@media(min-width:768px) {
  .ftr {
    padding-bottom: 76px;
  }
}
.ftr__grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr .65fr;
  gap: 60px;
}
.ftr__logo {
  display: block;
  width: 116px;
  height: 100px;
  margin-bottom: 28px;
  background: var(--logo-lockup) 0 50%/contain no-repeat;
}
[dir=rtl] .ftr__logo {
  background-position: 100% 50%;
}
.ftr__title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--site-muted);
  margin-bottom: 16px;
}
.ftr__grid ul {
  display: grid;
  gap: 10px;
}
.ftr__grid>div:nth-child(2) ul {
  grid-template-columns: 1fr 1fr;
  gap: 12px 30px;
}
.ftr a {
  font-size: 13px;
  line-height: 1.6;
  color: var(--site-muted);
}
.ftr a:hover {
  color: var(--site-link-ink,var(--site-blue));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ftr__grid li a {
  display: inline-block;
  min-height: 32px;
  padding-block: 4px;
}
.ftr__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-top: 35px;
  margin-top: 42px;
  border-top: 1px solid var(--site-line);
  font-size: 11px;
  color: var(--site-muted);
}
.ftr__bar .a11y {
  max-width: 90ch;
}
.ftr__bar .pill {
  display: block;
  width: fit-content;
  margin-top: 10px;
  border: 1px solid var(--site-line);
  border-radius: 30px;
  padding: 4px 10px;
  white-space: nowrap;
}
.ftr__bar .right {
  flex-shrink: 0;
  max-width: 42ch;
}
.tl-theme {
  position: fixed;
  z-index: 140;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--site-paper);
  color: var(--site-ink);
  border: 1px solid var(--site-line);
  box-shadow: var(--site-shadow);
  border-radius: 30px;
  font-size: 11px;
}
.tl-theme svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
html.dark .hdr__wordmark-name {
  color: var(--site-link-ink,var(--site-blue));
}
/* Enhancement never hides content while waiting for a script. */
.reveal {
  opacity: 1;
}
@media(prefers-reduced-motion:no-preference) {
  .reveal.is-in {
    animation: rise-in .6s var(--ease) both;
  }
}
/* No `to` frame, for the same reason as brand-enter below: an explicit
   `to{transform:none}` held by fill-mode `both` overrode the card's own
   hover transform, so revealed cards never lifted on hover. */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@media(max-width:1190px) {
  .hdr__inner {
    gap: 14px;
  }
  .utility__inner {
    gap: 18px;
  }
  .hdr__wordmark-tag {
    display: none;
  }
  .pcard {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 18px;
    padding: 20px;
  }
  .companies {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 32px;
  }
}
@media(max-width:999px) {
  .utility__inner>a {
    display: none;
  }
  .hdr__inner {
    min-height: 76px;
    padding-block: 12px;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero__media {
    min-height: 0;
    aspect-ratio: 16/10;
  }
  .hero__media img {
    object-position: center;
  }
  .hero h1 {
    font-size: clamp(40px,6vw,60px);
    max-width: 22ch;
  }
  .cards3 {
    gap: 18px;
  }
  .pcard {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }
  .pcard__media {
    aspect-ratio: 16/10;
    width: 100%;
  }
  .pcard>:not(.pcard__media) {
    margin-inline: 24px;
  }
  .pcard :is(h2,h3) {
    margin-top: 24px;
  }
  .pcard {
    gap: 0;
  }
  .pcard .arrowlink {
    margin-top: auto;
    margin-bottom: 20px;
    align-self: stretch;
    padding-top: 12px;
    border-top: 1px solid var(--site-line);
  }
  .defs {
    gap: 24px;
  }
  .defcard :is(h2,h3) {
    font-size: 21px;
  }
  .heroslides {
    gap: 32px;
  }
  .dots .dot {
    font-size: 15px;
  }
  .mega__body {
    gap: 30px;
    grid-template-columns: 1fr 1.8fr;
  }
  .megapanel__links {
    grid-template-columns: 1fr;
  }
  .logos {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .section>.wrap:has(>.form) {
    gap: 30px;
  }
  .form {
    padding: 26px;
  }
  .ftr__grid {
    gap: 30px;
    grid-template-columns: 1fr 1.7fr;
  }
  .ftr__grid>div:last-child {
    grid-column: 1/-1;
  }
  .ftr__grid>div:last-child ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
}
@media(max-width:767px) {
  .hero__inner,.careers>.wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero__inner {
    padding-block: 40px;
  }
  .hero__media {
    min-height: 0;
    aspect-ratio: 16/10;
  }
  .hero__media img {
    object-position: center;
  }
  .hero__content>p:not(.kicker) {
    font-size: 16px;
    line-height: 1.75;
  }
  .hero .kicker {
    font-size: 11px;
    max-width: 40ch;
    margin-bottom: 24px;
  }
  .hero h1 {
    font-size: clamp(40px,8.5vw,62px);
    max-width: 14ch;
  }
  .hero__capabilities {
    font-size: 11px;
    gap: 12px 20px;
    margin-top: 30px;
  }
  .figures {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 28px 20px;
  }
  .figures>div {
    padding-inline-start: 20px;
  }
  .figures>div:nth-child(odd) {
    padding-inline-start: 0;
    border: 0;
  }
  .figure__lab {
    font-size: 12px;
  }
  .hero+.section:has(.figures) {
    padding-block: 25px;
  }
  .sec-head {
    align-items: flex-start;
    gap: 18px;
  }
  .sec-head>.arrowlink {
    align-self: flex-end;
    font-size: 12px;
    gap: 8px;
  }
  .defs {
    grid-template-columns: 1fr;
  }
  .defs[data-cols='2'] {
    grid-template-columns: 1fr 1fr;
  }
  .defcard::before {
    margin-bottom: 16px;
  }
  .heroslides {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .proof__visual {
    grid-row: 1;
    margin: 0;
  }
  .heroslide {
    grid-row: 2;
  }
  .dots {
    grid-row: 3;
    grid-column: 1;
  }
  .dots .dot {
    min-height: 60px;
    padding: 16px 0;
  }
  .feature,.ovsplit,.maploc {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .feature__media {
    aspect-ratio: 16/10;
  }
  .ovsplit__aside {
    padding: 24px;
  }
  .pagehead {
    padding-block: 28px 44px;
  }
  .pagehead h1 {
    font-size: clamp(34px,6.8vw,52px);
  }
  .crumbs {
    font-size: 12px;
    margin-bottom: 24px;
  }
  .pagehead+.section {
    padding-top: 40px;
  }
  .newsgrid {
    grid-template-columns: 1fr 1fr;
  }
  .newsgrid>.ncard:first-child:nth-last-child(3) {
    grid-column: 1/-1;
  }
  .newsgrid>.ncard:first-child:nth-last-child(3) .ncard__media {
    aspect-ratio: 16/8;
  }
  .ncard :is(h2,h3) {
    font-size: 20px;
  }
  .ncard__body {
    gap: 12px;
  }
  .logos {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .logos__track>div {
    width: 150px;
  }
  .logos__mark img {
    max-width: 100%;
  }
  .certs {
    grid-template-columns: 1fr;
  }
  .certs img {
    max-height: 100px;
  }
  .section>.wrap:has(>.form) {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .section>.wrap:has(>.form)>.form {
    grid-row: 1;
  }
  .section>.wrap:has(>.form)>.defs {
    grid-template-columns: 1fr 1fr;
  }
  .socialstrip {
    justify-content: flex-start;
  }
  .socialstrip>span {
    width: 100%;
    margin-bottom: 8px;
  }
  .ftr__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 40px;
  }
  .ftr__bar .right {
    max-width: 100%;
  }
  .mega__body {
    grid-template-columns: 1fr;
    padding-top: 24px;
  }
  .megatabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .megatab,.megalink {
    font-size: 19px;
    padding: 14px 0;
  }
  .megatabs li+li {
    border-top: 0;
  }
  .megatabs li {
    border-bottom: 1px solid var(--site-line);
  }
}
@media(max-width:480px) {
  .hdr__inner {
    gap: 9px;
    padding-inline: 20px;
    min-height: 72px;
  }
  .hdr__logo {
    gap: 7px;
  }
  .hdr__logo::before {
    width: 38px;
    height: 38px;
  }
  .hdr__wordmark-name {
    font-size: 13px;
  }
  .hdr__wordmark-tag {
    display: none;
  }
  .hdr__burger,.hdr__search {
    width: 36px;
    height: 36px;
    padding: 8px;
  }
  .langmenu summary {
    gap: 4px;
  }
  .langmenu summary>svg:first-of-type {
    display: none;
  }
  .hero h1 {
    font-size: clamp(38px,10vw,48px);
  }
  .hero__actions {
    gap: 14px;
  }
  .hero__actions .btn {
    padding: 14px 17px;
    gap: 16px;
  }
  .hero__actions .arrowlink {
    font-size: 13px;
    gap: 10px;
  }
  .companies,.cards3,.newsgrid,.tiles3 {
    grid-template-columns: 1fr;
  }
  .ccard__media {
    aspect-ratio: 16/10;
  }
  .ccard__body {
    padding-top: 20px;
  }
  .newsgrid>.ncard:first-child:nth-last-child(3) .ncard__media {
    aspect-ratio: 16/10;
  }
  .defs[data-cols='2'] {
    grid-template-columns: 1fr;
  }
  .section>.wrap:has(>.form)>.defs {
    grid-template-columns: 1fr;
  }
  .form {
    padding: 22px;
  }
  .logos {
    gap: 12px;
  }
  .logos--catalogue>div {
    padding: 18px 12px;
  }
  .logos--catalogue .logos__mark {
    height: 76px;
    padding: 10px;
  }
  .logos--catalogue .logos__mark img {
    max-height: 52px;
  }
  .logos__meta strong {
    font-size: 14px;
  }
  .mapembed {
    aspect-ratio: auto;
    min-height: 460px;
    padding: 16px;
  }
  .mapembed__panel {
    padding: 20px;
  }
  .ftr__grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .ftr__grid>div:nth-child(2) ul {
    grid-template-columns: 1fr;
  }
  .ftr__logo {
    width: 100px;
    height: 86px;
  }
  .speclist {
    grid-template-columns: 1fr;
  }
  .btn {
    font-size: 13px;
  }
  .sec-head {
    flex-wrap: wrap;
  }
  .sec-head>.arrowlink {
    margin: 0;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*::before,*::after {
    animation: none!important;
    transition: none!important;
  }
  .logos__track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logos__track>[aria-hidden],.logos__pause {
    display: none;
  }
}
@media(forced-colors:active) {
  .btn,.hdr__burger,.pcard,.ncard,.ccard {
    border: 1px solid ButtonText;
  }
  .hero,.hero h1,.hero__focus,.hero p {
    color: CanvasText;
  }
  .hero__media {
    display: none;
  }
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding-block: 28px 0;
  color: var(--site-muted);
  font-size: 14px;
}
/* The date line belongs to the article: without this the body started a full
   section gap (108px + the line's own margin) below it, reading as a separate
   block rather than the article's byline. */
.article-meta+.section {
  padding-top: clamp(32px,4vw,56px);
}
.utility__inner>a[data-active="true"] {
  color: var(--site-link-ink,var(--site-blue));
}

/* Creative refinement: the same brand, expressed through three structural lines.
   All decoration is non-interactive; content remains visible without motion/JS. */
.hero,.careers {position:relative;isolation:isolate;overflow:hidden}
.brand-lines {position:absolute;inset-inline-end:-7%;top:-12%;width:min(62vw,900px);height:125%;pointer-events:none;z-index:-1;color:var(--site-blue);opacity:.13;stroke:currentColor;stroke-width:1.5}
.brand-lines path {vector-effect:non-scaling-stroke}
[dir=rtl] .brand-lines {transform:scaleX(-1)}
.hero>.brand-lines {opacity:.2;stroke-width:2}
.hero__inner {padding-block:clamp(52px,6.5vw,96px)}
.pagehead {padding-block:40px clamp(56px,5.5vw,80px)}
.pagehead>.brand-lines {opacity:.18;width:55%;inset-inline-end:0}
.pagehead h1 {position:relative;padding-inline-start:24px;border-inline-start:3px solid var(--site-blue)}
.careers>.brand-lines {display:block;color:var(--site-white);opacity:.22;stroke-width:2;width:64%;top:0}
.careers__content {position:relative;z-index:1}
.careers__media {box-shadow:0 16px 40px -20px rgb(0 0 0 / .3)}
.sec-head {align-items:end}
.sec-head .arrowlink {padding-block:10px;border-bottom:1px solid var(--site-line)}
.defcard {border-top:2px solid var(--site-line);position:relative}
.defcard::after {content:'';position:absolute;top:-2px;inset-inline-start:0;width:36px;height:2px;background:var(--site-blue)}
.cards3 {counter-reset:service}
.pcard {counter-increment:service;box-shadow:var(--shadow-xs)}
.pcard::before {content:counter(service,decimal-leading-zero);position:absolute;inset-inline-start:34px;top:34px;z-index:1;font:11px/1 var(--font-mono);padding:7px;border-radius:var(--radius-sm);background:var(--site-paper);color:var(--site-blue);pointer-events:none}
.pcard__media {position:relative}
.ccard,.ncard {transition:border-color .25s,box-shadow .25s}
.ccard:focus-within,.ncard:focus-within {border-color:var(--site-blue)}
.ncard__media,.ccard__media,.feature__media,.proof__visual {isolation:isolate}
.ovsplit__aside {border-block-start:3px solid var(--site-blue);box-shadow:var(--shadow-sm)}
/* Partner cards: the hover the pre-redesign catalogue had, in v3 tokens. The
   type tag is a pill again and fills blue; the card tints, lifts and takes the
   blue border the other v3 cards use; the logo eases up slightly. The old 45%
   dimmed name is not restored: at rest it fell below 4.5:1 contrast.
   (This replaces a transition on `.logos--catalogue>a`, which matched nothing:
   the grid's children are divs.) */
.logos--catalogue>div {transition:background-color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.logos--catalogue .logos__tag {display:table;margin-inline:auto;margin-bottom:16px;padding:3px 10px;border:1px solid var(--site-line);border-radius:999px;transition:background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}
.logos--catalogue .logos__mark img {transition:transform .3s var(--ease)}
@media(hover:hover) {
  .logos--catalogue>div:is(:hover,:focus-within) {background:var(--site-soft);border-color:var(--site-blue);box-shadow:var(--site-shadow);transform:translateY(-3px)}
  .logos--catalogue>div:is(:hover,:focus-within) .logos__tag {background:var(--site-blue);border-color:var(--site-blue);color:#fff}
  .logos--catalogue>div:is(:hover,:focus-within) .logos__mark img {transform:scale(1.05)}
}
.form :is(input,textarea,select) {transition:border-color .2s,box-shadow .2s}
.form :is(input,textarea,select):focus {box-shadow:0 0 0 4px color-mix(in srgb,var(--site-blue) 12%,transparent)}
/* Visibility becomes immediate on open, including before keyboard focus moves. */
.mega.is-open,.searchlayer.is-open {transition:opacity .25s,transform .25s var(--ease);visibility:visible}
.megapanel__links a {position:relative;transition:color .2s,border-color .2s}
.megapanel__links a:focus-visible,.megapanel__links a:hover {border-color:var(--site-blue)}
@media(min-width:1000px) {
  .ovsplit__aside {position:sticky;top:130px}
}
@media(hover:hover) and (pointer:fine) {
  .ccard:hover,.ncard:hover {border-color:var(--site-blue)}
  .pcard:has(a):hover,.pcard:focus-within {box-shadow:var(--shadow-lg)}
}
@media(prefers-reduced-motion:no-preference) {
  .reveal.is-in {animation-delay:var(--reveal-delay,0ms)}
  .hero__actions {animation:brand-enter .6s var(--ease) both}
  .pagehead>.brand-lines {animation:brand-enter .6s var(--ease) both}
  .mega.is-open .mega__body {animation:brand-enter .4s .05s var(--ease) both}
  .megapanel.is-on {animation:brand-enter .3s var(--ease) both}
  .heroslides.is-enhanced .heroslide.is-on {animation:brand-enter .4s var(--ease) both}
  .reveal.is-in :is(.pcard__media,.ncard__media,.ccard__media) img {animation:brand-image .85s var(--ease) both}
  @media(hover:hover) and (pointer:fine) {
    .ncard__media img,.ccard__media img,.pcard__media img {transition:scale .65s var(--ease)}
    .ncard:is(:hover,:focus-within) .ncard__media img,.ccard:is(:hover,:focus-within) .ccard__media img,.pcard:is(:hover,:focus-within) .pcard__media img {scale:1.035}
  }
}
/* No `to` frame: each element animates to its OWN resting values. An explicit
   `to{opacity:1;transform:none}` held by fill-mode `both` overrode them — the
   page-header lines sat at full strength across long titles instead of .18,
   and lost their [dir=rtl] scaleX(-1) mirror on Arabic pages. */
@keyframes brand-enter {from{opacity:0;transform:translateY(12px)}}
@keyframes brand-image {from{transform:scale(1.035)}to{transform:none}}
@media(max-width:767px) {
  .hero__inner {padding-block:40px 48px}
  .hero>.brand-lines {width:100%;height:75%;top:25%;opacity:.12}
  .pagehead {padding-block:28px 48px}
  .pagehead h1 {padding-inline-start:16px}
  .pagehead>.brand-lines {width:80%;opacity:.1}
  .pcard::before {inset-inline-start:24px;top:24px}
}
@media(forced-colors:active) {.brand-lines{display:none}}
/* Service catalogue uses larger image-led cards; compact homepage summaries stay compact. */
@media(min-width:768px) {
  .section--service-catalogue .cards3 {grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .section--service-catalogue .pcard {display:flex;flex-direction:column;padding:0;overflow:hidden;gap:0}
  .section--service-catalogue .pcard__media {width:100%;aspect-ratio:16/10;border-radius:0;flex:none}
  .section--service-catalogue .pcard>:not(.pcard__media) {margin-inline:24px}
  .section--service-catalogue .pcard :is(h2,h3) {margin-top:24px;font-size:22px}
  .section--service-catalogue .pcard .arrowlink {margin-top:auto;margin-bottom:24px;align-self:stretch;padding-top:12px;border-top:1px solid var(--site-line)}
  .section--service-catalogue .pcard::before {top:16px;inset-inline-start:16px}
}
@media(min-width:768px) and (max-width:1100px) {
  .section--service-catalogue .cards3 {grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Native cross-document fades preserve browser navigation, history and focus.
   Unsupported browsers keep their ordinary navigation with no polyfill. */
@view-transition {navigation:auto}
::view-transition-old(root),::view-transition-new(root) {animation-duration:140ms}
@media(prefers-reduced-motion:reduce) {
  @view-transition {navigation:none}
  ::view-transition-old(root),::view-transition-new(root) {animation:none}
}
/* Three-line depth follows only the first viewport of a deliberate scroll.
   The static composition is the fallback; no scroll listener or animation loop. */
@supports(animation-timeline:scroll()) {
  @media(min-width:1000px) and (prefers-reduced-motion:no-preference) {
    .hero>.brand-lines {animation:brand-depth linear both;animation-timeline:scroll(root block);animation-range:0px 700px}
  }
}
@keyframes brand-depth {to{translate:0 48px}}
@media(min-width:1101px) {
  .section--service-catalogue .pcard:last-child:nth-child(3n + 1) {grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto}
  .section--service-catalogue .pcard:last-child:nth-child(3n + 1) .pcard__media {grid-column:1;grid-row:1/4;height:100%;min-height:240px;aspect-ratio:auto}
  .section--service-catalogue .pcard:last-child:nth-child(3n + 1)>:not(.pcard__media) {grid-column:2;margin-inline:32px}
}

/* ---------------------------------------------------------------------------
   Legal pages and careers (components/PageExtras.tsx)
   Built only from existing tokens: --site-soft/-paper/-line surfaces, the
   site radius, the prose measure and the kicker/h2 styles already in use.
   ------------------------------------------------------------------------ */

/* Legal page still marked placeholder in the CMS. */
.legal-pending__panel {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(28px,4vw,48px);
  /* Paper, not soft: muted body text and the blue link fall just under 4.5:1
     on the soft grey (4.35 / 4.43), and pass on paper like the rest of the site. */
  background: var(--site-paper);
  border: 1px solid var(--site-line);
  border-top: 3px solid var(--site-blue);
  border-radius: var(--site-radius);
  box-shadow: var(--shadow-xs);
}
.legal-pending__title {
  font-size: clamp(22px,2.2vw,28px);
  margin-bottom: 14px;
}
.legal-pending__panel p {
  font-size: 17px;
  line-height: 1.8;
}
.legal-pending__actions,
.careers-openings__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 28px;
}
.legal-pending__mail {
  color: var(--site-link-ink,var(--site-blue));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Published legal text: one readable column, numbered headings, contents. */
.legal-doc {
  counter-reset: legal;
  padding-block: clamp(40px,5vw,64px) clamp(40px,5vw,72px);
}
/* One column for everything: the date, the contents and every section's
   heading and text share one measure. A fixed rem, not `ch`: `ch` scales with
   each element's own font size, so a 28px heading, 18px prose and a 16px
   contents box each got a different width and three different left edges. */
.legal-doc {
  --legal-measure: 46rem;
}
.legal-doc__meta,
.legal-doc .legal-doc__part .section .wrap > *,
.legal-doc .legal-doc__part .prose {
  max-width: var(--legal-measure);
  margin-inline: auto;
}
.legal-doc__updated {
  font-size: 14px;
  margin-bottom: 28px;
}
.legal-doc__toc {
  padding: 24px 28px;
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  margin-bottom: 12px;
}
.legal-doc__toc ol {
  list-style: decimal;
  padding-inline-start: 1.4em;
  columns: 2 18ch;
  column-gap: 40px;
}
.legal-doc__toc li {
  break-inside: avoid;
  padding-block: 4px;
}
.legal-doc__toc a {
  color: var(--site-link-ink,var(--site-blue));
}
.legal-doc__part .section {
  padding-block: clamp(20px,3vw,36px);
}
.legal-doc__part .h2 {
  font-size: clamp(22px,2.2vw,28px);
  margin-bottom: 14px;
}
.legal-doc__part .h2::before {
  counter-increment: legal;
  content: counter(legal) ". ";
  color: var(--site-blue);
}
.legal-doc__part {
  scroll-margin-top: 110px;
}

/* Careers: values and pillars reuse the About/home lists; the openings panel. */
.careers-values .h2,
.careers-areas .h2 {
  margin-bottom: clamp(28px,3vw,44px);
}
.careers-openings__panel {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(28px,4vw,48px);
  background: var(--site-paper);
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  text-align: center;
}
.careers-openings__panel .h2 {
  font-size: clamp(24px,2.6vw,34px);
  margin-bottom: 16px;
}
.careers-openings__none {
  color: var(--site-ink);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}
.careers-openings__actions {
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Compact footer. The footer had grown well past the earlier version (627px
   against 547 at 1440; 1308 against 1019 on a phone) through looser spacing,
   a larger logo and 32px link rows. Back to the earlier density, same design:
   28px link rows (above the 24px target minimum), smaller logo, tighter gaps,
   the address and "Established" badge on one line, and on phones the company
   and legal lists side by side above the services. Appended last so it wins
   over the responsive footer rules above. */
.socialstrip {padding-block:18px}
.ftr {padding-top:32px}
@media(min-width:768px) {.ftr {padding-bottom:60px}}
.ftr__grid {gap:24px 48px}
.ftr__logo {width:84px;height:72px;margin-bottom:14px}
.ftr__title {margin-bottom:8px}
.ftr__grid ul,.ftr__grid>div:nth-child(2) ul {row-gap:0}
.ftr__grid li a {min-height:28px;padding-block:3px}
.ftr__bar {margin-top:24px;padding-top:18px;align-items:center}
.ftr__bar .a11y {max-width:none}
.ftr__bar .pill {display:inline-block;margin:0;margin-inline-start:10px;vertical-align:middle}
@media(max-width:999px) {
  .ftr__grid {gap:20px 32px}
  .ftr__grid>div:last-child ul {row-gap:0}
}
@media(max-width:767px) {
  .ftr__bar {gap:10px}
  .ftr__bar .pill {display:block;width:fit-content;margin:8px 0 0}
}
@media(max-width:480px) {
  .ftr__grid {grid-template-columns:1fr 1fr;gap:20px}
  .ftr__grid>div:nth-child(2) {grid-column:1/-1;order:1}
  /* Legal sits beside the company column; the padding lines its heading up
     with the company heading under the logo. */
  .ftr__grid>div:last-child {grid-column:auto;padding-top:86px}
  .ftr__grid>div:last-child ul {display:grid;gap:0}
  .ftr__logo {width:84px;height:72px}
}

/* ===========================================================================
   Premium pass — motion, interaction and the header over the film.
   Everything here moves only transform, opacity or clip-path, plays once
   (nothing loops), and lives inside prefers-reduced-motion: no-preference;
   hover effects only exist where a pointer can hover.
   =========================================================================== */

/* Content already on screen when main.js runs keeps still (see main.js). */
.reveal.is-instant {animation: none !important}

/* --- Header over the film -------------------------------------------------
   On a page that opens with the film, the header starts transparent over it
   and turns solid (with its shadow) as soon as the page scrolls — the same
   is-scrolled flag main.js already sets. The film slides up underneath by the
   header's height so the picture reaches the very top of the screen. */
@media(max-width:999px) {:root {--hdr-h: 76px}}
@media(max-width:480px) {:root {--hdr-h: 72px}}
.hdr {transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease)}
main>.hero--film:first-child {margin-top: calc(-1 * var(--hdr-h)); min-height: 100svh}
main>.hero--film:first-child .film-content {min-height: 100svh; padding-top: calc(var(--hdr-h) + clamp(40px,8vh,110px)); padding-bottom: 76px}
/* (76px: the fixed theme toggle sits 18px from the bottom and is ~38px tall;
   the film's bottom row — capabilities, pause — now clears it in both
   directions instead of running underneath it in Arabic.) */
/* A soft top shade so the header's white text always has a dark ground. */
main>.hero--film:first-child .film-backdrop::before {content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--hdr-h) * 2.2); z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / .55), transparent); pointer-events: none}
/* Dark glass rather than fully transparent: the header's white text then has
   a guaranteed dark ground of its own (>= 4.5:1 even before the film or its
   poster paints), and the picture still shows through. */
html:has(main>.hero--film:first-child) .hdr:not(.is-scrolled) {background: rgb(8 12 20 / .6); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-bottom-color: rgb(255 255 255 / .12); box-shadow: none}
html:has(main>.hero--film:first-child) .hdr:not(.is-scrolled) :is(.utility__inner>a:not([href$="/contact"]), .langmenu summary, .hdr__search, .hdr__burger, .hdr__wordmark-name, .hdr__wordmark-tag) {color: #fff}
html:has(main>.hero--film:first-child) .hdr:not(.is-scrolled) .utility__inner>a::after {background: #fff}
html:has(main>.hero--film:first-child) .hdr:not(.is-scrolled) .hdr__burger {border-color: rgb(255 255 255 / .4)}
html:has(main>.hero--film:first-child) .hdr:not(.is-scrolled) :is(.hdr__burger, .hdr__search):hover {background: rgb(255 255 255 / .14)}
.utility__inner>a, .langmenu summary, .hdr__search, .hdr__burger, .hdr__wordmark-name {transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease)}

/* --- Small controls that had no hover --------------------------------------- */
.socialstrip a {transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease)}
.tl-theme, .film-toggle, .logos__pause, .mega__close {transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease)}
@media(hover:hover) {
  .socialstrip a:hover {background: var(--site-blue); border-color: var(--site-blue); color: var(--site-on-blue); transform: translateY(-3px)}
  .tl-theme:hover {border-color: var(--site-blue); transform: translateY(-2px)}
  .film-toggle:hover {background: rgb(255 255 255 / .16); border-color: #fff}
  .logos__pause:hover {color: var(--site-ink)}
  .mega__close:hover {background: var(--site-soft)}
}

/* --- Footer and navigation links: an underline that draws in ---------------
   Only on link lists (footer, mega menu), where links are already identified
   by position; links inside running text keep their permanent underline. */
.ftr__grid li a, .megapanel__links a {background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease)}
[dir=rtl] :is(.ftr__grid li a, .megapanel__links a) {background-position: 100% 100%}
@media(hover:hover) {
  .ftr a:hover {text-decoration: none}
  :is(.ftr__grid li a, .megapanel__links a):hover {background-size: 100% 1px}
}

/* --- Arrows that move with their card -------------------------------------- */
@media(hover:hover) {
  .ncard:is(:hover,:focus-within) .ncard__more svg, .megatab:hover svg, .megalink:hover svg {transform: translateX(4px)}
  [dir=rtl] :is(.ncard:is(:hover,:focus-within) .ncard__more svg, .megatab:hover svg, .megalink:hover svg) {transform: scaleX(-1) translateX(4px)}
}

/* --- Language menu ---------------------------------------------------------- */
.langmenu__chev {transition: transform var(--dur-2) var(--ease)}
.langmenu[open] .langmenu__chev {transform: rotate(180deg)}

/* --- Numbered definition cards: the blue accent widens on hover ------------ */
.defcard::after {transition: width var(--dur-3) var(--ease-out)}
@media(hover:hover) {.defcard:hover::after {width: 100%}}

/* --- Dark mode: the dark band was nearly the page colour (.205 vs .145) ---- */
html.dark .section--navy {background: oklch(0.235 0.022 243.962); border-block: 1px solid rgb(255 255 255 / .06)}

@media(prefers-reduced-motion:no-preference) {
  /* Film hero: the message arrives in sequence on first paint (CSS only, so it
     starts with the page rather than waiting for a script). */
  .hero--film .film-message>*, .hero--film .film-foot {animation: hero-rise .9s var(--ease-out) both}
  .hero--film .film-message>:nth-child(2) {animation-delay: .08s}
  .hero--film .film-message>:nth-child(3) {animation-delay: .2s}
  .hero--film .film-message>:nth-child(4) {animation-delay: .32s}
  .hero--film .film-foot {animation-delay: .5s}

  /* Page headers: breadcrumbs and title rise in; the three brand lines draw
     across (a wipe, so the Arabic mirror wipes from the other side). */
  .pagehead .crumbs, .pagehead h1 {animation: hero-rise .8s var(--ease-out) both}
  .pagehead h1 {animation-delay: .08s}
  .pagehead>.brand-lines {animation: line-wipe 1.6s var(--ease-out) .15s both}

  /* Section kicker: its short rule draws in as the kicker arrives. */
  .kicker.reveal.is-in:not(.is-instant)::before {animation: rule-grow .7s var(--ease-out) .12s both}
  .kicker::before {transform-origin: left center}
  [dir=rtl] .kicker::before {transform-origin: right center}

  /* Key figures: each figure in turn (main.js counts the numbers up). */
  .figures.reveal.is-in:not(.is-instant) {animation: none}
  .figures.reveal.is-in:not(.is-instant)>div {animation: hero-rise .8s var(--ease-out) both}
  .figures.reveal.is-in:not(.is-instant)>div:nth-child(2) {animation-delay: .08s}
  .figures.reveal.is-in:not(.is-instant)>div:nth-child(3) {animation-delay: .16s}
  .figures.reveal.is-in:not(.is-instant)>div:nth-child(4) {animation-delay: .24s}

  /* Definition cards: the accent rule grows in after the card. */
  .defcard.reveal.is-in:not(.is-instant)::after {animation: rule-grow .8s var(--ease-out) .25s both}
  .defcard::after {transform-origin: left center}
  [dir=rtl] .defcard::after {transform-origin: right center}

  /* Closing band photo: unveiled edge to edge, settling from a slight zoom. */
  .careers__media.reveal.is-in:not(.is-instant) {animation: clip-reveal 1.1s var(--ease-out) both}
  .careers__media.reveal.is-in:not(.is-instant) img {animation: settle 1.4s var(--ease-out) both}

  /* Mega menu: the open panel's links arrive in a short cascade. */
  .mega.is-open .megapanel.is-on .megapanel__links>* {animation: brand-enter .45s var(--ease-out) both}
  .mega.is-open .megapanel.is-on .megapanel__links>:nth-child(2) {animation-delay: .03s}
  .mega.is-open .megapanel.is-on .megapanel__links>:nth-child(3) {animation-delay: .06s}
  .mega.is-open .megapanel.is-on .megapanel__links>:nth-child(4) {animation-delay: .09s}
  .mega.is-open .megapanel.is-on .megapanel__links>:nth-child(5) {animation-delay: .12s}
  .mega.is-open .megapanel.is-on .megapanel__links>:nth-child(n+6) {animation-delay: .15s}

  /* Language list opens with the same small rise as the other overlays. */
  .langmenu[open] .langmenu__list {animation: brand-enter .25s var(--ease-out) both}
}
@keyframes hero-rise {from {opacity: 0; transform: translateY(24px)}}
@keyframes line-wipe {from {clip-path: inset(0 100% 0 0)} to {clip-path: inset(0 0 0 0)}}
@keyframes rule-grow {from {transform: scaleX(0)}}
@keyframes clip-reveal {from {clip-path: inset(0 0 0 100% round var(--radius-xl))} to {clip-path: inset(0 0 0 0 round var(--radius-xl))}}
@keyframes settle {from {transform: scale(1.12)}}

/* --- Layout refinements ------------------------------------------------------ */
/* Tablet and small laptop: the group cards go two-up, where a 4:3 photo stood
   about 600px tall per card. A wider crop keeps the section in proportion. */
@media(min-width:768px) and (max-width:1190px) {
  .ccard__media {aspect-ratio: 16/10}
}
/* Phones: the hero paragraph ran to ten lines at 1.75; tighter leading keeps
   the call to action within the first screen. */
@media(max-width:767px) {
  .hero--film .film-body {line-height: 1.6}
}