/*
 * Yaman Engineering – website styles.
 * Derived from @platform/design-tokens (brand orange #F05A2A, Archivo with width axis) plus the
 * navy-graphite "ink" of the previous website. The full system with contrast notes is in design-system.md.
 *
 * Order: 1 fonts · 2 tokens · 3 base · 4 layout · 5 header · 6 hero · 7 sections · 8 icons & lists
 *        9 V-model · 10 media · 11 contact & form · 12 brand mark · 13 footer · 14 legal pages · 15 print
 */

/* ---------- 1. Fonts (self-hosted, SIL OFL 1.1 – see assets/fonts/OFL.txt) ---------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-wdth.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Only downloaded when a page shows such characters (e.g. names typed into the form). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-wdth.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */

:root {
  /* Base palette – the only place with literal colors */
  --white: #ffffff;
  --gray-700: #474747; /* brand gray: body text only, never a surface */
  --gray-600: #636363;
  --gray-500: #8a8a8a;
  --gray-300: #cbcbcb;
  --ink-900: #16171e; /* deepest navy-graphite (old site) */
  --ink-800: #24262f;
  --ink-700: #262832; /* ink: hero, footer, headings, diagram */
  --ink-500: #4a4e5e; /* rules on ink */
  --ink-300: #a9acb9; /* muted text on ink */
  --ink-200: #d9dbe3; /* text on ink, rules on mist */
  --ink-100: #e4e6ec; /* rules on white */
  --ink-50: #f2f3f6; /* mist: light bands */
  --orange-100: #fde3d9;
  --orange-300: #ff8a5c; /* orange on ink: links, icons, focus */
  --orange-500: #f05a2a; /* brand orange: cells, nodes, icons on light */
  --orange-600: #cc4619;
  --orange-700: #b23d15;
  --orange-800: #973312;
  --red-700: #b0193f;
  --green-700: #1d6b3c;

  /* Semantic colors – contrast on white / on mist (#F2F3F6) / on ink (#262832) */
  --color-page: var(--white);
  --color-band: var(--ink-50);
  --color-ink: var(--ink-700);
  --color-text: var(--gray-700); /* 9.3 : 1 / 8.4 : 1 */
  --color-text-strong: var(--ink-700); /* 14.7 : 1 / 13.2 : 1 */
  --color-text-muted: var(--gray-600); /* 6.0 : 1 / 5.4 : 1 */
  --color-rule: var(--ink-100);
  --color-rule-band: var(--ink-200);
  --color-border-input: var(--gray-500); /* 3.5 : 1 / 3.1 : 1 – UI component minimum 3 : 1 */
  --color-border-input-hover: var(--ink-700);
  --color-mark: var(--orange-500); /* cells, nodes – never text (3.4 : 1 white, 4.3 : 1 ink) */
  --color-icon: var(--orange-500); /* graphic: 3.4 : 1 / 3.1 : 1 */
  --color-action: var(--orange-600); /* white on it 4.7 : 1; against ink 3.1 : 1 */
  --color-action-hover: var(--orange-700);
  --color-action-active: var(--orange-800);
  --color-on-action: var(--white);
  --color-link: var(--orange-700); /* 5.9 : 1 / 5.3 : 1 */
  --color-link-hover: var(--orange-800); /* 7.5 : 1 */
  --color-focus: var(--orange-600);
  --color-danger: var(--red-700); /* 6.9 : 1 / 6.2 : 1 */
  --color-success: var(--green-700); /* 6.5 : 1 */
  --color-diagram-line: var(--ink-700);
  --color-diagram-chord: var(--gray-500); /* 3.5 : 1 */
  --color-node-off: var(--gray-300);
  --diagram-dash-x: repeating-linear-gradient(90deg, var(--color-diagram-chord) 0 5px, transparent 5px 10px);
  --diagram-dash-y: repeating-linear-gradient(180deg, var(--color-diagram-chord) 0 5px, transparent 5px 10px);

  /* On ink */
  --color-on-ink: var(--white); /* 14.7 : 1 */
  --color-on-ink-soft: var(--ink-200); /* 10.6 : 1 */
  --color-on-ink-muted: var(--ink-300); /* 6.5 : 1 */
  --color-rule-on-ink: var(--ink-500);
  --color-accent-on-ink: var(--orange-300); /* 6.3 : 1 */
  --color-grid-on-ink: rgb(255 255 255 / 0.11);
  --color-selection: var(--orange-100);

  /* Type – Archivo, one family; the width axis is the second voice */
  --font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wdth-text: 100%;
  --wdth-semi: 112%;
  --wdth-wide: 125%;

  /* Scale after Bringhurst: 14 · 16 · 18 · 21 · 24 · 36/48 · display */
  --fs-small: 0.875rem;
  --fs-ui: 1rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(1.1875rem, 1rem + 0.55vw, 1.5rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --fs-h2: clamp(2rem, 1.4rem + 1.9vw, 3.25rem);
  --fs-display: clamp(2.25rem, 0.9rem + 6vw, 7rem);

  --lh-display: 0.94;
  --lh-heading: 1.06;
  --lh-snug: 1.3;
  --lh-text: 1.6;

  --weight-text: 400;
  --weight-medium: 500;
  --weight-semi: 620;
  --weight-bold: 720;
  --weight-display: 800;

  /* Spacing – 4 px grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-space: clamp(4rem, 2.6rem + 5.6vw, 8.5rem);

  /* Radii – tight, the logo is built from squares */
  --radius-cell: 0;
  --radius-control: 2px;
  --radius-panel: 4px;

  /* Icons (Lucide, 24 px grid) */
  --icon-size: 1.5rem;
  --icon-stroke: 1.75;

  /* Cell grid (as the platform sign-in): square cells, anchored to the content's left edge */
  --grid-cell-base: 4rem;
  --grid-cell: var(--grid-cell-base);
  --grid-x: max(var(--gutter), calc((100vw - var(--page-max)) / 2));

  /* Layout */
  --page-max: 100rem;
  --gutter: clamp(1rem, 4.2vw, 4rem);
  --measure: 62ch;
  --header-height: 3.75rem;

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 48rem) {
  :root {
    --header-height: 4.5rem;
  }
}

/* ---------- 3. Base ---------- */

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-5));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-stretch: var(--wdth-text);
  font-weight: var(--weight-text);
  line-height: var(--lh-text);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
