/* ==========================================================================
   Think Smart Europe: design system
   --------------------------------------------------------------------------
   One stylesheet, no build step, no framework. It is ordered the way the page
   is: tokens, reset, primitives, layout, components, utilities, responsive.

   Two decisions worth knowing before you edit anything:

   1. Fonts are self-hosted (assets/fonts). Google Fonts would mean every
      visitor's IP address going to Google before the page paints. For a company
      whose proposition is European data sovereignty that is the wrong first
      request to make, and it is also slower.

   2. The palette is light with deep-navy panels, not a light/dark pair. The
      navy is a brand surface used for emphasis, not a theme. A `prefers-color-
      scheme: dark` variant would invert that meaning, so there isn't one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand. Taken from the Think Smart Europe deck template, not re-picked. */
  --navy: #0f0f53;
  --navy-mid: #26275f;
  --navy-deep: #0a0a3a;
  --teal: #1aa3a3;
  --teal-deep: #10736f;
  --teal-bright: #45d7c8;
  --teal-tint: #e4f3f1;
  /* The alert colour is our own: a deep signal red, chosen for 6.5:1 with
     white text (AA asks 4.5), with a lighter variant for icons and accents on
     dark panels where it carries no text. Deliberately red rather than any
     orange: an incident button is an alarm, not an accent. */
  --alert: #b3261e;
  --alert-hover: #8c1d18;
  --alert-bright: #ff6b5e;

  /* Neutrals. */
  --ink: #1d2138;
  --body: #4e556d;
  /* Tuned to clear 4.5:1 on the darkest surface tint, not only on white. */
  --muted: #5f6680;
  --bg: #ffffff;
  --surface: #f4f6fa;
  --surface-2: #e9edf5;
  --line: #e3e8f0;
  --line-2: #d3daea;

  /* Type. Fluid between a 360px phone and a 1440px desktop. */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.88rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1: clamp(1.13rem, 1.06rem + 0.3vw, 1.28rem);
  --step-2: clamp(1.32rem, 1.19rem + 0.55vw, 1.6rem);
  --step-3: clamp(1.55rem, 1.31rem + 1.02vw, 2.05rem);
  --step-4: clamp(1.8rem, 1.4rem + 1.7vw, 2.65rem);
  --step-5: clamp(2.15rem, 1.5rem + 2.8vw, 3.5rem);
  --step-6: clamp(2.4rem, 1.55rem + 3.4vw, 4.1rem);

  /* Space. A 4px base, named by role rather than by size. */
  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap: 22px;
  --gap-lg: 40px;
  --gap-xl: 64px;
  --section-y: clamp(52px, 5.5vw, 84px);

  /* Shape. */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --page-max: 1240px;
  --measure: 68ch;
  /* A body of text with nothing beside it may run wider than a column that
     shares its row, but not so wide that the eye loses the next line. */
  --measure-wide: 76ch;

  /* Depth. Navy-tinted so shadows read as part of the brand, not as grey. */
  --shadow-sm: 0 4px 14px rgba(15, 15, 83, 0.06);
  --shadow: 0 14px 36px rgba(15, 15, 83, 0.09);
  --shadow-lg: 0 24px 56px rgba(15, 15, 83, 0.15);

  --grad: linear-gradient(120deg, var(--teal) 0%, var(--navy-deep) 100%);
  --surface-grad: linear-gradient(140deg, #f7f9fd 0%, #e9edf5 100%);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 74px;
}

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

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

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

img {
  height: auto;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Focus. One visible ring everywhere, never removed, this site is built to
   WCAG 2.1 AA and a keyboard user has to be able to see where they are. */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.on-navy :focus-visible,
.navy-panel :focus-visible {
  outline-color: var(--teal-bright);
}

/* Skip link: first thing in the tab order, invisible until focused. */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 500;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  font-family: var(--font-head);
  font-weight: 500;
  transition: top 0.2s var(--ease);
}

.skip:focus {
  top: 0;
}

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

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

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--soft {
  background: var(--surface);
}

.section--tight {
  padding-block: clamp(44px, 5vw, 68px);
}

.section[id],
[id].anchor {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

.head-block {
  max-width: 820px;
  margin-bottom: var(--gap-lg);
}

.head-block--center {
  margin-inline: auto;
  text-align: center;
}

.head-block--center .eyebrow {
  justify-content: center;
}

.head-block--wide {
  max-width: 820px;
}

.head-block h2 {
  font-size: var(--step-4);
  margin: 14px 0 12px;
}

.head-block > p {
  font-size: var(--step-1);
  color: var(--body);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.eyebrow svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--teal);
}

.on-navy .eyebrow,
.eyebrow--light {
  color: #86e7de;
}

.on-navy .eyebrow svg,
.eyebrow--light svg {
  color: #86e7de;
}

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 7px 18px rgba(15, 15, 83, 0.2);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(26, 163, 163, 0.3);
}

.btn--solid {
  background: var(--navy);
  color: #fff;
}

.btn--solid:hover {
  background: var(--navy-mid);
  transform: translateY(-2px);
}

.btn--ghost {
  border-color: var(--line-2);
  color: var(--ink);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
}

/* A ghost button on a dark surface.
 *
 * This selector list is long on purpose. The default ghost button is dark ink
 * on a light ground; put it on the navy hero without one of these and it is
 * dark on dark, which is exactly the bug this replaced. Every dark surface the
 * design has is named here, so adding a new one and forgetting is a visible
 * omission rather than an invisible one. The page hero is deliberately absent:
 * it is a light surface, and listing it here made its ghost button white on
 * near-white. */
.on-navy .btn--ghost,
.btn--ghost.on-dark,
.hero .btn--ghost,
.navy-panel .btn--ghost,
.cta-band .btn--ghost,
.incident-band .btn--ghost,
.person .btn--ghost,
.wizard__aside .btn--ghost,
.compare__card--dark .btn--ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.on-navy .btn--ghost:hover,
.btn--ghost.on-dark:hover,
.hero .btn--ghost:hover,
.navy-panel .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.incident-band .btn--ghost:hover,
.person .btn--ghost:hover,
.wizard__aside .btn--ghost:hover,
.compare__card--dark .btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.btn--white {
  background: #fff;
  color: var(--navy);
}

.btn--white:hover {
  background: #e9edf5;
  transform: translateY(-2px);
}

.btn--alert {
  background: var(--alert);
  color: #fff;
}

.btn--alert:hover {
  background: var(--alert-hover);
  transform: translateY(-2px);
}

/* The small buttons live in the header row, where a wrapped label pushes the
   whole bar taller. Wider buttons elsewhere may still wrap. */
.btn--sm {
  padding: 9px 15px;
  font-size: 0.84rem;
  white-space: nowrap;
}

.btn--block {
  width: 100%;
  justify-content: center;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--teal-deep);
  transition: gap 0.25s var(--ease);
}

.link-arrow svg {
  width: 15px;
  height: 15px;
}

.link-arrow:hover {
  gap: 13px;
}

.on-navy .link-arrow {
  color: var(--teal-bright);
}

/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s, border-color 0.3s;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

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

