/* ═══════════════════════════════════════════════
   HERMETICA STUDIO — STYLESHEET
   Regent: Venus 22° Capricorn · Galerie bei Nacht
   ═══════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: clamp(86px, 10vw, 112px);
}

/* ══════════════════════════════════════════════════════
   JANORDO CASE STUDY — /portfolio/janordo
   Hermetica editorial case with JANORDO as evidence.
   ══════════════════════════════════════════════════════ */
.hs-jo-case {
  --jo-soil: #1E2A2D;
  --jo-surface: #2C3E43;
  --jo-rust: #C8674A;
  --jo-amber: #B08D45;
  --jo-mint: #4A9AA4;
  --jo-paper: #F3EEE4;
  --jo-paper-warm: #EDE5D4;
  position: relative;
  z-index: 1;
  padding-top: clamp(6rem, 12vh, 8rem);
  background:
    radial-gradient(ellipse at 82% 2%, color-mix(in srgb, var(--emerald) 12%, transparent), transparent 42%),
    linear-gradient(180deg, var(--void) 0%, #0b0a0d 38%, #151218 100%);
  color: var(--ink);
  overflow: hidden;
}
.hs-jo-case h1,
.hs-jo-case h2,
.hs-jo-case h3 {
  letter-spacing: 0;
}
.hs-jo-case p {
  color: var(--ink-soft);
}
.hs-jo-kicker {
  font-family: var(--hs-font-logo);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--emerald);
}
.hs-jo-hero {
  position: relative;
  width: min(1180px, calc(100% - 2 * clamp(1.25rem, 5vw, 5rem)));
  min-height: clamp(580px, 76svh, 780px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.hs-jo-hero__content {
  position: relative;
  z-index: 2;
}
.hs-jo-hero h1 {
  margin-top: 1.1rem;
  font-family: var(--hs-font-logo);
  font-size: clamp(3.45rem, 7.2vw, 6.9rem);
  line-height: 0.86;
  color: var(--ink);
}
.hs-jo-hero__lead {
  max-width: 38ch;
  margin-top: 2rem;
  font-family: var(--hs-font-article);
  font-style: italic;
  font-size: clamp(1.08rem, 1.7vw, 1.42rem);
  line-height: 1.58;
}
.hs-jo-hero__folio {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 4vh, 2rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--hs-font-logo);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-jo-hero__folio i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--edge), transparent);
}
.hs-jo-hero__media,
.hs-jo-application__image {
  border: 1px solid var(--edge);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ground) 86%, transparent), color-mix(in srgb, var(--void) 92%, transparent));
  box-shadow: 0 38px 110px -62px rgba(0,0,0,0.95);
}
.hs-jo-hero__media img,
.hs-jo-application__image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.82) contrast(1.05);
}
.hs-jo-hero__media figcaption,
.hs-jo-application__image figcaption {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--edge);
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-jo-meta {
  width: min(1180px, calc(100% - 2 * clamp(1.25rem, 5vw, 5rem)));
  margin: 0 auto clamp(5rem, 11vh, 8rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.hs-jo-meta div {
  min-height: 104px;
  padding: 1.15rem 1.25rem;
  border-right: 1px solid var(--edge);
}
.hs-jo-meta div:last-child { border-right: 0; }
.hs-jo-meta span {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald);
}
.hs-jo-meta strong {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}
.hs-jo-charge,
.hs-jo-result {
  width: min(920px, calc(100% - 2 * clamp(1.25rem, 6vw, 5rem)));
  margin: 0 auto clamp(5rem, 12vh, 9rem);
  text-align: center;
}
.hs-jo-charge h2,
.hs-jo-spread h2,
.hs-jo-name h2,
.hs-jo-section-head h2,
.hs-jo-application h2,
.hs-jo-result h2 {
  margin-top: 0.85rem;
  font-size: clamp(2.25rem, 5.6vw, 5.2rem);
  line-height: 0.96;
}
.hs-jo-charge h2 em,
.hs-jo-spread h2 em,
.hs-jo-name h2 em,
.hs-jo-section-head h2 em,
.hs-jo-application h2 em {
  font-style: italic;
  color: var(--sh-pearl);
}
.hs-jo-charge p,
.hs-jo-spread p,
.hs-jo-name p,
.hs-jo-architecture p,
.hs-jo-system p,
.hs-jo-application p,
.hs-jo-result p {
  max-width: 64ch;
  margin-top: 1.25rem;
  line-height: 1.78;
}
.hs-jo-charge p,
.hs-jo-result p {
  margin-left: auto;
  margin-right: auto;
}
.hs-jo-charge__rule {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 620px;
  font-family: var(--hs-font-logo);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-jo-charge__rule i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--emerald), transparent);
}
.hs-jo-spread {
  width: min(1180px, calc(100% - 2 * clamp(1.25rem, 5vw, 5rem)));
  margin: 0 auto clamp(5rem, 12vh, 9rem);
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(18rem, 0.72fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.hs-jo-spread__index {
  position: sticky;
  top: 8rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--edge);
  font-family: var(--hs-font-logo);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-jo-evidence {
  border: 1px solid var(--edge);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--emerald) 10%, transparent), transparent 58%),
    color-mix(in srgb, var(--ground) 74%, transparent);
}
.hs-jo-evidence__label {
  display: block;
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald);
}
.hs-jo-evidence p {
  margin-top: 1rem;
  font-family: var(--hs-font-article);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
}
.hs-jo-evidence dl {
  margin-top: 1.5rem;
  display: grid;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.hs-jo-evidence dl div {
  display: grid;
  grid-template-columns: 0.64fr 1fr;
  gap: 1px;
  background: var(--edge);
}
.hs-jo-evidence dt,
.hs-jo-evidence dd {
  padding: 0.8rem;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  font-size: 0.78rem;
}
.hs-jo-evidence dt {
  font-family: var(--hs-font-logo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-jo-evidence dd {
  color: var(--ink-soft);
}
.hs-jo-name {
  width: min(1080px, calc(100% - 2 * clamp(1.25rem, 5vw, 5rem)));
  margin: 0 auto clamp(5rem, 12vh, 9rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.hs-jo-name__plate {
  min-height: clamp(320px, 42vw, 470px);
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--edge);
  background:
    linear-gradient(180deg, rgba(243,238,228,0.98), rgba(237,229,212,0.94));
  color: var(--jo-soil);
}
.hs-jo-name__plate .hs-jo-kicker { color: color-mix(in srgb, var(--jo-soil) 74%, var(--jo-mint)); }
.hs-jo-name__plate h2 { color: var(--jo-soil); }
.hs-jo-name__plate h2 em { color: var(--jo-rust); }
.hs-jo-threshold-mark {
  position: relative;
  width: 8.5rem;
  height: 8.5rem;
  margin-bottom: 1.6rem;
}
.hs-jo-threshold-mark span {
  position: absolute;
  top: 16%;
  bottom: 16%;
  width: 32%;
  background: linear-gradient(180deg, var(--jo-soil), var(--jo-surface));
}
.hs-jo-threshold-mark span:first-child { left: 14%; }
.hs-jo-threshold-mark span:last-child { right: 14%; }
.hs-jo-threshold-mark i {
  position: absolute;
  left: 48%;
  top: 8%;
  width: 4%;
  height: 84%;
  background: linear-gradient(180deg, #4DA8B3, var(--jo-mint) 35%, var(--jo-amber) 68%, var(--jo-rust));
}
.hs-jo-name__copy {
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  padding: clamp(1.5rem, 4vw, 2.4rem) 0;
}
.hs-jo-architecture,
.hs-jo-system,
.hs-jo-application {
  width: min(1180px, calc(100% - 2 * clamp(1.25rem, 5vw, 5rem)));
  margin: 0 auto clamp(5rem, 12vh, 9rem);
}
.hs-jo-section-head {
  max-width: 820px;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.hs-jo-architecture__grid,
.hs-jo-system__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}
.hs-jo-architecture__grid article,
.hs-jo-system__grid article {
  min-height: 230px;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-right: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: color-mix(in srgb, var(--ground) 68%, transparent);
}
.hs-jo-architecture__grid span {
  display: block;
  margin-bottom: 2rem;
  font-family: var(--hs-font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--emerald);
}
.hs-jo-architecture__grid h3,
.hs-jo-system__grid h3 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  color: var(--ink);
}
.hs-jo-architecture__grid p,
.hs-jo-system__grid p {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.72;
}
.hs-jo-system__grid {
  grid-template-columns: repeat(5, 1fr);
}
.hs-jo-swatch {
  display: block;
  width: 100%;
  height: 58px;
  margin-bottom: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.hs-jo-swatch--soil { background: #1E2A2D; }
.hs-jo-swatch--paper { background: #F3EEE4; }
.hs-jo-swatch--rust { background: #C8674A; }
.hs-jo-swatch--amber { background: #B08D45; }
.hs-jo-swatch--mint { background: #4A9AA4; }
.hs-jo-application {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hs-jo-application ul {
  margin-top: 1.5rem;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.9;
}
.hs-jo-result {
  margin-bottom: 0;
  padding-bottom: clamp(5rem, 12vw, 8rem);
}
.hs-jo-result__actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .hs-jo-hero,
  .hs-jo-name,
  .hs-jo-application {
    grid-template-columns: 1fr;
  }
  .hs-jo-hero {
    min-height: auto;
    padding-bottom: 5rem;
  }
  .hs-jo-spread {
    grid-template-columns: 1fr;
  }
  .hs-jo-spread__index {
    position: static;
  }
  .hs-jo-meta,
  .hs-jo-architecture__grid,
  .hs-jo-system__grid {
    grid-template-columns: 1fr;
  }
  .hs-jo-meta div {
    border-right: 0;
    border-bottom: 1px solid var(--edge);
  }
  .hs-jo-meta div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 540px) {
  .hs-jo-case {
    padding-top: 5.5rem;
  }
  .hs-jo-hero h1 {
    font-size: clamp(3.1rem, 18vw, 4.5rem);
  }
  .hs-jo-charge h2,
  .hs-jo-spread h2,
  .hs-jo-name h2,
  .hs-jo-section-head h2,
  .hs-jo-application h2,
  .hs-jo-result h2 {
    font-size: clamp(2rem, 11vw, 3.1rem);
  }
  .hs-jo-hero__folio,
  .hs-jo-charge__rule {
    align-items: flex-start;
    flex-direction: column;
  }
  .hs-jo-hero__folio i,
  .hs-jo-charge__rule i {
    width: 100%;
    flex: none;
  }
  .hs-jo-name__plate {
    min-height: 300px;
  }
}

/* JANORDO editorial correction — lighter Crown-style proof spreads */
.hs-jo-case {
  background:
    radial-gradient(ellipse at 84% 0%, color-mix(in srgb, var(--emerald) 10%, transparent), transparent 42%),
    linear-gradient(180deg, var(--void) 0%, #090f0d 32%, #0f1512 100%);
}
.hs-jo-hero {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}
.hs-jo-hero h1 {
  font-family: var(--hs-font-logo);
  font-size: clamp(3.45rem, 7.2vw, 6.9rem);
  letter-spacing: 0;
}
.hs-jo-hero__lead {
  max-width: 30ch;
}
.hs-jo-meta {
  margin-bottom: clamp(5rem, 11vh, 8rem);
}
.hs-jo-charge {
  position: relative;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.4rem, 5vw, 4rem);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.hs-jo-charge::before {
  content: "";
  position: absolute;
  inset: clamp(1rem, 3vw, 2.5rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  pointer-events: none;
}
.hs-jo-charge h2,
.hs-jo-between h2,
.hs-jo-light-spread h2,
.hs-jo-section-head h2,
.hs-jo-system-board h2,
.hs-jo-module-proof h2,
.hs-jo-result h2 {
  letter-spacing: 0;
}
.hs-jo-between {
  position: relative;
  width: min(1080px, calc(100% - 2 * clamp(1.25rem, 6vw, 5rem)));
  margin: 0 auto clamp(3rem, 8vh, 5.5rem);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3rem);
}
.hs-jo-between--right {
  text-align: right;
}
.hs-jo-between--right p {
  margin-left: auto;
}
.hs-jo-case-folio::after {
  content: none;
}
.hs-jo-case-folio__mark {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--hs-font-logo);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-jo-between h2 {
  max-width: 760px;
  margin-top: 0;
  font-size: clamp(2.4rem, 5.6vw, 5.4rem);
  line-height: 0.95;
}
.hs-jo-between h2 em {
  font-style: italic;
  color: var(--sh-pearl);
}
.hs-jo-between p {
  max-width: 58ch;
  margin-top: 1.35rem;
  line-height: 1.82;
}
.hs-jo-light-spread {
  width: min(1180px, calc(100% - 2 * clamp(1.25rem, 5vw, 5rem)));
  margin: 0 auto clamp(5rem, 12vh, 9rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.86fr);
  gap: 1px;
  background: var(--field-edge);
  border: 1px solid var(--field-edge);
  color: var(--ink-f);
  box-shadow: 0 32px 90px -58px rgba(0,0,0,0.9);
}
.hs-jo-light-spread__copy,
.hs-jo-name-proof {
  min-height: clamp(390px, 48vw, 560px);
  padding: clamp(2rem, 5vw, 4.5rem);
  background: linear-gradient(180deg, var(--field), var(--field-warm));
}
.hs-jo-light-spread .hs-jo-kicker,
.hs-jo-system-board .hs-jo-kicker {
  color: color-mix(in srgb, var(--jo-soil) 75%, var(--jo-mint));
}
.hs-jo-light-spread h2 {
  margin-top: 1rem;
  font-size: clamp(2.4rem, 5.4vw, 5.2rem);
  line-height: 0.95;
  color: var(--ink-f);
}
.hs-jo-light-spread h2 em {
  font-style: italic;
  color: var(--jo-rust);
}
.hs-jo-light-spread p {
  max-width: 55ch;
  margin-top: 1.35rem;
  color: var(--ink-f-soft);
  line-height: 1.85;
}
.hs-jo-name-proof {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.hs-jo-name-proof__word {
  margin-top: 1.2rem;
  font-family: var(--hs-font-logo);
  font-size: clamp(2.4rem, 5.8vw, 5rem);
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--jo-soil);
}
.hs-jo-name-proof__split {
  width: min(100%, 420px);
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid color-mix(in srgb, var(--jo-soil) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--jo-soil) 18%, transparent);
}
.hs-jo-name-proof__split span {
  padding: 0.8rem;
  font-family: var(--hs-font-logo);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--jo-soil) 72%, transparent);
}
.hs-jo-name-proof__split span + span {
  border-left: 1px solid color-mix(in srgb, var(--jo-soil) 18%, transparent);
}
.hs-jo-offer-map {
  width: min(1180px, calc(100% - 2 * clamp(1.25rem, 5vw, 5rem)));
  margin: 0 auto clamp(5rem, 12vh, 9rem);
}
.hs-jo-offer-map .hs-jo-section-head {
  max-width: 820px;
}
.hs-jo-section-head p {
  max-width: 64ch;
  margin-top: 1.2rem;
  line-height: 1.8;
}
.hs-jo-offer-map__grid {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}
.hs-jo-offer-map__grid article {
  min-height: 260px;
  padding: clamp(1.35rem, 3vw, 2.2rem);
  border-right: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--emerald) 8%, transparent), transparent 56%),
    color-mix(in srgb, var(--ground) 72%, transparent);
}
.hs-jo-offer-map__grid span {
  display: block;
  margin-bottom: clamp(2rem, 6vw, 4rem);
  font-family: var(--hs-font-display);
  font-style: italic;
  font-size: 1.65rem;
  color: var(--emerald);
}
.hs-jo-offer-map__grid h3 {
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  color: var(--ink);
}
.hs-jo-offer-map__grid p {
  margin-top: 1rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.hs-jo-system-board {
  width: min(1180px, calc(100% - 2 * clamp(1.25rem, 5vw, 5rem)));
  margin: 0 auto clamp(5rem, 12vh, 9rem);
  padding: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(180deg, var(--field), var(--field-warm));
  color: var(--ink-f);
  border: 1px solid var(--field-edge);
}
.hs-jo-system-board__head {
  max-width: 760px;
}
.hs-jo-system-board h2 {
  margin-top: 1rem;
  font-size: clamp(2.35rem, 5.2vw, 5rem);
  line-height: 0.96;
  color: var(--ink-f);
}
.hs-jo-system-board h2 em {
  font-style: italic;
  color: var(--jo-rust);
}
.hs-jo-system-board__grid {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--jo-soil) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--jo-soil) 18%, transparent);
}
.hs-jo-system-board__grid article {
  min-height: 220px;
  padding: 1rem;
  background: color-mix(in srgb, var(--field) 94%, var(--jo-paper-warm));
}
.hs-jo-system-board__grid h3 {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: var(--ink-f);
}
.hs-jo-system-board__grid p {
  margin-top: 0.8rem;
  color: var(--ink-f-soft);
  font-size: 0.86rem;
  line-height: 1.62;
}
.hs-jo-module-proof {
  width: min(1180px, calc(100% - 2 * clamp(1.25rem, 5vw, 5rem)));
  margin: 0 auto clamp(5rem, 12vh, 9rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hs-jo-module-proof__screen {
  border: 1px solid var(--edge);
  background: var(--void);
  box-shadow: 0 38px 110px -62px rgba(0,0,0,0.95);
}
.hs-jo-module-proof__screen img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.84) contrast(1.04);
}
.hs-jo-module-proof__caption {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--edge);
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-jo-module-proof h2 {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 5vw, 4.8rem);
  line-height: 0.96;
}
.hs-jo-module-proof h2 em {
  font-style: italic;
  color: var(--sh-pearl);
}
.hs-jo-module-proof p {
  margin-top: 1.3rem;
  max-width: 58ch;
  line-height: 1.8;
}
.hs-jo-module-list {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}
.hs-jo-module-list span {
  padding: 0.9rem;
  border-right: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  font-family: var(--hs-font-logo);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .hs-jo-hero,
  .hs-jo-light-spread,
  .hs-jo-module-proof {
    grid-template-columns: 1fr;
  }
  .hs-jo-hero {
    min-height: auto;
    padding-bottom: 5rem;
  }
  .hs-jo-offer-map__grid,
  .hs-jo-system-board__grid {
    grid-template-columns: 1fr;
  }
  .hs-jo-between--right {
    text-align: left;
  }
  .hs-jo-between--right p {
    margin-left: 0;
  }
}

@media (max-width: 540px) {
  .hs-jo-light-spread__copy,
  .hs-jo-name-proof,
  .hs-jo-system-board {
    padding: 1.35rem;
  }
  .hs-jo-name-proof__split,
  .hs-jo-module-list {
    grid-template-columns: 1fr;
  }
  .hs-jo-name-proof__split span + span {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--jo-soil) 18%, transparent);
  }
}

