/* Brand palette, sampled from the company logo.
 *
 * The logo is deep royal blue with a bright orange gear ring — a fire-safety mark, not the
 * green the site previously used. Colours here are the measured averages from the artwork:
 * blue #0a3e9b, orange #ef5409.
 *
 * --steel / --steel-2  deep navy drawn down from the brand blue, for dark surfaces
 * --blue               the brand blue itself. It carries body-weight text in several
 *                      places and sits at 9.6:1 on white, so it is safe there.
 * --amber              the brand orange. 3.5:1 on white, so it is used for fills,
 *                      indicators and rules — never for small text on a light ground.
 * --accent-on-dark     a lifted orange for text over the navy surfaces, where the brand
 *                      orange alone would only reach 3.9:1.
 *
 * NOTE: rgba() literals further down encode these same colours componentwise. Grep
 * rgba(11, 44, 102 / rgba(7, 29, 71 / rgba(10, 62, 155 / rgba(239, 84, 9 before editing.
 */
:root {
  --ink: #0d1017;
  --muted: #5b6475;
  --line: #d9dee8;
  --paper: #f4f6fa;
  --white: #ffffff;
  --steel: #0b2c66;
  --steel-2: #071d47;
  --blue: #0a3e9b;
  --amber: #ef5409;
  --copper: #c2410c;
  /* Accent used as small text. The brand orange is 3.5:1 on white, below AA, so label
     text uses this deeper orange (5.2:1) and dark sections lift it back up. */
  --accent-text: #c2410c;
  --green: #4a5568;
  --radius: 8px;
  --shadow: 0 24px 80px rgba(11, 44, 102, 0.18);
  --font-body: "Segoe UI", "Aptos", Arial, sans-serif;
  --font-display: "Segoe UI", "Aptos Display", Arial, sans-serif;
  --container: 1360px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  --footer-offset: 104%;
  --footer-opacity: 0;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body.is-loading {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
}

/* Fixed, not var(--ink): dark sections re-point --ink to white for body text
   (see .page-section--dark below), but white-on-amber selection is ~3.6:1,
   below AA. Selection contrast against amber must stay dark-on-orange
   regardless of the section's theme. */
::selection {
  color: #0d1017;
  background: var(--amber);
}

.scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 120;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--blue));
  box-shadow: 0 0 18px rgba(239, 84, 9, 0.32);
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  color: var(--white);
  background:
    radial-gradient(circle at 52% 45%, rgba(239, 84, 9, 0.24), transparent 22rem),
    linear-gradient(135deg, var(--steel-2), var(--steel));
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

.preloader__mark {
  width: min(78vw, 400px);
  min-height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: markPulse 1.8s ease-in-out infinite;
}

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

.preloader__bottom {
  position: absolute;
  right: 4vw;
  bottom: 4vw;
  left: 4vw;
  height: 2px;
}

.preloader__bottom::before,
.preloader__bottom::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
}

.preloader__bottom::before {
  background: rgba(255, 255, 255, 0.18);
}

.preloader__bottom::after {
  background: linear-gradient(90deg, var(--amber), rgba(255, 255, 255, 0.9));
  box-shadow: 0 0 26px rgba(239, 84, 9, 0.42);
  transform: scaleX(var(--loader-progress, 0));
  transform-origin: left center;
  transition: transform 0.18s ease;
}

.site-header {
  position: fixed;
  top: 28px;
  right: 24px;
  left: 24px;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 18px;
  color: var(--white);
  transition: color 0.3s ease, transform 0.34s ease, opacity 0.34s ease;
}

.site-header.is-hidden {
  opacity: 0;
  transform: translateY(calc(-100% - 42px));
}

.site-header.is-scrolled {
  color: var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
}

.site-header .brand {
  padding: 9px 14px;
  margin: -9px 0 -9px -4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Over a dark hero the plate stays white — the mark is navy, so a dark plate would swallow
   half of it. Only the shadow deepens, to lift the plate off the photo. */
.site-header.is-over-dark .brand {
  color: var(--white);
}

.site-header.is-over-dark .brand__logo {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.site-header.is-over-dark .brand__text small {
  opacity: 0.92;
}

.brand__text {
  display: grid;
  line-height: 1;
}

.brand__text strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0;
}

.brand__text small {
  max-width: 12rem;
  margin-top: 4px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  opacity: 0.78;
}

/* Header navigation.
 *
 * Squared rather than pill-shaped, ruled with hairlines rather than floated on a soft
 * shadow, and marking the current page with a lit indicator instead of a filled lozenge.
 * The reference is the client's own equipment: engraved panel labels and switchgear status
 * lamps are rectangular, precisely divided, and show state with a light rather than by
 * swapping the label's colour. A fully-rounded pill with a coloured blob reads like a
 * consumer app and says nothing about industrial engineering.
 *
 * No overflow:hidden here — the dropdown menus are absolutely positioned inside this
 * element and clipping the container would hide them.
 */
.nav-pill {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid rgba(11, 44, 102, 0.16);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(13, 16, 23, 0.06),
    0 10px 26px rgba(13, 16, 23, 0.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Segment rules between items, like the divisions on a labelled panel. */
.nav-pill > * + * {
  border-left: 1px solid rgba(11, 44, 102, 0.11);
}

.nav-pill a,
.nav-dropdown__trigger {
  position: relative;
  padding: 16px 19px;
  border-radius: 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-pill a:hover,
.nav-dropdown.is-open .nav-dropdown__trigger,
.nav-dropdown__trigger:hover {
  color: var(--steel);
  background: rgba(11, 44, 102, 0.07);
}

.nav-pill a[aria-current="page"],
.nav-dropdown.is-current .nav-dropdown__trigger {
  color: var(--steel);
  background: rgba(11, 44, 102, 0.05);
}

/* The indicator lamp. Amber is already the palette's signal colour, so the current page is
   marked the same way a live circuit is. */
.nav-pill a[aria-current="page"]::before,
.nav-dropdown.is-current .nav-dropdown__trigger::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--amber);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.nav-dropdown__trigger svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
}

.nav-dropdown.is-open .nav-dropdown__trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  z-index: 70;
  display: grid;
  gap: 12px;
  /*
   * width: max-content is doing real work here, not tidying.
   *
   * .nav-dropdown is the containing block and is only as wide as its trigger, so an
   * absolutely positioned panel with left: 50% and width: auto gets sized by CSS
   * shrink-to-fit: min(max(min-content, available), max-content), where available is
   * the containing block minus the 50% offset — about 95px. That collapses onto the
   * min-width floor below, and "Konstruksi Gedung Perbelanjaan" was clipped by 20px
   * inside a 232px content box. max-content sizes the panel to its longest label
   * instead, and the max-width cap plus --nav-shift keep it on screen.
   */
  width: max-content;
  min-width: 270px;
  max-width: min(92vw, 24rem);
  padding: 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(11, 44, 102, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(-50% + var(--nav-shift, 0px))) translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  visibility: hidden;
  backdrop-filter: blur(18px);
}

.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(calc(-50% + var(--nav-shift, 0px))) translateY(0);
  visibility: visible;
}

