/* =============================================================
   10Media — Global stylesheet
   1. Design tokens
   2. Reset
   3. Base typography (elements)
   4. Components
   5. Sections
   6. Motion
   7. Card colour system + open state
   8. Navigation
   9. Footer
   10. Om os
   11. Case
   12. Cases index
   13. Kontakt
   14. Ydelser
   15. Blog index
   16. Blog post
   17. Blog: emnekategorier + artikel-elementer
   ============================================================= */

/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */
:root {
  /* --- Colour ------------------------------------------------
     Names describe the ROLE, not the hue, so a rebrand is a
     one-line change here instead of a find/replace everywhere. */
  /* Brand palette: each dusty base has a neon partner that doubles
     as its hover. */
  --color-orange: #c75337;         /* dusty / dark orange (primary) */
  --color-orange-hover: #ff6016;
  --color-orange-neon: #ff6016;
  --color-yellow: #ffc363;         /* dusty yellow                  */
  --color-yellow-hover: #ffdb4b;
  --color-yellow-neon: #ffdb4b;
  --color-red: #8b3022;            /* dusty / darker red            */
  --color-red-hover: #bf1d17;
  --color-red-neon: #bf1d17;
  --color-red-light: #d0504a;      /* the menu's exit button, hover */
  --color-blue: #2e6471;           /* darker blue                   */
  --color-blue-hover: #23b5cf;
  --color-blue-neon: #23b5cf;
  --color-green: #3f6b47;          /* dusty / darker green (sent)   */
  --color-green-soft: #eaf2e3;     /* the sent state's card wash    */

  --color-accent: var(--color-orange);              /* hero, tags      */
  --color-accent-strong: var(--color-orange-hover); /* primary hover   */
  --color-action: var(--color-orange-neon);         /* call to action  */
  --color-action-strong: #e85714;  /* the button's shaded lower lip */
  --color-ink: #121212;            /* primary text                  */
  --color-ink-muted: #646464;      /* secondary text                */
  --color-on-action: #ffffff;
  --color-ink-subtle: #606366;     /* metric source line             */
  --color-surface-raised: #ffffff; /* light button                   */
  --color-surface: #f4efe8;        /* page background (cream)       */
  --color-grid: #e2ddd7;           /* background grid rule          */
  --color-grid-cross: #d1cec9;     /* faint + at each intersection  */
  --color-step: #e1790a;           /* process rail + ring           */
  --color-track: #e7e8e8;          /* rail before it is filled      */
  --color-border: rgb(18 18 18 / 0.12);

  /* --- Font families -----------------------------------------
     Every stack ends in a system fallback so the page stays
     readable while webfonts load, or if they fail. */
  --font-heading: "Satoshi", "DM Sans", system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-wordmark: "Instrument Serif", "Times New Roman", Times, serif;
  --font-numeral: "Onest", "DM Sans", system-ui, sans-serif;
  --font-hand: "Patrick Hand", "Comic Sans MS", cursive;

  /* --- Fluid type scale --------------------------------------
     clamp(min, preferred, max) replaces the export's three sets
     of hard-coded per-breakpoint sizes. Each ramp interpolates
     linearly between a 390px phone and a 1300px desktop — the
     two widths the original design was actually drawn at.
     Comment shows: <phone size> → <desktop size> */
  --text-hero:     clamp(2.375rem, 0.982rem + 5.714vw, 5.625rem);   /* 38 → 90px */
  --text-wordmark: clamp(2.4375rem, 1.339rem + 4.505vw, 5rem);      /* 39 → 80px */
  --text-h2:       clamp(1.5625rem, 1rem + 2.308vw, 2.875rem);      /* 25 → 46px */
  --text-h3:       clamp(1.375rem, 1.214rem + 0.659vw, 1.75rem);    /* 22 → 28px */
  --text-h4:       clamp(1.25rem, 1.143rem + 0.440vw, 1.5rem);      /* 20 → 24px */
  --text-h5:       clamp(1.125rem, 1.071rem + 0.220vw, 1.25rem);    /* 18 → 20px */
  --text-h6:       clamp(1rem, 0.946rem + 0.220vw, 1.125rem);       /* 16 → 18px */
  --text-lead:     clamp(1.125rem, 0.964rem + 0.659vw, 1.5rem);     /* 18 → 24px */
  --text-body:     clamp(1rem, 0.973rem + 0.110vw, 1.0625rem);      /* 16 → 17px */
  --text-note:     clamp(0.9375rem, 0.830rem + 0.440vw, 1.1875rem); /* 15 → 19px */
  --text-metric:   clamp(1.75rem, 0.759rem + 4.066vw, 4.0625rem);   /* 28 → 65px */
  --text-metric-label: clamp(1.1875rem, 1.056rem + 0.538vw, 1.5rem);/* 19 → 24px */
  --text-byline:   clamp(1rem, 0.893rem + 0.440vw, 1.25rem);        /* 16 → 20px */
  --text-footer-lead: clamp(1.5rem, 1.121rem + 1.549vw, 2.5rem);    /* 24 → 40px */
  --text-display-md: clamp(1.75rem, 1.253rem + 2.033vw, 2.875rem); /* 28 -> 46px */
  --text-row-title:  clamp(1.25rem, 1.113rem + 0.560vw, 1.5625rem); /* 20 -> 25px */
  --text-faq-title:  clamp(1.125rem, 1.041rem + 0.344vw, 1.375rem);  /* 18 -> 22px */
  --text-card-title: clamp(1.25rem, 1.113rem + 0.560vw, 1.5625rem); /* 20 -> 25px */
  --text-step-title: clamp(1.5rem, 1.253rem + 1.011vw, 2.0625rem);  /* 24 -> 33px */
  --text-ui:       0.9rem;                                          /*     14.4px */
  --text-om-title: clamp(2rem, 1.484rem + 2.110vw, 3rem);          /* 32 -> 48px */
  --text-om-label: clamp(1.5rem, 1.319rem + 0.742vw, 1.875rem);    /* 24 -> 30px */
  --text-om-body:  clamp(1.0625rem, 1.004rem + 0.242vw, 1.25rem);  /* 17 -> 20px */
  --text-om-sub:   clamp(1.375rem, 1.203rem + 0.703vw, 1.625rem);  /* 22 -> 26px */
  --text-om-intro: clamp(1.0625rem, 1.004rem + 0.242vw, 1.25rem);  /* 17 -> 20px */
  --text-om-lead:  clamp(1rem, 0.945rem + 0.220vw, 1.125rem);      /* 16 -> 18px */
  --text-om-cases: clamp(2rem, 1.385rem + 2.527vw, 3.125rem);      /* 32 -> 50px */
  --text-caption:  0.875rem;                                        /*       14px */
  /* Case page */
  --text-case-title:  clamp(1.75rem, 1.101rem + 2.66vw, 2.9375rem);   /* 28 -> 47px */
  --text-case-h1:     clamp(2.25rem, 1.601rem + 2.66vw, 3.75rem);     /* 36 -> 60px */
  --text-case-lead:   clamp(1.125rem, 0.946rem + 0.73vw, 1.625rem);   /* 18 -> 26px */
  --text-case-metric: clamp(2.5rem, 1.799rem + 2.88vw, 4.0625rem);    /* 40 -> 65px */
  --text-case-fact:   clamp(0.9375rem, 0.882rem + 0.23vw, 1.0625rem); /* 15 -> 17px */
  --text-case-block:  clamp(1.375rem, 1.095rem + 1.15vw, 2rem);       /* 22 -> 32px */
  --text-case-name:   clamp(1.375rem, 1.161rem + 0.879vw, 1.875rem);  /* 22 -> 30px */
  --text-cases-title: clamp(2.5rem, 1.429rem + 4.396vw, 5rem);        /* 40 -> 80px */
  /* Kontakt page */
  --text-kontakt-title: clamp(2.75rem, 2.027rem + 2.967vw, 4.4375rem);/* 44 -> 71px */
  --text-kontakt-lead:  clamp(1.0625rem, 0.982rem + 0.330vw, 1.25rem);/* 17 -> 20px */
  --text-field:         1rem;                                         /*       16px */

  /* --- Line height ------------------------------------------- */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* --- Letter spacing ----------------------------------------
     Large type needs negative tracking, small type does not.
     The export applied -0.04em by hand on every node; here it
     is one token. */
  --tracking-display: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.05em;
  --tracking-normal: 0;
  --tracking-wide: 0.014em;

  /* --- Weight ------------------------------------------------ */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Spacing ----------------------------------------------- */
  --space-3xs: 0.375rem;  /*  6px */
  --space-2xs: 0.75rem;   /* 12px */
  --space-xs: 1rem;       /* 16px */
  --space-sm: 1.5rem;     /* 24px */
  --space-md: 2rem;       /* 32px */
  --space-lg: 3rem;       /* 48px */
  --space-xl: 4rem;       /* 64px */

  --measure: 34ch;
  /* Hairline shared by the process rail and the section-head rules. */
  --line-weight: 0.225rem;   /* 3.6px */
  --radius-md: 0.75rem;      /* 12px */
  --radius-button: 0.875rem; /* 14px */
  --radius-pill: 999px;

  /* --- Background grid ---------------------------------------
     60px cells, lines on the 30px mark, as in the design. The
     spotlight (see "Background grid" below and motion.js) reads
     these, so every page's grid and its crosses stay aligned. */
  --grid-size: 60px;
  --grid-offset: 30px;

  --container-max: 100vw;                                   /* full viewport width */
  --container-gutter: clamp(1rem, -0.714rem + 7.033vw, 5rem); /* 16 → 80px */
}

/* =============================================================
   2. RESET
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
ul, ol, dl, dd {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* The entrance slides content in from the right; clip stops that
     briefly producing a horizontal scrollbar. clip rather than
     hidden, so position:sticky keeps working. */
  overflow-x: clip;
}

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

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

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

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

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

/* =============================================================
   3. BASE TYPOGRAPHY
   Elements carry the defaults, so most markup needs no classes.
   ============================================================= */

/* Every face is served from the site itself: no third-party font CSS
   in the critical path and no extra origins to connect to. Only the
   faces a page actually uses are ever downloaded. */
