/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.8125rem 1.4375rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: -0.004em;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }

.btn--secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }

.btn--onDark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--onDark:hover { background: rgba(255, 255, 255, 0.17); border-color: rgba(255, 255, 255, 0.45); color: #fff; }

.btn--ghost { background: transparent; color: var(--navy); padding-inline: 0; }
.btn--ghost:hover { color: var(--navy-deep); }
.btn--ghost .btn__arrow { transition: transform var(--t) var(--ease); }
.btn--ghost:hover .btn__arrow { transform: translateX(3px); }

.btn--lg   { padding: 0.9375rem 1.75rem; font-size: var(--fs-body); }
.btn--full { width: 100%; }

.btn__arrow { display: inline-block; line-height: 1; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* ---- Pill / badge (the hero eyebrow) ------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.015em;
  color: var(--body);
}
.pill__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-deep);
  flex: none;
}
.pill--onDark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Header -------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              backdrop-filter var(--t) var(--ease);
}
.site-header__inner {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

/* Over a dark hero */
.site-header[data-mode="over"] { background: transparent; }
.site-header[data-mode="over"] .nav__link { color: rgba(255, 255, 255, 0.78); }
.site-header[data-mode="over"] .nav__link:hover,
.site-header[data-mode="over"] .nav__link[aria-current="page"] { color: #fff; }
.site-header[data-mode="over"] .brand { color: #fff; }
.site-header[data-mode="over"] .nav__phone { color: rgba(255, 255, 255, 0.82); }
.site-header[data-mode="over"] .nav__phone:hover { color: #fff; }
.site-header[data-mode="over"] .nav-toggle__bar { background: #fff; }

/* Scrolled / solid */
.site-header[data-mode="solid"] {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
}

/* ---- Brand lockup --------------------------------------------------------
   One <symbol> per page, referenced here and in the footer. The wave and the
   wordmark are currentColor, so the lockup follows whatever surface it sits
   on: navy on a light header, white over the dark hero and in the footer.
   The dot and the underline read from --bs-accent and stay the logo's true
   orange in every context, because that two-tone IS the mark.            */

.brand-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--navy);
  flex: none;
  --bs-accent: var(--accent);
}
.brand:hover { color: var(--navy); }
.brand__logo { height: 27px; width: auto; display: block; }
@media (max-width: 480px) { .brand__logo { height: 23px; } }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s6);
  margin-left: auto;
}
.nav__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  letter-spacing: -0.004em;
  color: var(--body);
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--ink); }

.nav__actions { display: flex; align-items: center; gap: var(--s4); margin-left: var(--s3); }
.nav__phone {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: inherit;
}

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  margin-right: -8px;
  background: none; border: 0; cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle__bar {
  display: block;
  width: 19px; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--s4) var(--gutter) var(--s6);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav__link {
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-body);
    color: var(--ink) !important;
  }
  .nav__actions { flex-direction: column; align-items: stretch; gap: var(--s3); margin: var(--s5) 0 0; }
  .nav__phone { text-align: center; color: var(--ink) !important; }
  .site-header[data-mode="over"] .nav__link { color: var(--ink); }
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 205px is the measured combined height of the stat bar and the rail,
     so the three together fill exactly one viewport. */
  min-height: clamp(400px, calc(100svh - 205px), 700px);
  padding-top: calc(var(--header-h) + var(--s6));
  padding-bottom: var(--s6);
  background: var(--ink);
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
@media (max-width: 880px) {
  /* keep the crane in frame when the viewport narrows to portrait */
  .hero__media img { object-position: 78% 50%; }
}
/* Two-stop scrim: heavier at the bottom-left where the text sits, so the
   photograph still reads at the top right. Flat 50% black looks cheap. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(6,7,9,0.88) 0%, rgba(6,7,9,0.66) 44%, rgba(6,7,9,0.10) 100%),
    linear-gradient(to top, rgba(6,7,9,0.72) 0%, rgba(6,7,9,0.14) 46%, rgba(6,7,9,0.36) 100%);
}
.hero__inner { position: relative; width: 100%; }
.hero__content { max-width: 66rem; }

.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-semi);
  color: #fff;
  margin: var(--s4) 0 0;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--on-dark-faint);
}
.hero__lead {
  margin-top: var(--s4);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--on-dark-soft);
  max-width: 54ch;
}
.hero__actions { margin-top: var(--s5); }
.hero__note {
  margin-top: var(--s4);
  font-size: var(--fs-xs);
  color: var(--on-dark-faint);
  letter-spacing: 0.002em;
}

/* ---- Fact bar (honest substitute for a vanity stats bar) ----------------- */

.factbar { background: var(--ink); border-top: 1px solid var(--line-invert); }
.factbar__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fact + .fact { border-left: 1px solid var(--line-invert); }
.fact {
  background: var(--ink);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  text-align: center;
}
.fact__num {
  display: block;
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem);
  font-weight: var(--fw-semi);
  letter-spacing: -0.028em;
  color: #fff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fact__num span { color: var(--accent); }
