/* ==========================================================================
   WIN OSHE Services  |  Design System
   Occupational Safety, Health & Environment  |  Yangon, Myanmar

   Contents
     1. Theme tokens (light + dark)
     2. Reset and base type
     3. Layout primitives
     4. Buttons and links
     5. Header, navigation, toggles
     6. Hero and statistics
     7. Cards, lists, accordions
     8. Logo walls
     9. Team, page headers, forms
    10. Footer
    11. Utilities, responsive, print
   ========================================================================== */

/* --- 1. Theme tokens ---------------------------------------------------- */

:root {
  /* Brand constants: identical in both themes */
  --brand-navy: #0a2545;
  --brand-navy-deep: #04101f;
  --amber-400: #ffc04d;
  --amber-500: #ffb020;
  --amber-600: #e08c00;
  --teal-500: #12868f;     /* icons: non-text, 3:1 floor */
  --role: #107881;         /* role labels: text, 4.5:1 floor */

  /* Semantic surfaces */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f6f9fc;
  --surface-sunk: #eef2f7;
  --logo-tile: #ffffff;

  /* Semantic ink */
  --heading: #061a33;
  --text: #3b4a5e;
  --text-muted: #5c6e84;   /* 4.65:1 on the banded surface */
  --link: #1d4a7a;
  --link-hover: #0a2545;

  /* Lines */
  --border: #e3e9f0;
  --border-strong: #c9d5e3;

  /* Accent that adapts */
  --accent: var(--amber-500);
  --accent-ink: #966200;   /* 4.5:1 on every light surface; the amber accent is unchanged */
  --on-accent: #06182e;

  /* Type */
  --font-display: "Plus Jakarta Sans", "Noto Sans Myanmar", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Noto Sans Myanmar", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.14vw, 1.06rem);
  --step-1: clamp(1.14rem, 1.08rem + 0.28vw, 1.3rem);
  --step-2: clamp(1.34rem, 1.22rem + 0.56vw, 1.68rem);
  --step-3: clamp(1.6rem, 1.4rem + 0.98vw, 2.24rem);
  --step-4: clamp(1.9rem, 1.55rem + 1.75vw, 3rem);
  --step-5: clamp(2.2rem, 1.65rem + 2.7vw, 3.8rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 5.5rem;

  /* Shape */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-sm: 0 2px 8px rgba(6, 26, 51, 0.07);
  --shadow-md: 0 8px 26px rgba(6, 26, 51, 0.10);
  --shadow-lg: 0 22px 54px rgba(6, 26, 51, 0.16);

  --container: 1180px;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* Dark elevation ladder. Each step must be lighter than the one below it,
   otherwise cards disappear into the page:
     bg  <  surface-alt (banded sections)  <  surface (cards)  <  surface-sunk */
[data-theme="dark"] {
  --bg: #070e18;
  --surface: #101f31;
  --surface-alt: #0c1725;
  --surface-sunk: #16283d;
  --logo-tile: #eef2f7;

  --heading: #eef3f9;
  --text: #adbdd0;
  --text-muted: #7f91a7;   /* clears 4.5:1 on the sunken surface too */
  --link: #8ec0f0;
  --link-hover: #b8d8f7;

  --border: #1b2c42;
  --border-strong: #27405e;

  --accent-ink: var(--amber-400);
  --role: #2aa3ad;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 26px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 22px 54px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Honour the operating system until the visitor picks a side. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070e18;
    --surface: #101f31;
    --surface-alt: #0c1725;
    --surface-sunk: #16283d;
    --logo-tile: #eef2f7;
    --heading: #eef3f9;
    --text: #adbdd0;
    --text-muted: #7f91a7;
    --link: #8ec0f0;
    --link-hover: #b8d8f7;
    --border: #1b2c42;
    --border-strong: #27405e;
    --accent-ink: #ffc04d;
    --role: #2aa3ad;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 26px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 22px 54px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

/* --- 2. Reset and base type --------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--amber-500);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--amber-500); color: #06182e; }

/* Bilingual scaffolding. Burmese content is not published yet; these rules
   stay in place so translations can be switched on without a CSS change. */
[lang="my"] { display: none; }
body.lang-my [lang="en"] { display: none; }
body.lang-my [lang="my"] { display: revert; }
body.lang-my { font-family: "Noto Sans Myanmar", var(--font-body); line-height: 1.9; }

/* --- 3. Layout primitives ----------------------------------------------- */

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-8); }
.section--alt { background: var(--surface-alt); }

.section--ink {
  background: linear-gradient(158deg, #0a1a2e, var(--brand-navy-deep));
  color: #b6c6d8;
}
.section--ink h2 { color: #ffffff; }
.section--ink .lede { color: #c3d2e2; }

.stack > * + * { margin-top: var(--sp-4); }
.grid { display: grid; gap: var(--sp-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid > * { min-width: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}
.split--top { align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

.section-head { max-width: 720px; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--sp-3);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--amber-500); flex: none; }
.section-head--center .eyebrow::before { display: none; }
.section--ink .eyebrow { color: var(--amber-400); }

.lede { font-size: var(--step-1); color: var(--text-muted); line-height: 1.6; }

/* --- 4. Buttons and links ----------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1;
  padding: 0.92rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
  white-space: nowrap;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--amber-500);
  color: #06182e;
  box-shadow: 0 6px 18px rgba(255, 176, 32, 0.30);
}
.btn--primary:hover { background: var(--amber-400); color: #06182e; box-shadow: 0 10px 26px rgba(255, 176, 32, 0.40); }

.btn--dark { background: var(--brand-navy); color: #ffffff; }
.btn--dark:hover { background: #143a63; color: #ffffff; }
[data-theme="dark"] .btn--dark { background: #16324f; }
[data-theme="dark"] .btn--dark:hover { background: #1d4270; }

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}
.btn--ghost:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.13); color: #ffffff; }

.btn--outline { border-color: var(--border-strong); color: var(--heading); background: var(--surface); }
.btn--outline:hover { border-color: var(--heading); color: var(--heading); }

.btn--sm { padding: 0.62rem 1.05rem; font-size: 0.88rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--link);
}
.link-arrow svg { transition: transform 0.2s var(--ease); flex: none; }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- 5. Header, navigation, toggles ------------------------------------- */

.topbar { background: var(--brand-navy-deep); color: #8fa1b6; font-size: 0.82rem; }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 40px; flex-wrap: wrap;
}
.topbar a { color: #b6c6d8; }
.topbar a:hover { color: var(--amber-400); }
.topbar__group { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar__item svg { opacity: 0.6; flex: none; }

/* The bar needs more room than the text column does. Content stays at
   1180px; only the header is allowed to run wider. */
.site-header .container { --container: 1320px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s var(--ease), background-color 0.25s ease;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--bg); }
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.brand__mark {
  width: 42px; height: 42px; border-radius: 9px;
  background: #ffffff;
  display: grid; place-items: center; flex: none;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem;
  color: var(--heading); letter-spacing: -0.02em;
}
.brand__tag {
  font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  flex-wrap: nowrap;
  /* flex: none is load bearing. With min-width: 0 the list was allowed to
     shrink below its own contents, and because the labels cannot wrap they
     spilled out and ran underneath the buttons to the right. Refusing to
     shrink means any shortfall shows up as the burger breakpoint being
     wrong, which the width budget in verify.py then catches. */
  flex: none;
}
.nav__link {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 0.93rem; color: var(--text);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm); position: relative;
  white-space: nowrap;             /* "About Us" must never break in two */
  transition: color 0.15s, background-color 0.15s;
}
.nav__link:hover { color: var(--heading); background: var(--surface-sunk); }
.nav__link[aria-current="page"] { color: var(--heading); }
/* The underline is inset by the same amount as the link padding, so it
   tracks the clamp above rather than drifting from the text. */
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.16rem;
  height: 2.5px; border-radius: 2px; background: var(--amber-500);
}

/* --- Dropdown submenus ---------------------------------------------------
   Opened by hover and by :focus-within, so they work with a mouse and with
   the Tab key without any JavaScript. The parent is still a real link to the
   section landing page, matching the original WordPress menu. */
.has-sub { position: relative; }
.has-sub > .nav__link { display: flex; align-items: center; gap: 0.3rem; }
.nav__chev { transition: transform 0.2s var(--ease); opacity: 0.55; flex: none; }
.has-sub:hover > .nav__link .nav__chev,
.has-sub:focus-within > .nav__link .nav__chev { transform: rotate(180deg); opacity: 1; }

.subnav {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  min-width: 232px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  display: grid;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
              visibility 0s linear 0.18s;
  z-index: 101;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.subnav a {
  display: block;
  padding: 0.62rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
}
.subnav a:hover { background: var(--surface-sunk); color: var(--heading); }
.subnav a[aria-current="page"] { color: var(--accent-ink); background: var(--surface-sunk); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* Segmented toggle, shared by language and theme controls */
.seg {
  display: inline-flex;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  border: 0; background: transparent;
  font-family: var(--font-display); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.04em; color: var(--text-muted);
  padding: 0.34rem 0.66rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.18s, color 0.18s;
}
.seg button:hover:not(:disabled) { color: var(--heading); }
.seg button[aria-pressed="true"] { background: var(--brand-navy); color: #ffffff; }
[data-theme="dark"] .seg button[aria-pressed="true"] { background: #1d4270; }
.seg button:disabled { opacity: 0.42; cursor: not-allowed; }

/* One button that shows the theme it will switch to, rather than a pair.
   Saves roughly 60px of header width. */
.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-sunk);
  color: var(--text);
  border-radius: 999px;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.icon-btn:hover { color: var(--heading); border-color: var(--border-strong); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Correct icon even with JavaScript disabled on a dark system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.nav__burger {
  display: none; width: 44px; height: 44px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); place-items: center;
}
.nav__burger span {
  display: block; width: 19px; height: 2px; background: var(--heading);
  border-radius: 2px; position: relative; transition: background-color 0.2s;
}
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  background: var(--heading); border-radius: 2px;
  transition: transform 0.24s var(--ease), top 0.2s;
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* --- 6. Hero and statistics --------------------------------------------- */

.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(255, 176, 32, 0.15), transparent 62%),
    radial-gradient(760px 420px at 8% 106%, rgba(18, 134, 143, 0.22), transparent 60%),
    linear-gradient(158deg, #0a1a2e 0%, var(--brand-navy-deep) 62%, #020a15 100%);
  color: #b6c6d8;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 26%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 12%, transparent 76%);
  z-index: -1;
}
.hero__inner {
  padding-block: clamp(3.25rem, 2.8rem + 5.5vw, 6.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}
.hero__inner > * { min-width: 0; }

.hero h1 { color: #ffffff; margin-bottom: var(--sp-5); }
/* No nowrap here: on narrow columns it pushed the headline under the card. */
.hero h1 em { font-style: normal; color: var(--amber-500); }

.hero__lede {
  font-size: var(--step-1);
  color: #c3d2e2;
  max-width: 54ch;
  margin-bottom: var(--sp-6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.34);
  color: var(--amber-400);
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.03em; padding: 0.42rem 0.85rem;
  border-radius: 999px; margin-bottom: var(--sp-5);
  max-width: 100%;
}
.hero__badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber-500);
  box-shadow: 0 0 0 0 rgba(255, 176, 32, 0.7);
  animation: pulse 2.4s infinite; flex: none;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(255, 176, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0); }
}

.cred-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
}
.cred-card__title {
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--amber-400); margin-bottom: var(--sp-5);
}
.cred-list { list-style: none; display: grid; gap: 0.9rem; }
.cred-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem;
  align-items: start; font-size: 0.94rem; color: #c3d2e2; line-height: 1.55;
}
.cred-list svg { color: var(--amber-500); margin-top: 3px; flex: none; }
.cred-list strong { color: #ffffff; font-weight: 650; }
.cred-list a { color: #ffffff; }
.cred-list a:hover { color: var(--amber-400); }

.stats { background: var(--brand-navy); border-top: 1px solid rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .stats { background: #0a1a2e; }

/* Dividers are drawn on every cell and the outer ones are pulled outside the
   clipped grid. That keeps the rules correct at any column count, so the
   layout does not need a breakpoint for each reflow. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  overflow: hidden;
}
.stat {
  padding: var(--sp-6) var(--sp-5); text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  margin-right: -1px;
  margin-bottom: -1px;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem);
  font-weight: 800; color: var(--amber-500); line-height: 1;
  letter-spacing: -0.03em; display: block; margin-bottom: 0.5rem;
}
.stat__label { font-size: 0.83rem; color: #b6c6d8; letter-spacing: 0.02em; line-height: 1.45; }

/* --- 7. Cards, lists, accordions ---------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease), border-color 0.26s var(--ease);
  display: flex; flex-direction: column; height: 100%;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card__icon {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: linear-gradient(145deg, var(--brand-navy), #1d4a7a);
  display: grid; place-items: center; color: var(--amber-500);
  margin-bottom: var(--sp-5); flex: none;
}
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.card p { color: var(--text-muted); font-size: 0.96rem; }
.card__foot { margin-top: auto; padding-top: var(--sp-5); }
a.card { color: inherit; }
a.card:hover h3 { color: var(--link); }
.card--accent { border-top: 3px solid var(--amber-500); }
/* One step above the surrounding surface so it reads as a panel in both
   themes. Using --surface-alt here made it vanish into the dark background. */
.card--sunk { background: var(--surface-sunk); }

.tick-list { list-style: none; display: grid; gap: 0.62rem; }
.tick-list li {
  display: grid; grid-template-columns: 19px 1fr; gap: 0.65rem;
  align-items: start; font-size: 0.95rem; line-height: 1.55;
}
.tick-list svg { color: var(--teal-500); margin-top: 4px; flex: none; }
.section--ink .tick-list svg { color: var(--amber-500); }

.acc {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
.acc + .acc { margin-top: var(--sp-3); }
/* The control is wrapped in a heading so screen reader users can jump
   between course groups. The heading carries no visual weight of its own. */
.acc__head { margin: 0; font-size: inherit; font-weight: inherit; }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: 1.15rem var(--sp-5);
  background: var(--surface); border: 0; text-align: left;
  font-family: var(--font-display); font-weight: 650; font-size: 1.02rem;
  color: var(--heading); transition: background-color 0.18s;
}
.acc__btn:hover { background: var(--surface-alt); }
.acc__btn .chev { transition: transform 0.26s var(--ease); color: var(--text-muted); flex: none; }
.acc__btn[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--accent-ink); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); }
.acc__panel > div { overflow: hidden; }
/* The open state is carried by the wrapper rather than an adjacent sibling
   selector. Wrapping the button in a heading for screen readers moved the
   panel out of the button's sibling position and silently broke the previous
   `.acc__btn[aria-expanded="true"] + .acc__panel` rule. The class is also
   present in the markup, so the first group is open without JavaScript. */
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__body { padding: var(--sp-5); border-top: 1px solid var(--border); }

.course-grid {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 0.55rem;
}
.course-grid li {
  display: grid; grid-template-columns: 8px 1fr; gap: 0.7rem;
  align-items: start; font-size: 0.93rem; color: var(--text-muted);
  padding: 0.42rem 0; line-height: 1.5;
}
.course-grid li::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--amber-500); margin-top: 0.55em;
}

.numbered {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-5); list-style: none; counter-reset: n;
}
.numbered > li {
  counter-increment: n; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-6); position: relative;
  transition: box-shadow 0.24s var(--ease), transform 0.24s var(--ease);
}
.numbered > li:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.numbered > li::before {
  content: "0" counter(n);
  font-family: var(--font-display); font-weight: 800; font-size: 0.86rem;
  letter-spacing: 0.08em; color: var(--accent-ink);
  display: block; margin-bottom: var(--sp-3);
}
.numbered h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.numbered p { font-size: 0.95rem; color: var(--text-muted); }