@font-face {
  font-family: "DM Sans";
  src: url("documentation/fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("documentation/fonts/dm-sans-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("documentation/fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("documentation/fonts/satoshi-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("documentation/fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("documentation/fonts/onest-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* The team cards are set in a handwritten face. */
@font-face {
  font-family: "Patrick Hand";
  src: url("documentation/PatrickHand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  overflow-x: clip;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Cream ground with a 60px rule grid and a faint + on every
     intersection. Each layer is one 60px tile, so the rhythm never
     breaks at the edge of the page. The + tile is drawn centred, so
     it sits half a cell back. Its colour mirrors --color-grid-cross
     (a data URI cannot read custom properties). */
  background-color: var(--color-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath fill='%23d1cec9' d='M26.5 29.875h8v1.25h-8zM29.875 26.5h1.25v8h-1.25z'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to right, var(--color-grid) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, var(--color-grid) 0 1px, transparent 1px var(--grid-size));
  background-size: var(--grid-size) var(--grid-size);
  background-position:
    calc(var(--grid-offset) - var(--grid-size) / 2) calc(var(--grid-offset) - var(--grid-size) / 2),
    var(--grid-offset) var(--grid-offset),
    var(--grid-offset) var(--grid-offset);
}

/* =============================================================
   BACKGROUND GRID: cursor spotlight
   Darker + marks light up around the pointer. Built by motion.js as
   two elements, and every frame only changes their transforms, so
   the compositor moves them without repainting anything:
   - .grid-spot follows the pointer. Its radial mask is static:
     full ink inside the core, fading to nothing at the radius.
   - .grid-spot__ink is a flat colour masked by a static + tile,
     counter-shifted so the marks stay locked to the page grid,
     scroll included.
   It sits under all content and never takes pointer events.
   ============================================================= */
:root {
  --grid-spot-ink: #787877;
  --grid-spot-core: 45px;     /* full strength within this distance */
  --grid-spot-radius: 256px;  /* gone by this distance */
  --grid-spot-fade: 320ms;
}

.grid-spot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: calc(var(--grid-spot-radius) * 2);
  height: calc(var(--grid-spot-radius) * 2);
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100vw, -100vh, 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 var(--grid-spot-core), transparent 100%);
  mask-image: radial-gradient(closest-side, #000 var(--grid-spot-core), transparent 100%);
  transition: opacity var(--grid-spot-fade) ease;
}

/* Only while the pointer is on the page: no permanent layers. */
.grid-spot.is-visible {
  opacity: 1;
  will-change: transform, opacity;
}

.grid-spot__ink {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + var(--grid-size));
  height: calc(100% + var(--grid-size));
  background-color: var(--grid-spot-ink);
  /* 8px + with a 1.5px stroke, centred on the 1px rule. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M26.5 29.75h8v1.5h-8zM29.75 26.5h1.5v8h-1.5z'/%3E%3C/svg%3E") 0 0 / var(--grid-size) var(--grid-size) repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M26.5 29.75h8v1.5h-8zM29.75 26.5h1.5v8h-1.5z'/%3E%3C/svg%3E") 0 0 / var(--grid-size) var(--grid-size) repeat;
  transform: translate3d(0, 0, 0);
}

.grid-spot.is-visible .grid-spot__ink {
  will-change: transform;
}

/* --- Headings ------------------------------------------------
   h1 is display type: Satoshi bold, terracotta, tight.
   h2/h3 are section headings, h4-h6 step down into UI type. */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance; /* avoids an orphaned last word */
}

h1 {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
}

h2 {
  font-family: var(--font-body);
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-accent);
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

h5 {
  font-family: var(--font-body);
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

h6 {
  font-family: var(--font-body);
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-ink);
}

p {
  color: var(--color-ink);
  text-wrap: pretty;
  max-width: var(--measure);
}

/* =============================================================
   4. COMPONENTS
   ============================================================= */

/* --- Container ----------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* --- Line-broken text ----------------------------------------
   The design sets its own line breaks. Rather than hard-coding
   <br>, each line is a span that is a block on wide screens and
   collapses back to inline text when there is no room for it. */
.lines > span {
  display: block;
}

@media (max-width: 47.5rem) {
  .lines > span {
    display: inline;
  }
}

/* --- Wordmark ------------------------------------------------ */
.wordmark {
  font-family: var(--font-wordmark);
  font-size: var(--text-wordmark);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  max-width: none;
  white-space: nowrap;
}

/* --- Button --------------------------------------------------
   A solid slab with a shaded lower lip: the lip is an inset
   shadow, so there is only one box and the radius stays true. */
.button {
  --button-lip: 0.6rem; /* 9.6px */

  display: inline-flex;
  flex: none;                /* never let a flex row squash the slab */
  align-items: center;
  justify-content: center;
  min-height: clamp(2.5625rem, 2.321rem + 0.989vw, 3.125rem); /* 41 -> 50px */
  padding-inline: 1rem;      /* 16px */
  border: 0;
  border-radius: var(--radius-button);
  background-color: var(--color-action);
  /* The lit face is inset from the bottom-right, so the darker body
     of the slab shows along both of those edges. */
  box-shadow:
    inset calc(-1 * var(--button-lip)) calc(-1 * var(--button-lip)) 0 rgb(0 0 0 / 0.09),
    0 0.125rem 0.625rem rgb(0 0 0 / 0.3);
  color: var(--color-on-action);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.button:hover {
  background-color: var(--color-action-strong);
}

/* Short labels still get a slab wide enough to read as a button. */
@media (min-width: 60rem) {
  .button {
    min-width: 7.5rem; /* 120px */
  }
}

/* Same slab, light face -- used for secondary calls to action. */
.button--light {
  background-color: var(--color-surface-raised);
  color: var(--color-ink);
}

.button--light:hover {
  background-color: #f2f2f2;
}

/* Pressing shrinks the lip, so the slab looks pushed down. */
.button:active {
  --button-lip: 0.25rem;
  transform: translateY(0.1875rem);
  box-shadow:
    inset calc(-1 * var(--button-lip)) calc(-1 * var(--button-lip)) 0 rgb(0 0 0 / 0.09),
    0 0.0625rem 0.25rem rgb(0 0 0 / 0.26);
}

/* --- Tag ----------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 2rem; /* 32px */
  padding-inline: 0.75rem;
  /* Hairline drawn inside the box so it does not widen the pill --
     a real border would add 2px to a content-sized inline-flex box. */
  box-shadow: inset 0 0 0 1px var(--color-accent);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-accent);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* Solid variant: the case hero labels the work with filled pills
   instead of the outlined ones used on the home page. */
.tag--solid {
  min-height: 1.625rem; /* 26px */
  padding-inline: 0.75rem;
  box-shadow: none;
  background-color: var(--tag-bg);
  color: var(--tag-ink);
  font-size: 0.8125rem;  /* 13px */
  line-height: 1.385;    /* 18px */
  letter-spacing: 0.1px;
}

.tag--amber { --tag-bg: var(--color-yellow); --tag-ink: #4a3510; }
.tag--teal  { --tag-bg: var(--color-blue); --tag-ink: rgb(255 255 255 / 0.85); }
.tag--terracotta { --tag-bg: var(--color-accent); --tag-ink: #fff; }
.tag--rust  { --tag-bg: var(--color-red); --tag-ink: rgb(244 239 232 / 0.85); }
.tag--ink   { --tag-bg: var(--color-ink); --tag-ink: rgb(244 239 232 / 0.9); }

/* =============================================================
   5. SECTIONS
   ============================================================= */

/* --- Hero ---------------------------------------------------- */
.hero {
  /* clears the sticky bar, which sits outside the flow */
  padding-block: calc(var(--nav-height) + var(--nav-top) + var(--space-sm)) 0;
}

.hero__brand {
  /* Optical trim: the serif wordmark's line box sits a touch
     lower than its ink, so pull the headline back up. */
  margin-bottom: 0.05rem;
}

.hero__lead {
  margin-top: 1.0625rem;
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  font-style: italic;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  max-width: none;
}

/* Button and its reassurance copy share one row, aligned on their
   tops, and stack once there is no room. */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.875rem;
  margin-top: clamp(2rem, 0.854rem + 4.703vw, 4.675rem); /* 32 -> 74.8px */
}

.hero__note {
  font-size: var(--text-note);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  max-width: none;
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

/* The hero's tags take the raised white as a fill so the pills read
   as solid against the cream ground; the hairline stays for shape. */
.hero__tags .tag {
  background-color: var(--color-surface);
}

/* The first line of the headline is set in italic. */
.hero__title em {
  font-style: italic;
}

/* --- Section head --------------------------------------------
   Title, dot, then a rule that eats the rest of the row. Reused
   by every section that opens this way; the rule is drawn at the
   shared hairline weight, rounded. */
.section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-head__title {
  /* The design strokes the heading half a pixel to thicken it
     slightly without jumping to the next weight. */
  -webkit-text-stroke: 0.5px var(--color-accent);
}

.section-head__dot {
  font-size: calc(var(--text-h4) * 0.5);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}

.section-head__rule {
  flex: 1;
  height: var(--line-weight);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

/* --- Results -------------------------------------------------- */
.results {
  padding-block: 1.625rem 5.5rem;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 64rem; /* 1024px -- sets the 341px column pitch */
  margin-top: 6.25rem;
  padding: 0;
  list-style: none;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.metric__value {
  font-size: var(--text-metric);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-snug);
  color: var(--color-accent);
  /* Tabular figures keep the numbers from jittering if they ever
     animate up from zero. */
  font-feature-settings: "tnum" 1;
  max-width: none;
}

.metric__label {
  font-size: var(--text-metric-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
  max-width: none;
}

.metric__source {
  font-size: var(--text-metric-label);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink-subtle);
  max-width: none;
}

/* Button and byline stay on one row at every width -- the byline
   shrinks and rewraps rather than dropping below the button. */
.results__cta {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 1.018rem + 1.978vw, 2.625rem); /* 24 -> 42px */
  margin-top: 2.5rem;
}

.results__byline {
  font-size: var(--text-byline);
  font-weight: 300;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  max-width: none;
  min-width: 0; /* lets the byline shrink instead of forcing a wrap */
}

/* Three metrics side by side need room; below that they stack. */
@media (max-width: 60rem) {
  .metrics {
    grid-template-columns: 1fr;
    gap: 1.375rem;
    margin-top: 0;
  }

  /* On a phone the row is tight, so buttons shrink-wrap their
     labels instead of holding the wider desktop minimum. */
  .button {
    min-width: 5rem;
  }
}

/* --- Problem / Services / Process / Cases / Team / FAQ -------
   Everything below shares three building blocks: the section
   head above, the .split two-column shell, and the .row
   disclosure used by both the reasons list and the FAQ. */

/* The Ydelser page's process and signals sections sit inset from
   the page container. */
.container--inset {
  max-width: calc(var(--container-max) - 12.8125rem); /* -205px */
}

/* The process columns on the home page take the same measure as the
   service cards and the calculator panel; the :not() excludes the
   Ydelser page's inset process section. The reasons list in the
   problem section runs the full container instead, so it lines up
   with the "Problemet" rule above it. */
.process:not(.container--inset) .split {
  max-width: 66.875rem; /* 1070px */
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.125rem; /* 66px */
  align-items: start;
  margin-top: 1rem;
}

/* The FAQ leads with a narrow intro and a wide answer column. */
.split--narrow {
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
}

/* Small print under the Ydelser steps chart: under the steps column
   on desktop, below the whole list once the split stacks. */
.steps-note {
  margin-top: 0;
  font-size: var(--text-note);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink-muted);
  max-width: none;
}

@media (min-width: 60.0625rem) {
  .process .split {
    row-gap: 0;
  }

  .steps-note {
    grid-column: 2;
    margin-top: 1.5rem;
  }
}

.split__intro > * + * {
  margin-top: 1.5rem;
}

/* Desktop: the intro column stays in view under the header while the
   list beside it is read. As a grid item it is bounded by the grid,
   so it lets go at the foot of the section rather than following on
   into the next one. */
@media (min-width: 60.0625rem) {
  .problem .split__intro,
  .process .split__intro,
  .faq .split__intro {
    position: sticky;
    top: calc(var(--nav-top) + var(--nav-height) + 1.5rem);
  }
}

.heading-lg {
  font-family: var(--font-heading);
  font-size: var(--text-display-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.heading-lg--center {
  text-align: center;
}

.prose {
  font-size: var(--text-byline);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  max-width: 65ch;
}

.prose--center {
  text-align: center;
  margin-inline: auto;
  max-width: 50ch;
}

.prose--muted {
  color: var(--color-ink-subtle);
  font-weight: var(--weight-regular);
}

.prose--sm {
  font-size: var(--text-note);
  max-width: 30ch;
}

/* Outline pill used as a small section label. */
.pill {
  display: inline-block;
  padding: 0.3125rem 0.875rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-accent);
  background-color: var(--color-surface);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-accent);
  max-width: none;
}

/* --- Disclosure row ------------------------------------------
   <details>/<summary> gives a working accordion with no script
   and correct keyboard and screen-reader behaviour. */
.reasons,
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap, 0.5625rem);
  padding: 0;
  list-style: none;
}

.row {
  border-radius: 1.25rem; /* 20px */
  background-color: var(--row-bg);
  color: var(--row-ink);
}

.row summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--row-height, 5.4375rem); /* 87px */
  padding-inline: 2.25rem;
  cursor: pointer;
  list-style: none;
}

/* Hide the native disclosure triangle in every engine. */
.row summary::-webkit-details-marker {
  display: none;
}

.row summary::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  background:
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
  opacity: 0.65;
  transition: transform 180ms ease;
}

.row[open] summary::after {
  transform: rotate(45deg);
}

.row__num {
  font-family: var(--font-numeral);
  font-size: var(--text-row-title);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: -0.07em;
  color: var(--row-muted);
}

.row__title {
  font-family: var(--font-heading);
  font-size: var(--text-row-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--row-ink);
}

.row__body {
  margin: 0 2.25rem 1.75rem;
  font-size: 1rem;
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: -0.03em;
  color: var(--row-ink);
  max-width: 60ch;
}


/* Three short cause tags under each open reason. */
.row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1rem;
  margin: -0.5rem 2.25rem 1.75rem;
  padding: 0;
  list-style: none;
}

.tag--chip {
  min-height: 2.25rem; /* 36px */
  padding-inline: 1.125rem;
  box-shadow: none;
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

/* FAQ questions run a step smaller than the reason rows. */
.row--faq .row__title {
  font-size: var(--text-faq-title);
  letter-spacing: var(--tracking-tight);
  line-height: 1.4;
}

/* =============================================================
   Services cards
   ============================================================= */
.cards {
  gap: 1.3125rem; /* 21px */
  max-width: 66.875rem; /* 1070px */
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

/* Small pointer under the services cards, leading to the Ydelser page. */
.services__more {
  margin-top: 1.75rem;
  font-size: var(--text-note);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  max-width: none;
}

.services__more a {
  color: var(--color-accent);
}

.services__more a:hover {
  text-decoration: underline;
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 16.25rem; /* 260px */
  padding: 1.875rem;
  border-radius: 1.5rem;
}

/* Side by side, a card holds one fixed height whether open or shut.
   Without this the long copy reflows taller while the card is still
   mid-widen, so the row grows and then snaps back. */
@media (min-width: 60.0625rem) {
  .card {
    height: 16.25rem;
  }
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  background-color: var(--card-badge);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: #ffffff;
  max-width: none;
}

.card__icon {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__title {
  position: relative;
  margin-top: 2.375rem;
  max-width: 21.25rem; /* 340px -- the design fixes the measure */
  padding-bottom: 0.875rem;
  font-family: var(--font-body);
  font-size: var(--text-card-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: -0.08em;
  color: var(--row-ink);
}

/* Each half of the heading wraps as a unit, so "&" stays on the
   first line. */
.card__title > span {
  white-space: nowrap;
}

/* The rule under the heading: a pseudo-element rather than a border,
   so its ends can be rounded. */
.card__title::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2.5px;
  border-radius: 2.5px;
  background-color: currentColor;
}

.card__body {
  margin-top: 1.125rem;
  font-size: 1rem;
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: -0.03em;
  color: var(--row-muted);
  max-width: 34ch;
}

/* The process intro runs to a shorter measure than the others. */
.process .prose {
  max-width: 59ch;
}

/* =============================================================
   Process timeline
   ============================================================= */
.steps {
  --rail-x: 1.5rem;    /* distance from the copy to the rail axis */
  --marker: 0.9rem;    /* 14.4px ring */
  --rail-gap: 0.75rem; /* clearance between a rail and the rings */
  --step-gap: 3rem;

  display: flex;
  flex-direction: column;
  gap: var(--step-gap);
  margin: 0;
  padding: 0 0 0 calc(var(--rail-x) + var(--marker) / 2);
  list-style: none;
}

.step {
  position: relative;
}

/* Ring marker: stroke only until the rail running into it arrives,
   then it fills solid. Trin 1 starts filled, so its class ships in
   the markup and survives no matter how the page is entered. */
.step__marker {
  position: absolute;
  top: 0.25rem;
  left: calc(-1 * var(--rail-x) - var(--marker) / 2);
  width: var(--marker);
  height: var(--marker);
  border: 2px solid var(--color-step);
  border-radius: 50%;
  background-color: transparent;
  opacity: 0.27;
  transition: opacity 420ms ease, background-color 420ms ease;
}

.step.is-reached .step__marker {
  opacity: 1;
  background-color: var(--color-step);
}

/* One rail per step, rounded like the rings and drawn at the shared
   hairline weight. It runs from a ring's underside to just above the
   next one, held clear of both by the same gap. The grey track is the
   full span; the orange fill grows through it on scroll. */
.step__rail {
  position: absolute;
  top: calc(0.25rem + var(--marker) + var(--rail-gap));
  bottom: calc(var(--rail-gap) - 0.25rem - var(--step-gap));
  left: calc(-1 * var(--rail-x));
  width: var(--line-weight);
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background-color: var(--color-track);
  overflow: hidden;
}

.step:last-child .step__rail {
  display: none;
}

.step__rail i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-step);
  transform-origin: top center;
  transform: scaleY(0);
}

.step__eyebrow {
  font-size: var(--text-byline);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
  max-width: none;
}

.step__title {
  margin-top: 0.375rem;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.step__body {
  margin-top: 1rem;
  font-size: var(--text-byline);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-subtle);
  max-width: 64ch;
}

.step__body strong {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.step__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
  max-width: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  white-space: nowrap;
}

.chip--soft {
  background-color: #ecdad0;
  color: var(--color-accent);
}

.chip--amber {
  background-color: var(--color-yellow);
  color: #4a3510;
}

.chip--outline {
  box-shadow: inset 0 0 0 1px var(--color-accent);
  background-color: var(--color-surface);
  color: var(--color-accent);
}

/* =============================================================
   Cases
   ============================================================= */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.25rem;
  margin-top: 2.375rem;
  padding: 0;
  list-style: none;
}