.fact__label {
  display: block;
  max-width: 22ch;
  margin: var(--s2) auto 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
@media (max-width: 760px) {
  .factbar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line-invert); }
}

/* ---- Cards --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2rem);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card--hover:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.card__title { font-size: var(--fs-h4); margin-bottom: var(--s3); }
.card__body { font-size: var(--fs-sm); color: var(--muted); }
.card__index {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.09em;
  color: var(--accent-deep);
  margin-bottom: var(--s4);
  font-variant-numeric: tabular-nums;
}

/* ---- Numbered steps ------------------------------------------------------ */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s7) 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--accent-deep);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  padding-top: 0.2rem;
}
.step__title { font-size: var(--fs-h3); margin-bottom: var(--s3); }
.step__body { color: var(--muted); }
.step__meta {
  display: inline-block;
  margin-top: var(--s4);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
@media (max-width: 600px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

/* ---- Two-column responsibility table ------------------------------------- */

.respon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
}
@media (max-width: 820px) { .respon { grid-template-columns: minmax(0, 1fr); } }

.respon__col {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.respon__head {
  padding: var(--s5) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface-mist);
}
.respon__col--ours .respon__head { background: var(--navy); border-bottom-color: var(--navy); }
.respon__col--ours .respon__head .respon__title { color: #fff; }
.respon__col--ours .respon__head .respon__sub { color: rgba(255,255,255,0.68); }
.respon__title { font-size: var(--fs-h4); margin: 0; }
.respon__sub { margin: var(--s2) 0 0; font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.respon__list { list-style: none; margin: 0; padding: var(--s3) clamp(1.25rem, 1rem + 1vw, 1.75rem) var(--s5); }
.respon__list li {
  position: relative;
  padding: var(--s3) 0 var(--s3) 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--body);
  margin: 0;
}
.respon__list li:last-child { border-bottom: 0; }
.respon__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.32rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
}
.respon__col--ours .respon__list li::before { background: var(--navy); border-color: var(--navy); }

/* ---- Element grid (the 14 COR elements) ---------------------------------- */

.elements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.element {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  padding: var(--s5);
  transition: background-color var(--t) var(--ease);
}
.element:hover { background: var(--surface-mist); }
.element__num {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--accent-deep);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.element__name {
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.008em;
}

/* ---- Callout ------------------------------------------------------------- */

.callout {
  border-left: 2px solid var(--accent-deep);
  padding: var(--s2) 0 var(--s2) var(--s5);
  margin: var(--s7) 0;
}
.callout p { font-size: var(--fs-lead); line-height: 1.55; letter-spacing: var(--ls-lead); color: var(--ink-soft); }
.callout cite { display: block; margin-top: var(--s3); font-size: var(--fs-xs); font-style: normal; color: var(--faint); letter-spacing: 0.05em; text-transform: uppercase; }

/* ---- FAQ ----------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  letter-spacing: -0.014em;
  color: var(--ink);
  text-align: left;
  line-height: 1.4;
}
.faq__icon {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 4px;
  position: relative;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--muted);
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.faq__icon::before { inset: 8px 0 auto 0; height: 1.5px; }
.faq__icon::after  { inset: 0 8px auto auto; width: 1.5px; height: 18px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-slow) var(--ease-out);
}
.faq__a-inner { padding: 0 0 var(--s6); max-width: 70ch; color: var(--muted); }

/* ---- Forms --------------------------------------------------------------- */

.form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  box-shadow: var(--shadow);
}

.field { margin-bottom: var(--s5); }
.field:last-of-type { margin-bottom: var(--s6); }

.field__label {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--ink);
  letter-spacing: -0.006em;
}
.field__hint { font-weight: var(--fw-reg); color: var(--faint); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.8125rem 0.9375rem;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(1, 28, 60, 0.1);
}
.textarea { min-height: 120px; resize: vertical; }
.select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236e7076' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9375rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---- CTA band ------------------------------------------------------------ */

.cta-band { background: var(--ink); color: var(--on-dark-soft); }
.cta-band__inner { text-align: center; max-width: 640px; margin-inline: auto; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: var(--on-dark-soft); margin-top: var(--s4); margin-inline: auto; }
.cta-band .btn-row { margin-top: var(--s7); }

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--on-dark-faint);
  border-top: 1px solid var(--line-invert);
  padding-block: var(--s9) var(--s6);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--on-dark-soft); }
.site-footer a:hover { color: #fff; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: var(--s7);
  padding-bottom: var(--s8);
}
@media (max-width: 880px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

.footer__brand .brand { color: #fff; margin-bottom: var(--s5); }
.footer__brand .brand__logo { height: 30px; }
.footer__blurb { max-width: 34ch; font-size: var(--fs-sm); color: var(--on-dark-faint); line-height: 1.6; }

.footer__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--s4);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--s3); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  padding-top: var(--s6);
  border-top: 1px solid var(--line-invert);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.4);
}
.footer__disclaimer {
  margin-top: var(--s5);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255,255,255,0.38);
  max-width: 92ch;
}

