/* Ubuntu Mono self-hosted (the exact files the live Webflow site serves).
   Without the webfont, machines lacking the system font fall back to
   proportional fonts and the whole site renders visibly smaller/narrower. */
@font-face {
  font-family: "Ubuntu Mono";
  src: url("../fonts/UbuntuMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Mono";
  src: url("../fonts/UbuntuMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Mono";
  src: url("../fonts/UbuntuMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Mono";
  src: url("../fonts/UbuntuMono-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --lyth-sky: #acd7e1;
  --lyth-navy: #293c54;
  --lyth-steel: #548bab;
  --lyth-teal: #27626e;
  --lyth-skymid: #77b9ca;
  /* Exact top sky band of hero-bg-desktop.png — used as the header
     background on subpages so every page opens with the same sky. */
  --lyth-skytop: #57b7c9;
  --lyth-ink: #333333;
  --lyth-white: #ffffff;
  --lyth-shadow: #000000;
  --shell: 1280px;
  /* --- Unified type scale (site-wide; reference = the /karriere/ Webflow
     port, whose body copy renders at 20.8px = 1.3rem on desktop).
     Every component below uses these steps — do NOT introduce new ad-hoc
     font sizes; pick a step instead:
       body  1.3rem  — running text, list items, links in copy
       small 1.1rem  — meta text, hints, secondary links
       card-h 1.4rem — card headings (h3-level)
       h2    2rem    — section headings (.lyth-heading)
       h1    2.3rem  — hero headline */
  --lyth-fs-body: 1.3rem;
  --lyth-lh-body: 1.7rem;
  --lyth-fs-small: 1.1rem;
  --lyth-lh-small: 1.5rem;
  --lyth-fs-card-h: 1.4rem;
  --lyth-lh-card-h: 1.8rem;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif; font-size: var(--lyth-fs-body); line-height: var(--lyth-lh-body); color: var(--lyth-ink); background: var(--lyth-sky); }
.shell { width: min(var(--shell), calc(100% - 32px)); margin: 0 auto; }
/* --- ONE header system for every page ---
   Sky background (exact hero top-band color) with navy text. The header is
   part of the page flow and SCROLLS OUT with it — no sticky bar, no color
   switch (same behaviour as the live Webflow site; user decision 2026-08-13).
   Home + Karriere/Unterwelt float it transparently over their hero. */
.site-header { background: var(--lyth-skytop); color: var(--lyth-navy); position: relative; z-index: 100; }
.site-footer { background: var(--lyth-navy); color: var(--lyth-white); }
/* Frontpage: header floats absolutely over the hero background image so there is no
   second sky band above the hero. The real transparent logo image stays visible;
   only the pixel world lives in the background image. */
body.home .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: transparent;
  z-index: 50;
}

/* The homepage logo image is sized in the later header-logo block so it wins
   over the generic `.site-brand img` rule. */
body.home .site-brand { display: block; }

/* Hide the abstract sprite stage on the homepage — the BG image already carries the
   LYTH world. Keeping the markup so the smoke-test still finds the IDs/filenames. */
body.home .lyth-hero__stage { display: none; }
/* Single-column layout for hero copy when the stage is hidden */
body.home .lyth-hero__inner { grid-template-columns: 1fr; }
.shell--header, .shell--footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; }
/* Header is wider than the content container so the 8-item nav + large logo
   fit on one line on desktop. */
.shell--header { width: 92%; max-width: 1760px; }
.site-brand, .site-footer a { color: inherit; text-decoration: none; }
/* Menu toggle in the LYTH pixel look: rectangular, hard border + shadow
   (matches the button system, no rounded pill). */
.menu-toggle {
  display: none;
  min-height: 48px;
  padding: 0 20px;
  border: 3px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  box-shadow: 4px 4px var(--lyth-shadow);
  cursor: pointer;
}
.menu-toggle:hover {
  box-shadow: 2px 2px var(--lyth-shadow);
  transform: translate(2px, 2px);
}

.menu-primary {
  margin-left: auto;
}

.menu-primary__list { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
/* Nav links inherit the header color: navy on the sky, white once scrolled. */
.menu-primary__list a { color: inherit; text-decoration: none; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
@media (min-width: 1100px) {
  /* 8 nav items: keep gaps tight enough that "Kontakt" stays visible. */
  .menu-primary__list { gap: 32px; }
}

/* Logo size: large like the Webflow original — bound to the H1 column edge */
.site-brand__logo { width: clamp(220px, 22vw, 320px); height: auto; display: block; }
.menu-primary__secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--lyth-skymid);
  color: var(--lyth-navy);
}

.menu-primary__list .menu-primary__secondary-link,
.menu-primary__secondary-link--standalone {
  color: var(--lyth-navy);
}

.menu-primary__secondary-link--standalone {
  margin-left: 16px;
  text-decoration: none;
}

/* Nav sizing ladder (measured with nowrap items, logo 320px, shell 92%;
   7 items since "Ueber LYTH" was dropped and Karriere became "LYTH-Team"):
   full-size nav (1.4rem/32px = 1047px) fits from 1520px viewport width,
   compact nav (1.15rem/20px = 822px) fits from 1210px. Below that the
   burger menu takes over directly — items never wrap or clip. */
@media (min-width: 1210px) and (max-width: 1519px) {
  .menu-primary__list { gap: 20px; }
  .menu-primary__list a { font-size: 1.15rem; }
}

@media (max-width: 1209px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  .shell--header {
    flex-wrap: wrap;
  }

  .menu-primary {
    margin-left: 0;
    width: 100%;
  }

  .js-ready .menu-primary {
    display: none;
  }

  /* Open panel: solid navy sheet with the LYTH pixel shadow — the header
     itself can be transparent (home/karriere hero), so the panel must bring
     its own background. */
  .js-ready .menu-primary.is-open {
    display: block;
    background: var(--lyth-navy);
    border: 5px solid var(--lyth-sky);
    box-shadow: 8px 8px var(--lyth-shadow);
    padding: 8px 16px 16px;
    margin-bottom: 12px;
  }

  /* Links on the navy panel are always white — overrides the navy link color
     used while the transparent hero header is not scrolled (home + karriere,
     incl. the higher-specificity rules in karriere.css). */
  .js-ready .menu-primary.is-open .menu-primary__list a,
  body.home .site-header:not(.is-scrolled) .menu-primary.is-open .menu-primary__list a,
  body.page-template-page-karriere .site-header:not(.is-scrolled) .menu-primary.is-open .menu-primary__list a {
    color: var(--lyth-white);
  }

  .menu-primary__secondary-link--standalone {
    margin-left: 0;
    order: 3;
  }

  .menu-primary {
    order: 4;
  }

  .menu-primary__list {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 8px;
  }

  .menu-primary__list a,
  .menu-primary__secondary-link,
  .menu-primary__secondary-link--standalone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
  }
}

@media (max-width: 640px) {
  .shell {
    width: min(var(--shell), calc(100% - 24px));
  }

  .shell--header,
  .shell--footer {
    gap: 16px;
  }
}

/* ============================================================
   LYTH HOMEPAGE — Section system, hero, cards, grids
   Implements Plan Task 4 per docs/design-direction.md
   ============================================================ */

/* --- Logo in header: ONE size on every page (was 180px on subpages vs
   320px on home, which made the pages look unrelated) --- */
.site-brand img {
  display: block;
  width: clamp(220px, 22vw, 320px);
  height: auto;
  max-width: none;
}
@media (max-width: 640px) {
  .site-brand img {
    width: 180px;
    height: auto;
  }
}

/* --- Shared section primitives --- */
.lyth-section {
  padding: 5vh 0;
  width: 100%;
}

.lyth-section--sky    { background: var(--lyth-sky); }
.lyth-section--navy   { background: var(--lyth-navy); }
.lyth-section--teal   { background: var(--lyth-teal); }
.lyth-section--stars  {
  background-color: var(--lyth-navy);
  background-image: url('../../assets/svg/bg-sternenhimmel.svg');
  background-repeat: repeat-y;
  background-size: 100%;
}
.lyth-section--ground {
  background-color: var(--lyth-sky);
  background-image: url('../../assets/svg/bg-floor.svg');
  background-repeat: repeat-y;
  background-size: 100%;
}

/* --- Container --- */
.lyth-container {
  width: 80%;
  max-width: 1600px;
  margin: 0 auto;
}

/* --- Typography primitives --- */
.lyth-heading {
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 400;
  color: var(--lyth-navy);
  margin: 0 0 1.5rem;
}
.lyth-heading--white { color: var(--lyth-white); }

.lyth-text {
  font-size: var(--lyth-fs-body);
  line-height: var(--lyth-lh-body);
  color: var(--lyth-ink);
  margin: 0 0 1rem;
}
.lyth-text--white { color: var(--lyth-white); }

.lyth-eyebrow {
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lyth-navy);
  margin: 0 0 0.75rem;
}

