/* ---------- Typeface (self-hosted, OFL 1.1 — see assets/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Sadara — Corporate design system (Official Brand Identity v1.0)
   Palette: Sadara Navy #0B2D4D · Gold accent #C89A3D · Charcoal · Greys
   Fonts:   Manrope (digital, per Brand Guidelines Ch.2)
   Algerian graphic language: khatam (eight-point star) linework + flow dividers
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* color — official identity */
  --bg: #ffffff;
  --surface: #f4f6f8;
  --surface-2: #e7eaed;
  --ink: #1d242c;
  --ink-muted: #5e6771;
  --petrol: #0b2d4d;
  --petrol-strong: #092440;
  --petrol-deep: #071e36;
  --petrol-abyss: #04182e;
  --energy: #c89a3d;
  --energy-strong: #a87e27;
  --line: #e7eaed;
  --line-control: #7d8691;   /* 3.69:1 on #fff — form controls need 3:1, --line is 1.21:1 */
  /* on dark */
  --ink-inv: #ffffff;
  --ink-inv-muted: rgba(255, 255, 255, 0.78);
  --line-inv: rgba(255, 255, 255, 0.16);
  /* Was the khatam pattern. Replaced at the client's request with light:
     a single gold wash, no repeating motif. One layer, so it drops into
     the slot the pattern occupied without shifting any background list. */
  --sheen: radial-gradient(115% 85% at 85% 6%, rgba(200, 154, 61, 0.16) 0%,
    rgba(200, 154, 61, 0.05) 34%, transparent 64%);
  --flow-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C 340 8 700 26 900 50 C 1120 76 1300 60 1440 34' fill='none' stroke='%23C89A3D' stroke-width='2' opacity='0.75'/%3E%3Cpath d='M0 74 C 340 22 700 40 900 62 C 1120 86 1300 72 1440 48' fill='none' stroke='%23ffffff' stroke-opacity='0.3' stroke-width='1.5'/%3E%3C/svg%3E");

  /* type */
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-display: clamp(2.35rem, 4.2vw + 1rem, 3.8rem);
  --fs-h1: clamp(2.1rem, 3.2vw + 0.9rem, 3.15rem);
  --fs-h2: clamp(1.65rem, 2.1vw + 0.85rem, 2.4rem);
  --fs-h3: clamp(1.18rem, 0.5vw + 1.05rem, 1.38rem);
  --fs-lead: clamp(1.05rem, 0.45vw + 0.95rem, 1.19rem);
  --fs-small: 0.875rem;

  /* layout */
  --container: 1180px;
  --container-wide: 1340px;
  --container-narrow: 880px;
  --gutter: clamp(1.1rem, 3.5vw, 2rem);
  --radius: 10px;
  --radius-sm: 7px;

  /* z scale */
  --z-dropdown: 600;
  --z-sticky: 700;
  --z-drawer: 800;
  --z-skip: 900;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* quart-ish */
  --t-fast: 160ms;
  --t-med: 320ms;
}

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

html {
  scroll-behavior: smooth;
  /* keyed on the viewport, not on [id] — every focusable target clears the
     75px sticky header, and scrollIntoView inside the search panel is unaffected */
  scroll-padding-top: 96px;
}



body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
  color: var(--ink);
}

h1, h2 { font-weight: 800; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: 1.05rem; line-height: 1.3; }

p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petrol-strong); }

ul, ol { margin: 0 0 1em; padding-inline-start: 1.2em; }

::selection { background: rgba(200, 154, 61, 0.3); }

:focus-visible {
  outline: 2px solid var(--energy-strong);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: var(--z-skip);
  background: var(--petrol-deep);
  color: var(--ink-inv);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; color: var(--ink-inv); }

/* ---------- Layout helpers ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

.section { padding-block: clamp(4.2rem, 8vw, 6.8rem); }
.section--tight { padding-block: clamp(3rem, 5.5vw, 4.6rem); }

.band--surface { background: var(--surface); }
.band--petrol {
  background-color: var(--petrol-deep);
  background-image:
    var(--sheen),
    radial-gradient(90rem 40rem at 85% -20%, rgba(20, 64, 107, 0.6), transparent 60%);
  background-size: auto, auto;
  color: var(--ink-inv);
}
/* A photographic ground for petrol bands that carry little content — a heading,
   a line and a row of chips leave a large empty field, and the khatam alone
   does not fill it. The overlay is deliberately near-opaque: the photograph is
   there for depth, not for detail, and the text over it must keep its contrast.
   Baseline is the JPEG; browsers that can do better get WebP at two densities.
   No background-attachment: fixed — it janks on iOS and buys nothing here. */
.band--photo {
  background-color: var(--petrol-abyss);
  background-image:
    linear-gradient(160deg, rgba(11, 45, 77, 0.9) 0%, rgba(8, 32, 56, 0.95) 55%, rgba(6, 26, 46, 0.97) 100%),
    url("../img/photos/hero-2-refinery-dusk.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center 35%;
  background-size: cover, cover;
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .band--photo {
    background-image:
      linear-gradient(160deg, rgba(11, 45, 77, 0.9) 0%, rgba(8, 32, 56, 0.95) 55%, rgba(6, 26, 46, 0.97) 100%),
      image-set(url("../img/photos/hero-2-refinery-dusk-1280w.webp") type("image/webp") 1x,
                url("../img/photos/hero-2-refinery-dusk-1600w.webp") type("image/webp") 2x);
  }
}
/* Industries, as cards rather than chips. The band was thin because a heading,
   one line and a row of chips cannot fill it — this fills it with content
   instead of with more background. auto-fit keeps the last row from stranding
   a single card on its own at most widths. */
.ind-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0.85rem;
}
.ind-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--line-inv);
  border-radius: var(--radius);
  background: oklch(1 0 0 / 0.05);
}
.ind-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: var(--energy);
  background: color-mix(in srgb, var(--energy) 14%, transparent);
}
.ind-card__label { color: var(--ink-inv); font-weight: 600; font-size: 0.93rem; line-height: 1.25; }
@media (max-width: 420px) {
  .ind-cards { grid-template-columns: 1fr; }
}
html.js .ind-cards.is-visible > * { animation: revealChild 0.62s var(--ease-out) backwards; }
@media (prefers-reduced-motion: reduce) { html.js .ind-cards.is-visible > * { animation: none; } }
.band--petrol h2, .band--petrol h3, .band--petrol h4 { color: var(--ink-inv); }
.band--petrol p { color: var(--ink-inv-muted); }
.band--petrol a:not(.btn) { color: var(--ink-inv); }