/* ---- Misc ---------------------------------------------------------------- */

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

.page-head {
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface-mist);
}

/* ==========================================================================
   DROPDOWN NAVIGATION
   Opens on hover, opens on keyboard focus, and does nothing on click.
   The panel is a child of the wrapper and sits directly beneath it with no
   gap, so moving the cursor down into the panel never crosses dead space.
   ========================================================================== */

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  letter-spacing: -0.004em;
  color: var(--body);
  cursor: default;
  transition: color var(--t-fast) var(--ease);
}
.nav__caret {
  width: 9px; height: 6px;
  flex: none;
  transition: transform var(--t) var(--ease);
}
.nav__caret path { stroke: currentColor; }

.nav__item--menu:hover .nav__trigger,
.nav__item--menu:focus-within .nav__trigger { color: var(--ink); }
.nav__item--menu:hover .nav__caret,
.nav__item--menu:focus-within .nav__caret { transform: rotate(180deg); }

/* Invisible bridge covering the header padding below the trigger, so the
   pointer never leaves the wrapper on the way to the panel. */
.nav__item--menu::after {
  content: "";
  position: absolute;
  top: 100%; left: -1rem; right: -1rem;
  height: 18px;
  display: none;
}
.nav__item--menu:hover::after,
.nav__item--menu:focus-within::after { display: block; }

.nav__menu {
  position: absolute;
  top: calc(100% + 17px);
  left: 50%;
  z-index: 60;
  width: 220px;
  padding: var(--s2);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);

  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity var(--t) var(--ease-out),
              transform var(--t) var(--ease-out),
              visibility var(--t);
}
.nav__item--menu:hover .nav__menu,
.nav__item--menu:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__menu-link {
  display: block;
  padding: 0.625rem var(--s4);
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease);
}
.nav__menu-link:hover { background: var(--surface-mist); }

.nav__menu-title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: -0.008em;
  color: var(--ink);
}
.nav__menu-desc {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--muted);
}