/* --- Buttons (Design Direction Section 2.3 — binding) --- */
.lyth-button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: transparent;
  border: 5px solid var(--lyth-white);
  border-radius: 0;
  color: var(--lyth-white);
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: 1.4rem;
  line-height: 2.5rem;
  text-decoration: none;
  box-shadow: 8px 8px var(--lyth-shadow);
  cursor: pointer;
}
.lyth-button--inverted {
  border-color: var(--lyth-sky);
  background-color: var(--lyth-navy);
  color: var(--lyth-white);
}
.lyth-button:hover,
.lyth-button--inverted:hover {
  box-shadow: 4px 4px var(--lyth-shadow);
  transform: translate(4px, 4px);
}

/* --- Cards (Design Direction Section 2.4) --- */
.lyth-card {
  background: #F5EFE2;
  border: 5px solid var(--lyth-navy);
  border-radius: 0;
  box-shadow: 8px 8px var(--lyth-shadow);
  padding: 24px;
}
.lyth-card--full {
  width: 100%;
}
.lyth-card__heading {
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: var(--lyth-fs-card-h);
  line-height: var(--lyth-lh-card-h);
  font-weight: 700;
  color: var(--lyth-navy);
  margin: 0.75rem 0 0.5rem;
}
.lyth-card__body {
  font-size: var(--lyth-fs-body);
  line-height: var(--lyth-lh-body);
  color: var(--lyth-ink);
  margin: 0;
}

/* --- Focus-visible outlines for keyboard accessibility --- */
:where(
  .lyth-button,
  .lyth-audience-card,
  .lyth-insights-card a,
  .lyth-card a,
  .lyth-hero__secondary-link,
  .lyth-insights-head__all,
  .lyth-people-band__link
):focus-visible {
  outline: 3px solid var(--lyth-navy);
  outline-offset: 4px;
}
/* On dark sections (navy/teal/stars) use white outline for contrast */
:where(
  .lyth-section--navy,
  .lyth-section--teal,
  .lyth-section--stars
) :focus-visible {
  outline-color: var(--lyth-white);
}

