@charset "UTF-8";

/* ============================================================
   Lexon GmbH, direction C "Grossformat"
   Bricolage Grotesque for headlines, Instrument Sans for body text,
   IBM Plex Mono for labels. Colours taken from the logo.
   The fonts are self-hosted in this directory, Google Fonts is not
   embedded, so no data protection question arises.

   COLOUR SCHEME
   Three states: without the attribute the page follows the operating
   system, with data-theme="light" or "dark" the toggle decides. That is
   why the order below matters: first the light values on :root, then the
   dark ones for the system setting (but only when light was not chosen
   explicitly), then the dark ones for the explicit choice. Colours live
   in these three blocks only, never directly in a rule.
   ============================================================ */

@font-face{
  font-family:"Bricolage";
  src:url("../fonts/bricolage-var.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument";
  src:url("../fonts/instrument-var.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PlexMono";
  src:url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PlexMono";
  src:url("../fonts/plexmono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ------------------------------------------------------- Light scheme */
:root{
  color-scheme:light;

  /* Brand, unchanged in both schemes */
  --navy:#08384d;
  --blue:#187aaa;
  --cyan:#0ca4da;

  /* Type. 80 % black instead of pure black, which reads too hard against
     the light ground. */
  --ink:#343d43;
  --ink-2:#334a54;
  --ink-3:#57737f;

  /* The logo blue only reaches about 3,3:1 on a grey ground and is too weak
     for body text. These two values stay in the brand family and meet 4,5:1
     even at the darkest point of the gradient.
     --blue-deep is the same value as the ground of the reference band. As a
     type colour it carries links, the featured service, the key figures and
     the current page in the navigation, tying them back to that band. */
  --blue-text:#146080;
  --blue-deep:#0e3170;

  /* Accent for decorative elements and the highlight in the headline.
     Slightly darker than the pure logo cyan, which falls below 3:1 on white. */
  --accent:#0b8fc4;
  --accent-text:#04222e;

  /* Surfaces */
  --surface:#ffffff;                    /* cards, footer */
  --tint:rgba(255,255,255,.58);         /* set-off sections */
  --chip-bg:rgba(255,255,255,.8);       /* small labels */
  --header-bg:rgba(255,255,255,.82);      /* header bar, translucent */
  --header-bg-solid:#ffffff;               /* header bar without backdrop-filter */
  --ground:#f2efec;
  --border:#343d43;                     /* the heavy 2px borders */
  --rule:#e2dcd6;                      /* fine dividers */
  --focus:#125670;

  /* Inverted: buttons and the hover state of the job rows */
  --invert-bg:#343d43;
  --invert-text:#ffffff;
  --invert-muted:#8fd3ef;

  /* Closing band */
  --cta-bg:#0ca4da;
  --cta-text:#04222e;
  --cta-label:#1c4655;

  /* Reference band. Deliberately a pure blue without green, not the
     teal-leaning logo navy #08384d. */
  --band-bg:#0e3170;
  --band-text:#ffffff;
  --band-label:#93c2ec;

  /* Page ground: three steps of greige, that is warm grey. Same lightness as
     a neutral grey, only the temperature turns warm. The ground now stands
     opposite the cool brand blue instead of repeating it.
     The washes in the gradient had to move along: bottom right now carries a
     warm shadow instead of the navy, top right keeps a faint cyan trace so the
     brand still sounds through the ground. */
  --gray-1:#f5f3f1;
  --gray-2:#eae6e2;
  --gray-3:#ded8d3;
  --gradient:
    radial-gradient(72rem 48rem at 6% -14%,  rgba(255,255,255,.94), rgba(255,255,255,0) 58%),
    radial-gradient(54rem 40rem at 99% 4%,   rgba(12,164,218,.07),  rgba(12,164,218,0)  56%),
    radial-gradient(66rem 56rem at 92% 108%, rgba(90,72,56,.10),    rgba(90,72,56,0)    64%),
    linear-gradient(166deg, var(--gray-1) 0%, var(--gray-2) 42%, var(--gray-3) 100%);

  --width:1200px;
  --gutter:clamp(18px, 4.5vw, 56px);
  --radius:14px;
  --radius-pill:999px;
}

/* --------------------------------------------------------- Dark scheme
   Once for the system setting, once for the explicit choice.
   The content of both blocks is identical.

   As in the light scheme the ground is warm rather than blue: the blue-black
   became a warm near-black. Because cards, borders and rules would otherwise
   sit teal-tinged on a brown ground, they move along. Blue stays where it is
   brand: accent, button band and reference band. Against the warm ground they
   stand out more clearly than before. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --ink:#ece7e0;
    --ink-2:#c9c1b7;
    --ink-3:#9d948a;

    --blue-text:#63c3e8;
    /* Lightened band blue, same hue as #0e3170. */
    --blue-deep:#8ab4e8;

    --accent:#3fbfe8;
    --accent-text:#04222e;

    --surface:#211d19;
    --tint:rgba(235,215,190,.05);
    --chip-bg:rgba(235,215,190,.08);
    --header-bg:rgba(18,15,13,.82);
    --header-bg-solid:#15120f;
    --ground:#2a2521;
    --border:#4a4038;
    --rule:#2c2621;
    --focus:#6ccbee;

    --invert-bg:#eae3da;
    --invert-text:#231e1a;
    --invert-muted:#6b6157;

    --cta-bg:#0d5f7e;
    --cta-text:#eaf6fb;
    --cta-label:#9ad6ef;

    --band-bg:#123a80;
    --band-text:#ffffff;
    --band-label:#a3cdf2;

    --gray-1:#1b1815;
    --gray-2:#131110;
    --gray-3:#0b0908;
    --gradient:
      radial-gradient(72rem 48rem at 6% -14%,  rgba(225,200,170,.12), rgba(225,200,170,0) 58%),
      radial-gradient(54rem 40rem at 99% 4%,   rgba(12,164,218,.10),  rgba(12,164,218,0)  56%),
      radial-gradient(66rem 56rem at 92% 108%, rgba(0,0,0,.5),        rgba(0,0,0,0)       64%),
      linear-gradient(166deg, var(--gray-1) 0%, var(--gray-2) 42%, var(--gray-3) 100%);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;

  --ink:#ece7e0;
  --ink-2:#c9c1b7;
  --ink-3:#9d948a;

  --blue-text:#63c3e8;
  /* Lightened band blue, same hue as #0e3170. */
  --blue-deep:#8ab4e8;

  --accent:#3fbfe8;
  --accent-text:#04222e;

  --surface:#211d19;
  --tint:rgba(235,215,190,.05);
  --chip-bg:rgba(235,215,190,.08);
  --header-bg:rgba(18,15,13,.82);
  --header-bg-solid:#15120f;
  --ground:#2a2521;
  --border:#4a4038;
  --rule:#2c2621;
  --focus:#6ccbee;

  --invert-bg:#eae3da;
  --invert-text:#231e1a;
  --invert-muted:#6b6157;

  --cta-bg:#0d5f7e;
  --cta-text:#eaf6fb;
  --cta-label:#9ad6ef;

  --band-bg:#123a80;
  --band-text:#ffffff;
  --band-label:#a3cdf2;

  --gray-1:#1b1815;
  --gray-2:#131110;
  --gray-3:#0b0908;
  --gradient:
    radial-gradient(72rem 48rem at 6% -14%,  rgba(225,200,170,.12), rgba(225,200,170,0) 58%),
    radial-gradient(54rem 40rem at 99% 4%,   rgba(12,164,218,.10),  rgba(12,164,218,0)  56%),
    radial-gradient(66rem 56rem at 92% 108%, rgba(0,0,0,.5),        rgba(0,0,0,0)       64%),
    linear-gradient(166deg, var(--gray-1) 0%, var(--gray-2) 42%, var(--gray-3) 100%);
}

/* ------------------------------------------------------------------ Base */
*,*::before,*::after{box-sizing:border-box}

/* The gradient sits on <html> so it fills the browser canvas and does not
   scroll along. Four layers: a grazing light top left, a cool cyan hint on the
   right, some depth bottom right and the base gradient underneath. */
html{
  -webkit-text-size-adjust:100%;
  background-color:var(--gray-2);
  background-image:var(--gradient);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:"Instrument",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(16px,.4vw + 15px,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit}

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--invert-bg);color:var(--invert-text);padding:12px 20px;border-radius:0 0 10px 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

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

.wrap{max-width:var(--width);margin-inline:auto;padding-inline:var(--gutter)}

/* ------------------------------------------------------------ Typography */
.display{
  font-family:"Bricolage",sans-serif;
  font-optical-sizing:auto;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.98;
  text-wrap:balance;
}

.label{
  font-family:"PlexMono",ui-monospace,monospace;
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-text);
}

.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);line-height:1.6;max-width:56ch}