.nav-dropdown__menu a {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: left;
  font-weight: 600;
  overflow-wrap: break-word;
}

.nav-dropdown__menu a:hover {
  color: var(--blue);
  background: #edf1f8;
}

.nav-dropdown__menu a[aria-current="page"] {
  color: var(--steel);
  background: #e7edf8;
}

.header-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Two-position selector, like a labelled switch: one hard divider, the live side filled. */
.language-switcher {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(11, 44, 102, 0.16);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(13, 16, 23, 0.06);
}

.language-switcher button {
  min-width: 42px;
  min-height: 44px;
  padding: 8px 10px;
  color: inherit;
  background: transparent;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.language-switcher button + button {
  border-left: 1px solid rgba(11, 44, 102, 0.14);
}

.language-switcher button.is-active {
  color: var(--white);
  background: var(--steel);
}

.language-switcher--mobile {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 8px 8px 14px;
  box-shadow: none;
}

.language-switcher--mobile button {
  flex: 1;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 19px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(11, 44, 102, 0.16);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(13, 16, 23, 0.06), 0 10px 26px rgba(13, 16, 23, 0.08);
}

.header-cta span {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--amber);
}

.menu-toggle {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(11, 44, 102, 0.16);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(13, 16, 23, 0.06), 0 10px 26px rgba(13, 16, 23, 0.08);
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.menu-toggle:hover,
.site-header.is-menu-open .menu-toggle {
  color: var(--white);
  background: var(--steel);
}

.menu-toggle svg,
.button svg,
.rail-controls svg,
.contact-card svg,
.contact-form button svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.mobile-menu {
  position: fixed;
  top: 88px;
  right: 24px;
  left: auto;
  z-index: 58;
  display: none;
  width: min(360px, calc(100vw - 36px));
  max-height: calc(100svh - 110px);
  padding: 12px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(11, 44, 102, 0.1);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.mobile-menu.is-open {
  display: grid;
}

.mobile-menu a {
  padding: 16px;
  border-radius: 6px;
  font-weight: 700;
}

.mobile-menu a:hover,
.mobile-menu a[aria-current="page"] {
  background: #ecf0f8;
}

.mobile-menu a[aria-current="page"] {
  color: var(--blue);
}

.mobile-menu__label {
  margin: 10px 8px 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 150px 24px 54px;
  color: var(--white);
  overflow: hidden;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.hero__media,
.hero__shade {
  position: absolute;
  inset: 0;
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s ease, transform 5s ease;
}

.hero__media img.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero__shade {
  background:
    linear-gradient(90deg, rgba(5, 16, 40, 0.82), rgba(5, 16, 40, 0.28) 55%, rgba(5, 16, 40, 0.58)),
    linear-gradient(0deg, rgba(5, 16, 40, 0.8), rgba(5, 16, 40, 0.03) 42%);
}

.hero__content{
  position: relative;
  z-index: 2;
}

.hero__content {
  max-width: 920px;
}

/*
 * The hidden attribute has to win over any display rule set elsewhere. .detail-list li is
 * display: grid, which beats the UA stylesheet's [hidden] { display: none } — so an unused
 * optional slot stayed on the page as an empty bullet.
 */
/*
 * A list is fetching. It keeps whatever it already shows — the hand-written fallback, or the
 * previous language's cards — and just dims, so a slow or failed request never trades real
 * content for a spinner.
 */
[aria-busy="true"] {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  [aria-busy="true"] {
    transition: none;
  }
}

[hidden] {
  display: none !important;
}

.eyebrow,
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 28px;
  color: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.eyebrow::before,
.section-label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
}

.split-title,
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

.split-title {
  max-width: 940px;
  font-size: clamp(3.4rem, 6.15vw, 6.55rem);
  line-height: 0.98;
}

.split-title .word {
  display: inline-block;
  overflow: hidden;
  margin-right: 0;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.split-title .char {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.is-ready .split-title .char {
  transform: translateY(0);
}

.hero__copy {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.62;
}

.section {
  scroll-margin-top: 110px;
  padding: 108px 24px;
}

.hero {
  scroll-margin-top: 0;
}

.about,
.industries,
.services,
.systems,
.brochure,
.partners,
.insights,
.contact {
  position: relative;
}

.section-label {
  color: var(--muted);
}

.section-head,
.systems__layout,
.contact__head,
.partners__intro {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 36px;
  max-width: var(--container);
  margin: 0 auto 58px;
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
  gap: 56px;
  max-width: var(--container);
  margin: 0 auto 58px;
}

.section-title {
  max-width: 820px;
  font-size: clamp(2.35rem, 4.55vw, 5.05rem);
  line-height: 1.02;
}

/*
 * Revision 3 replaced the short about headline with a full sentence describing the company.
 * At the display size above a 30-plus word sentence swamps the section, so a statement
 * heading steps down to a readable size and opens the line height back up.
 */
.section-title--statement {
  font-size: clamp(1.5rem, 2.35vw, 2.4rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.section-copy {
  max-width: 520px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 50px;
  margin-top: 34px;
  padding: 15px 22px;
  color: var(--white);
  background: var(--amber);
  border-radius: 3px;
  /* White on the brand orange is 3.53:1. That clears AA for large text, which at bold
     starts at 18.66px, so the label is set at 1.18rem/800 rather than being shrunk into
     the range where 4.5:1 would be required. The hover darkens to 4.30:1. */
  font-size: 1.18rem;
  font-weight: 800;
  transition: transform 0.2s ease, background 0.2s ease;
}

.button:hover {
  background: #d94806;
  transform: translateY(-1px);
}

.button:hover {
  background: var(--blue);
  transform: translateY(-2px);
}

.button--light {
  color: var(--steel);
  background: var(--white);
}

.button--light:hover {
  color: var(--white);
}

.about__card {
  align-self: start;
  display: grid;
  gap: 22px;
}

.about__card img {
  width: 100%;
  aspect-ratio: 1.28;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.about__card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--container);
  margin: 72px auto 0;
}

.value-grid article {
  min-height: 440px;
}

.value-grid img {
  width: 100%;
  aspect-ratio: 1.55;
  object-fit: cover;
  border-radius: var(--radius);
}

.value-grid h3,
.service-card h3,
.systems__steps h3,
.news-rail h3 {
  margin: 28px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.85vw, 2rem);
  line-height: 1.16;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.value-grid p,
.service-card p,
.systems__steps p,
.news-rail p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.68;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.industry-board {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 12px;
  max-width: var(--container);
  margin: 0 auto;
}

.industry-board__image {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--steel);
}

.industry-board__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transform: scale(1.02);
  transition: opacity 0.35s ease, transform 0.8s ease;
}

.industry-board__caption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: grid;
  gap: 8px;
  padding: 20px;
  color: var(--white);
  background: rgba(7, 29, 71, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
}

.industry-board__caption span {
  color: var(--accent-text);
  font-size: 0.83rem;
  font-weight: 800;
  text-transform: uppercase;
}

.industry-board__caption strong {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
}

.industry-tabs {
  display: grid;
  gap: 12px;
}

.industry-tabs button {
  min-height: 92px;
  padding: 24px 28px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.08);
  border-radius: var(--radius);
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.7vw, 1.72rem);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.industry-tabs button:hover {
  transform: translateX(5px);
}

.industry-tabs button.is-active {
  color: var(--white);
  background: var(--steel);
}

.rail-shell,
.news-rail,
.brochure__grid {
  max-width: var(--container);
  margin: 0 auto;
}

.service-rail {
  display: grid;
  grid-auto-columns: minmax(320px, 500px);
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.service-rail::-webkit-scrollbar,
.news-rail::-webkit-scrollbar {
  display: none;
}

.service-card {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.08);
  border-radius: var(--radius);
  scroll-snap-align: start;
}

.service-card span {
  color: var(--accent-text);
  font-weight: 900;
}

.service-card--solid {
  color: var(--white);
  background:
    radial-gradient(circle at 70% 20%, rgba(239, 84, 9, 0.32), transparent 18rem),
    var(--steel);
}

.service-card--solid p {
  color: rgba(255, 255, 255, 0.88);
}

.service-card--solid .service-card__link {
  color: var(--white);
}

.service-card--image {
  padding: 0;
}

.service-card--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rail-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  margin-bottom: 28px;
}

.rail-progress {
  height: 5px;
  overflow: hidden;
  background: #d9e0ee;
  border-radius: 999px;
}

.rail-progress span {
  display: block;
  width: 12%;
  height: 100%;
  background: var(--steel);
  border-radius: inherit;
  transition: width 0.2s ease;
}

.rail-controls div:last-child {
  display: inline-flex;
  gap: 10px;
}

.rail-controls button {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--steel);
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.1);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.rail-controls button:hover {
  color: var(--white);
  background: var(--steel);
  transform: translateY(-2px);
}