.notice {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-4);
  background: color-mix(in srgb, var(--amber-500) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber-500) 34%, transparent);
  border-radius: var(--radius); padding: var(--sp-5);
  font-size: 0.94rem; color: var(--text);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .notice { background: var(--surface-alt); border-color: var(--border-strong); }
}
.notice svg { color: var(--accent-ink); margin-top: 2px; flex: none; }
.notice strong { color: var(--heading); }

/* --- 8. Logo walls ------------------------------------------------------ */

/* 140px lets all eight PPE marks sit on one row at full width, and six
   accreditation marks on one row from roughly 900px up. */
.logo-wall {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.logo-wall__item {
  background: var(--logo-tile);
  min-height: 122px; display: grid; place-items: center;
  padding: var(--sp-5) var(--sp-4); text-align: center; gap: 0.5rem;
  transition: box-shadow 0.2s, transform 0.2s var(--ease);
}
.logo-wall__item:hover { box-shadow: inset 0 0 0 2px var(--amber-500); }
/* Logos display in their own colours. Partner marks are a credibility signal
   and desaturating them undercuts the point of showing them. */
.logo-wall__item img {
  max-height: 56px; width: auto; object-fit: contain;
  transition: transform 0.25s var(--ease);
}
.logo-wall__item:hover img { transform: scale(1.04); }
.logo-wall__item span {
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #46566b;
}

.brand-logo {
  min-height: 56px; display: flex; align-items: center;
  margin-bottom: var(--sp-4);
}
.brand-logo img { max-height: 48px; width: auto; object-fit: contain; }
/* Tile behind manufacturer logos so white-background marks stay legible
   when the page is in dark mode. */
[data-theme="dark"] .brand-logo {
  background: var(--logo-tile); border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem; align-self: flex-start;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo {
    background: var(--logo-tile); border-radius: var(--radius-sm);
    padding: 0.55rem 0.7rem; align-self: flex-start;
  }
}

/* Specification list used on the course pages */
.spec { margin: 0; display: grid; gap: 0.9rem; }
.spec dt {
  font-family: var(--font-display); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink);
}
.spec dd { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--text-muted); }