address,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--color-text-strong);
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

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

img {
  height: auto;
}

address {
  font-style: normal;
}

/* Inline icon sprite (symbols only) */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Components set their own display; hidden must still win */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--color-selection);
  color: var(--color-text-strong);
}

:where(a) {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

:where(a:hover) {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

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

.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-weight: var(--weight-semi);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
  outline-color: var(--color-accent-on-ink);
}

/* ---------- 4. Layout ---------- */

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

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

.section--band {
  background: var(--color-band);
}

/* Spec-sheet split: heading column left, substance right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 6rem);
  }

  .split--media {
    align-items: center;
  }
}

/* Vertical rhythm: text flow (1em) and block stacks */
.flow > * + * {
  margin-top: 1em;
}

.stack-s > * + * {
  margin-top: 1rem;
}

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

.stack-l > * + * {
  margin-top: 2.5rem;
}

/* ---------- 5. Header ---------- */

/* Default (also without JS, and on the legal pages): translucent white with backdrop blur.
   On the start page html.at-top (set inline in <head> before the first paint, kept current by site.js) makes it
   transparent over the ink hero. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.95);
}

/* Transitions only after the first frame (html.header-ready from site.js), never on load */
html.header-ready .site-header {
  transition: background-color var(--duration-normal) linear, -webkit-backdrop-filter var(--duration-normal) linear,
    backdrop-filter var(--duration-normal) linear;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: rgb(255 255 255 / 0.75);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }
}

.site-header .logo--light {
  display: none;
}

html.at-top .site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.at-top .site-header .logo--dark {
  display: none;
}

html.at-top .site-header .logo--light {
  display: block;
}

html.at-top .site-header :is(.site-nav a, .site-header__phone),
html.at-top .site-header :is(.site-nav a, .site-header__phone):hover {
  color: var(--color-on-ink);
}

html.at-top .site-header .site-header__phone {
  border-left-color: var(--color-rule-on-ink);
}

html.at-top .site-header .site-header__phone .icon {
  color: var(--color-accent-on-ink);
}

html.at-top .site-header :focus-visible {
  outline-color: var(--color-accent-on-ink);
}

html.header-ready :is(.site-nav a, .site-header__phone) {
  transition: color var(--duration-normal) linear, background-size var(--duration-normal) var(--easing-standard);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap; /* below ~340 px the nav drops to a second row instead of overflowing */
  align-items: center;
  column-gap: var(--space-4);
  min-height: var(--header-height);
}

.site-header__brand {
  flex: none;
  margin-right: auto;
  padding-block: var(--space-2);
}

.site-header__brand img {
  width: auto;
  height: 1.625rem;
}

.site-nav ul {
  display: flex;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding-block: var(--space-2);
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(var(--color-mark), var(--color-mark)) left bottom / 0 2px no-repeat;
  transition: background-size var(--duration-normal) var(--easing-standard);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-text-strong);
  background-size: 100% 2px;
}

.site-header__phone {
  display: none;
}

/* Phones: "Kontakt" becomes a compact orange button (44 px touch target) in both header states;
   the text links get the same touch height. */
@media (max-width: 47.99rem) {
  .site-header__inner {
    column-gap: var(--space-3);
  }

  .site-header__brand img {
    height: 1.5rem;
  }

  .site-nav ul {
    align-items: center;
    gap: var(--space-3);
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0;
  }

  .site-nav a.site-nav__cta,
  html.at-top .site-header .site-nav a.site-nav__cta {
    padding-inline: 0.625rem;
    border-radius: var(--radius-control);
    background: var(--color-action);
    color: var(--color-on-action);
    font-weight: var(--weight-semi);
  }

  .site-nav a.site-nav__cta:hover,
  html.at-top .site-header .site-nav a.site-nav__cta:hover {
    background: var(--color-action-hover);
    color: var(--color-on-action);
  }
}

/* Narrow phones (360 px class): logo, "Leistungen" and the button share one row; "Über uns" is hidden here */
@media (max-width: 24.3rem) {
  .site-header__inner {
    column-gap: var(--space-3);
  }

  .site-header__brand img {
    height: 1.5rem;
  }

  .site-nav ul {
    gap: var(--space-3);
  }

  .site-nav a {
    font-size: 0.875rem;
  }

  .site-nav__secondary {
    display: none;
  }
}