.lead { font-size: var(--fs-lead); color: var(--ink-muted); max-width: 62ch; }
.band--petrol .lead { color: var(--ink-inv-muted); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head--split {
  display: grid;
  gap: 1rem 4rem;
  align-items: end;
}
@media (min-width: 860px) {
  .section-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .section-head--split h2 { margin-bottom: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 0.95rem 1.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--primary { background: var(--petrol); color: #fff; }
.btn--primary:hover { background: var(--petrol-strong); color: #fff; }

/* gold = premium accent: dark navy text on gold fill (Brand Guidelines Ch.2) */
.btn--energy { background: var(--energy); color: var(--petrol-abyss); }
.btn--energy:hover { background: #b78a2f; color: var(--petrol-abyss); }

.btn--inverse { background: #fff; color: var(--petrol-deep); }
.btn--inverse:hover { background: oklch(0.93 0.01 210); color: var(--petrol-deep); }

/* gold outline: the quiet sibling of .btn--energy for a second action beside a
   solid gold button on a dark surface — same hue story, one step down in weight,
   and it becomes the solid gold button on hover. Gold on petrol is 5.4:1. */
.btn--outline-energy { border-color: rgba(200, 154, 61, 0.7); color: var(--energy); background: transparent; }
.btn--outline-energy:hover { background: var(--energy); border-color: var(--energy); color: var(--petrol-abyss); }
.hero a.btn--outline-energy, .band--petrol a.btn--outline-energy, .cta-band a.btn--outline-energy { color: var(--energy); }
.hero a.btn--outline-energy:hover, .band--petrol a.btn--outline-energy:hover, .cta-band a.btn--outline-energy:hover { color: var(--petrol-abyss); }

.btn--ghost { border-color: rgba(11, 45, 77, 0.45); color: var(--petrol); background: transparent; }
.btn--ghost:hover { border-color: var(--petrol); background: rgba(11, 45, 77, 0.06); color: var(--petrol-strong); }

/* ghost buttons on ANY dark surface must be inverse — cta-band included */
.band--petrol .btn--ghost, .cta-band .btn--ghost, .hero .btn--ghost, .hero--inner .btn--ghost {
  border-color: rgba(255, 255, 255, 0.45); color: var(--ink-inv);
}
.band--petrol .btn--ghost:hover, .cta-band .btn--ghost:hover, .hero .btn--ghost:hover, .hero--inner .btn--ghost:hover {
  border-color: #fff; background: rgba(255, 255, 255, 0.09); color: #fff;
}
/* buttons keep their own colours inside dark bands (link rule must not win) */
.band--petrol a.btn--inverse, .cta-band a.btn--inverse { color: var(--petrol-deep); }
.band--petrol a.btn--energy, .cta-band a.btn--energy { color: var(--petrol-abyss); }
.band--petrol a.btn--primary, .cta-band a.btn--primary { color: #fff; }

.btn--lg { padding: 1.1rem 1.9rem; font-size: 1.04rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: oklch(1 0 0 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-med) var(--ease-out);
}
.site-header.scrolled { box-shadow: 0 8px 28px oklch(0.22 0.02 235 / 0.09); }

.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}
.brand img { height: 62px; width: auto; display: block; }
.brand svg { height: 58px; width: auto; }
/* footer uses the ORIGINAL logo file rendered as its white reverse variant */
.site-footer .brand img {
  height: 76px;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

/* nav */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  color: var(--ink);
}

.site-nav__actions { display: flex; align-items: center; gap: 0.35rem; }
.site-nav { display: flex; align-items: center; gap: 0.35rem; }
.site-nav > ul {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a, .site-nav button.nav-link {
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav button.nav-link:hover { background: var(--surface); color: var(--petrol-strong); }
.site-nav a[aria-current="page"] { color: var(--petrol); font-weight: 600; }

.nav-item { position: relative; }
.nav-item .caret { transition: transform var(--t-fast) var(--ease-out); }
.nav-item.open .caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 22px 48px oklch(0.22 0.02 235 / 0.16);
  padding: 0.55rem;
  list-style: none;
  margin: 0;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out),
    visibility 0s linear var(--t-fast);
}
.nav-item.open > .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.nav-menu a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  white-space: normal;
  line-height: 1.35;
}
.nav-menu .nav-menu__desc {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 400;
}
.nav-menu__all {
  border-top: 1px solid var(--line);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}
.nav-menu__all a { color: var(--petrol); font-weight: 600; }

/* the header CTA is a button, not a nav link — restore its styling over the reset */
.site-nav a.nav-cta {
  margin-left: 0.6rem;
  background: var(--petrol);
  color: #fff;
  border: 1px solid transparent;
  padding: 0.78rem 1.4rem;
  font-weight: 600;
}
.site-nav a.nav-cta:hover { background: var(--petrol-strong); color: #fff; }

@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px oklch(0.22 0.02 235 / 0.14);
    padding: 0.8rem var(--gutter) 1.4rem;
    max-height: calc(100dvh - 75px); /* sticky header 74px + its 1px border */
    overscroll-behavior: contain;
    overflow: auto;
    z-index: var(--z-drawer);
  }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a, .site-nav button.nav-link { width: 100%; justify-content: space-between; padding: 0.85rem 0.6rem; }
  .nav-menu {
    position: static;
    translate: none;
    transform: none;
    opacity: 1;
    visibility: hidden;
    display: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 0 0 0.4rem 0.9rem;
    padding: 0;
  }
  .nav-item.open > .nav-menu { display: block; visibility: visible; }
  .nav-cta { margin: 0.8rem 0 0; width: 100%; }
  /* .wa is fixed to the body, so it outranks the drawer's stacking context and
     would swallow taps over the menu — hide it while the menu is open */
  html.nav-open .wa { display: none; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  overflow-x: clip;   /* not `clip`: the hero search panel must escape downwards */
  background-color: var(--petrol);
  background-image:
    radial-gradient(70rem 34rem at 78% 108%, rgba(200, 154, 61, 0.18), transparent 62%),
    radial-gradient(80rem 42rem at -10% -30%, rgba(20, 64, 107, 0.9), transparent 60%);
  background-size: auto, auto;
  color: var(--ink-inv);
}
.hero__grid-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(oklch(1 0 0 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}
.hero__in {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 8.5rem) clamp(6rem, 12vw, 10rem);
  max-width: 62rem;
}
/* The company name, set above the headline as a lockup. The h1 carries the
   proposition; this carries who is making it. Deliberately small and gold
   rather than large — it introduces the headline, it does not compete with it.
   The rule before it uses a logical-property-free flex row, so RTL mirrors it
   without any override. */
.hero__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  color: var(--energy);
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.35;
}
.hero__brand::before {
  content: "";
  flex: none;
  width: clamp(1.4rem, 4vw, 2.4rem);
  height: 2px;
  background: currentColor;
}
.hero h1 {
  font-size: var(--fs-display);
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
  max-width: 21ch;
}
.hero .lead {
  color: var(--ink-inv-muted);
  max-width: 66ch;
  margin-bottom: 2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero__ticks {
  position: relative;
  border-top: 1px solid var(--line-inv);
  background: rgba(4, 24, 46, 0.65);
  backdrop-filter: blur(6px);
}
.ticks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticks li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.05rem 1.2rem;
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--ink-inv);
  border-inline-start: 1px solid var(--line-inv);
}
.ticks li:first-child { border-inline-start: 0; }
.ticks .tick {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--energy);
}
@media (max-width: 900px) {
  .ticks { grid-template-columns: 1fr 1fr; }
  .ticks li { border-inline-start: 0; border-top: 1px solid var(--line-inv); }
  .ticks li:nth-child(-n + 2) { border-top: 0; }
}
@media (max-width: 520px) {
  .ticks { grid-template-columns: 1fr; }
  .ticks li:nth-child(2) { border-top: 1px solid var(--line-inv); }
}

/* ---------- Hero slider (photographic) ---------- */
.hero--slider { background: var(--petrol-abyss); }
.hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* slow drift adds life without distracting */
  animation: heroDrift 18s ease-out both;
  animation-play-state: paused;   /* .is-active img resumes it — otherwise slide 4 never drifts */
}
.hero__slide.is-active img { animation-play-state: running; }
@keyframes heroDrift {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
/* navy veil keeps every photograph on-brand and the copy readable */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(4, 24, 46, 0.94) 0%, rgba(7, 30, 54, 0.86) 38%, rgba(11, 45, 77, 0.62) 68%, rgba(11, 45, 77, 0.5) 100%),
    linear-gradient(to top, rgba(4, 24, 46, 0.75), transparent 45%);
}
.hero--slider .hero__in { position: relative; z-index: 2; }
.hero--slider .hero__grid-lines { z-index: 1; }

/* controls */
.hero__slider-ui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero__dots { display: flex; gap: 0.5rem; }
.hero__dot {
  width: 30px;
  height: 44px;
  /* widen the hit box without moving the bars apart visually */
  padding-inline: 7px;
  box-sizing: content-box;              /* invisible hit area; the visible bar stays 4px */
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: width var(--t-med) var(--ease-out);
}
.hero__dot::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  transition: background var(--t-fast) var(--ease-out);
}
.hero__dot:hover::before { background: rgba(255, 255, 255, 0.6); }
.hero__dot[aria-current="true"] { width: 46px; }
.hero__dot[aria-current="true"]::before { background: var(--energy); }
.hero__nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(4, 24, 46, 0.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.hero__nav:hover { background: rgba(200, 154, 61, 0.9); border-color: transparent; color: var(--petrol-abyss); }

.hero__caption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.hero__caption::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--energy);
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__dot { transition: none; }
  .hero__slide img { animation: none; }
}

