/* ------------------------------------------------------------------
   WachPro GmbH — Stylesheet
   Design system: editorial gallery (after the Ashton Bespoke reference)
   Canvas: warm parchment · Ink: near-black · One chromatic note: logo navy
   ------------------------------------------------------------------ */

:root {
  /* Colors */
  --color-navy: #142848;            /* logo navy — footer + the single dark band (was Burnt Wine) */
  --color-steel: #a8b0c4;           /* logo grey — used only inside the wordmark & footer tagline */
  --color-ink: #262626;             /* Ink Stone — text, hairlines, frames */
  --color-parchment: #e0ded8;       /* Warm Parchment — dominant canvas */
  --color-white: #ffffff;

  /* Typography — families (substitutes named by the reference) */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;

  /* Typography — scale (Minor Third from 16px) */
  --text-body-sm: 15px;  --leading-body-sm: 1.1;  --tracking-body-sm: 0.021em;
  --text-body: 16px;     --leading-body: 1.4;
  --text-subheading: 18px; --leading-subheading: 1.3; --tracking-subheading: 0.022em;
  --text-heading: 32px;  --leading-heading: 1.1;  --tracking-heading: 0.017em;
  --text-heading-lg: 46px; --leading-heading-lg: 1.1; --tracking-heading-lg: 0.022em;
  --text-display: 60px;  --leading-display: 1.1;  --tracking-display: 0.031em;

  --weight-regular: 400;
  --weight-medium: 500;

  /* Spacing */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-60: 60px;
  --section-gap: 120px;
  --card-padding: 32px;
  --element-gap: 24px;
  --page-gutter: clamp(20px, 4vw, 60px);

  /* Shape */
  --radius-buttons: 4px;
  --radius-cards: 0;
  --radius-images: 0;
  --hairline: 1px solid var(--color-ink);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-parchment);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-images); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

/* Type roles */
.display, .heading-lg, .heading {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-feature-settings: 'liga' on;
  text-wrap: balance;
}
.display    { font-size: clamp(34px, 5vw, var(--text-display));   line-height: var(--leading-display);    letter-spacing: var(--tracking-display); }
.heading-lg { font-size: clamp(30px, 3.6vw, var(--text-heading-lg)); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); }
.heading    { font-size: var(--text-heading);                      line-height: var(--leading-heading);    letter-spacing: var(--tracking-heading); }

.label {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  text-transform: uppercase;
}
.sans {
  font-family: var(--font-sans);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

/* Underlined inline link — the only interactive style on the site */
.link {
  font-family: var(--font-sans);
  font-size: var(--text-subheading);
  letter-spacing: var(--tracking-subheading);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: border-bottom-width 120ms ease;
}
.link:hover, .link:focus-visible { border-bottom-width: 2px; outline: none; }

/* Screen-reader only */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Navigation ---------- */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-24) var(--page-gutter);
  color: var(--color-white);
  transition: background-color 200ms ease, color 200ms ease;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  text-decoration: none;
}
.nav__mark { height: 40px; width: auto; }
.nav__mark--navy { display: none; }
.nav__wordmark {
  font-family: var(--font-sans);
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin: 0; padding: 0;
  list-style: none;
}
.nav__links a {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nav__links a:hover, .nav__links a:focus-visible { border-bottom-color: currentColor; outline: none; }

/* Once scrolled past the hero the nav settles onto parchment */
.nav.is-settled {
  position: fixed;
  background: var(--color-parchment);
  color: var(--color-ink);
  border-bottom: var(--hairline);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.nav.is-settled .nav__mark--white { display: none; }
.nav.is-settled .nav__mark--navy  { display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-navy);
  text-align: center;
  padding: var(--section-gap) var(--page-gutter);
}
.hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.6) contrast(1.02);
}
.hero::after {
  /* minimal legibility wash — no decorative overlay beyond this */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20, 24, 34, 0.5) 0%, rgba(20, 24, 34, 0.3) 30%, rgba(20, 24, 34, 0.3) 100%);
}
.hero__content { position: relative; z-index: 1; max-width: min(100%, 60rem); }
.hero__content .label { margin-top: var(--space-32); font-weight: var(--weight-regular); }

/* ---------- Sections ---------- */
.section { padding: var(--section-gap) var(--page-gutter); }
.section--tight { padding-top: calc(var(--section-gap) * 0.66); padding-bottom: calc(var(--section-gap) * 0.66); }