.nav__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo img {
  height: 30px;
  width: auto;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* A navigation label is a name, not a paragraph: "NIS2 check" breaking across
   two lines makes the whole header a row taller and reads as two items. The
   same applies to the buttons beside it. */
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  padding: 10px 13px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

/* The link to the style directions. Marked as a working tool rather than part
   of the site, so nobody mistakes it for a page a customer is meant to visit.
   It only ever appears off the live domain (see js/site.js). */
/* Shipped with the hidden attribute and revealed by js/site.js off the live
   domain. The display these links get from their base rules would otherwise
   win from that attribute, which is how the link showed on thinksmart.eu. */
.nav__link--styles[hidden],
.drawer-link--styles[hidden] {
  display: none !important;
}

.nav__link--styles {
  /* --teal-deep, not --teal: the brand teal is 3.08:1 on white, below the 4.5
     this site holds itself to. The deep variant is 5.67:1. */
  color: var(--teal-deep);
  border: 1px dashed color-mix(in srgb, var(--teal-deep) 45%, transparent);
  font-size: 0.84rem;
  padding-block: 7px;
}

.nav__link--styles:hover {
  background: color-mix(in srgb, var(--teal-deep) 10%, transparent);
}

.nav__link:hover {
  color: var(--teal-deep);
  background: var(--surface);
}

.nav__link[aria-current="page"] {
  color: var(--teal-deep);
}

.nav__link .caret {
  width: 14px;
  height: 14px;
  transition: transform 0.25s var(--ease);
}

.nav__link[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.nav__utils {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Language switcher. A real <a> per language, so a crawler following the page
   finds the translations even with JavaScript disabled. */
.lang {
  position: relative;
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-2);
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.lang__btn:hover {
  border-color: var(--teal);
}

.lang__btn svg {
  width: 15px;
  height: 15px;
}

.lang__btn .caret {
  width: 12px;
  height: 12px;
}

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 172px;
  /* The containing block is the narrow .lang button, and an absolutely
     positioned box shrinks to fit it, which wrapped "Think Smart Bulgaria"
     and its "separate site" note onto four ragged lines. Size to the content
     instead, and keep each entry on one line. */
  width: max-content;
  max-width: 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.lang.is-open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang__menu a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--body);
  transition: background 0.15s, color 0.15s;
}

.lang__menu a:hover {
  background: var(--surface);
  color: var(--ink);
}

.lang__menu a[aria-current="true"] {
  color: var(--teal-deep);
  font-weight: 600;
}

.lang__menu .ext {
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  align-self: center;
}

/* Mega menu */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  pointer-events: none;
}

/* The panel spans the full width so the card can centre inside it, but only
   the card is actually the menu. Leaving the whole strip clickable made the
   empty margin beside the card swallow clicks: to a person that is page, and
   clicking there should close the menu, but it counted as clicking inside it.
   So the strip stays transparent to the pointer and the card takes it back. */
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega.is-open .mega__inner {
  pointer-events: auto;
}

.mega__inner {
  max-width: var(--page-max);
  margin: 10px auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  overflow: hidden;
}

.mega__list {
  padding: 18px;
  display: grid;
  gap: 2px;
}

.mega__item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 14px 15px;
  border-radius: 14px;
  transition: background 0.2s var(--ease);
}

.mega__item:hover {
  background: var(--surface);
}

.mega__ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(26, 163, 163, 0.1);
  display: grid;
  place-items: center;
  color: var(--teal-deep);
}

.mega__ico svg {
  width: 21px;
  height: 21px;
}

.mega__item--alert .mega__ico {
  background: rgba(255, 107, 94, 0.1);
  color: var(--alert);
}

.mega__item h3 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.mega__item p {
  font-size: 0.86rem;
  line-height: 1.45;
}

.mega__feature {
  padding: 24px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.mega__feature .pill {
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(26, 163, 163, 0.12);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.mega__feature h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.mega__feature p {
  font-size: 0.88rem;
  margin-bottom: 14px;
}

.mega__feature .link-arrow {
  margin-top: auto;
}

.hamburger,
.mobile-nav,
.drawer-backdrop {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

/* Full bleed, edge to edge. The banner is the page's opening statement and it
   owns the whole width; the drawn rings from the brand deck carry the visual
   right up to the viewport edge. */
.hero {
  background: var(--navy);
}

.hero__card {
  position: relative;
  margin-inline: auto;
  max-width: none;
  border-radius: 0;
  overflow: hidden;
  min-height: clamp(440px, 54vw, 600px);
  display: flex;
  align-items: center;
  background: var(--navy);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

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

/* Cross-fade between several photographs.
 *
 * The frames are stacked; only the current one is opaque. Without JavaScript
 * nothing ever changes `.is-current`, so the first frame stays and the hero is
 * a normal hero. The fade is long and the interval slow on purpose: a banner
 * that changes quickly pulls the eye away from the headline it sits behind. */
.hero__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hero__frame.is-current {
  opacity: 1;
}

/* Which photograph is showing, decided before the first paint.
 *
 * The markup marks the first frame current so the page is right without
 * scripting. The inline script in <head> stamps the remembered index on
 * <html>, and these rules move `is-current` to that frame before anything is
 * drawn, so navigating with a later photograph chosen no longer shows the
 * first one and then swaps. Selectors rather than a class change in
 * js/site.js, because only CSS in the head can win the race against paint. */
:root[data-hero] .hero__frame:first-child {
  opacity: 0;
}

/* `data-hero="0"` is the first frame, which is already current in the markup,
   so it is the one case where nothing moves. */
:root[data-hero="0"] .hero__frame:first-child,
:root[data-hero="1"] .hero__frame:nth-child(2),
:root[data-hero="2"] .hero__frame:nth-child(3),
:root[data-hero="3"] .hero__frame:nth-child(4),
:root[data-hero="4"] .hero__frame:nth-child(5),
:root[data-hero="5"] .hero__frame:nth-child(6),
:root[data-hero="6"] .hero__frame:nth-child(7),
:root[data-hero="7"] .hero__frame:nth-child(8) {
  opacity: 1;
}

/* Movement behind text is exactly what this setting is for. One photograph,
   no fading. */
@media (prefers-reduced-motion: reduce) {
  .hero__frame {
    transition: none;
  }

  .hero__frame:not(.is-current) {
    display: none;
  }
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(15, 15, 83, 0.94) 0%,
    rgba(15, 15, 83, 0.76) 42%,
    rgba(15, 15, 83, 0.3) 72%,
    rgba(15, 15, 83, 0.08) 100%
  );
}

/* The concentric rings from the brand deck, drawn rather than shipped as an
   image so they scale and cost nothing. */
.hero__rings {
  position: absolute;
  z-index: 1;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle, rgba(26, 163, 163, 0.1), transparent 58%);
  pointer-events: none;
}

.hero__rings::before,
.hero__rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero__rings::before {
  inset: 70px;
}

.hero__rings::after {
  inset: 140px;
  border-color: rgba(69, 215, 200, 0.16);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--page-max) + 2 * clamp(24px, 5vw, 56px));
  margin-inline: auto;
  padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 56px);
}

.hero__inner > * {
  max-width: 740px;
}

.hero h1 {
  font-size: var(--step-6);
  color: #fff;
  margin: 18px 0;
}

/* No photograph: the navy ground and the drawn rings carry the visual. This is
   a first-class state, not a degraded one, and it holds until commissioned
   photography exists. */
.hero--plain .hero__card {
  background: linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 55%, #1c2f7d 100%);
}

.hero--plain .hero__rings {
  border-color: rgba(255, 255, 255, 0.2);
  background: radial-gradient(circle, rgba(26, 163, 163, 0.17), transparent 58%);
}

.hero--plain .hero__rings::before {
  border-color: rgba(255, 255, 255, 0.15);
}

.hero--plain .hero__rings::after {
  border-color: rgba(69, 215, 200, 0.26);
}

