/* ---- Typeface ----
   Plus Jakarta Sans, self-hosted as a single variable font (weight axis
   200-800, 27KB). Self-hosted rather than linked from Google Fonts because
   the Content-Security-Policy in .htaccess is `default-src 'self'` -- an
   external font host would be blocked, and self-hosting is faster anyway. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ----
   Structure matters here. Everything theme-INDEPENDENT (type, spacing,
   radius, easing, layout) is declared once on :root so it exists no matter
   which theme is active. Only colours and shadows are overridden per theme.
   Declaring a non-colour token inside a theme-specific selector is what
   leaves --font-sans and --space-* undefined on a default page load, which
   renders the whole site as unstyled serif text with no padding.

   The site is light for everyone. It deliberately does NOT follow the
   visitor's OS dark-mode setting: this is a light brand, and a visitor whose
   system is dark should still get the white/off-white design. A dark palette
   is kept below under [data-theme="dark"] but nothing on the site sets that
   attribute today. */
:root {
  /* --- Theme-independent --- */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Shape system, locked: inputs and small chips use sm, cards use md,
     large feature surfaces use lg, interactive buttons use pill. Nothing on
     the site invents a radius outside this scale. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --max-width: 1180px;
  --header-height: 72px;

  /* --- Light theme (default) --- */
  color-scheme: light;

  /* Palette sampled from the Pluto BV Ltd logo (images/plutologo.jpeg):
     #0078AC the sphere and wordmark, #D4E050 the lime dots, #77ABB6 the
     inner ellipse. Every value below was measured with the WCAG luminance
     formula before use - see the note on --color-highlight for the one
     brand colour that could not be used as-is. */
  --color-primary: #0078AC;
  /* A dark navy SURFACE (topbar, footer, CTA band), not text. Deepened from
     the brand blue rather than borrowed from elsewhere, so the dark bands
     still read as the same hue family. White on it: 11.58:1. */
  --color-primary-dark: #073D57;
  --color-primary-light: #E4F2F8;
  /* Slightly deeper than the logo blue so it stays legible as small text:
     5.85:1 on the page background, and 6.22:1 with white on top. The raw
     logo blue manages 4.61/4.90 - passing, but with almost no margin, and
     this token is used for body-sized links. */
  --color-accent: #00688F;
  --color-accent-dark: #005477;
  /* Text that sits ON an accent fill. White here (6.22:1). The dark theme
     flips it to near-black, because the accent there is the logo's lime,
     which manages only 1.44:1 against white but 10.70:1 against ink. */
  --color-on-accent: #FFFFFF;
  --color-bg: #F7F8FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F4F8;
  --color-text: #1E2530;
  --color-text-muted: #5B6472;
  --color-border: #E2E6EA;
  --color-heading: #00567C;
  /* Text/borders on the permanently-dark surfaces (topbar, footer, CTA
     band). Constant across themes, since those surfaces never invert. */
  --color-on-dark: #FFFFFF;

  /* The lime from the logo. It is a HIGHLIGHT, never body text: against the
     page background it measures 1.36:1, so anything set in it on a light
     surface would be effectively invisible. It is legible only where the
     logo itself uses it - as a small mark, or against something dark:
       on the dark navy bands  8.04:1
       on the dark-theme page  12.61:1
       dark text on a lime fill 10.70:1
     Those are the only three ways it appears on the site. */
  --color-highlight: #D4E050;
  --color-on-highlight: #1E2530;

  /* Shadows are tinted to the brand navy rather than pure black, and layered
     (a tight contact shadow plus a wider ambient one) so elevation reads as
     real depth instead of a grey smear. */
  --shadow-sm: 0 1px 2px rgba(13, 44, 74, 0.06),
               0 2px 6px rgba(13, 44, 74, 0.05);
  --shadow-md: 0 2px 4px rgba(13, 44, 74, 0.06),
               0 8px 24px rgba(13, 44, 74, 0.10);
  --shadow-lg: 0 4px 8px rgba(13, 44, 74, 0.07),
               0 18px 48px rgba(13, 44, 74, 0.14);
}

/* Dark theme, opt-in only.

   This was previously wired to @media (prefers-color-scheme: dark), which
   meant anyone whose operating system is set to dark saw the dark palette
   automatically. The brand is a light one - white and off-white with the
   logo blue - so the site now always renders light regardless of the OS
   setting, and the page background stays off-white for everyone.

   The palette below is kept and still applies if <html data-theme="dark">
   is ever set. To restore automatic dark mode, wrap this block in
   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ... } }
   again. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #5FC0E8;
  --color-primary-dark: #06263A;
  --color-primary-light: #10293A;
  /* On a dark page the logo's lime finally works as a text colour
     (12.61:1), so the dark theme leads with it the way the logo does:
     blue field, lime spark. */
  --color-accent: #D4E050;
  --color-accent-dark: #E2ED72;
  --color-on-accent: #0F1620;
  --color-bg: #0F1620;
  --color-surface: #161F2B;
  --color-surface-2: #1D2836;
  --color-text: #E8ECF1;
  --color-text-muted: #A8B4C4;
  --color-border: #26313F;
  --color-heading: #CFE6F4;
  --color-highlight: #D4E050;
  --color-on-highlight: #0F1620;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35),
               0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.38),
               0 8px 24px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.42),
               0 18px 48px rgba(0, 0, 0, 0.52);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
/* Every list on this site is styled chrome (nav, submenu, footer columns) or
   carries its own marker (.detail-list, .process-list). The narrower
   `ul[class]` form of this reset missed the unclassed nav and footer lists
   and left default bullets showing on them. */
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
/* The <picture> wrapper should not form a box of its own; the <img>
   inside it is what the layout rules target. */
picture { display: contents; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

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

/* ---- Base typography ---- */
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 16px;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.12;
  color: var(--color-heading);
  text-wrap: balance;
  /* Safety net: a long single word in a narrow column wraps rather than
     spilling out of its container. */
  overflow-wrap: break-word;
}

/* Display sizes carry tighter tracking; small headings stay at normal
   tracking, since negative tracking on small text hurts legibility. */
/* Capped at 3.1rem rather than pushed larger: the hero headline is eight
   words in a ~620px column, and a bigger display size wraps it to three
   lines. Scale is planned around the copy, not the other way round. */
h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.028em;
}

h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h4 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p { color: var(--color-text); text-wrap: pretty; }
.text-muted { color: var(--color-text-muted); }

/* Body copy is capped for readability. Applied to the lead paragraph in
   heroes and section heads rather than globally, so grid cells stay full. */
.lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--color-text-muted);
  max-width: 58ch;
}

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Layout utilities ---- */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-9);
}

.section--tight {
  padding-block: var(--space-8);
}

/* Alternate surface band. Replaces the inline
   style="background: var(--color-surface)" that several sections carried, so
   section backgrounds are theme-aware in dark mode instead of hardcoded. */
.section--surface {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

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

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  display: flex;
  align-items: center;
  min-height: 44px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: var(--space-3);
}

@media (max-width: 640px) {
  .section { padding-block: var(--space-8); }
  .section--tight { padding-block: var(--space-7); }
}