/* JANORDO Crown alignment — final reference pass */
.hs-jo-case {
  background:
    linear-gradient(180deg, rgba(7,13,11,0.88) 0%, rgba(7,13,11,0.98) 32%, var(--void) 100%),
    var(--void);
}
.hs-jo-kicker,
.hs-jo-hero__folio,
.hs-jo-meta span,
.hs-jo-case-folio__mark,
.hs-jo-module-proof__caption,
.hs-jo-name-proof__split span,
.hs-jo-module-list span {
  font-family: var(--hs-font-logo);
}
.hs-jo-hero h1,
.hs-jo-charge h2,
.hs-jo-between h2,
.hs-jo-light-spread h2,
.hs-jo-section-head h2,
.hs-jo-system-board h2,
.hs-jo-module-proof h2,
.hs-jo-result h2,
.hs-jo-offer-map__grid h3,
.hs-jo-system-board__grid h3 {
  font-family: var(--hs-font-display);
  font-weight: 400;
}
.hs-jo-hero h1 {
  font-size: clamp(3.6rem, 6.6vw, 6.2rem);
  line-height: 0.88;
  color: var(--ink);
}
.hs-jo-hero__lead,
.hs-jo-charge p,
.hs-jo-between p,
.hs-jo-light-spread p,
.hs-jo-section-head p,
.hs-jo-module-proof p,
.hs-jo-result p,
.hs-jo-offer-map__grid p,
.hs-jo-system-board__grid p {
  font-family: var(--hs-font-article);
  font-weight: 300;
}
.hs-jo-case-folio {
  --hs-folio-rail: clamp(2.5rem, 4vw, 3.5rem);
  --hs-folio-gap: clamp(1rem, 2vw, 1.35rem);
}
.hs-jo-case-folio::after {
  content: none;
}
.hs-jo-between.hs-jo-case-folio {
  display: grid;
  grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
  column-gap: var(--hs-folio-gap);
}
.hs-jo-between > .hs-jo-case-folio__mark {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: 0.15rem;
}
.hs-jo-between > h2,
.hs-jo-between > p {
  grid-column: 2;
}
.hs-jo-case-folio__mark {
  writing-mode: vertical-rl;
  justify-self: center;
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  line-height: 1;
  color: #8A7140;
  opacity: 0.78;
}
.hs-jo-between h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  max-width: 18ch;
}
.hs-jo-between p {
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.65;
  max-width: 52ch;
}
.hs-jo-charge {
  display: grid;
  grid-template-columns: minmax(12rem, 0.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  text-align: left;
}
.hs-jo-charge .hs-jo-kicker {
  grid-column: 1;
  margin-top: 0.55rem;
  color: #8A7140;
}
.hs-jo-charge h2,
.hs-jo-charge p {
  grid-column: 2;
}
.hs-jo-charge h2 {
  max-width: 20ch;
  margin-top: 0;
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.04;
}
.hs-jo-charge p {
  max-width: 54ch;
  margin-left: 0;
  margin-right: 0;
  font-size: 0.98rem;
  line-height: 1.82;
}
.hs-jo-charge__rule {
  grid-column: 1 / -1;
}
.hs-jo-light-spread,
.hs-jo-system-board {
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 32px 64px -16px rgba(0,0,0,0.65),
    0 8px 16px -8px rgba(0,0,0,0.4);
}
.hs-jo-name-proof__mark {
  width: clamp(5.5rem, 10vw, 8rem);
  height: auto;
}
.hs-jo-name-proof__logo {
  width: min(100%, clamp(14rem, 28vw, 24rem));
  height: auto;
  margin-top: clamp(1.35rem, 3vw, 2.2rem);
}
.hs-jo-name-proof__word,
.hs-jo-threshold-mark {
  display: none;
}
.hs-jo-offer-map__grid article {
  background: color-mix(in srgb, var(--ground) 72%, transparent);
}
.hs-jo-system-board__grid p {
  font-style: normal;
}

@media (max-width: 900px) {
  .hs-jo-charge {
    grid-template-columns: 1fr;
  }
  .hs-jo-charge .hs-jo-kicker,
  .hs-jo-charge h2,
  .hs-jo-charge p,
  .hs-jo-charge__rule {
    grid-column: 1;
  }
  .hs-jo-between.hs-jo-case-folio {
    grid-template-columns: 1fr;
  }
  .hs-jo-between > .hs-jo-case-folio__mark,
  .hs-jo-between > h2,
  .hs-jo-between > p {
    grid-column: 1;
  }
  .hs-jo-case-folio__mark {
    writing-mode: horizontal-tb;
    justify-self: start;
  }
}

@media (max-width: 540px) {
  .hs-jo-hero h1 {
    font-size: clamp(3.2rem, 17vw, 4.7rem);
  }
}
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; }

/* ── BASE ───────────────────────────────────── */
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--hs-font-body);
  font-size: var(--hs-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.45; mix-blend-mode: overlay;
}

/* ambient emerald/violet glow */
body::after {
  content: '';
  position: fixed; top: -20vh; left: -10vw;
  width: 70vw; height: 80vh;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 30%, var(--emerald-glow), transparent 60%),
    radial-gradient(ellipse at 75% 60%, var(--sh-glow), transparent 55%);
  filter: blur(40px);
}

h1, h2, h3, h4 {
  font-family: var(--hs-font-display);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ── LAYOUT ─────────────────────────────────── */
.hs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
}

/* ── KEYFRAMES ──────────────────────────────── */
@keyframes rise         { to { transform: translateY(0); } }
@keyframes fade         { to { opacity: 1; } }
@keyframes shimmerShift { from { background-position: 0% 0%; } to { background-position: 100% 0%; } }
@keyframes markpulse {
  0%,100% { opacity: 0.5; stroke: var(--emerald); }
  33%     { opacity: 0.9; stroke: var(--sh-teal); }
  66%     { opacity: 0.7; stroke: var(--sh-pearl); }
}
@keyframes slideMarquee { to { transform: translateX(-50%); } }

/* ── NAV ────────────────────────────────────── */
.hs-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1.5rem, 5vw, 5rem);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--void) 94%, transparent),
      color-mix(in srgb, var(--void) 76%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.hs-brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}

.hs-brand__mark {
  width: 32px; height: 32px;
  color: var(--ink); flex-shrink: 0;
}

.hs-brand__ring {
  transform-origin: center;
  animation: markpulse 5s ease-in-out infinite;
}

.hs-brand__word {
  font-family: var(--hs-font-logo);
  font-size: 22px; font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em; text-transform: lowercase;
  color: var(--ink);
}

.hs-brand__gold    { color: var(--gold); }
.hs-brand__emerald { color: var(--emerald); }

.hs-nav__links {
  display: flex; gap: clamp(1.2rem, 3vw, 3rem); align-items: center;
}

.hs-nav__link {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.3s;
}
.hs-nav__link:hover,
.hs-nav__link--active { color: var(--ink); }
.hs-nav__link:last-child {
  color: var(--emerald);
}

.hs-nav__menu {
  display: none;
  position: relative;
}
.hs-nav__menu summary {
  position: relative;
  width: 42px;
  height: 34px;
  display: block;
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--void) 82%, var(--emerald) 8%);
}
.hs-nav__menu summary::-webkit-details-marker { display: none; }
.hs-nav__menu summary span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--ink-soft);
  transition: transform 0.28s var(--ease), background 0.28s var(--ease);
}
.hs-nav__menu summary span:first-child {
  transform: translate(-50%, calc(-50% - 3px));
}
.hs-nav__menu summary span:last-child {
  transform: translate(-50%, calc(-50% + 3px));
}
.hs-nav__menu[open] summary span:first-child {
  transform: translate(-50%, -50%) rotate(42deg);
  background: var(--emerald);
}
.hs-nav__menu[open] summary span:last-child {
  transform: translate(-50%, -50%) rotate(-42deg);
  background: var(--emerald);
}
.hs-nav__menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.65rem);
  min-width: 10.5rem;
  display: grid;
  padding: 0.55rem;
  border: 1px solid var(--edge);
  background:
    radial-gradient(ellipse at 100% 0%, var(--emerald-glow), transparent 58%),
    color-mix(in srgb, var(--void) 93%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,0.9);
}
.hs-nav__menu-link {
  padding: 0.72rem 0.82rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.hs-nav__menu-link:last-child {
  border-bottom: 0;
  color: var(--emerald);
}
.hs-nav__menu-link:hover,
.hs-nav__menu-link--active {
  color: var(--ink);
}

/* ── HERO ───────────────────────────────────── */
.hs-hero {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
  padding-top: 10vh;
}

.hero-index {
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--emerald); margin-bottom: 3rem;
  display: flex; align-items: center; gap: 1rem;
}
.hero-index::before {
  content: ''; width: 40px; height: 1px; background: var(--emerald);
}

.hero-headline {
  font-family: var(--hs-font-display);
  font-weight: 300;
  font-size: clamp(3rem, 8.5vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  max-width: 13ch;
}

.hero-headline .line {
  display: block; overflow: hidden;
}
.hero-headline .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.2s var(--ease) forwards;
}
.hero-headline .line:nth-child(2) > span { animation-delay: 0.12s; }
.hero-headline .line:nth-child(3) > span { animation-delay: 0.24s; }
.hero-headline .line:nth-child(4) > span { animation-delay: 0.36s; }

/* em in hero headline = outline/stroke, italic — like v2 reference */
.hero-headline em {
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-soft);
  text-stroke: 1px var(--ink-soft);
}

/* grown word — the one that lands and lives: Neptune shimmer on Venus' emerald */
.hero-headline .hs-grown {
  font-style: italic;
  background: var(--shimmer-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerShift 6s ease-in-out infinite alternate;
}

.hero-foot {
  position: absolute;
  bottom: 3rem; left: clamp(1.5rem, 5vw, 5rem); right: clamp(1.5rem, 5vw, 5rem);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
  opacity: 0; animation: fade 1s var(--ease) 0.9s forwards;
}

.hero-statement {
  font-family: var(--hs-font-article); font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  color: var(--ink-soft); max-width: 38ch; line-height: 1.55;
}

.hero-scroll {
  font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--ink-dim); white-space: nowrap;
}

/* ── STRIP / MARQUEE ────────────────────────── */
.hs-strip {
  position: relative; z-index: 1;
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  background: var(--ground);
  overflow: hidden; white-space: nowrap; padding: 1.1rem 0;
}
.hs-strip__inner {
  display: inline-block;
  animation: slideMarquee 40s linear infinite;
}
.hs-strip__inner span {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: 1.1rem; color: var(--ink-dim); padding: 0 2.5rem;
}
.hs-strip__inner span em {
  font-style: italic; color: var(--ink-soft);
}

/* ── STATEMENT ──────────────────────────────── */
.hs-statement {
  position: relative; z-index: 1;
  min-height: clamp(28rem, 58svh, 44rem);
  display: grid;
  align-items: center;
  padding: clamp(6rem, 13vh, 10rem) clamp(1.5rem, 5vw, 5rem);
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--void) 10%, transparent)),
    var(--hs-statement-bg);
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  overflow: hidden;
  isolation: isolate;
}
.hs-statement::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 44% 72% at 50% 45%, var(--hs-statement-glow), transparent 64%);
  opacity: 0.72;
  pointer-events: none;
}
.hs-statement::after {
  content: '';
  position: absolute;
  inset: clamp(1.25rem, 4vw, 4rem);
  z-index: -1;
  border-top: 1px solid var(--hs-statement-rule);
  border-bottom: 1px solid var(--hs-statement-rule);
  pointer-events: none;
}
.hs-statement__inner {
  position: relative;
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}
.hs-statement__inner::before {
  content: '';
  align-self: center;
  width: min(18rem, 100%);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.72;
}
.hs-statement__inner q {
  grid-column: 2;
  display: block;
  max-width: none;
  text-wrap: balance;
  font-family: var(--hs-font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--hs-statement-copy);
  quotes: none;
}
.hs-statement__inner q em { font-style: italic; color: var(--emerald); }
.hs-statement__attr {
  grid-column: 2;
  justify-self: start;
  max-width: 36ch;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hs-statement-meta);
}

