/* ============================================================
   SES Group design tokens · v1.0.0 · August 2026
   Owner: Sigurður Eggert Sveinsson · CVR 46651596
   Principle: teal carries meaning, never decoration.
   Usage: paste this :root block (and the dark block) into any
   artifact, then style everything with var(--token).
   ============================================================ */

:root {
  /* ---- Brand teal ---- */
  --teal-50:  #EEF8F9;
  --teal-100: #D6EFF2;
  --teal-300: #7FD3DB;
  --teal-400: #35B6C2;   /* dark-mode primary            */
  --teal-500: #0E9AA7;   /* BRAND: logo, charts, fills   */
  --teal-600: #0B7C89;   /* ACTION: buttons, links, focus */
  --teal-800: #064E58;

  /* ---- Cool neutrals ---- */
  --white:     #FFFFFF;
  --slate-50:  #F6F9FA;
  --slate-100: #EDF2F3;
  --slate-200: #DEE7E9;
  --slate-300: #C2CFD3;
  --slate-400: #93A6AC;
  --slate-500: #6B8189;
  --slate-600: #455B62;
  --slate-800: #12242A;
  --ink-900:   #0A1417;
  --ink-cover: #06181C;   /* cover / dark page background */

  /* ---- Semantic (light) ---- */
  --bg:            var(--slate-50);
  --surface:       var(--white);
  --surface-sunk:  var(--slate-100);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --text:          var(--ink-900);
  --text-dim:      var(--slate-600);
  /* slate-500 (#6B8189) is 3.87:1 on the page and fails WCAG AA for body
     text. #5E7279 is 4.6:1, the value the SES Quality app already ships. */
  --text-faint:    #5E7279;
  --primary:       var(--teal-600);
  --primary-fill:  var(--teal-50);
  --on-primary:    var(--white);

  /* ---- Status ---- */
  --success: #1F9D55;  --success-fill: #E6F5EC;  --success-text: #136B3A;
  --warning: #C2790B;  --warning-fill: #FAF0DD;  --warning-text: #8A560A;
  --danger:  #D0452B;  --danger-fill:  #FBEBE7;  --danger-text:  #93301D;
  --info:    #2F6FE4;  --info-fill:    #E8F0FD;  --info-text:    #1E4EA3;

  /* ---- Data series (assign in order, stop at four) ---- */
  --series-1: #0E9AA7;
  --series-2: #064E58;
  --series-3: #7FD3DB;
  --series-4: #2F6FE4;
  --series-5: #C2790B;
  --series-6: #93A6AC;

  /* ---- Typography ---- */
  --font:      'Geist', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --fs-display: 64px; --lh-display: 1.02; --ls-display: -0.035em;
  --fs-h1: 40px;      --lh-h1: 1.15;      --ls-h1: -0.03em;
  --fs-h2: 28px;      --lh-h2: 1.25;      --ls-h2: -0.025em;
  --fs-h3: 20px;      --lh-h3: 1.35;      --ls-h3: -0.015em;
  --fs-lead: 19px;    --lh-lead: 1.6;
  --fs-body: 16px;    --lh-body: 1.65;
  --fs-small: 14px;   --lh-small: 1.55;
  --fs-label: 11px;   --ls-label: 0.12em;  /* uppercase, mono */

  /* ---- Space (4px base) ---- */
  /* --sp-5 is written sixteen times in components.css as
     `var(--sp-5, 20px)`. A step the system uses that often is a step the
     system has; naming it here retires those fallbacks and stops the next
     rule that forgets one from losing its padding entirely, because an
     undefined custom property discards the whole declaration. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* ---- Radius ---- */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px;
  --radius-lg: 24px; --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(10,20,23,0.04), 0 4px 12px rgba(10,20,23,0.05);
  --shadow-md: 0 8px 24px rgba(10,20,23,0.10), 0 2px 6px rgba(10,20,23,0.06);
  --shadow-lg: 0 24px 56px rgba(10,20,23,0.16);
  --ring-focus: 0 0 0 3px rgba(14,154,167,0.22);
  --ring-primary: 0 0 0 1px #0E9AA7;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --page-margin: 80px;
  --gutter: 24px;
}

