/* ═══════════════════════════════════════════════════════════════════
   AUF-WASSEN, institutional one-pager.

   This is not a chosen palette, it is THE house system, lifted from
   AUF_WASSEN_Pitch_Deck_v6_0.pptx by reading the colours actually used
   on its slides (near black 231 uses, cream 129, gold 84, oxblood 31)
   and its typeface (Georgia, 419 of 428 runs). Do not substitute.

   Rules carried over from the deck:
     - near black is the GROUND, cream is the type, gold is the accent
       that labels things, oxblood is a short rule used sparingly
     - Georgia throughout, no sans anywhere
     - kickers are uppercase, gold, widely letter-spaced
     - sections are numbered "02 — LIKE THIS"
     - negative space does the work; there are no boxes, no cards,
       no gradients, no rounded corners, no shadows
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --black:  #090909;
  --cream:  #F3E8D2;
  --cream2: #EADCBE;
  --gold:   #B48A3C;
  --oxblood:#9D1C20;
  --petrol: #173F4D;
  --warm:   #B9B1A5;
  --mut:    #6E6557;
  --rule:   #262320;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

  --pad: clamp(24px, 7vw, 130px);
  --gap: clamp(30px, 5vw, 80px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; scroll-behavior: smooth; }

body {
  position: relative;
  background: var(--black);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Archival grain, matching the emblem's own texture.
   Deliberately BEHIND the content (z-index -1) rather than an overlay on
   top of it: a veil over the text would soften every letter, and the
   brief was grain with crisp type. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.79 0 0 0 0 0.66 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

a { color: inherit; }
::selection { background: var(--gold); color: var(--black); }
img { display: block; max-width: 100%; }

/* ── shared type ───────────────────────────── */

.kicker {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

h2 {
  font-weight: 700;
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.16;
  letter-spacing: -.008em;
  color: var(--cream);
  margin-bottom: 22px;
}

h3 {
  font-weight: 700;
  font-size: 19px;
  color: var(--cream2);
  margin-bottom: 9px;
}

p { color: var(--warm); }
p + p { margin-top: 16px; }

/* The deck's signature divider: a short oxblood rule, never full width. */
.rule {
  width: 132px;
  height: 2px;
  background: var(--oxblood);
  margin: 26px 0;
}

/* ── top bar ───────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px var(--pad);
  border-bottom: 1px solid var(--rule);
}

.bar-mark { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.emblem-sm { width: 30px; }

.bar-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .26em;
  color: var(--cream);
}

.bar-nav {
  display: flex;
  gap: clamp(16px, 2.6vw, 38px);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mut);
}
.bar-nav a { text-decoration: none; }
.bar-nav a:hover { color: var(--gold); }

/* ── hero: the deck cover ──────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
  padding: clamp(66px, 11vw, 150px) var(--pad) clamp(60px, 10vw, 136px);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-weight: 700;
  font-size: clamp(40px, 8.4vw, 116px);
  line-height: .98;
  letter-spacing: -.022em;
  color: var(--cream);
}

.hero-kicker {
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 19px);
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.5;
  max-width: 20ch;
}

.hero-sub {
  margin-top: 20px;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--cream);
  max-width: 34ch;
}

.hero-emblem { width: min(100%, 330px); margin-left: auto; }

/* ── bands ─────────────────────────────────── */

.band {
  padding: clamp(58px, 8vw, 118px) var(--pad);
  border-bottom: 1px solid var(--rule);
}

/* ── two-column label / body, the deck's slide grid ── */

.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.9fr);
  gap: var(--gap);
  align-items: start;
}

.two-label { border-top: 1px solid var(--rule); padding-top: 15px; }
.two-body { max-width: 60ch; }

.lead {
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.44;
  letter-spacing: -.008em;
  color: var(--cream);
  margin-bottom: 24px;
}

/* ── numbered principles ───────────────────── */

#principles .kicker { display: block; margin-bottom: clamp(34px, 4.5vw, 58px); }

.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.cols article { border-top: 1px solid var(--rule); padding-top: 21px; }

.num {
  display: block;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--gold);
  margin-bottom: 20px;
}

.cols p { font-size: 16.5px; line-height: 1.66; }

/* ── ARIA band: petroleum, the deck's second ground ── */

.band-petrol { background: var(--petrol); border-bottom: none; }
.band-petrol .kicker { color: var(--cream2); }
.band-petrol .two-label { border-top-color: rgba(243,232,210,.2); }
.band-petrol p { color: #CFDDE2; }

/* ── actions ───────────────────────────────── */

.cta-line {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

/* A framed label, not a button. The deck has no buttons. */
.cta {
  display: inline-block;
  border: 1px solid var(--cream);
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 15px 30px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.cta:hover { background: var(--cream); color: var(--black); }
.band-petrol .cta:hover { color: var(--petrol); }

.cta-note {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--warm);
}

.contact-mail {
  margin-top: 26px;
  font-size: clamp(21px, 2.5vw, 30px);
}
.contact-mail a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 3px;
}
.contact-mail a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ── footer ────────────────────────────────── */

.foot { padding: clamp(44px, 5vw, 70px) var(--pad) clamp(48px, 6vw, 76px); }

.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .26em;
  color: var(--cream);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(18px, 2.6vw, 34px);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
}
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--gold); }

/* The deck sets its legal line in muted italic. Same here. */
.disclaimer {
  margin-top: 26px;
  max-width: 62ch;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mut);
}

.copyline {
  margin-top: 16px;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mut);
}

/* ── responsive ────────────────────────────── */

@media (max-width: 940px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .hero-emblem { width: min(62%, 260px); margin-left: 0; }
  .two { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 38px; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .bar-nav { gap: 15px; font-size: 10px; letter-spacing: .14em; }
  .bar-name { font-size: 11px; letter-spacing: .2em; }
}

/* Footer about-line. Present for a reader who lands here knowing only the
   name; it also makes the company description crawlable text rather than
   something only a machine reads out of the JSON-LD. */
.about {
  margin-top: 24px;
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--warm);
}

.contact-note {
  margin-top: 14px;
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mut);
}