/* ═══════════════════════════════════════════════════════════════════
   ARIA by AUF-WASSEN.

   Same house system as the AUF-WASSEN page, taken from
   AUF_WASSEN_Pitch_Deck_v6_0.pptx: near black ground, cream Georgia,
   gold labels, a short oxblood rule. ARIA is a product inside the
   house, not a second brand, so it does not get its own palette.

   The one register shift: the house page uses gold for its accents and
   keeps oxblood for rules, while ARIA uses oxblood for the things you
   act on (the beta link, the status mark). Product surfaces point
   somewhere; institutional ones do not.

   No boxes, no cards, no gradients, no rounded corners, no sans.
   ═══════════════════════════════════════════════════════════════════ */

: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, 6.5vw, 120px);
  --gap: clamp(30px, 4.5vw, 68px);
}

* { 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, behind the content so the type stays crisp. */
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);
  margin-bottom: clamp(30px, 4vw, 52px);
}

h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.14;
  letter-spacing: -.01em;
  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; }

.rule {
  width: 148px;
  height: 2px;
  background: var(--oxblood);
  margin: 26px 0 22px;
}

/* ── 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-house { color: var(--mut); }

.bar-status {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
  border: 1px solid var(--oxblood);
  padding: 6px 13px 5px;
}

/* ── hero ──────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
  padding: clamp(62px, 10vw, 140px) var(--pad) clamp(58px, 9vw, 124px);
  border-bottom: 1px solid var(--rule);
}

.hero-type .kicker { margin-bottom: 26px; }

.wordmark {
  font-weight: 700;
  font-size: clamp(66px, 13vw, 178px);
  line-height: .9;
  letter-spacing: -.028em;
  color: var(--cream);
}

.motto {
  font-weight: 700;
  font-size: clamp(11.5px, 1.3vw, 14px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-emblem { width: clamp(112px, 13vw, 168px); margin-top: clamp(38px, 5.5vw, 76px); }

.hero-body { padding-top: clamp(4px, 2.5vw, 34px); max-width: 46ch; }

.lead {
  font-size: clamp(20px, 2.05vw, 26px);
  line-height: 1.45;
  letter-spacing: -.008em;
  color: var(--cream);
  margin-bottom: 20px;
}

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

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

/* A framed label, not a SaaS button. */
.cta {
  display: inline-block;
  border: 1px solid var(--oxblood);
  background: var(--oxblood);
  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;
}
.cta:hover { background: transparent; color: var(--cream); }

.cta-note { font-size: 13.5px; color: var(--mut); }
.cta-note a { color: var(--warm); text-decoration: none; border-bottom: 1px solid var(--rule); }
.cta-note a:hover { color: var(--gold); }

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

.band {
  padding: clamp(56px, 7.5vw, 110px) var(--pad);
  border-bottom: 1px solid var(--rule);
}

.band-petrol { background: var(--petrol); }
.band-petrol .kicker { color: var(--cream2); }
.band-petrol h3 { color: var(--cream); }
.band-petrol p { color: #CFDDE2; }
.band-petrol .row { border-top-color: rgba(243,232,210,.18); }

/* ── pipeline ──────────────────────────────── */

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

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

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

.pipeline p { font-size: 16.5px; line-height: 1.64; }

/* ── capability rows ───────────────────────────
   A ruled specification list, the way the deck sets its entity tables.
   Boxed cards were the single most "generic dashboard" thing on the old
   page, so there are none. */

.rows { border-top: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(14px, 3vw, 44px);
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}

.row-num {
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--gold);
}

.row h3 { margin-bottom: 0; }
.row p { font-size: 16.5px; line-height: 1.62; }

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

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

.rules > div { border-top: 1px solid var(--rule); padding-top: 21px; }
.rules p { font-size: 16.5px; line-height: 1.64; }

/* ── access ────────────────────────────────── */

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

.access-main { max-width: 58ch; }
.access-side { border-top: 1px solid var(--rule); padding-top: 20px; }

.side-note {
  max-width: 32ch;
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mut);
}

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

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  padding: clamp(30px, 3.4vw, 44px) var(--pad) clamp(44px, 5vw, 62px);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
}

.foot-left { display: flex; align-items: center; gap: 12px; }
.foot-right { display: flex; flex-wrap: wrap; gap: 12px clamp(18px, 2.6vw, 32px); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--gold); }

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

@media (max-width: 1040px) {
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .pipeline { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .access { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; }
  .row p { grid-column: 2; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .rules { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .bar-name { font-size: 11px; letter-spacing: .2em; }
  .bar-status { font-size: 9.5px; letter-spacing: .18em; }
}