/* -------------------------------------------------------------- Buttons */
.button{
  display:inline-block;
  font-weight:700;font-size:.95rem;line-height:1;
  padding:16px 28px;border-radius:var(--radius-pill);
  background:var(--invert-bg);color:var(--invert-text);text-decoration:none;
  border:2px solid var(--invert-bg);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.button:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-text);transform:translateY(-1px)}
.button--ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.button--ghost:hover{background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-text)}
.button--small{padding:11px 19px;font-size:.85rem}
.button-row{display:flex;flex-wrap:wrap;gap:12px}

/* -------------------------------------------------------------- Header */
.header{position:sticky;top:0;z-index:100;background:var(--header-bg-solid);border-bottom:2px solid var(--border)}
/* Slightly translucent, so the gradient stays visible behind the bar.
   Without support for backdrop-filter it falls back to the opaque surface. */
@supports (backdrop-filter:blur(2px)){
  .header{background:var(--header-bg);backdrop-filter:blur(14px) saturate(1.3)}
}
.header__inner{
  max-width:var(--width);margin-inline:auto;padding:14px var(--gutter);
  display:flex;align-items:center;gap:16px;
}
.header__logo{flex:none;display:block}
.header__logo img{width:118px;height:auto}
.header__nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.header__nav ul{display:flex;gap:24px}
.header__nav a{text-decoration:none;font-weight:600;font-size:.95rem;position:relative;padding-block:4px}
.header__nav ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.header__nav ul a:hover::after,
.header__nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.header__nav ul a[aria-current="page"]{color:var(--blue-deep)}

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