@media (min-width: 48rem) {
  .site-header__inner {
    column-gap: var(--space-6);
  }

  .site-header__brand img {
    height: 2.5rem;
  }

  .site-nav ul {
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  .site-nav a {
    font-size: var(--fs-ui);
  }
}

@media (min-width: 64rem) {
  .site-header__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    border-left: 1px solid var(--color-rule);
    color: var(--color-text-strong);
    font-weight: var(--weight-semi);
    font-stretch: var(--wdth-semi);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-header__phone:hover {
    color: var(--color-link);
  }

  .site-header__phone-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}

/* ---------- 6. Hero (ink band) ---------- */

.hero {
  padding-top: var(--grid-cell);
  color: var(--color-on-ink-soft);
}

@media (min-width: 48rem) {
  .hero {
    padding-top: calc(var(--grid-cell) * 2);
  }
}

.hero :focus-visible {
  outline-color: var(--color-accent-on-ink);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
}

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

.hero__title {
  color: var(--color-on-ink);
  font-size: var(--fs-display);
  font-stretch: var(--wdth-wide);
  font-weight: var(--weight-display);
  line-height: var(--lh-display);
  letter-spacing: -0.028em;
  hyphens: manual;
}

.hero__title span {
  display: block;
}

.hero__lead {
  max-width: 30em;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

.hero__phone {
  color: var(--color-on-ink-muted);
}

.hero__phone a {
  color: var(--color-on-ink);
  font-weight: var(--weight-semi);
  font-stretch: var(--wdth-semi);
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--color-accent-on-ink);
  white-space: nowrap;
}

.hero__phone a:hover {
  color: var(--color-on-ink);
}

.hero__media,
.media {
  display: block;
}

.hero__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ink-800);
}

/* Phones and tablets: the photo leaves the flow and becomes a faded background in the top right corner, so the
   three paths move up. Opacity 0.2 over ink: brightest image point ≈ rgb(79 80 89) – white text 8 : 1,
   #D9DBE3 5.8 : 1. Muted text (#A9ACB9) would drop below AA there, so it switches to #D9DBE3 in the hero. */
@media (max-width: 63.99rem) {
  .hero {
    padding-top: var(--space-6);
  }

  .hero__grid {
    gap: 0;
  }

  .hero__text {
    gap: var(--space-5);
  }

  .hero__media {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: min(85%, 34rem);
    height: min(70%, 30rem);
    opacity: 0.2;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to left, #000 30%, transparent), linear-gradient(to bottom, #000 40%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to left, #000 30%, transparent), linear-gradient(to bottom, #000 40%, transparent);
    mask-composite: intersect;
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    background: none;
  }

  .hero__phone,
  .path,
  .path:hover {
    color: var(--color-on-ink-soft);
  }

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

  .path {
    padding: var(--space-3) 0 var(--space-4);
    border-top-width: 1px;
  }

  .path__title {
    font-size: 1.0625rem;
  }

  .path__text {
    font-size: var(--fs-small);
    line-height: 1.4;
  }
}

@media (max-width: 39.99rem) {
  .hero__lead {
    font-size: var(--fs-body);
  }
}

/* Short phones: titles only, so all three paths stay in the first screen */
@media (max-width: 63.99rem) and (max-height: 50rem) {
  .hero__text {
    gap: var(--space-4);
  }

  .paths {
    margin-top: var(--space-5);
  }

  .hero {
    padding-top: var(--space-5);
  }

  .path {
    padding: var(--space-3) 0;
  }

  .path__text {
    display: none;
  }

  .path__go {
    grid-row: 1;
  }
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: var(--space-6);
  }

  .hero__media img {
    aspect-ratio: 4 / 5;
  }
}

/* Desktop/laptop: the whole hero incl. the three paths fits into 100svh minus header.
   Headline scales with min(vw, vh); the photo is capped by the viewport height and rounded down to whole cells,
   so its top (one cell below the band's top) and bottom edges stay on grid lines. */
@media (min-width: 64rem) and (min-height: 40rem) {
  .hero {
    padding-top: var(--grid-cell);
  }

  .hero__title {
    font-size: clamp(2.25rem, min(0.9rem + 6vw, 11svh), 7rem);
  }

  .hero__text {
    gap: var(--space-5);
  }

  .hero__media img {
    /* natural 4 : 5 height of the 4/12 column, capped by the viewport, always whole cells */
    height: round(down, min(1.25 * (min(100vw - 2 * var(--gutter), var(--page-max)) - var(--space-6)) / 3,
      100svh - var(--header-height) - var(--grid-cell) - 2.5rem - var(--paths-h)), var(--grid-cell));
    aspect-ratio: auto;
  }

  .hero {
    --paths-h: 10rem;
  }

  .paths {
    margin-top: 2.5rem;
  }

  .path {
    padding: var(--space-4) 0 var(--space-5);
  }

  .path__title {
    font-size: clamp(1.0625rem, 0.75rem + 0.45vw, 1.375rem);
  }

  .path__text {
    font-size: 0.9375rem;
  }
}

@media (min-width: 64rem) and (min-height: 40rem) and (max-width: 89.99rem) {
  .hero {
    --paths-h: 12rem;
  }
}

/* Two paths – one per audience */
.paths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(3rem, 2rem + 3.5vw, 5.5rem);
}

.path {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-5) 0 var(--space-6);
  border-top: 2px solid var(--color-rule-on-ink);
  color: var(--color-on-ink-muted);
  text-decoration: none;
  transition: border-color var(--duration-normal) var(--easing-standard);
}

.path:hover {
  color: var(--color-on-ink-muted);
  border-top-color: var(--color-mark);
}

.path:focus-visible {
  outline-offset: 4px;
}