/* Dark mode: a remap, never a redesign. */
[data-theme="dark"], .theme-dark {
  --bg:            #06181C;
  --surface:       #0D1F24;
  --surface-sunk:  #13292F;
  --border:        #1E3A41;
  --border-strong: #2A4A52;
  --text:          #E6EFF1;
  --text-dim:      #9BB0B6;
  --text-faint:    #6B8189;
  --primary:       var(--teal-400);
  --primary-fill:  #13292F;
  --on-primary:    #06181C;

  --success-fill: #0E2A21; --warning-fill: #2A2011; --danger-fill: #2C1712; --info-fill: #0F1E33;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.6);
  --ring-focus: 0 0 0 3px rgba(53,182,194,0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06181C; --surface: #0D1F24; --surface-sunk: #13292F;
    --border: #1E3A41; --border-strong: #2A4A52;
    --text: #E6EFF1; --text-dim: #9BB0B6; --text-faint: #6B8189;
    --primary: #35B6C2; --primary-fill: #13292F; --on-primary: #06181C;
  }
}

/* ============================================================
   SES Group web · base layer
   Fonts, element defaults, the type scale and the page frame.
   Loads after tokens.css. Nothing here knows about a component.

   The scale is a major third (1.25) from a 17px body, which keeps
   the whole site to six sizes. Headings are Geist SemiBold with
   the negative tracking the identity guide asks for; everything
   else is Regular. Geist Mono is for figures only: prices, CVR,
   dates, the values in a title block. Never for labels.
   ============================================================ */

/* ---- Fonts: self-hosted, Latin and Latin Extended only ------------------
   Declared under the brand names the tokens ask for. Two files per family,
   split by unicode-range, so a Danish page loads one of each. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geistmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geistmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- The scale ---------------------------------------------------------- */

:root {
  --t-small: 15px;
  --t-body: 17px;
  --t-lead: 20px;
  --t-h3: 20px;
  --t-h2: clamp(26px, 2.2vw + 14px, 32px);
  --t-h1: clamp(30px, 3.6vw + 14px, 54px);

  --measure: 68ch;
  --frame: 1200px;
  --margin: clamp(20px, 5vw, 80px);
  --section: clamp(56px, 7vw, 104px);

  --rule: 1px solid var(--slate-200);
  --rule-strong: 1px solid var(--ink-900);
}

/* ---- Elements ----------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-900);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Danish builds long compounds ("produktionsvirksomheder") that do not fit
   a phone at heading size. Hyphenate where the browser knows the language,
   and break anywhere as the last resort rather than push the page sideways. */
h1, h2, h3, h4 {
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  color: var(--ink-900);
  hyphens: auto;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); line-height: 1.18; letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); line-height: 1.35; letter-spacing: -0.015em; }

p { text-wrap: pretty; }

a {
  color: var(--teal-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--ink-900); }

strong { font-weight: var(--fw-semibold); }

.num, time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

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

::selection { background: var(--teal-100); color: var(--ink-900); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Frame -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--frame) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}

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

.skip-link {
  position: absolute;
  left: var(--margin);
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--ink-900);
  color: var(--white);
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* ============================================================
   SES Group web · component layer
   Every visual pattern on both sites, once. Pages compose these
   classes and never carry a style attribute. Loads after base.css.

   The one device that belongs to this business and no other is the
   title block: the ruled box in the corner of an engineering drawing
   that states what the part is, who made it and which revision you
   are holding. It carries the product specifications, the facts of
   a case and the company's legal details in the footer. Everything
   around it stays quiet: white pages, one rule weight, no cards, no
   shadows, teal only on the thing you can press.
   ============================================================ */

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

.site-header { border-bottom: var(--rule); background: var(--white); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: 18px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink-900); }
.brand__mark { width: 26px; height: 26px; flex: none; }

.nav { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; }
.nav__link {
  color: var(--ink-900);
  text-decoration: none;
  font-size: var(--t-small);
  padding-block: 10px;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--teal-600); }
.nav__link[aria-current="page"] { border-bottom-color: var(--ink-900); }
.nav__lang { color: var(--slate-600); font-size: var(--t-small); text-decoration: none; padding-block: 10px; }
.nav__lang:hover { color: var(--ink-900); text-decoration: underline; }