.case__figure {
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 1.25rem;
  /* Placeholder ground while the photography loads. */
  background-color: #b9b2ab;
  /* CMS cases set the photograph inline; these keep it covered. */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* The photograph is an <img> so `srcset` can pick a smaller file. */
.case__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The case photography carries the client's mark, so it replaces
   the placeholder ground. Both pages' figures share these. */
.case__figure--storm,
.case__figure--klinik {
  background-size: cover;
  background-position: center;
}

.case__figure--storm {
  background-image: url("documentation/storm-card.webp");
}

.case__figure--klinik {
  background-image: url("documentation/klinik-case.webp");
}

/* A hidden case card (the Klinik case is parked) must not fetch its
   photograph; unhiding it brings the image straight back. */
[hidden] .case__figure--klinik {
  background-image: none;
}

.case__name {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* =============================================================
   Team
   ============================================================= */
.team__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
  text-align: center;
}

.portraits {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}

/* The frame itself lives on .flip__face so the front and back share
   it. The figure only sets the width the two faces are cut to. */
.portrait figure {
  width: min(19rem, 44vw);
  margin: 0;
}

/* Square crop, as in the om-os portraits, so the polaroid sits
   wider without growing taller. An <img> now carries the photo, so
   the browser can pick a smaller file on phones. */
.portrait__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #cfc7bd;
}

.portrait figcaption {
  margin-top: 1rem;
  font-size: var(--text-body);
  color: var(--color-ink);
}

/* The two frames lean towards each other, as in the design. */
.portrait--left {
  transform: rotate(-5deg);
}

.portrait--right {
  transform: rotate(4deg);
  margin-left: -2.5rem;
}

.team__cta {
  margin-top: 2.5rem;
  text-align: center;
  max-width: none;
}

/* =============================================================
   Section rhythm
   ============================================================= */
.problem,
.services,
.process,
.cases,
.team,
.faq {
  padding-block: 4.5rem;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 60rem) {
  .split,
  .case-grid {
    grid-template-columns: 1fr;
  }

  .split {
    gap: 2.5rem;
    margin-top: 2.5rem;
  }

  .portraits {
    gap: 0.75rem;
  }

  .portrait--right {
    margin-left: -1.25rem;
  }

  .row summary {
    gap: 1rem;
    padding-inline: 1.25rem;
  }

  .row__body,
  .row__tags {
    margin-inline: 1.25rem;
  }

  .steps {
    padding-left: 1.75rem;
  }

  .step::before {
    left: -2.8125rem;
  }
}

/* Narrow screens cannot hold the pair side by side once the backs
   carry a full story, so the polaroids stack, each one wide enough
   for its text. */
@media (max-width: 40rem) {
  .portraits {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .portrait--right {
    margin-left: 0;
  }

  .portrait figure {
    width: min(19rem, 78vw);
  }
}

/* =============================================================
   6. MOTION
   Hover and state transitions live here in CSS; anything driven
   by scroll position or page load is in motion.js (GSAP).
   ============================================================= */
:root {
  --ripple-1: var(--color-red-neon);    /* dark red, arrives first  */
  --ripple-2: var(--color-orange-neon); /* orange, second          */
  --ripple-3: var(--color-yellow-neon); /* yellow, fills the button */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Button: colour wave rises off the bottom edge ------------
   Three full-width layers stacked at the floor travel up in
   sequence, so the fill sweeps in from below instead of blooming
   out of the middle. The shallow dome keeps it reading as liquid. */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.button__wave,
.button__wave i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160%;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  transform: translateY(100%);
  transition: transform 800ms var(--ease-out-quint);
  z-index: -1;
}

.button__wave {
  background-color: var(--ripple-1);
}

.button__wave i:first-child {
  background-color: var(--ripple-2);
  transition-delay: 110ms;
}

.button__wave i:last-child {
  background-color: var(--ripple-3);
  transition-delay: 220ms;
}

.button:hover .button__wave,
.button:hover .button__wave i,
.button:focus-visible .button__wave,
.button:focus-visible .button__wave i {
  transform: translateY(0);
}

/* The label swaps for a copy of itself: the white one leaves
   upward as the dark one arrives from below. */
.button__text {
  position: relative;
  display: block;
  transition: transform 480ms var(--ease-out-quint),
              opacity 260ms ease;
}

/* The incoming label is a sibling of the outgoing one -- as a child
   it would inherit the fade and never be seen. Its ink is the dark
   brown the yellow cards use, so the filled state stays on palette. */
.button::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateY(115%);
  color: #4a3510;
  font-weight: var(--weight-semibold);
  opacity: 0;
  transition: transform 480ms var(--ease-out-quint),
              opacity 260ms ease 160ms;
  pointer-events: none;
}

.button:hover .button__text,
.button:focus-visible .button__text {
  transform: translateY(-115%);
  opacity: 0;
}

.button:hover::after,
.button:focus-visible::after {
  transform: translateY(0);
  opacity: 1;
}

/* The wave supplies the colour, so hold the base fill steady. */
.button:hover {
  background-color: var(--color-action);
}

.button--light:hover {
  background-color: var(--color-surface-raised);
}

/* --- Reason rows and service cards: lighting up --------------
   A soft highlight rises through the panel and the whole thing
   lifts a little, so it reads as switching on rather than
   just changing colour. */
.row,
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.row:hover,
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.875rem 1.75rem rgb(74 53 16 / 0.18);
}

/* Rows carry the hover on the whole panel, but only the summary
   should feel clickable. */
.row[open] {
  transform: none;
}

/* --- Disclosure panel ----------------------------------------
   GSAP animates the height, so the panel starts closed and
   clipped rather than display:none. */
.row__panel {
  overflow: hidden;
}

.row summary::after {
  transition: transform 320ms var(--ease-out-quint), opacity 320ms ease;
}

/* --- Images: scale and pop ----------------------------------- */
.case__figure,
.portrait__photo {
  transition: transform 520ms var(--ease-out-quint),
              box-shadow 520ms var(--ease-out-quint);
}

.case {
  display: block;
  border-radius: 1.25rem;
}

.case:hover .case__figure,
.case:focus-visible .case__figure {
  transform: scale(1.035) translateY(-6px);
  box-shadow: 0 1.5rem 3rem rgb(18 18 18 / 0.22);
}

/* --- Portraits: flip to a back face --------------------------- */
.flip {
  margin: 0;
  perspective: 1200px;
}

.flip__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-out-quint);
}

.portrait:hover .flip__inner,
.portrait:focus-within .flip__inner {
  transform: rotateY(180deg);
}

.flip__face {
  padding: 0.875rem 0.875rem 3.25rem;
  border-radius: 0.375rem;
  background-color: var(--color-surface-raised);
  box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 0.16);
  text-align: center;
  backface-visibility: hidden;
}

.flip__face--back {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.5rem;
  padding: 1.75rem;
  transform: rotateY(180deg);
  /* The story on the back is written by hand, the way notes usually
     end up on a polaroid; the front caption keeps the body face. */
  font-family: var(--font-hand);
}

.portrait__role {
  font-size: var(--text-note);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  max-width: none;
}

/* The back of a team card: the story, then the name and the
   specialty set in the brand's neon orange. */
.portrait__bio {
  font-size: var(--text-note);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  max-width: none;
}

.portrait__name,
.portrait__specialty {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-orange-neon);
  max-width: none;
}

/* On a phone the back of the polaroid is read as ordinary copy, so it
   is set in the body face; the handwritten note is kept for desktop. */
@media (max-width: 40rem) {
  .flip__face--back {
    font-family: var(--font-body);
  }
}

/* --- Section head rule: drawn in on scroll -------------------- */
.section-head__rule {
  transform-origin: left center;
}

/* --- Process timeline ---------------------------------------- */
.steps {
  position: relative;
}

/* --- Entrance defaults ----------------------------------------
   The hero entrance is a CSS animation, so it starts with the
   stylesheet at first paint instead of waiting for the scripts.
   `--hero-i` (set in the markup) keeps the original rhythm: a
   120ms delay, then 90ms between the blocks, in power3.out. */
.js [data-hero] {
  opacity: 0;
  transform: translateX(46px);
  animation: hero-in 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation-delay: calc(0.12s + var(--hero-i, 0) * 0.09s);
}

@keyframes hero-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Arriving under a page wipe: the wipe is the entrance, so the
   snapshot must catch the block at rest. */