/* ── SERVICES ───────────────────────────────── */
.hs-services {
  position: relative; z-index: 1;
  padding: clamp(6rem, 15vh, 12rem) clamp(1.5rem, 5vw, 5rem);
}
.hs-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}
.hs-service-card {
  min-height: 220px;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-right: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--emerald) 8%, transparent), transparent 54%),
    color-mix(in srgb, var(--ground) 68%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.hs-service-card__num {
  color: var(--ink-dim);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.hs-service-card h3 {
  font-family: var(--hs-font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.hs-service-card p {
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.75;
}

/* ── CURRENT HIGHLIGHT ───────────────────────── */
.hs-highlight {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 2 * clamp(1.5rem, 5vw, 5rem)));
  margin: clamp(4rem, 9vh, 7rem) auto clamp(2rem, 5vh, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  box-shadow: 0 28px 80px -42px rgba(0,0,0,0.9);
}
.hs-highlight__media {
  min-height: clamp(260px, 32vw, 390px);
  background: var(--ground);
  overflow: hidden;
}
.hs-highlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.9;
  filter: saturate(1.04) contrast(1.04);
}
.hs-highlight__body {
  padding: clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(ellipse at 0% 100%, var(--emerald-glow), transparent 58%),
    var(--ground);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hs-highlight__body h2 {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.hs-highlight__body h2 em { font-style: italic; color: var(--sh-pearl); }
.hs-highlight__body p:not(.section-tag) {
  max-width: 42ch;
  color: var(--ink-soft);
  font-family: var(--hs-font-article);
  font-size: 0.95rem;
  line-height: 1.75;
}
.hs-highlight__link {
  margin-top: 1.6rem;
  font-family: var(--hs-font-logo);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald);
}

/* ── SECTION TAG (label above sections) ─────── */
.section-tag {
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--emerald); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.section-tag::before { content: ''; width: 30px; height: 1px; background: var(--emerald); }

/* ── APPROACH / METHOD ──────────────────────── */
.hs-approach {
  position: relative; z-index: 1;
  padding: clamp(6rem, 15vh, 14rem) clamp(1.5rem, 5vw, 5rem);
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 8vw, 8rem);
}

.approach-sticky {
  position: sticky; top: 20vh; align-self: start;
}
.approach-sticky h2 {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.0; letter-spacing: -0.02em;
}
.approach-sticky h2 em { font-style: italic; color: var(--ink-soft); }
.approach-sticky__copy {
  max-width: 48ch;
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.85;
  white-space: pre-line;
}

.approach-list { display: flex; flex-direction: column; }

.step {
  padding: 2.5rem 0; border-top: 1px solid var(--edge);
  display: grid; grid-template-columns: 4rem 1fr; gap: 2rem;
}
.step:last-child { border-bottom: 1px solid var(--edge); }
.step-n {
  font-family: var(--hs-font-display); font-style: italic;
  font-size: 1.4rem; color: var(--emerald);
}
.step h3 {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem); letter-spacing: -0.01em;
  line-height: 1.1;
}
.step p { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.8; max-width: 44ch; margin-top: 0.5rem; }

.hs-section-header { margin-bottom: 4rem; }
.hs-section-title {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(2rem, 5vw, 4rem); line-height: 1.0; letter-spacing: -0.02em;
  margin-top: 0.5rem;
}

/* ── CTA ────────────────────────────────────── */
.hs-cta {
  position: relative; z-index: 1; text-align: center;
  padding: clamp(8rem, 20vh, 16rem) clamp(1.5rem, 5vw, 5rem);
}
.hs-cta__title {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 0.96; letter-spacing: -0.02em; margin-bottom: 2.5rem;
}
.hs-cta--case .hs-cta__title {
  font-size: clamp(2rem, 4.8vw, 4.2rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin-bottom: 2.15rem;
}
.hs-cta__title em { font-style: italic; }
.hs-cta__sub,
.hs-cta__copy {
  max-width: 48ch;
  margin: -1.5rem auto 2rem;
  color: var(--ink-soft);
  line-height: 1.8;
}
.hs-cta__copy {
  margin-top: -1.75rem;
}

.hs-cta__btn {
  display: inline-block;
  font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--void); background: var(--emerald);
  padding: 1.1rem 3rem; border: none; cursor: pointer;
  font-family: var(--hs-font-body);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.hs-cta__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -15px var(--emerald-glow);
}

/* ── CONTACT FORM ───────────────────────────── */
.hs-contact-form {
  scroll-margin-top: clamp(6rem, 12vh, 8rem);
  margin-top: 3rem;
  max-width: 640px; margin-left: auto; margin-right: auto;
  display: flex; flex-direction: column; gap: 1.5rem;
  text-align: left;
}
.hs-contact-form label {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.hs-contact-form label > span {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-contact-form input,
.hs-contact-form textarea {
  background: color-mix(in srgb, var(--void) 88%, var(--emerald) 12%);
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  color: var(--ink); padding: 0.8rem 1rem;
  font-size: 0.9rem; line-height: 1.5;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent),
    0 18px 42px -34px rgba(0,0,0,0.82);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.hs-contact-form input:focus,
.hs-contact-form textarea:focus {
  outline: none;
  border-color: var(--emerald);
  background: color-mix(in srgb, var(--void) 82%, var(--emerald) 18%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    0 0 0 3px color-mix(in srgb, var(--emerald) 12%, transparent);
}
.hs-contact-form textarea { resize: vertical; min-height: 120px; }
.hs-contact-form__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.hs-contact-form__actions {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.hs-contact-form__status {
  font-size: 0.8rem; color: var(--ink-soft); flex: 1;
}

.hs-cta--intake {
  width: min(1120px, calc(100% - 2 * clamp(1.5rem, 5vw, 5rem)));
  margin: clamp(3rem, 7vh, 5rem) auto;
  padding: clamp(2.25rem, 5vh, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: left;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background:
    radial-gradient(ellipse at 84% 0%, var(--emerald-glow), transparent 48%),
    color-mix(in srgb, var(--ground) 72%, transparent);
}
.hs-cta--intake .hs-container {
  width: 100%;
  padding: 0;
}
.hs-cta--intake .hs-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(22rem, 1.12fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.hs-cta--intake .hs-cta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.hs-cta--intake .hs-label {
  font-family: var(--hs-font-logo);
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 1rem;
  display: block;
}
.hs-cta--intake .hs-cta__title {
  font-size: clamp(1.9rem, 3.8vw, 3.25rem);
  line-height: 1;
  margin-bottom: 1.25rem;
  max-width: 11ch;
}
.hs-cta--intake .hs-cta__copy,
.hs-cta--intake .hs-cta__sub {
  max-width: 38ch;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}
.hs-cta--intake > .hs-cta__title,
.hs-cta--intake > .hs-cta__copy,
.hs-cta--intake > .hs-cta__btn {
  max-width: 38rem;
}
.hs-cta--intake .hs-contact-form {
  margin: 0;
  max-width: none;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--void) 76%, var(--emerald) 6%);
  gap: 0.85rem;
}
.hs-cta--intake .hs-contact-form input,
.hs-cta--intake .hs-contact-form textarea {
  padding: 0.62rem 0.78rem;
}
.hs-cta--intake .hs-contact-form textarea {
  min-height: 82px;
}

.hs-contact-thanks-backdrop {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--void) 74%, transparent);
  backdrop-filter: blur(14px);
}
.hs-contact-thanks-backdrop[hidden] { display: none; }
.hs-contact-thanks {
  width: min(560px, 100%);
  border: 1px solid var(--edge);
  background:
    radial-gradient(ellipse at 80% 0%, var(--emerald-glow), transparent 48%),
    var(--ground);
  color: var(--ink);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.hs-contact-thanks__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.hs-contact-thanks h2 {
  margin-top: 0.45rem;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}
.hs-contact-thanks p {
  color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.3rem;
}
.hs-contact-thanks__close {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--edge);
  background: transparent; color: var(--ink-soft);
  cursor: pointer;
}
.hs-contact-thanks__close:hover {
  border-color: var(--emerald);
  color: var(--emerald);
}

/* ── BUTTONS (shared) ───────────────────────── */
.hs-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.75rem 1.5rem; border: 1px solid var(--edge);
  color: var(--ink); background: transparent; cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.hs-btn:hover { border-color: var(--emerald); color: var(--emerald); }
.hs-btn--primary {
  background: var(--emerald); border-color: var(--emerald);
  color: var(--void);
}
.hs-btn--primary:hover {
  background: var(--emerald-lo); border-color: var(--emerald-lo);
  color: var(--ink);
}
.hs-btn--ghost { border-color: var(--edge); }
.hs-btn--sm { padding: 0.5rem 1rem; font-size: 0.65rem; }
.hs-btn--large { padding: 1.1rem 3rem; }

/* ── LABELS + TAGS ──────────────────────────── */
.hs-label {
  display: inline-block;
  font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--emerald);
}
.hs-section-copy {
  font-size: 0.9rem; color: var(--ink-soft); line-height: 1.8;
  max-width: 52ch; margin-top: 1rem;
}
.hs-tag {
  display: inline-block;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--edge); color: var(--ink-dim);
  padding: 0.3rem 0.7rem;
}
.hs-tag--muted { opacity: 0.5; }

/* ── WORK PAGE ──────────────────────────────── */
.hs-work-header {
  padding-top: calc(5rem + 80px);
  padding-bottom: clamp(4rem, 8vh, 6rem);
  padding-left: clamp(1.5rem, 5vw, 5rem);
  padding-right: clamp(1.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--edge);
}
.hs-work-header__inner { max-width: 900px; }
.hs-work-header__title {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: -0.03em; line-height: 0.92;
  margin-top: 1.5rem;
}
.hs-work-header__sub {
  margin-top: 1.5rem; font-size: 0.9rem;
  color: var(--ink-soft); line-height: 1.8; max-width: 48ch;
}

.hs-work-grid-section {
  padding: clamp(4rem, 10vh, 8rem) clamp(1.5rem, 5vw, 5rem);
}
.hs-section-header { margin-bottom: clamp(3rem, 6vh, 5rem); }

.hs-work-grid {
  display: flex; flex-direction: column; gap: 0;
}

.hs-project-card {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0;
  border-top: 1px solid var(--edge);
  text-decoration: none; color: inherit;
  transition: background 0.4s;
}
.hs-project-card:last-child { border-bottom: 1px solid var(--edge); }
.hs-project-card:hover { background: var(--raised); }

.hs-project-card__visual {
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--ground); border-right: 1px solid var(--edge);
}
.hs-project-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.hs-project-card:hover .hs-project-card__img { transform: scale(1.03); }
.hs-project-card__img-placeholder {
  --project-visual-accent: var(--emerald);
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  color: var(--ink-dim);
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--project-visual-accent) 18%, transparent), transparent 24%),
    radial-gradient(circle at 72% 76%, color-mix(in srgb, var(--sh-violet) 12%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--raised) 74%, transparent), var(--ground));
}
.hs-project-card:nth-child(2n) .hs-project-card__img-placeholder { --project-visual-accent: var(--sh-teal); }
.hs-project-card:nth-child(3n) .hs-project-card__img-placeholder { --project-visual-accent: var(--sh-pearl); }
.hs-project-card__img-placeholder::before,
.hs-project-card__img-placeholder::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hs-project-card__img-placeholder::before {
  inset: 12%;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .7;
}
.hs-project-card__img-placeholder::after {
  left: 50%;
  top: 50%;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--project-visual-accent), transparent);
  transform: translate(-50%, -50%) rotate(-24deg);
  opacity: .7;
}
.hs-project-card__sigil {
  position: relative;
  z-index: 1;
  width: min(34%, 124px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--project-visual-accent) 64%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px color-mix(in srgb, var(--project-visual-accent) 8%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
.hs-project-card__sigil::before,
.hs-project-card__sigil::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: color-mix(in srgb, var(--project-visual-accent) 48%, transparent);
  transform: translate(-50%, -50%);
}
.hs-project-card__sigil::before { width: 1px; height: 132%; }
.hs-project-card__sigil::after { width: 132%; height: 1px; }
.hs-project-card__img-index {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.hs-project-card__body {
  padding: clamp(2rem, 5vh, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; gap: 1rem; justify-content: center;
}
.hs-project-card__meta {
  display: flex; align-items: center; gap: 1rem;
}
.hs-project-card__number {
  font-size: 0.65rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.hs-project-card__status {
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border: 1px solid var(--edge); color: var(--ink-dim);
}
.hs-project-card__status--live { border-color: var(--emerald); color: var(--emerald); }
.hs-project-card__status--coming { border-color: var(--edge); }
.hs-project-card__title {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.0;
}
.hs-project-card__desc {
  font-size: 0.85rem; color: var(--ink-soft); line-height: 1.8; max-width: 44ch;
}
.hs-project-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.hs-project-card--coming { opacity: 0.55; }

/* ── ARTICLE (NOTE) PAGE ────────────────────── */
.hs-note {
  --hs-note-hero-pt: 110px;
  --hs-note-hero-pb: 5rem;
}

.hs-note__hero {
  position: relative; overflow: hidden;
  padding: var(--hs-note-hero-pt) clamp(1.5rem, 5vw, 5rem) var(--hs-note-hero-pb);
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(31,168,113,0.07), transparent 55%),
    linear-gradient(180deg, var(--void) 0%, var(--ground) 100%);
  border-bottom: 1px solid var(--edge);
}
.hs-note__hero .hs-container { position: relative; z-index: 1; }

.hs-note__back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-bottom: 2rem;
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); transition: color 0.3s;
}
.hs-note__back:hover { color: var(--emerald); }

.hs-note__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;
}
.hs-note__meta span {
  border: 1px solid var(--edge); color: var(--ink-dim);
  padding: 0.3rem 0.7rem;
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
}

.hs-note__title {
  max-width: 820px; font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: -0.03em; line-height: 1.02;
}

.hs-note__excerpt {
  max-width: 660px; margin-top: 1.5rem;
  padding-left: 1.2rem; border-left: 2px solid var(--emerald);
  color: var(--ink-soft); font-family: var(--hs-font-display); font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55;
}

.hs-note__geometry {
  position: absolute; right: min(6vw, 72px); bottom: -100px;
  width: min(44vw, 480px); aspect-ratio: 1; opacity: 0.2; pointer-events: none;
}
.hs-note-orbit, .hs-note-axis, .hs-note-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.hs-note-orbit {
  border: 1px solid var(--sh-pearl); border-radius: 50%;
}
.hs-note-orbit--outer  { width: 100%; height: 100%; }
.hs-note-orbit--inner  { width: 48%; height: 48%; border-color: rgba(31,168,113,0.4); }
.hs-note-axis { background: var(--edge); }
.hs-note-axis--x { width: 100%; height: 1px; }
.hs-note-axis--y { width: 1px; height: 100%; }
.hs-note-core {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 10px rgba(31,168,113,0.1);
}

.hs-note__content {
  position: relative;
  background: var(--ink); /* warm cream reading surface */
  color: var(--void);
  padding-bottom: 6rem;
}

.hs-note__cover {
  width: min(760px, calc(100% - 3rem));
  margin: -2.5rem auto 0;
  border: 1px solid rgba(12,10,7,0.12);
  overflow: hidden;
}
.hs-note__cover img { width: 100%; display: block; }

.hs-note__body {
  width: min(760px, calc(100% - 3rem));
  margin: 0 auto;
  padding-top: 3rem;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.82;
  color: rgba(12,10,7,0.88);
}
.hs-note__body h2, .hs-note__body h3 { color: var(--void); margin: 2.5rem 0 1rem; }
.hs-note__body p  { margin-bottom: 1.4rem; }
.hs-note__body a  { color: var(--emerald-lo); border-bottom: 1px solid rgba(14,107,71,0.3); }
.hs-note__body a:hover { border-color: var(--emerald-lo); }
.hs-note__body blockquote {
  border-left: 3px solid var(--emerald-lo);
  padding-left: 1.2rem; margin: 2rem 0;
  color: rgba(12,10,7,0.6); font-style: italic;
}
.hs-note__body img { max-width: 100%; margin: 2rem 0; }

/* ── BYLINE ─────────────────────────────────── */
.hs-byline {
  padding: 3rem 0; border-top: 1px solid rgba(12,10,7,0.12);
  margin-top: 3rem;
}
.hs-byline__label {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(12,10,7,0.4); margin-bottom: 1.5rem;
}
.hs-byline__row { display: flex; flex-wrap: wrap; gap: 2rem; }
.hs-byline__card { display: flex; gap: 1rem; align-items: flex-start; }
.hs-byline__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.hs-byline__avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,10,7,0.1); color: rgba(12,10,7,0.5);
  font-size: 1.2rem; font-weight: 300;
}
.hs-byline__name {
  font-size: 0.9rem; font-weight: 400; color: var(--void);
}
.hs-byline__role {
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(12,10,7,0.4); margin-left: 0.5rem;
}
.hs-byline__bio {
  font-size: 0.82rem; color: rgba(12,10,7,0.6); line-height: 1.6; margin-top: 0.3rem;
}
.hs-byline__link {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--emerald-lo); border-bottom: 1px solid rgba(14,107,71,0.3);
}

/* ── ARTICLE ORBIT (decorative) ─────────────── */
.hs-article-orbit, .hs-article-axis, .hs-article-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.hs-article-orbit { border: 1px solid var(--edge); border-radius: 50%; }
.hs-article-orbit--outer { width: 132px; height: 132px; }
.hs-article-orbit--inner { width: 72px; height: 72px; border-color: rgba(31,168,113,0.3); }
.hs-article-axis { background: var(--edge); }
.hs-article-axis--x { width: 82%; height: 1px; }
.hs-article-axis--y { width: 1px; height: 78%; }
.hs-article-core {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 8px rgba(31,168,113,0.12);
}

/* ── ARTICLE SHARE ─────────────────────────── */
.share-strip {
  margin: clamp(2rem, 4vw, 3rem) auto;
  max-width: 760px;
}
.hs-note__share-top {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ── FOOTER ─────────────────────────────────── */
.hs-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--edge);
  background: var(--void);
  padding: 2.5rem clamp(1.5rem, 5vw, 5rem);
}

.hs-footer__grid {
  width: min(100%, 1180px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(130px, .78fr));
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.2rem);
}

.hs-footer__grid--no-official {
  grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(130px, .78fr));
}

.hs-footer__brand {
  display: grid; gap: .42rem; align-content: start;
  max-width: 360px;
  color: var(--ink-soft); text-decoration: none;
}
.hs-footer__name {
  font-family: var(--hs-font-logo); font-size: 1rem; font-weight: 400;
  text-transform: lowercase; letter-spacing: 0.04em;
}
.hs-footer__gold { color: var(--gold); }
.hs-footer__tagline,
.hs-footer__note {
  font-size: .76rem; line-height: 1.6;
  color: var(--ink-dim);
}
.hs-footer__note { max-width: 34ch; }

.hs-footer__nav {
  display: grid; gap: .55rem; align-content: start; justify-items: start;
}
.hs-footer__nav h5 {
  margin: 0 0 .1rem;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hs-footer__nav a {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); transition: color 0.3s;
}
.hs-footer__nav a:hover { color: var(--ink); }

.hs-footer__copy {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* ── REVEAL ANIMATION ───────────────────────── */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── REDUCED MOTION — nothing stays invisible ── */
@media (prefers-reduced-motion: reduce) {
  .hero-headline .line > span { transform: none; animation: none; }
  .hero-foot { opacity: 1; animation: none; }
  .reveal    { opacity: 1; transform: none; transition: none; }
}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 1180px) {
  .hs-statement__inner {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(1.5rem, 5vw, 4rem);
  }
}