.systems {
  color: var(--white);
  /* Raised from 0.86/0.90 for the same reason as .page-section--dark. */
  background:
    linear-gradient(rgba(7, 29, 71, 0.91), rgba(7, 29, 71, 0.94)),
    var(--bg-systems, none) center / cover fixed;
}

.systems .section-label,
.systems .section-copy {
  color: rgba(255, 255, 255, 0.88);
}

.systems__layout {
  margin-bottom: 0;
}

.systems__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.systems__steps--carousel {
  display: block;
  min-width: 0;
}

.systems__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.systems__rail::-webkit-scrollbar {
  display: none;
}

.systems__rail article {
  scroll-snap-align: start;
}

.systems .rail-progress {
  background: rgba(255, 255, 255, 0.22);
}

.systems .rail-progress span {
  background: var(--accent-text);
}

.systems .rail-controls button:disabled {
  opacity: 0.45;
  cursor: default;
}

.systems .rail-controls button:disabled:hover {
  color: var(--steel);
  background: var(--white);
  transform: none;
}

.systems .rail-controls button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .systems__rail { grid-auto-columns: calc((100% - 16px) / 2); }
}

@media (max-width: 600px) {
  .systems__rail { grid-auto-columns: 100%; }
}

.systems__steps article {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.systems__steps span {
  color: var(--accent-text);
  font-weight: 900;
}

.systems__steps p {
  color: rgba(255, 255, 255, 0.88);
}

.brochure__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.6fr);
  gap: 16px;
}

.brochure__panel {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px;
  color: var(--white);
  background:
    radial-gradient(circle at 80% 18%, rgba(239, 84, 9, 0.38), transparent 16rem),
    var(--blue);
  border-radius: var(--radius);
}

.brochure__panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.25vw, 3.55rem);
  line-height: 1.04;
}

.brochure__panel p {
  max-width: 500px;
  margin: 28px 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
}

.brochure__media {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border-radius: var(--radius);
}

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

.brochure__media div {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  max-width: 470px;
}

.brochure__media span {
  padding: 12px 18px;
  color: var(--steel);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 6px;
  font-weight: 800;
}

.partners {
  padding-top: 90px;
}

