/* =========================================================
   ProperlyManaged™ — styles.css
   Foundation + Nav
   ========================================================= */

/* ---------- @font-face : Söhne ---------- */
@font-face {
  font-family: "Soehne";
  src: url("fonts/soehne-buch.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Soehne";
  src: url("fonts/soehne-kraftig.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Soehne Breit";
  src: url("fonts/soehne-breit-extrafett.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Palette — warm cream "old money tropical" */
  --cream:         #F7F3ED;
  --cream-soft:    #EFE9DF;
  --cream-deeper:  #E8E0D1;
  --ink:           #1F1B16;
  --ink-warm:      #3D342A;
  --ink-soft:      #6B5E50;
  --brass:         #B68B3F;
  --brass-deep:    #8C6A2E;
  --foliage:       #2D4A2D;
  --foliage-deep:  #1F3520;
  --sand:          #D9CFC0;
  --terracotta:    #B8633E;
  /* Catalog-only additions (no other section uses these) */
  --olive:         #3A5A38;
  --gold:          #A8772E;

  /* Type families */
  --font-body:    "Soehne", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Soehne Breit", "Soehne", "Inter Display", system-ui, sans-serif;

  /* Type scale */
  --fs-label:       0.75rem;    /* 12px — uppercase labels (was mono) */
  --fs-body-sm:     0.9375rem;  /* 15px */
  --fs-body:        1.0625rem;  /* 17px */
  --fs-body-lg:     1.25rem;    /* 20px */
  --fs-h3:          1.75rem;
  --fs-h2:          clamp(2.25rem, 4vw, 3.25rem);
  --fs-h1:          clamp(3rem, 7vw, 5.5rem);

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* Layout */
  --container:      1280px;
  --container-pad:  3rem;      /* desktop horizontal gutter */
  --container-md:   920px;
  --container-sm:   720px;
  --container-xs:   620px;

  /* Radii */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Motion */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:      0.18s;
  --t-base:      0.25s;
  --t-slow:      0.45s;

  /* Nav */
  --nav-height: 72px;
}

/* Tighter container gutter on small viewports */
@media (max-width: 900px) {
  :root {
    --container-pad: 1.5rem;
  }
}

/* ---------- Modern reset ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensates for the sticky nav (~96px) when jumping to anchors */
  scroll-padding-top: 100px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-warm);
  background-color: var(--cream);
  /* Soft warm glows anchored to viewport corners. No hard edges:
     radial-gradient naturally fades to transparent at the stop. */
  background-image:
    radial-gradient(circle at 100% 0%,
      rgba(182, 139, 63, 0.12) 0%,
      rgba(182, 139, 63, 0) 50%),
    radial-gradient(circle at 0% 100%,
      rgba(45, 74, 45, 0.10) 0%,
      rgba(45, 74, 45, 0) 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--foliage);
  color: var(--cream);
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  z-index: 1000;
  transition: top var(--t-base) var(--ease);
}
.skip-link:focus {
  top: 0;
}

/* ---------- Utility ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* =========================================================
   SECTION 1 — NAV
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  /* Sized by content + vertical padding on .nav__inner (no fixed height) */
  background-color: rgba(247, 243, 237, 0); /* cream transparent at top */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-base) var(--ease),
    backdrop-filter   var(--t-base) var(--ease),
    border-color      var(--t-base) var(--ease);
}

.nav.scrolled {
  background-color: rgba(247, 243, 237, 0.78);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-bottom-color: rgba(31, 27, 22, 0.08);
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: 1.5rem; /* drives the new ~96px nav height */
  /* 3-area grid: wordmark · center menu · CTA. Side columns 1fr
     guarantee the middle stays optically centered regardless of the
     wordmark / CTA widths. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}
.nav__wordmark { justify-self: start; }
.nav__cta      { justify-self: end; }

/* Wordmark */
.nav__wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  font-family: var(--font-body);
  font-weight: 500; /* Söhne Kräftig */
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav__wordmark:hover { color: var(--ink-warm); }

.nav__tm {
  font-size: 0.55em;
  color: var(--brass);
  vertical-align: super;
  margin-left: 0.1em;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

/* CTA pill — solid ink, foliage-on-hover, with subtle elevation */
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  line-height: 1;
  background-color: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow:
    0 1px 0 rgba(31, 27, 22, 0.04),
    0 2px 4px rgba(31, 27, 22, 0.06);
  transition:
    background-color 0.25s ease,
    transform        0.25s ease,
    box-shadow       0.25s ease;
}
.nav__cta:hover {
  background-color: var(--foliage);
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(45, 74, 45, 0.18),
    0 1px 0 rgba(31, 27, 22, 0.04);
}
.nav__cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(31, 27, 22, 0.08);
}
.nav__cta span {
  font-size: 1.1em;
  transition: transform 0.25s ease;
}
.nav__cta:hover span {
  transform: translateX(3px);
}

/* =========================================================
   NAV — center menu
   ========================================================= */
.nav-menu {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu a {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  color: var(--ink-warm);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}
.nav-menu a:hover {
  color: var(--ink);
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--brass);
  transition: width 0.25s ease;
}
.nav-menu a:hover::after {
  width: 100%;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Container padding already shrinks at 900px via --container-pad.
     Collapse the 3-area grid to two so wordmark/CTA share the row. */
  .nav__inner {
    padding-block: 1.25rem;
    grid-template-columns: 1fr auto;
  }
  .nav__wordmark { font-size: 1.25rem; }
  .nav-menu { display: none; } /* hamburger comes in a future pass */
  .nav__cta {
    font-size: 0.9375rem;
    padding: 0.75rem 1.25rem;
  }
}
@media (max-width: 600px) {
  .nav__cta {
    font-size: 0.875rem;
    padding: 0.7rem 1.15rem;
  }
}

/* =========================================================
   SHARED — Eyebrow label (Söhne Kräftig uppercase letterspaced)
   Brass reserved for the dot only.
   ========================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--brass);
  flex-shrink: 0;
}

/* =========================================================
   SHARED — Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--t-base) var(--ease),
    color            var(--t-base) var(--ease),
    transform        var(--t-base) var(--ease),
    border-color     var(--t-base) var(--ease),
    box-shadow       var(--t-base) var(--ease);
}
.btn span { transition: transform var(--t-base) var(--ease); }
.btn:hover span { transform: translateX(3px); }

.btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 2.25rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.005em;
  line-height: 1;
  background-color: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow:
    0 2px 0 rgba(31, 27, 22, 0.06),
    0 4px 8px rgba(31, 27, 22, 0.08);
  transition:
    background-color 0.3s ease,
    transform        0.3s ease,
    box-shadow       0.3s ease;
}
.btn--primary:hover {
  background-color: var(--foliage);
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(45, 74, 45, 0.22),
    0 2px 0 rgba(31, 27, 22, 0.06);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(31, 27, 22, 0.06),
    0 2px 4px rgba(31, 27, 22, 0.08);
}
.btn--primary span {
  font-size: 1.15em;
  transition: transform 0.3s ease;
}
.btn--primary:hover span {
  transform: translateX(4px);
}

.btn--link {
  position: relative;
  color: var(--ink);
  padding: 0.95em 0;
  background: transparent;
  border-radius: 0;
}
.btn--link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6em;
  height: 1px;
  background-color: var(--brass);
  transition:
    background-color var(--t-base) var(--ease),
    transform        var(--t-base) var(--ease);
  transform-origin: left center;
}
.btn--link:hover {
  color: var(--ink-warm);
}
.btn--link:hover::after {
  background-color: var(--brass-deep);
  transform: scaleX(0.94);
}

/* =========================================================
   SECTION 2 — HERO (Findigs-style two-column)
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  padding-top: 8rem;     /* extra clearance from the taller nav */
  padding-bottom: 6rem;
  /* No overflow:hidden — would clip the breathing card if it nudges
     against the section edges. Body has overflow-x:hidden as backstop. */
  isolation: isolate;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  /* Skew columns so the long second headline line fits in one row */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 4rem;
  align-items: start; /* allow Z-pattern offset on the right column */
}