/* Toggle for the colour scheme. Deliberately restrained: an icon without
   border and without surface. Whoever needs it will find it; everyone else
   should not read it as a control of the first order. */
.theme{
  width:36px;height:36px;flex:none;
  display:inline-grid;place-items:center;padding:0;
  background:transparent;border:0;border-radius:9px;
  cursor:pointer;color:var(--ink-3);
  transition:background .18s ease,color .18s ease;
}
.theme:hover{background:var(--chip-bg);color:var(--ink)}
.theme__icon{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.header__toggle{
  display:none;
  width:46px;height:40px;background:transparent;border:2px solid var(--border);
  border-radius:10px;cursor:pointer;position:relative;
}
.header__toggle-bar,
.header__toggle-bar::before,
.header__toggle-bar::after{
  position:absolute;left:50%;width:20px;height:2px;background:var(--ink);
  transform:translateX(-50%);transition:transform .2s ease,opacity .2s ease;
}
.header__toggle-bar{top:50%;margin-top:-1px}
.header__toggle-bar::before{content:"";top:-6px;left:0;transform:none}
.header__toggle-bar::after{content:"";top:6px;left:0;transform:none}
.header__toggle[aria-expanded="true"] .header__toggle-bar{background:transparent}
.header__toggle[aria-expanded="true"] .header__toggle-bar::before{transform:translateY(6px) rotate(45deg)}
.header__toggle[aria-expanded="true"] .header__toggle-bar::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .header__toggle{display:block}
  .header__tools{margin-left:auto}
  .header__nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--header-bg-solid);border-bottom:2px solid var(--border);
    padding:10px var(--gutter) 22px;
  }
  .header__nav.is-open{display:flex}
  .header__nav ul{flex-direction:column;gap:0}
  .header__nav ul a{display:block;padding:14px 0;border-bottom:1px solid var(--rule);font-size:1.05rem}
  .header__nav ul a::after{display:none}
  .header__cta{margin-top:18px;text-align:center}
}

/* Logo: the matching version per colour scheme. The wordmark is black or
   white, a single image cannot be both. */
.logo-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="light"] .logo-light{display:block}
:root[data-theme="light"] .logo-dark{display:none}