/* ============================================================
   HERO (Section 1)
   ============================================================ */
.lyth-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Static frame of the original Webflow Lottie world: 3 sky bands, pixel clouds, floor with sign+figure+pipe. */
  background:
    var(--lyth-skymid)
    url('../img/hero-bg-desktop.png') center top / cover no-repeat;
  position: relative;
  overflow: hidden;
}
/* Override the flat section--sky color set by Section 4 catalog */
.lyth-hero.lyth-section--sky {
  background:
    var(--lyth-skymid)
    url('../img/hero-bg-desktop.png') center top / cover no-repeat;
}

/* Hero copy lives in the signature LYTH pixel box (navy tab + sky body with
   5px border + 8px hard shadow — same pattern as the Karriere closing box),
   lower-left over the pixel world. The solid box keeps the copy readable
   even where it overlaps the cloud sprites in the BG image. */
/* Box hangs high in the sky but never collides with the (absolute) header:
   clamp keeps a minimum clearance below the logo on short viewports. */
.lyth-hero__inner { position: relative; z-index: 2; padding-top: clamp(185px, 20vh, 260px); padding-bottom: 8vh; }
.lyth-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  flex: 1;
}
.lyth-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.lyth-hero__box {
  /* Wider + flatter box (landscape, not square-ish): the H1 wraps in two
     lines instead of three and the CTA row fits beside the link. */
  max-width: 780px;
  /* Nudge the box right just enough that the pixel figure + sign at the
     lower left of the background world stay visible. Collapses on mobile. */
  margin-left: clamp(0px, 10vw, 190px);
}
@media (max-width: 900px) {
  .lyth-hero__box { margin-left: 0; }
}
.lyth-hero__box-tab,
.lyth-page-hero__tab {
  display: inline-block;
  position: relative;
  margin: 0 0 -5px;
  padding: 10px 30px;
  border: 5px solid var(--lyth-sky);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: var(--lyth-navy);
  color: var(--lyth-white);
  font-size: 1.15rem;
  line-height: 1.6rem;
  font-weight: 700;
  box-shadow: 8px 8px var(--lyth-shadow);
}
.lyth-hero__box-body,
.lyth-page-hero__body {
  position: relative;
  z-index: 2;
  border: 5px solid var(--lyth-navy);
  background: var(--lyth-sky);
  padding: 36px 40px;
  box-shadow: 8px 8px var(--lyth-shadow);
}

/* --- Continuous LYTH sky for sub-pages ---
   sky-bands.png is a cloud-free 172px strip cut from hero-bg-desktop.png
   (same three bands incl. the jagged pixel transitions), tiled horizontally.
   Below the last band the page continues in plain --lyth-sky. Apply the
   .lyth-sky-page class on a page wrapper; sections inside stay transparent. */
.lyth-sky-page {
  background-color: var(--lyth-sky);
  background-image: url('../img/sky-bands.png');
  background-repeat: repeat-x;
  /* Match the homepage band geometry exactly:
     1. The homepage hero image runs BEHIND the transparent header; on
        sub-pages the wrapper starts below the sticky header, so shift the
        strip up by the header height (logo 2.5:1 ratio -> 8.8vw + 40px
        padding, capped at 168px like the logo clamp).
     2. The homepage uses `cover`, scaling bands with the viewport width;
        172px strip / 1440px source width = 11.945vw. */
  background-position: left calc(-1 * min(168px, 8.8vw + 40px));
  background-size: 11.945vw auto;
  image-rendering: pixelated;
}
.lyth-sky-page .lyth-page-hero,
.lyth-sky-page .lyth-section--sky {
  background: transparent;
}

/* --- Unified sub-page intro band (page hero) ---
   The band uses the exact header sky color, so the header and the intro
   read as ONE continuous sky block on every page. The copy sits in the
   same signature pixel box as the homepage hero — same position, same
   look, on every sub-page. */
.lyth-page-hero {
  background: var(--lyth-skytop);
  padding: 40px 0 72px;
}
.lyth-page-hero__box { max-width: 860px; }
/* Wide variant for pages whose full intro copy lives inside the box:
   full container width -> copy reflows into fewer lines -> flatter box. */
.lyth-page-hero__box--wide { max-width: none; }
.lyth-page-hero__box--wide .lyth-page-hero__body .lyth-text { max-width: none; }
.lyth-page-hero__box--wide .lyth-page-hero__body .lyth-text + .lyth-text { margin-top: 1rem; }
.lyth-page-hero__body .lyth-heading {
  font-weight: 700;
  margin-bottom: 1rem;
}
.lyth-page-hero__body .lyth-text {
  color: var(--lyth-navy);
  max-width: 62ch;
  margin-bottom: 0;
}
.lyth-page-hero__body .lyth-text + .lyth-text { margin-top: 0.75rem; }
@media (max-width: 900px) {
  .lyth-page-hero { padding: 24px 0 48px; }
  .lyth-page-hero__body { padding: 24px 20px; }
  .lyth-page-hero__tab { font-size: 1rem; padding: 8px 20px; }
}

/* --- Weiche: the branch switch at the TOP of /einsatzfelder/ and
   /dienstleistungen/ — visitors choose their track before reading on.
   Centered pixel tiles in the LYTH box look. --- */