/* Text column */
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.hero__title {
  /* Söhne Breit Extrafett 900 at full presence — the original sizing
     that carries proper visual weight for the hero. */
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink-warm);
  text-wrap: balance;
  font-feature-settings: "kern";
  font-kerning: normal;
}
/* Reusable brass trademark superscript (™) */
.tm {
  font-size: 0.55em;
  color: var(--brass);
  vertical-align: super;
  margin-left: 1px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

/* =========================================================
   MARKER UNDERLINE — hand-drawn terracotta stroke that
   "draws" itself on page load. Used on key headline phrases.
   ========================================================= */
.marker-wrap {
  position: relative;
  display: inline-block;
  white-space: nowrap; /* keep phrase + underline together */
  color: inherit;       /* text stays --ink-warm */
}
.marker-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  width: 100%;
  height: 12px;
  display: block;
  pointer-events: none;
  overflow: visible;
}
.marker-underline path {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: marker-draw 0.8s ease-out 1s forwards;
}
@keyframes marker-draw {
  to { stroke-dashoffset: 0; }
}

.hero__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-warm);
  max-width: 520px;
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

/* =========================================================
   HERO MOCKUP CARD
   ========================================================= */
.hero__mockup {
  width: 100%;
  display: flex;
  justify-content: center;
  /* Z-pattern offset: text top-left → mockup bottom-right (desktop)
     120px (initial Z-pattern) + 48px (extra push down) = 168px */
  margin-top: 168px;
  /* Slight rightward nudge — position offset (NOT transform) so it
     survives the fadeUp animation and doesn't fight breathing transform.
     8px clearance still left to container right padding so no overflow. */
  position: relative;
  left: 24px;
}

.mockup {
  width: 100%;
  background-color: var(--cream-deeper);
  border-radius: 24px;
  /* Symmetric 4-side padding — sub-cards float centered in the frame */
  padding: 2.5rem;
  box-shadow:
    0 1px 0 rgba(31, 27, 22, 0.04),
    0 20px 50px -28px rgba(31, 27, 22, 0.18),
    0 6px 14px -10px rgba(31, 27, 22, 0.10);
  display: grid;
  /* Balanced 50/50 so both sub-cards have room — fixes the cramped
     right-side feel and prevents "BUILDING TONGUE" from wrapping */
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
  /* Idle "breathing" — sub-perceptible 8s float + tilt */
  transform-origin: center center;
  will-change: transform;
  animation: mockup-breathe 8s ease-in-out infinite;
}

@keyframes mockup-breathe {
  0%   { transform: translateY(0)    rotate(0deg);    }
  25%  { transform: translateY(-3px) rotate(0.4deg);  }
  50%  { transform: translateY(0)    rotate(0deg);    }
  75%  { transform: translateY(3px)  rotate(-0.4deg); }
  100% { transform: translateY(0)    rotate(0deg);    }
}

@media (prefers-reduced-motion: reduce) {
  .mockup { animation: none; }
}

.mockup__card {
  background-color: var(--cream-soft);
  border-radius: 16px;
  /* Symmetric 4-side padding — applies to both sub-cards equally */
  padding: 2rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(31, 27, 22, 0.04);
  /* No flex gap — per-element margins control vertical rhythm */
}

.mockup__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1;
  margin-bottom: 1rem;
}
.mockup__label--tight {
  margin-bottom: 0.75rem;
}

/* Headline stat number (Söhne Breit Extrafett 900) */
.mockup__stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.mockup__stat--noi {
  /* Slightly smaller — "+$847K" has more glyphs than "97%" */
  font-size: clamp(2.5rem, 4vw, 3.25rem);
}

/* Green delta line under the stat (↑ +6pts YoY / ↑ vs baseline) */
.mockup__delta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--foliage);
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.mockup__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
}
.mockup__bar {
  flex: 1;
  height: var(--h, 50%);
  background-color: var(--foliage);
  border-radius: 4px;
  transform-origin: bottom;
  animation: barGrow 0.9s var(--ease) backwards;
}
.mockup__bar:nth-child(1) { animation-delay: 0.85s; }
.mockup__bar:nth-child(2) { animation-delay: 0.95s; }
.mockup__bar:nth-child(3) { animation-delay: 1.05s; }
.mockup__bar:nth-child(4) { animation-delay: 1.15s; }
.mockup__bar:nth-child(5) { animation-delay: 1.25s; }

@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Subtle horizontal divider inside a sub-card */
.mockup__divider {
  border: 0;
  border-top: 1px solid rgba(31, 27, 22, 0.08);
  margin: 1.5rem 0 1rem 0;
  height: 0;
}

/* Google rating block (left sub-card) */
.mockup__rating-main {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--ink-warm);
}
.mockup__star {
  color: var(--brass);
  font-size: 0.95em;
  margin: 0 0.05em;
}
.mockup__rating-delta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}

/* "Powered by:" list (right sub-card) */
.mockup__powered {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mockup__powered li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ink-warm);
}
.mockup__bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--foliage);
  flex-shrink: 0;
}