/* ---------------------------------------------------------------- Hero */
.hero{padding:clamp(36px,6vw,84px) 0 0}
.hero h1{
  font-size:clamp(2.6rem,9vw,6.8rem);
  font-weight:800;letter-spacing:-.045em;line-height:.9;
  margin-top:18px;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__bottom{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3.6vw,52px);align-items:end;
  margin-top:clamp(26px,3.6vw,44px);padding-bottom:clamp(32px,5vw,60px);
}
@media (max-width:860px){.hero__bottom{grid-template-columns:1fr;align-items:start;gap:26px}}

/* ----------------------------------------------------- Reference band */
.band{background:var(--band-bg);color:var(--band-text);padding:clamp(26px,4vw,46px) 0}
.band__inner{
  max-width:var(--width);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,42px);
}
.band .label{color:var(--band-label)}
.band ul{display:flex;flex-wrap:wrap;gap:clamp(16px,2.8vw,36px);align-items:center}
.band li{
  font-family:"Bricolage",sans-serif;font-weight:700;
  font-size:clamp(1.05rem,2vw,1.55rem);letter-spacing:-.02em;opacity:.88;
}

/* -------------------------------------------------------------- Sections */
/* scroll-margin, so the sticky header does not cover the start of a section
   when jumping to #leistungen. */
.section{padding-block:clamp(46px,7vw,96px);scroll-margin-top:84px}
/* A lightened band instead of a solid fill: the gradient stays visible all
   the way through and the section still sets itself apart. */
.section--tint{background:var(--tint);border-block:1px solid var(--rule)}
.section__head{max-width:64ch}
.section h2{
  font-family:"Bricolage",sans-serif;font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.038em;line-height:.98;
  margin-top:14px;text-wrap:balance;
}
.section__head p{margin-top:16px;color:var(--ink-2);font-size:clamp(1rem,1.4vw,1.15rem);max-width:56ch}

.section__row{
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:18px;
}

/* ----------------------------------------------------------- Service list */
.services{margin-top:clamp(28px,4vw,52px);border-top:2px solid var(--border)}
.service{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
  gap:clamp(14px,3vw,44px);
  padding-block:clamp(22px,2.8vw,34px);
  border-bottom:1px solid var(--rule);
}
@media (max-width:820px){.service{grid-template-columns:1fr;gap:10px}}
.service h3{
  font-family:"Bricolage",sans-serif;font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.032em;line-height:1.05;
}
.service--featured h3{color:var(--blue-deep)}
.service p{color:var(--ink-2);max-width:58ch}
.service__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.service__tags li{
  font-family:"PlexMono",monospace;font-size:.7rem;letter-spacing:.03em;
  color:var(--ink-2);background:var(--chip-bg);border:1px solid var(--rule);
  border-radius:6px;padding:6px 10px;
}

/* ------------------------------------------------------------- Job rows */
.jobs{margin-top:clamp(22px,3vw,34px);display:grid;gap:12px}
.job-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:clamp(18px,2.4vw,26px) clamp(16px,2.2vw,26px);
  border:2px solid var(--border);border-radius:var(--radius);
  background:var(--surface);text-decoration:none;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.job-row:hover{background:var(--invert-bg);color:var(--invert-text);transform:translateX(5px)}
.job-row h3{
  font-family:"Bricolage",sans-serif;font-weight:700;
  font-size:clamp(1.1rem,2.1vw,1.45rem);letter-spacing:-.03em;line-height:1.15;
  flex:1 1 260px;
}
.job-row__meta{display:flex;flex-wrap:wrap;gap:8px 18px}
.job-row__meta span{font-family:"PlexMono",monospace;font-size:.72rem;color:var(--ink-3)}
.job-row:hover .job-row__meta span{color:var(--invert-muted)}
.job-row__arrow{font-size:1.3rem;color:var(--accent);margin-left:auto;line-height:1}

.jobs-empty{
  margin-top:26px;padding:clamp(26px,4vw,42px);border:2px dashed var(--rule);
  border-radius:var(--radius);background:var(--tint);
}
.jobs-empty h3{font-family:"Bricolage",sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-.03em}
.jobs-empty p{margin-top:10px;color:var(--ink-2);max-width:54ch}