/* Below the desktop width the links fold into a disclosure. It is a
   <details>, so it opens and closes with no script at all. */
.nav-mobile { display: none; margin-left: auto; }
.nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  border: var(--rule);
  font-size: var(--t-small);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile[open] > summary { border-color: var(--ink-900); }
.nav-mobile__panel {
  position: absolute;
  left: 0; right: 0;
  margin-top: 13px;
  background: var(--white);
  border-bottom: var(--rule);
  z-index: 5;
  padding: var(--sp-2) var(--margin) var(--sp-6);
}
.nav-mobile__panel a {
  display: block;
  padding: 14px 0;
  border-bottom: var(--rule);
  color: var(--ink-900);
  text-decoration: none;
}
.nav-mobile__panel a:last-child { border-bottom: 0; }
.site-header { position: relative; }

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-mobile { display: block; }
}

/* ---------- Actions ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius-xs);
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn--primary { background: var(--teal-600); color: var(--white); }
.btn--primary:hover { background: var(--teal-800); color: var(--white); }
.btn--secondary { border-color: var(--ink-900); color: var(--ink-900); background: var(--white); }
.btn--secondary:hover { background: var(--slate-50); color: var(--ink-900); }
.btn--small { min-height: 40px; padding: 8px 16px; font-size: var(--t-small); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }
.actions__link { font-size: 16px; }
.actions__note { flex-basis: 100%; font-size: var(--t-small); color: var(--slate-600); }

/* ---------- Page head (hero) --------------------------------------------- */

.hero { padding-block: clamp(48px, 7vw, 96px) clamp(48px, 6vw, 88px); }
.hero__grid {
  display: grid;
  gap: var(--sp-12) clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}
.hero__grid--single { grid-template-columns: minmax(0, 1fr); }
.hero__crumbs { margin-bottom: var(--sp-6); }
.hero__title { max-width: 18ch; }
.hero__grid--single .hero__title { max-width: 24ch; }
.hero__lead {
  margin-top: var(--sp-6);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--slate-600);
  max-width: 56ch;
}
.hero__actions { margin-top: var(--sp-8); }
.hero__aside { padding-top: 10px; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Breadcrumbs -------------------------------------------------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-small); color: var(--slate-600); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--slate-400); }
.crumbs a { color: var(--slate-600); }
.crumbs a:hover { color: var(--ink-900); }

/* ---------- The title block ---------------------------------------------- */
/* A ruled grid of labelled cells. The outer frame is ink, the inner rules
   are slate, as on a drawing sheet. A cell may span the full width. */