.partners__intro {
  margin-bottom: 48px;
}

.news-rail {
  display: grid;
  grid-auto-columns: minmax(320px, 1fr);
  grid-auto-flow: column;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.news-rail article {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.1);
  border-radius: var(--radius);
  scroll-snap-align: start;
}

.news-rail span {
  color: var(--blue);
  font-weight: 900;
}

.contact__head {
  margin-bottom: 56px;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) 1.6fr;
  gap: 28px;
  max-width: var(--container);
  margin: 0 auto;
}

.contact-card,
.contact-form {
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.08);
  border-radius: var(--radius);
}

.contact-card {
  padding: 34px;
}

.contact-card h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.15;
}

.contact-card p {
  margin: 0 0 34px;
  color: var(--muted);
  line-height: 1.7;
}

.contact-card a,
.contact-card__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  color: var(--steel);
  font-weight: 700;
  line-height: 1.45;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 22px;
  padding: 34px;
}

.contact-form label {
  display: grid;
  gap: 12px;
  color: var(--ink);
  font-weight: 800;
}

.contact-form__wide {
  grid-column: 1 / -1;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #bcc6d8;
  padding: 14px 0;
  color: var(--ink);
  background: transparent;
  outline: 0;
  transition: border-color 0.2s ease;
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--blue);
}

.contact-form button {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-height: 54px;
  padding: 15px 20px;
  color: var(--white);
  background: var(--steel);
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact-form button:hover {
  background: var(--blue);
  transform: translateY(-2px);
}

.page-hero {
  position: relative;
  /* Full viewport height, matching the homepage .hero, so every page opens the same way.
     svh rather than vh: on mobile, vh is measured against the *largest* viewport, so a
     100vh hero sits taller than the screen until the browser chrome retracts, pushing the
     heading out of sight on load. svh uses the smallest viewport and never overflows. */
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 170px 24px 82px;
  overflow: hidden;
  color: var(--white);
  background: var(--steel);
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.page-hero__media,
.page-hero__media::after,
.page-hero__media img {
  position: absolute;
  inset: 0;
}

.page-hero__media::after {
  content: "";
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 20, 50, 0.84), rgba(5, 20, 50, 0.28) 55%, rgba(5, 20, 50, 0.72)),
    linear-gradient(0deg, rgba(5, 20, 50, 0.82), rgba(5, 20, 50, 0.08) 48%);
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--container));
  margin: 0 auto;
}

.page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.page-title {
  max-width: 900px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.2vw, 6.4rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0;
}

.page-copy {
  max-width: 640px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.90);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.68;
}

.page-section {
  padding: 96px 24px;
}

.page-section--dark {
  color: var(--white);
  /* Overlay raised from 0.88/0.92. The control-panel photo has bright dials and labels, and
     at the old opacity they read straight through the text — contrast varied across the same
     paragraph depending on what was behind each word. The photo is still legible. */
  background:
    linear-gradient(rgba(7, 29, 71, 0.93), rgba(7, 29, 71, 0.96)),
    var(--bg-dark-section, none) center / cover fixed;
}

/* Dark contexts re-point the colour tokens instead of restating every child selector.
 *
 * --muted (#5b6475) and --ink are chosen for light backgrounds. A component that sets its
 * own colour from them overrides the section's inherited white and lands dark-on-dark:
 * .timeline p was rendering at 2.8:1 and its 01/02/03 markers at 2.8:1, both far under the
 * 4.5:1 minimum, which is what made the numbered steps look washed out.
 *
 * Listing every affected child was the old approach and it silently missed .timeline —
 * and would miss the next component added here too. Re-pointing the tokens fixes every
 * current and future descendant at once. Safe because --ink and --muted are only ever used
 * as `color`, and --line only as a border, never as a background.
 */
.page-section--dark,
.systems,
.footer-stage,
.page-cta {
  --ink: var(--white);
  --muted: rgba(255, 255, 255, 0.88);
  --line: rgba(255, 255, 255, 0.22);
  /* Light accents for text over navy. --blue is not re-pointed because it is also a button
     background in these sections, and the brand orange only reaches 3.9:1 here. */
  --accent-on-dark: #ff8a4c;
  --accent-text: #ff8a4c;
}

.page-section--dark .section-label,
.page-section--dark .section-copy,
.page-section--dark .info-card p,
.page-section--dark .detail-list li {
  color: rgba(255, 255, 255, 0.88);
}

/* Detail-list card appearance — dark sections use light translucent borders,
 * italic text for the editorial tone visible in the reference screenshots. */
.page-section--dark .detail-list {
  border-color: rgba(255, 255, 255, 0.12);
}

.page-section--dark .detail-list li {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  font-style: italic;
}

/* 01 / 02 / 03 step markers: var(--blue) on a dark ground is 2.8:1. */
.page-section--dark .timeline span,
.systems .timeline span,
.page-section--dark .case-card span,
.page-section--dark .process-card span,
.page-section--dark .role-card span {
  color: var(--accent-on-dark);
}

.content-shell {
  width: min(100%, var(--container));
  margin: 0 auto;
}

/*
 * Revision 11: .section-title carries margin: 0 so hero layouts can position it freely, but
 * inside a content shell the next block (the team grid, the certification list) landed hard
 * against the heading. Space the heading and its kicker off the content that follows.
 */
.content-shell > .section-label {
  margin-bottom: 14px;
}

.content-shell > .section-title {
  margin-bottom: 40px;
}

.content-shell > .section-title:last-child {
  margin-bottom: 0;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.28fr);
  gap: 56px;
  align-items: center;
}

.split-layout--reverse {
  grid-template-columns: minmax(0, 1.24fr) minmax(280px, 0.86fr);
}

.lede {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.55vw, 1.34rem);
  line-height: 1.68;
}

.section-note {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.72;
}

.card-grid,
.service-grid,
.case-grid,
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-card,
.case-card,
.role-card,
.process-card {
  min-height: 250px;
  padding: 30px;
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.09);
  border-radius: var(--radius);
}

.page-section--dark .info-card,
.page-section--dark .process-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
}