/* ------------------------------------------------------------- Job page */
.job-head{padding:clamp(30px,5vw,64px) 0 clamp(24px,3.4vw,40px);border-bottom:1px solid var(--rule)}
.job-head h1{
  font-family:"Bricolage",sans-serif;font-weight:800;
  font-size:clamp(2rem,5.4vw,3.9rem);letter-spacing:-.042em;line-height:.96;
  margin-top:14px;text-wrap:balance;
}
.job-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.job-facts li{
  font-family:"PlexMono",monospace;font-size:.76rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:9px 14px;
}
.job-facts li b{font-weight:500;color:var(--blue-deep)}

.job-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(28px,4vw,64px);
  padding-block:clamp(32px,4.6vw,60px);align-items:start;
}
@media (max-width:940px){.job-grid{grid-template-columns:1fr}}

.job-page{
  position:sticky;top:96px;background:var(--surface);
  border:2px solid var(--border);border-radius:var(--radius);padding:24px;
}
@media (max-width:940px){.job-page{position:static}}
.job-page h2{font-family:"Bricolage",sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.03em;margin-top:10px;line-height:1.1}
.job-page p{margin-top:12px;color:var(--ink-2);font-size:.95rem}
.job-page .button{margin-top:18px;width:100%;text-align:center}

/* Body text from Markdown */
.prose{max-width:66ch}
.prose h2{
  font-family:"Bricolage",sans-serif;font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.85rem);letter-spacing:-.032em;line-height:1.08;
  margin-top:2em;
}
.prose h3{
  font-family:"Bricolage",sans-serif;font-weight:700;
  font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.028em;margin-top:1.7em;
}
.prose h4{font-weight:700;font-size:1.05rem;margin-top:1.5em}
.prose > :first-child{margin-top:0}
.prose p{margin-top:1em;color:var(--ink-2)}
.prose ul,.prose ol{margin-top:1em;display:grid;gap:.6em}
.prose li{position:relative;padding-left:1.6em;color:var(--ink-2)}
.prose ul > li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;background:var(--accent);border-radius:2px;
}
.prose ol{counter-reset:pos}
.prose ol > li::before{
  counter-increment:pos;content:counter(pos) ".";
  position:absolute;left:0;top:0;
  font-family:"PlexMono",monospace;font-size:.85em;color:var(--blue-deep);
}
.prose strong{color:var(--ink);font-weight:700}
.prose code{
  font-family:"PlexMono",monospace;font-size:.88em;
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;padding:2px 6px;
}
.prose a{color:var(--blue-deep);text-decoration-thickness:2px;text-underline-offset:3px}
.prose hr{margin-top:2em;border:0;border-top:1px solid var(--rule)}

/* --------------------------------------------------------------- Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:clamp(26px,3.6vw,44px)}

/* Five cards do not work out in an even grid: with four columns a single
   card is left standing in the second row. Hence a grid of six columns, in
   which the first three cards take two columns each and the last two take
   three each. That gives 3 + 2 across the full width. */
.cards--five{grid-template-columns:repeat(6,minmax(0,1fr))}
.cards--five > *{grid-column:span 2}
.cards--five > :nth-child(4),
.cards--five > :nth-child(5){grid-column:span 3}