.lyth-weiche {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 48px;
}
.lyth-weiche__tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  border: 5px solid var(--lyth-navy);
  background: var(--lyth-navy);
  color: var(--lyth-white);
  text-decoration: none;
  box-shadow: 8px 8px var(--lyth-shadow);
}
.lyth-weiche__tile--active {
  background: var(--lyth-sky);
  color: var(--lyth-navy);
}
.lyth-weiche__label {
  font-size: 1.3rem;
  line-height: 1.7rem;
  font-weight: 700;
}
.lyth-weiche__desc {
  font-size: var(--lyth-fs-small);
  line-height: var(--lyth-lh-small);
}
@media (hover: hover) and (pointer: fine) {
  .lyth-weiche__tile { transition: transform 120ms ease, box-shadow 120ms ease; }
  .lyth-weiche__tile:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px var(--lyth-shadow);
  }
}
@media (max-width: 700px) {
  .lyth-weiche { grid-template-columns: 1fr; }
}
.lyth-hero__h1 {
  font-size: 2.3rem;
  line-height: 2.9rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.lyth-hero__subline {
  max-width: 58ch;
  font-size: var(--lyth-fs-body);
  line-height: 1.8rem;
  color: var(--lyth-navy);
  margin-bottom: 2rem;
}
.lyth-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.lyth-hero__secondary-link {
  color: var(--lyth-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: var(--lyth-fs-body);
  font-weight: 700;
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
}
.lyth-hero__secondary-link:hover {
  text-decoration-thickness: 3px;
}

/* --- Sprite stage --- */
.lyth-hero__stage {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lyth-hero__sprite {
  position: absolute;
}
.lyth-hero__sprite--brain {
  width: 320px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: lyth-float 6s ease-in-out infinite;
}
.lyth-hero__sprite--target {
  width: 160px;
  height: auto;
  top: 5%;
  right: 0;
  z-index: 3;
  animation: lyth-float 6s ease-in-out 1.5s infinite;
}
.lyth-hero__sprite--compass {
  width: 140px;
  height: auto;
  bottom: 5%;
  left: 0;
  z-index: 3;
  animation: lyth-float 6s ease-in-out 3s infinite;
}
.lyth-hero__sprite--papier {
  width: 110px;
  height: auto;
  top: 10%;
  left: 10%;
  z-index: 3;
  animation: lyth-float 6s ease-in-out 4.5s infinite;
}

/* --- Idle float animation --- */
@keyframes lyth-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
/* Brain uses translate(-50%,-50%) as base — override to preserve centering */
.lyth-hero__sprite--brain {
  animation: lyth-float-brain 6s ease-in-out infinite;
}
@keyframes lyth-float-brain {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%       { transform: translate(-50%, -50%) translateY(-6px); }
}

/* --- Reduced motion: disable animations and hover-transforms site-wide --- */
@media (prefers-reduced-motion: reduce) {
  .lyth-hero__sprite {
    animation: none !important;
  }
  .lyth-button,
  .lyth-button:hover,
  .lyth-button--inverted:hover {
    transform: none;
    transition: none;
  }
  .lyth-card,
  .lyth-card:hover {
    transform: none;
    transition: none;
    box-shadow: 8px 8px var(--lyth-shadow);
  }
  .lyth-audience-card,
  .lyth-audience-card:hover {
    transform: none;
    transition: none;
  }
  .lyth-trust-card,
  .lyth-trust-card:hover {
    transform: none;
    transition: none;
  }
  .lyth-insights-card,
  .lyth-insights-card:hover {
    transform: none;
    transition: none;
  }
  .site-header {
    transition: none;
  }
}

/* --- Mobile ≤ 900px: single column, stage below copy --- */
@media (max-width: 900px) {
  .lyth-hero__inner {
    grid-template-columns: 1fr;
    padding-top: 30vh;
  }
  .lyth-hero__box-body {
    padding: 24px 20px;
  }
  .lyth-hero__box-tab {
    font-size: 1rem;
    padding: 8px 20px;
  }
  .lyth-hero__h1 {
    font-size: 1.7rem;
    line-height: 2.2rem;
  }
  .lyth-hero__subline {
    font-size: 1.05rem;
    line-height: 1.55rem;
  }
  .lyth-hero__stage {
    order: 2;
    min-height: 280px;
  }
  .lyth-hero__copy {
    order: 1;
  }
  .lyth-hero__sprite--brain {
    width: 200px;
  }
  .lyth-hero__sprite--target {
    width: 100px;
  }
  .lyth-hero__sprite--compass {
    width: 90px;
  }
  .lyth-hero__sprite--papier {
    width: 70px;
  }
}

/* --- Mobile ≤ 480px: keep brain+compass, hide target+papier per design-direction.md 3.4 L246-247 --- */
@media (max-width: 480px) {
  .lyth-hero__sprite--target,
  .lyth-hero__sprite--papier {
    display: none;
  }
  .lyth-hero__sprite {
    animation: none !important;
  }
  .lyth-hero__stage {
    min-height: 200px;
  }
  .lyth-hero__sprite--brain {
    width: 160px;
  }
  .lyth-hero__sprite--compass {
    width: 80px;
  }
}

/* --- Section divider (world-grass-cloud.svg) --- */
.lyth-section-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: auto;
}
.lyth-section-divider img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   SECTION 2 — Possibilities grid
   ============================================================ */
.lyth-section--possibilities .lyth-heading {
  color: var(--lyth-white);
  margin-bottom: 1rem;
}
/* Optional one-liner between a section heading and its grid */
.lyth-section__intro {
  max-width: 62ch;
  margin: 0 0 2rem;
}
.lyth-possibility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lyth-possibility-card {
  display: flex;
  flex-direction: column;
}
/* Sprites vary in aspect ratio — a fixed HEIGHT (not width) keeps every
   heading and paragraph in a card row on the same baseline.
   align-self is required: the cards are column-flex containers, and the
   default 'stretch' blows width:auto images up to the full card width. */
.lyth-possibility-card__sprite,
.lyth-audience-card__sprite,
.lyth-trust-card__sprite,
.lyth-leistung-card__sprite {
  align-self: flex-start;
}
.lyth-possibility-card__sprite {
  width: auto;
  height: 72px;
  margin-bottom: 12px;
}
@media (max-width: 900px) {
  .lyth-possibility-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .lyth-possibility-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION 3 — Audience grid
   ============================================================ */
.lyth-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.lyth-audience-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.lyth-audience-card:hover {
  box-shadow: 4px 4px var(--lyth-shadow);
  transform: translate(4px, 4px);
}
.lyth-audience-card__sprite {
  width: auto;
  height: 72px;
  margin-bottom: 12px;
}
/* The long audience titles wrap to 2-3 lines in the 4-column desktop grid —
   reserve three lines on all cards so the body copy starts on the same
   baseline across the row. Below 900px the grid pairs up and widens, so
   the natural height is fine. */
@media (min-width: 901px) {
  .lyth-audience-card .lyth-card__heading { min-height: calc(3 * var(--lyth-lh-card-h)); }
}
@media (max-width: 900px) {
  .lyth-audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .lyth-audience-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION 4 — Answer (two-column text)
   ============================================================ */
.lyth-answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .lyth-answer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================
   SECTION 5 — Trust grid
   ============================================================ */
.lyth-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 2rem;
}
.lyth-trust-card {
  display: flex;
  flex-direction: column;
}
.lyth-trust-card__sprite {
  width: auto;
  height: 72px;
  margin-bottom: 12px;
}
@media (max-width: 900px) {
  .lyth-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .lyth-trust-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION 6 — Leistungen list
   ============================================================ */
.lyth-leistungen-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  color: var(--lyth-navy);
}
.lyth-leistungen-list li {
  padding-left: 1.5rem;
  position: relative;
  font-size: var(--lyth-fs-body);
  line-height: var(--lyth-lh-body);
}
.lyth-leistungen-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--lyth-teal);
}
.lyth-leistungen__cta {
  margin: 0;
}

/* ============================================================
   SECTION 7 — Insights
   ============================================================ */
.lyth-insights-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 12px;
}
.lyth-insights-head__all {
  color: var(--lyth-navy);
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: var(--lyth-fs-small);
  text-decoration: none;
}
.lyth-insights-head__all:hover {
  text-decoration: underline;
}
.lyth-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lyth-insights-card {
  display: flex;
  flex-direction: column;
}
.lyth-insights-card .lyth-card__heading a {
  color: var(--lyth-navy);
  text-decoration: none;
}
.lyth-insights-card .lyth-card__heading a:hover {
  text-decoration: underline;
}
.lyth-insights-card__sprite {
  width: 48px;
  height: auto;
  margin-top: auto;
  padding-top: 12px;
}
@media (max-width: 900px) {
  .lyth-insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .lyth-insights-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION 8 — Closing CTA
   ============================================================ */
.lyth-cta-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.lyth-cta__copy {
  flex: 1;
  min-width: 280px;
}
/* On the star background, loose white copy is barely readable — the CTA
   copy sits in a navy pixel box with sky border (user feedback 2026-08-14).
   Applies to every stars-CTA (home, Leistungen, Einsatzfelder). */
.lyth-section--stars .lyth-cta__copy {
  background: var(--lyth-navy);
  border: 5px solid var(--lyth-sky);
  box-shadow: 8px 8px var(--lyth-shadow);
  padding: 36px 44px;
}
.lyth-section--stars .lyth-cta__copy .lyth-heading { margin-top: 0; }
@media (max-width: 700px) {
  .lyth-section--stars .lyth-cta__copy { padding: 24px 20px; }
}
.lyth-cta__copy .lyth-heading {
  margin-bottom: 1rem;
}
.lyth-cta__copy .lyth-text {
  margin-bottom: 2rem;
}
.lyth-cta__charm {
  flex-shrink: 0;
}
.lyth-cta__charm img {
  width: 160px;
  height: auto;
}
@media (max-width: 640px) {
  .lyth-cta__charm {
    display: none;
  }
}

/* ============================================================
   SECTION 9 — People band (compact)
   ============================================================ */
.lyth-people-band {
  padding: 4vh 0;
}
.lyth-people-band__inner {
  display: flex;
  align-items: center;
  justify-content: center; /* centered as a unit, like the footer line below */
  gap: 32px;
}
.lyth-people-band__decoration img {
  width: 80px;
  height: auto;
  opacity: 0.7;
}
.lyth-people-band__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lyth-people-band__heading {
  font-size: var(--lyth-fs-card-h);
  line-height: var(--lyth-lh-card-h);
  margin: 0;
}
.lyth-people-band__tagline {
  font-size: var(--lyth-fs-body);
  line-height: var(--lyth-lh-body);
  margin: 0;
}
.lyth-people-band__link {
  color: var(--lyth-sky);
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: var(--lyth-fs-body);
  text-decoration: none;
}
.lyth-people-band__link:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .lyth-people-band__decoration {
    display: none;
  }
}