.hero h1 .accent,
.hero h1 strong {
  color: var(--teal-bright);
  font-weight: inherit;
}

.hero__lead {
  font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.84);
  max-width: 34em;
  margin-bottom: 30px;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

/* Facts, not controls. A pill with a border and a filled background sitting
   directly above two real buttons reads as a button and invites a click that
   does nothing. These carry no fill, no border and no rounded capsule: just the
   icon, the claim and its qualifier, separated by a hairline rule. */
.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  padding: 4px 0;
  margin-right: 22px;
}

.hero__facts svg {
  width: 15px;
  height: 15px;
  color: var(--teal-bright);
}

/* The value and its label are two facts, not one sentence. Without the divider
   they read as "24-hour report we file it with you". */
.hero__facts b {
  font-weight: 600;
}

.hero__facts b::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin: 0 9px -0.1em 9px;
  background: rgba(255, 255, 255, 0.3);
}

.hero__facts .lbl {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
}

/* Page header: light by default.
 *
 * This was a full-bleed navy block on every page. With a navy home hero, navy
 * emphasis panels and a navy footer already in the design, one more per page
 * made the whole site read as blue, and a header carrying two lines of text
 * across 1440 pixels of navy is mostly empty rectangle.
 *
 * So the ground is light and the type does the work: a teal eyebrow, a large
 * navy headline, a hairline rule, and the breadcrumb trail above it. Navy is
 * still available with `variant: navy` for the pages where the drama is the
 * point, the incident page uses it. Reserving it makes it mean something.
 */
.pagehero {
  position: relative;
  overflow: hidden;
  background: var(--surface-grad);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(34px, 4vw, 56px) clamp(30px, 3.5vw, 48px);
}

/* A photograph behind the page header, faded almost to nothing.
 *
 * Two things keep it readable. The image sits at low opacity under a gradient
 * that runs from the page background at the left, where the words are, to
 * mostly clear at the right, where they are not. And the headline sits above
 * both on its own stacking layer. The result is a hero that has a mood without
 * having a subject, which is what a subpage wants: the title is still the
 * first thing read.
 *
 * The section keeps its own background colour underneath, so a photograph that
 * fails to load costs nothing. */
.pagehero__wash {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pagehero__wash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0.28;
}

.pagehero__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    #f7f9fd 0%,
    #f7f9fd 34%,
    rgba(247, 249, 253, 0.86) 55%,
    rgba(233, 237, 245, 0.62) 100%
  );
}

/* On the navy variant the same wash has to darken rather than lighten. */
.pagehero--navy .pagehero__wash img {
  opacity: 0.22;
}

.pagehero--navy .pagehero__wash::after {
  background: linear-gradient(
    100deg,
    var(--navy) 0%,
    var(--navy) 34%,
    rgba(15, 15, 83, 0.86) 55%,
    rgba(15, 15, 83, 0.62) 100%
  );
}

/* The rings are decoration for a plain header. With a photograph behind it
   there is already something to look at, so they would be noise. */
.pagehero--wash::after {
  display: none;
}

/* The brand rings, at low contrast, so the header is not a plain box. */
.pagehero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -180px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: 1px solid rgba(26, 163, 163, 0.16);
  box-shadow: 0 0 0 60px rgba(26, 163, 163, 0.04);
  pointer-events: none;
}

.pagehero .wrap {
  position: relative;
  z-index: 1;
}

.pagehero h1 {
  color: var(--ink);
  font-size: var(--step-4);
  margin: 14px 0 0;
  max-width: 22ch;
}

/* A short teal rule between the headline and the lead. It is the one piece of
   decoration here, and it earns its place by separating two type sizes that
   would otherwise run together. */
.pagehero h1::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad);
  margin: 22px 0 20px;
}

.pagehero__lead {
  font-size: var(--step-1);
  color: var(--body);
  max-width: 62ch;
}

.pagehero .btn-row {
  margin-top: 26px;
}

/* The navy variant, for the pages where the weight is the message. */
.pagehero--navy {
  background: var(--navy);
  border-bottom-color: transparent;
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(44px, 5vw, 72px);
}

.pagehero--navy::after {
  border-color: rgba(26, 163, 163, 0.28);
  box-shadow: none;
}

.pagehero--navy h1 {
  color: #fff;
}

.pagehero--navy .pagehero__lead {
  color: rgba(255, 255, 255, 0.78);
}

.pagehero--navy .eyebrow {
  color: #86e7de;
}

.pagehero--navy .eyebrow svg {
  color: #86e7de;
}

/* Breadcrumbs sit above the H1 and are also emitted as JSON-LD. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--teal-deep);
}

.pagehero--navy .crumbs {
  color: rgba(255, 255, 255, 0.6);
}

.pagehero--navy .crumbs a:hover {
  color: #fff;
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  opacity: 0.5;
}

.crumbs li {
  display: inline-flex;
  align-items: center;
}

/* The eyebrow sits directly under the breadcrumb trail and the two read as one
   run-on line without this. */
.crumbs + .eyebrow {
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   7. Trust strip and logo wall
   -------------------------------------------------------------------------- */

.trust-strip {
  position: relative;
  z-index: 5;
  max-width: var(--page-max);
  margin: -46px auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

.trust {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 24px 22px;
  border-right: 1px solid var(--line);
}

.trust:last-child {
  border-right: none;
}

.trust__ico {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--teal-deep);
}

.trust__ico svg {
  width: 23px;
  height: 23px;
}

.trust b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.2;
}

.trust span {
  font-size: 0.85rem;
  color: var(--muted);
}

.logo-wall {
  padding-block: clamp(40px, 5vw, 60px);
  text-align: center;
}

.logo-wall__label {
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}

/* A still logo row. Motion here buys nothing but distraction, so the marks
   sit in a wrapped, centred grid and simply take colour on hover. */
.logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px clamp(32px, 5vw, 64px);
}

.logo-grid img {
  /* Partner logos come in wildly different aspect ratios. Constraining only
     the height lets a wide wordmark dominate the row, so both axes are
     capped and the mark is fitted inside that box. */
  max-height: 28px;
  max-width: 132px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s, opacity 0.3s;
}

.logo-grid img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

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

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

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-sm);
}

.grid--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 13px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.card__ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(26, 163, 163, 0.1);
  display: grid;
  place-items: center;
  color: var(--teal-deep);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.card__ico svg {
  width: 22px;
  height: 22px;
}

.card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.card p {
  font-size: 0.92rem;
  line-height: 1.55;
}

.card__num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--teal-deep);
  display: block;
  margin-bottom: 12px;
}

.card__foot {
  margin-top: auto;
  padding-top: 16px;
}

.card__tag {
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--navy);
  margin-top: 14px;
}

.card__tag--teal {
  background: rgba(26, 163, 163, 0.12);
  color: var(--teal-deep);
}

.card--navy {
  background: var(--navy);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.76);
}

.card--navy h3,
.card--navy b {
  color: #fff;
}

.card--navy .card__num {
  color: var(--teal-bright);
}

/* Media card: an image, an icon that overlaps it, then the copy. */
.mcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.mcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.mcard__media {
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--navy);
}

.mcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.mcard:hover .mcard__media img {
  transform: scale(1.05);
}

.mcard__ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  color: var(--teal-deep);
  margin: -48px 0 16px 26px;
  position: relative;
  z-index: 3;
}

.mcard__ico svg {
  width: 26px;
  height: 26px;
}