.anchor {
  text-align: center;
  padding-top: var(--section-gap);
}

/* Editorial statement block */
.statement {
  text-align: center;
  padding: calc(var(--section-gap) * 1.4) var(--page-gutter);
}
.statement__mark {
  height: 96px; width: auto;
  margin: 0 auto var(--space-48);
}
.statement .heading-lg { max-width: 34ch; margin: 0 auto; }
.statement .label { margin-top: var(--space-32); font-weight: var(--weight-regular); text-transform: none; }
.statement .label, .statement__caption { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* Split image / text sections */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 70vh;
}
.split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--element-gap);
  padding: var(--section-gap) var(--page-gutter);
}
.split__text .heading-lg { margin-bottom: var(--space-8); }
.split__text p { max-width: 52ch; }
.split__text .link { align-self: flex-start; margin-top: var(--space-8); }
.split__image {
  border: var(--hairline);
  border-right: 0;
  overflow: hidden;
}
.split--reverse .split__image { order: -1; border-right: var(--hairline); border-left: 0; }
.split__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7);
}

/* Full-width photographic break */
.break {
  height: 62vh;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  overflow: hidden;
}
.break img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55); }

/* Contact */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-60);
  padding: var(--section-gap) var(--page-gutter);
  border-top: var(--hairline);
}
.contact address { font-style: normal; display: grid; gap: var(--space-8); }
.contact .heading-lg { margin-bottom: var(--space-24); }
.contact__hotline { display: grid; gap: var(--space-12); align-content: start; }
.contact__hotline .link { align-self: start; justify-self: start; }
.contact__number {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(30px, 3.6vw, var(--text-heading-lg));
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  text-decoration: none;
}
.contact__number:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- Footer — the single navy band ---------- */
.footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--section-gap) var(--page-gutter) var(--space-60);
  display: grid;
  gap: var(--space-60);
}
.footer__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-60);
  align-items: start;
}
.footer__logo { height: 168px; width: auto; }
.footer__signoff { display: grid; gap: var(--space-16); justify-items: start; }
.footer__signoff .label { font-weight: var(--weight-regular); color: var(--color-steel); }
.footer__signoff .heading { text-decoration: none; }
.footer__signoff .heading:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-16) var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
}
.footer__bottom ul { display: flex; gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.footer__bottom a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 2px; }
.footer__bottom a:hover { border-bottom-color: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --section-gap: 80px; }
  .split, .split--reverse { grid-template-columns: 1fr; min-height: 0; }
  .split__image, .split--reverse .split__image { order: 0; border: var(--hairline); border-left: 0; border-right: 0; aspect-ratio: 4 / 3; }
  .split__text { padding-top: var(--space-60); padding-bottom: var(--space-60); }
  .contact { grid-template-columns: 1fr; gap: var(--space-40); }
  .footer__top { grid-template-columns: 1fr; }
  .footer__logo { height: 128px; }
  .nav__links { gap: var(--space-16); }
  .nav__links li:nth-child(4) { display: none; }   /* hotline link lives in the footer on small screens */
}
@media (max-width: 560px) {
  .nav { flex-wrap: wrap; row-gap: var(--space-12); }
  .nav__wordmark { display: none; }
  .nav__mark { height: 34px; }
  .break { height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav, .link { transition: none; }
}


/* ---------- Subpage components ---------- */
.nav--static { position: sticky; top: 0; }
.hero--sub { min-height: 64vh; min-height: 64svh; }
.hero--sub::after { background: linear-gradient(to bottom, rgba(20, 24, 34, 0.55) 0%, rgba(20, 24, 34, 0.42) 100%); }
.hero--sub .hero__content { max-width: min(100%, 64rem); }
.hero--sub .label { margin-bottom: var(--space-24); font-weight: var(--weight-regular); }
.hero__sub { max-width: 52ch; margin: var(--space-24) auto 0; }

.intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-48);
  padding: var(--section-gap) var(--page-gutter);
  border-bottom: var(--hairline);
}
.intro__text { display: grid; gap: var(--element-gap); max-width: 60ch; }
.intro__text p { font-size: var(--text-subheading); line-height: 1.5; }

.scope { list-style: none; margin: 0; padding: 0; display: grid; }
.scope li { padding: var(--space-20) 0; border-top: var(--hairline); display: grid; gap: var(--space-8); }
.scope li:last-child { border-bottom: var(--hairline); }
.scope .heading { font-size: 24px; }