/* =========================================================
   ENTRANCE ANIMATIONS — staggered fadeUp
   ========================================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__title,
.hero__sub,
.hero__ctas,
.hero__mockup {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) forwards;
}
.hero__title  { animation-delay: 0.15s; }
.hero__sub    { animation-delay: 0.30s; }
.hero__ctas   { animation-delay: 0.45s; }
.hero__mockup { animation-delay: 0.60s; }

/* ---------- Hero responsive ---------- */
@media (max-width: 900px) {
  .hero {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .hero__text { gap: var(--space-5); }
  .hero__mockup {
    max-width: 560px;
    margin-inline: auto;
    margin-top: 0; /* cancel Z-pattern offset on stacked layout */
    left: 0;        /* cancel desktop rightward nudge */
  }
  .mockup { padding: 2rem; }
}

@media (max-width: 600px) {
  .hero__sub { font-size: 1.0625rem; }
  .mockup {
    padding: 1.5rem;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .mockup__card { padding: 1.25rem; }
  .mockup__bars { height: 56px; }
}

/* =========================================================
   SECTION 3 — MANIFESTO
   Left-aligned block (zigzag step after the hero's right-side
   mockup). Arrow lives directly above the text — they read as a
   single connected unit. No divider anywhere.
   ========================================================= */
.manifesto {
  position: relative; /* offset parent backup, in case container collapses */
  background-color: var(--cream-soft);
  /* Tight top — text starts right after the boundary so the arrow's
     lower half (which sits inside the manifesto) lands right next to
     where "Everyone sells..." begins */
  padding: 4rem 0 5rem;
  width: 100%;
}
.manifesto .container {
  position: relative; /* offset parent for the absolutely-positioned arrow */
}

/* Arrow wrapper — DESKTOP: absolutely positioned with a negative top
   so the SVG straddles the hero / manifesto color boundary. Top ~55%
   of the SVG renders inside the hero's cream area (loop + initial
   descent); bottom ~45% renders inside the cream-soft manifesto,
   ending with the down-left arrowhead just above the text.
   No overflow:hidden on any parent of this — the section, .container,
   .hero, body (vertical), main — all allow vertical overflow. */
.manifesto-arrow-wrap {
  position: absolute;
  top: -200px;                          /* crosses the boundary */
  right: clamp(1rem, 12%, 8rem);        /* right-center horizontally */
  z-index: 2;
  pointer-events: none;
}
.manifesto-arrow {
  display: block;
  width: 320px;
  height: 320px;  /* preserves 460:460 square viewBox */
}

/* Make sure the text paints in its own layer (below the arrow's
   z-index 2). The arrow's tip lands above the text but they don't
   collide horizontally (text max-width 720, arrow on the right). */
.manifesto-text { position: relative; z-index: 1; }
/* Default state: both paths fully visible. The JS draw animation
   sets dasharray/dashoffset only when the observer fires — if it
   never does, the static SVG renders correctly. */

/* Text block — sits at the container's left edge, no center-axis
   tricks. Matches the hero headline's left edge via shared
   .container padding-inline. */
.manifesto-text {
  margin: 0;
  max-width: 720px;
  text-align: left;
  /* No flex / no gap — manifesto-line children stack naturally and
     line 2 owns its own margin-top for the tight beat. */
  border: 0;
  box-shadow: none;
}
.manifesto-line {
  display: block;
}
/* Line 1 — the problem (muted, smaller) */
.manifesto-line--problem {
  font-family: var(--font-body);
  font-weight: 400; /* Söhne Buch */
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}
/* Line 2 — the hit (bigger, contundente, terracotta underline) */
.manifesto-line--answer {
  font-family: var(--font-display); /* Söhne Breit Extrafett */
  font-weight: 900;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 0.6rem;  /* tight beat, lands like a punch */
}

/* Responsive */
@media (max-width: 900px) {
  /* Stack changes: hero collapses to single column and the mockup
     ends up at the bottom of the hero, so the arrow can no longer
     cross the boundary without colliding with the mockup. Drop it
     back into normal flow inside the manifesto. */
  .manifesto {
    padding: 4rem 0;
  }
  .manifesto-arrow-wrap {
    position: static;
    top: auto;
    right: auto;
    display: flex;
    justify-content: flex-end;
    padding-right: clamp(1rem, 6%, 3rem);
    margin-bottom: -1.5rem;
  }
  .manifesto-arrow {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 640px) {
  /* Smallest viewports: arrow crowds the text — hide it. */
  .manifesto-arrow-wrap { display: none; }
  .manifesto-line--answer { margin-top: 0.5rem; }
}

/* =========================================================
   SECTION 4 — STATS (dashboard cards) — RIGHT-ALIGNED zigzag step
   Background continues from the manifesto (cream-soft); cards in
   cream-deeper to match the hero's mockup wrapper. A hand-drawn
   arrow enters from the LEFT at the top of the section, crossing
   the manifesto/stats boundary and pointing down-right toward the
   headline (eyebrow + headline are right-aligned).
   ========================================================= */
.stats {
  position: relative; /* offset parent for the absolutely-positioned arrow */
  background-color: var(--cream-soft);
  padding-block: 6rem 7rem;
  width: 100%;
}

/* DESKTOP: arrow absolutely positioned. Pulled UP so its body starts
   just under the terracotta marker of "We move in." (top crosses
   back into the manifesto's lower area), shifted slightly RIGHT via
   left/clamp, then nudged a further ~110px right and tilted -7deg
   around its center for a subtle "leaning" feel. Path/SVG/color/size
   untouched — only translateX + rotate on the wrapper. Default state
   of the paths is visible. No overflow:hidden on any ancestor. */
.stats-arrow-wrap {
  position: absolute;
  top: -3rem;
  left: clamp(5rem, 22%, 15rem);
  z-index: 2;
  pointer-events: none;
  transform: translateX(110px) rotate(-7deg);
  transform-origin: center;
}
.stats-arrow {
  display: block;
  width: 320px;
  height: 320px;
}

.stats-eyebrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* right-aligned */
  gap: 0.9rem;
  font-family: var(--font-body);
  font-weight: 500;        /* Söhne Kräftig */
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.stats-eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  background-color: var(--brass);
  flex-shrink: 0;
}

.stats-headline {
  font-family: var(--font-display); /* Söhne Breit Extrafett */
  font-weight: 900;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 640px;
  margin: 0 0 3rem auto;   /* right-anchored block via margin-left: auto */
  text-align: right;
  text-wrap: balance;
}

/* Stats headline reborn as a tilted enameled terracotta plaque.
   The h2 no longer carries .stats-headline — it now uses .stats-stamp.
   Right-aligned via margin-left: auto, generous bottom margin so the
   -4° rotation overhang doesn't kiss the stat-cards grid below. */
.stats-stamp {
  position: relative;
  display: block;
  max-width: 560px;
  margin: -90px 0 5rem auto;

  background-color: var(--terracotta);
  color: var(--cream);
  border: 3px solid var(--cream);
  border-radius: 10px;
  padding: 2rem 2.6rem;

  /* Double border halo: cream 3px (the real border) + terracotta 3px ring
     (first box-shadow) + dark drop shadow (second box-shadow) */
  box-shadow:
    0 0 0 3px var(--terracotta),
    0 20px 50px -20px rgba(31, 27, 22, 0.55);

  transform: rotate(-4deg);
  transform-origin: center;

  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-align: left;
  text-wrap: balance;
}
.stats-stamp-badge {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 243, 237, 0.85);
  margin-bottom: 0.7rem;
}
.stats-stamp-text {
  display: block;
}
.stats-stamp-screw {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(247, 243, 237, 0.5);
}
.stats-stamp-screw--tl { top: 10px; left: 10px; }
.stats-stamp-screw--tr { top: 10px; right: 10px; }
.stats-stamp-screw--bl { bottom: 10px; left: 10px; }
.stats-stamp-screw--br { bottom: 10px; right: 10px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.stat-card {
  background-color: var(--cream-deeper);
  border-radius: 20px;
  padding: 1.8rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  border: 1px solid rgba(31, 27, 22, 0.04);
}

.stat-card-label {
  font-family: var(--font-body);
  font-weight: 500;        /* Söhne Kräftig */
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
  margin: 0 0 1.1rem;
}

.stat-number {
  font-family: var(--font-display); /* Söhne Breit Extrafett */
  font-weight: 900;
  font-size: clamp(2.4rem, 3.6vw, 3.3rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 0.2rem;
  white-space: nowrap;
}
.stat-number .stat-small {
  font-size: 0.45em;
  color: var(--ink-soft);
  font-weight: 900;
}
.stat-number .stat-arrow {
  color: var(--foliage);
  font-size: 0.7em;
  margin: 0 0.08em;
  vertical-align: 0.06em;
}

/* Conclusion line under the stat number — the thing the eye reads
   first after the number. Söhne Kräftig 500 default, with <b> bumping
   up to Söhne Breit Extrafett 900 inside the run for emphasis. */
.stat-takeaway {
  font-family: var(--font-body);
  font-weight: 500;        /* Söhne Kräftig */
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--ink-warm);
  margin: 0 0 1.4rem;
}
.stat-takeaway b {
  font-family: var(--font-display); /* Söhne Breit Extrafett */
  font-weight: 900;
  color: var(--ink);
}

.stat-viz {
  margin-top: auto;        /* pin viz + foot to the bottom of the card */
  margin-bottom: 1.1rem;
}

/* Two-column comparison bars (cards 2 + 4) */
.compare {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 64px;
}

/* Terracotta delta badge floating on the compare viz (cards 2 + 4) */
.compare-delta {
  position: absolute;
  top: -6px;
  right: 4px;
  z-index: 1;
  font-family: var(--font-display); /* Söhne Breit Extrafett */
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: -0.01em;
  color: #fff;
  background-color: var(--terracotta);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.compare-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.compare-bar {
  width: 100%;
  border-radius: 3px;
}
.compare-col--low  .compare-bar { background-color: rgba(45, 74, 45, 0.28); }
.compare-col--high .compare-bar { background-color: var(--foliage); }
.compare-tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.62rem;
  color: var(--ink-soft);
}

/* Horizontal progress bar (card 3) */
.stat-progress {
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.stat-progress-track {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background-color: rgba(45, 74, 45, 0.18);
  overflow: hidden;
}
.stat-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 8px;
  background-color: var(--foliage);
}
.stat-progress-legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.62rem;
  color: var(--ink-soft);
}

.stat-foot {
  font-family: var(--font-body);
  font-weight: 400;        /* Söhne Buch */
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.4;
  border-top: 1px solid rgba(31, 27, 22, 0.1);
  padding-top: 0.85rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 980px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .stats { padding-block: 4.5rem 5.5rem; }
  .stats-headline { margin-bottom: 2.25rem; }
  /* Drop the arrow back into normal flow at the top-left of the stats
     section (no absolute crossing). At this breakpoint the manifesto
     arrow also goes static, so there's no boundary to mirror. */
  .stats-arrow-wrap {
    position: static;
    top: auto;
    left: auto;
    margin: 0 0 1rem clamp(1rem, 4%, 3rem);
  }
  .stats-arrow {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 640px) {
  .stats-arrow-wrap { display: none; }
}
@media (max-width: 540px) {
  .stats-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .stat-card { min-height: 0; padding: 1.5rem 1.4rem 1.3rem; }
}

/* =========================================================
   SECTION 5 — PILLARS (three Greek columns)
   Solid foliage background, centered content. Each column has a
   capital (echinus), a fluted shaft with the text inscribed, and a
   base (plinth). Middle column slightly taller — temple geometry.

   ANIMATION SAFETY: default state of every column is fully visible.
   The "rise" animation only engages when JS adds .will-rise to the
   section AND the observer fires (.in-view). If JS / IO / motion
   anything fails, columns stay rendered statically. No opacity:0
   in the default CSS state.
   ========================================================= */
.pillars-section {
  position: relative;
  background-color: var(--foliage);
  padding: 6.5rem 2.5rem 7rem;
  width: 100%;
}

.pillars-head {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto 4rem;
  text-align: center;
}
.pillars-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;       /* Söhne Kräftig */
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1rem;
}
.pillars-headline {
  font-family: var(--font-display); /* Söhne Breit Extrafett */
  font-weight: 900;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}

.columns-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2.5rem;
  max-width: 1150px;
  margin: 0 auto;
}