/* ============================================================
   CONTACT — qualified first-contact form (Plan Task 6)
   LYTH design system: rectangular pixel inputs, navy on sky.
   ============================================================ */
.lyth-contact { max-width: 760px; }
.lyth-contact__intro { margin-bottom: 2.5rem; }

.lyth-form-notice {
  border: 3px solid var(--lyth-navy);
  box-shadow: 6px 6px var(--lyth-shadow);
  padding: 14px 16px;
  margin: 0 0 1.5rem;
  font-size: var(--lyth-fs-body);
  line-height: var(--lyth-lh-body);
}
.lyth-form-notice--success { background: var(--lyth-skymid); color: var(--lyth-navy); }
.lyth-form-notice--error { background: var(--lyth-white); color: var(--lyth-navy); }

.lyth-contact-form { display: grid; gap: 18px; }
.lyth-contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.lyth-field { display: grid; gap: 8px; }
.lyth-field__label {
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: var(--lyth-fs-small);
  font-weight: 700;
  color: var(--lyth-navy);
}
.lyth-contact-form input,
.lyth-contact-form select,
.lyth-contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 3px solid var(--lyth-navy);
  border-radius: 0;
  background: var(--lyth-white);
  color: var(--lyth-ink);
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: 1.2rem;
}
.lyth-contact-form textarea { min-height: 140px; resize: vertical; }
.lyth-contact-form input:focus-visible,
.lyth-contact-form select:focus-visible,
.lyth-contact-form textarea:focus-visible {
  outline: 3px solid var(--lyth-steel);
  outline-offset: 2px;
}
.lyth-contact-form__hint {
  font-size: var(--lyth-fs-small);
  line-height: var(--lyth-lh-small);
  color: var(--lyth-navy);
  margin: 0;
}
.lyth-contact-form__actions { margin-top: 0.5rem; }