@media (max-width: 860px) {
  .hs-approach { grid-template-columns: 1fr; }
  .hs-service-grid { grid-template-columns: 1fr 1fr; }
  .hs-highlight {
    grid-template-columns: 1fr;
  }
  .hs-highlight__media {
    min-height: auto;
    aspect-ratio: 16 / 10;
  }
  .hs-cta--intake .hs-cta__inner {
    grid-template-columns: 1fr;
  }
  .hs-statement {
    min-height: auto;
    padding: clamp(5.5rem, 12vh, 7rem) clamp(1.5rem, 6vw, 3rem);
  }
  .hs-statement__inner {
    width: min(680px, 100%);
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hs-statement__inner::before {
    display: block;
    width: min(10rem, 44%);
  }
  .hs-statement__inner q {
    grid-column: 1;
    max-width: 20ch;
    font-size: clamp(2.1rem, 7.6vw, 3.35rem);
  }
  .hs-statement__attr { grid-column: 1; }
  .approach-sticky { position: static; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero-headline { font-size: clamp(3rem, 16vw, 6rem); }
  .hs-project-card { grid-template-columns: 1fr; }
  .hs-project-card__visual { border-right: none; border-bottom: 1px solid var(--edge); aspect-ratio: 16 / 9; }
  .hs-contact-form__grid { grid-template-columns: 1fr; }
  .hs-footer__grid { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 3rem 1fr; }
}

@media (max-width: 540px) {
  .hs-nav {
    padding: 0.85rem clamp(1.1rem, 5vw, 1.5rem);
    align-items: center;
    gap: 0.75rem;
  }
  .hs-brand__mark { width: 28px; height: 28px; }
  .hs-brand__word { font-size: 18px; }
  .hs-nav__links {
    display: none;
  }
  .hs-nav__menu { display: block; }
  .hs-statement {
    padding: 5rem clamp(1.25rem, 6vw, 1.75rem);
  }
  .hs-statement::after { inset: 1rem; }
  .hs-statement__inner q {
    max-width: 19ch;
    font-size: clamp(1.95rem, 9.5vw, 2.45rem);
    line-height: 1.08;
  }
  .hs-footer__grid { grid-template-columns: 1fr; }
  .hs-statement__attr {
    margin-top: 1.9rem;
    font-size: 0.64rem;
  }
  .hs-service-grid { grid-template-columns: 1fr; }
  .hs-highlight {
    width: calc(100% - 2rem);
    margin-top: 3rem;
  }
  .hs-highlight__body {
    padding: 1.4rem 1.2rem 1.6rem;
  }
  .hs-highlight__body h2 {
    font-size: clamp(1.8rem, 10vw, 2.5rem);
  }
  .hs-cta--intake {
    width: calc(100% - 2rem);
    padding: 2rem 1rem;
  }
  .hs-cta--intake .hs-cta__inner {
    gap: 1.45rem;
  }
  .hs-cta--intake .hs-cta__title {
    font-size: clamp(1.85rem, 9.5vw, 2.65rem);
    margin-bottom: 0.9rem;
  }
  .hs-cta--intake .hs-cta__copy,
  .hs-cta--intake .hs-cta__sub {
    font-size: 0.88rem;
    margin-bottom: 0;
  }
  .hs-cta--intake .hs-contact-form {
    padding: 0.9rem;
    gap: 0.75rem;
  }
  .hs-cta__title { font-size: clamp(2rem, 12vw, 4rem); }
}

/* ══════════════════════════════════════════════════════
   METHOD PAGE — /method
   ══════════════════════════════════════════════════════ */

/* ── METHOD HERO ───────────────────────────────────── */
.hs-method-hero {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
  padding-top: 10vh;
  overflow: hidden;
}

/* large SVG mark orbiting in background */
.hs-method-hero__mark {
  position: absolute;
  right: clamp(-4rem, -5vw, -2rem);
  top: 50%; transform: translateY(-50%);
  width: clamp(320px, 50vw, 640px);
  height: clamp(320px, 50vw, 640px);
  opacity: 0.12; pointer-events: none;
}
.hs-method-mark-orbit {
  transform-origin: center;
  animation: methodOrbit 60s linear infinite;
}
.hs-method-mark-orbit-2 {
  transform-origin: center;
  animation: methodOrbit 90s linear infinite reverse;
}
@keyframes methodOrbit { to { transform: rotate(360deg); } }

.hs-method-hero__eyebrow {
  font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--emerald); margin-bottom: 3rem;
  display: flex; align-items: center; gap: 1rem;
}
.hs-method-hero__eyebrow::before {
  content: ''; width: 40px; height: 1px; background: var(--emerald);
}

.hs-method-hero__title {
  font-family: var(--hs-font-display);
  font-weight: 300;
  font-size: clamp(3rem, 8.5vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  max-width: 13.5ch;
}
.hs-method-hero__title .line { display: block; overflow: hidden; }
.hs-method-hero__title .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.2s var(--ease) forwards;
}
.hs-method-hero__title .line:nth-child(2) > span { animation-delay: 0.12s; }
.hs-method-hero__title em {
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-soft);
  text-stroke: 1px var(--ink-soft);
}
.hs-method-hero__title .hs-grown {
  font-style: italic;
  background: var(--shimmer-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerShift 6s ease-in-out infinite alternate;
}

.hs-method-hero__sub {
  font-family: var(--hs-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: var(--ink-soft); max-width: 42ch; line-height: 1.45;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  opacity: 0; animation: fade 1s var(--ease) 0.7s forwards;
}

.hs-method-hero__regents {
  position: absolute;
  bottom: 3rem; left: clamp(1.5rem, 5vw, 5rem); right: clamp(1.5rem, 5vw, 5rem);
  display: flex; gap: clamp(2rem, 6vw, 5rem); align-items: flex-end;
  opacity: 0; animation: fade 1s var(--ease) 1s forwards;
}
.hs-method-regent {
  display: flex; flex-direction: column; gap: 0.3rem;
}
.hs-method-regent__planet {
  font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--emerald);
}
.hs-method-regent__pos {
  font-family: var(--hs-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  color: var(--ink-soft);
}
.hs-method-regent__role {
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* ── METHOD SEQUENCE — three steps ────────────────── */
.hs-method-sequence {
  position: relative; z-index: 1;
  padding: clamp(6rem, 14vh, 12rem) clamp(1.5rem, 5vw, 5rem);
}
.hs-method-sequence__header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; align-items: end;
  margin-bottom: clamp(5rem, 10vh, 9rem);
  border-bottom: 1px solid var(--edge); padding-bottom: 3rem;
}
.hs-method-sequence__title {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  line-height: 1.0; letter-spacing: -0.02em;
}
.hs-method-sequence__title em { font-style: italic; color: var(--ink-soft); }
.hs-method-sequence__intro {
  font-size: 0.88rem; color: var(--ink-soft); line-height: 1.85; max-width: 44ch;
}

.hs-method-step {
  display: grid;
  grid-template-columns: clamp(5rem, 9vw, 9rem) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(3rem, 7vh, 5.5rem) 0;
  border-top: 1px solid var(--edge);
}
.hs-method-step:last-child { border-bottom: 1px solid var(--edge); }

.hs-method-step__left {
  display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.15rem;
}
.hs-method-step__num {
  font-family: var(--hs-font-display); font-style: italic; font-weight: 300;
  font-size: 1.4rem; color: var(--emerald); line-height: 1;
}
.hs-method-step__planet {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); margin-top: 0.5rem; line-height: 1.7;
}

.hs-method-step__right { display: flex; flex-direction: column; gap: 1.25rem; }
.hs-method-step__heading {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  letter-spacing: -0.02em; line-height: 1.0;
}
.hs-method-step__heading em { font-style: italic; color: var(--ink-soft); }
.hs-method-step__body {
  font-size: 0.9rem; color: var(--ink-soft); line-height: 1.85;
  max-width: 52ch;
}
.hs-method-step__tag {
  display: inline-block;
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid var(--edge); color: var(--ink-dim);
  padding: 0.3rem 0.75rem; margin-top: 0.5rem;
}
/* SVG decorative orbit per step */
.hs-method-step__glyph {
  width: clamp(48px, 8vw, 80px); height: clamp(48px, 8vw, 80px);
  opacity: 0.55; flex-shrink: 0; margin-top: 0.25rem;
}

/* ── DISTINCTION — what this is not ───────────────── */
.hs-method-distinction {
  position: relative; z-index: 1;
  background: var(--void);
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  padding: clamp(5rem, 12vh, 10rem) clamp(1.5rem, 5vw, 5rem);
  overflow: hidden;
}
.hs-method-distinction::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 90% 50%, var(--emerald-glow), transparent 55%),
    radial-gradient(ellipse 40% 80% at 5% 50%, var(--sh-glow), transparent 55%);
  pointer-events: none;
}
.hs-method-distinction__inner { position: relative; }
.hs-method-distinction__title {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -0.02em;
  margin-bottom: clamp(3rem, 7vh, 6rem); max-width: 24ch;
}
.hs-method-distinction__title em { font-style: italic; color: var(--ink-soft); }

.hs-method-distinction__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border-top: 1px solid var(--edge); border-left: 1px solid var(--edge);
}
.hs-method-contrast {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.hs-method-contrast__not {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: line-through;
}
.hs-method-contrast__is {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.1;
  letter-spacing: -0.01em; color: var(--ink);
}
.hs-method-contrast__is em { font-style: italic; color: var(--emerald); }
.hs-method-contrast__note {
  font-size: 0.8rem; color: var(--ink-dim); line-height: 1.7; max-width: 32ch;
}

/* ── GEOMETRY — the mark derivation ───────────────── */
.hs-method-geometry {
  position: relative; z-index: 1;
  padding: clamp(6rem, 14vh, 12rem) clamp(1.5rem, 5vw, 5rem);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 8rem); align-items: center;
}
.hs-method-geometry__visual {
  display: flex; align-items: center; justify-content: center;
}
.hs-method-geometry__mark {
  width: clamp(220px, 36vw, 420px);
  height: clamp(220px, 36vw, 420px);
}
.hs-method-geometry__mark-ring {
  animation: markpulse 5s ease-in-out infinite;
}
.hs-method-geometry__tag { margin-bottom: 1.5rem; }
.hs-method-geometry__title {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.hs-method-geometry__title em { font-style: italic; color: var(--ink-soft); }
.hs-method-geometry__body {
  font-size: 0.88rem; color: var(--ink-soft); line-height: 1.85; max-width: 44ch;
  margin-bottom: 2.5rem;
}
.hs-method-geometry__legend { display: flex; flex-direction: column; gap: 0.85rem; }
.hs-method-legend-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 0.75rem 0; border-top: 1px solid var(--edge);
}
.hs-method-legend-item:first-child { border-top: none; }
.hs-method-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.hs-method-legend-label {
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); display: block; margin-bottom: 0.2rem;
}
.hs-method-legend-text {
  font-size: 0.82rem; color: var(--ink-soft); line-height: 1.6;
}

/* ── RESPONSIVE — method ───────────────────────────── */
@media (max-width: 860px) {
  .hs-method-hero__mark { right: -8rem; opacity: 0.07; }
  .hs-method-hero__regents { position: static; margin-top: 3rem; animation: none; opacity: 1; }
  .hs-method-sequence__header { grid-template-columns: 1fr; }
  .hs-method-step { grid-template-columns: 3.5rem 1fr; }
  .hs-method-distinction__grid { grid-template-columns: 1fr; }
  .hs-method-geometry { grid-template-columns: 1fr; }
  .hs-method-geometry__visual { order: -1; }
  .hs-method-geometry__mark { width: clamp(180px, 60vw, 280px); height: clamp(180px, 60vw, 280px); }
}
@media (max-width: 540px) {
  .hs-method-hero__title { font-size: clamp(2.8rem, 16vw, 5rem); }
  .hs-method-step { grid-template-columns: 1fr; gap: 1rem; }
  .hs-method-step__left { flex-direction: row; align-items: center; gap: 1rem; }
  .hs-method-step__planet { margin-top: 0; }
}

/* ══════════════════════════════════════════════════════
   FORMAT BRIDGE — editor formatting classes
   Use these directly in content via the format bridge panel.
   All token-driven, no hardcoded values.
   ══════════════════════════════════════════════════════ */

/* colour signals */
.fmt-emerald  { color: var(--emerald); }
.fmt-gold     { color: var(--gold); }
.fmt-dim      { color: var(--ink-dim); }
.fmt-soft     { color: var(--ink-soft); }

/* type treatments */
.fmt-display  { font-family: var(--hs-font-display); font-weight: 300; letter-spacing: -0.02em; }
.fmt-italic   { font-style: italic; }
.fmt-strong   { font-weight: 500; }
.fmt-caps     { font-size: 0.7em; letter-spacing: 0.2em; text-transform: uppercase; }
.fmt-large    { font-size: 1.25em; line-height: 1.2; }
.fmt-small    { font-size: 0.82em; }

/* hero/headline specials */
.fmt-grown {
  /* the word that arrives — solid emerald, italic */
  color: var(--emerald);
  font-style: italic;
}
.fmt-outline {
  /* outline/stroke text — use on em tags inside headlines */
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-soft);
  text-stroke: 1px var(--ink-soft);
  font-style: italic;
}
.fmt-shimmer {
  /* animated shimmer — Neptune effect — use sparingly */
  background: var(--shimmer-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerShift 6s ease-in-out infinite alternate;
}

/* layout helpers */
.fmt-nowrap { white-space: nowrap; }
.fmt-balance { text-wrap: balance; }

/* ══════════════════════════════════════════════════════
   PORTFOLIO MAGAZIN — /work
   Dunkler Grund bleibt die Hülle. Helle Felder tauchen
   als Magazin-Spreads aus der Nacht auf — Inseln, keine
   eigenen Räume. Jedes Projekt ist ein Artikel.
   ══════════════════════════════════════════════════════ */

/* ── MASTHEAD — Magazin-Titelseite ─────────────────── */
.hs-masthead {
  position: relative; z-index: 1;
  /* horizontal padding grows to keep content ≤ 1320px */
  padding: clamp(9rem, 20vh, 16rem)
           max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2))
           clamp(4rem, 8vh, 7rem);
  border-bottom: 1px solid var(--edge);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end;
}
.hs-masthead::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 15% 60%, var(--emerald-glow), transparent 55%);
  pointer-events: none;
}
.hs-masthead__left { position: relative; z-index: 1; }
.hs-masthead__issue {
  font-family: var(--hs-font-logo); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--emerald);
  margin-bottom: 2rem; display: flex; align-items: center; gap: 0.8rem;
}
.hs-masthead__issue::before { content: ''; width: 28px; height: 1px; background: var(--emerald); }
.hs-masthead__title {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 6rem); line-height: 0.92; letter-spacing: -0.02em;
}
.hs-masthead__title em { font-style: italic; color: var(--sh-pearl); }
.hs-masthead__right {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 2.5rem;
}
.hs-masthead__desc {
  font-family: var(--hs-font-article); font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.8vw, 1.35rem); color: var(--ink-soft);
  line-height: 1.6; letter-spacing: 0.01em;
}
.hs-filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hs-chip {
  font-family: var(--hs-font-logo); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--edge); color: var(--ink-dim);
  padding: 0.45rem 1rem; border-radius: 100px;
  background: transparent; transition: all 0.3s var(--ease);
}
.hs-chip:hover { border-color: var(--ink-dim); color: var(--ink); }
.hs-chip.active { background: var(--emerald); border-color: var(--emerald); color: var(--void); }
.hs-chip--static {
  cursor: default;
  background: color-mix(in srgb, var(--ground) 58%, transparent);
}
.hs-chip--static:hover {
  border-color: var(--edge);
  color: var(--ink-dim);
}

/* ── PORTFOLIO WALL (dunkle Hülle) ─────────────────── */
.hs-portfolio-wall {
  position: relative; z-index: 1;
  background: var(--void);
  padding-left: clamp(1.5rem, 5vw, 5rem);
  padding-right: clamp(1.5rem, 5vw, 5rem);
}

/* ── ZWISCHEN-DUNKEL — Trenner zwischen Spreads ─────── */
.hs-between {
  position: relative; z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 4rem) 0;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
}
.hs-between__line { flex: 1; height: 1px; background: var(--edge); }
.hs-between__label {
  font-family: var(--hs-font-logo); font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-dim);
  padding: 0 1.5rem;
}

/* ── GALERIE-LISTE — Werke an einer Linie ──────────────
   Galerie bei Nacht: jede Zeile ist ein Werk an der Wand,
   keine Kiste. Beim Hover lebt eine Shimmer-Linie über die
   Kante (Saturn-Neptune in Bewegung) und ein Smaragd-Glow
   schiebt sich von links herein. ───────────────────────── */
/* ══════════════════════════════════════════════════════
   PORTFOLIO MAGAZIN — Dunkler Grund, helle Felder tauchen
   als Karten aus der Nacht auf. Jedes Projekt ist eine
   Welt — dunkel oben (Projekt-Ambiente), hell unten (Text).
   ══════════════════════════════════════════════════════ */
.hs-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1080px; margin: 0 auto;
  padding: clamp(3rem, 7vh, 6rem) 0 clamp(5rem, 12vh, 9rem);
}
.hs-piece {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 14px 44px rgba(0,0,0,0.18);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.hs-piece--live { cursor: pointer; }
.hs-piece--live:hover {
  transform: translateY(-7px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 32px 80px rgba(0,0,0,0.28);
}
.hs-piece--coming { opacity: 0.5; pointer-events: none; cursor: default; }

/* ── PREVIEW — das dunkle Projekt-Universum ── */
.hs-piece__preview {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  display: flex; align-items: flex-end; flex-shrink: 0;
}
.hs-piece__preview-bg { position: absolute; inset: 0; }
.hs-piece__preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(1.04) contrast(1.06);
}
.hs-piece__sigil {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; z-index: 1;
  opacity: 0.9; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.hs-piece--live:hover .hs-piece__sigil { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
.hs-piece__index {
  position: absolute; left: 1.2rem; bottom: 1rem; z-index: 2;
  font-family: var(--hs-font-logo); font-size: 0.6rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242,234,217,0.4);
}

/* ── BODY — das helle Feld ── */
.hs-piece__body {
  flex: 1; padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.7rem;
  background: var(--field);
}
.hs-piece__meta { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.hs-piece__num {
  font-family: var(--hs-font-logo); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-f-dim);
  font-variant-numeric: tabular-nums;
}
.hs-piece__badge {
  font-family: var(--hs-font-logo); font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.18rem 0.52rem; border-radius: 2px;
  border: 1px solid rgba(12,10,7,0.15); color: var(--ink-f-dim);
}
.hs-piece__badge--live { border-color: var(--emerald); color: var(--emerald); }
.hs-piece__title {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.08;
  letter-spacing: -0.015em; color: var(--ink-f);
  transition: color 0.4s var(--ease);
}
.hs-piece--live:hover .hs-piece__title { color: var(--emerald); }
.hs-piece__excerpt {
  font-family: var(--hs-font-article); font-weight: 300;
  font-size: 0.88rem; color: var(--ink-f-soft); line-height: 1.72; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hs-piece__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hs-piece__tag {
  font-family: var(--hs-font-logo); font-size: 0.56rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--field-edge); color: var(--ink-f-dim);
  padding: 0.18rem 0.5rem; border-radius: 2px;
}
.hs-piece__cta {
  display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.7rem;
  font-family: var(--hs-font-logo); font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--emerald);
  transition: gap 0.3s var(--ease);
}
.hs-piece--live:hover .hs-piece__cta { gap: 0.85rem; }
.hs-piece__soon {
  margin-top: auto; padding-top: 0.7rem;
  font-family: var(--hs-font-logo); font-size: 0.56rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-f-dim);
}

/* ── FEATURED — editorial lead, not an inflated card ── */
.hs-piece--feature {
  grid-column: 1 / -1;
  width: min(100%, 1080px);
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: clamp(320px, 36vw, 430px);
}
.hs-piece--feature .hs-piece__preview {
  order: 2;
  aspect-ratio: auto;
  min-height: 100%;
}
.hs-piece--feature .hs-piece__preview-img {
  filter: saturate(1.12) contrast(1.05) brightness(1.16);
}
.hs-piece--feature .hs-piece__preview-bg {
  opacity: 0.28;
  mix-blend-mode: multiply;
}
.hs-piece--feature .hs-piece__body {
  order: 1;
  justify-content: center;
  padding: clamp(1.6rem, 3.4vw, 3rem);
  gap: 0.9rem;
}
.hs-piece--feature .hs-piece__excerpt {
  padding-left: 1rem;
  border-left: 2px solid var(--emerald);
  -webkit-line-clamp: unset; overflow: visible;
  display: block; /* override webkit-box for full text */
}
.hs-piece--feature .hs-piece__title {
  font-size: clamp(1.55rem, 3.2vw, 2.5rem);
  max-width: 9ch;
}