.column {
  flex: 1;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Capital (top cap with echinus pseudo-element above) */
.col-capital {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 46px;
  background-color: var(--cream);
  border-radius: 6px 6px 2px 2px;
}
.col-capital::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: -16px;
  height: 16px;
  background-color: var(--cream-deeper);
  border-radius: 5px 5px 0 0;
}

/* Shaft — fluted via subtle repeating gradient. Houses the text. */
.col-shaft {
  position: relative;
  width: 86%;
  min-height: 360px;
  padding: 2.6rem 1.4rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 12px,
    rgba(31, 27, 22, 0.05) 12px,
    rgba(31, 27, 22, 0.05) 13px
  );
}

.col-num {
  font-family: var(--font-body);
  font-weight: 500;       /* Söhne Kräftig (per spec text instruction) */
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--brass);
  margin: 0 0 1.4rem;
}
.col-title {
  font-family: var(--font-display); /* Söhne Breit Extrafett */
  font-weight: 900;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.8rem;
}
.col-lead {
  font-family: var(--font-body);
  font-weight: 500;       /* Söhne Kräftig */
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--foliage);
  margin: 0 0 1rem;
}
.col-body {
  font-family: var(--font-body);
  font-weight: 400;       /* Söhne Buch */
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* Base (bottom plinth with step pseudo-element below) */
.col-base {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 38px;
  background-color: var(--cream);
  border-radius: 2px 2px 6px 6px;
}
.col-base::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -14px;
  height: 14px;
  background-color: var(--cream-deeper);
  border-radius: 0 0 6px 6px;
}

/* Center column slightly taller — temple effect */
.column.center .col-shaft { min-height: 410px; }

/* ----- Rise animation ----- */
/* .will-rise is added by JS only when IO is supported AND reduced-
   motion is not active. Without it, columns stay statically visible. */
.pillars-section.will-rise .column {
  opacity: 0;
  transform: translateY(60px);
  transform-origin: bottom;
}
.pillars-section.will-rise.in-view .column {
  animation: pillarRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.pillars-section.will-rise.in-view .column:nth-child(1) { animation-delay: 0s;    }
.pillars-section.will-rise.in-view .column:nth-child(2) { animation-delay: 0.15s; }
.pillars-section.will-rise.in-view .column:nth-child(3) { animation-delay: 0.30s; }
@keyframes pillarRise {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
  .columns-row {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  .column { max-width: 420px; width: 100%; }
  .column.center .col-shaft { min-height: 360px; }
}

/* =========================================================
   SECTION 6 — CATALOG (14 modules · zigzag at the extremes)
   Cream section bg. Each .mod is ~64% of the rail width and
   alternates left/right via .mod-left / .mod-right. A dashed
   SVG layer (.connectors) overlays the rail and draws diagonal
   dotted lines between consecutive strips; JS recalculates
   them on load and resize. No numbering.

   ANIMATION SAFETY: every .mod is fully visible by default.
   JS adds .will-rise only when IO + non-reduced motion. Hover
   transform sits on .mod.will-rise.in-view:hover so it beats
   the reveal selector's specificity.
   ========================================================= */
.catalog {
  background-color: var(--cream);
  width: 100%;
  font-family: var(--font-body);
}
.catalog-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 6rem var(--container-pad) 7rem;
}

.catalog-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.catalog-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background-color: var(--brass);
  flex-shrink: 0;
}
.catalog-headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 600px;
  margin: 0 0 3.5rem;
  text-wrap: balance;
}

/* Rail: holds the SVG connector layer + the 14 .mod cards */
.catalog .rail {
  position: relative;
  width: 100%;
}
.catalog .connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* ink at 0.9 alpha — connectors are deliberate, not subtle */
  color: rgba(31, 27, 22, 0.9);
  overflow: visible;
}
.catalog .dotline {
  fill: none;
  stroke: #1F1B16;           /* solid ink — not dashed, not aliased */
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

/* Module strip */
.catalog .mod {
  position: relative;
  z-index: 1;
  width: 64%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 20px;
  /* overflow: visible — the .beaver child sticks out into the cream
     on purpose. Inner grid cells (.s-copy / .s-vis) carry their own
     corner radii so the rounded look is preserved without clipping. */
  margin-bottom: 3.5rem;
  min-height: 280px;
  transition:
    transform 0.3s ease-out,
    box-shadow 0.3s ease-out,
    opacity 0.5s ease-out;
}
.catalog .mod:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px -28px rgba(31, 27, 22, 0.5);
}

/* Base capsules — subtle 1px ink hairline + soft drop shadow at rest,
   bigger lifted shadow on hover. Scoped via :not(.cap-premium) so the
   premium capsules (#15–#17) keep their inset gold ring untouched. */
.catalog .mod:not(.cap-premium) {
  border: 1px solid rgba(31, 27, 22, 0.12);
  box-shadow: 0 16px 42px -20px rgba(31, 27, 22, 0.42);
}
.catalog .mod:not(.cap-premium):hover,
.catalog .mod.will-rise.in:not(.cap-premium):hover {
  box-shadow: 0 30px 60px -28px rgba(31, 27, 22, 0.55);
}

.catalog .mod-left  { margin-right: auto; margin-left: 0; }
.catalog .mod-right { margin-left: auto; margin-right: 0; }
.catalog .mod:last-child { margin-bottom: 0; }

.catalog .s-copy {
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Left half of the strip — round the outer corners */
  border-radius: 20px 0 0 20px;
}
.catalog .s-vis {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem;
  /* Right half of the strip — round the outer corners */
  border-radius: 0 20px 20px 0;
}

