/* =============================================================================
   Argus Inspection Station — landing page styles

   Colour: white sheet, navy ink (the logo), logo-yellow headings, black body.
   Headings set in Montserrat; body in Open Sans; small labels in system mono.

   Design constraints:
     - Headings speak in the logo's yellow, Montserrat. Nothing else is yellow
       text except the .mark data swatch (navy text on a yellow ground).
     - Navy is the action colour: CTA fill and text links. On the dark close
       panel the CTA flips to yellow with navy text.
     - 2px corner radius everywhere. Hairline 1px borders, zero box-shadows.
   ============================================================================= */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Surfaces — white sheet, cool-grey blocks set back */
  --paper:            #ffffff;                 /* the whole sheet */
  --panel:            #F4F6F8;                 /* figure plates, blocks set back */
  --panel-deep:       #ECEFF3;                 /* the photo well itself */

  /* Navy ink — the logo colour: rules, strong text, CTA, close-panel ground */
  --ink:              #003354;
  /* Logo yellow — all headings (Montserrat) speak in this. */
  --head:             #F9D500;
  --body:             #141414;                 /* running body copy, black */
  --mid:              #5B6570;                 /* mono labels, eyebrows, captions */
  /* Body-copy tints — all near-black, readable on white. */
  --tint-26:          #141414;
  --tint-30:          #1E1E1E;
  --tint-32:          #262626;
  --tint-36:          #333333;

  /* Lines — light cool grey */
  --hairline:         #E3E7EC;
  --hairline-strong:  #C9D0D8;
  --chip-dash:        #C9D0D8;

  /* Inverted band — the close panel (navy) */
  --inv-text:         #ffffff;
  --inv-sub:          #C7D2DC;
  --inv-caption:      #9FB0BE;
  --crop-inv:         #4A6B84;                 /* close-panel corner ticks */

  /* Navy — CTA fill and text links. */
  --accent:           #003354;
  --accent-hover:     #00243D;                 /* on light backgrounds */
  --accent-hover-dk:  #E5C400;                 /* yellow CTA hover on the close panel */
  --on-accent:        #ffffff;

  /* Logo yellow — highlight behind a measured value, navy text on top. */
  --mark:             #F9D500;


  --radius: 2px;
  --container: 1200px;
  --head-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Section vertical padding (argument overrides to the larger step). */
  --sp: clamp(80px, 9vw, 128px);
}

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }

html { background: var(--paper); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* All headings speak in the logo's yellow, set in Montserrat. */
h1, h2, h3 { font-family: var(--head-font); color: var(--head); }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--mid); }

::selection { background: var(--accent); color: var(--on-accent); }

img { max-width: 100%; }

/* Keyboard focus — neutral (never the accent), no shadow. */
a:focus-visible,
.cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.close a:focus-visible { outline-color: var(--inv-text); }

/* Skip link — visible only on keyboard focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 16px;
  border-radius: var(--radius);
}
.skip-link:focus { left: 8px; top: 8px; color: var(--paper); }

.container { max-width: var(--container); margin: 0 auto; }
/* Narrow, airy wrapper for the slimmed content sections. */

/* ---- Header (sticky) ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Header lockup: mark 28px, 11px gap, wordmark — vertically centred, not
   baseline-aligned. The mark is only ever cleared on --paper or --panel. */
.lockup { display: flex; align-items: center; gap: 12px; }
/* Header lockup shown once: icon and ARGUS wordmark at the same height. */
.brand-mark { height: 30px; width: auto; display: block; }
.brand-word { height: 30px; width: auto; display: block; }
.vrule { width: 1px; height: 14px; background: var(--hairline-strong); }
.brand .vrule { align-self: center; }
/* The claim next to the wordmark is set in the display face, not the mono
   label style: it is a statement, not a caption. */
.tagline { font-family: var(--head-font); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--mid); }

.header-meta { display: flex; align-items: center; gap: 14px; }
.site-url { font-family: var(--mono); font-size: 11px; color: var(--mid); }
.lang { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.lang .sep { color: var(--mid); }
.lang .active { color: var(--ink); font-weight: 700; }
.lang a { color: var(--mid); }

/* ---- CTA button ---------------------------------------------------------- */
.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 16px 34px;
  border-radius: var(--radius);
  min-height: 44px;
}
.cta:hover { background: var(--accent-hover); color: var(--on-accent); }
.cta--on-dark { background: var(--mark); color: var(--ink); }
.cta--on-dark:hover { background: var(--accent-hover-dk); color: var(--ink); }
/* The CTA notes read as prose, not as machine labels, so they stay out of the mono
   label style used for data and metadata. They are set in the display face, not the
   body face: a note is an aside to its CTA, and the shared face keeps the hero note
   and the closing note reading as the same element rather than two. */