@media (max-width: 640px) {
  .lyth-contact-form { gap: 14px; }
  .lyth-contact-form input,
  .lyth-contact-form select,
  .lyth-contact-form textarea {
    font-size: 16px; /* prevents iOS zoom */
  }
}

/* ============================================================
   PRAXISBEISPIELE — case-study archive + single
   ============================================================ */
.lyth-praxis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 2.5rem;
}
.lyth-praxis-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--lyth-white);
  color: var(--lyth-navy);
  text-decoration: none;
  transition: transform 120ms ease;
}
.lyth-praxis-card:hover { transform: translate(-2px, -2px); }
.lyth-praxis-card .lyth-card__heading {
  font-size: var(--lyth-fs-card-h);
  line-height: var(--lyth-lh-card-h);
  margin: 0;
}
.lyth-praxis-card__more {
  margin-top: auto;
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-weight: 700;
  color: var(--lyth-steel);
}

.lyth-praxis-single__inner { max-width: 760px; }
.lyth-praxis-single__back { color: var(--lyth-navy); text-decoration: none; }
.lyth-praxis-single__back:hover { text-decoration: underline; }
.lyth-praxis-single__content { margin: 1.5rem 0 2.5rem; }
.lyth-praxis-single__content p { font-size: var(--lyth-fs-body); line-height: var(--lyth-lh-body); }

@media (max-width: 900px) {
  .lyth-praxis-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .lyth-praxis-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LEISTUNGEN — capability cards
   ============================================================ */
.lyth-leistungen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.lyth-leistung-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--lyth-white);
  color: var(--lyth-navy);
  position: relative;
}
/* Unified icon placement: sprite INSIDE the frame top-right, heading starts
   at the very top (user decision 2026-08-17). */