.path__icon {
  grid-row: 1 / span 2;
  margin-top: 0.15rem;
  color: var(--color-accent-on-ink);
}

.path__title {
  grid-column: 2;
  color: var(--color-on-ink);
  font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  line-height: 1.2;
}

.path__text {
  grid-column: 2;
}

.path__go {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--color-on-ink-muted);
  transition: transform var(--duration-normal) var(--easing-standard), color var(--duration-normal) linear;
}

.path:hover .path__go {
  color: var(--color-accent-on-ink);
  transform: translateY(3px);
}

@media (min-width: 64rem) {
  .paths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

/* ---------- 7. Sections ---------- */

.section__title {
  font-size: var(--fs-h2);
  font-stretch: var(--wdth-wide);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: -0.018em;
  hyphens: manual;
}

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

.section__lead {
  color: var(--color-text-strong);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.subheading {
  color: var(--color-text-strong);
  font-size: var(--fs-h3);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  line-height: 1.25;
}

/* Text action that leads to the contact form */
.link-action {
  display: inline-block;
  color: var(--color-link);
  font-weight: var(--weight-semi);
  font-stretch: var(--wdth-semi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.link-action:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

/* ---------- 8. Icons and lists ---------- */

/* Lucide icons from assets/img/icons.svg; one size and stroke everywhere */
.icon {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--color-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-list {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.icon-list > li {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-3);
}

.icon-list .icon {
  margin-top: 0.15em;
}

/* Small heading above a list (e.g. the standards) */
.list-title {
  font-size: var(--fs-ui);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  line-height: var(--lh-snug);
}

/* Energy offers: icon, title, a few words */
.offers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-6);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding: 0;
  list-style: none;
}

.offer {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr);
  align-content: start;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-rule-band);
}

.offer__icon {
  grid-row: 1 / span 2;
  margin-top: 0.05rem;
}

.offer__title {
  grid-column: 2;
  font-size: var(--fs-h3);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  line-height: 1.25;
  hyphens: manual;
}

.offer__text {
  grid-column: 2;
  color: var(--color-text-muted);
  font-size: var(--fs-ui);
  line-height: 1.45;
}

@media (min-width: 40rem) {
  .offers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .offers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Compact variant (Abrechnung): beside the heading, two columns, no photo */
.offers--compact {
  margin-top: 0;
}

@media (min-width: 64rem) {
  .offers--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Standards: compact items in wide type */
.standards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.standards > li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-rule);
  color: var(--color-text-strong);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  font-stretch: var(--wdth-wide);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.reg {
  margin-left: 0.04em;
  font-size: 0.5em;
  font-weight: var(--weight-medium);
  line-height: 0;
  vertical-align: 0.9em;
}

@media (min-width: 30rem) {
  .standards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 9. System & Requirements Engineering: one pinned stage ----------
 * With JS (.sre.is-live) the stage is pinned while the page scrolls over the track; site.js maps the scroll
 * position to one of seven steps: one text panel (crossfade), the V highlights that step, the band
 * "Über alle Phasen" stays in the same picture. Without JS: complete V, all steps as a list.
 * Desktop: heading + text left (40 %), V right (60 %), band at the bottom. Below 64rem: stacked.
 */

.sre__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "visual" "text" "phases";
  row-gap: var(--space-6);
}

.sre__head { grid-area: head; }
.sre__text { grid-area: text; }
.sre__visual { grid-area: visual; min-width: 0; }
.sre .phases { grid-area: phases; }

.sre__head > * + * {
  margin-top: var(--space-4);
}

.sre__lead {
  max-width: 34em;
  color: var(--color-text-strong);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

/* Progress: "3 / 7" and seven jump buttons (only with JS) */
.sre__progress {
  display: none;
}

.sre.is-live .sre__progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.sre__count {
  color: var(--color-text-strong);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sre__dots {
  display: flex;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sre__dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.sre__dot::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  background: var(--color-page);
  box-shadow: inset 0 0 0 1.5px var(--gray-500);
}

.sre__dot.is-done::before {
  background: var(--color-mark);
  box-shadow: none;
}

.sre__dot[aria-current="step"]::before {
  background: var(--color-mark);
  box-shadow: none;
  outline: 1.5px solid var(--color-mark);
  outline-offset: 2px;
}

.sre__dot:focus-visible {
  outline-offset: 0;
}

/* Steps: a plain list without JS, one crossfading panel with JS */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr);
  align-content: start;
  gap: var(--space-2) var(--space-4);
}

.step + .step {
  margin-top: var(--space-6);
}

.step > :not(.step__icon) {
  grid-column: 2;
}

.step__icon {
  grid-row: 1;
  margin-top: 0.25rem;
}

.step__title {
  font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.875rem);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  hyphens: manual;
}

.step__text,
.step__gain {
  max-width: 34em;
}

.step__gain {
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
}

.step__proves {
  margin-top: var(--space-1);
}

.sre.is-live .steps {
  display: grid;
}

.sre.is-live .step {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 250ms var(--easing-standard), transform 250ms var(--easing-standard), visibility 0s linear 250ms;
}

.sre.is-live .step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 250ms var(--easing-standard), transform 250ms var(--easing-standard), visibility 0s;
}

/* V-model figure */
.vmodel__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-4);
}

.vmodel__caption-title {
  color: var(--color-text-strong);
  font-size: var(--fs-h3);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  line-height: 1.25;
}

.vmodel__legend,
.step__proves {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.vmodel__legend::before,
.step__proves::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2px;
  background: var(--diagram-dash-x);
}