.tb {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--rule-strong);
  background: var(--white);
}
.tb--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb--one { grid-template-columns: minmax(0, 1fr); }
.tb__cell {
  padding: 12px 16px 14px;
  border-right: var(--rule);
  border-bottom: var(--rule);
  min-width: 0;
}
.tb__cell--wide { grid-column: 1 / -1; }
.tb__label { display: block; font-size: 13px; line-height: 1.4; color: var(--slate-600); }
.tb__value { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--ink-900); overflow-wrap: anywhere; }
.tb__value--num { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.tb__value a { color: var(--ink-900); }
.tb__caption { margin-top: var(--sp-2); font-size: 13px; color: var(--slate-600); }
.tb__heading { margin-bottom: var(--sp-2); font-size: 14px; font-weight: var(--fw-semibold); }

/* The outer frame draws the right and bottom edges; the cells that meet
   it drop theirs, so no edge is ever doubled. Cells are laid out by the
   template with a data attribute saying where they fall. */
.tb__cell[data-last-col] { border-right: 0; }
.tb__cell[data-last-row] { border-bottom: 0; }

@media (max-width: 560px) {
  .tb, .tb--three { grid-template-columns: minmax(0, 1fr); }
  .tb__cell { border-right: 0; }
  .tb__cell[data-last-row] { border-bottom: var(--rule); }
  .tb__cell:last-child { border-bottom: 0; }
}

/* ---------- Sections ------------------------------------------------------ */

.section { padding-block: var(--section); border-top: var(--rule); }
.section--sunk { background: var(--slate-50); }
/* A section that continues the page head directly, with no rule between. */
.section--flush { border-top: 0; padding-top: 0; }

/* Most sections set the heading in a narrow left column and the matter in
   a wide right one, the way a specification lists a clause number and its
   text. On a phone they stack. */
.section__grid {
  display: grid;
  gap: var(--sp-8) clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
}
.section__grid--wide { grid-template-columns: minmax(0, 1fr); }
.section__head h2 { max-width: 20ch; }
.section__grid--wide .section__head h2 { max-width: 30ch; }
.section__lead { margin-top: var(--sp-4); color: var(--slate-600); max-width: 52ch; }
.section__body { min-width: 0; }

@media (max-width: 900px) {
  .section__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Running text ------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h3 { margin-top: var(--sp-8); }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose ul li + li { margin-top: var(--sp-2); }
.prose ul li::marker { color: var(--slate-400); }
.prose .lead { font-size: var(--t-lead); line-height: 1.55; color: var(--slate-600); }

.sp-top { margin-top: var(--sp-6); }

/* ---------- Rows: a list of things, each with a heading ------------------ */

.rows { border-top: var(--rule-strong); }
.rows__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-2) var(--sp-8);
  padding-block: var(--sp-6);
  border-bottom: var(--rule);
}
.rows__title { font-size: var(--t-h3); }
.rows__meta { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--slate-600); font-weight: 400; letter-spacing: 0; }
.rows__body { color: var(--slate-600); }
.rows__body p + p { margin-top: var(--sp-3); }
.rows__link { display: inline-block; margin-top: var(--sp-3); }
@media (max-width: 700px) { .rows__item { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Steps: a sequence, so it is numbered ------------------------- */

.steps { counter-reset: step; border-top: var(--rule-strong); }
.steps__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: var(--rule);
}
.steps__item::before {
  content: counter(step);
  grid-row: span 3;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--slate-600);
  padding-top: 3px;
}
.steps__when { font-size: var(--t-small); color: var(--slate-600); }
.steps__title { font-size: 18px; letter-spacing: -0.01em; }
.steps__body { color: var(--slate-600); max-width: 60ch; }

/* ---------- Checks: short statements that are true of every job ----------- */

.checks { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.checks li { position: relative; padding-left: 28px; }
.checks li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.45em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  transform: rotate(-45deg);
}

/* ---------- Prices -------------------------------------------------------- */
/* A price list, not a row of cards: one line per offer, the figure right-
   aligned in mono so the eye can run down the column. */