/* ── OPEN SLOT — "Start a Project" ── */
.hs-piece--open {
  border: 1px dashed var(--edge); background: transparent; box-shadow: none;
}
.hs-piece--open:hover { transform: translateY(-4px); background: rgba(255,255,255,0.03); box-shadow: none; }
.hs-piece__open-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 3rem 2rem; text-align: center; min-height: 300px;
}
.hs-piece__open-icon {
  width: 48px; height: 48px; border: 1px solid var(--edge);
  border-radius: 50%; display: grid; place-items: center;
  color: var(--emerald); font-size: 1.4rem;
  transition: border-color 0.4s var(--ease);
}
.hs-piece--open:hover .hs-piece__open-icon { border-color: var(--emerald); }
.hs-piece__open-title {
  font-family: var(--hs-font-display); font-weight: 300;
  font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink);
}
.hs-piece__open-sub {
  font-family: var(--hs-font-article); font-style: italic; font-weight: 300;
  font-size: 0.85rem; color: var(--ink-dim); max-width: 24ch; line-height: 1.55;
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
  .hs-masthead { grid-template-columns: 1fr; gap: 2.5rem; }
  .hs-gallery { grid-template-columns: 1fr; }
  .hs-piece--feature {
    grid-column: 1;
    width: 100%;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hs-piece--feature .hs-piece__preview {
    order: 1;
    min-height: auto;
    aspect-ratio: 16 / 10;
  }
  .hs-piece--feature .hs-piece__body { order: 2; }
  .hs-piece--feature .hs-piece__excerpt { border-left: none; padding-left: 0; }
  .hs-piece--feature .hs-piece__title { max-width: none; }
}
@media (max-width: 540px) {
  .hs-masthead__title { font-size: clamp(2.4rem, 12vw, 4rem); }
}

/* ══════════════════════════════════════════════════════
   PORTFOLIO CASE STUDY — /portfolio/crown-alchemy
   Void ist das Haus, nie verlassen. Helle Felder sind
   Inseln — immer mit sichtbarem dunklen Rand. Das Weiß
   schwebt im Schwarz.
   ══════════════════════════════════════════════════════ */

/* ── PROGRESS BAR ───────────────────────────────────── */
.hs-progress {
  position: fixed; top: 0; left: 0; z-index: 200; height: 2px;
  background: linear-gradient(90deg,
    var(--sh-teal), var(--sh-pearl), var(--emerald), var(--sh-violet), var(--sh-teal));
  background-size: 200% 100%;
  animation: shimmerShift 3s ease-in-out infinite alternate;
  width: 0%; transition: width .1s linear;
  pointer-events: none;
}

/* ── STUDIO NOTES — 12 Mercury Publishing ──────────── */
.hs-notes {
  position: relative; z-index: 1;
  padding: clamp(5rem, 12vh, 9rem) clamp(1.5rem, 5vw, 5rem);
  border-top: 1px solid var(--edge);
}
.hs-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vh, 4rem);
}
.hs-note-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 1px solid var(--edge); overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.hs-note-card:hover { border-color: rgba(31,168,113,0.35); transform: translateY(-4px); }
.hs-note-card__img { overflow: hidden; aspect-ratio: 16/9; }
.hs-note-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.hs-note-card:hover .hs-note-card__img img { transform: scale(1.04); }
.hs-note-card__body { padding: clamp(1.2rem, 2vw, 1.6rem); flex: 1; display: flex; flex-direction: column; gap: 0.55rem; }
.hs-note-card__label {
  font-family: var(--hs-font-logo); font-size: 0.58rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--emerald); opacity: 0.8;
}
.hs-note-card__title {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink);
}
.hs-note-card__excerpt {
  font-family: var(--hs-font-article); font-style: italic; font-size: 0.85rem;
  color: var(--ink-soft); line-height: 1.6; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hs-note-card__foot {
  padding: 0.85rem clamp(1.2rem, 2vw, 1.6rem);
  border-top: 1px solid var(--edge);
  font-family: var(--hs-font-logo); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--emerald);
}
@media (max-width: 900px) { .hs-notes-grid { grid-template-columns: 1fr; gap: 0.75rem; } }

/* ── CASE HERO — full viewport, dunkel ──────────────── */
.hs-case-hero {
  position: relative; z-index: 1;
  isolation: isolate;
  height: clamp(600px, 88svh, 820px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hs-case-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 42% 34% at 22% 72%, rgba(196,74,26,0.24), transparent 60%),
    radial-gradient(ellipse 36% 28% at 28% 76%, rgba(122,35,36,0.36), transparent 66%),
    radial-gradient(ellipse 65% 55% at 72% 30%, var(--emerald-glow), transparent 62%),
    radial-gradient(ellipse 40% 45% at 15% 80%, rgba(31,168,113,0.08), transparent 55%),
    linear-gradient(175deg, rgba(7,13,11,0.65) 0%, rgba(7,13,11,0.2) 40%, rgba(7,13,11,1) 100%),
    var(--void);
}
.hs-case-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,13,11,0.9) 0%, rgba(7,13,11,0.48) 52%, rgba(7,13,11,0.78) 100%),
    linear-gradient(180deg, rgba(7,13,11,0.04) 0%, rgba(7,13,11,0.96) 92%);
  pointer-events: none;
}
.hs-case-hero__content {
  position: relative; z-index: 3;
  isolation: isolate;
  padding: 0 max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2)) clamp(4rem, 8vh, 7rem);
}
.hs-case-hero__content::before {
  content: '';
  position: absolute;
  left: max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2));
  bottom: clamp(2.9rem, 6vh, 5.2rem);
  width: clamp(16rem, 32vw, 32rem);
  aspect-ratio: 1.75;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 54% at 42% 46%, rgba(196,74,26,0.2), transparent 64%),
    radial-gradient(ellipse 84% 74% at 50% 54%, rgba(122,35,36,0.26), transparent 70%);
  filter: blur(8px);
  opacity: 0.9;
}
.hs-case-hero__logo {
  display: block;
  width: clamp(13rem, 30vw, 30rem);
  max-height: clamp(5.4rem, 10vw, 12rem);
  object-fit: contain;
  object-position: left center;
  filter:
    invert(1)
    sepia(0.08)
    saturate(1.25)
    brightness(1.08)
    drop-shadow(0 0 16px rgba(196,74,26,0.22))
    drop-shadow(0 18px 44px rgba(0,0,0,0.74));
  opacity: 0.68;
  margin-bottom: clamp(1.35rem, 3vh, 2.1rem);
  mix-blend-mode: screen;
}
.hs-case-hero__eyebrow {
  font-family: var(--hs-font-logo); font-size: 0.68rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #8A7140; margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.hs-case-hero__eyebrow::before { content: ''; width: 28px; height: 1px; background: #8A7140; }
.hs-case-hero__title {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(4rem, 11vw, 11rem); line-height: 0.87; letter-spacing: -0.025em;
}
.hs-case-hero__title em { font-style: italic; color: var(--sh-pearl); }
.hs-case-hero__title--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── HERO VISUALS — editoriale Fotopanels, absolut im void ── */
.hs-case-hero__visuals {
  position: absolute; z-index: 2;
  top: clamp(8.5rem, 18vh, 12rem);
  right: max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2));
  display: flex;
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: flex-start;
  width: clamp(560px, 54vw, 800px);
}
.hs-case-hero__visuals::before {
  content: '';
  position: absolute;
  left: 4%;
  right: 6%;
  bottom: -3.4rem;
  height: clamp(8rem, 15vw, 14rem);
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 42% at 54% 42%, rgba(31,168,113,0.34), transparent 68%),
    radial-gradient(ellipse 72% 56% at 64% 62%, rgba(107,138,126,0.22), transparent 72%),
    radial-gradient(ellipse 50% 46% at 78% 54%, rgba(196,74,26,0.14), transparent 70%);
  filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
}
.hs-case-hero__fig {
  flex: 1; margin: 0;
  display: flex; flex-direction: column; gap: 0.7rem;
}
/* Versionszwei etwas tiefer gesetzt — editorial stagger */
.hs-case-hero__fig--v2 { margin-top: clamp(2rem, 5vh, 4rem); }
.hs-case-hero__fig-img {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  box-shadow: 0 20px 56px -12px rgba(0,0,0,0.88), 0 0 0 1px rgba(255,255,255,0.04);
}
.hs-case-hero__fig-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
.hs-case-hero__fig figcaption {
  font-family: var(--hs-font-logo); font-size: 0.55rem;
  letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.6;
  color: var(--ink-dim);
}
.hs-case-hero__fig--v1 figcaption { color: var(--ink-faint); }
.hs-case-hero__fig--v2 figcaption { color: var(--emerald); opacity: 0.75; }
.hs-case-hero__folio {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-top: clamp(2rem, 5vh, 4rem);
  color: color-mix(in srgb, #8A7140 72%, var(--ink) 28%);
  pointer-events: none;
}
.hs-case-hero__folio span {
  writing-mode: vertical-rl;
  font-family: var(--hs-font-logo);
  font-size: 0.48rem;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}
.hs-case-hero__folio i {
  display: block;
  width: 1px;
  height: clamp(4.5rem, 10vh, 7rem);
  background:
    linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb, #8A7140 72%, transparent),
      color-mix(in srgb, var(--ink) 18%, transparent),
      color-mix(in srgb, #8A7140 72%, transparent),
      transparent
    );
}

/* ── DARK STRIP — Meta direkt auf dem void ──────────── */
.hs-dark-strip {
  position: relative; z-index: 1;
  padding: clamp(2.5rem, 6vh, 5rem)
           max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2));
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.hs-meta-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
.hs-meta-item { display: flex; flex-direction: column; gap: 0.4rem; }
.hs-meta-label {
  font-family: var(--hs-font-logo); font-size: 0.6rem; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--ink-dim);
}
.hs-meta-value {
  font-family: var(--hs-font-body); font-size: 0.85rem; font-weight: 400; color: var(--ink);
}
.hs-meta-value--accent { color: var(--emerald); }

/* ── PROJECT CHARGE — Auftrag als Brand-Problem ────── */
.hs-project-charge {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 7vh, 5.5rem)
           max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1180px) / 2));
  display: grid;
  grid-template-columns: minmax(12rem, 0.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  border-bottom: 1px solid var(--edge);
}
.hs-project-charge__label {
  align-self: start;
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  line-height: 1.7;
  text-transform: uppercase;
  color: #8A7140;
}
.hs-project-charge h2 {
  grid-column: 2;
  max-width: 20ch;
  font-family: var(--hs-font-display);
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.04;
}
.hs-project-charge h2 em { font-style: italic; color: var(--sh-pearl); }
.hs-project-charge p {
  grid-column: 2;
  max-width: 54ch;
  font-family: var(--hs-font-article);
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.82;
  letter-spacing: 0.012em;
  color: var(--ink-soft);
}
.hs-project-charge__rule {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-top: clamp(1rem, 2vh, 1.8rem);
  font-family: var(--hs-font-logo);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-project-charge__rule i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(122,35,36,0.58), rgba(138,113,64,0.34), rgba(107,138,126,0.48));
}

/* Mockup-Frame */
.hs-mockup {
  display: flex; flex-direction: column;
  border-radius: 5px; overflow: hidden;
  box-shadow:
    0 0 0 1px var(--edge),
    0 20px 44px -10px rgba(0,0,0,0.6);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.hs-mockup:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--edge), 0 32px 60px -14px rgba(0,0,0,0.75);
}
/* Browser-Chrome-Bar */
.hs-mockup__bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.85rem; flex-shrink: 0;
  background: var(--ground);
  border-bottom: 1px solid var(--edge);
}
.hs-mockup--dead .hs-mockup__bar {
  background: #090F0F;
  border-bottom-color: rgba(74,199,184,0.12);
}
.hs-mockup__dots { display: flex; gap: 0.28rem; flex-shrink: 0; }
.hs-mockup__dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.hs-mockup--dead .hs-mockup__dots span:nth-child(1) { background: rgba(74,199,184,0.45); }
.hs-mockup--dead .hs-mockup__dots span:nth-child(2) { background: rgba(74,199,184,0.22); }
.hs-mockup--dead .hs-mockup__dots span:nth-child(3) { background: rgba(74,199,184,0.10); }
.hs-mockup--live .hs-mockup__dots span:nth-child(1) { background: rgba(31,168,113,0.55); }
.hs-mockup--live .hs-mockup__dots span:nth-child(2) { background: rgba(31,168,113,0.28); }
.hs-mockup--live .hs-mockup__dots span:nth-child(3) { background: rgba(31,168,113,0.12); }
.hs-mockup__url {
  font-family: var(--hs-font-logo); font-size: 0.56rem;
  letter-spacing: 0.12em; color: var(--ink-faint);
  flex: 1; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-mockup--dead .hs-mockup__url { color: rgba(74,199,184,0.3); }
/* Screenshot-Fenster */
.hs-mockup__screen {
  position: relative; overflow: hidden; flex-shrink: 0;
  height: clamp(200px, 26vw, 390px);
}
.hs-mockup__screen img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
.hs-mockup--dead .hs-mockup__screen::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(4,12,14,0.4) 100%);
  pointer-events: none;
}
.hs-mockup--live .hs-mockup__screen::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(4,3,2,0.25) 100%);
  pointer-events: none;
}
/* Farbpalette — Swatches dehnen sich beim Hover */
.hs-mockup__palette { display: flex; height: 26px; flex-shrink: 0; }
.hs-mockup__swatch {
  flex: 1; height: 100%; cursor: default;
  transition: flex 0.22s var(--ease);
}
.hs-mockup__swatch:hover { flex: 2.8; }
/* Footer */
.hs-mockup__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.85rem; flex-shrink: 0;
  background: var(--ground);
  border-top: 1px solid var(--edge);
}
.hs-mockup--dead .hs-mockup__foot {
  background: #090F0F;
  border-top-color: rgba(74,199,184,0.10);
}
.hs-mockup__foot-label {
  font-family: var(--hs-font-logo); font-size: 0.54rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-dim);
}
.hs-mockup--dead .hs-mockup__foot-label { color: rgba(74,199,184,0.3); }
.hs-mockup__foot-badge {
  font-family: var(--hs-font-logo); font-size: 0.5rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.22em 0.75em; border-radius: 100px;
}
.hs-mockup--dead .hs-mockup__foot-badge {
  color: rgba(74,199,184,0.5);
  background: rgba(74,199,184,0.06);
  border: 1px solid rgba(74,199,184,0.14);
}
.hs-mockup--live .hs-mockup__foot-badge {
  color: var(--emerald);
  background: rgba(31,168,113,0.08);
  border: 1px solid rgba(31,168,113,0.2);
}
/* Bridge — Trennzeichen zwischen den Hero-Frames */
.hs-case-hero__bridge {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.5rem;
  align-self: center;
}
.hs-case-hero__bridge-rule { width: 1px; height: clamp(0.8rem, 2vh, 1.5rem); background: var(--edge); }
.hs-case-hero__bridge-arrow {
  font-family: var(--hs-font-display); font-style: italic;
  font-size: clamp(0.8rem, 1.4vw, 1.1rem); color: var(--ink-faint);
  line-height: 1;
}
@media (max-width: 900px) {
  .hs-case-hero__mockups { display: none; }
}

/* ── ZWISCHEN-TITEL — dunkle Überschriften auf dem void  */
.hs-between-title {
  padding: clamp(3rem, 7vh, 6rem)
           max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2))
           clamp(2rem, 4vh, 3rem);
  position: relative; z-index: 1;
}
/* Variante: Titel rechtsbündig — der Blick wandert */
.hs-between-title--right { text-align: right; }
.hs-between-title--right p { margin-left: auto; }
.hs-between-title h2 {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem); line-height: 0.95; letter-spacing: -0.02em;
}
.hs-between-title h2 em { font-style: italic; color: var(--sh-pearl); }
.hs-between-title p {
  font-family: var(--hs-font-article); font-style: italic; font-weight: 300;
  font-size: 1.05rem; color: var(--ink-soft); margin-top: 1.2rem;
  max-width: 52ch; line-height: 1.65;
}
.hs-case-folio {
  position: relative;
  --hs-folio-rail: clamp(2.5rem, 4vw, 3.5rem);
  --hs-folio-gap: clamp(1rem, 2vw, 1.35rem);
}
.hs-case-folio::after {
  content: none;
}
.hs-case-folio__mark {
  position: relative;
  z-index: 3;
  display: block;
  justify-self: center;
  align-self: start;
  writing-mode: vertical-rl;
  font-family: var(--hs-font-logo);
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  color: #8A7140;
  opacity: 0.78;
  pointer-events: none;
}
.hs-between-title.hs-case-folio {
  display: grid;
  grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
  column-gap: var(--hs-folio-gap);
}
.hs-between-title > .hs-case-folio__mark {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: 0.15rem;
}
.hs-between-title > h2,
.hs-between-title > p {
  grid-column: 2;
}

/* ── PANEL — helle Insel schwebt im void ────────────── */
.hs-panel {
  position: relative; z-index: 1;
  max-width: 1320px;
  margin: 0 auto var(--gutter);
  width: calc(100% - 2 * var(--gutter));
  background: var(--field);
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 32px 64px -16px rgba(0,0,0,0.65),
    0 8px 16px -8px rgba(0,0,0,0.4);
}