.mcard__body {
  padding: 0 26px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.mcard__body h3 {
  font-size: var(--step-2);
  margin-bottom: 8px;
}

.mcard__body p {
  font-size: 0.96rem;
  margin-bottom: 14px;
}

.mcard__meta {
  font-family: var(--font-head);
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: auto;
  padding-top: 6px;
}

.mcard__meta b {
  color: var(--teal-deep);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. Navy panels
   -------------------------------------------------------------------------- */

.navy-panel {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 46px);
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
}

.navy-panel::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(26, 163, 163, 0.3);
  pointer-events: none;
}

.navy-panel--glow::after {
  border: none;
  background: radial-gradient(circle, rgba(26, 163, 163, 0.21), transparent 60%);
}

.navy-panel h2,
.navy-panel h3,
.navy-panel h4 {
  color: #fff;
  position: relative;
}

.navy-panel > p {
  position: relative;
  color: rgba(255, 255, 255, 0.75);
}

.navy-panel h2 {
  font-size: var(--step-4);
  margin: 14px 0 12px;
  max-width: 22ch;
}

/* Numbered duty list inside a navy panel. */
.proof-list {
  margin-top: 22px;
  position: relative;
}

.proof-list li {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.proof-list li:first-child {
  border-top: none;
}

.proof-list .n {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  /* --teal-bright, not --teal. This marker always sits on a dark panel, and a
     theme whose teal is tuned for paper gives 2.5:1 here. Every theme defines
     --teal-bright as its light tone, so this is 7.4:1 or better in all five. */
  color: var(--teal-bright);
  width: 26px;
  padding-top: 2px;
}

.proof-list b {
  display: block;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.99rem;
  margin-bottom: 2px;
}

.proof-list span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.88rem;
  line-height: 1.55;
}

.callout-warn {
  margin-top: 22px;
  background: rgba(255, 107, 94, 0.14);
  border: 1px solid rgba(255, 107, 94, 0.3);
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
}

.callout-warn b {
  color: #ffd3cf;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  display: block;
  margin-bottom: 3px;
}

.callout-warn p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.86rem;
}

/* --------------------------------------------------------------------------
   10. Reporting clock
   -------------------------------------------------------------------------- */

.deadline-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 32px;
  position: relative;
}

.deadline {
  background: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
}

.deadline__when {
  display: block;
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 9px;
}

.deadline b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--navy);
  margin-bottom: 6px;
}

.deadline p {
  font-size: 0.89rem;
  line-height: 1.55;
}

.panel-note {
  position: relative;
  margin-top: 18px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.62);
}

/* The reporting clock as the hero: the pulse direction's signature. The three
   deadlines are the headline; the units repeat them as instruments, each with
   a slow drawn ring. */
.hclock {
  background: linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 60%, #1c2f7d 100%);
  padding-block: clamp(72px, 9vw, 132px) clamp(64px, 8vw, 112px);
}

/* The photograph sits behind the whole band, heavily darkened. The figures are
   the subject here, so the image only ever adds depth: at these opacities the
   white type keeps the same contrast it has on the plain gradient. */
.hclock--photo {
  position: relative;
  isolation: isolate;
}

.hclock__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hclock__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

/* The frames stack inside the clock hero exactly as they do in the standard
   one; the darkening lives on the image, so it survives the swap. */
.hclock__bg .hero__frame {
  position: absolute;
  inset: 0;
}

.hclock__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(6, 6, 42, 0.95) 0%,
    rgba(10, 10, 56, 0.86) 46%,
    rgba(15, 15, 83, 0.72) 100%
  );
}

.hclock h1 {
  font-size: clamp(2.6rem, 1.5rem + 5.2vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 18px 0 22px;
  max-width: 13em;
}

.hclock__lead {
  font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.84);
  max-width: 36em;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.hclock__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 52px);
}

.hclock__unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  padding: 24px 8px;
}

.hclock__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle, rgba(26, 163, 163, 0.11), transparent 59%);
  pointer-events: none;
}

.hclock__ring::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1px dashed rgba(69, 215, 200, 0.38);
}

/* The sweep only exists for people who have not asked for reduced motion; for
   everyone else the ring is simply a ring. */
@media (prefers-reduced-motion: no-preference) {
  .hclock__ring::before {
    animation: hclock-sweep 30s linear infinite;
  }
}

@keyframes hclock-sweep {
  to {
    transform: rotate(360deg);
  }
}

.hclock__unit b {
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-3);
  color: #fff;
}

.hdeadline__when {
  position: relative;
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #86e7de;
  margin-top: 7px;
}

@media (max-width: 700px) {
  .hclock__row {
    gap: 8px;
  }

  .hclock__unit {
    min-height: 140px;
    padding: 14px 2px;
  }

  .hclock__ring {
    width: 104px;
    height: 104px;
  }

  .hclock__ring::before {
    inset: -8px;
  }

  .hclock__unit b {
    font-size: var(--step-1);
  }

  .hdeadline__when {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
}

/* --------------------------------------------------------------------------
   11. Compare (usual route vs our route)
   -------------------------------------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 18px;
  align-items: stretch;
}

.compare__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
}

.compare__card--dark {
  background: var(--navy);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}

.compare__card--dark::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 163, 163, 0.18), transparent 59%);
  pointer-events: none;
}

.compare__label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  position: relative;
}

.compare__card--dark .compare__label {
  color: #86e7de;
}

.compare__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: relative;
}

.compare__list li {
  display: flex;
  gap: 11px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.compare__list svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 5px;
  color: var(--line-2);
}

.compare__card--dark .compare__list li {
  color: rgba(255, 255, 255, 0.87);
}

.compare__card--dark .compare__list svg {
  color: var(--teal);
}

.compare__foot {
  margin-top: auto;
  padding-top: 22px;
  position: relative;
}

.compare__foot .note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 0.92rem;
  color: var(--muted);
}

.compare__card--dark .compare__foot .note {
  /* Both sides come from tokens. This used to be a fixed dark teal on
     var(--teal), which works on the base palette and gives 2.61:1 on a theme
     whose teal is tuned for paper. The bright/deep pair is 8.4:1 or better in
     every direction. */
  background: var(--teal-bright);
  border-color: transparent;
  color: var(--navy-deep);
  font-family: var(--font-head);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   12. Packages
   -------------------------------------------------------------------------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
}

.tier {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.tier:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.tier--featured {
  border-color: var(--teal);
  box-shadow: var(--shadow);
}

.tier__flag {
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(26, 163, 163, 0.1);
  padding: 4px 9px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.tier h3 {
  font-size: 1.16rem;
  margin-bottom: 5px;
}

.tier__for {
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 3.2em;
}

.tier__size {
  font-family: var(--font-head);
  font-size: 0.78rem;
  color: var(--teal-deep);
  font-weight: 500;
  margin-top: 8px;
}

.tier__price {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.05rem;
  margin: 14px 0 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.tier__unit {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--muted);
  display: block;
}

.tier ul {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-grow: 1;
}

.tier li {
  display: flex;
  gap: 9px;
  font-size: 0.87rem;
  line-height: 1.5;
}

.tier li svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--teal);
  stroke-width: 2.4;
}

.tier .link-arrow {
  margin-top: 20px;
  font-size: 0.86rem;
}

/* Packages teaser: three of the five levels as light cards, the whole card a
   link to the full matrix. */
.tease {
  text-decoration: none;
  color: inherit;
}

.tease__flag {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 10px;
}