.prices { border-top: var(--rule-strong); }
.prices__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: var(--sp-4) var(--sp-8);
  padding-block: var(--sp-6);
  border-bottom: var(--rule);
}
.prices__name { font-size: var(--t-h3); }
.prices__for { margin-top: 6px; color: var(--slate-600); }
.prices__includes { display: grid; gap: 6px; color: var(--slate-600); font-size: 16px; }
.prices__includes li { padding-left: 16px; position: relative; }
.prices__includes li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 7px; height: 1px; background: var(--slate-400); }
.prices__figure { text-align: right; }
.prices__amount { display: block; font-family: var(--font-mono); font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.prices__unit { display: block; margin-top: 2px; font-size: 14px; color: var(--slate-600); }
.prices__action { margin-top: var(--sp-4); }
.prices__note { margin-top: var(--sp-6); color: var(--slate-600); max-width: var(--measure); }
@media (max-width: 860px) {
  .prices__item { grid-template-columns: minmax(0, 1fr); }
  .prices__figure { text-align: left; }
}

/* ---------- Scope: what is in, what is out -------------------------------- */

.scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.scope__title { font-size: 18px; padding-bottom: var(--sp-3); border-bottom: var(--rule-strong); }
.scope__list { margin-top: var(--sp-3); }
.scope__list li { padding-block: 8px; border-bottom: var(--rule); color: var(--slate-600); }
@media (max-width: 700px) { .scope { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Questions ----------------------------------------------------- */

.faq { border-top: var(--rule-strong); }
.faq__item { border-bottom: var(--rule); }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-size: 18px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  margin-top: 7px;
  border-right: 1.5px solid var(--ink-900);
  border-bottom: 1.5px solid var(--ink-900);
  transform: rotate(45deg);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: 12px; }
.faq__a { padding-bottom: var(--sp-6); color: var(--slate-600); max-width: var(--measure); }
.faq__a p + p { margin-top: var(--sp-3); }

/* ---------- Register: an index of products or projects ------------------- */

.register { border-top: var(--rule-strong); }
.register__item {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr);
  gap: var(--sp-2) var(--sp-8);
  padding-block: var(--sp-6);
  border-bottom: var(--rule);
  align-items: baseline;
}
.register__name { font-size: var(--t-h3); }
.register__name a { color: var(--ink-900); text-decoration: none; }
.register__name a:hover { text-decoration: underline; }
.register__body { color: var(--slate-600); }
.register__status { justify-self: end; text-align: right; font-size: var(--t-small); color: var(--slate-600); }
.register__status strong { display: block; color: var(--ink-900); font-weight: var(--fw-medium); }
@media (max-width: 760px) {
  .register__item { grid-template-columns: minmax(0, 1fr); }
  .register__status { justify-self: start; text-align: left; }
}

/* ---------- Figures -------------------------------------------------------- */

.figure { margin-top: var(--sp-8); }
.figure__frame { border: var(--rule-strong); background: var(--white); overflow: hidden; }
.figure__frame img { width: 100%; }
.figure__caption { margin-top: var(--sp-2); font-size: 14px; color: var(--slate-600); }

/* ---------- A note that qualifies what is around it ----------------------- */

.note {
  margin-top: var(--sp-8);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--ink-900);
  background: var(--slate-50);
  color: var(--slate-600);
  max-width: var(--measure);
}

/* ---------- The closing band ---------------------------------------------- */

.closing { padding-block: var(--section); border-top: var(--rule-strong); background: var(--slate-50); }
.closing__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-8) clamp(32px, 5vw, 72px);
  align-items: end;
}
.closing__body { margin-top: var(--sp-4); color: var(--slate-600); max-width: 52ch; }
.closing__actions { justify-self: end; }
@media (max-width: 900px) {
  .closing__grid { grid-template-columns: minmax(0, 1fr); }
  .closing__actions { justify-self: start; }
}

/* ---------- Contact --------------------------------------------------------- */

.contact-main { font-size: clamp(22px, 2vw + 12px, 30px); letter-spacing: -0.02em; font-weight: var(--fw-medium); }
.contact-main a { color: var(--ink-900); }

/* ---------- Legal text ------------------------------------------------------ */

.legal { counter-reset: clause; max-width: var(--measure); }
.legal__section { counter-increment: clause; padding-block: var(--sp-6); border-top: var(--rule); }
.legal__section:first-child { border-top: var(--rule-strong); }
.legal__title { font-size: 19px; display: flex; gap: var(--sp-3); }
.legal__title::before { content: counter(clause) '.'; font-family: var(--font-mono); font-weight: 400; font-size: 16px; color: var(--slate-600); padding-top: 2px; min-width: 2ch; }
.legal__body { margin-top: var(--sp-3); color: var(--slate-600); }
.legal__body > * + * { margin-top: var(--sp-3); }
.legal__body ul { padding-left: 1.2em; list-style: disc; }
.legal__body li + li { margin-top: 6px; }
.legal__meta { margin-bottom: var(--sp-8); color: var(--slate-600); font-size: var(--t-small); }

/* ---------- Case pages ------------------------------------------------------- */

.case__facts { margin-top: var(--sp-8); }
.case__section + .case__section { margin-top: var(--sp-12); }
.case__section h2 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  border-top: var(--rule-strong);
  padding-top: var(--sp-6);
}
.pager a { display: block; text-decoration: none; color: var(--ink-900); }
.pager span { display: block; font-size: var(--t-small); color: var(--slate-600); }
.pager strong { font-size: 18px; }
.pager a:hover strong { text-decoration: underline; }
.pager__next { text-align: right; }

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