/* Fixed 4 : 3 box: the SVG viewBox 800 × 600 and the % positions of the labels agree */
.vmodel__diagram {
  --node: 1.125rem;
  --label-gap: 1rem;
  position: relative;
  width: min(100%, 34rem, calc((100svh - var(--header-height) - 28rem) * 4 / 3));
  min-width: 10rem;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
}

.vmodel__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}

.vmodel__ghost,
.vmodel__seg {
  stroke: var(--color-diagram-line);
  stroke-width: 6;
  stroke-linejoin: miter;
}

/* The whole V as a faint line from the start, so it never looks empty */
.vmodel__ghost {
  stroke-opacity: 0.15;
}

.vmodel__seg {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 350ms var(--easing-standard);
}

.vmodel__chord {
  stroke: var(--color-diagram-chord);
  stroke-width: 2.5;
  stroke-dasharray: 8 8;
  transition: stroke-opacity var(--duration-normal) linear, stroke var(--duration-normal) linear;
}

.vmodel__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vmodel__step {
  position: absolute;
  top: var(--y);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--label-gap);
  color: var(--color-text-strong);
  font-size: clamp(0.875rem, 0.7rem + 0.3vw, 1.0625rem);
  font-weight: var(--weight-semi);
  line-height: 1.25;
  hyphens: manual;
  transform: translateY(-50%);
  transition: color var(--duration-normal) linear;
}

/* node centres in % of the box – the SVG uses the same points (× 8 / × 6) */
.vmodel__step[data-pos="l1"] { --x: 22%; --y: 12.5%; }
.vmodel__step[data-pos="l2"] { --x: 31.333%; --y: 37.5%; }
.vmodel__step[data-pos="l3"] { --x: 40.667%; --y: 62.5%; }
.vmodel__step[data-pos="b"] { --x: 50%; --y: 87.5%; }
.vmodel__step[data-pos="r3"] { --x: 59.333%; --y: 62.5%; }
.vmodel__step[data-pos="r2"] { --x: 68.667%; --y: 37.5%; }
.vmodel__step[data-pos="r1"] { --x: 78%; --y: 12.5%; }

.vmodel__step[data-side="l"] {
  right: calc(100% - var(--x) - var(--node) / 2);
  flex-direction: row-reverse;
  max-width: calc(var(--x) + var(--node) / 2);
  text-align: right;
}

.vmodel__step[data-side="r"] {
  left: calc(var(--x) - var(--node) / 2);
  max-width: calc(100% - var(--x) + var(--node) / 2);
}

.vmodel__step[data-side="b"] {
  left: var(--x);
  flex-direction: column;
  gap: calc(var(--label-gap) * 0.75);
  transform: translate(-50%, calc(var(--node) / -2));
}

.vmodel__node {
  flex: none;
  width: var(--node);
  height: var(--node);
  border-radius: var(--radius-cell);
  background: var(--color-mark);
  box-shadow: 0 0 0 4px var(--color-page);
  transition: transform 250ms var(--easing-standard), background-color var(--duration-normal) linear;
}

/* Live states: future outlined and muted, done filled, active a little larger with a thin offset ring */
.sre.is-live .vmodel__step {
  color: var(--color-text-muted);
  cursor: pointer;
}

.sre.is-live .vmodel__step .vmodel__node {
  background: var(--color-page);
  box-shadow: inset 0 0 0 2px var(--color-node-off), 0 0 0 4px var(--color-page);
}

.sre.is-live .vmodel__step:is(.is-done, .is-active) {
  color: var(--color-text-strong);
}

.sre.is-live .vmodel__step:is(.is-done, .is-active) .vmodel__node {
  background: var(--color-mark);
  box-shadow: 0 0 0 4px var(--color-page);
}

.sre.is-live .vmodel__step.is-active {
  font-weight: var(--weight-display);
}

.sre.is-live .vmodel__step.is-active .vmodel__node {
  transform: scale(1.25);
  outline: 1.5px solid var(--color-mark);
  outline-offset: 3px;
}

.sre.is-live .vmodel__seg:not(.is-drawn) {
  stroke-dashoffset: 1;
}

.sre.is-live .vmodel__chord {
  stroke-opacity: 0.3;
}

.sre.is-live .vmodel__chord.is-drawn {
  stroke-opacity: 1;
}

.sre.is-live .vmodel__chord.is-active {
  stroke: var(--color-mark);
}

/* Supporting processes: one band from concept phase to series release */
.phases__axis {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.phases__line {
  flex: 1;
  height: 3px;
  background: var(--color-diagram-line);
}

.phases__end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.phases__end:first-child::before,
.phases__end:last-child::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  background: var(--color-mark);
}

.phases__title {
  color: var(--color-text-strong);
  font-size: var(--fs-ui);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  white-space: nowrap;
}

.phases__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.phases__item {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr);
  align-content: start;
  gap: 0.125rem var(--space-3);
}

.phases__item .icon {
  grid-row: 1 / span 2;
  margin-top: 0.05rem;
}

.phases__name {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 1rem;
  font-weight: var(--weight-semi);
  line-height: 1.3;
}

.phases__text {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.4;
}