.tease h3 {
  font-size: var(--step-2);
  margin-bottom: 8px;
}

.tease__size {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13. Article 21(2) measures
   -------------------------------------------------------------------------- */

.measure-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.measure {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.measure:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.measure__n {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.79rem;
  margin-bottom: 12px;
}

.measure__letter {
  position: absolute;
  top: 19px;
  right: 18px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.6;
}

.measure h3 {
  font-size: 0.96rem;
  line-height: 1.25;
  margin-bottom: 6px;
}

.measure p {
  font-size: 0.84rem;
  line-height: 1.5;
  flex-grow: 1;
}

/* Who ends up operating the measure. The question a buyer is actually asking,
   so it gets its own line rather than being folded into the description. */
.measure__who {
  flex-grow: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.79rem;
  color: var(--muted);
}

.measure__who b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal-deep);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   14. Steps
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  /* Three rather than five: the sequences on this site run to six steps, and
     six in a five-column grid leave one card stranded on a row of its own,
     which reads as a mistake rather than as the end of the sequence. Three
     also gives the two-line step titles room to breathe. */
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  counter-reset: step;
}

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.step__n {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--teal-deep);
  margin-bottom: 12px;
}

.step h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.step p {
  font-size: 0.87rem;
  line-height: 1.55;
}

.step--last {
  background: var(--navy);
  border-color: transparent;
}

.step--last .step__n {
  color: #86e7de;
}

.step--last h3 {
  color: #fff;
}

.step--last p {
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   15. Split layouts
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.split--top {
  align-items: start;
}

/* A split with no image is not a split: it is a passage of text. Holding the
   two-column grid there leaves half the page empty and squeezes the prose into
   a column narrower than it needs. One column, capped at a reading measure. */
.split--solo {
  grid-template-columns: minmax(0, 1fr);
}

.split--solo .split__text > * {
  max-width: var(--measure-wide);
}

/* The value cards are not prose and do not want the reading measure: with the
   whole width to themselves they sit in one row instead of leaving the last
   card alone on a second. */
.split--solo .split__text > .values {
  max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.split--reverse .split__visual {
  order: -1;
}

.split__visual .fig {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}

.split__visual .fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 7s var(--ease);
}

.split__visual:hover .fig img {
  transform: scale(1.05);
}

.split__visual {
  position: relative;
}

.stat-float {
  position: absolute;
  left: -18px;
  bottom: -22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 18px 22px;
  display: flex;
  gap: 26px;
}

.stat-float b {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  font-size: var(--step-2);
  display: block;
  line-height: 1;
}

.stat-float span {
  font-size: 0.78rem;
  /* --body rather than --muted. The card floats over a photograph, so the
     effective background is not always the white it declares, and a 12px label
     is the wrong place to spend contrast. */
  color: var(--body);
}

.intro-copy {
  font-size: var(--step-1);
  margin: 14px 0 22px;
}

/* A multi-paragraph body needs space between paragraphs, not just inside
   them: without this the leading runs on and three paragraphs read as one. */
.intro-copy > * + * {
  margin-top: 1.1em;
}

.intro-copy strong {
  color: var(--ink);
  font-weight: 600;
}

.badge-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.badge {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--teal-deep);
  background: rgba(26, 163, 163, 0.1);
  border: 1px solid rgba(26, 163, 163, 0.2);
  padding: 7px 14px;
  border-radius: 999px;
}

.values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}

.value {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.value:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.value__ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(26, 163, 163, 0.1);
  display: grid;
  place-items: center;
  color: var(--teal-deep);
}

.value__ico svg {
  width: 20px;
  height: 20px;
}

.value b {
  display: block;
  font-family: var(--font-head);
  color: var(--ink);
  font-size: 0.98rem;
  margin-bottom: 2px;
}

.value span {
  font-size: 0.86rem;
  line-height: 1.45;
}

.img-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.img-collage .im {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

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

.img-collage .im--tall {
  grid-row: span 2;
  aspect-ratio: 3 / 4;
}

.img-collage .im--wide {
  aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
   16. Stats and claims
   -------------------------------------------------------------------------- */

.figure-card {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  position: relative;
  overflow: hidden;
}

.figure-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(26, 163, 163, 0.3);
  pointer-events: none;
}

.figure-card b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: #fff;
  position: relative;
}

.figure-card span {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.94rem;
  line-height: 1.5;
  position: relative;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 24px;
}

.stat-row .stat b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-3);
  color: var(--navy);
  line-height: 1;
}

.stat-row .stat span {
  font-size: 0.82rem;
  color: var(--muted);
}

.on-navy .stat-row .stat b {
  color: #fff;
}

.on-navy .stat-row .stat span {
  color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------------------
   17. Tables, plain HTML tables on purpose
   -------------------------------------------------------------------------- */

/* An AI crawler does not run JavaScript. A country matrix, a package
   comparison or an Article 21 mapping is only citable if it is a real table in
   the delivered HTML, so that is what these are. */
.table-scroll {
  overflow-x: auto;
  /* The wrapper takes focus so it can be scrolled with the arrow keys. See the
     tabindex in the table renderer. */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 640px;
}

table.data caption {
  text-align: left;
  padding: 18px 22px 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: 1rem;
}

table.data th,
table.data td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Yes/no cells carry a mark rather than a word. Centred, because a column of
   marks is read as a shape and a ragged left edge breaks that. The excluded
   mark is deliberately quiet: absence should not compete with presence. */
table.data td.data__on,
table.data td.data__off {
  text-align: center;
  width: 1%;
  white-space: nowrap;
}

table.data td.data__on span[aria-hidden] {
  color: var(--teal-deep);
  font-size: 1.05rem;
  font-weight: 700;
}

table.data td.data__off span[aria-hidden] {
  color: var(--muted);
  opacity: 0.55;
}

table.data thead th {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border-bottom-color: var(--line-2);
  white-space: nowrap;
}

table.data tbody tr:last-child td {
  border-bottom: none;
}

table.data tbody tr:hover {
  background: var(--surface);
}

table.data th[scope="row"] {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   18. FAQ, native <details>, so the answers are in the HTML
   -------------------------------------------------------------------------- */

.faq {
  max-width: 860px;
  margin-inline: auto;
  display: grid;
  gap: 10px;
}

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.faq details[open] {
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.faq .faq__a {
  padding: 0 22px 20px;
  font-size: 0.96rem;
  line-height: 1.65;
}

.faq .faq__a > * + * {
  margin-top: 0.8em;
}

/* --------------------------------------------------------------------------
   19. Wizard
   -------------------------------------------------------------------------- */

.wizard {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}

.wizard__aside {
  background: var(--navy);
  color: #fff;
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wizard__aside::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 163, 163, 0.21), transparent 60%);
  pointer-events: none;
}

.wizard__aside h2 {
  color: #fff;
  font-size: var(--step-3);
  margin: 14px 0 12px;
  position: relative;
}

.wizard__aside p {
  color: rgba(255, 255, 255, 0.76);
  position: relative;
}

.wizard__aside ul {
  margin-top: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard__aside li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.wizard__aside li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--teal-bright);
  stroke-width: 2;
}

.wizard__main {
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  min-height: 440px;
}

.ck-progress {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.ck-progress__bar {
  height: 100%;
  background: var(--grad);
  border-radius: 999px;
  transition: width 0.4s var(--ease);
}

.ck-count {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--font-head);
  margin-bottom: 22px;
}

.ck-q {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1.25;
}

.ck-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ck-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.ck-opt:hover {
  border-color: var(--teal);
  background: var(--surface);
  transform: translateX(3px);
}