/* Asymmetrie — Panels hängen versetzt in der Wand */
.hs-panel--left  {
  margin-left: max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2));
  margin-right: auto;
  width: calc(100% - max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2)) - clamp(3rem, 8vw, 7rem));
}
.hs-panel--right {
  margin-right: max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2));
  margin-left: auto;
  width: calc(100% - max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2)) - clamp(3rem, 8vw, 7rem));
}
.hs-panel--narrow { max-width: 980px; }
.hs-panel--colour-proof {
  max-width: 1180px;
  background: #F2F2F2;
}
.hs-panel--colour-proof .hs-system-split {
  background: #D9D9D6;
}
.hs-panel--colour-proof .hs-system-col {
  background: #F2F2F2;
}
.hs-panel--colour-proof .hs-system-label,
.hs-panel--colour-proof .hs-type-row,
.hs-panel--colour-proof .hs-panel-caption {
  border-color: #D9D9D6;
}

/* ── PANEL-VARIANTE: WATER — die archivierte Welt ───── */
/* Akt I trägt die alte Pisces-Welt im Material selbst */
.hs-panel--water {
  background: linear-gradient(168deg, #0B1D1D 0%, #122430 48%, #1A1A38 100%);
  box-shadow:
    0 0 0 1px rgba(74,199,184,0.07),
    0 32px 64px -16px rgba(0,0,0,0.7),
    0 8px 16px -8px rgba(0,0,0,0.45);
}
.hs-panel--water .hs-intro-text h3 { color: #D7E4E2; }
.hs-panel--water .hs-intro-text h3 em { color: #7FA8A4; }
.hs-panel--water .hs-intro-text p { color: #8FA8A6; }
.hs-panel--water .hs-pull-quote { border-left-color: #4AC7B8; }
.hs-panel--water .hs-pull-quote p { color: #8FA8A6; }
.hs-panel--water .hs-pull-quote p strong { color: #D7E4E2; }
.hs-panel--water .hs-panel-caption {
  background: rgba(8,12,16,0.5);
  border-top-color: rgba(74,199,184,0.12);
  color: #5E7876;
}

/* Quelle-Karten — neutral im Feld */
.hs-source-list { display: flex; flex-direction: column; gap: 1px; background: var(--field-edge); }
.hs-source {
  background: var(--field-warm);
  padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.hs-source__label {
  font-family: var(--hs-font-logo); font-size: 0.6rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-f-dim);
}
.hs-source__text {
  font-family: var(--hs-font-article); font-weight: 300;
  font-size: 0.88rem; color: var(--ink-f-soft); line-height: 1.7;
}
.hs-source__text em { font-style: italic; color: var(--ink-f); }

/* ── DESCENT — die Diagnose, gestaffelt auf dem Void ── */
.hs-descent {
  position: relative; z-index: 1;
  padding: clamp(3rem, 8vh, 7rem) clamp(1.5rem, 5vw, 5rem);
  max-width: calc(1320px + 2 * clamp(1.5rem, 5vw, 5rem));
  margin: 0 auto;
}
.hs-descent__step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
  max-width: 720px;
  padding: clamp(2rem, 5vh, 3.5rem) 0;
  border-top: 1px solid var(--edge);
}
.hs-descent__step:first-child { border-top: none; padding-top: 0; }
/* Die Treppe — jeder Befund steigt tiefer */
.hs-descent__step:nth-child(2) { margin-left: clamp(0rem, 12vw, 14rem); }
.hs-descent__step:nth-child(3) { margin-left: clamp(0rem, 24vw, 28rem); }
.hs-descent__step:nth-child(4) { margin-left: clamp(0rem, 16vw, 20rem); }
.hs-descent__num {
  font-family: var(--hs-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 0.9;
  color: var(--ink-faint);
}
.hs-descent__body h3 {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.015em;
  line-height: 1.08; margin-bottom: 1rem;
}
.hs-descent__body h3 em { font-style: italic; color: var(--sh-pearl); }
.hs-descent__label {
  font-family: var(--hs-font-logo); font-size: 0.6rem;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--emerald);
  display: block; margin-bottom: 0.9rem;
}
.hs-descent__body p {
  font-family: var(--hs-font-article); font-weight: 300;
  font-size: 0.97rem; color: var(--ink-soft);
  line-height: 1.85; letter-spacing: 0.012em;
  max-width: 52ch;
}

/* Das Verdikt am Grund der Treppe */
.hs-descent__verdict {
  margin-top: clamp(3rem, 8vh, 6rem);
  padding-top: clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--edge);
  text-align: center;
}
.hs-descent__verdict-q {
  font-family: var(--hs-font-logo); font-size: 0.65rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: 1.6rem;
}
.hs-descent__verdict-line {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink);
}
.hs-descent__verdict-line em { font-style: italic; }
.hs-descent__verdict-line .dead { color: #7A2324; }
.hs-descent__verdict-line .lives { color: var(--emerald); }

/* ── DERIVATION PLATE — Magazin-Beweisstück ─────────── */
.hs-derivation-plate {
  position: relative; z-index: 1;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1180px;
  margin: clamp(0.5rem, 2vh, 1.5rem) auto clamp(3rem, 7vh, 5rem);
}
.hs-derivation-plate__frame {
  grid-column: 2;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: var(--void);
  box-shadow:
    0 28px 62px -38px rgba(0,0,0,0.82),
    inset 0 1px 0 rgba(255,255,255,0.035);
  overflow: hidden;
}
.hs-derivation-plate.hs-case-folio {
  display: grid;
  grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
}
.hs-derivation-plate > .hs-case-folio__mark {
  grid-column: 1;
  grid-row: 1;
  margin-top: clamp(1.65rem, 4vw, 3rem);
}
.hs-derivation-plate::before {
  content: none;
}
.hs-derivation-plate__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.65rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.hs-derivation-plate__kicker {
  align-self: end;
  font-family: var(--hs-font-logo);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--emerald);
}
.hs-derivation-plate__kicker::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  margin-bottom: 0.9rem;
  background: var(--emerald);
}
.hs-derivation-plate__head h2 {
  font-family: var(--hs-font-display);
  font-size: clamp(1.8rem, 3.6vw, 3.55rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  color: var(--ink);
}
.hs-derivation-plate__head h2 em {
  font-style: italic;
  color: var(--sh-pearl);
}
.hs-derivation-plate__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.hs-derivation-plate__cell {
  position: relative;
  min-height: 190px;
  padding: clamp(1.25rem, 2.4vw, 1.8rem);
  border-left: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.65rem;
}
.hs-derivation-plate__cell:first-child { border-left: none; }
.hs-derivation-plate__cell::before {
  content: '';
  position: absolute;
  top: clamp(1.2rem, 2.4vw, 1.7rem);
  right: clamp(1.2rem, 2.4vw, 1.7rem);
  width: clamp(1rem, 1.15vw, 1.18rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--plate-dot, var(--emerald));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--plate-dot, var(--emerald)) 55%, var(--ink) 45%),
    0 0 34px -8px var(--plate-dot, var(--emerald));
  opacity: 0.96;
}
.hs-derivation-plate__cell--pluto { --plate-dot: #5C1A1B; }
.hs-derivation-plate__cell--capricorn { --plate-dot: #8A7140; }
.hs-derivation-plate__cell--taurus { --plate-dot: #3A2A1F; }
.hs-derivation-plate__cell--aquarius { --plate-dot: #6B8A7E; }
.hs-derivation-plate__num {
  position: absolute;
  top: clamp(1.05rem, 2.4vw, 1.55rem);
  left: clamp(1.25rem, 2.4vw, 1.8rem);
  font-family: var(--hs-font-display);
  font-size: clamp(2.35rem, 4.1vw, 3.6rem);
  font-style: italic;
  line-height: 0.9;
  color: color-mix(in srgb, var(--ink) 8%, transparent);
}
.hs-derivation-plate__role {
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--emerald);
}
.hs-derivation-plate__cell h3 {
  max-width: 15ch;
  font-family: var(--hs-font-display);
  font-size: clamp(1.05rem, 1.55vw, 1.38rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.16;
  color: var(--ink);
}
.hs-derivation-plate__cell p {
  max-width: 26ch;
  font-family: var(--hs-font-article);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-soft);
}
.hs-derivation-plate__seal {
  position: relative;
  padding: 1rem clamp(1.5rem, 5vw, 4rem);
  font-family: var(--hs-font-logo);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
}

/* ── NAMING SPLIT — halb Void, halb Feld ────────────── */
.hs-naming-split {
  position: relative; z-index: 1;
  max-width: 1320px;
  margin: 0 auto var(--gutter);
  width: calc(100% - 2 * var(--gutter));
  display: grid; grid-template-columns: var(--hs-folio-rail) 1fr minmax(380px, 520px);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 5vh, 4rem) 0;
}
.hs-naming-split > .hs-case-folio__mark {
  grid-column: 1;
}
.hs-naming-split__dark {
  grid-column: 2;
}
.hs-naming-split__field {
  grid-column: 3;
}
.hs-naming-split__dark h3 {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -0.015em;
  line-height: 1.08; margin-bottom: 1.4rem;
}
.hs-naming-split__dark h3 em { font-style: italic; color: var(--sh-pearl); }
.hs-naming-split__dark p {
  font-family: var(--hs-font-article); font-weight: 300;
  font-size: 0.97rem; color: var(--ink-soft);
  line-height: 1.85; letter-spacing: 0.012em;
  max-width: 52ch; margin-bottom: 1rem;
}
.hs-naming-split__field {
  background: var(--field);
  border-radius: 3px;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 32px 64px -16px rgba(0,0,0,0.65),
    0 8px 16px -8px rgba(0,0,0,0.4);
}
.hs-panel-pad { padding: clamp(2.5rem, 5vw, 5rem); }

/* ── INTRO GRID — Text + KPIs ───────────────────────── */
.hs-intro-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem); align-items: start;
}
.hs-intro-text h3 {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -0.015em; line-height: 1.05;
  color: var(--ink-f); margin-bottom: 1.5rem;
}
.hs-intro-text h3 em { font-style: italic; color: var(--ink-f-soft); }
.hs-intro-text p {
  font-family: var(--hs-font-article); font-weight: 300; font-size: 1rem;
  color: var(--ink-f-soft); line-height: 1.82; letter-spacing: 0.012em; margin-bottom: 1rem;
}
.hs-kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--field-edge);
}
.hs-kpi {
  background: var(--field-warm); padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.hs-kpi__num {
  font-family: var(--hs-font-display); font-size: 2.4rem; font-weight: 400;
  letter-spacing: -0.02em; color: var(--ink-f); line-height: 1;
}
.hs-kpi__num em { font-style: italic; color: var(--emerald); }
.hs-kpi__label {
  font-family: var(--hs-font-logo); font-size: 0.58rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-f-dim);
}
.hs-pull-quote {
  margin-top: 1.5rem; border-left: 2px solid var(--emerald); padding-left: 1.4rem;
}
.hs-pull-quote p {
  font-family: var(--hs-font-display); font-style: italic;
  font-size: 1.1rem; color: var(--ink-f-soft); line-height: 1.5;
}
.hs-pull-quote p strong { font-style: normal; color: var(--ink-f); }

/* Panel image */
.hs-panel-img { width: 100%; display: block; object-fit: cover; }
.hs-panel-img--wide { aspect-ratio: 21/9; }
.hs-panel-img--mid  { aspect-ratio: 16/7; }
.hs-panel-caption {
  padding: 0.75rem clamp(2.5rem, 5vw, 5rem);
  background: var(--field-warm); border-top: 1px solid var(--field-edge);
  font-family: var(--hs-font-logo); font-size: 0.58rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-f-dim);
  display: flex; justify-content: space-between;
}
/* Placeholder panel image */
.hs-panel-img-placeholder {
  width: 100%; aspect-ratio: 21/9;
  background: var(--field-warm);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.hs-panel-img-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(26,22,16,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,22,16,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── DERIVATION CARDS ───────────────────────────────── */
.hs-d-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--field-edge);
}
.hs-d-card {
  background: var(--field); padding: 2rem 1.8rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.hs-d-card__label {
  font-family: var(--hs-font-logo); font-size: 0.58rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--emerald);
}
.hs-d-card__title {
  font-family: var(--hs-font-display); font-size: 1.35rem; font-weight: 400;
  letter-spacing: -0.01em; color: var(--ink-f); line-height: 1.15;
}
.hs-d-card__title em { font-style: italic; }
.hs-d-card__text {
  font-family: var(--hs-font-body); font-size: 0.78rem;
  color: var(--ink-f-soft); line-height: 1.8;
}

/* ── SYSTEM SPLIT — Colour + Type ───────────────────── */
.hs-system-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--field-edge);
}
.hs-system-col { padding: clamp(2rem, 4vw, 3.5rem); background: var(--field); }
.hs-system-label {
  font-family: var(--hs-font-logo); font-size: 0.6rem;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-f-dim);
  margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--field-edge);
  display: flex; align-items: center; gap: 0.8rem;
}
.hs-system-label::before { content: ''; width: 20px; height: 1px; background: var(--emerald); }
.hs-swatches-bar {
  display: flex; height: 64px; border-radius: 2px; overflow: hidden; margin-bottom: 1.5rem;
}
.hs-swatch { flex: 1; }
.hs-colour-list { display: flex; flex-direction: column; gap: 0.75rem; }
.hs-colour-row { display: flex; align-items: center; gap: 0.85rem; }
.hs-colour-dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1);
}
.hs-colour-name {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  font-family: var(--hs-font-body);
  color: var(--ink-f-soft);
  flex: 1;
}
.hs-colour-name b {
  color: #252525;
  font-size: 0.77rem;
  font-weight: 400;
  line-height: 1.2;
}
.hs-colour-name small {
  color: #626262;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.35;
}
.hs-colour-hex  { font-family: monospace; font-size: 0.65rem; color: var(--ink-f-dim); }
.hs-type-list { display: flex; flex-direction: column; gap: 1.8rem; }
.hs-type-row {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--field-edge);
}
.hs-type-row:last-child { border-bottom: none; padding-bottom: 0; }
.hs-type-role {
  font-family: var(--hs-font-logo); font-size: 0.56rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-f-dim);
}
.hs-type-sample--display {
  font-family: var(--hs-font-display); font-size: 2.2rem; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1; color: var(--ink-f);
}
.hs-type-sample--body {
  font-family: var(--hs-font-body); font-size: 0.82rem; color: var(--ink-f-soft); line-height: 1.7;
}
.hs-type-sample--read {
  font-family: var(--hs-font-article); font-size: 0.9rem; font-style: italic;
  color: var(--ink-f-soft); line-height: 1.8; letter-spacing: 0.01em;
}
.hs-type-note { font-family: var(--hs-font-body); font-size: 0.66rem; color: var(--ink-f-dim); }