@media (max-width: 39.99rem) {
  .phases__end {
    display: none;
  }

  /* Phones without JS: the complete V, small and without labels */
  .sre:not(.is-live) .vmodel__diagram {
    --node: 0.75rem;
    width: min(100%, 18rem);
  }

  .vmodel__caption,
  .sre:not(.is-live) .vmodel__label {
    display: none;
  }

  .sre:not(.is-live) :is(.vmodel__ghost, .vmodel__seg) {
    stroke-width: 9;
  }

  .sre:not(.is-live) .vmodel__chord {
    stroke-width: 5;
    stroke-dasharray: 14 10;
  }

  .sre:not(.is-live) .vmodel__node {
    box-shadow: 0 0 0 3px var(--color-page);
  }

  /* Phones with JS: a window onto a large V that pans to the current step (camera along the V).
     site.js sets --fx / --fy (focus point as a fraction of the V box); the focus lands in the window centre. */
  .sre.is-live .sre__visual {
    position: relative;
    height: 14rem;
    margin-inline: calc(-1 * var(--gutter));
    overflow: hidden;
    border-block: 1px solid var(--color-rule);
  }

  .sre.is-live .vmodel__diagram {
    --node: 1rem;
    --label-gap: 0.75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40rem;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    transform: translate(calc(var(--fx, 0.5) * -100%), calc(var(--fy, 0.5) * -100%));
    transition: transform 300ms var(--easing-standard);
  }

  .sre.is-live .vmodel__step {
    font-size: 0.875rem;
  }

  .sre.is-live .vmodel__step[data-side] {
    max-width: 6.5rem;
  }

  .sre.is-live .vmodel__step[data-side="l"] .vmodel__label,
  .sre.is-live .vmodel__step[data-side="r"] .vmodel__label {
    flex: 1 1 auto;
  }

  .sre.is-live .vmodel__step[data-side="l"] {
    max-width: calc(6.5rem + var(--label-gap) + var(--node));
  }

  .sre.is-live .vmodel__step[data-side="r"] {
    max-width: calc(6.5rem + var(--label-gap) + var(--node));
  }

  .sre.is-live .phases__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .sre.is-live .phases__text {
    display: none;
  }

  .sre.is-live .phases__item .icon {
    grid-row: 1;
  }
}

@media (min-width: 40rem) {
  .phases__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .sre__stage {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "head visual" "text visual" "phases phases";
    align-content: center;
    column-gap: clamp(2.5rem, 4vw, 5rem);
    row-gap: var(--space-5);
  }

  .sre .section__title {
    font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem);
  }

  .sre__visual {
    align-self: center;
  }

  .vmodel__diagram {
    width: min(100%, 60rem, calc((100svh - var(--header-height) - 17rem) * 4 / 3));
    margin-right: 0;
  }

  .vmodel__caption {
    width: min(100%, 60rem, calc((100svh - var(--header-height) - 17rem) * 4 / 3));
    margin-left: auto;
  }

  .phases__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Pinned stage (with JS); the track height is set by site.js (stage + 7 scroll steps) */
.sre.is-live .sre__stage {
  position: sticky;
  top: calc(var(--header-height) - var(--head-shift, 0px));
  align-content: center;
  min-height: calc(100svh - var(--header-height) + var(--head-shift, 0px));
  padding-block: var(--space-5);
}

.sre.is-live {
  padding-top: calc(var(--section-space) - var(--space-5));
}

/* Credentials of the engineering service, directly after the V-model stage */
.cred {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.cred__title {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-stretch: var(--wdth-wide);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
}

.cred .section__lead {
  max-width: 36em;
}

@media (min-width: 64rem) {
  .cred {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 6rem);
  }
}

/* ---------- 10. Media (duotone photos) ---------- */

.media img {
  width: 100%;
  object-fit: cover;
  background: var(--ink-200);
}

.media--energy img {
  aspect-ratio: 5 / 4;
}

.media--about img {
  aspect-ratio: 4 / 3;
}

@media (max-width: 39.99rem) {
  .media--energy img,
  .media--about img {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .media--energy img,
  .media--about img {
    aspect-ratio: 16 / 9;
  }
}

/* ---------- 11. Contact & form ---------- */

.contact-facts {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.contact-card {
  margin-top: var(--space-3);
}

.contact-card__name {
  color: var(--color-text-strong);
  font-weight: var(--weight-semi);
}

.contact-card a {
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
  text-decoration-color: var(--color-mark);
  overflow-wrap: anywhere;
}

.contact-card a:hover {
  color: var(--color-link-hover);
}

.form-panel {
  position: relative;
}

.contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 40rem) {
  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .field--full,
  .contact-form > .form-note,
  .contact-form > .form-alert,
  .contact-form > .form-actions {
    grid-column: 1 / -1;
  }
}

.field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.field__label {
  color: var(--color-text-strong);
  font-size: var(--fs-ui);
  font-weight: var(--weight-semi);
  line-height: var(--lh-snug);
}

.field__optional {
  color: var(--color-text-muted);
  font-weight: var(--weight-text);
}

.input {
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--color-text-strong);
  font: inherit;
  font-size: max(1rem, 16px); /* never below 16 px – avoids iOS zoom */
  line-height: 1.5;
  transition: border-color var(--duration-fast) linear, box-shadow var(--duration-fast) linear;
  appearance: none;
  -webkit-appearance: none;
}

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

.input:focus-visible,
.input:focus {
  outline: none;
  border-color: var(--color-text-strong);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--color-focus);
}

.input[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger);
}

.input[aria-invalid="true"]:focus {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger), 0 0 0 2px var(--white), 0 0 0 4px var(--color-danger);
}

.input:disabled {
  border-color: var(--gray-300);
  background: var(--color-band);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

textarea.input {
  min-height: 10rem;
  resize: vertical;
}

.field__error {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-danger);
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.field__error::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
}