/* ---------- Error page (404) ---------- */
.error-hero { display: grid; gap: 2rem 3rem; align-items: center; max-width: none; }
@media (min-width: 900px) {
  .error-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.error-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.2);
  margin: 0 0 0.4rem;
}
.error-art {
  width: 100%;
  height: auto;
  max-width: 560px;
  margin-inline: auto;
  display: block;
  font-family: var(--font-body);
}
@media (max-width: 560px) { .error-art { display: none; } }

/* ---------- Inner hero ---------- */
.hero--inner {
  position: relative;
  overflow-x: clip;   /* not `clip`: the hero search panel must escape downwards */
  background-color: var(--petrol);
  background-image:
    radial-gradient(60rem 26rem at 90% 120%, rgba(200, 154, 61, 0.14), transparent 60%),
    radial-gradient(70rem 30rem at 0% -40%, rgba(20, 64, 107, 0.85), transparent 65%);
  color: var(--ink-inv);
  background-size: auto, auto;
}
.hero--inner .hero__in { padding-block: clamp(3.6rem, 7vw, 6rem); max-width: 56rem; }
.hero--inner h1 { font-size: var(--fs-h1); color: #fff; max-width: 24ch; }
.hero--inner .lead { margin-bottom: 0; color: var(--ink-inv-muted); max-width: 66ch; }
.hero--inner .hero__cta { margin-top: 1.9rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  font-size: 0.85rem;
}
.crumbs a { color: var(--ink-inv-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-inline-end: 0.45rem; color: oklch(1 0 0 / 0.35); }
.crumbs [aria-current] { color: var(--ink-inv); }

/* ---------- Sector grid ---------- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.55rem 1.5rem 1.4rem;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}
.card:hover {
  border-color: rgba(11, 45, 77, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px oklch(0.22 0.02 235 / 0.1);
}
.card__head { display: flex; align-items: center; gap: 0.75rem; }
.card__icon { flex: none; width: 30px; height: 30px; color: var(--petrol); }
.card h3 { margin: 0; }
.card p { font-size: 0.95rem; color: var(--ink-muted); }
.card__link {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--petrol);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.card__link .arrow { transition: transform var(--t-fast) var(--ease-out); }
.card:hover .card__link .arrow { transform: translateX(4px); }
.card a.stretch::after, .acc-card a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.sector-grid .card { grid-column: span 2; }
.sector-grid .card--featured {
  grid-column: span 6;
  flex-direction: row;
  align-items: center;
  gap: 2.2rem;
  background-color: var(--petrol-deep);
  background-image:
    radial-gradient(46rem 20rem at 100% 0%, rgba(200, 154, 61, 0.18), transparent 55%);
  background-size: auto;
  border-color: transparent;
  color: var(--ink-inv);
  padding: 2rem 2.1rem;
}
.card--featured h3 { color: #fff; font-size: 1.55rem; }
.card--featured p { color: var(--ink-inv-muted); font-size: 1rem; max-width: 58ch; }
.card--featured .card__icon { color: var(--energy); width: 34px; height: 34px; }
.card--featured .card__link { color: #fff; }
.card--featured .card__aside {
  flex: none;
  text-align: center;
  border-inline-start: 1px solid var(--line-inv);
  padding-inline-start: 2.2rem;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}
.card--featured .card__aside strong {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--energy);
  line-height: 1;
}
.card--featured .card__aside span { font-size: 0.85rem; color: var(--ink-inv-muted); }

@media (max-width: 1020px) {
  .sector-grid .card { grid-column: span 3; }
  .sector-grid .card--featured { grid-column: span 6; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .card--featured .card__aside { border-inline-start: 0; border-top: 1px solid var(--line-inv); padding: 1.1rem 0 0; align-self: flex-start; text-align: start; }
}
@media (max-width: 640px) {
  .sector-grid { grid-template-columns: 1fr; }
  .sector-grid .card, .sector-grid .card--featured { grid-column: span 1; }
}

/* ---------- Split (text + art) ---------- */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.split__art {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  margin: 0;
}
.split__art svg { width: 100%; height: auto; }
.split__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s var(--ease-out);
}
.split__art:hover img { transform: scale(1.035); }
/* landscape variant: the base rule stretches to the row height, which suits the
   portrait training-room photo but crops a 3:2 image badly */
.split__art--wide img { height: auto; }
.split__art figcaption {
  font-size: 0.82rem;
  color: var(--ink-muted);
  padding: 0.6rem 1rem;
  background: #fff;
  border-top: 1px solid var(--line);
}

/* brand-style inline diagrams (engineering linework, navy/gold) */
.diagram { margin: clamp(1.6rem, 3vw, 2.6rem) 0 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram--card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(1rem, 2.5vw, 2rem);
}
/* on narrow screens the diagram scrolls inside its own frame so labels stay legible */
@media (max-width: 760px) {
  .diagram--card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .diagram--card svg { min-width: 940px; }
}

/* ---------- Feature rows (why choose) ---------- */
.feature-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 2.2rem 2.6rem;
}
.feature-cols h3 {
  font-size: 1.12rem;
  margin-bottom: 0.35rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--energy);
}
.band--petrol .feature-cols h3 { border-top-color: var(--energy); }
.feature-cols p { font-size: 0.95rem; color: var(--ink-muted); }