.catalog .s-tag {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 0.9rem;
}
.catalog .s-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.85rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.catalog .s-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 340px;
}
.catalog .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.catalog .live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* ----- Themes ----- */
.catalog .t-foliage { background-color: var(--foliage); }
.catalog .t-foliage .s-copy { color: var(--cream); }
.catalog .t-foliage .s-desc { color: rgba(247, 243, 237, 0.78); }
.catalog .t-foliage .s-tag  { background-color: var(--brass); color: var(--foliage); }
.catalog .t-foliage .live   { color: var(--brass); }
.catalog .t-foliage .live::before { background-color: var(--brass); }
.catalog .t-foliage .s-vis  { background-color: rgba(247, 243, 237, 0.06); }

.catalog .t-olive { background-color: var(--olive); }
.catalog .t-olive .s-copy { color: var(--cream); }
.catalog .t-olive .s-desc { color: rgba(247, 243, 237, 0.8); }
.catalog .t-olive .s-tag  { background-color: var(--brass); color: var(--foliage); }
.catalog .t-olive .s-vis  { background-color: rgba(247, 243, 237, 0.06); }

.catalog .t-terra { background-color: var(--terracotta); }
.catalog .t-terra .s-copy { color: var(--cream); }
.catalog .t-terra .s-desc { color: rgba(247, 243, 237, 0.85); }
.catalog .t-terra .s-tag  { background-color: var(--cream); color: var(--terracotta); }
.catalog .t-terra .s-vis  { background-color: rgba(247, 243, 237, 0.08); }

.catalog .t-gold { background-color: var(--gold); }
.catalog .t-gold .s-copy { color: var(--cream); }
.catalog .t-gold .s-desc { color: rgba(247, 243, 237, 0.85); }
.catalog .t-gold .s-tag  { background-color: var(--cream); color: #8A5F1F; }
.catalog .t-gold .s-vis  { background-color: rgba(247, 243, 237, 0.08); }

/* ----- Mock cards ----- */
.catalog .card {
  width: 90%;
  max-width: 300px;
  background-color: var(--cream);
  border-radius: 13px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 18px 42px -18px rgba(0, 0, 0, 0.4);
}
.catalog .ml {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}
.catalog .line {
  height: 8px;
  border-radius: 5px;
  background-color: var(--cream-deeper);
  margin-bottom: 0.5rem;
}
.catalog .line.s { width: 55%; }
.catalog .chip {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6rem;
  color: var(--foliage);
  background-color: rgba(45, 74, 45, 0.12);
  padding: 3px 8px;
  border-radius: 7px;
  margin: 0.15rem 0.2rem 0 0;
}
.catalog .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6rem;
  color: var(--foliage);
  background-color: rgba(45, 74, 45, 0.1);
  padding: 4px 9px;
  border-radius: 20px;
  margin: 0.15rem 0.2rem 0 0;
}
.catalog .flag {
  font-size: 1.2rem;
  margin-right: 0.35rem;
}

.catalog .barrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.catalog .barrow .lab {
  flex-shrink: 0;
  width: 58px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6rem;
  color: var(--ink-soft);
}
.catalog .barrow .bar {
  height: 8px;
  border-radius: 4px;
  background-color: var(--foliage);
}
.catalog .kpi {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}
.catalog .kpi .k { flex: 1; }
.catalog .kpi .kn {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.catalog .kpi .kl {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.catalog .spark-svg {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 0.2rem;
}
.catalog .spark-line {
  stroke-dasharray: 400; /* covers the polyline length */
  stroke-dashoffset: 0;  /* default visible */
}

.catalog .timeline {
  position: relative;
  padding-left: 1.1rem;
}
.catalog .timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-color: var(--cream-deeper);
}
.catalog .tl-step {
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink-warm);
  margin-bottom: 0.55rem;
}
.catalog .tl-step::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--foliage);
}
.catalog .tl-step.future { color: var(--ink-soft); font-weight: 400; }
.catalog .tl-step.future::before { background-color: var(--cream-deeper); }
.catalog .day {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.52rem;
  color: var(--ink-soft);
}

.catalog .person {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.catalog .av {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--foliage);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.62rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog .av.b2 { background-color: var(--terracotta); }
.catalog .av.b3 { background-color: var(--brass); }
.catalog .pinfo { flex: 1; }
.catalog .pname {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink);
}
.catalog .punit {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.58rem;
  color: var(--ink-soft);
}

.catalog .pick {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}
.catalog .pic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: var(--cream-deeper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.catalog .pmeta { flex: 1; }
.catalog .ptitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink);
}
.catalog .psub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.56rem;
  color: var(--ink-soft);
}
.catalog .stars {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.56rem;
  color: var(--brass);
}

.catalog .ticket {
  border-left: 3px solid var(--brass);
  padding-left: 0.7rem;
  margin-bottom: 0.55rem;
}
.catalog .tk-id {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6rem;
  color: var(--ink);
}
.catalog .tk-status {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brass);
}
.catalog .tk-prog {
  height: 5px;
  border-radius: 3px;
  background-color: var(--cream-deeper);
  margin-top: 0.4rem;
  overflow: hidden;
}
.catalog .tk-prog i {
  display: block;
  height: 100%;
  background-color: var(--brass);
  border-radius: 3px;
}