/* Over a dark hero */
.site-header[data-mode="over"] .nav__trigger { color: rgba(255, 255, 255, 0.78); }
.site-header[data-mode="over"] .nav__item--menu:hover .nav__trigger,
.site-header[data-mode="over"] .nav__item--menu:focus-within .nav__trigger { color: #fff; }

/* Sign-in link */
.nav__signin {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: -0.004em;
  color: var(--body);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.nav__signin:hover { color: var(--ink); }
.nav__signin svg { width: 14px; height: 14px; flex: none; }
.site-header[data-mode="over"] .nav__signin { color: rgba(255, 255, 255, 0.82); }
.site-header[data-mode="over"] .nav__signin:hover { color: #fff; }

@media (max-width: 940px) {
  .nav__item { display: block; }
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-body);
    color: var(--ink) !important;
    cursor: pointer;
  }
  .nav__item--menu::after { display: none !important; }
  .nav__menu {
    position: static;
    width: auto;
    padding: var(--s2) 0 var(--s3);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  /* hover must not open it on touch — only the explicit toggle does */
  .nav__item--menu:hover .nav__menu,
  .nav__item--menu:focus-within .nav__menu { transform: none; }
  .nav__item--menu.is-open .nav__menu { display: block; }
  .nav__item--menu.is-open .nav__caret { transform: rotate(180deg); }
  .nav__menu-link { padding-left: var(--s4); }
  .site-header[data-mode="over"] .nav__trigger,
  .site-header[data-mode="over"] .nav__signin { color: var(--ink); }
  .nav__signin { justify-content: center; padding: var(--s3) 0; color: var(--ink) !important; }
}

/* ==========================================================================
   CHAT LAUNCHER
   Placeholder shell. Wire to the assistant when it exists.
   ========================================================================== */

.chat-launcher {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  z-index: 90;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(10, 10, 11, 0.26);
  transition: background-color var(--t) var(--ease),
              transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.chat-launcher:hover {
  background: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(10, 10, 11, 0.32);
}
.chat-launcher:active { transform: translateY(0); }
.chat-launcher svg { width: 22px; height: 22px; }

.chat-launcher__tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  padding: 0.4375rem 0.75rem;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  white-space: nowrap;
  border-radius: var(--r-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.chat-launcher:hover .chat-launcher__tip { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 600px) {
  .chat-launcher { width: 48px; height: 48px; }
  .chat-launcher__tip { display: none; }
}

/* ==========================================================================
   HELP CENTRE TILE GRID
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
}
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  min-height: 186px;
  padding: var(--s6) var(--s4);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.tile:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.tile svg { width: 26px; height: 26px; color: var(--navy); }
.tile__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: -0.008em;
  color: var(--ink);
}
.tile__sub { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }

/* ==========================================================================
   AUTH PAGE
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s8) var(--gutter);
  background: var(--surface-mist);
}
.auth__card {
  width: 100%;
  max-width: 436px;
  padding: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.auth__brand { display: flex; justify-content: center; margin-bottom: var(--s6); }
.auth__title { text-align: center; font-size: var(--fs-h2); }
.auth__sub { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin: var(--s3) 0 var(--s7); }

.auth__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s1);
  padding: var(--s1);
  margin-bottom: var(--s6);
  background: var(--surface-mist);
  border-radius: var(--r);
}
.auth__tab {
  padding: 0.625rem;
  border: 0;
  border-radius: calc(var(--r) - 3px);
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.auth__tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.auth__foot { margin-top: var(--s6); text-align: center; font-size: var(--fs-sm); }
.auth__note {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  text-align: center;
}

/* ---- Disabled form controls --------------------------------------------
   The portal is not live, so its fields are disabled. They have to LOOK
   disabled, or the page reads as a working login that silently fails.     */
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--surface-mist);
  border-color: var(--line);
  color: var(--faint);
  cursor: not-allowed;
}
.btn:disabled,
.btn[disabled] {
  background: var(--line-strong);
  border-color: var(--line-strong);
  color: #fff;
  cursor: not-allowed;
  opacity: 0.75;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  background: var(--line-strong);
  border-color: var(--line-strong);
  transform: none;
}

/* ==========================================================================
   PLACEHOLDER MEDIA
   Every box using this is a deliberate stand-in. They are visibly marked so
   none of them can reach production unnoticed. See PLACEHOLDERS.md.
   ========================================================================== */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 16 / 10);
  padding: var(--s5);
  text-align: center;
  background:
    repeating-linear-gradient(135deg,
      var(--surface-mist) 0 10px, #eceef2 10px 20px);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--muted);
  overflow: hidden;
}
.ph__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-deep);
  /* the hatch alternates two greys and the darker one drops this below 4.5:1,
     so the label carries its own ground rather than relying on the stripe */
  background: var(--surface);
  padding: 2px 7px;
  border-radius: 4px;
}
.ph__note {
  margin-top: var(--s2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
  max-width: 34ch;
}
.ph--dark {
  background: repeating-linear-gradient(135deg, #16181d 0 10px, #1c1f26 10px 20px);
  border-color: rgba(255,255,255,0.18);
  color: var(--on-dark-faint);
}
.ph--tall { --ph-ratio: 3 / 4; }

/* ==========================================================================
   STAT BAR  (dark, divided, sits directly under the hero)
   ========================================================================== */

.statbar { background: var(--ink); border-top: 1px solid var(--line-invert); }
.statbar__inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
}
.stat {
  padding: clamp(0.875rem, 0.7rem + 0.7vw, 1.1875rem) clamp(0.75rem, 0.4rem + 1.1vw, 1.5rem);
  text-align: center;
}
.stat + .stat { border-left: 1px solid var(--line-invert); }

.stat__num {
  display: block;
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.9375rem);
  font-weight: var(--fw-semi);
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__num span { color: var(--accent); }
.stat__label {
  display: block;
  margin-top: var(--s2);
  font-size: var(--fs-xs);
  line-height: 1.4;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}

.stat--rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; color: var(--accent); }
.stat__score {
  font-size: 1.0625rem;
  font-weight: var(--fw-semi);
  color: #fff;
  letter-spacing: -0.02em;
}
.stat--rating .stat__label { margin-top: 0; }

@media (max-width: 1040px) {
  .statbar__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(4) { border-left: 0; }
  .stat:nth-child(n + 4) { border-top: 1px solid var(--line-invert); }
}
@media (max-width: 620px) {
  .statbar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-left: 0 !important; border-top: 1px solid var(--line-invert); }
  .stat:nth-child(odd) { border-right: 1px solid var(--line-invert); }
  .stat:first-child { grid-column: 1 / -1; border-right: 0; border-top: 0; }
}

/* ==========================================================================
   INDUSTRIES
   ========================================================================== */