/* ---------- Definition rows (values) ---------- */
.defs { display: grid; gap: 0; }
.defs > div {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr;
  gap: 1rem 2.5rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.defs > div:last-child { border-bottom: 1px solid var(--line); }
.defs h3 { margin: 0; font-size: 1.14rem; }
.defs p { margin: 0; color: var(--ink-muted); font-size: 0.97rem; }
.band--petrol .defs > div { border-color: var(--line-inv); }
.band--petrol .defs p { color: var(--ink-inv-muted); }
@media (max-width: 620px) {
  .defs > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---------- Chips (industries) ---------- */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chip-grid li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 500;
  font-size: 0.93rem;
  background: #fff;
}
.band--petrol .chip-grid li {
  background: oklch(1 0 0 / 0.05);
  border-color: var(--line-inv);
  color: var(--ink-inv);
}

/* ---------- Steps (real sequences only) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.6rem 2rem;
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--energy-strong);
  margin-bottom: 0.35rem;
}
.band--petrol .steps li::before { color: var(--energy); }
.steps h3 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.steps p { font-size: 0.93rem; color: var(--ink-muted); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--petrol); }
.faq .faq__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--petrol);
  transition: transform var(--t-fast) var(--ease-out);
}
.faq details[open] .faq__icon { transform: rotate(45deg); }
.faq details > div { padding: 0 0.2rem 1.3rem; }
.faq details[open] > div,
.course-cat[open] > ul { animation: contentFade 0.45s var(--ease-out); }
@keyframes contentFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.faq details > div p { color: var(--ink-muted); }

/* ---------- CTA band ---------- */
.cta-band {
  background-color: var(--petrol-deep);
  background-image:
    var(--flow-divider),
    radial-gradient(70rem 30rem at 90% 130%, rgba(200, 154, 61, 0.16), transparent 60%);
  background-size: 100% 56px, auto;
  background-position: top center, 0 0;
  background-repeat: no-repeat, repeat;
  color: var(--ink-inv);
}
.cta-band h2 { color: #fff; max-width: 26ch; }
.cta-band .lead { color: var(--ink-inv-muted); }
.cta-band__in {
  display: grid;
  gap: 1.6rem 4rem;
  align-items: center;
}
@media (min-width: 920px) {
  .cta-band__in { grid-template-columns: minmax(0, 1.2fr) auto; }
  .cta-band__in h2 { margin-bottom: 0.4rem; }
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- Accreditation browser ---------- */
.acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 1.1rem;
}
.acc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.45rem 1.4rem 1.3rem;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}
.acc-card:hover {
  border-color: rgba(11, 45, 77, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px oklch(0.22 0.02 235 / 0.1);
}
.acc-card__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--petrol);
  letter-spacing: 0.01em;
}
.acc-card__desc { font-size: 0.88rem; color: var(--ink-muted); margin: 0; }
.acc-card__logo { height: 52px; width: auto; max-width: 200px; object-fit: contain; align-self: flex-start; }
.body-logo { height: 64px; width: auto; max-width: 260px; object-fit: contain; margin-bottom: 1.1rem; }

.mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}
.mini-chips li {
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  color: var(--ink-muted);
  background: var(--surface);
}
.acc-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: 0.83rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}
.acc-card__meta > * { white-space: nowrap; }
.acc-card__meta .badge {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  font-weight: 600;
  color: var(--petrol-strong);
}

.course-browser__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.course-search {
  flex: 1 1 320px;
  max-width: 460px;
  position: relative;
}
.course-search input {
  width: 100%;
  font: inherit;
  padding: 0.78rem 1rem 0.78rem 2.7rem;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
.course-search input:focus-visible { outline-offset: 0; }
.course-search svg {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
  pointer-events: none;
}
.course-count { font-size: 0.9rem; color: var(--ink-muted); }

.course-browser { /* wrapper for the search bar + category groups; JS scoping hook */ }
.course-cat { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 0.9rem; }
.course-cat summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
}
.course-cat summary::-webkit-details-marker { display: none; }
.course-cat summary .badge {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--petrol-strong);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.16rem 0.7rem;
}
.course-cat ul { list-style: none; margin: 0; padding: 0 1.3rem 0.9rem; }
.course-cat li {
  padding: 0.62rem 0.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.95rem;
}
.course-cat li .meta { font-size: 0.8rem; color: var(--ink-muted); }
.course-cat li.hidden { display: none; }
.course-cat li.course-sub {
  background: var(--surface);
  margin-inline: -1.3rem;
  padding-inline: 1.5rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--petrol);
}

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  padding: 0.78rem 0.95rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline-offset: 0; }
.field .hint { font-size: 0.82rem; color: var(--ink-muted); margin-top: 0.3rem; }