/* Honeypot: out of sight and out of the tab order; real people never fill it */
.field--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  max-width: var(--measure);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.form-status {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.form-status[data-tone="invalid"] {
  color: var(--color-danger);
  font-weight: var(--weight-medium);
}

.form-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  border-radius: var(--radius-control);
  background: var(--white);
}

.form-alert .mark {
  grid-row: 1 / span 2;
  margin-top: 0.3rem;
}

.form-alert__title {
  color: var(--color-danger);
  font-weight: var(--weight-semi);
}

.form-result {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 4px solid var(--color-success);
  border-radius: var(--radius-panel);
  background: var(--white);
}

.form-result__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-stretch: var(--wdth-wide);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
}

/* Receives focus by script only (tabindex="-1") so screen readers announce the result; not interactive */
.form-result__title:focus,
.form-result__title:focus-visible {
  outline: none;
}

.form-result .button {
  margin-top: var(--space-2);
}

.form-fallback {
  padding: var(--space-5);
  border-radius: var(--radius-panel);
  background: var(--white);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-action);
  color: var(--color-on-action);
  font: inherit;
  font-size: var(--fs-ui);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) linear;
}

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

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

.button[aria-disabled="true"],
.button[aria-disabled="true"]:hover {
  background: var(--color-action-active);
  cursor: progress;
}

.button--secondary {
  background: transparent;
  color: var(--color-text-strong);
  box-shadow: inset 0 0 0 1px var(--color-text-strong);
}

.button--secondary:hover {
  background: var(--color-band);
  color: var(--color-text-strong);
}

.button--secondary:active {
  background: var(--ink-100);
}

.button .button__mark {
  display: none;
}

.button[aria-disabled="true"] .button__mark {
  display: inline-grid;
}

/* ---------- 12. Brand mark (4 × 3 cells, as in @platform BrandMark) ---------- */

.mark {
  --cell: 0.375rem;
  display: inline-grid;
  flex: none;
  grid-template-columns: repeat(4, var(--cell));
  grid-template-rows: repeat(3, var(--cell));
}

.mark > span {
  position: relative;
  background: var(--color-mark);
}

.mark > span:nth-child(1) {
  grid-area: 1 / 1 / 3 / 2;
}

.mark > span:nth-child(2) {
  grid-area: 1 / 3 / 3 / 5;
}

.mark > span:nth-child(3) {
  grid-area: 3 / 2 / 4 / 3;
}

.mark--large {
  --cell: 0.75rem;
}

/* Missing part: the small cell stays an empty slot (error) */
.mark--incomplete > span:nth-child(3) {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--color-danger);
}

/* Loading: outlined slots fill one after another, hold, clear – no rotation */
.mark--loading > span {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

.mark--loading > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  animation: mark-fill 2400ms var(--easing-standard) infinite both;
}

.mark--loading > span:nth-child(2)::after {
  animation-delay: 300ms;
}

.mark--loading > span:nth-child(3)::after {
  animation-delay: 600ms;
}

@keyframes mark-fill {
  0% { opacity: 0; }
  14% { opacity: 1; }
  66% { opacity: 1; }
  84% { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- 13. Ink bands on the cell grid, footer ---------- */

/* Cell grid as on the platform sign-in (AuthLayout .grid, --pt-size-grid-cell 4rem): 1 px lines, only in one
   corner of each ink band, fading out towards the content. Hero: top right, anchored to the content's right edge
   (photo top and right edge on lines). Footer: top left, anchored to the content's left edge (lockup on lines). */
.grid-ink {
  position: relative;
  isolation: isolate;
  background-color: var(--color-ink);
}

.grid-ink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--color-grid-on-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-on-ink) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}

/* The hero starts behind the sticky header: pulled up by the header height, the same height added back as a
   transparent top border (ink shows through), so everything below the header stays where it was. */
.hero {
  margin-top: calc(-1 * var(--header-height));
  border-top: var(--header-height) solid transparent;
}

.hero::before {
  /* grid from the band's very top (under the header); lines offset by the header height so they still run
     through the photo's edges. The right content edge falls on a line: shift by 1 px to draw it inside. */
  top: calc(-1 * var(--header-height));
  background-position: right calc(var(--grid-x) - 1px) top var(--header-height);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 100% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 60% at 100% 0%, #000 30%, transparent 80%);
}