.info-card span,
.case-card span,
.role-card span,
.process-card span,
.metric-card span {
  color: var(--accent-text);
  font-weight: 900;
}

.info-card h3,
.case-card h3,
.role-card h3,
.process-card h3,
.service-link h3 {
  margin: 22px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.32rem, 1.7vw, 1.82rem);
  font-weight: 600;
  line-height: 1.16;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.info-card p,
.case-card p,
.role-card p,
.process-card p,
.service-link p {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  min-height: 150px;
  padding: 26px;
  color: var(--white);
  background:
    radial-gradient(circle at 76% 12%, rgba(239, 84, 9, 0.28), transparent 13rem),
    var(--steel);
  border-radius: var(--radius);
}

.metric-card strong {
  display: block;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3.8rem);
  line-height: 1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.metric-card p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
}

.image-panel {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-panel__caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 20px;
  color: var(--white);
  background: rgba(7, 29, 71, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(11, 44, 102, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
}

.detail-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: center;
  padding: 28px 32px;
  color: var(--muted);
  line-height: 1.62;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(11, 44, 102, 0.08);
}

.service-grid--carousel {
  display: block;
}

.service-carousel__page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-carousel__page[hidden] { display: none; }

.service-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}

.service-carousel__controls button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--white);
  cursor: pointer;
}

.service-carousel__controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 900px) {
  .service-carousel__page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .service-carousel__page { grid-template-columns: minmax(0, 1fr); }
}

.detail-list li:last-child {
  border-bottom: none;
}

.detail-list li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  font-style: normal;
  flex-shrink: 0;
}

.service-link {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.09);
  border-radius: var(--radius);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.service-link:hover {
  border-color: rgba(10, 62, 155, 0.34);
  box-shadow: 0 18px 48px rgba(11, 44, 102, 0.12);
  transform: translateY(-4px);
}

.service-link__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.service-link__top span {
  color: var(--accent-text);
  font-weight: 900;
}

.service-link svg {
  width: 20px;
  height: 20px;
}

.timeline {
  display: grid;
  gap: 14px;
}

.timeline article {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 22px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.timeline span {
  color: var(--blue);
  font-weight: 900;
}

.timeline h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 1.7vw, 1.72rem);
  font-weight: 600;
}

.timeline p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.page-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding: 40px;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 18%, rgba(239, 84, 9, 0.34), transparent 16rem),
    linear-gradient(135deg, var(--steel), var(--blue));
  border-radius: var(--radius);
}

.page-cta h2 {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 4.4rem);
  font-weight: 600;
  line-height: 1.02;
}

.page-cta p {
  max-width: 620px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
}

.article-list {
  display: grid;
  gap: 16px;
}

.article-list article {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px;
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.08);
  border-radius: var(--radius);
}

.article-list span {
  color: var(--blue);
  font-weight: 900;
}

.article-list h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 1.8vw, 1.86rem);
  font-weight: 600;
}

.article-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) 1.4fr;
  gap: 28px;
}

.footer-reveal-shell {
  position: relative;
  isolation: isolate;
  background: #051432;
}

.footer-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100svh;
  padding: 120px 24px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(5, 20, 50, 0.88), rgba(5, 20, 50, 0.42), rgba(5, 20, 50, 0.78)),
    var(--bg-footer-stage, none) center / cover;
}

.footer-stage::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 34svh;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(5, 20, 50, 0.96));
}

.footer-stage .section-label {
  position: relative;
  z-index: 2;
  max-width: 1480px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.9);
}

.footer-stage__content {
  position: relative;
  z-index: 2;
  max-width: 580px;
  margin: 130px auto 0;
}

.footer-stage__content h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 5.6vw, 6.6rem);
  line-height: 0.96;
  font-weight: 600;
}

.footer-stage__content p {
  max-width: 430px;
  margin: 30px 0 38px;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.65;
}

.newsletter-form {
  max-width: 520px;
}

.newsletter-form label {
  display: block;
  margin-bottom: 10px;
  font-size: 1.2rem;
  font-weight: 700;
}

.newsletter-form div {
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.78);
}

.newsletter-form input {
  min-height: 54px;
  border: 0;
  color: var(--white);
  background: transparent;
  outline: 0;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.78);
}

.newsletter-form button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--white);
  background: transparent;
  cursor: pointer;
}

.newsletter-form svg {
  width: 20px;
  height: 20px;
}

.footer-stage__mark {
  position: absolute;
  top: 13%;
  right: 15%;
  display: grid;
  grid-template-columns: repeat(3, 8px);
  gap: 4px;
  color: rgba(255, 255, 255, 0.88);
  transform: rotate(-35deg);
}

.footer-stage__mark span {
  width: 8px;
  height: 36px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.footer {
  position: relative;
  z-index: 2;
  min-height: 28svh;
  height: 28svh;
  padding: 0;
  color: var(--white);
  background: transparent;
}

.footer__panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 30;
  display: grid;
  grid-template-columns: 1.35fr 0.75fr 1.25fr 0.9fr;
  gap: 54px;
  width: auto;
  max-width: none;
  min-height: calc(100svh - 40px);
  margin: 0;
  padding: 64px clamp(28px, 7vw, 180px);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 74%, rgba(255, 255, 255, 0.13), transparent 18rem),
    linear-gradient(135deg, var(--blue), #2563c4);
  border-radius: var(--radius);
  opacity: var(--footer-opacity);
  pointer-events: none;
  transform: translateY(var(--footer-offset));
  visibility: hidden;
  will-change: transform, opacity;
}

body.is-footer-revealing .footer__panel {
  pointer-events: auto;
  visibility: visible;
}

.footer__brand,
.footer__links,
.footer__contact,
.footer__bottom {
  position: relative;
  z-index: 2;
}

.footer__brand p {
  max-width: 330px;
  margin: 54px 0 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
}

.footer__links,
.footer__contact {
  display: grid;
  align-content: start;
  gap: 16px;
}

.footer__links strong,
.footer__contact strong {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.92);
}

.footer__links a,
.footer__contact a,
.footer__contact span {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  line-height: 1.35;
}