.choice-row { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.choice-row label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; font-size: 0.96rem; cursor: pointer;
  padding-block: 0.6rem;   /* 44px row without changing the visual density */
  margin-bottom: 0;        /* neutralises the inherited .field label margin */
}
.choice-row input { accent-color: var(--petrol); width: 1.05rem; height: 1.05rem; flex: none; }
.choice-row.consent label { padding-block: 0; margin-bottom: 0.35rem; }
.consent label { align-items: flex-start; }
.consent input { margin-top: 0.2rem; }
.form-section-title {
  font-size: 1.1rem;
  margin: 2.2rem 0 1rem;
  padding-top: 0.8rem;
  border-top: 2px solid var(--energy);
}

/* ---------- Location map ---------- */
.map-frame {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 42vw, 440px);
  border: 0;
  filter: grayscale(0.35) contrast(1.05);
  transition: filter var(--t-med) var(--ease-out);
}
.map-frame:hover iframe { filter: none; }
.map-frame figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 0.93rem;
  color: var(--ink-muted);
}
@media (prefers-reduced-motion: reduce) {
  .map-frame iframe { transition: none; }
}

/* ---------- Contact info ---------- */
.contact-rows { display: grid; gap: 0; }
.contact-rows > div {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
}
.contact-rows > div:last-child { border-bottom: 1px solid var(--line); }
.contact-rows svg { flex: none; width: 22px; height: 22px; color: var(--petrol); margin-top: 0.15rem; }
.contact-rows h3 { font-size: 1rem; margin: 0 0 0.15rem; }
.contact-rows p { margin: 0; font-size: 0.95rem; color: var(--ink-muted); }