.js.vt-arrive [data-hero] {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Everything else that fades up on scroll is armed by the script. */
.js [data-reveal] {
  opacity: 0;
}

/* =============================================================
   Reduced motion: keep the state changes, drop the travel.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .js [data-hero] {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js [data-reveal] {
    opacity: 1;
  }

  .button__wave,
  .button__wave i {
    transition: none;
  }

  .row:hover,
  .card:hover {
    transform: none;
  }

  .flip__inner {
    transition-duration: 1ms;
  }
}

/* =============================================================
   PAGE TRANSITIONS
   Cross-document View Transitions: the browser runs these only when
   moving between pages of this site (links, back/forward), never on
   a first visit or a reload. Browsers without support simply load
   the next page as before.

   The opt-in (@view-transition { navigation: auto }) is not here: it
   lives in each page's <head>, before this stylesheet. Chrome can
   check for it during the reveal without waiting for external CSS,
   and when it misses the rule the transition is skipped — which read
   as an intermittent failure.

   Both wipes (angle 270deg) travel up the screen. Leaving page:
   fades, rises 30% of its height, and is erased from the bottom
   edge upwards (its mask is anchored to the top and shrinks).
   Arriving page: after 0.5s, fades in from 30% below and is
   revealed from the bottom edge upwards (its mask is anchored to
   the bottom and grows).
   ============================================================= */
:root {
  --page-ease: cubic-bezier(0.73, 0, 0.33, 1);
  --page-duration: 0.5s;
  --page-exit-delay: 0s;
  --page-enter-delay: 0.1s;
  --page-shift: 30%;
}

@keyframes page-exit {
  to {
    opacity: 0;
    transform: translate(0, calc(-1 * var(--page-shift))) scale(1);
    -webkit-mask-size: 100% 0%;
    mask-size: 100% 0%;
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translate(0, var(--page-shift)) scale(1);
    -webkit-mask-size: 100% 0%;
    mask-size: 100% 0%;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  /* A solid mask, resized in height: the wipe. */
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* The default cross-fade blend would brighten the overlap. */
  mix-blend-mode: normal;
  animation-timing-function: var(--page-ease);
  animation-duration: var(--page-duration);
}

::view-transition-old(root) {
  -webkit-mask-position: center top;
  mask-position: center top;
  animation-name: page-exit;
  animation-delay: var(--page-exit-delay);
  animation-fill-mode: both;
}

::view-transition-new(root) {
  animation-name: page-enter;
  animation-delay: var(--page-enter-delay);
  /* Hidden during its delay, not flashed in first. */
  animation-fill-mode: both;
}

/* =============================================================
   7. CARD COLOUR SYSTEM + OPEN STATE
   Each family declares one surface colour; heading, body and
   badge are mixed from it, so a hover only has to restate the
   surface and every tone follows.
   ============================================================= */
.row,
.card {
  --row-ink: color-mix(in srgb, var(--row-bg) 20%, #fff);
  --row-muted: color-mix(in srgb, var(--row-bg) 78%, #fff);
  --card-badge: color-mix(in srgb, var(--row-bg) 58%, #000);
  background-color: var(--row-bg);
  color: var(--row-ink);
  transition: background-color 380ms var(--ease-out-quint),
              transform 380ms var(--ease-out-quint),
              box-shadow 380ms var(--ease-out-quint);
}

.row--amber,
.card--amber {
  --row-bg: var(--color-yellow);
  --row-bg-hover: var(--color-yellow-hover);
  /* The light card inverts: dark ink instead of a white mix. */
  --row-ink: #4a3510;
  --row-muted: color-mix(in srgb, #4a3510 78%, var(--row-bg));
  --card-badge: #94733e;
}

.row--terracotta,
.card--terracotta { --row-bg: var(--color-orange); --row-bg-hover: var(--color-orange-hover); }

.row--rust,
.card--rust { --row-bg: var(--color-red); --row-bg-hover: var(--color-red-hover); }

.row--teal,
.card--teal { --row-bg: var(--color-blue); --row-bg-hover: var(--color-blue-hover); }

.row--faq {
  --row-bg: var(--color-accent);
  --row-bg-hover: var(--color-orange-hover);
  --row-ink: #fff;
}

/* Hover warms the surface rather than washing it out. */
.row:hover,
.card:hover {
  --row-bg: var(--row-bg-hover);
}

.card--amber:hover { --card-badge: #a5823f; }

/* Body copy: soft white on the dark families, full ink on yellow. */
.row--terracotta, .card--terracotta,
.row--rust, .card--rust,
.row--teal, .card--teal { --body-ink: rgb(255 255 255 / 0.8); }

.row--amber, .card--amber { --body-ink: #4a3510; }

.row__num { color: var(--row-muted); }
.row__title { color: var(--row-ink); }
.row__body { color: var(--body-ink, var(--row-ink)); }

.card__body { color: var(--body-ink, var(--row-muted)); }
.card--amber .card__title { color: #4a3510; }

/* A lighter lip along the right and bottom edge of every card. */
.card {
  --card-lip: inset -5px -5px 0 5px rgb(255 255 255 / 0.2);
  box-shadow: var(--card-lip);
}

.card:hover {
  box-shadow: var(--card-lip), 0 0.875rem 1.75rem rgb(74 53 16 / 0.18);
}

/* =============================================================
   Service card: open state
   Within a row the open card takes three quarters and its
   neighbour gives way. flex-basis animates, so the resize is a
   single CSS transition rather than a layout script.
   ============================================================= */
.cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.card {
  flex: 0 1 calc(50% - 0.65625rem);
  /* Same timing as the nav bar's contract and expand, so the card
     resize and the neighbour giving way settle at one rhythm. */
  transition: flex-basis var(--nav-duration) var(--nav-ease),
              background-color 380ms var(--ease-out-quint),
              transform 380ms var(--ease-out-quint),
              box-shadow 380ms var(--ease-out-quint);
}

.card.is-open { flex-basis: calc(75% - 0.65625rem); }
.card.is-collapsed { flex-basis: calc(25% - 0.65625rem); }

/* An open card shouldn't also lift on hover. */
.card.is-open:hover { transform: none; }

.card__expand {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--card-toggle, 2.875rem);
  height: var(--card-toggle, 2.875rem);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--card-badge);
  color: #fff;
  cursor: pointer;
  transition: background-color 320ms ease, transform 320ms var(--ease-out-quint);
}

.card__expand:hover { transform: scale(1.08); }

.card__glyph {
  grid-area: 1 / 1;
  width: var(--card-glyph, 1.25rem);
  height: var(--card-glyph, 1.25rem);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 220ms ease, transform 320ms var(--ease-out-quint);
}

.card__glyph--close { opacity: 0; transform: rotate(-45deg); }

.card.is-open .card__expand {
  background-color: var(--color-red-neon);
  transform: none;
}

.card.is-open .card__glyph--open { opacity: 0; transform: rotate(45deg); }
.card.is-open .card__glyph--close { opacity: 1; transform: rotate(0); }

/* The badge gives up its place to the heading when open. */
.card__badge {
  transition: opacity 240ms ease, transform 320ms var(--ease-out-quint);
}

/* The badge is removed rather than faded, so the toggle slides to
   the start of the row on a collapsed card, as in the design. */
.card.is-open .card__badge,
.card.is-collapsed .card__badge {
  display: none;
}

/* On an open card the toggle is lifted out of the flow and laid over
   the top corner of the artwork, so title, copy and image get the
   card's full height side by side. */
.card.is-open .card__top {
  position: absolute;
  top: 1.875rem;
  right: 1.875rem;
  z-index: 2;
}

.card__main {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Closed: the heading sits low. Open: it rises to the top. */
.card__title {
  margin-top: 2.375rem;
  transition: margin-top var(--nav-duration) var(--nav-ease);
}

.card.is-open .card__title {
  margin-top: 0;
  /* The closed card fixes the measure to force a two-line heading;
     open, there is room for it to run the full column. */
  max-width: none;
}

/* Collapsed neighbours keep only the heading, pushed to the foot. */
/* Stretch so margin-top:auto has room to push the heading down. */
.card.is-collapsed .card__main { align-items: stretch; }
.card.is-collapsed .card__title { margin-top: auto; }

.card.is-collapsed .card__body,
.card.is-collapsed .card__art { display: none; }

/* Long copy and artwork are clipped shut until the card opens. */
.card__detail {
  overflow: hidden;
  height: 0;
}

/* The expanded copy runs a step smaller and tighter than the
   summary, which is what lets it sit inside the fixed card height. */
.card__body--full {
  margin-top: 1.125rem;
  font-size: 0.9375rem;  /* 15px */
  line-height: 1.38;
  max-width: none;
}

/* Only the short summary steps aside; the long copy is also a
   .card__body, so exclude it explicitly. */
.card.is-open .card__body:not(.card__body--full) { display: none; }

.card__art {
  flex: none;
  width: min(15rem, 32%);
  height: auto;
  opacity: 0;
  display: none;
}

.card.is-open .card__art {
  display: block;
  /* Fit the artwork to the height the card has left rather than
     letting its aspect ratio push the card taller. */
  height: 100%;
  width: auto;
  max-width: 40%;
  object-fit: contain;
}

/* --- Phone: stacked cards ---------------------------------------
   No badge; a larger toggle shares the first row with a heading that
   is always two lines tall, exactly the toggle's height. Opening
   rolls the long copy down, then the artwork below it. */
@media (max-width: 60rem) {
  .card {
    --card-toggle: 3rem;
    --card-glyph: 1.375rem;
    flex-basis: 100%;
    min-height: 0;
  }

  .card.is-open,
  .card.is-collapsed { flex-basis: 100%; }

  .card__badge,
  .card.is-collapsed .card__badge { display: none; }

  .card__top,
  .card.is-open .card__top {
    position: absolute;
    top: 1.875rem;
    right: 1.875rem;
    z-index: 2;
  }

  .card__main {
    flex-direction: column;
    align-items: stretch;
  }

  .card__title,
  .card.is-open .card__title,
  .card.is-collapsed .card__title {
    margin-top: 0;
    max-width: none;
    padding-right: calc(var(--card-toggle) + 1rem);
    /* Line height is pinned to half the toggle so two lines always
       match it; the type itself shrinks on very narrow phones. */
    font-size: min(calc(var(--card-toggle) / 2), 6.4vw);
    line-height: calc(var(--card-toggle) / 2);
  }

  /* One half of the heading per line: always exactly two. */
  .card__title > span {
    display: block;
    white-space: nowrap;
  }

  /* The rule runs the full card width, under the toggle as well. */
  .card__title { padding-bottom: 1rem; }

  /* Stacked cards have no neighbour to shrink, so a collapsed
     card is just a normal one. */
  .card.is-collapsed .card__body { display: block; }

  .card__body { max-width: none; }

  .card.is-open .card__art {
    width: 100%;
    max-width: none;
    height: auto;
    margin-top: 1.75rem;
  }

  .card__main { gap: 0; }
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Inline link used inside prose blocks outside the case pages. */
.u-link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 200ms ease;
}

.u-link:hover {
  color: var(--color-accent-strong);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card__title,
  .card__glyph,
  .card__badge { transition-duration: 1ms; }
}

/* =============================================================
   8. NAVIGATION
   One bar serves every state. Rest: brand, links, and the call to
   action pushed to the far end. Scrolled: the bar contracts around
   the brand and the burger. The links stay in the flex row and are
   squeezed out by the shrinking bar while they fade, and the burger
   grows in, so the contents move with the bar instead of jumping.

   The glass is drawn by .nav__bar::before rather than the bar
   itself. Opening the menu grows only that layer, down and out,
   so the brand and the burger never move; the links then fade in
   inside the grown glass.
   ============================================================= */
:root {
  /* Over the cream page this composites to exactly #e7e2da, the bar
     colour of the design; over content it frosts. */
  --nav-bar: rgb(202 203 204 / 0.35);
  --nav-glass-blur: 14px;
  --nav-height: 4rem;       /* 64px */
  --nav-pad: 1.5625rem;     /* 25px from the bar's ends to the pills */
  --nav-gap: 0.8125rem;     /* 13px between pills */
  --nav-top: 0.75rem;
  --text-nav: 1.125rem;     /* 18px */
  --nav-pill: 2.1rem;       /* 33.6px, pill and burger height */
  --nav-duration: 560ms;
  --nav-ease: cubic-bezier(0.65, 0, 0.35, 1);

  /* Open menu panel */
  --nav-panel-width: 22rem;
  --nav-menu-link: 3.125rem;  /* 50px */
  --nav-menu-gap: 0.625rem;   /* 10px */
  --nav-panel-duration: 420ms;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* The header itself is only as tall as the bar plus its offset,
     so it never blocks clicks on the page behind it. */
  height: 0;
}

.site-nav {
  /* Same box as .container, so the bar lines up with the content. */
  max-width: var(--container-max);
  margin-inline: auto;
  padding-top: var(--nav-top);
  padding-inline: var(--container-gutter);
}

.nav__bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  width: 100%;
  height: var(--nav-height);
  margin-inline: auto;
  padding: 0 var(--nav-pad);
  transition: width var(--nav-duration) var(--nav-ease);

  /* Open panel geometry. The link count is set by motion.js; the
     width is never narrower than the bar, and never wider than the
     screen allows. */
  --nav-panel-w: max(100%, min(var(--nav-panel-width), 100vw - 2 * var(--container-gutter)));
  --nav-panel-h: calc(
    var(--nav-height)
    + var(--nav-link-count, 3) * var(--nav-menu-link)
    + (var(--nav-link-count, 3) - 1) * var(--nav-menu-gap)
    + var(--nav-pad) * 0.6);
}

/* Liquid glass: a thin tinted pane that blurs and saturates the page
   behind it. */
.nav__bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  border-radius: calc(var(--nav-height) / 2);
  background-color: var(--nav-bar);
  -webkit-backdrop-filter: blur(var(--nav-glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--nav-glass-blur)) saturate(180%);
  /* Closing: wait for the links to fade before folding up. */
  transition: height var(--nav-panel-duration) var(--nav-ease) 80ms,
              left var(--nav-panel-duration) var(--nav-ease) 80ms,
              right var(--nav-panel-duration) var(--nav-ease) 80ms,
              border-radius var(--nav-panel-duration) var(--nav-ease) 80ms;
}

/* --- Pills ---------------------------------------------------- */
.nav__brand,
.nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--nav-pill);
  padding-inline: 1.125rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: -0.05em;
  white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease;
}

.nav__brand {
  flex: none;
  justify-content: center;
  /* The stretched pill grows and folds at the panel's own pace, so
     opening and closing read as one movement. */
  transition: background-color 240ms ease,
              color 240ms ease,
              flex-grow var(--nav-panel-duration) var(--nav-ease);
}

.nav__link {
  background-color: transparent;
  color: var(--color-ink);
}

/* The brand is the only filled pill in the bar; all the section
   links, Kontakt included, stay transparent until the hover. */
.nav__brand {
  background-color: var(--color-accent);
  color: #fff;
}

/* The section pills fill with the neon orange on hover; the filled
   brand and the burger keep the same neon orange. */
.nav__link:hover {
  background-color: var(--color-orange-neon);
  color: #fff;
}

.nav__brand:hover,
.nav__burger:hover {
  background-color: var(--color-orange-neon);
  color: #fff;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  /* Zero basis and min-width so the row gives way as the bar shrinks;
     the clip margin leaves room for focus rings. */
  flex: 1 1 0;
  min-width: 0;
  overflow: clip;
  overflow-clip-margin: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Expanding: fade back in once the bar has made some room. */
  transition: opacity 280ms ease 200ms,
              margin var(--nav-duration) var(--nav-ease),
              visibility 0s linear 0s;
}

/* The call to action sits at the far end of the bar. */
.nav__cta {
  margin-left: auto;
}

/* --- Burger ----------------------------------------------------
   On a wide screen at rest the burger is present but folded to
   nothing: zero width, and a negative margin that cancels its flex
   gap, so it can grow in rather than pop in. */
.nav__burger {
  display: grid;
  place-items: center;
  flex: none;
  width: 0;
  height: var(--nav-pill);
  margin-left: calc(-1 * var(--nav-gap));
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-accent);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  transition: width var(--nav-duration) var(--nav-ease),
              margin var(--nav-duration) var(--nav-ease),
              opacity 160ms ease,
              transform 220ms var(--ease-out-quint),
              visibility 0s linear var(--nav-duration),
              background-color 260ms ease;
}

/* Three rules that fold into a cross when the menu is open. */
.nav__bars,
.nav__bars::before,
.nav__bars::after {
  display: block;
  width: 0.9375rem;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 320ms var(--ease-out-quint), opacity 200ms ease;
}

.nav__bars {
  position: relative;
}

.nav__bars::before,
.nav__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav__bars::before { top: -0.3125rem; }
.nav__bars::after { top: 0.3125rem; }

/* --- Scrolled: contract around brand + burger ------------------
   --nav-collapsed is measured by motion.js so the bar ends exactly
   around its contents; the fallback covers a no-JS visit. */
.site-nav.is-stuck .nav__bar {
  width: var(--nav-collapsed, 12.5rem);
}

/* The squeezed-out links also give back their share of the flex
   gap, so brand and burger end one gap apart. They leave the flex
   row entirely rather than merely hiding: a hidden flex item still
   takes free space, and when the close released them mid-transition
   they grabbed a share and the brand pill snapped shorter. */
.site-nav.is-stuck .nav__links {
  position: absolute;
  left: 0;
  right: 0;
  margin-right: calc(-1 * var(--nav-gap));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Collapsing: fade out first, hide once invisible. */
  transition: opacity 160ms ease,
              margin var(--nav-duration) var(--nav-ease),
              visibility 0s linear 160ms;
}

.site-nav.is-stuck .nav__burger,
.site-nav.is-open .nav__burger {
  width: var(--nav-pill);
  margin-left: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: width var(--nav-duration) var(--nav-ease),
              margin var(--nav-duration) var(--nav-ease),
              opacity 260ms ease 180ms,
              transform 340ms var(--ease-out-quint) 180ms,
              visibility 0s linear 0s,
              background-color 260ms ease;
}

.site-nav.is-stuck .nav__burger:hover {
  transform: scale(1.06);
}

/* --- Open: the glass grows down and out; nothing else moves -----
   .is-closing keeps the panel layout for the links while they fade,
   so they never flash back into the row on their way out. */
.site-nav.is-open .nav__bar::before {
  left: calc((100% - var(--nav-panel-w)) / 2);
  right: calc((100% - var(--nav-panel-w)) / 2);
  height: var(--nav-panel-h);
  border-radius: 2rem;
  transition: height var(--nav-panel-duration) var(--nav-ease),
              left var(--nav-panel-duration) var(--nav-ease),
              right var(--nav-panel-duration) var(--nav-ease),
              border-radius var(--nav-panel-duration) var(--nav-ease);
}

/* With the menu open the bar takes the panel's own width (never
   narrower than the collapsed bar), so the top row spans the glass:
   the brand pill runs the room between the paddings and the burger
   keeps its size in the right corner. Links and glass are measured
   from the bar, so neither moves while the bar widens. */
.site-nav.is-open .nav__bar,
.site-nav.is-closing .nav__bar {
  width: max(var(--nav-collapsed, 12.5rem),
             min(var(--nav-panel-width), 100vw - 2 * var(--container-gutter)));
}

/* The brand pill and the exit symbol hold their open state while the
   links fade (.is-closing), and in the contracted bar the pill keeps
   filling the row for the whole width transition (.is-folding), so the
   bar edge follows the exit symbol instead of trailing behind it. */
.site-nav.is-open .nav__brand,
.site-nav.is-closing .nav__brand,
.site-nav.is-folding.is-stuck .nav__brand {
  flex-grow: 1;
}

.site-nav.is-open .nav__links,
.site-nav.is-closing .nav__links {
  position: absolute;
  top: var(--nav-height);
  left: calc((100% - var(--nav-panel-w)) / 2 + var(--nav-pad) * 0.6);
  /* Sized by width rather than a right edge so the row's own
     margin-right can stay as it is: resetting it here used to be
     animated back by the collapsed row once the panel closed,
     dragging the burger sideways with it. */
  width: calc(var(--nav-panel-w) - var(--nav-pad) * 1.2);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--nav-menu-gap);
}

.site-nav.is-closing .nav__links {
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}

/* The links wait for the glass to reach its size. */
.site-nav.is-open .nav__links {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms ease calc(var(--nav-panel-duration) - 80ms),
              visibility 0s linear 0s;
}

.site-nav.is-open .nav__cta,
.site-nav.is-closing .nav__cta {
  margin-left: 0;
}

.site-nav.is-open .nav__link,
.site-nav.is-closing .nav__link {
  display: flex;
  justify-content: center;
  width: 100%;
  height: var(--nav-menu-link);
  font-size: var(--text-body);
}

.site-nav.is-open .nav__burger,
.site-nav.is-closing .nav__burger {
  background-color: var(--color-red-neon);
}

/* The exit button lifts to a lighter red under the pointer. */
.site-nav.is-open .nav__burger:hover,
.site-nav.is-closing .nav__burger:hover {
  background-color: var(--color-red-light);
}

.site-nav.is-open .nav__bars,
.site-nav.is-closing .nav__bars {
  background-color: transparent;
}

.site-nav.is-open .nav__bars::before,
.site-nav.is-closing .nav__bars::before {
  transform: translateY(0.3125rem) rotate(45deg);
}

.site-nav.is-open .nav__bars::after,
.site-nav.is-closing .nav__bars::after {
  transform: translateY(-0.3125rem) rotate(-45deg);
}

/* --- Phone: burger is always on ---------------------------------- */
@media (max-width: 60rem) {
  /* The links never sit in the row here: they live in the panel
     position, hidden, so opening only has to fade them in. */
  .nav__links,
  .site-nav.is-stuck .nav__links {
    position: absolute;
    top: var(--nav-height);
    left: calc((100% - var(--nav-panel-w)) / 2 + var(--nav-pad) * 0.6);
    right: calc((100% - var(--nav-panel-w)) / 2 + var(--nav-pad) * 0.6);
    flex-direction: column;
    align-items: stretch;
    gap: var(--nav-menu-gap);
    margin: 0;
  }

  /* No transition on this rule: the close fade belongs to
     .is-closing, and one here would replay whenever the viewport
     crosses the breakpoint, flashing the panel open on the way in. */
  .site-nav:not(.is-open) .nav__links {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .nav__cta {
    margin-left: 0;
  }

  .nav__link {
    display: flex;
    justify-content: center;
    width: 100%;
    height: var(--nav-menu-link);
    font-size: var(--text-body);
  }

  /* The burger is always out; auto margin keeps it at the right
     edge, so it simply rides the edge in as the bar contracts.
     Resting here it only ever changes colour, so the in-row
     transitions are dropped: crossing the breakpoint should swap
     the row for the burger at once, not replay a delayed grow-in. */
  .nav__burger,
  .site-nav.is-stuck .nav__burger,
  .site-nav.is-open .nav__burger {
    width: var(--nav-pill);
    margin-left: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-nav:not(.is-stuck):not(.is-open) .nav__burger {
    transition: background-color 260ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__bar,
  .nav__bar::before,
  .nav__links,
  .nav__bars,
  .nav__bars::before,
  .nav__bars::after,
  .nav__burger,
  .site-nav.is-stuck .nav__links,
  .site-nav.is-stuck .nav__burger,
  .site-nav.is-open .nav__bar::before,
  .site-nav.is-open .nav__links,
  .site-nav.is-closing .nav__links,
  .site-nav.is-open .nav__burger,
  .site-nav:not(.is-stuck):not(.is-open) .nav__burger { transition-duration: 1ms; transition-delay: 0s; }
}

/* =============================================================
   9. FOOTER
   Full-bleed terracotta with the wordmark set large enough to
   run the width of the container.
   ============================================================= */
.site-footer {
  /* Fills the viewport at the bottom of the scroll, so only the
     footer's plain ground shows behind the last screen. The content
     rests at the bottom edge, which also keeps it clear of the
     floating header. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  margin-top: 5rem;
  padding-block: 4.5rem 1rem;
  background-color: var(--color-accent);
  color: var(--color-surface);
  overflow: hidden; /* the wordmark is sized to the edge */
}

/* The footer's top half pairs the pitch and contact details with the
   contact form: copy on 35% of the row, form on 65%, the copy row
   centred against the form card. The wordmark keeps the full width
   below. The footer no longer caps its height, since the form makes
   it taller than a screen. */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  gap: 4.125rem; /* 66px */
  align-items: center;
}

/* The footer's form runs more compact than the one on the contact
   page: a shorter message box and a tighter vertical rhythm. The
   contact page keeps its tall box. */
.footer__form .form {
  gap: 1rem;
}

.footer__form .field--message {
  padding-bottom: 0;
}

.footer__form .field__input--area {
  height: 4.5rem; /* 72px */
}

.footer__lead {
  font-family: var(--font-heading);
  font-size: var(--text-footer-lead);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-surface);
  max-width: 43rem; /* holds the three-line break of the design */
}

.footer__lead + .footer__lead {
  margin-top: 2.6875rem; /* the blank line in the original */
}

.footer__mail {
  margin-top: 1.375rem;
  font-size: var(--text-byline);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-surface);
  max-width: none;
}

.footer__mail a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 200ms ease;
}

.footer__mail a:hover {
  color: var(--ripple-3);
}

.footer__phone {
  margin-top: 0.25rem;
  font-size: var(--text-byline);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-surface);
  max-width: none;
}