.ck-opt .k {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy-mid);
  transition: background 0.2s, color 0.2s;
}

.ck-opt:hover .k {
  background: var(--teal);
  color: #fff;
}

.ck-opt--danger {
  border-color: rgba(255, 107, 94, 0.4);
}

.ck-opt--danger .k {
  background: rgba(255, 107, 94, 0.12);
  color: var(--alert);
}

.ck-opt--danger:hover {
  background: rgba(255, 107, 94, 0.06);
  border-color: var(--alert);
}

.ck-opt--danger:hover .k {
  background: var(--alert);
  color: #fff;
}

.ck-foot {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ck-back {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.2s;
}

.ck-back:hover {
  color: var(--ink);
}

.ck-back svg {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.ck-result {
  display: none;
  flex-direction: column;
  flex-grow: 1;
}

.ck-result.is-shown {
  display: flex;
}

.ck-result__tag {
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(26, 163, 163, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.ck-result--alert .ck-result__tag {
  color: var(--alert);
  background: rgba(255, 107, 94, 0.12);
}

.ck-result__ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(26, 163, 163, 0.1);
  display: grid;
  place-items: center;
  color: var(--teal-deep);
  margin-bottom: 18px;
}

.ck-result--alert .ck-result__ico {
  background: rgba(255, 107, 94, 0.1);
  color: var(--alert);
}

.ck-result__ico svg {
  width: 28px;
  height: 28px;
}

.ck-result h3 {
  font-size: var(--step-2);
  margin-bottom: 10px;
}

.ck-result__summary {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 12px 0 22px;
}

.ck-result .btn-row {
  margin-top: auto;
}

/* The no-JavaScript fallback: the whole decision tree as a readable list.
   It is also what a crawler indexes, which is the point. */
.ck-static {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 22px;
}

.js-on .ck-static {
  display: none;
}

/* --------------------------------------------------------------------------
   20. Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: var(--gap-lg);
  /* `start`, not `stretch`. The form is much taller than the person card, and
     stretching left a navy panel with its contact details marooned at the
     bottom of an empty column. */
  align-items: start;
}

.person {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.5vw, 36px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.person::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 163, 163, 0.28), transparent 65%);
  pointer-events: none;
}

.person__top {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
  position: relative;
}

.person__top img {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px solid rgba(69, 215, 200, 0.5);
}

.person__top h3 {
  color: #fff;
  font-size: var(--step-1);
}

.person__role {
  color: var(--teal-bright);
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 500;
}

.person__place {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.person blockquote {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
  margin-bottom: 24px;
  border-left: 2px solid var(--teal);
  padding-left: 16px;
  position: relative;
}

.reach-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  position: relative;
}

.reach {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  transition: background 0.2s, border-color 0.2s;
}

.cm:hover {
  border-color: rgba(69, 215, 200, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

.reach svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--teal-bright);
}

/* The label sits above the value, not beside it. As inline spans they ran
   together into "Call directly+31 (0)20 210 1552". */
.reach > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reach .l {
  font-size: 0.74rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.56);
}

.reach .v {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.96rem;
  line-height: 1.3;
  color: #fff;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   21. Forms
   -------------------------------------------------------------------------- */

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.5vw, 36px);
  box-shadow: var(--shadow);
}

.form-card h2,
.form-card h3 {
  font-size: var(--step-2);
  margin-bottom: 6px;
}

.form-card .sub {
  margin-bottom: 24px;
}

.field {
  margin-bottom: 15px;
}

.field label {
  display: block;
  font-size: 0.82rem;
  color: var(--body);
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-weight: 500;
}

.field .req {
  color: var(--alert);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
  font-size: 0.98rem;
  transition: border-color 0.2s, background 0.2s;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379819a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal);
  background: #fff;
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--alert);
  background: rgba(255, 107, 94, 0.04);
}

.field .err {
  display: none;
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--alert);
}

.field .err.is-shown {
  display: block;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 6px 0 14px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.check input {
  /* 24px, not 18. Below 24 it fails the minimum target size and, more to the
     point, it is hard to hit with a thumb. */
  width: 24px;
  height: 24px;
  margin-top: 0;
  accent-color: var(--teal);
  flex-shrink: 0;
  cursor: pointer;
}

.check label {
  cursor: pointer;
  padding-top: 3px;
}

.check a {
  color: var(--teal-deep);
  text-decoration: underline;
}

.form-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 12px;
  text-align: center;
}

/* A honeypot: a real field, hidden from people, that bots fill in. Cheaper and
   more private than a third-party captcha, which is the trade-off we want. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.92rem;
}

.form-status.is-shown {
  display: block;
}

.form-status--ok {
  background: rgba(26, 163, 163, 0.1);
  border: 1px solid rgba(26, 163, 163, 0.3);
  color: var(--teal-deep);
}

.form-status--err {
  background: rgba(255, 107, 94, 0.08);
  border: 1px solid rgba(255, 107, 94, 0.3);
  color: var(--alert-hover);
}

/* --------------------------------------------------------------------------
   22. Incident band and floating button
   -------------------------------------------------------------------------- */

.incident-band {
  background: linear-gradient(100deg, #2a1410 0%, var(--navy-deep) 70%);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 46px);
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--gap-lg);
  align-items: center;
}

.incident-band::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(255, 107, 94, 0.35);
  pointer-events: none;
}

.incident-band h2 {
  color: #fff;
  font-size: var(--step-3);
  margin: 12px 0 12px;
}

.incident-band .eyebrow {
  color: #ffb59d;
}

.incident-band .eyebrow svg {
  color: var(--alert);
}

.incident-band__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.sos-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--alert);
  color: #fff;
  padding: 14px 20px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 12px 34px rgba(255, 107, 94, 0.4);
  transition: transform 0.25s var(--ease);
}

.sos-float:hover {
  transform: translateY(-3px);
}

/* The button floats over the bottom-right corner for the whole scroll. On a
   phone that is exactly where a form's submit button ends up, so the page
   reserves the space rather than letting the two overlap. */
body {
  padding-bottom: 84px;
}

@media (min-width: 621px) {
  body {
    padding-bottom: 0;
  }
}

.sos-float svg {
  width: 20px;
  height: 20px;
}

.sos-float .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  animation: alert-breathe 2.4s ease-in-out infinite;
}

/* A slow breathing dot rather than an expanding ring: alive, not alarming
   the reader who has no incident. */
@keyframes alert-breathe {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

/* --------------------------------------------------------------------------
   23. CTA band, certifications, locations
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--grad);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-band::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.cta-band h2 {
  color: #fff;
  font-size: var(--step-3);
  margin-bottom: 8px;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 60ch;
}

.cta-band__txt {
  max-width: 640px;
  position: relative;
}

.seal-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.cert {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 18px;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.cert:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.cert__seal {
  width: 92px;
  height: 92px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(from 210deg, var(--teal) 0deg, var(--navy) 260deg, var(--teal) 360deg);
  padding: 3px;
}

.cert__seal-in {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--navy);
  line-height: 1.2;
  text-align: center;
  padding: 6px;
}

.cert h3 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.cert span {
  font-size: 0.84rem;
  color: var(--muted);
}

.loc-list {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loc {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.loc--primary {
  border-color: rgba(26, 163, 163, 0.4);
  background: rgba(26, 163, 163, 0.04);
}

.loc__pin {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--teal-deep);
}

.loc__pin svg {
  width: 19px;
  height: 19px;
}

.loc h3 {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
}

.loc .tag {
  font-family: var(--font-head);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  /* --teal behind white text is 3.08:1. --teal-deep is 5.67:1. */
  background: var(--teal-deep);
  color: #fff;
}