/* ---------- Alerts (UI status colours per Brand Guidelines 2.10 — interfaces only) ---------- */
.alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  margin: 0 0 1rem;
}
.alert svg { flex: none; width: 20px; height: 20px; margin-top: 0.1rem; }
.alert strong { display: block; margin-bottom: 0.15rem; }
.alert--info { border-color: rgba(0, 112, 224, 0.4); background: rgba(0, 112, 224, 0.06); color: #04528f; }
.alert--success { border-color: rgba(40, 167, 69, 0.4); background: rgba(40, 167, 69, 0.07); color: #1b6e31; }
.alert--warning { border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.09); color: #7a5200; }
.alert--error { border-color: rgba(231, 76, 60, 0.4); background: rgba(231, 76, 60, 0.06); color: #a82315; }

/* ---------- Data tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th {
  background: var(--petrol);
  color: #fff;
  text-align: left;
  font-weight: 700;
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
.table td { padding: 0.7rem 1rem; border-top: 1px solid var(--line); }
.table tbody tr:nth-child(even) { background: var(--surface); }

/* ---------- WhatsApp chat launcher ----------
   The launcher keeps WhatsApp's own green so it is instantly recognisable
   (same reasoning as third-party accreditation marks); the panel itself is
   pure Sadara navy/gold. */
.wa {
  /* layout shell only — the hidden panel still occupies ~640px, which
     would otherwise swallow taps across most of a phone viewport */
  pointer-events: none;
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
  font-family: var(--font-body);
}

.wa__btn {
  pointer-events: auto;
  position: relative;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(4, 24, 46, 0.28);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.wa__btn:hover { transform: scale(1.06); box-shadow: 0 14px 32px rgba(4, 24, 46, 0.34); }
.wa__btn:active { transform: scale(0.98); }
.wa__btn svg { width: 32px; height: 32px; }
.wa__btn .wa__close { display: none; }
.wa.is-open .wa__btn { background: var(--petrol); }
.wa.is-open .wa__btn .wa__mark { display: none; }
.wa.is-open .wa__btn .wa__close { display: block; }

/* attention pulse — runs twice, then stops */
.wa__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: waPulse 2.2s var(--ease-out) 2;
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

.wa__panel {
  pointer-events: auto;
  width: min(92vw, 336px);
  /* never taller than the viewport: the body scrolls, the header stays put */
  max-height: calc(100dvh - 7.5rem);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 54px rgba(4, 24, 46, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out),
    visibility 0s linear var(--t-med);
}
.wa.is-open .wa__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.wa__head {
  flex: none;
  background-color: var(--petrol);
  background-image: linear-gradient(115deg, transparent 40%, rgba(200, 154, 61, 0.16) 100%);
  background-size: auto;
  color: #fff;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.wa__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.wa__avatar img { width: 34px; height: auto; }
.wa__head strong { display: block; font-size: 0.98rem; font-weight: 700; line-height: 1.25; }
.wa__head span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}
.wa__dot { width: 7px; height: 7px; border-radius: 50%; background: #25d366; }

.wa__body { padding: 1.1rem; overflow-y: auto; }
.wa__bubble {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px 12px 12px 12px;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.wa__label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.wa__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.wa__chip {
  font: inherit;
  font-size: 0.83rem;
  font-weight: 500;
  padding: 0.36rem 0.8rem;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.wa__chip:hover { border-color: var(--petrol); background: var(--surface); }
.wa__chip[aria-pressed="true"] { border-color: var(--energy); background: rgba(200, 154, 61, 0.1); font-weight: 600; }

.wa__msg {
  background: #fff;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  min-height: 84px;
  resize: vertical;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.wa__send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  font: inherit;
  font-weight: 700;
  padding: 0.8rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: #25d366;
  color: #04182e;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out);
}
.wa__send:hover { background: #1fbe5a; color: #04182e; }
.wa__note {
  font-size: 0.76rem;
  color: var(--ink-muted);
  text-align: center;
  margin: 0.6rem 0 0;
}

@media (max-width: 420px) {
  .wa__btn { width: 54px; height: 54px; }
  .wa__btn svg { width: 28px; height: 28px; }
}
@media print { .wa { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .wa__btn, .wa__panel { transition: none; }
  .wa__btn:hover { transform: none; }
  .wa__btn::after { animation: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--petrol-abyss);
  color: var(--ink-inv-muted);
  font-size: 0.93rem;
}
.site-footer a { color: var(--ink-inv-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* The brand column carries a logo, a paragraph and the social row; the other
   three carry six or seven short links. auto-fit gave all four an equal share,
   so the first ran far taller than the rest and opened a large empty area
   beside it. It gets explicit extra width instead. */
.site-footer__grid {
  display: grid;
  gap: 2.5rem 3rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(150px, 1fr));
  align-items: start;
}
@media (max-width: 1040px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}
.site-footer__brand { max-width: 46ch; }
/* The registered name under the logo, on every page. A lockup, not prose —
   it stays in Latin script in all three languages, like the mark itself. */
.site-footer__name {
  margin: 0.85rem 0 0;
  color: var(--ink-inv);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.site-footer__about { margin-top: 0.6rem; }
/* A statement, not a destination — it used to sit as a bare <li> among the
   Company links, where it read as a link that would not respond. */
.site-footer__hq {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
}
.site-footer__hq svg { flex: none; color: var(--energy); }
.site-footer h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
/* Its own band above the legal bar. Inside the brand column the input was
   squeezed to about 140px, which clipped the placeholder to "Your email addr". */
.site-footer__news {
  border-top: 1px solid var(--line-inv);
  padding-block: 1.5rem;
}
.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 27rem);
  gap: 0.9rem 3rem;
  align-items: center;
}
@media (max-width: 820px) {
  .newsletter { grid-template-columns: 1fr; align-items: start; }
}
.newsletter__copy { min-width: 0; }
.newsletter label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-inv);
  margin-bottom: 0.25rem;
}
.newsletter__row { display: flex; gap: 0.5rem; }
.newsletter input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 0.62rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-inv);
  background: oklch(1 0 0 / 0.07);
  color: var(--ink-inv);
  font-size: 1rem;   /* after `font: inherit` — the shorthand resets size; stops iOS focus-zoom */
}
.newsletter input::placeholder { color: oklch(0.72 0.02 215); }
.newsletter .btn { padding: 0.62rem 1.05rem; }
.newsletter__hint { font-size: 0.82rem; color: var(--ink-inv-muted); margin: 0; max-width: 62ch; }

.site-footer__legal {
  border-top: 1px solid var(--line-inv);
  padding-block: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  font-size: 0.83rem;
}

/* ---------- Motion ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal--d1 { transition-delay: 90ms; }
html.js .reveal--d2 { transition-delay: 180ms; }
html.js .reveal--d3 { transition-delay: 270ms; }
html.js .reveal--d4 { transition-delay: 360ms; }
html.js .reveal--d5 { transition-delay: 450ms; }

/* Staggered children.
   A grid of cards arriving all at once reads as a flash; arriving in sequence
   reads as composed. Applied to the containers that actually hold repeated
   items, so no page needs new markup to benefit. The delay is capped at the
   8th child — beyond that the wait costs more than the effect is worth. */
html.js .feature-cols.is-visible > *,
html.js .chip-grid.is-visible > *,
html.js .ticks.is-visible > li,
html.js .steps.is-visible > li,
html.js .disc-grid.is-visible > * {
  animation: revealChild 0.62s var(--ease-out) backwards;
}
html.js .feature-cols.is-visible > *:nth-child(1),
html.js .chip-grid.is-visible > *:nth-child(1),
html.js .ticks.is-visible > li:nth-child(1),
html.js .steps.is-visible > li:nth-child(1),
html.js .disc-grid.is-visible > *:nth-child(1) { animation-delay: 40ms; }
html.js .feature-cols.is-visible > *:nth-child(2),
html.js .chip-grid.is-visible > *:nth-child(2),
html.js .ticks.is-visible > li:nth-child(2),
html.js .steps.is-visible > li:nth-child(2),
html.js .disc-grid.is-visible > *:nth-child(2) { animation-delay: 105ms; }
html.js .feature-cols.is-visible > *:nth-child(3),
html.js .chip-grid.is-visible > *:nth-child(3),
html.js .ticks.is-visible > li:nth-child(3),
html.js .steps.is-visible > li:nth-child(3),
html.js .disc-grid.is-visible > *:nth-child(3) { animation-delay: 170ms; }
html.js .feature-cols.is-visible > *:nth-child(4),
html.js .chip-grid.is-visible > *:nth-child(4),
html.js .ticks.is-visible > li:nth-child(4),
html.js .steps.is-visible > li:nth-child(4),
html.js .disc-grid.is-visible > *:nth-child(4) { animation-delay: 235ms; }
html.js .feature-cols.is-visible > *:nth-child(5),
html.js .chip-grid.is-visible > *:nth-child(5),
html.js .ticks.is-visible > li:nth-child(5),
html.js .steps.is-visible > li:nth-child(5),
html.js .disc-grid.is-visible > *:nth-child(5) { animation-delay: 300ms; }
html.js .feature-cols.is-visible > *:nth-child(n + 6),
html.js .chip-grid.is-visible > *:nth-child(n + 6),
html.js .ticks.is-visible > li:nth-child(n + 6),
html.js .steps.is-visible > li:nth-child(n + 6),
html.js .disc-grid.is-visible > *:nth-child(n + 6) { animation-delay: 360ms; }
@keyframes revealChild {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

html.js .hero__in > * { opacity: 0; transform: translateY(18px); animation: heroUp 0.8s var(--ease-out) forwards; }
html.js .hero__in > *:nth-child(2) { animation-delay: 120ms; }
html.js .hero__in > *:nth-child(3) { animation-delay: 240ms; }
html.js .hero__in > *:nth-child(4) { animation-delay: 360ms; }
html.js .hero__in > *:nth-child(n+5) { animation-delay: 480ms; }   /* the hero search form is a 5th child on 44 pages */
@keyframes heroUp { to { opacity: 1; transform: none; } }

@media print {
  .site-header, .site-footer, .skip-link, .hero__cta, .cta-band__actions, .nav-toggle { display: none !important; }
  .hero, .hero--inner, .band--petrol, .cta-band { background: none !important; color: #000 !important; }
  .hero h1, .hero--inner h1, .cta-band h2,
  .band--petrol h2, .band--petrol h3, .band--petrol h4, .band--petrol p,
  .hero .lead, .hero--inner .lead, .cta-band .lead,
  .ticks li, .band--petrol .chip-grid li, .crumbs a, .crumbs [aria-current] { color: #000 !important; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  html.js .feature-cols.is-visible > *,
  html.js .chip-grid.is-visible > *,
  html.js .ticks.is-visible > li,
  html.js .steps.is-visible > li,
  html.js .disc-grid.is-visible > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal, html.js .hero__in > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* the staggered children animate on their own keyframes, so they need
     their own opt-out — the .reveal rule above does not reach them */
  html.js .feature-cols.is-visible > *,
  html.js .chip-grid.is-visible > *,
  html.js .ticks.is-visible > li,
  html.js .steps.is-visible > li,
  html.js .disc-grid.is-visible > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .card, .acc-card, .btn, .card__link .arrow, .btn .arrow, .split__art img { transition: none; }
  .split__art:hover img { transform: none; }
  .faq details[open] > div, .course-cat[open] > ul { animation: none; }
}

/* ---------- Hero site search ---------- */
.hero-search {
  position: relative;
  z-index: 5;
  margin-top: clamp(1.6rem, 3vw, 2.3rem);
  max-width: 640px;
}
.hero-search__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.hero-search__field:focus-within {
  border-color: var(--energy);
  background: rgba(255, 255, 255, 0.16);
}
.hero-search__icon { flex: none; width: 19px; height: 19px; color: rgba(255, 255, 255, 0.75); }
.hero-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink-inv);
  font: inherit;
  font-size: 1rem;
  padding: 0.62rem 0;
}
.hero-search input::placeholder { color: rgba(255, 255, 255, 0.62); }
.hero-search input:focus { outline: none; }
.hero-search input:focus-visible {
  /* --energy-strong is under 3:1 on the navy hero; --energy measures 5.6:1 */
  outline: 2px solid var(--energy);
  outline-offset: 0;
}
.hero-search input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.6; }
.hero-search__go {
  flex: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  padding: 0.66rem 1.15rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.hero-search__go:hover { background: rgba(255, 255, 255, 0.28); }
.hero-search__hint {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-inv-muted);
}
.hero-search__hint button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ink-inv);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hero-search__panel {
  position: absolute;
  inset-inline: 0;
  top: auto;
  margin-top: 0.5rem;   /* static position: self-heals when the hint is hidden at <=560px */
  z-index: 30;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 24px 54px oklch(0.22 0.02 235 / 0.22);
  padding: 0.5rem;
}
.hero-search__panel[hidden] { display: none; }
.hero-search__gh {
  margin: 0.55rem 0 0.3rem;
  padding-inline: 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hero-search__gh:first-child { margin-top: 0.25rem; }
.hero-search__opt {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--petrol-deep);
  text-decoration: none;
  line-height: 1.35;
}
.hero-search__opt:hover,
.hero-search__opt.is-active {
  background: var(--surface);
  color: var(--petrol-strong);
}
.hero-search__opt.is-active { outline: 2px solid var(--petrol); outline-offset: -2px; }
.hero-search__opt span:first-child { flex: 1 1 auto; }
.hero-search__opt mark { background: rgba(200, 154, 61, 0.3); color: inherit; border-radius: 3px; }
.hero-search__opt em {
  flex: none;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.hero-search__more {
  display: block;
  padding: 0.6rem 0.7rem;
  border-top: 1px solid var(--line);
  margin-top: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--petrol);
  text-decoration: none;
}
.hero-search__more:hover { background: var(--surface); }
.hero-search__none { padding: 0.9rem 0.7rem; margin: 0; font-size: 0.9rem; color: var(--ink-muted); }
@media (max-width: 560px) {
  .hero-search__go { padding: 0.66rem 0.9rem; }
  .hero-search__hint { display: none; }
  /* keeps "programmes" in the accessible name while freeing a line per row */
  .hero-search__unit {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------- Discipline overview cards ---------- */
.disc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1.05rem;
}
.disc-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.4rem 1.35rem 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}
.disc-card:hover {
  border-color: rgba(11, 45, 77, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px oklch(0.22 0.02 235 / 0.1);
}
.disc-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--petrol);
}
.disc-card__icon svg { width: 22px; height: 22px; }
.disc-card h3 { margin: 0; font-size: 1.06rem; line-height: 1.3; color: var(--petrol-deep); }
.disc-card__blurb { margin: 0; font-size: 0.9rem; color: var(--ink-muted); }
.disc-card__stats {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--petrol);
}
.disc-card__stats strong { font-size: 1.02rem; }
.disc-card__stats span { color: rgba(11, 45, 77, 0.55); margin-inline: 0.15rem; }
.disc-card__bodies {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-muted);
}

/* ---------- Category toolbar + rows ---------- */
.cat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-bottom: 1.3rem;
}
.cat-toolbar .course-search { flex: 1 1 260px; max-width: 420px; }
.cat-toolbar__actions { display: flex; gap: 0.5rem; }
.cat-toolbar [data-cat-count] { margin: 0; margin-inline-start: auto; }
.btn--quiet {
  border-color: var(--line);
  background: #fff;
  color: var(--petrol);
}
.btn--quiet:hover { border-color: var(--petrol); background: var(--surface); color: var(--petrol-strong); }
.btn--sm { padding: 0.5rem 0.9rem; font-size: 0.86rem; }