.footer__bottom {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 90px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 700;
}

.footer__bottom a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__bottom svg {
  width: 16px;
  height: 16px;
}

.footer__watermark {
  position: absolute;
  right: 8%;
  bottom: -16%;
  display: grid;
  grid-template-columns: repeat(3, 42px);
  gap: 24px;
  color: rgba(255, 255, 255, 0.12);
  transform: rotate(-35deg);
}

.footer__watermark span {
  width: 42px;
  height: 320px;
  border: 18px solid currentColor;
  border-radius: 999px;
}

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible,
body.is-ready .hero .reveal,
body.is-ready .page-hero + .page-section .reveal {
  opacity: 1;
  transform: translateY(0);
}

@keyframes markPulse {
  0%,
  100% {
    opacity: 0.88;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scrollCue {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.7);
  }
}

@media (max-width: 1460px) {
  .site-header {
    grid-template-columns: minmax(150px, auto) auto minmax(150px, auto);
    gap: 12px;
  }

  .nav-pill a,
  .nav-dropdown__trigger {
    padding: 14px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  .header-cta {
    padding: 14px 13px;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  .language-switcher button {
    min-width: 36px;
    padding: 8px 6px;
  }

  .brand__text small {
    font-size: 0.58rem;
  }
}

@media (max-width: 1260px) {
  /* Last step before the bar is replaced by the menu button: drop the wordmark subtitle
     and the standalone Experience link, which is still reachable from the menu. */
  .brand__text small {
    display: none;
  }

  .nav-pill a,
  .nav-dropdown__trigger {
    padding: 13px 9px;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav-pill {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .header-cta {
    justify-self: end;
  }

  .split-title {
    font-size: clamp(3.1rem, 8.5vw, 5.6rem);
  }

  .about__grid,
  .section-head,
  .systems__layout,
  .contact__head,
  .partners__intro {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .site-header {
    top: 16px;
    right: 16px;
    left: 16px;
    gap: 10px;
  }

  .brand__text small {
    display: none;
  }

  .header-cta {
    display: none;
  }

  .language-switcher--header {
    display: none;
  }

  .header-actions {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 82;
  }

  .menu-toggle {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(13, 16, 23, 0.18);
  }

  .mobile-menu {
    top: 76px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  .hero {
    padding: 132px 18px 36px;
  }
  .value-grid,
  .systems__steps,
  .contact__grid,
  .brochure__grid,
  .industry-board,
  .split-layout,
  .split-layout--reverse,
  .card-grid,
  .card-grid--two,
  .service-grid,
  .case-grid,
  .role-grid,
  .metric-strip,
  .page-cta,
  .contact-page-grid {
    grid-template-columns: 1fr;
  }

  .industry-board__image,
  .brochure__panel,
  .brochure__media {
    min-height: 390px;
  }

  .section {
    padding: 82px 18px;
  }

  .page-hero {
    min-height: 100svh;
    padding: 132px 18px 54px;
  }

  .page-hero__inner {
    width: min(100%, 42rem);
  }

  .page-title {
    max-width: 100%;
    font-size: clamp(2.7rem, 8.4vw, 4rem);
    line-height: 1.02;
    overflow-wrap: break-word;
  }

  .page-copy {
    max-width: 34rem;
  }

  .section-title {
    font-size: clamp(2.25rem, 9.5vw, 3.8rem);
    line-height: 1.04;
    overflow-wrap: break-word;
  }

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

  .page-section {
    padding: 82px 18px;
  }

  .page-hero + .page-section {
    padding-top: 58px;
  }

  .image-panel {
    min-height: 390px;
  }

  .article-list article,
  .timeline article {
    grid-template-columns: 1fr;
  }

  .footer {
    min-height: 30svh;
    height: 30svh;
    padding: 0;
  }

  .footer-stage {
    min-height: 100svh;
    padding: 96px 18px;
  }

  .footer-stage__content {
    margin: 96px 0 0;
  }

  .footer__panel {
    right: 12px;
    bottom: 12px;
    left: 12px;
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: calc(100svh - 24px);
    max-height: calc(100svh - 24px);
    padding: 38px 28px 34px;
    overflow-y: auto;
  }

  .footer__brand p {
    margin-top: 30px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 28px;
  }

  .footer__watermark {
    right: -22%;
    bottom: -18%;
    grid-template-columns: repeat(3, 26px);
    gap: 14px;
  }

  .footer__watermark span {
    width: 26px;
    height: 220px;
    border-width: 12px;
  }
}

@media (max-width: 560px) {
  .hero__content {
    max-width: min(100%, 21rem);
  }

  .page-hero__inner {
    max-width: min(100%, 22rem);
  }

  .page-title {
    font-size: clamp(2.45rem, 10.4vw, 3.1rem);
    line-height: 1.06;
  }

  .page-copy {
    max-width: 21rem;
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .split-title {
    font-size: clamp(2.2rem, 8.8vw, 2.58rem);
    line-height: 1.12;
  }

  .section-title {
    max-width: 21rem;
    font-size: clamp(1.78rem, 7.2vw, 2.25rem);
    line-height: 1.12;
  }

  .hero__copy {
    max-width: 21rem;
    font-size: 0.98rem;
    line-height: 1.58;
  }

  .service-rail {
    grid-auto-columns: minmax(276px, 86vw);
  }

  .service-card {
    min-height: 430px;
    padding: 26px;
  }

  .service-card--image {
    padding: 0;
  }

  .rail-controls {
    grid-template-columns: 1fr;
  }

  .rail-controls div:last-child {
    justify-content: flex-end;
  }

  .brochure__media div {
    right: 16px;
    bottom: 16px;
    left: 16px;
    justify-content: flex-start;
  }

  .preloader__mark {
    padding: 12px 18px;
    border-radius: 10px;
  }

  .preloader__bottom {
    right: 18px;
    bottom: 26px;
    left: 18px;
  }

  .footer-stage__content h2 {
    font-size: clamp(2.7rem, 12vw, 4rem);
  }

  .page-hero + .page-section {
    padding-top: 46px;
  }

  /* Detail-list: tighter padding on small screens */
  .detail-list li {
    padding: 22px 24px;
    gap: 12px;
    font-size: 0.97rem;
  }

  .detail-list li::before {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

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

/* =========================================================================
 * CMS-rendered content
 *
 * Everything in this block is generated at runtime by js/pageLoaders.js from the
 * CMS API. Only .service-card previously had styling, so the articles, projects and
 * team lists rendered as unstyled text flush against the viewport edge while the
 * hand-written sections around them sat in a centred column.
 *
 * These rules deliberately reuse the same surface treatment as .service-card —
 * white card, hairline green-tinted border, shared radius — so CMS content is
 * visually indistinguishable from the hand-built sections.
 * ========================================================================= */

.cms-grid {
  display: grid;
  gap: 20px;
}

.cms-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

/* 240px used to fit five tracks in the 1360px shell — 256px cards, and after padding only
   about 200px of usable width. Names wrapped onto three lines and the whole row read as
   cramped. 300px gives four tracks and ~275px of content, which is enough for a person's
   role or a qualification name on one or two lines. */
.cms-grid--narrow {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* Logos are small and vary wildly in aspect ratio, so they get a tighter track
   and centred alignment rather than a card. */
.cms-grid--logos {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  align-items: center;
}

/* --- shared card surface --- */
.article-card,
.project-card,
.career-card,
.certification-card,
.event-card {
  /* Reset the light-surface tokens regardless of ancestor theme. These cards are always
     a white surface, even inside .page-section--dark, .systems, .footer-stage, .page-cta —
     which re-point --ink/--muted to near-white for text sitting directly on navy. Without
     this, a card's own `color: var(--muted)` inherits that near-white value and renders
     unreadable near-white-on-white. */
  --ink: #0d1017;
  --muted: #5b6475;
  --line: #d9dee8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.08);
  border-radius: var(--radius);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.article-card:hover,
.project-card:hover,
.career-card:hover,
.certification-card:hover,
.event-card:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 44, 102, 0.18);
  box-shadow: 0 18px 46px rgba(11, 44, 102, 0.1);
}

.article-card__image,
.project-card__image,
.event-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Certificates are the one image here that must not be cropped — a scan cropped to fill
   loses the letterhead or the signature, and the whole point of showing it is that it can be
   read. So: same fixed height as the other cards to keep the row even, but contain rather
   than cover, on a tint so a portrait scan's margins do not read as a gap in the card. */
.certification-card__image {
  width: 100%;
  height: 190px;
  padding: 10px;
  background: var(--paper);
  border-radius: calc(var(--radius) - 2px);
  object-fit: contain;
}

.article-card__content,
.project-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 26px;
}

.career-card,
.certification-card,
.event-card {
  gap: 10px;
  padding: 26px;
}

.event-card__image {
  margin: -26px -26px 4px;
  width: calc(100% + 52px);
}

.article-card h3,
.project-card h3,
.career-card h3,
.certification-card h3,
.event-card h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article-card strong,
.project-card strong,
.career-card strong,
.certification-card strong,
.event-card strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article-card p,
.project-card p,
.career-card p,
.certification-card p,
.event-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.article-card__date,
.event-card__date,
.career-card__closing {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-card__excerpt,
.career-card__desc {
  /* Excerpt length is set by whoever writes the article, so clamp it: one long
     entry would otherwise stretch its whole grid row. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card__meta,
.career-card__meta,
.certification-card__issuer {
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 600;
}

.certification-card__type {
  align-self: flex-start;
  padding: 4px 10px;
  color: var(--steel);
  background: rgba(11, 44, 102, 0.07);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-card__link,
.project-card__link,
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.9rem;
}

.article-card__link:hover,
.project-card__link:hover,
.service-card__link:hover {
  text-decoration: underline;
}

/* The arrow travels on hover so the affordance reads on pointer devices too. */
.article-card__link svg,
.project-card__link svg,
.service-card__link svg,
.career-card__link svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  transition: transform 0.18s ease;
}

.article-card:hover .article-card__link svg,
.project-card:hover .project-card__link svg,
.service-card:hover .service-card__link svg,
.career-card:hover .career-card__link svg {
  transform: translate(2px, -2px);
}

.article-card:focus-within,
.project-card:focus-within {
  border-color: var(--blue);
}

/* --- team --- */
.team-member {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.08);
  border-radius: var(--radius);
}

.team-member__image {
  width: 124px;
  height: 124px;
  margin: 0 auto 6px;
  object-fit: cover;
  border-radius: 50%;
}

.team-member h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
}

.team-member__position {
  margin: 0;
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 600;
}

.team-member__bio {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* --- partner / customer logos --- */
.partner-logo {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 18px;
  background: var(--white);
  border: 1px solid rgba(11, 44, 102, 0.08);
  border-radius: var(--radius);
  transition: border-color 0.24s ease, transform 0.24s ease;
}

.partner-logo:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 44, 102, 0.2);
}

.partner-logo__image {
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}

.partner-logo__name {
  color: var(--steel);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.careers-empty {
  color: var(--muted);
  font-size: 1rem;
}

/* --- detail pages --- */
.article-detail,
.project-detail,
.service-detail {
  width: min(100%, 820px);
  margin: 0 auto;
}

.article-detail h1,
.project-detail h1,
.service-detail h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  font-weight: 600;
}

.article-detail__meta,
.project-detail__meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.article-detail__image,
.project-detail__image,
.service-detail__image {
  width: 100%;
  margin: 32px 0;
  border-radius: var(--radius);
}

.article-detail__content,
.project-detail__content,
.service-detail__description {
  margin-top: 28px;
  font-size: 1.02rem;
  line-height: 1.78;
}

.article-detail__content p,
.project-detail__content p,
.service-detail__description p {
  margin: 0 0 1.15em;
}

.article-detail__content h2,
.article-detail__content h3,
.project-detail__content h2,
.project-detail__content h3,
.service-detail__description h2,
.service-detail__description h3 {
  margin: 1.8em 0 0.6em;
  font-family: var(--font-display);
  line-height: 1.2;
  font-weight: 600;
}

.article-detail__content ul,
.article-detail__content ol,
.project-detail__content ul,
.service-detail__description ul {
  padding-left: 1.3em;
}

.article-detail__content li,
.project-detail__content li,
.service-detail__description li {
  margin-bottom: 0.5em;
}

.article-detail__content img,
.project-detail__content img,
.service-detail__description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* --- loading and failure states --- */
.api-loading {
  color: var(--muted);
}

.api-error {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 22px 24px;
  color: var(--copper);
  background: rgba(194, 65, 12, 0.07);
  border: 1px solid rgba(194, 65, 12, 0.28);
  border-radius: var(--radius);
}

.api-error p {
  margin: 0;
}

@media (max-width: 720px) {
  .article-card__content,
  .project-card__content,
  .career-card,
  .certification-card,
  .event-card {
    padding: 20px;
  }

  .event-card__image {
    margin: -20px -20px 4px;
    width: calc(100% + 40px);
  }
}

/* Fields that existed in the CMS but had no rendering: a team member's LinkedIn, a
   certificate's number/validity/document, an event's venue and video, a project's year.
   Each was admin effort that produced nothing visible on the site. */
.team-member__link,
.certification-card__doc,
.event-card__video {
  align-self: center;
  margin-top: 4px;
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 700;
}

.certification-card__doc,
.event-card__video {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 8px;
}

.team-member__link:hover,
.certification-card__doc:hover,
.event-card__video:hover {
  text-decoration: underline;
}

.certification-card__no,
.certification-card__dates,
.event-card__where {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.certification-card__no {
  font-variant-numeric: tabular-nums;
}

/* company_profiles narrative — about / mission / values */
.profile-block + .profile-block {
  margin-top: 28px;
}

.profile-block h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

.profile-block p {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

/* Vacancy detail. requirements_id/en were collected by the admin form from the start but
   never rendered anywhere, so applicants could not see what was being asked of them. */
.career-detail {
  width: min(100%, 780px);
  margin: 0 auto;
}

.career-detail__meta {
  margin: 0;
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 700;
}

.career-detail__closing {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.career-detail__section {
  margin-top: 34px;
}

.career-detail__section h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

.career-detail__section p,
.career-detail__section li {
  color: var(--muted);
  line-height: 1.72;
}

.career-detail__section ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 8px;
}

.career-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.9rem;
}

.career-card__link:hover {
  text-decoration: underline;
}

/* Brand images stay hidden until the CMS image has loaded. */
[data-brand-logo]:not(.is-loaded) {
  visibility: hidden;
}

/* Brand logo. */
.brand__logo {
  /* The mark is 2.41:1 once its transparent padding is trimmed, so max-height is what
     actually sizes it — 104px of height comes out at 251px wide, well inside the max-width.
     That cap is not doing the sizing; it is a backstop so a differently proportioned logo
     uploaded later cannot grow sideways into the nav.

     The logo is deliberately taller than the nav pill beside it. The header row grows to
     match, which both heroes clear: they are align-items:end with 150px+ of top padding. */
  height: auto;
  width: auto;
  max-height: 104px;
  max-width: 340px;
  object-fit: contain;
  flex: none;
}

.brand--footer {
  display: inline-flex;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 3px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.brand--footer .brand__logo {
  max-height: 72px;
  max-width: 320px;
}

@media (max-width: 900px) {
  .brand--footer .brand__logo {
    max-height: 56px;
    max-width: 250px;
  }
}

@media (max-width: 1460px) {
  .brand__logo {
    max-height: 86px;
    max-width: 280px;
  }
}

@media (max-width: 1260px) {
  .brand__logo {
    max-height: 70px;
    max-width: 240px;
  }
}

@media (max-width: 900px) {
  .brand__logo {
    max-height: 58px;
    max-width: 215px;
  }
}

/* Form feedback.
 *
 * Replaces a browser alert() that showed the API's summary line ("Validation failed") and
 * nothing about which field was wrong. Errors now sit in the form, list the actual reasons,
 * and mark the inputs that caused them. */
.form-error {
  grid-column: 1 / -1;
  padding: 16px 18px;
  color: var(--copper);
  background: rgba(194, 65, 12, 0.07);
  border: 1px solid rgba(194, 65, 12, 0.3);
  border-radius: var(--radius);
}

.form-error strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.form-error ul {
  margin: 0;
  padding-left: 1.15rem;
}

.form-error li,
.form-error p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.form-success {
  grid-column: 1 / -1;
  padding: 28px;
  color: var(--steel);
  background: rgba(10, 62, 155, 0.08);
  border: 1px solid rgba(10, 62, 155, 0.28);
  border-radius: var(--radius);
}

.form-success p {
  margin: 0;
  font-weight: 600;
}

.contact-form .is-invalid,
input.is-invalid,
textarea.is-invalid {
  border-color: var(--copper);
  outline: 2px solid rgba(194, 65, 12, 0.22);
  outline-offset: 1px;
}

/* Hero video.
 *
 * Sits in the same absolutely-positioned stack as the hero image and uses object-fit:cover,
 * so it fills whatever shape the hero is at any breakpoint — the hero is 100svh tall and its
 * width is the viewport, so its aspect ratio changes constantly and a fixed ratio would
 * either letterbox or overflow. Cover crops instead, which is what a background film wants.
 *
 * The poster is the page's hero image, so the first frame is never blank while the file
 * loads, and on a slow connection the still simply stays. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* When a video is playing the still behind it is redundant, and leaving it visible costs a
   second decode of a large image. */
.page-hero__media.has-video img,
.hero__media.has-video img {
  display: none;
}

@media (max-width: 720px) {
  /* Portrait phones crop a landscape film hard at the sides; bias the framing towards the
     centre-top, where the subject usually is, rather than the middle. */
  .hero-video {
    object-position: center 35%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Respect the setting: the still image is shown instead of an autoplaying loop. */
  .hero-video {
    display: none;
  }

  .page-hero__media.has-video img,
  .hero__media.has-video img {
    display: block;
  }
}