.steps { padding: 0 var(--page-gutter) var(--section-gap); }
.steps .anchor { padding-top: var(--section-gap); padding-bottom: var(--space-60); }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-48); }
.steps__list li { display: grid; gap: var(--space-12); align-content: start; padding-top: var(--space-24); border-top: var(--hairline); }
.steps__num { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-heading-lg); line-height: 1; letter-spacing: var(--tracking-heading-lg); }
.steps .heading { font-size: 24px; }

.cta { text-align: center; padding: var(--section-gap) var(--page-gutter); border-top: var(--hairline); display: grid; gap: var(--space-16); justify-items: center; }
.cta .heading-lg { max-width: 24ch; margin-bottom: var(--space-24); }
.cta .label { font-weight: var(--weight-regular); }
.cta__number { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(34px, 5vw, var(--text-display)); line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-decoration: none; }
.cta__number:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.cta p { margin-top: var(--space-16); }

.statement__text { max-width: 52ch; margin: var(--space-32) auto 0; font-size: var(--text-subheading); line-height: 1.5; }
.statement__link { margin-top: var(--space-40); }

.values { padding: 0 var(--page-gutter) var(--section-gap); }
.values .anchor { padding-top: var(--section-gap); padding-bottom: var(--space-60); }
.values__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-48); }
.values__list li { display: grid; gap: var(--space-16); align-content: start; padding-top: var(--space-24); border-top: var(--hairline); }

.page-head { display: grid; gap: var(--space-24); padding-bottom: var(--space-60); }
.page-head--narrow { max-width: 72ch; }
.page-head__sub { max-width: 60ch; }
.contact--page { border-top: var(--hairline); align-items: start; }
.contact--page .contact__number { display: inline-block; margin-top: var(--space-12); }
.contact__address { margin-top: var(--space-48); font-style: normal; display: grid; gap: var(--space-8); }
.contact__email { margin-top: var(--space-16); }
.contact__email a { color: inherit; }
.contact__more { margin-top: var(--space-24); }

.form { display: grid; gap: var(--space-24); max-width: 60ch; }
.form__row { display: grid; gap: var(--space-8); }
.form label { font-family: var(--font-sans); font-size: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); text-transform: uppercase; }
.form__optional { text-transform: none; letter-spacing: 0; }
.form input, .form select, .form textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: var(--hairline);
  border-radius: 0;
  padding: var(--space-8) 0;
  outline: none;
}
.form select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-bottom-width: 2px; }
.form__note { font-size: var(--text-body-sm); line-height: 1.4; max-width: 52ch; }
.form__note a { text-underline-offset: 3px; }
.form__submit { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 3px; color: inherit; cursor: pointer; justify-self: start; }
.form__status { max-width: 52ch; font-weight: var(--weight-medium); }
.form__status[data-state="error"] { color: #8f1d1d; }
.form__status[data-state="success"] { color: #1b5e35; }
.form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.legal { padding: 0 var(--page-gutter) var(--section-gap); max-width: 72ch; display: grid; gap: var(--space-40); }
.legal__section { display: grid; gap: var(--space-12); padding-top: var(--space-24); border-top: var(--hairline); }
.legal__section .heading { font-size: 24px; }
.legal a { text-underline-offset: 3px; }
.placeholder { font-family: var(--font-sans); font-size: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); border: 1px dashed var(--color-ink); padding: 2px 6px; }
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-24); }
.credits li { padding-top: var(--space-24); border-top: var(--hairline); display: grid; gap: var(--space-8); }

.footer__top { grid-template-columns: auto 1fr auto auto; gap: var(--space-60); }
.footer__nav ul { list-style: none; margin: var(--space-16) 0 0; padding: 0; display: grid; gap: var(--space-8); }
.footer__nav a { font-family: var(--font-sans); font-size: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.footer__nav a:hover { border-bottom-color: currentColor; }
.footer__nav .label { color: var(--color-steel); font-weight: var(--weight-regular); }
.nav__links a[aria-current="page"] { border-bottom-color: currentColor; }

@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; gap: var(--space-24); }
  .steps__list, .values__list { grid-template-columns: 1fr; gap: var(--space-32); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__top .footer__logo { grid-column: 1 / -1; }
  .footer__top .footer__signoff { grid-column: 1 / -1; }
}