.cat-group[hidden] { display: none; }
.cat-rows { padding: 0.2rem 0 0.4rem; }
.course-cat[open] > .cat-rows { animation: contentFade 0.45s var(--ease-out); }
.cat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.85rem 0.2rem;
  border-top: 1px solid var(--line);
}
.cat-row:first-child { border-top: 0; }
.cat-row[hidden] { display: none; }
.cat-row__name {
  font-weight: 600;
  color: var(--petrol-deep);
  line-height: 1.4;
}
.cat-row__bodies { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cat-row__n { font-size: 0.88rem; color: var(--ink-muted); white-space: nowrap; }
.cat-row__n strong { color: var(--petrol); font-weight: 700; }
.pill {
  display: inline-block;
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--petrol);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.pill:hover { border-color: var(--petrol); background: #fff; color: var(--petrol-strong); }
.cat-row mark { background: rgba(200, 154, 61, 0.3); color: inherit; border-radius: 3px; }
.cat-empty { padding: 1.4rem 0; color: var(--ink-muted); }
@media (min-width: 760px) {
  .cat-row {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 8.5rem;
    align-items: baseline;
    gap: 1rem;
  }
  .cat-row__n { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .disc-card:hover { transform: none; }
  .course-cat[open] > .cat-rows { animation: none; }
}

/* Six-item grids were authored for three columns (their stagger runs in a
   3-cycle); four columns leaves a ragged 4+2 last row above 1130px. */
@media (min-width: 1130px) {
  .feature-cols:has(> :nth-child(5):last-child),
  .feature-cols:has(> :nth-child(6):last-child),
  .disc-grid:has(> :nth-child(5):last-child),
  .disc-grid:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Cards lift on hover; keyboard users got nothing. :has(:focus-visible) and
   not :focus-within — the latter matches plain :focus, so a mouse click would
   leave the card stuck lifted. */
.card:has(a.stretch:focus-visible),
.acc-card:has(a.stretch:focus-visible),
.disc-card:focus-visible {
  border-color: rgba(11, 45, 77, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px oklch(0.22 0.02 235 / 0.1);
}
.card:has(a.stretch:focus-visible),
.acc-card:has(a.stretch:focus-visible) {
  outline: 2px solid var(--energy-strong);
  outline-offset: 3px;
}
.card:has(a.stretch:focus-visible) a.stretch:focus-visible,
.acc-card:has(a.stretch:focus-visible) a.stretch:focus-visible { outline: none; }
.pill:active { transform: translateY(1px); }

/* The accreditation wall: one asset was exported on a different canvas. */
.acc-card__logo[src$="oshacademy.png"] { height: 37px; }
.body-logo[src$="oshacademy.png"] { height: 48px; }

/* Heading for each accreditation card (the organisation names this page ranks
   for were previously only in alt text). */
.acc-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--petrol);
  letter-spacing: 0.01em;
  margin: 0;   /* .acc-card is a flex column with a gap — a margin would stack */
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero__in > * { animation: none; opacity: 1; transform: none; }
  .card:hover, .acc-card:hover,
  .card:has(a.stretch:focus-visible), .acc-card:has(a.stretch:focus-visible) { transform: none; }
  .pill:active { transform: none; }
}

/* ---------- Social profiles (footer) ---------- */
.social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  color: var(--ink-inv-muted);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}
.social a:hover,
.social a:focus-visible {
  border-color: var(--energy);
  color: var(--energy);
  background: rgba(255, 255, 255, 0.06);
}





/* ---------- Language switcher (header dropdown) ---------- */
.langs { margin-inline-end: 0.2rem; }
.langs__btn { gap: 0.4rem; }
.langs__globe { flex: none; opacity: 0.75; }
.langs__menu { min-width: 210px; }
.langs__menu a[aria-current="true"] {
  background: var(--surface);
  color: var(--petrol);
  font-weight: 600;
}
@media (max-width: 1020px) {
  /* in the drawer the dropdown is a plain block like the other nav groups */
  .langs { width: 100%; }
  .langs__btn { width: 100%; justify-content: flex-start; }
}

@media (min-width: 1021px) {
  /* Three equal-sided columns so the links centre against the HEADER, not
     against the gap left over by the logo and the actions — those two differ
     by ~130px, which is what pushed the nav off-centre. display:contents lets
     the nav's own children become grid items without extra markup. */
  .site-header__in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-nav { display: contents; }
  .site-nav > ul { grid-column: 2; justify-self: center; }
  .site-nav__actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
}

/* ---------- ISO certificates + lightbox ---------- */
.certs__title { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--petrol-deep); }
.certs__lead { margin: 0 0 1.1rem; font-size: 0.92rem; color: var(--ink-muted); }
.certs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cert {
  position: relative;
  /* flex column + margin-top:auto on the caption keeps all three cards the
     same height when one label wraps to two lines */
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
  text-align: start;
  font: inherit;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}
.cert img {
  display: block;
  width: 100%;
  height: auto;
  /* the scan's own margins are generous — crop a little so the card reads as
     a certificate rather than a sheet of paper */
  aspect-ratio: 3 / 3.4;
  object-fit: cover;
  object-position: top center;
}
.cert__meta {
  display: block;
  margin-top: auto;
  padding: 0.6rem 0.7rem 0.7rem;
  border-top: 1px solid var(--line);
}
.cert__meta strong { display: block; font-size: 0.88rem; color: var(--petrol); }
.cert__meta span { display: block; font-size: 0.76rem; color: var(--ink-muted); line-height: 1.4; }
.cert__zoom {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.5rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(11, 45, 77, 0.86);
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.cert:hover,
.cert:focus-visible {
  border-color: var(--petrol);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px oklch(0.22 0.02 235 / 0.14);
}
.cert:hover .cert__zoom,
.cert:focus-visible .cert__zoom { opacity: 1; transform: scale(1); }

@media (max-width: 560px) {
  .certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certs__grid li:last-child { grid-column: span 2; max-width: 50%; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 900);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(4, 24, 46, 0.86);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__inner {
  position: relative;
  max-width: min(1000px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transform: scale(0.97);
  transition: transform var(--t-med) var(--ease-out);
}
.lightbox.is-open .lightbox__inner { transform: scale(1); }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--ink-inv);
}
.lightbox__caption { font-size: 0.92rem; font-weight: 600; }
.lightbox__caption span { display: block; font-weight: 400; font-size: 0.82rem; color: var(--ink-inv-muted); }
.lightbox__nav { display: flex; gap: 0.4rem; }
.lightbox__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-inv);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.22); border-color: var(--energy); }
.lightbox__close {
  position: absolute;
  top: -3rem;
  inset-inline-end: 0;
}
@media (max-width: 560px) {
  .lightbox__close { top: auto; bottom: -3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cert:hover, .cert:focus-visible { transform: none; }
  .lightbox, .lightbox__inner { transition: none; }
  .lightbox__inner { transform: none; }
}

/* ---------- Social icons under the logo (hide on scroll) ---------- */

/* ---------- Social profiles inside the WhatsApp widget ---------- */
.wa__social {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.wa__social span {
  margin-inline-end: auto;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.wa__social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--petrol);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}
.wa__social a:hover,
.wa__social a:focus-visible {
  border-color: var(--energy);
  color: var(--energy-strong);
  background: var(--surface);
}

/* ---------------------------------------------------------------- consent --
   Opt-in gate (owner's decision, 18 August 2026). The bar is hidden in the
   markup and revealed by the gate script only when no choice has been stored,
   so a returning visitor never sees it twice and a no-JS visitor never sees a
   bar they could not act on — which is correct, because with no JavaScript no
   tag loads either.

   Fixed to the bottom rather than a centre modal: nothing here is urgent
   enough to take the page away from someone, and a modal on a first visit is
   the pattern most likely to be dismissed without reading. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--petrol-deep);
  color: var(--ink-inv);
  border-top: 3px solid var(--energy);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
}
.consent[hidden] { display: none; }
.consent__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
}
.consent__text {
  margin: 0;
  flex: 1 1 420px;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--ink-inv-muted);
  max-width: 78ch;
}
.consent__acts { display: flex; gap: 10px; flex-shrink: 0; }
/* Both choices get the same comfortable target. btn--sm renders at 32px, which
   clears the WCAG 2.5.8 minimum but is mean for a decision someone has to make
   before reading the page — and a Decline that is harder to hit than Accept is
   its own kind of dark pattern. Equal size, equal ease. */
.consent__btn { white-space: nowrap; min-height: 44px; padding-inline: 20px; }
/* The bar sits on a dark ground, so the decline button follows the same rule
   the rest of the site already applies to ghost buttons on dark surfaces. */
.consent .btn--ghost { border-color: rgba(255, 255, 255, 0.5); color: #fff; background: transparent; }
.consent .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; }

@media (max-width: 640px) {
  .consent__inner { padding: 14px 18px; gap: 12px; }
  .consent__acts { width: 100%; }
  .consent__acts .btn { flex: 1 1 auto; justify-content: center; }
}