.site-footer { border-top: var(--rule-strong); padding-block: var(--sp-12) var(--sp-8); font-size: var(--t-small); }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--sp-8) clamp(32px, 5vw, 72px);
  align-items: start;
}
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-6); }
.site-footer__heading { font-size: var(--t-small); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.site-footer__cols li { padding-block: 5px; }
.site-footer__cols a { color: var(--slate-600); text-decoration: none; }
.site-footer__cols a:hover { color: var(--ink-900); text-decoration: underline; }
.site-footer__base { margin-top: var(--sp-8); color: var(--slate-600); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); justify-content: space-between; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Not found -------------------------------------------------------- */

.notfound { padding-block: clamp(64px, 10vw, 140px); }
.notfound p { margin-top: var(--sp-4); color: var(--slate-600); max-width: 52ch; }
.notfound .actions { margin-top: var(--sp-8); }

/* ============================================================================
   The example dashboard (SES Insight)
   Its own vocabulary, because it is the one page that is the product rather
   than a description of it.
   ============================================================================ */

.title-3 { font-size: var(--t-h3); line-height: 1.35; letter-spacing: -0.015em; font-weight: var(--fw-semibold); }

.dash { display: flex; flex-direction: column; gap: var(--sp-6); }
.dash__bar { display: flex; justify-content: flex-end; }
/* Hidden until the script confirms it can do something. With no JavaScript
   the page still shows the full year, which is the view that matters. */
.dash__slicer { display: none; gap: 4px; padding: 4px; border: var(--rule); }
.dash__slicer.is-ready { display: inline-flex; }
.dash__slice {
  border: 0;
  background: transparent;
  padding: 8px var(--sp-4);
  min-height: 36px;
  font: inherit;
  font-size: 14px;
  color: var(--slate-600);
  cursor: pointer;
}
.dash__slice:hover { color: var(--ink-900); }
.dash__slice[aria-pressed="true"] { background: var(--ink-900); color: var(--white); }

.dash__kpis { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border: var(--rule-strong); }
.dash__kpi { padding: var(--sp-5) var(--sp-6); border-right: var(--rule); }
.dash__kpi:last-child { border-right: 0; }
.dash__kpi-label { font-size: 13px; color: var(--slate-600); }
.dash__kpi-value {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dash__kpi-note { margin-top: var(--sp-2); font-size: 13px; color: var(--slate-600); font-variant-numeric: tabular-nums; }
.dash__kpi-note--up { color: var(--success-text); }
.dash__kpi-note--down { color: var(--warning-text); }

.dash__row { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.dash__panel { border: var(--rule); padding: var(--sp-6); min-width: 0; background: var(--white); }
.dash__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.dash__panel-title { font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -0.02em; }
.dash__panel-note { margin-top: var(--sp-4); font-size: 14px; line-height: 1.6; color: var(--slate-600); max-width: 78ch; }

/* A chart keeps its own scroll box: squeezing a twelve-month chart onto a
   phone keeps the shape and loses the labels. */
.chartwrap { overflow-x: auto; overscroll-behavior-x: contain; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart--wide { min-width: 620px; }
.chart--small { max-width: 420px; margin-inline: auto; }
.chart__bar { fill: var(--teal-500); transition: opacity .15s ease; }
.chart__bar--flag { fill: var(--warning); }
.chart__bar.is-dim { opacity: 0.25; }
.chart__tick { fill: var(--slate-600); font-family: var(--font-mono); font-size: 10.5px; }
.chart__tick--alt { fill: var(--slate-600); }
.chart__value { fill: var(--slate-600); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; }
.chart__value--flag, .chart__value--warn { fill: var(--warning-text); }
.chart__rowlabel { fill: var(--ink-900); font-size: 13.5px; }

.dash__findings { border-top: var(--rule-strong); padding-top: var(--sp-8); margin-top: var(--sp-4); }
.dash__findings-title { margin-bottom: var(--sp-6); }
.dash__finding-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dash__finding { border-left: 2px solid var(--ink-900); padding-left: var(--sp-5); }
.dash__finding-value { font-family: var(--font-mono); font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dash__finding-title { margin-top: 2px; font-size: 14px; color: var(--slate-600); }
.dash__finding-body { margin-top: var(--sp-3); font-size: 16px; line-height: 1.6; color: var(--slate-600); }