.catalog .msg {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.catalog .msg-ic {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background-color: rgba(45, 74, 45, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.catalog .msg-b { flex: 1; }
.catalog .msg-t {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.66rem;
  color: var(--ink);
}
.catalog .msg-d {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.55rem;
  color: var(--ink-soft);
}
.catalog .deliv {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.catalog .deliv .d {
  flex: 1;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.5rem;
  color: var(--foliage);
  background-color: rgba(45, 74, 45, 0.1);
  border-radius: 6px;
  padding: 3px 0;
}

.catalog .dash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.catalog .dash .tile {
  background-color: var(--cream-deeper);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}
.catalog .dash .tile.full { grid-column: span 2; }
.catalog .dt-l {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.catalog .dt-n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.catalog .dt-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  margin-top: 0.2rem;
}
.catalog .dt-bars span {
  flex: 1;
  background-color: var(--foliage);
  border-radius: 1px;
}

/* Signal (sentiment rows) */
.catalog .sig {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.catalog .sig-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.7rem;
}
.catalog .sig-lab { font-weight: 500; color: var(--ink-warm); }
.catalog .sig-up   { font-weight: 500; color: var(--foliage); font-size: 0.62rem; }
.catalog .sig-down { font-weight: 500; color: var(--terracotta); font-size: 0.62rem; }

/* Building Memory (history events) */
.catalog .history {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.catalog .hist-event {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--ink-warm);
  line-height: 1.3;
}
.catalog .hist-date {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 64px;
}

/* =========================================================
   CATALOG — PREMIUM CAPSULE (#15 Circles)
   Distinct visual tier from the four standard themes: dark ink
   gradient background with a 1.5px inset gold ring, gold gradient
   text on the module name, gold-pill badge. The capsule renders
   on .mod itself (replacing a theme class). Inner s-copy is
   transparent (lets the ink gradient show); inner s-vis carries a
   subtle gold radial glow. Söhne weights only (500 + 900).
   ========================================================= */
.catalog .cap-premium {
  background: linear-gradient(135deg, #241d15 0%, #1c1710 55%, #211a12 100%);
  box-shadow:
    0 30px 70px -30px rgba(31, 27, 22, 0.65),
    inset 0 0 0 1.5px rgba(217, 169, 78, 0.45);
}
.catalog .cap-premium .s-desc { color: rgba(247, 243, 237, 0.72); }
.catalog .cap-premium .s-name {
  background: linear-gradient(90deg, #F7F3ED, #E7C173);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.catalog .cap-premium .s-vis {
  background: radial-gradient(ellipse at 30% 20%,
    rgba(217, 169, 78, 0.10), transparent 70%);
}

.catalog .badge-premium {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  margin-bottom: 1rem;
  color: #1c1710;
  background: linear-gradient(90deg, #E7C173, #C9963B);
  box-shadow: 0 4px 14px -4px rgba(217, 169, 78, 0.6);
}
.catalog .badge-premium::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1c1710;
}

/* "Who's in" mock — Padel Saturday event card */
.catalog .card-premium {
  width: 92%;
  max-width: 300px;
  background: rgba(247, 243, 237, 0.97);
  border-radius: 15px;
  padding: 1.15rem 1.25rem;
  box-shadow:
    0 22px 50px -20px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(217, 169, 78, 0.25);
}
.catalog .cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.catalog .cp-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.82rem;
  color: #1F1B16;
}
.catalog .cp-time {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6rem;
  color: #8a7a64;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.catalog .cp-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.66rem;
  color: #6B5E50;
  margin-bottom: 0.9rem;
}
.catalog .cp-avs {
  display: flex;
  margin-bottom: 0.9rem;
}
.catalog .cp-a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid #F7F3ED;
  margin-left: -9px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.62rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.catalog .cp-a:first-child { margin-left: 0; }
.catalog .cp-a1 { background: #2D4A2D; }
.catalog .cp-a2 { background: #B8633E; }
.catalog .cp-a3 { background: #B68B3F; }
.catalog .cp-a4 { background: #3A5A38; }
.catalog .cp-amore {
  background: #2A2218;
  font-size: 0.56rem;
}
.catalog .cp-count {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--foliage);
  margin-bottom: 0.7rem;
}
.catalog .cp-count b {
  font-family: var(--font-display);
  font-weight: 900;
  color: #1F1B16;
}
.catalog .cp-maybe {
  color: #a08a6a;
  font-weight: 500;
}
.catalog .cp-join {
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  color: #1c1710;
  background: linear-gradient(90deg, #E7C173, #C9963B);
  border-radius: 9px;
  padding: 9px 0;
  letter-spacing: 0.02em;
}

/* --- Concierge 24/7 (#16) mock: mini chat --- */
.catalog .cp-q {
  background: #E8E0D1;
  border-radius: 12px 12px 12px 3px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.68rem;
  color: #1F1B16;
  margin-bottom: 0.45rem;
  max-width: 85%;
}
.catalog .cp-ans {
  background: #2D4A2D;
  color: #F7F3ED;
  border-radius: 12px 12px 3px 12px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.68rem;
  margin-bottom: 0.3rem;
  margin-left: auto;
  max-width: 88%;
}
.catalog .cp-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.5rem;
  color: #8a7a64;
  text-align: right;
  margin-bottom: 0.7rem;
}
.catalog .cp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.catalog .cp-tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.5rem;
  color: #6B5E50;
  background: #EFE9DF;
  border-radius: 20px;
  padding: 2px 7px;
}

/* --- Owner & Board Reporting (#17) mock: monthly report rows --- */
.catalog .rep-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid #EFE9DF;
}
.catalog .rep-row:last-of-type { border-bottom: none; }
.catalog .rep-l {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.66rem;
  color: #6B5E50;
}
.catalog .rep-v {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.82rem;
  color: #1F1B16;
  letter-spacing: -0.01em;
}
.catalog .rep-up {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.56rem;
  color: #2D4A2D;
  margin-left: 0.35em;
}
.catalog .rep-foot {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.5rem;
  color: #8a7a64;
  margin-top: 0.7rem;
}
.catalog .ml-auto {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* =========================================================
   CATALOG — beaver mascots (static, one per strip)
   Each .beaver is an absolutely-positioned child of its .mod and
   pokes outward into the empty cream space. No animation, no
   observer, no idle — just a PNG with a drop-shadow.
   ========================================================= */
.catalog .beaver {
  position: absolute;
  bottom: -6px;
  width: 215px;
  z-index: 6;
  pointer-events: none;
}
.catalog .beaver.onright { right: -26%; }
.catalog .beaver.onleft  { left: -26%; }
.catalog .beaver img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 14px 10px rgba(31, 27, 22, 0.28));
}
.catalog .beaver.flip img { transform: scaleX(-1); }

/* =========================================================
   CATALOG — micro-animations (Layers A, B, C)

   Layer A — REVEAL on .in (added by IO or 2.5s safety timeout):
     · the .mod itself fades + slides up
     · inside, the data elements (bars, sparkline, chips, flags,
       tiles, KPIs, persons, picks, tickets, tl-steps, sig-rows,
       hist-events) animate from hidden → visible with stagger
   Layer B — HOVER reacts (always on; not gated by .in)
   Layer C — AMBIENT breathing on every .card; .live dot pulse
             (always on; pause on hover; disabled by reduced-motion)

   SAFETY: default state of every element is fully visible. Only
   when JS adds .will-rise to a .mod do its descendants enter the
   "hidden initial pose" — until .in flips them to visible. If JS
   never adds .will-rise (no support, reduced-motion path), the
   final visible state remains.
   ========================================================= */

/* --- Layer A: the mod itself --- */
.catalog .mod.will-rise { opacity: 0; transform: translateY(20px); }
.catalog .mod.will-rise.in { opacity: 1; transform: translateY(0); }
.catalog .mod.will-rise.in:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px -28px rgba(31, 27, 22, 0.5);
}

/* --- Layer A: bars grow from 0 to their inline width --- */
.catalog .mod.will-rise .barrow .bar,
.catalog .mod.will-rise .tk-prog i {
  transform: scaleX(0);
  transform-origin: left;
}
.catalog .mod.will-rise.in .barrow .bar,
.catalog .mod.will-rise.in .tk-prog i {
  transform: scaleX(1);
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.catalog .mod.will-rise.in .barrow:nth-of-type(1) .bar { transition-delay: 0.20s; }
.catalog .mod.will-rise.in .barrow:nth-of-type(2) .bar { transition-delay: 0.32s; }
.catalog .mod.will-rise.in .barrow:nth-of-type(3) .bar { transition-delay: 0.44s; }
.catalog .mod.will-rise.in .barrow:nth-of-type(4) .bar { transition-delay: 0.56s; }
.catalog .mod.will-rise.in .ticket:nth-of-type(1) .tk-prog i { transition-delay: 0.30s; }
.catalog .mod.will-rise.in .ticket:nth-of-type(2) .tk-prog i { transition-delay: 0.50s; }

/* --- Layer A: sparkline draws --- */
.catalog .mod.will-rise .spark-line { stroke-dashoffset: 400; }
.catalog .mod.will-rise.in .spark-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s ease-out 0.30s;
}

/* --- Layer A: vertical bar charts (dashboard tiles) --- */
.catalog .mod.will-rise .dt-bars span {
  transform: scaleY(0);
  transform-origin: bottom;
}
.catalog .mod.will-rise.in .dt-bars span {
  transform: scaleY(1);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.catalog .mod.will-rise.in .dt-bars span:nth-child(1) { transition-delay: 0.45s; }
.catalog .mod.will-rise.in .dt-bars span:nth-child(2) { transition-delay: 0.55s; }
.catalog .mod.will-rise.in .dt-bars span:nth-child(3) { transition-delay: 0.65s; }
.catalog .mod.will-rise.in .dt-bars span:nth-child(4) { transition-delay: 0.75s; }

/* --- Layer A: signal sentiment rows --- */
.catalog .mod.will-rise .sig-row {
  opacity: 0;
  transform: translateX(-8px);
}
.catalog .mod.will-rise.in .sig-row {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.catalog .mod.will-rise.in .sig-row:nth-of-type(1) { transition-delay: 0.25s; }
.catalog .mod.will-rise.in .sig-row:nth-of-type(2) { transition-delay: 0.35s; }
.catalog .mod.will-rise.in .sig-row:nth-of-type(3) { transition-delay: 0.45s; }
.catalog .mod.will-rise.in .sig-row:nth-of-type(4) { transition-delay: 0.55s; }

/* --- Layer A: generic fade+slide for list-like mock elements --- */
.catalog .mod.will-rise .chip,
.catalog .mod.will-rise .flag,
.catalog .mod.will-rise .kpi .k,
.catalog .mod.will-rise .person,
.catalog .mod.will-rise .pick,
.catalog .mod.will-rise .ticket,
.catalog .mod.will-rise .dash .tile,
.catalog .mod.will-rise .tl-step,
.catalog .mod.will-rise .hist-event,
.catalog .mod.will-rise .deliv .d {
  opacity: 0;
  transform: translateY(8px);
}
.catalog .mod.will-rise.in .chip,
.catalog .mod.will-rise.in .flag,
.catalog .mod.will-rise.in .kpi .k,
.catalog .mod.will-rise.in .person,
.catalog .mod.will-rise.in .pick,
.catalog .mod.will-rise.in .ticket,
.catalog .mod.will-rise.in .dash .tile,
.catalog .mod.will-rise.in .tl-step,
.catalog .mod.will-rise.in .hist-event,
.catalog .mod.will-rise.in .deliv .d {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Staggered delays for each common list */
.catalog .mod.will-rise.in .chip:nth-of-type(1) { transition-delay: 0.20s; }
.catalog .mod.will-rise.in .chip:nth-of-type(2) { transition-delay: 0.32s; }
.catalog .mod.will-rise.in .chip:nth-of-type(3) { transition-delay: 0.44s; }
.catalog .mod.will-rise.in .flag:nth-of-type(1) { transition-delay: 0.20s; }
.catalog .mod.will-rise.in .flag:nth-of-type(2) { transition-delay: 0.30s; }
.catalog .mod.will-rise.in .flag:nth-of-type(3) { transition-delay: 0.40s; }
.catalog .mod.will-rise.in .flag:nth-of-type(4) { transition-delay: 0.50s; }
.catalog .mod.will-rise.in .kpi .k:nth-of-type(1) { transition-delay: 0.18s; }
.catalog .mod.will-rise.in .kpi .k:nth-of-type(2) { transition-delay: 0.28s; }
.catalog .mod.will-rise.in .person:nth-of-type(1) { transition-delay: 0.22s; }
.catalog .mod.will-rise.in .person:nth-of-type(2) { transition-delay: 0.34s; }
.catalog .mod.will-rise.in .person:nth-of-type(3) { transition-delay: 0.46s; }
.catalog .mod.will-rise.in .pick:nth-of-type(1)  { transition-delay: 0.22s; }
.catalog .mod.will-rise.in .pick:nth-of-type(2)  { transition-delay: 0.34s; }
.catalog .mod.will-rise.in .pick:nth-of-type(3)  { transition-delay: 0.46s; }
.catalog .mod.will-rise.in .ticket:nth-of-type(1){ transition-delay: 0.22s; }
.catalog .mod.will-rise.in .ticket:nth-of-type(2){ transition-delay: 0.36s; }
.catalog .mod.will-rise.in .dash .tile:nth-of-type(1) { transition-delay: 0.20s; }
.catalog .mod.will-rise.in .dash .tile:nth-of-type(2) { transition-delay: 0.28s; }
.catalog .mod.will-rise.in .dash .tile:nth-of-type(3) { transition-delay: 0.36s; }
.catalog .mod.will-rise.in .dash .tile:nth-of-type(4) { transition-delay: 0.44s; }
.catalog .mod.will-rise.in .dash .tile:nth-of-type(5) { transition-delay: 0.52s; }
.catalog .mod.will-rise.in .tl-step:nth-of-type(1) { transition-delay: 0.22s; }
.catalog .mod.will-rise.in .tl-step:nth-of-type(2) { transition-delay: 0.34s; }
.catalog .mod.will-rise.in .tl-step:nth-of-type(3) { transition-delay: 0.46s; }
.catalog .mod.will-rise.in .tl-step:nth-of-type(4) { transition-delay: 0.58s; }
.catalog .mod.will-rise.in .hist-event:nth-of-type(1) { transition-delay: 0.22s; }
.catalog .mod.will-rise.in .hist-event:nth-of-type(2) { transition-delay: 0.32s; }
.catalog .mod.will-rise.in .hist-event:nth-of-type(3) { transition-delay: 0.42s; }
.catalog .mod.will-rise.in .hist-event:nth-of-type(4) { transition-delay: 0.52s; }
.catalog .mod.will-rise.in .deliv .d:nth-of-type(1) { transition-delay: 0.55s; }
.catalog .mod.will-rise.in .deliv .d:nth-of-type(2) { transition-delay: 0.65s; }
.catalog .mod.will-rise.in .deliv .d:nth-of-type(3) { transition-delay: 0.75s; }

/* =========================================================
   Layer B — hover reacts (always on; pauses Layer C)
   ========================================================= */
.catalog .mod:hover .barrow .bar,
.catalog .mod:hover .tk-prog i,
.catalog .mod:hover .dt-bars span,
.catalog .mod:hover .compare-bar { filter: brightness(1.08); }
.catalog .mod:hover .spark-line {
  stroke-width: 3.4;
  transition: stroke-width 0.25s ease-out;
}
.catalog .mod:hover .person,
.catalog .mod:hover .pick,
.catalog .mod:hover .ticket,
.catalog .mod:hover .sig-row { color: var(--ink); }
.catalog .mod:hover .card { animation-play-state: paused; }

/* =========================================================
   Layer C — ambient (always on; respects reduced-motion)
   ========================================================= */
@keyframes pm-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.004); }
}
.catalog .card {
  animation: pm-breathe 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes pm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.5); }
}
.catalog .live::before {
  animation: pm-pulse 1.8s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 820px) {
  .catalog-wrap { padding: 4.5rem var(--container-pad) 5.5rem; }
  .catalog .mod {
    width: 100%;
    grid-template-columns: 1fr;
    margin-bottom: 1.25rem;
    min-height: 0;
  }
  .catalog .mod-left,
  .catalog .mod-right { margin-left: 0; margin-right: 0; }
  .catalog .s-vis     { display: none; }
  .catalog .s-copy    {
    padding: 1.8rem;
    /* with .s-vis hidden, .s-copy is the sole cell — full radius */
    border-radius: 20px;
  }
  .catalog .s-name    { font-size: 1.55rem; }
  .catalog .connectors { display: none; }
  .catalog .beaver    { display: none; }
}

/* =========================================================
   SECTION 7 — HOW WE WORK (four steps, dashed brass line)
   Sits on the site's base cream — deliberate breath between the
   color-saturated catalog and whatever closing block follows.
   Four step columns, each with a numbered circle, a tag pill, a
   name and a short copy. A dashed brass line runs horizontally
   behind the circles connecting them (hidden on tablet stacks).
   All content visible by default — no reveal animation here.
   ========================================================= */
.how-we-work {
  background-color: var(--cream);
  padding-block: 7rem 6rem;
  width: 100%;
}
.how-we-work .container {
  text-align: center;
}

.how-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.how-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background-color: var(--brass);
  flex-shrink: 0;
}

.how-headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 auto 1.2rem;
  max-width: 880px;
  text-wrap: balance;
}