/* The Zero Harm poster and the sample certificate are tall portrait images.
   Cap the height so they sit beside the text rather than dominating it. */
.commitment-figure, .cert-figure { margin: 0; }
.commitment-figure img, .cert-figure img {
  width: 100%; max-width: 460px; height: auto;
  border-radius: var(--radius); background: #fff;
  box-shadow: var(--shadow-lg); margin-inline: auto;
}
.cert-figure img { box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.cert-figure figcaption {
  margin-top: 0.8rem; text-align: center;
  font-size: var(--step--1); color: var(--text-muted);
}

.img-fallback {
  display: block; padding: var(--sp-6) var(--sp-4); text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  color: var(--text-muted); font-size: var(--step--1);
}

/* Client logo sheets are wide, dense scans. Stacking them full width keeps
   the individual marks readable; a three column grid made them too small.
   They sit on a white tile in both themes because the marks were drawn for
   a white ground. */
.client-wall { display: grid; gap: var(--sp-4); }
.client-sheet {
  display: block;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
}
.client-sheet img { width: 100%; height: auto; }

.container--legal { max-width: 820px; }
.container--legal p { font-size: 0.92rem; color: var(--text-muted); }

/* --- 9. Team, page headers, forms --------------------------------------- */

.person {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--amber-500); border-radius: var(--radius);
  padding: var(--sp-6);
}
.person + .person { margin-top: var(--sp-4); }
.person__name {
  font-family: var(--font-display); font-weight: 750; font-size: var(--step-1);
  color: var(--heading); margin-bottom: 0.28rem;
}
.person__role {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--role); margin-bottom: var(--sp-4);
}
.person__bio { font-size: 0.95rem; color: var(--text-muted); }
.person__creds { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--sp-4); }
.chip {
  display: inline-block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--heading); background: var(--surface-sunk);
  border: 1px solid var(--border); padding: 0.26rem 0.6rem; border-radius: 999px;
}