.loc .tag--sec {
  background: var(--surface-2);
  color: var(--muted);
}

.loc p {
  font-size: 0.89rem;
}

.loc a {
  color: var(--teal-deep);
}

/* --------------------------------------------------------------------------
   24. Prose (articles, legal pages)
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
  font-size: 1.04rem;
  line-height: 1.75;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2 {
  font-size: var(--step-3);
  margin-top: 2em;
  margin-bottom: 0.1em;
}

.prose h3 {
  font-size: var(--step-1);
  margin-top: 1.6em;
  margin-bottom: 0.1em;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose ul li {
  list-style: none;
  position: relative;
  margin-top: 0.5em;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.prose ol {
  list-style: decimal;
}

.prose ol li {
  margin-top: 0.5em;
  padding-left: 0.3em;
}

.prose ol li::marker {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal-deep);
}

.prose a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--navy);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose blockquote {
  border-left: 3px solid var(--teal);
  padding-left: 20px;
  color: var(--ink);
  font-size: 1.1rem;
}

.prose code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.9em;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin-block: 2em;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.prose thead th {
  font-family: var(--font-head);
  color: var(--ink);
  border-bottom-color: var(--line-2);
}

/* --------------------------------------------------------------------------
   25. Insights list
   -------------------------------------------------------------------------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.post:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.post__media {
  aspect-ratio: 16 / 9;
  background: var(--navy);
  overflow: hidden;
}

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

.post__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post__meta {
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.post h3 {
  font-size: 1.12rem;
  margin-bottom: 8px;
}

.post p {
  font-size: 0.92rem;
}

.post .link-arrow {
  margin-top: auto;
  padding-top: 16px;
}

.article-head {
  max-width: var(--measure);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   26. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(40px, 4.5vw, 56px) 0 24px;
}

/* Four columns, and they have to stay four. A fifth child wraps onto a second
   row and leaves a navy void the height of the whole footer, which is how this
   looked before the offices were merged into one column. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
  gap: clamp(24px, 3vw, 40px);
  margin-bottom: 32px;
  align-items: start;
}

.footer-brand img {
  height: 28px;
  width: auto;
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 0.9rem;
  max-width: 34ch;
}

.footer-brand .tagline {
  color: var(--teal-bright);
  font-family: var(--font-head);
  font-weight: 500;
  margin-top: 12px;
}

.footer-col h2 {
  font-family: var(--font-head);
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
}

.footer-col a,
.footer-col p {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  margin-bottom: 7px;
}

.footer-col a:hover {
  color: var(--teal-bright);
}

.footer-office {
  margin-bottom: 16px;
}

.footer-office--compact h3 {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.footer-office h3 {
  color: #fff;
  font-size: 0.95rem;
  font-family: var(--font-head);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
  font-weight: 500;
}

.footer-office .tag {
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Same reason as .loc .tag: white on --teal does not reach 4.5:1. */
  background: #0d5f5c;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}

.socials {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.socials a {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.socials a:hover {
  background: var(--teal);
  border-color: var(--teal);
  transform: translateY(-3px);
}

.socials svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.footer-links a:hover {
  color: var(--teal-bright);
}

/* --------------------------------------------------------------------------
   27. Consent banner
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 400;
  max-width: 560px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
}

.consent h2 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.consent p {
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 16px;
}

.consent a {
  color: var(--teal-deep);
  text-decoration: underline;
}

.consent__actions {
  display: flex;
  gap: 12px;
}

/* Decline is not a lesser button. It has the same size and the same visual
   weight as accept, because a consent choice that is nudged is not consent. */
.consent__actions .btn {
  flex: 1;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   28. Utilities and motion
   -------------------------------------------------------------------------- */

/* A short lift, not a long fade. At 0.6s and 24px the movement was still
   running while the reader was already looking at the text. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Without JavaScript nothing ever gets `.is-in`, so the reveal class must not
   be what makes content visible. `no-js` on <html> is removed by the first
   inline script; if that never runs, everything stays visible. */
.no-js .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.note {
  font-size: 0.86rem;
  color: var(--muted);
}

.note--inline {
  display: block;
  margin-top: 8px;
}

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--gap-sm); }
.mt { margin-top: var(--gap); }
.mt-lg { margin-top: var(--gap-lg); }
.center { text-align: center; }

.on-navy {
  color: rgba(255, 255, 255, 0.78);
}

.on-navy h1,
.on-navy h2,
.on-navy h3,
.on-navy h4,
.on-navy b,
.on-navy strong {
  color: #fff;
}

/* A white card sitting inside a navy section must not inherit that section's
   light text. Resetting on the card is safer than trusting every child to set
   its own colour, one that forgets becomes white on white and is invisible
   in a way nobody notices until a screenshot. */
.on-navy .deadline,
.on-navy .card:not(.card--navy),
.on-navy .form-card,
.on-navy .table-scroll,
.on-navy .faq,
.on-navy .tier,
.on-navy .step:not(.step--last),
.on-navy .measure {
  color: var(--body);
}

.on-navy .deadline b,
.on-navy .stat-float b {
  color: var(--navy);
}

.on-navy .deadline h2,
.on-navy .deadline h3,
.on-navy .card:not(.card--navy) h2,
.on-navy .card:not(.card--navy) h3,
.on-navy .tier h3,
.on-navy .measure h3,
.on-navy .step:not(.step--last) h3,
.on-navy .form-card h2,
.on-navy .form-card h3 {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   29. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .measure-grid,
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .tier-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 980px) {
  .nav__menu,
  .lang,
  .nav__utils .btn {
    display: none;
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: auto;
  }

  .hamburger span {
    width: 24px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s;
  }

  .hamburger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .hamburger.is-active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mega {
    display: none;
  }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    width: min(88vw, 390px);
    background: #fff;
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    padding: 24px;
    overflow-y: auto;
  }

  .mobile-nav.is-open {
    transform: translateX(0);
  }

  .drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(15, 15, 83, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  .mnav__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .mnav__head img {
    height: 26px;
    width: auto;
  }

  .mnav__close {
    background: none;
    border: none;
    color: var(--ink);
    cursor: pointer;
    padding: 8px;
  }

  .mnav__close svg {
    width: 22px;
    height: 22px;
  }

  .drawer-acc {
    border-bottom: 1px solid var(--line);
  }

  .drawer-acc > button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: var(--ink);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.05rem;
    padding: 16px 0;
    cursor: pointer;
  }

  .drawer-acc > button svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--ease);
  }

  .drawer-acc.is-open > button svg {
    transform: rotate(180deg);
  }

  .drawer-acc__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease);
  }

  .drawer-acc__body a {
    display: block;
    color: var(--body);
    padding: 11px 0 11px 14px;
    font-size: 0.95rem;
  }

  .drawer-link {
    display: block;
    color: var(--ink);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.05rem;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  /* The route to the style directions, marked as a working tool rather than a
     page a customer is meant to visit, the same way the header link is. It
     only appears off the live domain (see js/site.js). */
  .drawer-link--styles {
    margin-top: 14px;
    border-bottom: none;
    color: var(--teal-deep);
    font-size: 0.95rem;
    padding: 12px 14px;
    border: 1px dashed color-mix(in srgb, var(--teal-deep) 45%, transparent);
    border-radius: 10px;
    text-align: center;
  }

  .mnav__foot {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .drawer-lang {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .drawer-lang a {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--body);
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 0.82rem;
  }

  .drawer-lang a[aria-current="true"] {
    color: var(--teal-deep);
    border-color: var(--teal);
  }

  .hero__rings {
    display: none;
  }

  .hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(15, 15, 83, 0.93) 0%,
      rgba(15, 15, 83, 0.86) 58%,
      rgba(15, 15, 83, 0.7) 100%
    );
  }

  .trust-strip {
    grid-template-columns: 1fr 1fr;
  }

  .trust:nth-child(2) {
    border-right: none;
  }

  .trust:nth-child(1),
  .trust:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5,
  .post-grid,
  .seal-row,
  .deadline-row,
  .values {
    grid-template-columns: 1fr 1fr;
  }

  .compare,
  .split,
  .contact-grid,
  .wizard,
  .incident-band,
  .form-row {
    grid-template-columns: 1fr;
  }

  .split--reverse .split__visual {
    order: 0;
  }

  .stat-float {
    left: 14px;
    bottom: -18px;
  }

  .measure-grid,
  .steps,
  .tier-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .img-collage .im--tall {
    grid-row: span 1;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 620px) {
  .trust-strip {
    grid-template-columns: 1fr;
    margin-top: -32px;
  }

  .trust {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .trust:last-child {
    border-bottom: none;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5,
  .post-grid,
  .deadline-row,
  .values,
  .measure-grid,
  .steps,
  .tier-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .seal-row {
    grid-template-columns: 1fr 1fr;
  }

  .sos-float .lbl {
    display: none;
  }

  .sos-float {
    padding: 16px;
  }

  .stat-float {
    position: static;
    margin-top: 16px;
    box-shadow: var(--shadow);
  }

  .consent__actions {
    flex-direction: column;
  }
}

@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;
  }
}