.cta-note { font-family: var(--head-font); font-size: 13px; color: var(--mid); }

/* Copyable email under the primary CTAs — same action as the button, exposed as
   selectable text (the mailto fails silently on desktops without a mail client).
   Display face for the same reason as .cta-note above. */
.cta-alt { font-family: var(--head-font); font-size: 13px; color: var(--mid); margin: 14px 0 0; }
.cta-alt a { color: var(--mid); text-decoration: underline; text-underline-offset: 2px; }
.cta-alt a:hover { color: var(--ink); }
.close-cta .cta-alt { margin: 0; color: var(--inv-caption); }
.close-cta .cta-alt a { color: var(--inv-text); }
.close-cta .cta-alt a:hover { color: var(--inv-sub); }

/* ---- Type helpers -------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow-dash { width: 24px; height: 1px; background: var(--ink); }

.h1 {
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-weight: 700;
  margin: 24px 0 0;
}
.h2-section {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  font-weight: 700;
  margin: 0;
}
.h2-close {
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-weight: 700;
  margin: 0;
}

.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  margin: 28px 0 0;
  color: var(--tint-30);
  text-wrap: pretty;
}

/* running-text measures */
.mw46 { max-width: 46ch; }
.mw52 { max-width: 52ch; }

/* Highlight behind a measured value — the page's one and only yellow. Ink text
   on top (9.2:1), never yellow text. The value is held on one line with nbsp in
   the markup; box-decoration-break is the belt-and-braces for narrow viewports
   where even that has to break. */
.mark {
  background: var(--mark);
  color: var(--ink);
  font-weight: 700;
  padding: 2px 4px;
  margin: 0 -2px;
  border-radius: var(--radius);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { border-bottom: 1px solid var(--hairline); }
.hero-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
.hero-left {
  padding: clamp(56px, 7vw, 112px) clamp(24px, 3vw, 56px) clamp(56px, 7vw, 112px) 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-right {
  padding: clamp(28px, 3vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cta-row {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* Hero benefits — stacked one per line at HEADLINE scale (they continue the H1),
   in the CTA cobalt. */

/* Photo figure. Capped at 360px: the clip is 720px wide, so this is the widest
   the well can render and still be a true 2x. */
.figure { position: relative; width: 100%; max-width: 360px; }

.figure-well {
  border: 1px solid var(--hairline-strong);
  background: var(--panel-deep);
  aspect-ratio: 720 / 900;
  overflow: hidden;
  border-radius: var(--radius);
}
.figure-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Two-column hero (the grid splits above 800px): the well stands as tall as the
   text column beside it, from the H1 down to the closing mail line. Its top edge
   is the hero-left padding plus what sits above the H1 there — the eyebrow line
   (14px) and the H1's own 24px lead-in — so both columns start on one baseline.

   The well is taken out of flow: as a flex/grid item it could not shrink below
   the video's intrinsic height, which pushed the whole row taller than the text
   at middle widths. Absolute against .hero-right, the row height comes from the
   text column alone and the well simply fills what is left. It also drops the
   360px cap — at this height a narrow well would crop the screen out of frame,
   so it takes the column width and stays near the clip's own 4:5. */
@media (min-width: 801px) {
  .hero-right { position: relative; padding: 0; }
  .figure {
    position: absolute;
    inset: calc(clamp(56px, 7vw, 112px) + 14px + 24px) clamp(28px, 3vw, 56px) clamp(56px, 7vw, 112px);
    width: auto;
    max-width: none;
  }
  .figure-well { height: 100%; aspect-ratio: auto; }
}

/* ---- Argument steps ------------------------------------------------------ */
.steps { margin-top: 40px; border-top: 1px solid var(--hairline); }
/* "So funktioniert's": steps on the left, the guide video (square 1:1) beside them. */
.steps-layout { max-width: 1160px; margin: 0 auto; padding: clamp(72px, 10vw, 132px) 24px;
  display: grid; grid-template-columns: 1fr; gap: 44px; }
.steps-col { min-width: 0; }
@media (min-width: 920px) {
  .steps-layout { grid-template-columns: minmax(0, 1fr) 500px; gap: 64px; align-items: start; }
  /* The video hangs from the bottom of the row: its lower edge sits on the
     closing hairline of step 03, not up at the section heading. */
  .steps-video { align-self: end; }}
.steps-video { margin: 0 auto; max-width: 500px; width: 100%; }
.steps-video-el { display: block; width: 100%; aspect-ratio: 1/1; border: 1px solid var(--hairline-strong); border-radius: 2px; background: #000; }

/* Demo videos: portrait 9:16 wells. */

/* Alternating sensitivity/live video beside the section heading. */

/* Video beside a single step (Show good parts). */

/* Alternating player — two clips crossfade inside one well. */
.figure-well { position: relative; }

/* Cobalt caption above the hero video. */

/* Inline brand lockup — small eye icon + ARGUS, for mentions in body copy.
   ARGUS always in the wordmark's navy; on the dark close panel it goes light. */
.argus { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; color: var(--ink); }
.close .argus { color: var(--inv-text); }
.step {
  padding: 44px 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px 56px;
}
.step-head { display: flex; align-items: flex-start; gap: 24px; }
.step-num {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--mid);
  padding-top: 6px;
}
.step-title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}
.step-body { font-size: 16px; line-height: 1.6; color: var(--tint-36); margin: 0; text-wrap: pretty; }

/* ---- Close (inverted, full-bleed) --------------------------------------- */
.close { background: var(--ink); color: var(--inv-text); }
.close-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(96px, 11vw, 160px) 24px;
  position: relative;
}
.close-content { text-align: center; }

/* The closing panel speaks in one voice: its sub-line joins the H2 in Montserrat
   instead of the body face, so the last screen reads as a single sign-off rather
   than one more block of running text. The note and e-mail line below it are
   already on that face site-wide (see .cta-note / .cta-alt); the CTA button
   deliberately is not — the same button sits in the hero and in the sticky bar and
   has to look identical in all three places. */
.close-sub {
  font-family: var(--head-font);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--inv-sub);
  /* 48ch, not the 52ch used on the body face: Montserrat sets ~8% wider per
     character, so the smaller count holds the same physical measure. */
  max-width: 48ch;
  margin: 24px auto 0;
  text-wrap: pretty;
}
.close-cta {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.close-cta .cta-note { color: var(--inv-caption); }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hairline); }
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 24px 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px 40px;
}
.footer-wordmark { height: 18px; width: auto; display: block; }
.footer-tagline { font-family: var(--mono); font-size: 11px; color: var(--mid); margin-top: 4px; }
.footer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mid);
  margin-top: 24px;
}
.chip { border: 1px dashed var(--chip-dash); border-radius: var(--radius); padding: 4px 9px; }
.footer-email { color: var(--mid); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
}
.footer-legal a { color: var(--mid); }