.page-hero {
  background:
    radial-gradient(760px 320px at 88% 0%, rgba(255, 176, 32, 0.13), transparent 60%),
    linear-gradient(150deg, #0a1a2e, var(--brand-navy-deep));
  color: #b6c6d8;
  padding-block: clamp(2.6rem, 2rem + 3.4vw, 4.4rem);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px;
  background: repeating-linear-gradient(135deg, var(--amber-500) 0 18px, #0a1a2e 18px 36px);
  opacity: 0.85;
}
.page-hero h1 { color: #ffffff; font-size: var(--step-4); margin-bottom: var(--sp-3); }
.page-hero p { color: #c3d2e2; max-width: 62ch; font-size: var(--step-1); }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  list-style: none; font-size: 0.83rem; color: #8fa1b6; margin-bottom: var(--sp-4);
}
.crumbs a { color: #8fa1b6; }
.crumbs a:hover { color: var(--amber-400); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.crumbs [aria-current] { color: var(--amber-400); }

.info-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6);
}
.info-block h3 {
  font-size: 1.02rem; display: flex; align-items: center;
  gap: 0.6rem; margin-bottom: var(--sp-4);
}
.info-block h3 svg { color: var(--accent-ink); flex: none; }
.info-block address {
  font-style: normal; color: var(--text-muted); font-size: 0.96rem; line-height: 1.7;
}
.info-block a { font-weight: 600; }

.field { display: grid; gap: 0.4rem; margin-bottom: var(--sp-4); }
.field label { font-family: var(--font-display); font-size: 0.86rem; font-weight: 650; color: var(--heading); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.96rem; padding: 0.78rem 0.95rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--heading);
  transition: border-color 0.18s, box-shadow 0.18s; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-note { font-size: 0.85rem; color: var(--text-muted); margin-top: var(--sp-4); }

.cta-band {
  background:
    radial-gradient(620px 300px at 12% 110%, rgba(18, 134, 143, 0.32), transparent 62%),
    linear-gradient(120deg, var(--brand-navy), var(--brand-navy-deep));
  border-radius: var(--radius-xl);
  padding: clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);
  color: #c3d2e2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6); align-items: center; box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #ffffff; font-size: var(--step-3); margin-bottom: var(--sp-3); }
.cta-band p { margin: 0; color: #c3d2e2; max-width: 54ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- 10. Footer --------------------------------------------------------- */

.site-footer {
  background: var(--brand-navy-deep); color: #8fa1b6;
  padding-top: var(--sp-8); font-size: 0.93rem;
}
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--sp-6); padding-bottom: var(--sp-7);
}
.site-footer h2 {
  color: #ffffff; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; display: grid; gap: 0.6rem; }
.site-footer a { color: #8fa1b6; }
.site-footer a:hover { color: var(--amber-400); }
.footer__brand .brand__name { color: #ffffff; }
.footer__brand .brand__tag { color: #6f8098; }
.footer__about { margin-top: var(--sp-4); max-width: 42ch; line-height: 1.7; color: #7b8da4; }
.footer__address { margin-top: 1.1rem; line-height: 1.7; color: #7b8da4; }

.social { display: flex; gap: 0.55rem; margin-top: var(--sp-5); }
.social a {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09);
  display: grid; place-items: center; color: #b6c6d8;
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.social a:hover { background: var(--amber-500); color: #06182e; transform: translateY(-2px); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); font-size: 0.85rem; color: #7b8da4;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); list-style: none; }

/* --- 11. Utilities, responsive, print ----------------------------------- */

.center { text-align: center; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--text-muted); }
.small { font-size: var(--step--1); }
.stack-sm { display: grid; gap: 0.6rem; justify-items: start; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--amber-500); color: #06182e;
  padding: 0.8rem 1.2rem; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   Breakpoints are set where this particular content runs out of room,
   measured against the widest label in each component, not at generic
   device sizes.

     1220  six navigation items plus dropdown chevrons stop fitting
     1040  two column sections become cramped
      700  the header CTA competes with the burger
      640  phone layout
   ------------------------------------------------------------------ */

@media (max-width: 1340px) {
  /* Contact is already the last item in the bar, so the button is the
     first thing to go when the header tightens. */
  .nav__cta { display: none; }
}

@media (max-width: 1040px) {
  .hero__inner { grid-template-columns: 1fr; }
  .split, .split--wide { grid-template-columns: 1fr; gap: var(--sp-7); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cta-band { grid-template-columns: 1fr; }
}

@media (max-width: 1220px) {
  :root { --header-h: 66px; }

  .nav__burger { display: grid; }

  .nav__menu {
    position: fixed; inset: 0 0 0 auto;
    width: min(88vw, 340px); background: var(--bg);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(var(--header-h) + 1.5rem) var(--sp-5) var(--sp-6);
    box-shadow: -18px 0 50px rgba(4, 16, 31, 0.24);
    transform: translateX(102%);
    transition: transform 0.34s var(--ease);
    overflow-y: auto; z-index: 99;
  }
  body.nav-open .nav__menu { transform: none; }
  .nav__menu .nav__link {
    padding: 0.95rem 0.6rem; font-size: 1.02rem;
    border-bottom: 1px solid var(--border); border-radius: 0;
    white-space: normal;           /* room to breathe in the slide-out panel */
  }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] {
    color: var(--accent-ink); border-left: 3px solid var(--amber-500); padding-left: 0.9rem;
  }

  /* No hover on a touch screen, so the submenus are simply always open
     inside the panel, indented under their parent. */
  .has-sub { position: static; }
  .nav__chev { display: none; }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; background: none; border: 0; box-shadow: none;
    padding: 0 0 0.5rem 0.9rem; transition: none;
  }
  .subnav a {
    padding: 0.72rem 0.6rem; font-size: 0.95rem; white-space: normal;
    border-bottom: 1px solid var(--border); border-radius: 0;
    color: var(--text-muted);
  }
  .subnav li:last-child a { border-bottom: 0; }

  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(4, 16, 31, 0.55);
    backdrop-filter: blur(2px); opacity: 0; pointer-events: none;
    transition: opacity 0.3s; z-index: 98;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 900px) {
  /* The three portal links no longer fit beside the phone number. They
     remain reachable from the footer and the slide-out menu. */
  .topbar__group--secondary { display: none; }
}

@media (max-width: 640px) {
  .section { padding-block: var(--sp-8); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .field--row { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .cta-band__actions .btn { width: 100%; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .logo-wall { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

@media (max-width: 560px) {
  /* Disabled control, lowest value on the smallest screens. */
  .seg--lang { display: none; }
}

@media (max-width: 400px) {
  .stats__grid { grid-template-columns: 1fr; }
  .topbar__item:last-child { display: none; }   /* keep the phone, drop the email */
}

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

@media print {
  .site-header, .topbar, .site-footer, .cta-band, .nav-backdrop,
  .skip-link, .seg { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .hero, .page-hero, .section--ink, .stats { background: none !important; color: #000; }
  .hero h1, .page-hero h1, .section--ink h2 { color: #000; }
  .cred-list li, .hero__lede, .page-hero p, .stat__label { color: #000; }
  .stat__num { color: #000; }
  .stat { border-color: #999; }
  .cred-card { border-color: #999; box-shadow: none; }
  .card, .person, .numbered > li { break-inside: avoid; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .acc__panel { grid-template-rows: 1fr !important; }   /* print full course lists */
}