.how-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto 4rem;
  max-width: 720px;
}
.how-sub strong {
  font-weight: 500;
  color: var(--ink-warm);
}

.how-steps-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
/* Dashed brass connector running horizontally through the circle
   centers. Sits BEHIND the steps (z-index 0); the cream circles
   (z-index 2) occlude it where they intersect, so visually the line
   "links" the steps without overlapping the numbers. */
.how-steps-row::before {
  content: "";
  position: absolute;
  top: 34px;        /* half of circle height (68 / 2) */
  left: 12.5%;      /* approximate horizontal center of column 1 */
  right: 12.5%;     /* mirror for column 4 */
  border-top: 2px dashed var(--brass);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.how-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.how-num {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-color: var(--cream);
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px -6px rgba(31, 27, 22, 0.18);
  margin-bottom: 1.2rem;
}
.how-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 30px;
  margin-bottom: 0.85rem;
  color: currentColor;
}
.how-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.55rem;
}
.how-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 240px;
  margin: 0;
}

/* Per-step color (drives the number border, the number text, the
   tag text, and the tag pill bg via the corresponding rgba tint) */
.how-step--foliage { color: var(--foliage); }
.how-step--foliage .how-tag { background-color: rgba(45, 74, 45, 0.10); }
.how-step--terra   { color: var(--terracotta); }
.how-step--terra   .how-tag { background-color: rgba(184, 99, 62, 0.10); }
.how-step--gold    { color: var(--gold); }
.how-step--gold    .how-tag { background-color: rgba(168, 119, 46, 0.12); }
.how-step--olive   { color: var(--olive); }
.how-step--olive   .how-tag { background-color: rgba(58, 90, 56, 0.10); }