.footer__phone a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 200ms ease;
}

.footer__phone a:hover {
  color: var(--ripple-3);
}

/* Sized from the container, not the viewport, so it spans the same
   share of the column at every width -- the standing-in for the
   design's auto-fitting text. */
.footer__wordmark {
  --wm-column: calc(min(var(--container-max), 100vw) - 2 * var(--container-gutter));

  margin-top: 3rem;
  font-family: var(--font-wordmark);
  /* also capped against viewport height so the footer fits a screen */
  font-size: min(calc(0.3516 * var(--wm-column)), 40vh);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-surface);
  max-width: none;
  white-space: nowrap;
}

/* On pages whose footer carries the form, the wordmark sits in the
   copy column right under the contact details, sized to fill that
   column so it runs as close to the form card as the column gap
   allows. */
@media (min-width: 60.0625rem) {
  .footer__grid .footer__wordmark {
    --wm-column: calc((min(var(--container-max), 100vw) - 2 * var(--container-gutter) - 4.125rem) * 0.35);

    margin-top: 2rem;
    font-size: min(calc(0.3955 * var(--wm-column)), 40vh);
  }
}

.footer__legal {
  margin-top: 1.25rem;
  font-size: var(--text-body);
  color: rgb(255 255 255 / 0.5);
  max-width: none;
}

/* The case pages reverse the house colours in the footer: cream
   ground and ink text all the way through. */
.page-case .site-footer {
  background-color: var(--color-surface);
  color: var(--color-ink);
}

.page-case .footer__lead,
.page-case .footer__mail,
.page-case .footer__phone,
.page-case .footer__wordmark,
.page-case .footer__legal {
  color: var(--color-ink);
}

.page-case .footer__mail a:hover,
.page-case .footer__phone a:hover {
  color: var(--color-accent);
}

@media (max-width: 60rem) {
  .site-footer {
    margin-top: 3rem;
    padding-block: 3rem 1rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__wordmark {
    margin-top: 2rem;
  }

  .footer__legal {
    margin-top: 1.25rem;
  }
}

/* =============================================================
   10. OM OS
   A label-and-column page: each block puts a terracotta label in
   a narrow left column and the copy in a wide right one, closed
   by a hairline rule.
   ============================================================= */

/* This page runs its content to the full 1800px box rather than
   inside the gutter the home page uses. */
.page-om .container {
  max-width: calc(var(--container-max) + 2 * var(--container-gutter));
}

/* --- Hero ------------------------------------------------------ */
.om-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: calc(var(--nav-height) + var(--nav-top) + 2.375rem) 3.5rem;
  text-align: center;
}

.om-hero__title {
  margin-top: 1.15rem;
  font-family: var(--font-heading);
  font-size: var(--text-om-title);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  letter-spacing: -0.056em;
  color: var(--color-accent);
}

.om-hero__lead {
  margin-top: 1.375rem;
  font-size: var(--text-om-lead);
  font-weight: var(--weight-medium);
  line-height: 1.44;
  letter-spacing: var(--tracking-normal);
  color: var(--color-ink-subtle);
  max-width: none;
}

/* Muted outline pill: grey hairline, black label. */
.pill--muted {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.85rem;
  box-shadow: inset 0 0 0 1px #b5b7b8;
  background-color: var(--color-surface);
  color: var(--color-ink);
}

/* The portraits run larger here than in the home page's team block. */
.portraits--lg {
  margin-top: 1.75rem;
}

/* Solving the rotated pair's bounding box against the design gives a
   324x375 frame with a square crop. */
.portraits--lg .portrait figure {
  width: min(20.25rem, 44vw); /* 324px */
}

.portraits--lg .flip__face {
  padding-bottom: 1.375rem;
}

.portraits--lg .portrait__photo {
  aspect-ratio: 1 / 1;
}

/* --- Label + column blocks -------------------------------------- */
.om-block {
  padding-block: 3.5rem 0;
}

.om-split {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  align-items: start;
}

.om-label {
  font-family: var(--font-heading);
  font-size: var(--text-om-label);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-snug);
  color: var(--color-accent);
}

.om-prose {
  font-size: var(--text-om-body);
  line-height: 1.22;
  letter-spacing: -0.06em;
  color: #000;
  max-width: none;
}

.om-prose__lead {
  font-family: var(--font-body);
  font-size: var(--text-om-sub);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.06em;
  color: #000;
}

/* The design separates paragraphs by a blank line rather than a
   tighter typographic space. */
/* One clear blank line between paragraphs, as the design sets it. */
.om-prose + .om-prose {
  margin-top: 1.22em;
}

.om-prose__lead + .om-prose {
  margin-top: 1.24em;
}

/* The opening block's single paragraph runs a shade tighter. */
.om-prose--intro {
  font-size: var(--text-om-intro);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: var(--tracking-snug);
}

/* --- People ------------------------------------------------------ */
.person + .person {
  margin-top: 4.5rem;
}

.person__name {
  font-family: var(--font-body);
  font-size: var(--text-om-sub);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.06em;
  color: #000;
}

.person__role {
  font-size: var(--text-om-sub);
  font-weight: var(--weight-regular);
  line-height: 1.2;
  letter-spacing: -0.06em;
  color: #000;
  max-width: none;
}

.person__role + .om-prose {
  margin-top: 2.1em;
}

/* --- Hairline rule ---------------------------------------------- */
.divider {
  height: 1px;
  margin: 3.0625rem 0 0;
  border: 0;
  background-color: rgb(0 0 0 / 0.2);
}

/* --- Cases ------------------------------------------------------- */
.om-cases {
  padding-block: 3.5rem 4rem;
}

.om-cases__title {
  font-family: var(--font-body);
  font-size: var(--text-om-cases);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-snug);
  color: #000;
}

.om-cases__sub {
  margin-top: 1.125rem;
  font-size: var(--text-om-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: rgb(0 0 0 / 0.6);
  max-width: none;
}

.case-grid--wide {
  gap: 3.9375rem; /* 63px */
  margin-top: 2.25rem;
}

.case-grid--wide .case__figure {
  aspect-ratio: 1.9 / 1;
}

/* --- Responsive -------------------------------------------------- */
@media (max-width: 60rem) {
  .om-split {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .om-block {
    padding-block: 2.5rem 0;
  }

  .divider {
    margin-top: 2.25rem;
  }

  .person + .person {
    margin-top: 3rem;
  }

  .om-cases {
    padding-block: 2.5rem 3rem;
  }

  .case-grid--wide {
    gap: 1.5rem;
  }
}

/* =============================================================
   11. CASE
   A single case study: terracotta ground, a photograph the depth
   of the viewport, and the write-up on a frosted white panel.
   The panel reuses the label-left / copy-right split of Om os.
   ============================================================= */
.page-case {
  --nav-bar: rgb(194 194 194 / 0.3);
  --case-rule: #c2c2c2;

  background-color: var(--color-accent);
  /* White rules instead of the home page's warm grey ones, phased
     so the first line lands on the 30px mark like the original. */
  background-image:
    repeating-linear-gradient(to right, rgb(255 255 255 / 0.15) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.15) 0 1px, transparent 1px var(--grid-size));
  background-position: var(--grid-offset) var(--grid-offset);
  --grid-spot-ink: rgb(255 255 255 / 0.55);
}

/* Frosted over a photograph, so the bar needs a heavier blur. */
.page-case {
  --nav-glass-blur: 24px;
}

/* Kontakt sits on the home page's cream ground instead. Its grid
   rules are drawn in a translucent grey, so only the crosses stay
   dark; the marks around the cursor take the yellow of the form's
   outline. */
.page-kontakt {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath fill='%23787877' d='M26.5 29.875h8v1.25h-8zM29.875 26.5h1.25v8h-1.25z'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to right, rgb(120 120 119 / 0.4) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, rgb(120 120 119 / 0.4) 0 1px, transparent 1px var(--grid-size));
  background-position:
    calc(var(--grid-offset) - var(--grid-size) / 2) calc(var(--grid-offset) - var(--grid-size) / 2),
    var(--grid-offset) var(--grid-offset),
    var(--grid-offset) var(--grid-offset);
  --grid-spot-ink: #ffdb73;
}