.industries {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s5);
}
@media (max-width: 1180px) { .industries { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .industries { grid-template-columns: minmax(0, 1fr); } }

.industry { display: flex; flex-direction: column; height: 100%; }
.industry__body { flex: 1 1 auto; }
.industry__media {
  margin-bottom: var(--s5);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.industry__media .ph { --ph-ratio: 3 / 4; border-radius: var(--r-lg); }
.industry__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.industry__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: var(--s3);
}
.industry__body { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.industry__go {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-top: var(--s5);
  align-self: start;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--navy);
  transition: background-color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.industry__go:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.industry__go svg { width: 15px; height: 15px; }

/* ==========================================================================
   FEATURE SPLIT  (copy + checklist beside a framed screenshot)
   ========================================================================== */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
}
@media (max-width: 940px) { .feature { grid-template-columns: minmax(0, 1fr); } }

.checklist { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.875rem;
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
  color: var(--body);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28rem;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23011c3c'/%3E%3Cpath d='m5.8 10.3 2.7 2.7 5.7-5.7' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.screenframe {
  padding: clamp(0.75rem, 0.4rem + 1.3vw, 1.5rem);
  background: var(--navy-tint);
  border-radius: calc(var(--r-lg) + 6px);
}
.screenframe .ph,
.screenframe img {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.screenframe .ph { --ph-ratio: 16 / 10; background-color: #fff; }

/* ==========================================================================
   CTA BAND — navy variant
   ========================================================================== */

.cta-band--navy { background: var(--navy); color: rgba(255, 255, 255, 0.8); }
.cta-band--navy h2 { color: #fff; }
.cta-band--navy .lead { color: rgba(255, 255, 255, 0.8); }
.cta-band--navy .btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}
.cta-band--navy .btn--primary:hover { background: #eef1f6; border-color: #eef1f6; color: var(--navy-deep); }
.cta-band--navy .btn--onDark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cta-band--navy .btn--onDark:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

/* ==========================================================================
   COLOUR PASS
   The site was running almost entirely on white and one grey. These add
   restrained colour without turning it into a startup page.
   ========================================================================== */

/* Interior page headers get a soft navy wash and an orange hairline instead of
   flat grey, so every page opens with some colour. */
.page-head {
  position: relative;
  background:
    linear-gradient(180deg, var(--navy-tint) 0%, #f7f8fb 62%, var(--surface) 100%);
  border-bottom: 1px solid var(--line);
}
.page-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 112px; height: 2px;
  background: var(--accent-deep);
}

/* Dark band variant for the certification-cycle section */
.section--ink .card {
  background: #16181d;
  border-color: rgba(255, 255, 255, 0.11);
}
.section--ink .card__body { color: var(--on-dark-faint); }
.section--ink .card__title { color: #fff; }
.section--ink .lead { color: var(--on-dark-soft); }
.section--ink .callout { border-left-color: var(--accent); }
.section--ink .callout p { color: rgba(255, 255, 255, 0.92); }
.section--ink p { color: var(--on-dark-soft); }
.section--ink .eyebrow { color: var(--on-dark-faint); }

/* ---- Accent on dark surfaces ---------------------------------------------
   --accent-deep is tuned for white and fails against navy and ink, so every
   dark band swaps back to the logo's true orange. Keep this list in step with
   the dark surfaces: .hero, .statbar, .fact, .section--ink, .cta-band--navy,
   .site-footer, and the header while it is still over the hero.           */
.hero .eyebrow::before,
.statbar .eyebrow::before,
.section--ink .eyebrow::before,
.cta-band--navy .eyebrow::before,
.site-footer .eyebrow::before,
.page-hero .eyebrow::before      { background: var(--accent); }

.section--ink .card__index,
.cta-band--navy .card__index     { color: var(--accent); }

.pill--onDark .pill__dot         { background: var(--accent); }

.site-header[data-mode="over"] .nav__link::after,
.site-header[data-mode="over"] .nav__trigger::after { background: var(--accent); }

/* Tinted panel, used to stop long form pages reading as a wall of white */
.panel {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: var(--navy-tint);
  border: 1px solid #dde3ed;
  border-radius: var(--r-lg);
}
.panel--sand { background: var(--surface-sand); border-color: var(--line); }

/* Small reassurance row, for the booking page */
.assure { display: grid; gap: var(--s4); margin-top: var(--s6); }
.assure__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: var(--fs-sm);
  color: var(--body);
}
.assure__icon {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--navy);
  display: grid;
  place-items: center;
}
.assure__icon svg { width: 11px; height: 11px; color: #fff; }

/* ==========================================================================
   CTA BAND — tighter, smaller type
   ========================================================================== */

.cta-band { padding-block: clamp(2.5rem, 1.5rem + 2.6vw, 3.5rem); }
.cta-band__inner { max-width: 560px; }
.cta-band h2 {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  letter-spacing: -0.021em;
}
.cta-band .lead {
  margin-top: var(--s3);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.cta-band .btn-row { margin-top: var(--s5); }
.cta-band .btn--lg { padding: 0.75rem 1.375rem; font-size: var(--fs-sm); }

/* ==========================================================================
   NAVIGATION STATE AND MOTION
   An orange underline wipes in on hover and stays put on the current page, so
   it is always obvious where you are. Keyboard focus gets the same treatment.
   ========================================================================== */

.nav__link,
.nav__trigger {
  position: relative;
  padding-block: 0.4375rem;
}

.nav__link::after,
.nav__trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 280ms var(--ease-out);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__item--menu:hover .nav__trigger::after,
.nav__item--menu:focus-within .nav__trigger::after { transform: scaleX(1); }

/* Current page stays lit */
.nav__link[aria-current="page"],
.nav__trigger[aria-current="true"] { color: var(--ink); font-weight: var(--fw-semi); }
.nav__link[aria-current="page"]::after,
.nav__trigger[aria-current="true"]::after { transform: scaleX(1); }

.site-header[data-mode="over"] .nav__link[aria-current="page"],
.site-header[data-mode="over"] .nav__trigger[aria-current="true"] { color: #fff; }

/* Menu rows slide a touch on hover */
.nav__menu-link {
  transition: background-color var(--t-fast) var(--ease),
              padding-left var(--t) var(--ease-out);
}
.nav__menu-link:hover { padding-left: calc(var(--s4) + 4px); }

/* Sign-in and brand lift slightly */
.nav__signin:hover { transform: translateY(-1px); }
.nav__signin { transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }

/* Buttons and cards get a consistent, restrained lift */
.btn--primary:hover,
.btn--secondary:hover { transform: translateY(-1px); }
.card--hover:hover,
.tile:hover { transform: translateY(-2px); }

@media (max-width: 940px) {
  .nav__link::after, .nav__trigger::after { display: none; }
  .nav__link[aria-current="page"],
  .nav__trigger[aria-current="true"] {
    box-shadow: inset 2px 0 0 var(--accent-deep);
    padding-left: var(--s3);
  }
  .nav__menu-link:hover { padding-left: var(--s4); }
}

/* ==========================================================================
   HERO ENTRANCE
   ========================================================================== */

@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* The image settles out of a slow push-in, so the page does not simply snap
   into place on load. */
@keyframes heroSettle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero__media img { animation: heroSettle 2600ms var(--ease-out) both; }

.hero__content > * { animation: heroRise 900ms var(--ease-out) both; }
.hero__content > .pill          { animation-delay: 80ms; }
.hero__content > .hero__title   { animation-delay: 220ms; }
.hero__content > .hero__lead    { animation-delay: 420ms; }
.hero__content > .hero__actions { animation-delay: 560ms; }
.hero__content > .hero__note    { animation: heroFade 1100ms var(--ease-out) 760ms both; }

/* The muted half of the headline arrives just behind the white half */
.hero__title em {
  display: inline-block;
  animation: heroRise 900ms var(--ease-out) 380ms both;
}

/* Soft breathing dot on the hero pill */
@keyframes dotBreathe {
  0%, 100% { opacity: 1;    transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 110, 13, 0.45); }
  40%      { opacity: 0.35; transform: scale(0.72); box-shadow: 0 0 0 5px rgba(255, 110, 13, 0); }
  70%      { opacity: 1;    transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 110, 13, 0); }
}
.pill--onDark .pill__dot { animation: dotBreathe 3.2s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .hero__content > *,
  .hero__title em { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pill--onDark .pill__dot { animation: none; }
}

/* ==========================================================================
   STANDARDS MARQUEE
   A continuous rail of the standards the work is scored against. Deliberately
   wordmarks, not logos: we are not accredited by any of these bodies and a
   logo row would imply otherwise.
   ========================================================================== */

.rail { background: var(--surface); border-bottom: 1px solid var(--line); }
.rail__inner { padding-block: clamp(0.875rem, 0.7rem + 0.7vw, 1.25rem); }

/* The rail is a hidden-scrollbar scroll container driven by a JS loop, not a
   transform animation. An animated transform promotes the whole track to one
   GPU layer; at four sets wide that layer exceeded the texture limit on
   high-DPI screens, which truncated it and made logos vanish at one edge.
   Scroll containers are tile-rasterised, so only the visible part is ever
   painted and the track can be any width. */
.marquee {
  overflow-x: scroll;
  overflow-y: hidden;
  pointer-events: none;          /* decorative: never pausable, never scrollable */
  scrollbar-width: none;
}
.marquee::-webkit-scrollbar { display: none; }

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
}

/* Each mark gets its own height so they read as equal weight. Matching them
   on height alone makes the wide wordmarks dominate and the round badges
   disappear. */
.rail__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  flex: none;
  margin-inline-end: clamp(2.75rem, 1.5rem + 3.6vw, 5.5rem);
}
.rail__logo img {
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.rail__logo--ontario img { max-height: 33px; }
.rail__logo--wsib    img { max-height: 40px; }
.rail__logo--cfcsa   img { max-height: 54px; }
.rail__logo--cor     img { max-height: 50px; }
.rail__logo--ihsa    img { max-height: 39px; }
.rail__logo--iso     img { max-height: 50px; }
.rail__logo--csa     img { max-height: 44px; }
.rail__logo--ccohs   img { max-height: 34px; }

@media (max-width: 620px) {
  .rail__logo { height: 46px; }
  .rail__logo--ontario img { max-height: 25px; }
  .rail__logo--wsib    img { max-height: 31px; }
  .rail__logo--cfcsa   img { max-height: 42px; }
  .rail__logo--cor     img { max-height: 39px; }
  .rail__logo--ihsa    img { max-height: 30px; }
  .rail__logo--iso     img { max-height: 39px; }
  .rail__logo--csa     img { max-height: 34px; }
  .rail__logo--ccohs   img { max-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow: visible; }
  .marquee__track { flex-wrap: wrap; justify-content: center; width: auto; }
}
}


/* Where two full-bleed colour bands meet, the seam carries both sections'
   padding and reads as a void. Trim it. */
.section--mist + .section--ink,
.section--ink + .section--mist,
.section--mist + .section--mist,
.section--ink + .section--ink,
.section--sand + .section--mist { padding-top: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }

.section + .cta-band { padding-top: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem); }

/* ==========================================================================
   BUYER REQUIREMENT ROWS
   A table would need four columns and break on phones. Stacked rows carry the
   same information and stay readable at any width.
   ========================================================================== */

.reqs { border-top: 1px solid var(--line); margin-top: var(--s6); }

.req {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--s5);
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) { .req { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }

.req__name { font-size: var(--fs-h4); font-weight: var(--fw-semi); color: var(--ink); letter-spacing: -0.014em; }
.req__tag {
  display: inline-block;
  margin-top: var(--s3);
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.req__tag--now      { background: var(--navy-tint); color: var(--navy); }
.req__tag--upcoming { background: var(--accent-soft); color: var(--accent-deep); }

.req__detail { font-size: var(--fs-sm); color: var(--body); }
.req__detail dl { margin: 0; display: grid; gap: var(--s3); }
.req__detail dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2px;
}
.req__detail dd { margin: 0; }
.req__src { margin-top: var(--s4); font-size: var(--fs-xs); color: var(--faint); }
.req__src a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.req__src a:hover { color: var(--navy); }

/* On short laptop screens the hero content itself is what stops the stat bar
   and rail fitting, so trim the content rather than the container. */
@media (min-width: 941px) and (max-height: 820px) {
  .hero { padding-top: calc(var(--header-h) + var(--s4)); padding-bottom: var(--s4); }
  .hero__title { font-size: clamp(2rem, 1.1rem + 2.6vw, 2.875rem); }
  .hero__lead  { font-size: var(--fs-body); margin-top: var(--s3); }
  .hero__actions { margin-top: var(--s4); }
  .hero__note  { margin-top: var(--s3); font-size: 0.75rem; }
  .rail__inner { padding-block: 0.875rem; }
  .rail__label { margin-bottom: var(--s2); }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-hero {
  background: linear-gradient(180deg, var(--navy-tint) 0%, #f4f6fa 100%);
  border-bottom: 1px solid var(--line);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem);
}
.contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 940px) { .contact-hero__grid { grid-template-columns: minmax(0, 1fr); } }

.contact-hero__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.contact-hero__media .ph { --ph-ratio: 16 / 9; border-radius: var(--r-lg); }
.contact-hero__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Tinted tray holding the white detail cards */
.infostack {
  display: grid;
  gap: var(--s4);
  padding: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  background: var(--navy-tint);
  border: 1px solid #dde3ed;
  border-radius: var(--r-lg);
}

.infocard {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.375rem);
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.infocard:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.infocard__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--navy-tint);
  border-radius: var(--r-sm);
  color: var(--navy);
}
.infocard__icon svg { width: 18px; height: 18px; }