.lyth-leistung-card__sprite {
  width: auto;
  height: 64px;
  position: absolute;
  top: 22px;
  right: 24px;
}
.lyth-leistung-card .lyth-card__heading {
  font-size: var(--lyth-fs-card-h);
  line-height: var(--lyth-lh-card-h);
  margin: 0;
  padding-right: 90px;
  /* reserve the icon zone so the body text starts below the sprite */
  min-height: 62px;
}
.lyth-leistung-card .lyth-card__body { color: var(--lyth-ink); margin: 0; }
.lyth-leistung-card__points {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}
.lyth-leistung-card__points li {
  margin-bottom: 0.4rem;
  line-height: var(--lyth-lh-body);
}
@media (max-width: 760px) {
  .lyth-leistungen-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EINSATZFELDER — anchored audience sections
   ============================================================ */
.lyth-einsatzfeld {
  scroll-margin-top: 120px; /* keep heading clear of the sticky header */
}
.lyth-einsatzfeld__inner { max-width: 820px; }
/* Audience blocks: 2x2 grid of pixel cards on the continuous sky. */
.lyth-einsatzfeld-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.lyth-einsatzfeld-card { padding: 32px 36px; display: flex; flex-direction: column; position: relative; }
/* Unified icon placement (user decision 2026-08-17): the sprite sits INSIDE
   the frame in the top-right corner (transparent icons look broken hanging
   over the edge); the heading starts at the top left. The heading keeps
   clear of the icon via padding-right. */
.lyth-einsatzfeld-card__sprite {
  position: absolute;
  top: 22px;
  right: 26px;
  height: 76px;
  width: auto;
}
.lyth-einsatzfeld-card > .lyth-heading {
  padding-right: 110px;
  /* reserve the icon zone so the situation text starts below the sprite */
  min-height: 70px;
}
@media (max-width: 900px) {
  .lyth-einsatzfeld-card__sprite { height: 56px; top: 18px; right: 18px; }
  .lyth-einsatzfeld-card > .lyth-heading { padding-right: 80px; min-height: 56px; }
}
.lyth-einsatzfeld-card .lyth-heading { font-size: 1.5rem; line-height: 2rem; margin-bottom: 1rem; }
.lyth-einsatzfeld-card .lyth-text { margin-bottom: 0; }
.lyth-einsatzfeld-card .lyth-einsatzfeld__link { margin-top: auto; }
@media (max-width: 900px) {
  .lyth-einsatzfeld-grid { grid-template-columns: 1fr; }
}
.lyth-einsatzfeld__points {
  margin: 1rem 0 1.5rem;
  padding-left: 1.2rem;
}
.lyth-einsatzfeld__points li { margin-bottom: 0.5rem; line-height: var(--lyth-lh-body); }
.lyth-einsatzfeld__points--white { color: var(--lyth-white); }
.lyth-einsatzfeld__link {
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-weight: 700;
  color: var(--lyth-navy);
  text-decoration: none;
}
.lyth-einsatzfeld__link--white { color: var(--lyth-sky); }
.lyth-einsatzfeld__link:hover { text-decoration: underline; }

/* ============================================================
   INSIGHTS — blog archive (/insights/) + single posts
   ============================================================ */
.lyth-insights-archive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 2.5rem;
}
.lyth-insights-archive-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 32px;
  color: var(--lyth-navy);
  text-decoration: none;
  position: relative;
}
/* Per-post sprite INSIDE the frame, top-right (unified icon placement). */
.lyth-insights-archive-card__sprite {
  position: absolute;
  top: 20px;
  right: 24px;
  height: 64px;
  width: auto;
}
.lyth-insights-archive-card .lyth-card__heading { padding-right: 90px; }
.lyth-insights-archive-card__meta {
  font-size: var(--lyth-fs-small);
  line-height: var(--lyth-lh-small);
  color: var(--lyth-teal);
  margin: 0;
}
.lyth-insights-archive-card .lyth-card__heading { margin: 0; }
.lyth-insights-archive-card .lyth-card__body { margin: 0; }
.lyth-insights-archive-card__more {
  margin-top: auto;
  padding-top: 12px;
  font-weight: 700;
  color: var(--lyth-steel);
}
@media (max-width: 900px) {
  .lyth-insights-archive-grid { grid-template-columns: 1fr; }
}
.lyth-pagination { margin-top: 2.5rem; }
.lyth-pagination .nav-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.lyth-pagination a,
.lyth-pagination span.current {
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  color: var(--lyth-navy);
  text-decoration: none;
  border: 3px solid var(--lyth-navy);
  padding: 6px 14px;
  background: transparent;
}
.lyth-pagination span.current { background: var(--lyth-navy); color: var(--lyth-white); }
.lyth-pagination a:hover { background: var(--lyth-white); }

/* --- Single post: pixel-box header + cream reading panel ---
   The headline lives in the signature page-hero box (like every other
   sub-page); the article body sits on a cream panel because long running
   text directly on the sky bands is hard to read. */
.lyth-insight-single__inner { max-width: 940px; }
.lyth-insight-single .lyth-page-hero { padding-bottom: 0; }
.lyth-insight-single__main { padding-top: 48px; }
.lyth-page-hero__tab-link { color: inherit; text-decoration: none; }
.lyth-page-hero__tab-link:hover { text-decoration: underline; }
.lyth-insight-single__title { margin-bottom: 0.75rem; }
.lyth-insight-single__meta {
  font-size: var(--lyth-fs-small);
  line-height: var(--lyth-lh-small);
  color: var(--lyth-teal);
  margin: 0;
  font-weight: 700;
}
/* Long-form article content: the posts are technical write-ups converted
   from Markdown — paragraphs, lists, benchmark TABLES and CODE blocks. */
.lyth-article { color: var(--lyth-ink); }
/* Reading panel: same cream + pixel border as the cards */
.lyth-article--panel {
  background: #F5EFE2;
  border: 5px solid var(--lyth-navy);
  box-shadow: 8px 8px var(--lyth-shadow);
  padding: 44px 52px;
}
@media (max-width: 700px) {
  .lyth-article--panel { padding: 24px 20px; }
}
/* Vertical rhythm: every block type declares its own top AND bottom
   margin; adjacent margins collapse to the larger one. This is
   order-independent and works for any future article structure.
   (Do NOT reintroduce a `* + *` owl here — element rules like
   `.lyth-article p` have higher specificity and silently kill it.)
     paragraphs/lists <-> each other : 1.2rem
     around tables/code/figures/hr   : 2.2rem (they carry the 8px shadow)
     before headings                 : 2.4rem, after: 1rem */
.lyth-article p { margin: 1.2rem 0; }
.lyth-article h2 {
  font-size: 1.7rem;
  line-height: 2.2rem;
  font-weight: 700;
  color: var(--lyth-navy);
  margin: 2.4rem 0 1rem;
}
.lyth-article h3 {
  font-size: var(--lyth-fs-card-h);
  line-height: var(--lyth-lh-card-h);
  font-weight: 700;
  color: var(--lyth-navy);
  margin: 2.2rem 0 1rem;
}
.lyth-article ul, .lyth-article ol { margin: 1.2rem 0; padding-left: 1.5rem; }
.lyth-article li { margin-bottom: 0.4rem; }
.lyth-article a { color: var(--lyth-teal); }
.lyth-article > :first-child { margin-top: 0; }
.lyth-article > :last-child { margin-bottom: 0; }
.lyth-article hr {
  border: 0;
  border-top: 3px dashed var(--lyth-navy);
  opacity: 0.35;
  margin: 2.2rem 0;
}
.lyth-article blockquote {
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 5px solid var(--lyth-navy);
  color: var(--lyth-navy);
}
/* Figures/images: photos get the pixel-card frame, diagrams (SVG) a plain
   white surface so their own labels stay crisp */