@media (min-width: 48rem) {
  .hero::before {
    -webkit-mask-image: radial-gradient(ellipse 65% 95% at 100% 0%, #000 35%, transparent 78%);
    mask-image: radial-gradient(ellipse 65% 95% at 100% 0%, #000 35%, transparent 78%);
  }
}

/* Footer: its own cell (--fcell) – 4rem on wide screens, 2rem below – drives grid, lockup and spacing */
.site-footer {
  --fcell: calc(var(--grid-cell-base) / 2);
  --grid-cell: var(--fcell);
  padding-top: calc(var(--fcell) * 2);
  color: var(--color-on-ink-soft);
  font-size: var(--fs-ui);
}

.site-footer::before {
  background-position: var(--grid-x) 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 0% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 55% at 0% 0%, #000 35%, transparent 80%);
}

.site-footer :focus-visible {
  outline-color: var(--color-accent-on-ink);
}

/* Lockup: the brand mark (4 × 3 units, BrandMark geometry) with one unit = one cell, and the wordmark
   "Yaman / Engineering": cap height = one cell (⅝ on phones), two tight lines (line-height 1.02) centred on the
   mark's height (phones: under the mark).
   Archivo metrics: cap height 0.687 em, ascent 0.88 em, descent 0.21 em. */
.lockup {
  --cap: calc(var(--fcell) * 0.625);
  display: grid;
  grid-template-columns: repeat(4, var(--fcell));
  grid-template-rows: repeat(3, var(--fcell)) var(--fcell) auto;
  width: max-content;
  max-width: 100%;
  color: var(--color-on-ink);
  text-decoration: none;
}

.lockup:hover {
  color: var(--color-on-ink);
}

.lockup__mark {
  --cell: var(--fcell);
  grid-area: 1 / 1 / 4 / 5;
}

.lockup__word {
  grid-area: 5 / 1 / 7 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: calc(var(--cap) / 0.687);
  font-stretch: var(--wdth-wide);
  font-weight: var(--weight-bold);
  line-height: 1.02;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.site-footer__claim {
  max-width: 30em;
  margin-top: var(--fcell);
  color: var(--color-on-ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--fcell) * 1.5) var(--space-6);
}

.site-footer__heading {
  margin-bottom: var(--space-4);
  color: var(--color-on-ink-muted);
  font-size: var(--fs-small);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
}

.site-footer__list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.site-footer a:not(.lockup) {
  color: var(--color-on-ink);
  text-decoration-color: var(--color-rule-on-ink);
  overflow-wrap: anywhere;
}

.site-footer a:not(.lockup):hover,
.site-footer a[aria-current="page"] {
  color: var(--color-on-ink);
  text-decoration-color: var(--color-accent-on-ink);
}

.site-footer__legal,
.site-footer__inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
}

.site-footer__inline {
  padding: 0;
  list-style: none;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: calc(var(--fcell) * 2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-rule-on-ink);
  color: var(--color-on-ink-muted);
  font-size: var(--fs-small);
}

@media (min-width: 48rem) {
  /* wordmark beside the mark, one free column between them, cap height = one cell */
  .lockup {
    --cap: var(--fcell);
    grid-template-columns: repeat(4, var(--fcell)) var(--fcell) auto;
    grid-template-rows: repeat(3, var(--fcell));
  }

  /* two tight lines, centred on the mark's height */
  .lockup__word {
    grid-area: 1 / 6 / 4 / 7;
  }

  .site-footer__main {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

@media (min-width: 80rem) {
  .site-footer {
    --fcell: var(--grid-cell-base);
  }

}

/* ---------- 14. Legal pages ---------- */

.legal {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section-space);
}

.legal .split {
  row-gap: var(--space-6);
}

.legal__title {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  font-stretch: var(--wdth-wide);
  font-weight: var(--weight-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.022em;
}

.legal__meta {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

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

.legal__body h2 {
  margin-top: 2.25em;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-stretch: var(--wdth-semi);
  font-weight: var(--weight-semi);
  line-height: 1.25;
}

.legal__body h2:first-child {
  margin-top: 0;
}

.legal__body h2 + *,
.legal__body h3 + * {
  margin-top: 0.5em;
}

.legal__body ul {
  padding-left: 1.25em;
}

.legal__body li + li {
  margin-top: 0.35em;
}

.legal__body li::marker {
  color: var(--color-text-muted);
}

@media (min-width: 64rem) {
  .legal__head {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    align-self: start;
  }
}

/* ---------- 15. Print ---------- */

@media print {
  .site-header,
  .skip-link,
  .site-footer__links,
  .form-panel,
  .paths,
  .hero__media {
    display: none;
  }

  .hero,
  .section--band,
  .site-footer {
    background: none;
    color: #000;
  }

  .hero__title {
    color: #000;
  }

  body {
    color: #000;
  }
}

/* ---------- Reduced motion ---------- */

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

  .mark--loading > span::after {
    animation: none;
    opacity: 1;
  }
}

/* ---------- 15. Not found (404.html) ---------- */

/* Text on white, beside an ink tile with the cell grid: the brand mark sits exactly on the lines (one mark unit =
   one cell), its small cell left as an empty orange slot – the piece that is missing. */
.notfound {
  --nf-cell: 3rem;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--header-height));
  padding-block: var(--space-6) var(--section-space);
}

.notfound__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
}

.notfound__text {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  max-width: 34rem;
}

.notfound__code {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}

.notfound__title {
  color: var(--color-text-strong);
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  font-stretch: var(--wdth-wide);
  font-weight: var(--weight-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.024em;
}

.notfound__lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.notfound__visual {
  position: relative;
  isolation: isolate;
  order: -1;
  width: calc(var(--nf-cell) * 6);
  height: calc(var(--nf-cell) * 5);
  background-color: var(--color-ink);
}

.notfound__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--color-grid-on-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-on-ink) 1px, transparent 1px);
  background-size: var(--nf-cell) var(--nf-cell);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 40%, transparent 100%);
}

.notfound__mark {
  --cell: var(--nf-cell);
  position: absolute;
  top: var(--nf-cell);
  left: var(--nf-cell);
}

.notfound__mark.mark--incomplete > span:nth-child(3) {
  box-shadow: inset 0 0 0 2px var(--color-accent-on-ink);
}

@media (min-width: 64rem) {
  .notfound {
    --nf-cell: var(--grid-cell);
  }

  .notfound__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
  }

  .notfound__visual {
    order: 0;
  }
}

.notfound__phone {
  color: var(--color-text-muted);
}

.notfound__phone a {
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}