.hs-type-proof {
  padding: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid #D9D9D6;
  background: #F2F2F2;
}
.hs-type-proof .hs-system-label { margin-bottom: 1.6rem; }
.hs-type-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #D9D9D6;
}
.hs-type-proof__row {
  min-height: 240px;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: #F7F7F5;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.hs-type-proof__sample {
  display: block;
  color: #252525;
  font-weight: 400;
  line-height: 1;
}
.hs-type-proof__sample--brand {
  font-family: "Marcellus", var(--hs-font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
  letter-spacing: 0.01em;
}
.hs-type-proof__sample--display {
  font-family: "IM Fell English", var(--hs-font-display);
  font-size: clamp(1.55rem, 2.25vw, 2.15rem);
  letter-spacing: 0.01em;
}
.hs-type-proof__sample--sans {
  font-family: "DM Sans", var(--hs-font-body);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hs-type-proof__sample--serif {
  font-family: "Source Serif 4", var(--hs-font-article);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  font-style: italic;
}
.hs-type-proof__row p {
  margin-top: auto;
  font-family: var(--hs-font-article);
  font-size: 0.84rem;
  line-height: 1.75;
  color: #626262;
}

/* ── MATERIAL BREAK — obsidian laboratory pause ─────────────── */
.hs-material-break {
  position: relative;
  z-index: 1;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1320px;
  margin: clamp(1rem, 3vh, 2rem) auto clamp(3rem, 7vh, 5rem);
  min-height: clamp(360px, 48vw, 620px);
  display: grid;
  grid-template-columns: var(--hs-folio-rail) minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  background: #0D0908;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
  box-shadow: 0 38px 86px -40px rgba(0,0,0,0.9);
}
.hs-material-break > .hs-case-folio__mark {
  grid-column: 1;
  grid-row: 1;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}
.hs-material-break__scan {
  grid-column: 2;
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 20% 18%, rgba(92,26,27,0.48), transparent 58%),
    radial-gradient(ellipse 52% 62% at 74% 74%, rgba(58,42,31,0.64), transparent 58%),
    radial-gradient(ellipse 42% 48% at 60% 18%, rgba(138,113,64,0.17), transparent 58%),
    linear-gradient(145deg, #070404 0%, #0D0908 46%, #1B1110 100%);
}
.hs-material-break__scan::before,
.hs-material-break__scan::after {
  content: '';
  position: absolute;
  inset: -18%;
  pointer-events: none;
}
.hs-material-break__scan::before {
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(18deg, rgba(107,138,126,0.045) 0 1px, transparent 1px 17px);
  mix-blend-mode: screen;
  opacity: 0.46;
  transform: rotate(-4deg) scale(1.06);
}
.hs-material-break__scan::after {
  background:
    radial-gradient(ellipse 42% 32% at 48% 54%, rgba(255,255,255,0.16), transparent 7%, rgba(255,255,255,0.04) 11%, transparent 34%),
    linear-gradient(105deg, transparent 0 34%, rgba(255,255,255,0.13) 35%, transparent 37% 100%);
  filter: blur(0.2px);
  opacity: 0.58;
}
.hs-material-break__scan span {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(138,113,64,0.55), transparent);
  height: 1px;
  transform-origin: center;
}
.hs-material-break__scan span:nth-child(1) {
  width: 70%;
  left: 8%;
  top: 32%;
  transform: rotate(-18deg);
}
.hs-material-break__scan span:nth-child(2) {
  width: 46%;
  right: 8%;
  top: 58%;
  transform: rotate(24deg);
}
.hs-material-break__scan span:nth-child(3) {
  width: 58%;
  left: 24%;
  bottom: 22%;
  background: linear-gradient(90deg, transparent, rgba(107,138,126,0.45), transparent);
  transform: rotate(8deg);
}
.hs-material-break__copy {
  grid-column: 3;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    linear-gradient(90deg, rgba(7,13,11,0.38), var(--void) 72%),
    var(--void);
}
.hs-material-break__label {
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8A7140;
  margin-bottom: 1rem;
}
.hs-material-break__copy h3 {
  font-family: var(--hs-font-display);
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hs-material-break__copy h3 em { font-style: italic; color: #6B8A7E; }

.hs-visual-grammar {
  position: relative;
  z-index: 1;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1180px;
  margin: 0 auto clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: minmax(16rem, 0.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(2rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.hs-visual-grammar__head h3 {
  font-family: var(--hs-font-display);
  font-size: clamp(1.8rem, 3.6vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.98;
  color: var(--ink);
}
.hs-visual-grammar__head h3 em { font-style: italic; color: var(--sh-pearl); }
.hs-visual-grammar__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
}
.hs-visual-grammar__grid article {
  min-height: 160px;
  padding: clamp(1.4rem, 3vw, 2rem);
  background:
    linear-gradient(135deg, rgba(138,113,64,0.065), transparent 42%),
    var(--void);
}
.hs-visual-grammar__grid span {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--hs-font-logo);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8A7140;
}
.hs-visual-grammar__grid p {
  font-family: var(--hs-font-article);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ── LONG READ — Editorial Artikel ─────────────────── */
.hs-long-read {
  display: grid; grid-template-columns: 220px 1fr;
  gap: clamp(3rem, 6vw, 5rem); align-items: start;
}
.hs-lr-aside {
  position: sticky; top: 7rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.hs-lr-num {
  font-family: var(--hs-font-display); font-style: italic;
  font-size: 5rem; font-weight: 400; color: var(--field-edge); line-height: 1;
}
.hs-lr-title {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: 1.25rem; letter-spacing: -0.01em; color: var(--ink-f); line-height: 1.2;
}
.hs-lr-title em { font-style: italic; }
.hs-lr-tags {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding-top: 1rem; border-top: 1px solid var(--field-edge);
}
.hs-lr-tag {
  font-family: var(--hs-font-logo); font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-f-dim);
}
.hs-lr-body { display: flex; flex-direction: column; gap: 1.1rem; }
.hs-lr-body h3 {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -0.01em;
  color: var(--ink-f); margin-top: 0.8rem; line-height: 1.1;
}
.hs-lr-body h3 em { font-style: italic; }
.hs-lr-body p {
  font-family: var(--hs-font-article); font-weight: 300; font-size: 0.98rem;
  color: var(--ink-f-soft); line-height: 1.85; letter-spacing: 0.012em;
}
.hs-lr-body blockquote {
  border-left: 2px solid var(--emerald); padding: 0.3rem 0 0.3rem 1.4rem;
}
.hs-lr-body blockquote p { font-style: italic; font-size: 1.05rem; }

/* ── IMAGE PAIR ─────────────────────────────────────── */
.hs-img-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--field-edge);
}
.hs-img-pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* ── ARC CARDS — drei Karten im Bogen, Akt V ─────────── */
.hs-arc-stage {
  position: relative; z-index: 1;
  padding: clamp(1rem, 3vh, 2rem)
           max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2))
           clamp(4rem, 10vh, 8rem);
}
.hs-arc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.hs-arc-card {
  background: var(--field);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.2rem;
  cursor: default;
  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Bogen — erste und letzte Karte hängen tiefer */
.hs-arc-card--1 { transform: translateY(clamp(1.5rem, 4vh, 3.5rem)); }
.hs-arc-card--2 { transform: translateY(0); }
.hs-arc-card--3 { transform: translateY(clamp(1.5rem, 4vh, 3.5rem)); }
/* Hover — jede Karte hebt sich in Richtung Zentrum */
.hs-arc-card--1:hover {
  transform: translateY(clamp(0.2rem, 1.5vh, 1rem));
  box-shadow: 0 20px 48px -10px rgba(0,0,0,0.55);
}
.hs-arc-card--2:hover {
  transform: translateY(-1.2rem);
  box-shadow: 0 24px 52px -12px rgba(0,0,0,0.55);
}
.hs-arc-card--3:hover {
  transform: translateY(clamp(0.2rem, 1.5vh, 1rem));
  box-shadow: 0 20px 48px -10px rgba(0,0,0,0.55);
}
.hs-arc-card__num {
  font-family: var(--hs-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 0.9; color: var(--ink-f-dim);
}
.hs-arc-card__title {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -0.015em; line-height: 1.05;
  color: var(--ink-f);
}
.hs-arc-card__title em { font-style: italic; color: var(--ink-f-soft); }
.hs-arc-card__body {
  font-family: var(--hs-font-article); font-weight: 300;
  font-size: 0.87rem; color: var(--ink-f-soft); line-height: 1.82; flex: 1;
}
.hs-arc-card__tag {
  font-family: var(--hs-font-logo); font-size: 0.56rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-f-dim);
  padding-top: 0.9rem; border-top: 1px solid var(--field-edge);
  margin-top: auto;
}

/* ── NEXT PROJECT — dunkel, auf dem void ────────────── */
.hs-next-project {
  position: relative; z-index: 1;
  padding: clamp(5rem, 14vh, 12rem)
           max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1320px) / 2));
  border-top: 1px solid var(--edge);
  display: grid; grid-template-columns: var(--hs-folio-rail) 1fr 1fr; gap: 4rem; align-items: center;
  overflow: hidden;
}
.hs-next-project > .hs-case-folio__mark {
  grid-column: 1;
  grid-row: 1;
}
.hs-next-project > div:first-of-type {
  grid-column: 2;
}
.hs-next-project__body {
  grid-column: 3;
}
.hs-next-project::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 80% at 80% 50%, var(--emerald-glow), transparent 55%);
}
.hs-next-project__label {
  font-family: var(--hs-font-logo); font-size: 0.62rem;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1.5rem;
}
.hs-next-project__title {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5.5rem); letter-spacing: -0.025em; line-height: 0.9;
}
.hs-next-project__title em { font-style: italic; color: var(--sh-pearl); }
.hs-next-project__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 2rem;
}
.hs-next-project__desc {
  font-family: var(--hs-font-article); font-style: italic;
  font-size: 1.05rem; color: var(--ink-soft); line-height: 1.65; max-width: 38ch;
}