/* --------------------------------------------------------------------------
   31. Section-specific layouts
   --------------------------------------------------------------------------
   These used to be inline style attributes in the section renderers. They are
   here instead so the Content Security Policy has a route to dropping
   'unsafe-inline' from style-src, and so a layout tweak is a CSS change rather
   than a template change.
   -------------------------------------------------------------------------- */

/* Scope cards: a square badge beside the copy. */
.entity-cards {
  display: grid;
  gap: 14px;
}

/* Without the dark panel beside them (the home page's short version) the same
   cards stand in a three-up grid and stack their badge above the copy. */
.entity-cards--grid {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.entity-cards--grid .entity-card {
  flex-direction: column;
}

@media (max-width: 980px) {
  .entity-cards--grid {
    grid-template-columns: 1fr;
  }
}

.entity-card {
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

.entity-card__badge {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(26, 163, 163, 0.1);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-align: center;
  padding: 4px;
  /* ESSENTIAL and SUPPLYCHAIN do not fit on one line at this size. The content
     carries a soft hyphen; these two properties are what let the browser use
     it. */
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* A headline figure beside the section heading. */
.split--lead {
  grid-template-columns: 1.45fr 0.85fr;
  margin-bottom: var(--gap-lg);
}

.head-block--flush {
  margin-bottom: 0;
}

/* Heading in one column, the passage in the other, so a long piece of prose
   does not leave half the page empty. */
.split--reading {
  grid-template-columns: 0.85fr 1.15fr;
}

.split--reading .head-block {
  margin-bottom: 0;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.cta-band__cta {
  position: relative;
}

/* The closing "next step" card. */
.next-step {
  grid-template-columns: 1.35fr 0.75fr;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow);
}

.next-step__title {
  font-size: var(--step-2);
  margin: 12px 0 8px;
}

.next-step__cta {
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 980px) {
  .split--lead,
  .split--reading,
  .next-step {
    grid-template-columns: 1fr;
  }

  .split--reading .head-block {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   32. Style variants, review furniture, not part of the site
   --------------------------------------------------------------------------
   The switcher and the index only appear under /styles/. They are styled with
   the same tokens as everything else, so each direction restyles them for free
   and the bar always looks like it belongs to the page underneath it.
   -------------------------------------------------------------------------- */

.styleswitch {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.styleswitch__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-block: 10px;
  flex-wrap: wrap;
}

.styleswitch__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  line-height: 1.3;
}

.styleswitch__label svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--teal-bright);
}

.styleswitch__label b {
  display: block;
  color: #fff;
  font-weight: 600;
}

.styleswitch__desc {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.74rem;
}

.styleswitch__nav {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.styleswitch__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.styleswitch__item:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.styleswitch__item.is-current {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

/* The four swatches are the palette itself, which is a more honest label than
   a name, the reader can see what they are choosing before they click. */
.styleswitch__dots {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  outline: 1px solid rgba(255, 255, 255, 0.28);
}

.styleswitch__item.is-current .styleswitch__dots {
  outline-color: rgba(0, 0, 0, 0.18);
}

.styleswitch__dots i {
  width: 9px;
  height: 16px;
  display: block;
}

/* The header sits below the switcher rather than at the top of the viewport. */
.styleswitch ~ .site-header {
  top: 46px;
}

/* ---- the index ---- */

.stylegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 38px);
}

.stylegrid__sub {
  margin-top: clamp(48px, 6vw, 80px);
  margin-bottom: 28px;
}

.stylecard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.stylecard:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.stylecard__shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}

/* The card's visual is drawn from the variant's own palette rather than
   photographed: the directions carry no photography. */
.stylecard__tile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--ease);
}

.stylecard__tile b {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-4);
  letter-spacing: 0.01em;
}

.stylecard:hover .stylecard__tile {
  transform: scale(1.04);
}

.stylecard__swatches {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.stylecard__swatches i {
  width: 30px;
  height: 22px;
  display: block;
}

.stylecard__body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.stylecard__meta {
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 8px;
}

.stylecard h2 {
  font-size: var(--step-2);
  margin-bottom: 10px;
}

.stylecard__type {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--muted);
}

.stylecard__type svg {
  width: 15px;
  height: 15px;
  color: var(--teal-deep);
}

.stylecard .link-arrow {
  margin-top: auto;
  padding-top: 18px;
}

@media (max-width: 980px) {
  .stylegrid {
    grid-template-columns: 1fr;
  }

  .styleswitch__nav {
    margin-left: 0;
    width: 100%;
  }

  .styleswitch ~ .site-header {
    top: 0;
    position: static;
  }
}

@media (max-width: 560px) {
  .styleswitch__desc {
    display: none;
  }

  /* The names stay.
   *
   * They used to be hidden here, leaving only the swatch dots, which worked
   * while every direction had its own palette. Now that all of them share the
   * huisstijl those dots are nearly identical, so a phone showed six
   * indistinguishable buttons and there was no way to tell which theme you
   * were picking. The row scrolls sideways instead. */
  .styleswitch__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

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

  .styleswitch__item {
    flex: 0 0 auto;
    padding: 6px 11px;
  }

  .styleswitch__item .styleswitch__name {
    font-size: 0.76rem;
  }

  .styleswitch__dots {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   30. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .sos-float,
  .consent,
  .mobile-nav,
  .drawer-backdrop {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .navy-panel,
  .card--navy,
  .pagehero,
  .cta-band,
  .incident-band,
  .person {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999;
  }

  .navy-panel h2,
  .pagehero h1,
  .on-navy h2 {
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  .section {
    padding-block: 20px;
    break-inside: avoid;
  }
}