@media (max-width: 880px) {
  .how-we-work { padding-block: 5rem 4.5rem; }
  .how-sub { margin-bottom: 3rem; }
  .how-steps-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }
  .how-steps-row::before { display: none; }
}
@media (max-width: 520px) {
  .how-steps-row {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* =========================================================
   SECTION 8 — CLOSING (philosophy mantra + diagram + CTA)
   Dark ink radial background. Two-column layout: text left,
   pentagon-of-systems diagram right. The diagram's nodes fade
   in staggered, then the gold connector lines draw to the hub.
   The hub's outer ring pulses continuously. All animation gated
   on .closing.animate (JS-added) — without it, everything
   renders statically in its final visible pose.
   ========================================================= */
/* Single dark gradient owning both .closing AND .f-footer — eliminates
   the seam that any per-section background was producing. Top warm
   ink, bottom near-black, one continuous descent. */
.dark-stack {
  background:
    linear-gradient(to bottom, #2b241a 0%, #1a1611 45%, #100d09 75%, #0a0807 100%);
  color: var(--cream);
}

.closing {
  background: transparent;   /* show the .dark-stack gradient through */
  padding-block: 3.5rem;
  width: 100%;
  color: var(--cream);
}
.closing-inner {
  max-width: 900px;
  margin: 0 auto;
  padding-inline: var(--container-pad);
  text-align: center;
}

/* --- Left column: text --- */
.closing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.4rem;
}
.closing-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background-color: var(--brass);
  flex-shrink: 0;
}

.closing-mantra {
  font-family: var(--font-body);   /* Söhne Kräftig — NOT Breit, formal voice */
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 820px;
  margin: 0 auto 2.2rem;
  text-align: center;
  text-wrap: balance;
}
.closing-mantra .closing-dim    { color: rgba(247, 243, 237, 0.40); }
.closing-mantra .closing-bright { color: var(--cream); }
.closing-mantra .closing-gold   { color: #E7C173; }

.closing-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.closing-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  line-height: 1;
  background-color: var(--cream);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.18),
    0 6px 16px -4px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.closing-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.18),
    0 12px 28px -6px rgba(0, 0, 0, 0.45);
}
.closing-cta span { transition: transform 0.25s ease; }
.closing-cta:hover span { transform: translateX(3px); }

.closing-cta-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(247, 243, 237, 0.55);
  max-width: 220px;
  margin: 0;
}

/* --- Right column: pentagon-of-systems diagram --- */
.closing-diagram {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.closing-diagram svg {
  width: 100%;
  height: 100%;
  display: block;
}

.closing-node-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: rgba(247, 243, 237, 0.55);
}
.closing-hub-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* Hub pulse — continuous, default-on. Survives reduced-motion
   thanks to the global @media further down that caps duration. */
@keyframes closing-hub-pulse {
  0%, 100% { r: 36; opacity: 0.55; }
  50%      { r: 48; opacity: 0.12; }
}
.closing-pulse {
  animation: closing-hub-pulse 2.4s ease-in-out infinite;
}

/* --- Reveal animations (JS-gated via .closing.animate) ---
   Default state of every element below is its FINAL visible pose
   (opacity 1, stroke-dashoffset 0). The animation only engages
   when JS adds .animate to the section. If JS doesn't run, IO is
   unsupported, or reduced-motion is set, the diagram still
   renders correctly — only the entrance choreography is missing. */
.closing-node  { opacity: 1; }
.closing-line  { stroke-dasharray: 152; stroke-dashoffset: 0; }

.closing.animate .closing-node {
  animation: closing-fade-in 0.6s ease-out both;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
@keyframes closing-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.closing.animate .closing-line {
  animation: closing-line-draw 0.9s ease-out backwards;
  animation-delay: calc(0.55s + var(--i, 0) * 0.14s);
}
@keyframes closing-line-draw {
  from { stroke-dashoffset: 152; }
  to   { stroke-dashoffset: 0; }
}

/* Responsive — stack the columns on narrower viewports */
@media (max-width: 840px) {
  .closing { padding-block: 2.75rem; }
}

/* =========================================================
   FOOTER — all classes prefixed .f- so nothing existing is touched.
   Dark ink radial background with a soft foliage glow tucked into
   the bottom-right corner. The mantra uses Söhne in normal weight
   (Kräftig 500) — deliberately NOT Söhne Breit Extrafett — to keep
   the closing voice serious and formal rather than rounded.
   ========================================================= */
.f-footer {
  position: relative;
  overflow: hidden;          /* contains the foliage glow pseudo-element */
  background: transparent;    /* show the .dark-stack gradient through */
  color: var(--cream);
  padding-block: 3.5rem 2rem;
}
.f-footer::before {
  /* foliage glow in the bottom-right corner */
  content: "";
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 65%;
  height: 80%;
  background:
    radial-gradient(ellipse at center, rgba(45, 74, 45, 0.20), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.f-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

/* --- Mantra --- */
.f-mantra {
  font-family: var(--font-body);
  font-weight: 500;        /* Söhne Kräftig — NOT Breit Extrafett */
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 24ch;
  margin: 0 0 2.5rem;
  text-align: left;
  text-wrap: balance;
}
.f-mantra-accent {
  color: #E7C173;
}

/* --- Divider above the seals --- */
.f-divider-top {
  width: 100%;
  height: 1px;
  background-color: rgba(247, 243, 237, 0.14);
  margin: 0 0 2rem;
}

/* --- Trust seals row --- */
.f-seals {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: 2rem;
}
.f-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 900;       /* Söhne Breit Extrafett — max bold for trust seals */
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(247, 243, 237, 0.6);
}
.f-seal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #E7C173;
  flex-shrink: 0;
}

/* --- Brand block + links row --- */
.f-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  margin-bottom: 2rem;
}
.f-brand {
  max-width: 420px;
}
.f-wordmark {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--cream);
  margin: 0 0 0.55rem;
}
.f-tm {
  font-size: 0.55em;
  vertical-align: super;
  color: var(--brass);
  margin-left: 1px;
  font-weight: 500;
  letter-spacing: 0;
}
.f-tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(247, 243, 237, 0.55);
  margin: 0 0 0.9rem;
}
.f-email {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(247, 243, 237, 0.25);
  text-underline-offset: 4px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}
.f-email:hover {
  color: #E7C173;
  text-decoration-color: #E7C173;
}

.f-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.f-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: rgba(247, 243, 237, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}
.f-link:hover { color: #E7C173; }

/* --- Baseline (single copyright, no Studio №001) --- */
.f-baseline {
  border-top: 1px solid rgba(247, 243, 237, 0.10);
  padding-top: 1.5rem;
  text-align: left;
}
.f-copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(247, 243, 237, 0.4);
  margin: 0;
}

/* Responsive — stack the meta row + tighten the seal gap */
@media (max-width: 680px) {
  .f-footer { padding-block: 2.75rem 2rem; }
  .f-mantra { margin-bottom: 2rem; }
  .f-seals  { gap: 0.85rem 1.5rem; margin-bottom: 1.75rem; }
  .f-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }
  .f-links { gap: 1.25rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}