/* Six cards: three and three, instead of four and two. */
.cards--six{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:900px){
  .cards--five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--five > *,
  .cards--five > :nth-child(4){grid-column:span 1}
  .cards--five > :nth-child(5){grid-column:span 2}
  .cards--six{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .cards--five,
  .cards--six{grid-template-columns:1fr}
  .cards--five > *,
  .cards--five > :nth-child(4),
  .cards--five > :nth-child(5){grid-column:span 1}
}
.card{border:2px solid var(--border);border-radius:var(--radius);padding:clamp(20px,2.4vw,28px);background:var(--surface)}
.card h3{font-family:"Bricolage",sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.03em;margin-top:12px;line-height:1.1}
.card p{margin-top:10px;color:var(--ink-2);font-size:.95rem}
.card__number{
  font-family:"Bricolage",sans-serif;font-weight:800;
  font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:-.04em;line-height:1;color:var(--blue-deep);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------- Reference list */
.references{display:grid;gap:14px;margin-top:clamp(26px,3.6vw,44px)}
.reference{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(14px,3vw,40px);
  border:2px solid var(--border);border-radius:var(--radius);padding:clamp(20px,2.6vw,30px);
  background:var(--surface);
}
@media (max-width:820px){.reference{grid-template-columns:1fr;gap:10px}}
.reference h3{font-family:"Bricolage",sans-serif;font-weight:700;font-size:clamp(1.3rem,2.6vw,1.8rem);letter-spacing:-.032em;line-height:1.05}
.reference p{color:var(--ink-2)}
.reference__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.reference__tags li{
  font-family:"PlexMono",monospace;font-size:.7rem;color:var(--ink-2);
  background:var(--ground);border:1px solid var(--rule);border-radius:6px;padding:6px 10px;
}

/* -------------------------------------------------------------- Contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:clamp(26px,3.6vw,44px)}
/* Six cards on the contact page: three and three instead of four and two. */
.contact-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.contact-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.contact-grid--three{grid-template-columns:1fr}}
.contact-card{
  border:2px solid var(--border);border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);background:var(--surface);
}
.contact-card h3{font-family:"Bricolage",sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.03em;margin-top:10px}
.contact-card p,.contact-card address{margin-top:12px;color:var(--ink-2);font-style:normal}
.contact-card a{color:var(--blue-deep);font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}
.contact-card__role{font-family:"PlexMono",monospace;font-size:.72rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

/* ------------------------------------------------------------ Closing CTA */
.closing{background:var(--cta-bg);color:var(--cta-text);padding-block:clamp(44px,7vw,92px)}
.closing h2{
  font-family:"Bricolage",sans-serif;font-weight:800;
  font-size:clamp(2rem,5.6vw,3.9rem);letter-spacing:-.042em;line-height:.95;
  margin-top:14px;max-width:17ch;text-wrap:balance;
}
.closing .label{color:var(--cta-label)}
.closing__row{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,52px);
  align-items:end;justify-content:space-between;margin-top:clamp(24px,3.2vw,40px);
}
.closing p{font-size:1.05rem;max-width:44ch;line-height:1.55}
.closing__box{font-family:"PlexMono",monospace;font-size:.9rem;display:grid;gap:8px}
.closing__box a{font-weight:500;text-decoration-thickness:2px;text-underline-offset:3px}

/* -------------------------------------------------------------- Footer */
.footer{background:var(--surface);color:var(--ink-2);padding-top:clamp(40px,5.5vw,70px);border-top:2px solid var(--border)}
.footer__inner{
  max-width:var(--width);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,48px);
}
@media (max-width:880px){.footer__inner{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__inner{grid-template-columns:1fr}}
.footer__brand img{width:132px}
.footer__brand p{margin-top:16px;font-size:.95rem;max-width:34ch;color:var(--ink-2)}
.footer h2{
  font-family:"PlexMono",monospace;font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-text);
}
.footer__col ul{margin-top:14px;display:grid;gap:9px}
.footer__col a{text-decoration:none;font-size:.95rem}
.footer__col a:hover{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.footer address{margin-top:14px;font-style:normal;font-size:.95rem;line-height:1.6}
.footer__bottom{
  max-width:var(--width);margin-inline:auto;padding:26px var(--gutter) 30px;
  margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  font-size:.85rem;color:var(--ink-3);
}
.footer__bottom p{display:flex;flex-wrap:wrap;gap:20px}
.footer__bottom a{text-decoration:none}
.footer__bottom a:hover{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------------ 404 */
.error{padding-block:clamp(60px,9vw,130px);text-align:center}
.error p.label{color:var(--blue-deep)}
.error h1{
  font-family:"Bricolage",sans-serif;font-weight:800;
  font-size:clamp(2.4rem,7vw,4.6rem);letter-spacing:-.042em;line-height:.95;margin-top:14px;
}
.error > p:not(.label){margin:18px auto 0;color:var(--ink-2);max-width:48ch}
.error .button-row{justify-content:center;margin-top:30px}

/* ---------------------------------------------------------- Legal text */
.legal-text{padding-block:clamp(36px,5vw,72px)}
.legal-text h1{
  font-family:"Bricolage",sans-serif;font-weight:800;
  font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.04em;line-height:.98;margin-top:14px;
}
.legal-text .prose{margin-top:26px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}