.infocard__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  letter-spacing: -0.014em;
  color: var(--navy);
  margin-bottom: var(--s2);
}
.infocard__lines { font-size: var(--fs-sm); color: var(--body); line-height: 1.65; }
.infocard__lines a { color: var(--body); }
.infocard__lines a:hover { color: var(--navy); }
.infocard__lines span { display: block; }


/* ==========================================================================
   TEAM
   ========================================================================== */

.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  max-width: 820px;
  margin-inline: auto;
}
@media (max-width: 680px) { .team { grid-template-columns: minmax(0, 1fr); max-width: 420px; } }

.person {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.person:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }

.person__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-mist); }
.person__body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

.person__role {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin-bottom: var(--s3);
  background: var(--navy-tint);
  color: var(--navy);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.person__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s3);
}
.person__bio { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; }

/* ==========================================================================
   PAGE HERO WITH A BACKGROUND IMAGE
   Same idea as the homepage hero but shorter, for interior page headers.
   Drop an image at img/headers/<page>.jpg and add the modifier class.
   ========================================================================== */

.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(260px, 34vh, 400px);
  padding-top: calc(var(--header-h) + var(--s7));
  padding-bottom: var(--s7);
  background: var(--ink);
  isolation: isolate;
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media picture { display: block; width: 100%; height: 100%; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(6,7,9,0.90) 0%, rgba(6,7,9,0.70) 48%, rgba(6,7,9,0.28) 100%),
    linear-gradient(to top, rgba(6,7,9,0.60) 0%, rgba(6,7,9,0.18) 55%, rgba(6,7,9,0.40) 100%);
}
.page-hero h1 { color: #fff; }
.page-hero .eyebrow { color: rgba(255,255,255,0.6); }
.page-hero .lead { color: var(--on-dark-soft); max-width: 56ch; }

/* ==========================================================================
   STAT CARDS  (soft tinted tiles, for the About page)
   ========================================================================== */

.statcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 480px) { .statcards { grid-template-columns: minmax(0, 1fr); } }