/* The page box, not the container: at full width the artwork runs
   edge to edge of the 1800px column with no gutter. */
.case-main {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-bottom: 8rem; /* 128px */
}

/* --- Hero --------------------------------------------------------- */
.case-hero {
  position: relative;
  /* The original reserves the nav's 65px in flow above the page box;
     here the bar floats, so that offset lives on the hero instead. */
  min-height: 54.0625rem; /* 865px — where the intro starts */
  padding-top: 22.8125rem; /* 365px */
}

/* The photograph fills the hero and stops at its edge, so the case
   intro below it reads on the orange ground instead of the frame. */
.case-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  background-color: #4a4a4a; /* ground while the photograph loads */
  background-size: cover;
  background-position: center;
}

.case-hero__media--storm {
  background-image: url("documentation/storm-hero.webp");
}

.case-hero__media--klinik {
  background-image: url("documentation/klinik-case.webp");
}

.case-hero__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 50%;
  margin-left: 3.125rem;
  padding: 1.875rem;
  border-radius: 0.625rem;
  background-color: rgb(115 115 115 / 0.52);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

/* The slot follows the client's mark: Klinik's is tall and
   square-ish, Storm Group's long and low. */
.case-hero__brand {
  display: flex;
  align-items: center;
  height: var(--brand-slot, 3.125rem); /* the 50px logo slot */
  margin: 0;
  max-width: none;
  font-size: var(--brand-size, 1.875rem);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}

.case-hero--wide-brand {
  --brand-slot: 1.5rem;
  --brand-size: 1.25rem;
}

.case-hero__title {
  /* The design sets the line breaks by the column width, so the
     heading default of balancing the lines is off here. */
  text-wrap: wrap;
  font-family: var(--font-body);
  font-size: var(--text-case-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: -0.07em;
  color: #fff;
}

.case-hero__rule {
  width: 100%;
  height: 2px;
  margin: 0;
  border: 0;
  border-radius: 5px;
  background-color: rgb(255 255 255 / 0.67);
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  width: 90%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Intro: heading and lead left, the numbers right --------------
   Padding keeps the copy clear of the frame above and the panel
   below; the page's own grid ground shows through. */
.case-intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3.125rem;
}

.case-intro__grid {
  display: grid;
  grid-template-columns: 60% minmax(0, 1fr);
  gap: 4.125rem; /* 66px */
  align-items: start;
}

.case-intro__title {
  /* The two lead sentences that follow read as one block, so the
     only space in the column sits under the heading. */
  margin: 0 0 0.625rem;
  max-width: 36.25rem;
  font-family: var(--font-wordmark);
  font-size: var(--text-case-h1);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-snug);
  color: #fff;
}

.case-intro__lead {
  margin: 0;
  max-width: none;
  font-size: var(--text-case-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: #fff;
}

/* Storm Group sets its two lead sentences a blank line apart;
   Klinik's run together. */
.case-intro__lead--spaced {
  margin-top: 1.2em;
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 1rem;
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fact__value {
  margin: 0;
  max-width: none;
  font-size: var(--text-case-metric);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-snug);
  color: #fff;
}

.fact__label {
  margin-top: 0.25rem;
  max-width: 10.25rem; /* 164px */
  font-size: var(--text-case-fact);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: #fff;
}

/* --- Rules --------------------------------------------------------- */
.case-rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--case-rule);
}

.case-rule--light {
  height: 2px;
  border-radius: 100px;
  background-color: rgb(255 255 255 / 0.46);
}

/* --- Write-up panel ------------------------------------------------ */
.case-panel {
  position: relative;
  z-index: 1;
  width: 90%;
  margin-inline: auto;
  border: 1px solid #a3a3a3;
  border-radius: 1.25rem;
  background-color: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

.case-panel__inner {
  padding: 5.625rem 5.625rem 0 3.125rem;
}

.case-block {
  display: flex;
  flex-direction: column;
  gap: 2.375rem;          /* 38px above the closing rule */
  padding-bottom: 3.125rem;
}

.case-split {
  display: grid;
  grid-template-columns: minmax(0, 17.375rem) minmax(0, 1fr);
  align-items: start;
}

.case-label {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-om-label);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-snug);
  color: var(--color-accent);
}

.case-block__lead {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-case-block);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: -0.06em;
  color: var(--color-ink);
}

/* 30px of slack under the lead plus the column's own 10px gap. */
.case-block__lead + .case-prose {
  margin-top: 2.5rem;
}

.case-prose p {
  margin: 0;
  max-width: none;
  font-size: var(--text-om-body);
  font-weight: var(--weight-regular);
  line-height: 1.3;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

/* The design separates paragraphs by a blank line. */
.case-prose p + p {
  margin-top: 1.3em;
}

/* --- Inline screenshot --------------------------------------------- */
/* Two shots share the row and the single top margin. */
.case-shots {
  display: flex;
  gap: 2.25rem; /* 36px */
  margin-top: 1.25rem;
}

.case-shots .case-shot {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

.case-shot {
  width: 100%;
  margin: 1.25rem 0 0;
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow:
    0 0.0625rem 0.125rem rgb(0 0 0 / 0.28),
    0 0.5rem 1.25rem rgb(0 0 0 / 0.22),
    0 1.75rem 3.75rem rgb(0 0 0 / 0.18);
}

/* A shot can be a link to the live site. */
.case-shot a {
  display: block;
}

.case-shot img,
.case-shot__placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.82 / 1;
  object-fit: cover;
}

.case-shot__placeholder {
  background-color: #eeeeec;
  background-image: linear-gradient(to bottom, #c9d6cf 0 12%, #f5f5f3 12% 100%);
}

/* The footer runs the same terracotta as the page, so the two meet
   without a seam — as in the original. */
.page-case .site-footer {
  margin-top: 0;
}

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 75rem) {
  .case-panel__inner {
    padding: 3.5rem 2.5rem 0;
  }

  .case-split {
    grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
  }
}

@media (max-width: 60rem) {
  .case-main {
    padding-bottom: 4rem;
  }

  .case-hero {
    min-height: 0;
    padding: 14.375rem 1rem 3rem; /* 230px, as in the original */
  }

  .case-hero__card {
    width: auto;
    margin-left: 0;
    padding: 1.25rem;
  }

  .case-tags {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .case-intro {
    gap: 1.5rem;
    padding: 2rem 1rem;
  }

  .case-intro__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .case-facts {
    align-self: start;
  }

  .case-panel {
    width: 100%;
  }

  .case-panel__inner {
    padding: 1.5rem 1rem 0;
  }

  .case-block {
    gap: 1.5rem;
    padding-bottom: 2rem;
  }

  .case-split {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .case-block__lead + .case-prose {
    margin-top: 1.25rem;
  }

  .case-shots {
    flex-direction: column;
    gap: 1.25rem;
  }
}

/* =============================================================
   12. CASES INDEX
   The same two-up grid as the home page's cases block, but on the
   cream ground with the name set under the frame instead of over
   the photograph.
   ============================================================= */
.page-cases {
  /* Terracotta rules rather than the home page's warm grey ones. */
  background-image:
    repeating-linear-gradient(to right, rgb(199 83 55 / 0.15) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, rgb(199 83 55 / 0.15) 0 1px, transparent 1px var(--grid-size));
  background-position: var(--grid-offset) var(--grid-offset);
  --grid-spot-ink: rgb(199 83 55 / 0.6);
}

.cases-main {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  /* The top pad carries the floating nav's height as well as the
     70px the design leaves above the heading. */
  padding: 8.375rem 4.375rem 8rem;
}

.cases-index__title {
  margin: 0 0 2rem;
  max-width: 36.25rem;
  font-family: var(--font-wordmark);
  font-size: var(--text-cases-title);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.case-grid--index {
  gap: 4rem;
  margin-top: 0;
}

/* The frame grows inside the card on hover, so the name below it
   never moves. The figure clips and rounds its own photograph, so the
   card must not clip: `overflow: hidden` here would cut the descenders
   of the case name sitting under the frame. */
.case--index {
  border-radius: 1.25rem;
}

.case--index .case__figure {
  aspect-ratio: 1.3;
}

.case__label {
  margin: 0.75rem 0 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: var(--text-case-name);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

@media (max-width: 60rem) {
  .cases-main {
    padding: 7rem 1rem 4rem;
  }

  .case-grid--index {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}


/* =============================================================
   13. KONTAKT
   Pitch on the left, form on the right. The left column stays put
   while the form scrolls past it.
   ============================================================= */
.kontakt-main {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-bottom: 8rem;
}

.kontakt {
  /* 118px above the heading plus the floating nav's height. */
  padding: 11.35rem 3.125rem 3.125rem;
}

.kontakt__grid {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  gap: 4.125rem; /* 66px */
  align-items: start;
}

/* Holds its place while the form scrolls. */
.kontakt__intro {
  position: sticky;
  top: 5.625rem;
}

.kontakt__title {
  /* 30px inside the title block plus the column's own 10px gap. */
  margin: 0 0 0.625rem;
  padding-bottom: 1.875rem;
  max-width: 36.25rem;
  font-family: var(--font-heading);
  font-size: var(--text-kontakt-title);
  font-weight: var(--weight-bold);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.kontakt__lead {
  margin: 0;
  max-width: none;
  font-size: var(--text-kontakt-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
}

/* Separated by a blank line, as in the design. */
.kontakt__lead + .kontakt__lead {
  margin-top: 1.1em;
}

/* The second lead carries the stronger weight. */
.kontakt__lead--strong {
  font-weight: var(--weight-semibold);
}

/* --- Form ------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid #ffdb73;
  border-radius: 1.75rem;
  background-color: #fff;
  box-shadow:
    0 0.0375rem 0.0375rem -0.078rem rgb(0 0 0 / 0.18),
    0 0.143rem 0.143rem -0.156rem rgb(0 0 0 / 0.16),
    0 0.625rem 0.625rem -0.234rem rgb(0 0 0 / 0.06);
  transition: background-color 240ms cubic-bezier(0.44, 0, 0.56, 1),
              border-color 240ms cubic-bezier(0.44, 0, 0.56, 1);
}

/* After FormSubmit confirms a send, the whole card takes the house
   green so the state reads at a glance; it returns to rest as soon
   as the visitor starts writing again. */
.form--success {
  border-color: var(--color-green);
  background-color: var(--color-green-soft);
}

.form--success .field__input {
  border-color: rgb(63 107 71 / 0.35);
  background-color: #fff;
}

.form--success .form__status {
  color: var(--color-green);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* The message block carries the extra slack the design leaves
   before the actions. */
.field--message {
  padding-bottom: 1rem;
}

.field__label {
  font-size: var(--text-field);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-muted);
}

.field__input {
  width: 100%;
  height: 2.75rem; /* 44px */
  padding: 0 0.875rem;
  border: 1px solid #e8e8e8;
  border-radius: 0.625rem;
  background-color: #f9f9f9;
  color: #202020;
  font-family: var(--font-body);
  font-size: var(--text-field);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  transition: background-color 200ms cubic-bezier(0.44, 0, 0.56, 1),
              border-color 200ms cubic-bezier(0.44, 0, 0.56, 1);
}

.field__input--area {
  height: 9.875rem; /* 158px */
  padding: 0.875rem;
  resize: vertical;
}

.field__input::placeholder {
  color: #bbb;
}

.field__input:focus {
  outline: none;
  border-color: #ffdb73;
  background-color: #fff;
}

.form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.form__submit {
  width: 100%;
  height: 2.75rem;
  border: 0;
  border-radius: 0.75rem;
  background-color: var(--color-yellow);
  color: #4a3510;
  font-family: var(--font-body);
  font-size: var(--text-field);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.form__submit:hover {
  background-color: var(--color-yellow-hover);
}

.form__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.form__cta {
  margin: 0;
  max-width: none;
  font-size: 0.875rem; /* 14px */
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-muted);
  text-align: center;
}

.form__link {
  border-bottom: 1px dashed currentColor;
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.form__link:hover {
  border-bottom-style: solid;
}

/* Filled in by motion.js once the form is submitted. */
.form__status {
  margin: 0;
  max-width: none;
  font-size: 0.875rem;
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  text-align: center;
}

/* --- Responsive -------------------------------------------------- */
@media (max-width: 60rem) {
  .kontakt-main {
    padding-bottom: 4rem;
  }

  .kontakt {
    padding: 7.5rem 1rem 2rem;
  }

  .kontakt__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .kontakt__intro {
    position: static;
  }
}

/* =============================================================
   14. YDELSER
   The services page as a laboratory report: a split hero with a
   promise panel, a short introduction to what is being sold, and
   then one wide row per service — symbol and colour on the left,
   the write-up on the right. Each service carries the colour and
   the symbol its family has elsewhere on the site: amber for load
   time, terracotta for the buying flow, rust for traffic, teal for
   the technical work and ink for loyalty.
   ============================================================= */
.page-ydelser {
  --grid-spot-ink: rgb(199 83 55 / 0.6);
}

/* Shared line-icon settings; each context sizes the glyph. */
.glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A touch more weight for glyphs whose silhouette reads thin at size. */
.glyph--thick {
  stroke-width: 2.3;
}

/* Vector art supplied as solid shapes; currentColor keeps it on palette. */
.glyph-art {
  fill: currentColor;
  stroke: none;
}

/* --- Hero: the pitch left, the promise right ---------------------- */
.ydelser-hero {
  display: grid;
  /* The calculator panel takes the lion's share: 60% to the box,
     40% to the copy, so the panel can breathe. */
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  /* The promise panel runs the full height of the copy column. */
  align-items: stretch;
  padding-block: calc(var(--nav-height) + var(--nav-top) + 4.25rem) 1rem;
}

/* The headline fills the copy column: 21.4cqw of the intro makes the
   longest line land on the paragraph's edge at every width. */
.ydelser-hero__intro {
  container-type: inline-size;
}

.ydelser-hero__title {
  margin-top: 1.25rem;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 21.4cqw, 9rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
}

.ydelser-hero__lead {
  margin-top: 1.5rem;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  max-width: none;
  text-wrap: pretty;
}

.ydelser-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.ydelser-hero__note {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-ink-subtle);
  max-width: none;
}

/* The hero panel: a potentiale calculator, then the how-to path
   into the services further down the page. */
.promise {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem);
  border-radius: 1.75rem;
  background-color: var(--color-surface-raised);
  box-shadow:
    0 0.0375rem 0.0375rem -0.078rem rgb(0 0 0 / 0.18),
    0 0.625rem 1.875rem rgb(18 18 18 / 0.08);
}

/* On the home page the calculator stands on its own under the
   services, so the panel takes the cards' measure. */
.calculator {
  padding-block: 0 4.5rem;
}

.calculator .promise {
  max-width: 66.875rem;
}

.calc {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.calc__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.calc__fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* One compact row per control: label, slider, and an editable value. */
.calc__control {
  display: grid;
  grid-template-columns: auto minmax(5rem, 1fr) 6rem;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.calc__control .field__label {
  font-size: var(--text-caption);
  white-space: nowrap;
}

.calc__value {
  width: 100%;
  height: 2.25rem;
  padding-inline: 0.625rem;
  text-align: right;
  font-size: 0.9375rem;
}

.calc__lift {
  justify-self: end;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}

/* The slider fill is a registered custom property, so the track's
   gradient can tween from the dusty accent to the neon orange on
   hover. A gradient's colour stops cannot transition on their own;
   browsers without @property just swap the colour. The initial value
   mirrors --color-orange, the fill at rest. */
@property --calc-fill {
  syntax: "<color>";
  inherits: true;
  initial-value: #c75337;
}

/* The range is drawn as a 6px track with the accent as the fill and a
   white-ringed thumb, so it reads as part of the same design system. */
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 1.25rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --calc-fill: var(--color-accent);
  transition: --calc-fill 240ms ease;
}

/* Hover is the main event, but drag and keyboard get the same neon
   light, so the state reads on touch and without a pointer too. */
.calc__range:hover,
.calc__range:active,
.calc__range:focus-visible {
  --calc-fill: var(--color-orange-neon);
}

.calc__range::-webkit-slider-runnable-track {
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(to right,
      var(--calc-fill) 0 var(--fill, 50%),
      var(--color-track) var(--fill, 50%) 100%);
}

.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: -0.375rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: var(--calc-fill);
  box-shadow: 0 0.0625rem 0.1875rem rgb(18 18 18 / 0.25);
  transition: transform 240ms var(--ease-out-quint);
}

.calc__range:hover::-webkit-slider-thumb,
.calc__range:active::-webkit-slider-thumb,
.calc__range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.12);
}

.calc__range::-moz-range-track {
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-track);
}

.calc__range::-moz-range-progress {
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background-color: var(--calc-fill);
}

.calc__range::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: var(--calc-fill);
  box-shadow: 0 0.0625rem 0.1875rem rgb(18 18 18 / 0.25);
  transition: transform 240ms var(--ease-out-quint);
}

.calc__range:hover::-moz-range-thumb,
.calc__range:active::-moz-range-thumb,
.calc__range:focus-visible::-moz-range-thumb {
  transform: scale(1.12);
}

.calc__range:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0.125rem;
  border-radius: var(--radius-pill);
}

.calc__ticks {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  margin-top: -0.125rem;
  font-size: 0.6875rem;
  color: var(--color-ink-subtle);
}

/* Narrow phones: stack each control, label and value first, then the
   slider underneath, so nothing overflows the panel. */
@media (max-width: 32rem) {
  .calc__control {
    grid-template-columns: minmax(0, 1fr) 6rem;
  }

  .calc__control .field__label {
    white-space: normal;
  }

  .calc__value,
  .calc__lift {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .calc__range {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .calc__ticks {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

.calc__result {
  margin-top: 0.125rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background-color: var(--color-surface);
}

.calc__gain {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}

.calc__gain-label {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--color-ink-muted);
}

.calc__year {
  margin-top: 0.375rem;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

/* The how-to half sits on the panel's floor, so the box fills the
   height of the copy column without stretching awkwardly. */
.how {
  margin-top: auto;
  padding-top: 1.125rem;
  border-top: 1px solid var(--color-border);
}

.how__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.how__sub {
  margin-top: 0.25rem;
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-ink-subtle);
  max-width: none;
}

.how__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin: 0.625rem 0 0;
  padding: 0;
  list-style: none;
}

.how__chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding-inline: 0.625rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-accent);
  color: var(--color-accent);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}

.how__chip:hover {
  background-color: var(--color-accent);
  color: #fff;
}

/* --- Intro: what we do, and what can be bought ---------------------
   The write-up runs on the left with the symbol on its right as a
   statement illustration, sized well beyond the row glyphs. */
.ydelser-intro {
  padding-block: 4.5rem 0;
}

.ydelser-intro__body {
  margin-top: 2.5rem;
}

.ydelser-intro__lead {
  max-width: 72ch;
  font-size: var(--text-om-body);
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--color-ink-subtle);
}

/* --- Service rows: symbol left, write-up right --------------------- */
.services-list {
  padding-block: 2.5rem 1rem;
}

.svc {
  display: grid;
  grid-template-columns: minmax(0, 0.26fr) minmax(0, 0.74fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(3rem, 2.2rem + 2.8vw, 4.5rem);
  scroll-margin-top: 6rem;
}

.svc + .svc {
  border-top: 1px solid var(--color-border);
}

.svc__rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.svc__num {
  font-family: var(--font-numeral);
  font-size: var(--text-row-title);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: -0.07em;
  color: var(--cat-ink);
  max-width: none;
}

/* The symbol stands on its own: no tile and no background, just the
   category colour at a size that anchors the row. */
.svc__icon {
  color: var(--cat);
}

.svc__icon svg {
  width: clamp(3.5rem, 2.2rem + 3.2vw, 5.5rem);
  aspect-ratio: 1 / 1;
  height: auto;
}


.svc__title {
  font-family: var(--font-heading);
  font-size: var(--text-step-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.svc__lead {
  margin-top: 0.75rem;
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
  font-style: italic;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  max-width: none;
}

.svc__prose {
  margin-top: 1.25rem;
  font-size: var(--text-byline);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-ink-subtle);
  max-width: 68ch;
}

.svc__deliverables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.svc__deliverables li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.svc__deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--cat);
}

.svc__for {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-subtle);
  max-width: 68ch;
}