.lyth-article figure {
  margin: 2.2rem 0;
}
.lyth-article figure img {
  /* natural size, centered — portrait photos must not blow up to column width */
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  background: var(--lyth-white);
  border: 5px solid var(--lyth-navy);
  box-shadow: 8px 8px var(--lyth-shadow);
}
.lyth-article figcaption {
  font-size: var(--lyth-fs-small);
  line-height: var(--lyth-lh-small);
  color: var(--lyth-teal);
  margin-top: 14px;
  text-align: center;
}
/* Inline code */
.lyth-article code {
  font-family: "Ubuntu Mono", monospace;
  background: rgba(41, 60, 84, 0.12);
  padding: 1px 6px;
  font-size: 1.2rem;
}
/* Code blocks: navy pixel box, horizontally scrollable */
.lyth-article pre {
  background: var(--lyth-navy);
  color: var(--lyth-sky);
  border: 5px solid var(--lyth-navy);
  box-shadow: 8px 8px var(--lyth-shadow);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 2.2rem 0;
  line-height: 1.6rem;
}
.lyth-article pre code {
  background: none;
  padding: 0;
  font-size: 1.05rem;
  color: inherit;
}
/* Benchmark tables: white pixel card, scrolls horizontally when dense */
.lyth-article table {
  /* shrink-wrap narrow tables (no empty white gutter), scroll wide ones */
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  background: var(--lyth-white);
  border: 5px solid var(--lyth-navy);
  box-shadow: 8px 8px var(--lyth-shadow);
  margin: 2.2rem 0;
  font-size: 1.1rem;
  line-height: 1.5rem;
}
.lyth-article th, .lyth-article td {
  padding: 8px 14px;
  border: 1px solid rgba(41, 60, 84, 0.35);
  text-align: left;
  white-space: nowrap;
}
.lyth-article th {
  background: var(--lyth-navy);
  color: var(--lyth-white);
  border-color: var(--lyth-navy);
}

/* --- Comments --- */
.lyth-comments { margin-top: 3.5rem; }
.lyth-comments__heading {
  font-size: 1.7rem;
  line-height: 2.2rem;
  color: var(--lyth-navy);
  margin: 0 0 1.5rem;
}
.lyth-comments__note {
  font-size: var(--lyth-fs-small);
  line-height: var(--lyth-lh-small);
  color: var(--lyth-navy);
  margin: 0 0 1rem;
}
.lyth-comments__list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}
.lyth-comments__list .comment {
  background: #F5EFE2;
  border: 5px solid var(--lyth-navy);
  box-shadow: 6px 6px var(--lyth-shadow);
  padding: 18px 22px;
  margin-bottom: 20px;
}
/* Nested replies indent inside the parent card */
.lyth-comments__list .children {
  list-style: none;
  margin: 16px 0 0;
  padding-left: 20px;
  border-left: 3px solid rgba(41, 60, 84, 0.3);
}
.lyth-comments__list .children .comment {
  box-shadow: 4px 4px var(--lyth-shadow);
  border-width: 3px;
}
.lyth-comments__list .comment-meta { margin-bottom: 0.5rem; }
.lyth-comments__list .comment-author { font-weight: 700; color: var(--lyth-navy); }
.lyth-comments__list .comment-author .says { display: none; }
.lyth-comments__list .comment-metadata {
  font-size: var(--lyth-fs-small);
  line-height: var(--lyth-lh-small);
}
.lyth-comments__list .comment-metadata a { color: var(--lyth-teal); text-decoration: none; }
.lyth-comments__list .comment-metadata a:hover { text-decoration: underline; }
.lyth-comments__list .comment-content p { margin: 0 0 0.6rem; }
.lyth-comments__list .comment-content p:last-child { margin-bottom: 0; }
.lyth-comments__list .reply {
  margin-top: 0.5rem;
  font-size: var(--lyth-fs-small);
}
.lyth-comments__list .reply a { color: var(--lyth-navy); font-weight: 700; text-decoration: none; }
.lyth-comments__list .reply a:hover { text-decoration: underline; }
.lyth-comments__list .comment-awaiting-moderation {
  display: block;
  font-size: var(--lyth-fs-small);
  color: var(--lyth-teal);
}
/* Comment form: same rectangular pixel inputs as the contact form */
.comment-respond label {
  display: block;
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: var(--lyth-fs-small);
  font-weight: 700;
  color: var(--lyth-navy);
  margin-bottom: 6px;
}
.comment-respond p { margin: 0 0 18px; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 3px solid var(--lyth-navy);
  border-radius: 0;
  background: var(--lyth-white);
  color: var(--lyth-ink);
  font-family: "Ubuntu Mono", "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: 1.2rem;
}
.comment-respond textarea { min-height: 140px; resize: vertical; }
.comment-respond input:focus-visible,
.comment-respond textarea:focus-visible {
  outline: 3px solid var(--lyth-steel);
  outline-offset: 2px;
}
.comment-respond .comment-form-cookies-consent {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.comment-respond .comment-form-cookies-consent input { min-height: 0; width: auto; }
.comment-respond .comment-form-cookies-consent label {
  display: inline;
  font-weight: 400;
  margin: 0;
}
.comment-respond .form-submit { margin: 1.5rem 0 0; }
@media (max-width: 640px) {
  .comment-respond input[type="text"],
  .comment-respond input[type="email"],
  .comment-respond input[type="url"],
  .comment-respond textarea { font-size: 16px; /* prevents iOS zoom */ }
}