/* ---- Mobile sticky CTA --------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 250ms ease-out;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .cta {
  display: block;
  text-align: center;
  padding: 15px 24px;
}

/* ---- Scroll reveal ------------------------------------------------------- */
/* The .js-reveal class is added to <html> by an inline head script only when JS
   is on AND prefers-reduced-motion is not set. Without it, content is fully
   visible (no-JS and reduced-motion both fall through to the static page). */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  /* Ease-out: quick start, soft settle. */
  transition: opacity 500ms ease-out, transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---- Responsive ---------------------------------------------------------- */
@media (min-width: 860px) {
  .sticky-cta { display: none !important; }}
@media (max-width: 859px) {
  /* The rail row already supplies the section's top gap, so the content drops
     its own and the number sits directly above its heading. */}

/* ---- Legal pages (Impressum / Datenschutz / Imprint / Privacy) ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 24px; }
.legal h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 6px;
}
.legal-updated { font-family: var(--mono); font-size: 12px; color: var(--mid); margin: 0 0 36px; }
.legal h2 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 44px 0 12px;
}
.legal h3 { font-size: 16px; font-weight: 700; margin: 24px 0 6px; }
.legal p, .legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--tint-32);
  max-width: 65ch;
  text-wrap: pretty;
}
.legal ul { padding-left: 20px; }
/* Links stay ink, underlined. The palette permits cobalt for text links at 16px+,
   but not here: cobalt is only 4.1:1 on paper (fails AA at 16px normal weight),
   these pages carry several links at once — which would break "exactly one cobalt
   element in view" — and the design reference uses cobalt on the CTA and nowhere
   else. Cobalt on this site means one thing: the contact CTA. */
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal dl { margin: 0; }
.legal dt {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid);
  margin-top: 16px;
}
.legal dd { margin: 2px 0 0; font-size: 16px; line-height: 1.6; }

.legal-note {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 40px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--tint-36);
  background: var(--panel);
}
.legal-note strong { color: var(--ink); }
.legal-back { margin-top: 48px; }