.svc__for strong {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

/* `--cat` is the symbol colour; `--cat-ink` is the same family
   darkened enough to carry text and chips on the cream ground. */
.svc--terracotta { --cat: var(--color-orange); --cat-ink: var(--color-orange); }
.svc--amber { --cat: var(--color-yellow); --cat-ink: #8a6a2e; }
.svc--rust { --cat: var(--color-red); --cat-ink: var(--color-red); }
.svc--teal { --cat: var(--color-blue); --cat-ink: var(--color-blue); }
.svc--ink { --cat: var(--color-ink); --cat-ink: var(--color-ink); }

/* --- Proof: the three result metrics ------------------------------- */
.ydelser-results {
  padding-block: 4.5rem 5rem;
}

.ydelser-results .metrics {
  margin-top: 2.5rem;
}

/* --- Signals: is this for you? ------------------------------------- */
.signals-wrap {
  padding-block: 4.5rem;
}

.signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2.5rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.signals li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-size: var(--text-byline);
  line-height: var(--leading-normal);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  max-width: none;
}

.signals svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  color: var(--color-accent);
}

/* --- Closing pitch ---------------------------------------------- */
.ydelser-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-block: 4.5rem 5.5rem;
  text-align: center;
}

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 60rem) {
  .ydelser-hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-block: calc(var(--nav-height) + var(--nav-top) + 3rem) 0;
  }

  /* One column: the headline now measures against the full-width
     intro, still filling about half of it. */
  .ydelser-hero__title {
    font-size: clamp(2.5rem, 10.74cqw, 6rem);
  }

  .svc {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-block: 3rem;
  }

  .svc__rail {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

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

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

/* =============================================================
   15. BLOG INDEX
   The cases index's frame, filled with editorial cards. The
   featured post runs as a full-width colour panel; the rest sit
   in a grid of covers. Each cover carries the artwork of its
   service family, so the blog reads as part of the same system.
   ============================================================= */
.page-blog {
  /* Terracotta rules, as on the cases index. */
  background-image:
    repeating-linear-gradient(to right, rgb(199 83 55 / 0.15) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, rgb(199 83 55 / 0.15) 0 1px, transparent 1px var(--grid-size));
  background-position: var(--grid-offset) var(--grid-offset);
  --grid-spot-ink: rgb(199 83 55 / 0.6);
}

.blog-main {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 8.375rem 4.375rem 6rem;
}

.blog-index__head {
  max-width: 48rem;
}

.blog-index__title {
  margin-top: 1.25rem;
  font-family: var(--font-wordmark);
  font-size: var(--text-cases-title);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.blog-index__lead {
  margin-top: 1.25rem;
  font-size: var(--text-om-body);
  font-weight: var(--weight-medium);
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--color-ink-subtle);
  max-width: 56ch;
}

/* --- Featured post ---------------------------------------------- */
.blog-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  margin-top: 3.5rem;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  border-radius: 1.5rem;
  background-color: var(--row-bg);
  box-shadow: inset -5px -5px 0 5px rgb(255 255 255 / 0.2);
  transition: transform 380ms var(--ease-out-quint),
              box-shadow 380ms var(--ease-out-quint),
              background-color 380ms var(--ease-out-quint);
}

.blog-feature--terracotta { --row-bg: var(--color-orange); --row-bg-hover: var(--color-orange-hover); }
.blog-feature--rust { --row-bg: var(--color-red); --row-bg-hover: var(--color-red-hover); }
.blog-feature--amber { --row-bg: var(--color-yellow); --row-bg-hover: var(--color-yellow-hover); }
.blog-feature--teal { --row-bg: var(--color-blue); --row-bg-hover: var(--color-blue-hover); }

.blog-feature:hover,
.blog-feature:focus-visible {
  background-color: var(--row-bg-hover);
  transform: translateY(-3px);
  box-shadow: inset -5px -5px 0 5px rgb(255 255 255 / 0.2),
              0 0.875rem 1.75rem rgb(74 53 16 / 0.18);
}

.blog-feature__body {
  min-width: 0;
  padding: 0.5rem 0;
}

.blog-feature__title {
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-size: var(--text-step-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: #fff;
}

.blog-feature__excerpt {
  margin-top: 1rem;
  font-size: var(--text-byline);
  line-height: var(--leading-normal);
  letter-spacing: -0.02em;
  color: rgb(255 255 255 / 0.82);
  max-width: 52ch;
}

.blog-feature .blog-card__meta {
  color: rgb(255 255 255 / 0.7);
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: var(--text-byline);
  font-weight: var(--weight-semibold);
  color: #fff;
  max-width: none;
}

.blog-card__more::after {
  content: "→";
  transition: transform 320ms var(--ease-out-quint);
}

.blog-feature:hover .blog-card__more::after,
.blog-feature:focus-visible .blog-card__more::after {
  transform: translateX(0.35rem);
}

/* --- Covers ------------------------------------------------------ */
.blog-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  background-color: var(--cover-bg);
  overflow: hidden;
}

.blog-cover img {
  width: 72%;
  height: auto;
  transition: transform 520ms var(--ease-out-quint);
}

/* On the featured panel the artwork sits directly on the colour. */
.blog-feature .blog-cover {
  --cover-bg: rgb(255 255 255 / 0.08);
}

.blog-feature:hover .blog-cover img,
.blog-feature:focus-visible .blog-cover img {
  transform: scale(1.05);
}

.blog-cover--amber { --cover-bg: var(--color-yellow); }
.blog-cover--terracotta { --cover-bg: var(--color-orange); }
.blog-cover--rust { --cover-bg: var(--color-red); }
.blog-cover--teal { --cover-bg: var(--color-blue); }

/* --- Post grid ---------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  margin-top: 3.5rem;
  padding: 0;
  list-style: none;
}

.blog-card {
  display: flex;
  flex-direction: column;
}

.blog-card .blog-cover {
  aspect-ratio: 16 / 11;
  border-radius: 1.25rem;
  transition: transform 520ms var(--ease-out-quint),
              box-shadow 520ms var(--ease-out-quint);
}

.blog-card:hover .blog-cover,
.blog-card:focus-visible .blog-cover {
  transform: scale(1.035) translateY(-6px);
  box-shadow: 0 1.5rem 3rem rgb(18 18 18 / 0.22);
}

.blog-card:hover .blog-cover img,
.blog-card:focus-visible .blog-cover img {
  transform: scale(1.06);
}

.blog-card__body {
  padding-top: 1.125rem;
}

.blog-card__title {
  margin-top: 0.875rem;
  font-family: var(--font-heading);
  font-size: var(--text-card-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.blog-card__excerpt {
  margin-top: 0.75rem;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: -0.02em;
  color: var(--color-ink-subtle);
  max-width: 44ch;
}

.blog-card__meta {
  margin-top: 1rem;
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-ink-subtle);
  max-width: none;
}

/* --- Closing call to action --------------------------------------- */
.blog-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 5rem;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border-radius: 1.5rem;
  background-color: var(--color-blue);
  color: #fff;
}

.blog-cta__lead {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: #fff;
  max-width: 28ch;
}

.blog-cta__note {
  margin-top: 0.625rem;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: rgb(255 255 255 / 0.78);
  max-width: 46ch;
}