/* ── NAMING ROWS — alte Namen → neue Namen ──────────── */
.hs-naming-list { display: flex; flex-direction: column; }
.hs-naming-row {
  padding: clamp(1.5rem, 3vh, 2.2rem) 0;
  border-top: 1px solid var(--field-edge);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.hs-naming-row:first-child { border-top: none; padding-top: 0; }
.hs-name-old {
  font-family: var(--hs-font-logo); font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-f-dim); text-decoration: line-through;
  text-decoration-color: rgba(122,35,36,0.55);
  text-decoration-thickness: 1px;
}
.hs-naming-row--kept .hs-name-old {
  color: #71643F;
  text-decoration: none;
}
.hs-name-logo {
  display: block;
  width: min(100%, 18rem);
  max-height: 4.2rem;
  object-fit: contain;
  object-position: left center;
  margin: 0.15rem 0 0.45rem;
  opacity: 0.88;
}
.hs-name-logo--athanor {
  width: min(100%, 19rem);
}
.hs-name-new {
  font-family: var(--hs-font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.01em;
  color: var(--ink-f); line-height: 1.05;
}
.hs-name-new em { font-style: italic; }
.hs-name-role {
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8A7140;
}
.hs-name-note {
  font-family: var(--hs-font-article); font-weight: 300; font-style: italic;
  font-size: 0.88rem; color: var(--ink-f-soft); line-height: 1.7;
  max-width: 44ch;
}

.hs-perception-shift {
  position: relative;
  z-index: 1;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1180px;
  margin: clamp(0.5rem, 2vh, 1.5rem) auto clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.hs-perception-shift__col {
  min-height: 330px;
  padding: clamp(2rem, 4vw, 3.2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hs-perception-shift__col--before {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(74,199,184,0.18), transparent 46%),
    linear-gradient(155deg, #091415, #111A25 62%, #17172E);
}
.hs-perception-shift__col--after {
  background:
    radial-gradient(ellipse 70% 54% at 74% 18%, rgba(122,35,36,0.62), transparent 58%),
    radial-gradient(ellipse 56% 56% at 18% 80%, rgba(92,26,27,0.42), transparent 60%),
    radial-gradient(ellipse 46% 38% at 68% 72%, rgba(196,74,26,0.22), transparent 54%),
    linear-gradient(155deg, #070404, #0D0908 42%, #2A0C0D 100%);
}
.hs-perception-shift__label {
  margin-bottom: 1.2rem;
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8A7140;
}
.hs-perception-shift__col--before .hs-perception-shift__label { color: #4AC7B8; }
.hs-perception-shift__col--after .hs-perception-shift__label { color: #B6462C; }
.hs-perception-shift h3 {
  max-width: 12ch;
  font-family: var(--hs-font-display);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.hs-perception-shift h3 em { font-style: italic; color: var(--sh-pearl); }
.hs-perception-shift p {
  max-width: 44ch;
  font-family: var(--hs-font-article);
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.78;
  color: var(--ink-soft);
}

.hs-brand-outcome {
  position: relative;
  z-index: 1;
  width: calc(100% - 2 * var(--gutter));
  max-width: 980px;
  margin: 0 auto clamp(4rem, 10vh, 7rem);
  padding: clamp(2rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.hs-brand-outcome__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 1.4rem 0 1.8rem;
  background: var(--edge);
}
.hs-brand-outcome__grid span {
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--void);
  font-family: var(--hs-font-logo);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.hs-brand-outcome > p:last-child {
  max-width: 60ch;
  font-family: var(--hs-font-article);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.82;
  color: var(--ink-soft);
}

/* Verdikt-Akzent in Captions + Farbnamen */
.hs-verdict--dead { color: #7A2324; }
.hs-colour-name--dead { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.75; }

/* Eyebrow on field */
.hs-case-eyebrow {
  font-family: var(--hs-font-logo); font-size: 0.58rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink-f-dim);
  display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.5rem;
}
.hs-case-eyebrow::before {
  content: ''; width: 16px; height: 1px;
  background: var(--emerald); flex-shrink: 0;
}

/* ── RESPONSIVE — case study ─────────────────────────── */
@media (max-width: 900px) {
  .hs-case-hero {
    min-height: 680px;
    height: 92svh;
  }
  .hs-case-hero::after {
    background:
      linear-gradient(180deg, rgba(7,13,11,0.14) 0%, rgba(7,13,11,0.64) 48%, rgba(7,13,11,0.98) 92%),
      linear-gradient(90deg, rgba(7,13,11,0.88) 0%, rgba(7,13,11,0.28) 54%, rgba(7,13,11,0.78) 100%);
  }
  .hs-case-hero__content {
    padding-bottom: clamp(3rem, 10vh, 5.5rem);
  }
  .hs-case-hero__visuals {
    z-index: 1;
    top: clamp(7rem, 15vh, 9rem);
    left: 1.25rem;
    right: 1.25rem;
    width: auto;
    gap: clamp(0.65rem, 2.4vw, 1rem);
    opacity: 0.78;
    pointer-events: none;
  }
  .hs-case-hero__fig {
    filter: saturate(0.88) contrast(0.95);
  }
  .hs-case-hero__fig--v1 {
    transform: translateY(0.5rem) rotate(-2.5deg);
  }
  .hs-case-hero__fig--v2 {
    margin-top: clamp(2rem, 5vh, 3.5rem);
    transform: rotate(2deg);
  }
  .hs-case-hero__fig-img {
    aspect-ratio: 16 / 10;
    box-shadow: 0 26px 72px -18px rgba(0,0,0,0.94), 0 0 0 1px rgba(255,255,255,0.035);
  }
  .hs-case-hero__fig figcaption {
    display: none;
  }
  .hs-case-hero__folio {
    display: none;
  }
  .hs-meta-grid { grid-template-columns: 1fr 1fr; }
  .hs-project-charge {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .hs-project-charge h2,
  .hs-project-charge p {
    grid-column: 1;
  }
  .hs-intro-grid, .hs-system-split,
  .hs-long-read {
    grid-template-columns: 1fr;
  }
  .hs-type-proof__grid,
  .hs-visual-grammar,
  .hs-perception-shift {
    grid-template-columns: 1fr;
  }
  .hs-visual-grammar,
  .hs-perception-shift,
  .hs-brand-outcome {
    width: calc(100% - 2rem);
  }
  .hs-visual-grammar__grid,
  .hs-brand-outcome__grid {
    grid-template-columns: 1fr 1fr;
  }
  .hs-case-folio {
    --hs-folio-rail: clamp(2.35rem, 5vw, 3.1rem);
  }
  .hs-between-title.hs-case-folio,
  .hs-derivation-plate.hs-case-folio {
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
  }
  .hs-material-break {
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
  }
  .hs-material-break > .hs-case-folio__mark {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .hs-material-break__scan,
  .hs-material-break__copy {
    grid-column: 2;
  }
  .hs-naming-split {
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
    gap: 1rem;
  }
  .hs-naming-split > .hs-case-folio__mark {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .hs-naming-split__dark,
  .hs-naming-split__field {
    grid-column: 2;
  }
  .hs-next-project {
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
    gap: 1rem;
  }
  .hs-next-project > .hs-case-folio__mark {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .hs-next-project > div:first-of-type,
  .hs-next-project__body {
    grid-column: 2;
  }
  .hs-material-break {
    width: calc(100% - 2rem);
  }
  .hs-material-break__scan {
    min-height: clamp(240px, 58vw, 420px);
  }
  .hs-d-cards { grid-template-columns: 1fr; }
  .hs-lr-aside { position: static; }
  .hs-img-pair { grid-template-columns: 1fr; }
  .hs-kpi-grid { grid-template-columns: 1fr 1fr; }
  .hs-derivation-plate {
    width: calc(100% - 2rem);
  }
  .hs-derivation-plate__head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .hs-derivation-plate__kicker {
    align-self: auto;
  }
  .hs-derivation-plate__grid {
    grid-template-columns: 1fr 1fr;
  }
  .hs-derivation-plate__cell:nth-child(odd) {
    border-left: none;
  }
  .hs-derivation-plate__cell:nth-child(n+3) {
    border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  }
  .hs-arc-stage {
    padding-top: 0;
  }
  .hs-arc-cards {
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--field-edge);
    box-shadow: 0 28px 68px -22px rgba(0,0,0,0.72);
  }
  .hs-arc-card,
  .hs-arc-card--1,
  .hs-arc-card--2,
  .hs-arc-card--3,
  .hs-arc-card--1:hover,
  .hs-arc-card--2:hover,
  .hs-arc-card--3:hover {
    transform: none;
  }
  .hs-arc-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(3.2rem, 4.6rem) 1fr;
    gap: 0.5rem clamp(1rem, 4vw, 1.6rem);
    box-shadow: none;
    padding: clamp(1.4rem, 5vw, 2rem);
  }
  .hs-arc-card__num {
    grid-row: 1 / span 3;
    font-size: clamp(2.8rem, 12vw, 4.3rem);
    color: var(--field-edge);
  }
  .hs-arc-card__title,
  .hs-arc-card__body,
  .hs-arc-card__tag {
    grid-column: 2;
  }
  .hs-arc-card__title {
    font-size: clamp(1.35rem, 5vw, 2rem);
  }
  .hs-arc-card__body {
    font-size: 0.94rem;
    line-height: 1.78;
  }
  /* Treppe einebnen — mobil ist der Descent vertikal genug */
  .hs-descent__step:nth-child(2),
  .hs-descent__step:nth-child(3),
  .hs-descent__step:nth-child(4) { margin-left: 0; }
  .hs-between-title--right { text-align: left; }
  .hs-between-title--right p { margin-left: 0; }
}
@media (max-width: 540px) {
  .hs-case-hero {
    min-height: 640px;
    height: 88svh;
  }
  .hs-case-hero__visuals {
    top: 6.7rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    opacity: 0.76;
    gap: 0.55rem;
  }
  .hs-case-hero__fig--v2 {
    margin-top: 2rem;
  }
  .hs-case-hero__content {
    padding-inline: 1rem;
    padding-bottom: clamp(5rem, 13vh, 7rem);
  }
  .hs-case-hero__content::before {
    left: 1rem;
    bottom: clamp(4.5rem, 11vh, 6.4rem);
    width: min(86vw, 22rem);
    filter: blur(6px);
    opacity: 1;
  }
  .hs-case-hero__logo {
    width: min(84vw, 20rem);
    max-height: 8.5rem;
    opacity: 0.72;
    margin-bottom: 1.1rem;
  }
  .hs-case-hero__eyebrow {
    align-items: flex-start;
    font-size: 0.58rem;
    line-height: 1.7;
    letter-spacing: 0.22em;
    max-width: 23rem;
  }
  .hs-case-folio__mark {
    font-size: 0.5rem;
  }
  .hs-panel { width: calc(100% - 2rem); margin: 0 auto 1rem; }
  .hs-naming-split,
  .hs-material-break { width: calc(100% - 2rem); }
  .hs-case-folio {
    --hs-folio-rail: 2.3rem;
  }
  .hs-between-title { padding: 2rem 1rem 1.5rem; }
  .hs-between-title.hs-case-folio {
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
  }
  .hs-project-charge {
    padding: 3rem 1rem;
  }
  .hs-project-charge h2 {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
  }
  .hs-type-proof__grid,
  .hs-visual-grammar__grid,
  .hs-brand-outcome__grid {
    grid-template-columns: 1fr;
  }
  .hs-perception-shift__col {
    min-height: 280px;
    padding: 1.5rem 1.25rem;
  }
  .hs-brand-outcome__grid span {
    min-height: 70px;
  }
  .hs-next-project.hs-case-folio {
    padding-left: 1rem;
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
    gap: 1rem;
  }
  .hs-next-project > .hs-case-folio__mark {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .hs-next-project > div:first-of-type,
  .hs-next-project__body {
    grid-column: 2;
  }
  .hs-case-hero__title {
    font-size: clamp(4.1rem, 21vw, 6.8rem);
    max-width: 6ch;
  }
  .hs-descent { padding: 2.5rem 1rem; }
  .hs-descent__step { grid-template-columns: 1fr; gap: 0.8rem; }
  .hs-derivation-plate {
    margin-top: 0.5rem;
    margin-bottom: 2.25rem;
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
  }
  .hs-derivation-plate > .hs-case-folio__mark {
    margin-top: 1.45rem;
  }
  .hs-derivation-plate__head {
    padding: 1.45rem 1.25rem 1.55rem;
  }
  .hs-derivation-plate__head h2 {
    font-size: clamp(1.65rem, 8vw, 2.55rem);
    line-height: 1.06;
  }
  .hs-derivation-plate__grid {
    grid-template-columns: 1fr;
  }
  .hs-derivation-plate__cell,
  .hs-derivation-plate__cell:nth-child(odd) {
    min-height: 168px;
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    padding: 1.35rem 1.25rem;
  }
  .hs-derivation-plate__cell:first-child {
    border-top: none;
  }
  .hs-derivation-plate__cell h3 {
    max-width: 18ch;
    font-size: 1.08rem;
  }
  .hs-derivation-plate__cell p {
    font-size: 0.84rem;
  }
  .hs-derivation-plate__seal {
    padding: 0.85rem 1.25rem;
    font-size: 0.54rem;
    text-align: left;
  }
  .hs-material-break {
    min-height: auto;
    margin-bottom: 2.25rem;
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
  }
  .hs-material-break > .hs-case-folio__mark {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 1.45rem;
  }
  .hs-material-break__scan,
  .hs-material-break__copy {
    grid-column: 2;
  }
  .hs-material-break__copy {
    padding: 1.45rem 1.25rem 1.6rem;
  }
  .hs-material-break__copy h3 {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }
  .hs-naming-split {
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
    gap: 1rem;
  }
  .hs-naming-split > .hs-case-folio__mark {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .hs-naming-split__dark,
  .hs-naming-split__field {
    grid-column: 2;
  }
  .hs-arc-stage {
    padding-inline: 1rem;
    padding-bottom: 3rem;
  }
  .hs-arc-card {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .hs-arc-card__num,
  .hs-arc-card__title,
  .hs-arc-card__body,
  .hs-arc-card__tag {
    grid-column: 1;
  }
  .hs-arc-card__num {
    grid-row: auto;
    font-size: 3.25rem;
  }
}

/* JANORDO case study — Crown-derived argument pass */
.hs-jo-case {
  --jo-soil: #1E2A2D;
  --jo-soil-soft: #2C3E43;
  --jo-paper: #F3EEE4;
  --jo-paper-warm: #EDE5D4;
  --jo-rust: #C8674A;
  --jo-bronze: #B08D45;
  --jo-teal: #4A9AA4;
  background:
    radial-gradient(ellipse at 78% 0%, color-mix(in srgb, var(--emerald) 16%, transparent), transparent 38%),
    radial-gradient(ellipse at 12% 12%, color-mix(in srgb, var(--jo-teal) 10%, transparent), transparent 34%),
    linear-gradient(180deg, #050907 0%, #07100d 28%, var(--void) 76%);
}

.hs-jo-hero {
  min-height: clamp(560px, 74svh, 720px);
  gap: clamp(1.6rem, 4.4vw, 4rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.hs-jo-hero__brand {
  width: fit-content;
  max-width: min(100%, 31rem);
  display: grid;
  grid-template-columns: clamp(2.8rem, 5vw, 4.5rem) minmax(12rem, 22rem);
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.2rem);
  padding: clamp(1rem, 1.9vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--field) 96%, var(--jo-paper-warm)), var(--field-warm));
  box-shadow: 0 28px 68px -48px rgba(0,0,0,0.9);
  overflow: visible;
}

.hs-jo-hero__mark,
.hs-jo-hero__logo {
  display: block;
  width: 100%;
  height: auto;
}

.hs-jo-hero__logo {
  width: min(100%, 21.5rem);
  padding-block: 0.18rem;
  box-sizing: content-box;
}

.hs-jo-hero h1 {
  margin-top: clamp(1.15rem, 2.5vw, 1.8rem);
  font-size: clamp(2.9rem, 5.8vw, 5.25rem);
}

.hs-jo-hero__lead {
  max-width: 36ch;
  margin-top: clamp(1.1rem, 2.4vw, 1.65rem);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.56;
}

.hs-jo-hero__media {
  transform: none;
}

.hs-jo-hero__media--site {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--field);
}

.hs-jo-hero__media--site img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.92) contrast(1.02);
}

.hs-jo-hero__media--identity {
  overflow: hidden;
}

.hs-jo-hero__identity-plate {
  min-height: clamp(320px, 34vw, 440px);
  display: grid;
  grid-template-columns: minmax(7rem, 0.55fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  gap: 1px;
  background: color-mix(in srgb, var(--jo-soil) 18%, transparent);
  color: var(--jo-soil);
}

.hs-jo-hero__identity-mark,
.hs-jo-hero__identity-copy,
.hs-jo-hero__swatches,
.hs-jo-hero__identity-notes {
  background: linear-gradient(180deg, var(--field), var(--field-warm));
}

.hs-jo-hero__identity-mark {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.hs-jo-hero__identity-mark img {
  width: clamp(4.5rem, 10vw, 7.5rem);
  height: auto;
}

.hs-jo-hero__identity-copy {
  display: grid;
  align-content: end;
  gap: 0.85rem;
  padding: clamp(1.6rem, 4vw, 3.2rem);
}

.hs-jo-hero__identity-copy span,
.hs-jo-hero__identity-notes span {
  font-family: var(--hs-font-logo);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--jo-soil) 62%, transparent);
}

.hs-jo-hero__identity-copy strong {
  max-width: 16ch;
  font-family: var(--hs-font-display);
  font-size: clamp(1.45rem, 3.35vw, 3.05rem);
  font-weight: 400;
  line-height: 1;
  color: var(--jo-soil);
}

.hs-jo-hero__swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: clamp(4rem, 8vw, 6.5rem);
  padding: clamp(0.85rem, 2vw, 1.25rem);
  gap: 0.55rem;
}

.hs-jo-hero__swatches i {
  display: block;
  min-height: 100%;
  border: 1px solid color-mix(in srgb, var(--jo-soil) 12%, transparent);
}

.hs-jo-hero__identity-notes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.hs-jo-hero__identity-notes span {
  padding: 0.95rem 1rem;
  border-left: 1px solid color-mix(in srgb, var(--jo-soil) 12%, transparent);
  color: color-mix(in srgb, var(--jo-soil) 56%, transparent);
}

.hs-jo-hero__identity-notes span:first-child {
  border-left: 0;
}

.hs-jo-meta {
  margin-bottom: clamp(3rem, 7vh, 5rem);
}

.hs-jo-charge {
  width: min(860px, calc(100% - 2 * clamp(1.25rem, 6vw, 5rem)));
  margin-bottom: clamp(3.5rem, 8vh, 6rem);
  padding: clamp(1.65rem, 3.2vw, 2.65rem);
  border: 1px solid var(--field-edge);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--field), var(--field-warm));
  color: var(--ink-f);
  box-shadow: 0 26px 72px -52px rgba(0,0,0,0.7);
  display: block;
  text-align: left;
}

.hs-jo-charge::before,
.hs-jo-charge__rule {
  content: none;
  display: none;
}

.hs-jo-charge h2 {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(1.5rem, 2.3vw, 2.25rem);
  line-height: 1.08;
  color: var(--ink-f);
}

.hs-jo-charge .hs-jo-kicker {
  max-width: none;
  margin: 0 0 0.95rem;
  line-height: 1.1;
  color: var(--emerald);
}

.hs-jo-charge p {
  max-width: 62ch;
  margin: 1.15rem 0 0;
  font-size: clamp(0.96rem, 1.05vw, 1.02rem);
  line-height: 1.72;
  color: var(--ink-f-soft);
}

.hs-jo-charge h2 em {
  color: color-mix(in srgb, var(--ink-f) 70%, transparent);
}

.hs-jo-between h2 em,
.hs-jo-regent .hs-descent__body h3 em,
.hs-jo-plate .hs-derivation-plate__head h2 em,
.hs-jo-threshold-break .hs-material-break__copy h3 em,
.hs-jo-name-split .hs-naming-split__dark h3 em,
.hs-jo-lesson .hs-next-project__title em {
  color: var(--sh-pearl);
}

.hs-jo-between {
  margin-bottom: clamp(2.4rem, 6vh, 4rem);
  padding-top: clamp(2.2rem, 6vw, 4.5rem);
}

.hs-jo-between h2 {
  font-size: clamp(1.85rem, 4.1vw, 3.25rem);
  max-width: 20ch;
}

.hs-jo-between p {
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
  max-width: 58ch;
}

.hs-jo-case .hs-case-folio__mark,
.hs-jo-case .hs-jo-case-folio__mark {
  color: color-mix(in srgb, var(--jo-bronze) 78%, var(--ink-dim));
}

.hs-jo-market-panel {
  background: var(--field);
  margin-bottom: clamp(3.5rem, 8vh, 6rem);
}

.hs-jo-market-panel .hs-source-list {
  align-self: stretch;
  gap: 0.75rem;
  background: transparent;
}

.hs-jo-market-panel .hs-source {
  background: linear-gradient(180deg, #f7f2ea, #eee6d8);
  border: 1px solid color-mix(in srgb, var(--ink-f) 10%, transparent);
}

.hs-jo-market-panel .hs-source__text {
  color: color-mix(in srgb, var(--ink-f) 78%, transparent);
  font-weight: 400;
}

.hs-jo-regent {
  padding-top: clamp(1rem, 3vh, 2rem);
}

.hs-jo-regent .hs-descent__label,
.hs-jo-plate .hs-derivation-plate__kicker,
.hs-jo-plate .hs-derivation-plate__role,
.hs-jo-visual-grammar .hs-visual-grammar__grid span,
.hs-jo-case .hs-case-eyebrow,
.hs-jo-case .hs-source__label,
.hs-jo-charge .hs-jo-kicker,
.hs-jo-colour-proof .hs-system-label,
.hs-jo-colour-proof .hs-type-role,
.hs-jo-threshold-break .hs-material-break__label,
.hs-jo-receipt-stage .hs-arc-card__tag,
.hs-jo-case .hs-panel-caption span:first-child,
.hs-jo-case .hs-next-project__label {
  color: var(--emerald);
}

.hs-jo-regent .hs-descent__verdict-line .dead {
  color: #7a6f68;
}

.hs-jo-regent .hs-descent__verdict-line .lives {
  color: var(--sh-pearl);
}

.hs-jo-plate .hs-derivation-plate__frame {
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--jo-teal) 8%, transparent), transparent 42%),
    var(--void);
}

.hs-jo-plate .hs-derivation-plate__cell--saturn { --plate-dot: var(--jo-soil); }
.hs-jo-plate .hs-derivation-plate__cell--venus { --plate-dot: var(--jo-bronze); }
.hs-jo-plate .hs-derivation-plate__cell--taurus { --plate-dot: var(--jo-rust); }
.hs-jo-plate .hs-derivation-plate__cell--mercury { --plate-dot: var(--jo-teal); }

.hs-jo-colour-proof {
  max-width: 1180px;
  margin-bottom: clamp(4rem, 9vh, 7rem);
}

.hs-jo-colour-proof .hs-jo-proof-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: #d6d2c8;
}

.hs-jo-colour-proof .hs-jo-colour-proof__col,
.hs-jo-colour-proof .hs-jo-type-proof {
  padding: clamp(1.45rem, 3vw, 2.35rem);
  background: linear-gradient(180deg, var(--field), var(--field-warm));
}

.hs-jo-colour-proof .hs-type-proof {
  margin-top: 0;
  border-top: 0;
}

.hs-jo-colour-proof .hs-type-proof__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}

.hs-jo-colour-proof .hs-system-label::before {
  background: var(--emerald);
}

.hs-jo-colour-proof .hs-colour-name b {
  color: var(--ink-f);
}

.hs-jo-colour-proof .hs-colour-name small {
  color: #5d5b56;
}

.hs-jo-colour-proof .hs-colour-name--dead b {
  color: #6c6a66;
}

.hs-jo-colour-proof .hs-swatches-bar {
  border: 1px solid #d6d2c8;
}

.hs-jo-type-proof__row {
  min-height: 210px;
}

.hs-jo-type-logo {
  width: min(100%, 14rem);
  height: auto;
  margin-top: 0.35rem;
}

.hs-type-proof__sample--jo-display {
  font-family: 'Sora JANORDO', var(--hs-font-body);
  font-size: clamp(1.45rem, 2.15vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0;
}

.hs-type-proof__sample--jo-body {
  font-family: 'Manrope JANORDO', var(--hs-font-body);
  font-size: clamp(1.25rem, 1.85vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0;
}

.hs-type-proof__sample--jo-mono {
  font-family: 'Space Mono JANORDO', monospace;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0;
}

.hs-jo-threshold-break .hs-material-break__scan {
  background:
    linear-gradient(90deg, var(--jo-soil) 0 44%, transparent 44% 48%, var(--jo-soil-soft) 48% 100%);
}

.hs-jo-threshold-break .hs-material-break__scan::before {
  background: linear-gradient(180deg, #4DA8B3 0%, var(--jo-teal) 34%, var(--jo-bronze) 68%, var(--jo-rust) 100%);
  box-shadow: 0 0 38px -12px var(--jo-teal);
}

.hs-jo-threshold-break .hs-material-break__scan::after {
  background:
    linear-gradient(rgba(243,238,228,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,238,228,0.06) 1px, transparent 1px);
  background-size: 36px 36px;
}

.hs-jo-threshold-break .hs-material-break__copy h3 {
  font-size: clamp(1.95rem, 4.2vw, 3.6rem);
}

.hs-jo-threshold-break .hs-material-break__copy h3 em,
.hs-jo-colour-proof .hs-type-proof__sample {
  color: var(--jo-soil);
}

.hs-jo-name-lockup {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  padding-bottom: 1.8rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--field-edge);
}

.hs-jo-name-lockup__mark {
  width: clamp(4.2rem, 8vw, 6rem);
  height: auto;
}

.hs-jo-name-lockup__logo {
  width: min(100%, 19rem);
  height: auto;
}

.hs-jo-name-split .hs-naming-split__field {
  background: linear-gradient(180deg, var(--field), var(--field-warm));
  padding: clamp(1.35rem, 3vw, 2.15rem);
}

.hs-jo-name-split {
  grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(1.7rem, 4vw, 3.4rem);
}

.hs-jo-name-split .hs-name-old {
  text-decoration: none;
}

.hs-jo-receipt-stage {
  padding-top: clamp(1rem, 3vh, 2rem);
}

.hs-jo-receipt-stage .hs-arc-card {
  border-color: color-mix(in srgb, var(--jo-bronze) 18%, var(--edge));
}

.hs-jo-receipt-stage .hs-arc-card__title {
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.05;
}

.hs-jo-lesson .hs-next-project__title {
  max-width: 16ch;
  font-size: clamp(1.95rem, 3.8vw, 3.25rem);
  line-height: 0.96;
}

.hs-jo-application-panel {
  margin-bottom: clamp(4rem, 9vh, 7rem);
}

.hs-jo-outcome .hs-brand-outcome__grid span {
  border-color: color-mix(in srgb, var(--jo-bronze) 18%, var(--edge));
}

@media (max-width: 900px) {
  .hs-jo-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: clamp(1.35rem, 5vw, 2.2rem);
    padding-bottom: clamp(3rem, 8vh, 4.5rem);
  }

  .hs-jo-hero__media--site {
    width: 100%;
  }

  .hs-jo-hero__brand {
    grid-template-columns: 3.2rem minmax(9rem, 17rem);
  }

  .hs-jo-hero__identity-plate {
    grid-template-columns: 1fr;
  }

  .hs-jo-hero__identity-mark {
    grid-row: auto;
    min-height: 160px;
  }

  .hs-jo-hero__identity-copy {
    min-height: 190px;
  }

  .hs-jo-hero__identity-notes {
    grid-template-columns: 1fr;
  }

  .hs-jo-hero__identity-notes span {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--jo-soil) 12%, transparent);
  }

  .hs-jo-charge {
    padding: clamp(1.45rem, 5vw, 2rem);
  }

  .hs-jo-name-split {
    grid-template-columns: var(--hs-folio-rail) minmax(0, 1fr);
    gap: 1rem;
  }

  .hs-jo-name-split > .hs-case-folio__mark {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .hs-jo-name-split .hs-naming-split__dark,
  .hs-jo-name-split .hs-naming-split__field {
    grid-column: 2;
  }

  .hs-jo-market-panel .hs-intro-grid,
  .hs-jo-colour-proof .hs-jo-proof-split,
  .hs-jo-colour-proof .hs-type-proof__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .hs-jo-hero__brand {
    grid-template-columns: 2.7rem minmax(0, 1fr);
    padding: 0.75rem;
  }

  .hs-jo-hero h1 {
    font-size: clamp(2.7rem, 13vw, 3.75rem);
    line-height: 0.9;
  }

  .hs-jo-meta {
    grid-template-columns: 1fr;
  }

  .hs-jo-meta div {
    border-right: 0;
    border-bottom: 1px solid var(--edge);
  }

  .hs-jo-meta div:last-child {
    border-bottom: 0;
  }
}