.statcard {
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  border-radius: var(--r-lg);
  text-align: center;
}
.statcard:nth-child(1) { background: #eaeef4; }
.statcard:nth-child(2) { background: #ecf5f0; }
.statcard:nth-child(3) { background: #fdeede; }
.statcard:nth-child(4) { background: #fdf7e8; }

.statcard__num {
  display: block;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  font-weight: var(--fw-semi);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.statcard__label {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  margin-top: var(--s3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--ink-soft);
}
.statcard__label svg { width: 14px; height: 14px; color: var(--navy); flex: none; }

/* ==========================================================================
   VISION / MISSION PANEL
   ========================================================================== */

.vm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  padding: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  background: var(--navy);
  border-radius: var(--r-lg);
  color: rgba(255,255,255,0.82);
}
@media (max-width: 720px) { .vm { grid-template-columns: minmax(0, 1fr); } }

.vm__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  margin-bottom: var(--s4);
  background: #fff;
  border-radius: 50%;
  color: var(--navy);
}
.vm__icon svg { width: 20px; height: 20px; }
.vm h3 { color: #fff; font-size: var(--fs-h3); margin-bottom: var(--s3); }
.vm p { color: rgba(255,255,255,0.82); font-size: var(--fs-sm); line-height: 1.65; margin: 0; }

/* ==========================================================================
   SPEC LIST
   The four audit thresholds as a vertical spec sheet rather than a grid of
   tinted tiles. Reads like a technical datasheet, which suits the work.
   ========================================================================== */

.specs { display: grid; gap: var(--s3); }

.spec {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s5);
  border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease);
}
.spec:hover { transform: translateX(3px); }
.spec:nth-child(1) { background: #eaeef4; }
.spec:nth-child(2) { background: #ecf5f0; }
.spec:nth-child(3) { background: #fdeede; }
.spec:nth-child(4) { background: #fdf7e8; }

.spec__num {
  font-size: clamp(1.625rem, 1.15rem + 1.7vw, 2.25rem);
  font-weight: var(--fw-semi);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.spec__label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); }
.spec__note { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--body); font-weight: var(--fw-reg); }

@media (max-width: 520px) {
  .spec { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s4); }
}

/* ==========================================================================
   FAQ LAYOUT
   Sticky category rail beside the questions, no hero. Mirrors a help-centre
   pattern rather than a marketing page.
   ========================================================================== */

.faqpage { padding-top: calc(var(--header-h) + clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem)); }

.faqpage__title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--s3);
}
.faqpage__crumb {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
}
.faqpage__crumb:hover { color: var(--navy); }