@media (max-width: 75rem) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 60rem) {
  .blog-main {
    padding: 7rem 1rem 4rem;
  }

  .blog-feature {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin-top: 2.5rem;
  }

  .blog-cta {
    margin-top: 3rem;
  }
}

/* =============================================================
   16. BLOG POST
   The case page's reading experience: terracotta ground, a serif
   headline on the grid, and the write-up on a frosted panel with
   the label/copy split known from Om os and the cases. The word
   reveal on the prose is motion.js' `data-words`, exactly as the
   case write-ups use it.
   ============================================================= */
.page-blog-post {
  --nav-bar: rgb(194 194 194 / 0.3);
  --case-rule: #c2c2c2;
  /* Frosted over the grid, so the bar needs a heavier blur. */
  --nav-glass-blur: 24px;

  /* The page takes the colour of its subject area. The defaults
     below are the CRO pages' terracotta; each `post-cat--*` class
     swaps the whole ground — surface, rules, ink and frosted
     panels — so a performance article is amber and a loyalty
     article is ink. The write-up panel itself never changes
     (see .case-panel): it stays the same translucent white. */
  --post-bg: var(--color-accent);
  --post-grid: rgb(255 255 255 / 0.15);
  --post-ink: #fff;
  --post-ink-soft: rgb(255 255 255 / 0.9);
  --post-muted: rgb(255 255 255 / 0.7);
  --post-chip: var(--post-bg);
  --post-glass: rgb(255 255 255 / 0.12);
  --post-glass-hover: rgb(255 255 255 / 0.2);
  --post-spot: rgb(255 255 255 / 0.55);
  --post-cat-chip: var(--post-bg);
  --post-cat-ink: #fff;

  background-color: var(--post-bg);
  /* White rules instead of the home page's warm grey ones. */
  background-image:
    repeating-linear-gradient(to right, var(--post-grid) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, var(--post-grid) 0 1px, transparent 1px var(--grid-size));
  background-position: var(--grid-offset) var(--grid-offset);
  --grid-spot-ink: var(--post-spot);
}

/* --- Subject-area grounds ------------------------------------------
   The dusty surface of each family, with the page's own grid drawn
   in white. Amber is the light one: there the grid steps up and the
   ink inverts, so the page keeps the same contrast the amber cards
   have everywhere else in the design. */
.post-cat--rust { --post-bg: var(--color-red); }
.post-cat--teal { --post-bg: var(--color-blue); }
.post-cat--ink {
  --post-bg: var(--color-ink);
  --post-grid: rgb(255 255 255 / 0.12);
}

.post-cat--amber {
  --post-bg: var(--color-yellow);
  --post-grid: rgb(255 255 255 / 0.5);
  --post-ink: #4a3510;
  --post-ink-soft: rgb(74 53 16 / 0.86);
  --post-muted: rgb(74 53 16 / 0.7);
  --post-glass: rgb(74 53 16 / 0.08);
  --post-glass-hover: rgb(74 53 16 / 0.14);
  --post-spot: rgb(255 255 255 / 0.8);
  --post-cat-ink: #4a3510;
}

/* The footer runs the same terracotta as the page, so the two meet
   without a seam — as on the case pages. */
.page-blog-post .site-footer {
  margin-top: 0;
}

.post-main {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-bottom: 8rem;
}

/* --- Hero -------------------------------------------------------- */
.post-hero {
  /* Clears the sticky bar exactly as the home and om-os heroes do.
     The inline inset matches the write-up panel's 90% width, so the
     hero and the box under it share the same left and right edge. */
  padding: calc(var(--nav-height) + var(--nav-top) + var(--space-sm)) 5% 3.5rem;
}

.post-hero__crumb {
  margin-bottom: 0.875rem;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--post-muted);
  max-width: none;
}

.post-hero__crumb a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 200ms ease;
}

.post-hero__crumb a:hover {
  color: var(--post-ink);
}

.post-hero__cat {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px currentColor;
  background-color: var(--post-cat-chip);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--post-cat-ink);
  max-width: none;
}

.post-hero__title {
  margin-top: 1.5rem;
  max-width: 62rem;
  font-family: var(--font-heading);
  font-size: var(--text-case-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--post-ink);
  text-wrap: wrap;
}

.post-hero__lead {
  margin-top: 1.5rem;
  max-width: 64ch;
  font-size: var(--text-case-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--post-ink-soft);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.post-meta li {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  background-color: var(--post-chip);
  color: var(--post-ink);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  white-space: nowrap;
}

/* --- Write-up panel ----------------------------------------------- */
.post-panel {
  margin-top: 0.5rem;
}

/* The case panel's inner box ends on the closing rule; a post has
   to carry on past it. Its inset is also evened out: the case's
   inner box runs 90px on the right against 50px on the left, which
   makes the write-up read off-centre on the article pages. */
.post-panel__inner {
  padding-bottom: 4rem;
  padding-inline: 3.125rem;
}

/* In the article pages the rules sit between blocks rather than
   closing them, so the block after a rule carries the case
   write-up's inset itself. */
.post-panel .case-rule + .case-block {
  padding-top: 3.125rem;
}

/* --- Key takeaways ------------------------------------------------ */
.post-takeaways {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3.125rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 1.25rem;
  background-color: var(--takeaway-bg);
  color: var(--takeaway-ink);
}

.post-takeaways--amber { --takeaway-bg: var(--color-yellow); --takeaway-ink: #4a3510; }
.post-takeaways--terracotta { --takeaway-bg: var(--color-orange); --takeaway-ink: #fff; }
.post-takeaways--rust { --takeaway-bg: var(--color-red); --takeaway-ink: #fff; }
.post-takeaways--teal { --takeaway-bg: var(--color-blue); --takeaway-ink: #fff; }

.post-takeaways__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: inherit;
}

.post-takeaways ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 72ch;
}

.post-takeaways li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--text-om-body);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.post-takeaways li::before {
  content: "→";
  position: absolute;
  left: 0;
  opacity: 0.7;
}

/* --- Read next ----------------------------------------------------- */
.post-next {
  padding: 3.5rem 3.125rem 0;
}

.post-next__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--post-ink);
}

.post-next__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3125rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.post-mini {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background-color: var(--post-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--post-ink);
  transition: background-color 320ms ease,
              transform 320ms var(--ease-out-quint);
}

.post-mini:hover,
.post-mini:focus-visible {
  background-color: var(--post-glass-hover);
  transform: translateY(-3px);
}

.post-mini__cat {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--post-muted);
  max-width: none;
}

.post-mini__title {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--post-ink);
}

/* --- Closing call to action ---------------------------------------- */
.post-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 3.5rem 3.125rem 0;
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  border-radius: 1.5rem;
  background-color: var(--post-glass);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

.post-cta__lead {
  font-family: var(--font-heading);
  font-size: var(--text-case-block);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.06em;
  color: var(--post-ink);
  max-width: 30ch;
}

.post-cta__note {
  margin-top: 0.75rem;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--post-muted);
  max-width: 46ch;
}

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 75rem) {
  .post-hero {
    padding: 12rem 5% 3rem;
  }

  .post-panel__inner {
    padding-inline: 2.5rem;
  }

  .post-next {
    padding: 3rem 2rem 0;
  }

  .post-cta {
    margin: 3rem 2rem 0;
  }
}

@media (max-width: 60rem) {
  .post-main {
    padding-bottom: 4rem;
  }

  .post-hero {
    padding: 9rem 1rem 2.25rem;
  }

  .post-panel {
    width: 100%;
  }

  .post-panel__inner {
    padding-bottom: 2rem;
    padding-inline: 1rem;
  }

  .post-takeaways {
    margin-top: 2rem;
  }

  .post-next {
    padding: 2.5rem 1rem 0;
  }

  .post-next__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .post-cta {
    margin: 2.5rem 1rem 0;
  }
}

/* =============================================================
   17. BLOG: EMNEKATEGORIER OG ARTIKEL-ELEMENTER
   The editorial layer. Each of the five subject areas gets one
   colour from the brand palette — terracotta, amber, rust, teal
   and ink — and that colour runs through the category head, the
   typographic cover, the key-takeaway panel and the examples.
   No photography: the covers are type and colour, so the topics
   are told apart by the same system the rest of the site uses.
   ============================================================= */

/* --- Category filter chips --------------------------------------- */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 3rem;
}

.blog-cats__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding-inline: 1.125rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--cat-ink);
  background-color: var(--color-surface);
  color: var(--cat-ink);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}

.blog-cats__chip:hover,
.blog-cats__chip:focus-visible {
  background-color: var(--cat-ink);
  color: #fff;
}

.blog-cats__chip--terracotta { --cat-ink: var(--color-orange); }
.blog-cats__chip--amber { --cat-ink: #8a6a2e; }
.blog-cats__chip--rust { --cat-ink: var(--color-red); }
.blog-cats__chip--teal { --cat-ink: var(--color-blue); }
.blog-cats__chip--ink { --cat-ink: var(--color-ink); }

/* --- Category section -------------------------------------------- */
.blog-cat {
  padding-block: 4.5rem 0;
  /* Anchors from the chip row should land clear of the sticky bar. */
  scroll-margin-top: 6rem;
}

.blog-cat__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-cat__title {
  /* Same build as .section-head, coloured by the topic. */
  font-family: var(--font-body);
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--cat-ink);
  -webkit-text-stroke: 0.5px var(--cat-ink);
}

.blog-cat__dot {
  font-size: calc(var(--text-h4) * 0.5);
  line-height: var(--leading-snug);
  color: var(--cat-ink);
}

.blog-cat__rule {
  flex: 1;
  height: var(--line-weight);
  border-radius: var(--radius-pill);
  background-color: var(--cat-ink);
  transform-origin: left center;
}

.blog-cat--terracotta { --cat-ink: var(--color-orange); }
.blog-cat--amber { --cat-ink: #8a6a2e; }
.blog-cat--rust { --cat-ink: var(--color-red); }
.blog-cat--teal { --cat-ink: var(--color-blue); }
.blog-cat--ink { --cat-ink: var(--color-ink); }

/* Two cards per category, so the grid narrows to a pair. */
.blog-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- Typographic covers ------------------------------------------
   No images: the number and the micro-topic, set on the category
   colour with the page's own rule grid showing through. The pair
   sits in the cover's upper part rather than on its centre line. */
.blog-cover--type {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.625rem;
  padding-top: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  background-image: repeating-linear-gradient(to right, rgb(255 255 255 / 0.16) 0 1px, transparent 1px 3rem);
  background-position: 1.5rem 0;
}

.blog-cover--amber.blog-cover--type {
  background-image: repeating-linear-gradient(to right, rgb(74 53 16 / 0.18) 0 1px, transparent 1px 3rem);
}

.blog-cover__num {
  font-family: var(--font-wordmark);
  font-size: clamp(3.25rem, 2rem + 5vw, 6rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--cover-ink, #fff);
}

.blog-cover__label {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cover-ink, #fff);
  opacity: 0.72;
  max-width: none;
}

.blog-cover--amber { --cover-ink: #4a3510; }
.blog-cover--ink { --cover-bg: var(--color-ink); --cover-ink: var(--color-surface); }

/* --- Archive row -------------------------------------------------- */
.blog-archive {
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.blog-archive__title {
  font-family: var(--font-body);
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-subtle);
}

.blog-archive__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 2rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.blog-archive__list a {
  font-size: var(--text-body);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-ink) 30%, transparent);
  text-underline-offset: 0.2em;
  transition: color 200ms ease;
}

.blog-archive__list a:hover {
  color: var(--color-accent-strong);
}

@media (max-width: 60rem) {
  .blog-grid--2 {
    grid-template-columns: 1fr;
  }

  .blog-cat {
    padding-block: 3rem 0;
  }

  .blog-archive {
    margin-top: 3rem;
  }
}

/* --- Article elements ---------------------------------------------
   The article body is the case write-up's prose, extended with
   sub-headings, lists and scenario boxes. Paragraphs keep the
   word-by-word reveal; headings and lists stay in full ink. */
.case-prose h3 {
  margin-top: 1.75em;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.case-prose h3:first-child {
  margin-top: 0;
}

.case-prose ul,
.case-prose ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.125em;
  padding-left: 1.375rem;
  max-width: 68ch;
}

.case-prose li {
  font-size: var(--text-om-body);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.case-prose li::marker {
  color: var(--color-accent);
}

/* --- Scenario box -------------------------------------------------- */
.post-example {
  margin-top: 1.75rem;
  padding: 1.5rem 1.75rem;
  border-left: 0.25rem solid var(--example-accent);
  border-radius: 0 0.875rem 0.875rem 0;
  background-color: color-mix(in srgb, var(--example-accent) 8%, #fff);
  max-width: 68ch;
}

.post-example__title {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--example-accent) 78%, #000);
  max-width: none;
}

.post-example p {
  margin-top: 0.75rem;
  font-size: var(--text-om-body);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  max-width: none;
}

.post-example--terracotta { --example-accent: var(--color-orange); }
.post-example--amber { --example-accent: #d99a2b; }
.post-example--rust { --example-accent: var(--color-red); }
.post-example--teal { --example-accent: var(--color-blue); }
.post-example--ink { --example-accent: var(--color-ink); }

/* --- Category chip in the article hero -----------------------------
   The chip follows the article's ground: a solid light pill carrying
   the topic colour on the dark grounds, and an ink pill on amber.
   The colours come from --post-cat-chip / --post-cat-ink, which each
   post-cat--* theme sets alongside its ground. */

/* --- Ink key takeaways --------------------------------------------- */
.post-takeaways--ink {
  --takeaway-bg: var(--color-ink);
  --takeaway-ink: var(--color-surface);
}

/* --- Article figures ------------------------------------------------
   Images inserted through the CMS. Explicit width/height attributes
   are published alongside so the space is reserved before load. */
.post-figure {
  margin-top: 1.75rem;
  max-width: 68ch;
}

.post-figure img {
  width: 100%;
  height: auto;
  border-radius: 0.875rem;
  border: 1px solid var(--color-border);
}

.post-figure figcaption {
  margin-top: 0.625rem;
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-ink-subtle);
}