.faqlayout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3.4vw, 4rem);
  align-items: start;
  margin-top: clamp(2rem, 1.25rem + 2.6vw, 3.25rem);
}
@media (max-width: 860px) { .faqlayout { grid-template-columns: minmax(0, 1fr); } }

.faqnav {
  position: sticky;
  top: calc(var(--header-h) + var(--s5));
  padding: var(--s3);
  background: var(--surface-mist);
  border-radius: var(--r-lg);
}
@media (max-width: 860px) { .faqnav { position: static; } }

.faqnav__link {
  display: block;
  padding: 0.625rem var(--s4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--body);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faqnav__link:hover { background: rgba(255,255,255,0.7); color: var(--ink); }
.faqnav__link.is-active {
  background: var(--surface);
  color: var(--navy);
  font-weight: var(--fw-semi);
  box-shadow: var(--shadow-sm);
}

.faqgroup + .faqgroup { margin-top: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); }
.faqgroup__title {
  font-size: var(--fs-h2);
  letter-spacing: -0.024em;
  margin-bottom: var(--s5);
}

/* A short rule instead of a numeral. Sequence numbers on a list of principles
   implied an order that does not exist, and read as filler. */
.card__rule {
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: var(--s4);
  background: var(--accent-deep);
  border-radius: 2px;
}


/* ==========================================================================
   ARTICLE LAYOUT
   Long reference pages: a sticky on-page rail beside the content, so the
   width is used and a reader can jump straight to a section.
   ========================================================================== */

.article {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3.4vw, 4.25rem);
  align-items: start;
}
@media (max-width: 960px) { .article { grid-template-columns: minmax(0, 1fr); } }

.article__side { position: sticky; top: calc(var(--header-h) + var(--s5)); display: grid; gap: var(--s4); }
@media (max-width: 960px) { .article__side { position: static; } }

.article__body > h2 { margin-top: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem); margin-bottom: var(--s4); }
.article__body > h2:first-child { margin-top: 0; }
.article__body > h3 { margin-top: var(--s6); margin-bottom: var(--s3); }