/* ================================================================
   SELFLEVER WARM DESIGN SYSTEM
   Direction:  Warm functional
   Canvas:     #FBF7F0 (sand)
   Accent:     #0EA5A0 (ocean teal)
   Peach:      #FFD4B5 (status pills only)
   Font:       Plus Jakarta Sans
   Radius:     20px cards / 12px inner / 999px pills
   Shadow:     0 6px 18px rgba(75,53,18,0.06)
   Signature:  SVG cohesion donut
   Version:    1.2 (2026-07-07) - refined warm pass (editorial type scale,
               system-mono numerals, generous rhythm, hero-pyramid component)

   Plus Jakarta Sans is SELF-HOSTED (see @font-face below, files in /fonts).
   Was previously loaded per page from Google Fonts; moved in-house
   2026-07-07 to drop the third-party request (visitor IP to Google).
   ================================================================ */

/* ----------------------------------------------------------------
   SELF-HOSTED FONT (Plus Jakarta Sans, variable, latin + latin-ext)
   One woff2 per subset covers weights 400 to 700 (variable weight axis).
   latin-ext is required for ä ö ü ß and other accented glyphs.
   ---------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style:  normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style:  normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------
   CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root {
  /* Canvas */
  --canvas:        #FBF7F0;
  --canvas-elev:   #FFFFFF;

  /* Ink */
  --ink:           #1A1610;
  --ink-2:         #4A3F33;
  --ink-3:         #7A6F60;

  /* Structure */
  --line:          #EFE6D7;

  /* Accent */
  --accent:        #0EA5A0;
  --accent-soft:   rgba(14, 165, 160, 0.10);
  --btn-bg:        #0B7A76;
  --accent-strong: #0B7A76;

  /* Status */
  --peach:         #FFD4B5;
  --peach-ink:     #7A3E10;
  --ok:            #2B8A57;
  --warn:          #B45309;
  --err:           #B91C1C;

  /* Shape */
  --radius:        20px;
  --radius-sm:     12px;
  --radius-pill:   999px;

  /* Elevation */
  --shadow:        0 6px 18px rgba(75, 53, 18, 0.06);

  /* Typography */
  --font:          "Plus Jakarta Sans", system-ui, sans-serif;
  /* Secondary face: SYSTEM monospace only (no web font). Small labels, step
     numbers 01/02/03, and inline numerals that want a technical, tabular feel. */
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* Editorial type scale (refined warm). Fluid clamps so headings stay confident
     on desktop and calm on mobile. H1 tops out ~54px at weight 800 / -0.04em. */
  --fs-h1:         clamp(2.25rem, 1.1rem + 4.6vw, 3.375rem);   /* -> 54px */
  --fs-h2:         clamp(1.75rem, 1rem + 2.6vw, 2.25rem);      /* -> 36px */
  --fs-h3:         clamp(1.125rem, 1rem + .5vw, 1.3125rem);    /* -> 21px */
  --fs-lede:       clamp(1.0625rem, 1rem + .4vw, 1.1875rem);   /* -> 19px */
  --fs-body:       1rem;
  --tracking-tight: -0.04em;   /* display headings */
  --tracking-snug:  -0.02em;   /* sub-heads */

  /* Section rhythm: generous, breathing vertical space between bands. */
  --section-y:     clamp(3.5rem, 7vw, 6rem);
  --hero-y:        clamp(3.5rem, 8vw, 6.5rem);

  /* Specimen-name aliases (backwards compat with style-warm.html inline styles) */
  --surface:       #FFFFFF;
  --border:        #EFE6D7;
  --text:          #1A1610;
  --text2:         #4A3F33;
  --text3:         #7A6F60;
  --accent-dim:    rgba(14, 165, 160, 0.10);
  --peach-text:    #7A3E10;
  --green:         #2B8A57;
  --red:           #B91C1C;

  /* Dilts level palette (indices 0-6, matching HERO_LEVEL_COLORS) */
  --lc0:           #eab308;   /* Environment  */
  --lc1:           #06b6d4;   /* Behaviour    */
  --lc2:           #22c55e;   /* Capability   */
  --lc3:           #ef4444;   /* Beliefs      */
  --lc4:           #f97316;   /* Values       */
  --lc5:           #a855f7;   /* Identity     */
  --lc6:           #3b82f6;   /* Mission      */
}

/* Dark-mode overrides (warm-dark, not generic-dark) */
[data-theme="dark"] {
  --canvas:        #1F1A14;
  --canvas-elev:   #2A2218;
  --ink:           #F2EAD9;
  --ink-2:         rgba(242, 234, 217, 0.65);
  --ink-3:         rgba(242, 234, 217, 0.42);
  --line:          rgba(242, 234, 217, 0.12);
  --accent:        #0EA5A0;
  --accent-soft:   rgba(14, 165, 160, 0.14);
  --btn-bg:        #0B7A76;
  --accent-strong: #0EA5A0;
  --peach:         #FFD4B5;
  --peach-ink:     #5C2A04;
  --shadow:        0 6px 18px rgba(0, 0, 0, 0.28);

  /* Specimen aliases in dark mode */
  --surface:       #2A2218;
  --border:        rgba(242, 234, 217, 0.12);
  --text:          #F2EAD9;
  --text2:         rgba(242, 234, 217, 0.65);
  --text3:         rgba(242, 234, 217, 0.42);
  --accent-dim:    rgba(14, 165, 160, 0.14);
  --peach-text:    #5C2A04;
  --green:         #2B8A57;
  --red:           #B91C1C;
}

/* ----------------------------------------------------------------
   RESET + BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  scroll-behavior: smooth;
}

body {
  background:                var(--canvas);
  color:                     var(--ink);
  font-family:               var(--font);
  font-size:                 15px;
  line-height:               1.6;
  font-style:                normal;
  font-variant-numeric:      tabular-nums;
  -webkit-font-smoothing:    antialiased;
  -moz-osx-font-smoothing:   grayscale;
}

a {
  color:           var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation:   none !important;
    transition:  none !important;
  }
}

/* ----------------------------------------------------------------
   LAYOUT HELPERS
   ---------------------------------------------------------------- */
.wrap {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 24px;
}

.grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.grid-3 {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   16px;
}

.grid-4 {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:                   16px;
}

@media (max-width: 720px) {
  .wrap      { padding: 0 16px; }
  .grid-4    { grid-template-columns: 1fr 1fr; }
  .grid-3    { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .grid-2    { grid-template-columns: 1fr; }
  .grid-3    { grid-template-columns: 1fr; }
  .grid-4    { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   NAVIGATION
   Nav height is locked at 56px via min-height + height on .nav-inner.
   .nav itself has no height so border-bottom renders correctly.
   ---------------------------------------------------------------- */
.nav {
  background:    var(--canvas-elev);
  border-bottom: 1px solid var(--line);
  position:      sticky;
  top:           0;
  z-index:       100;
  box-shadow:    var(--shadow);
}

.nav-inner {
  max-width:   1100px;
  margin:      0 auto;
  padding:     0 24px;
  height:      56px;
  min-height:  56px;
  display:     flex;
  align-items: center;
  gap:         8px;
}

@media (max-width: 480px) {
  .nav-inner { padding: 0 16px; }
}

/* .brand works as both <a> and <button> depending on the page.
   Reset all button defaults so no browser outline or border appears at rest. */
.brand {
  display:          flex;
  align-items:      center;
  gap:              10px;
  text-decoration:  none;
  color:            var(--ink);
  font-weight:      700;
  font-size:        15px;
  letter-spacing:   -0.01em;
  margin-right:     12px;
  flex-shrink:      0;
  /* Button reset (applies when brand is rendered as <button>) */
  background:       none;
  border:           none;
  padding:          0;
  cursor:           pointer;
  font-family:      inherit;
  outline:          none;
  /* Focus ring: visible only on keyboard navigation */
}

.brand:hover {
  text-decoration: none;
}

.brand:focus {
  outline: none;
}

.brand:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 3px;
  border-radius:  4px;
}

.brand-mark {
  width:         30px;
  height:        30px;
  border-radius: 8px;
  flex-shrink:   0;
  display:       block;
}

.nav-links {
  display:  none;
  gap:      2px;
  flex:     1;
}

@media (min-width: 768px) {
  .nav-links { display: flex; }
}

/* Nav links work as both <a> and <button>; reset button defaults. */
.nav-links a,
.nav-links button {
  padding:          7px 12px;
  color:            var(--ink-2);
  font-size:        13px;
  font-weight:      500;
  border-radius:    var(--radius-sm);
  text-decoration:  none;
  /* Button reset */
  background:       none;
  border:           none;
  cursor:           pointer;
  font-family:      inherit;
  outline:          none;
  white-space:      nowrap;
}

.nav-links a:hover,
.nav-links button:hover {
  background:      var(--canvas);
  color:           var(--ink);
  text-decoration: none;
}

.nav-links a:focus,
.nav-links button:focus {
  outline: none;
}

.nav-links a:focus-visible,
.nav-links button:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

/* Active link: teal colour + 2px bottom underline (not a box border). */
.nav-links a.active,
.nav-links button.active {
  color:           var(--accent);
  background:      transparent;
  border-bottom:   2px solid var(--accent);
  border-radius:   0;
  padding-bottom:  5px;
}

.nav-util {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-left: auto;
}

/* Segmented DE | EN control */
.seg {
  display:       flex;
  border:        1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  height:        34px;
}

.seg button {
  background:     none;
  border:         none;
  padding:        0 10px;
  cursor:         pointer;
  font-size:      12px;
  font-weight:    700;
  color:          var(--ink-2);
  font-family:    inherit;
  letter-spacing: 0.04em;
  height:         100%;
}

/* Active segment uses the darker teal (--btn-bg #0B7A76, same as the primary
   CTA) so white text clears WCAG AA. The lighter --accent (#0EA5A0) is only
   3.04:1 against white and fails at this text size. */
.seg button[aria-pressed="true"] {
  background: var(--btn-bg);
  color:      #fff;
}

.seg-div {
  width:      1px;
  background: var(--line);
  flex-shrink: 0;
}

/* Generic nav utility button (theme toggle, hamburger, etc.) */
.theme-btn {
  background:      none;
  border:          1px solid var(--line);
  border-radius:   var(--radius-sm);
  height:          34px;
  padding:         0 10px;
  cursor:          pointer;
  color:           var(--ink-2);
  font-size:       12px;
  font-weight:     600;
  font-family:     inherit;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  white-space:     nowrap;
}

.theme-btn:hover {
  background:    var(--canvas);
  color:         var(--ink);
  border-color:  var(--ink-3);
}

/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         13px 24px;
  background:      var(--btn-bg, #0B7A76);
  color:           #fff;
  border:          none;
  border-radius:   var(--radius-pill);
  font-size:       14px;
  font-weight:     600;
  font-family:     inherit;
  cursor:          pointer;
  text-decoration: none;
  letter-spacing:  -0.01em;
  box-shadow:      0 4px 14px rgba(14, 165, 160, 0.28);
  transition:      box-shadow 0.15s, transform 0.15s;
}

.btn-primary:hover {
  box-shadow:      0 6px 20px rgba(14, 165, 160, 0.38);
  transform:       translateY(-1px);
  text-decoration: none;
  color:           #fff;
}

.btn-secondary {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         12px 22px;
  background:      transparent;
  color:           var(--ink-2);
  border:          1px solid var(--line);
  border-radius:   var(--radius-pill);
  font-size:       14px;
  font-weight:     500;
  font-family:     inherit;
  cursor:          pointer;
  text-decoration: none;
  letter-spacing:  -0.01em;
  transition:      border-color 0.15s, color 0.15s;
}

.btn-secondary:hover {
  border-color:    var(--ink-3);
  color:           var(--ink);
  text-decoration: none;
}

/* ----------------------------------------------------------------
   CARD
   ---------------------------------------------------------------- */
.card {
  background:    var(--canvas-elev);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
}

.card-inner {
  padding: 12px;
}

.card-row {
  display:     flex;
  align-items: flex-start;
  gap:         16px;
}

/* ----------------------------------------------------------------
   PILLS
   ---------------------------------------------------------------- */
.pill {
  display:       inline-block;
  font-size:     11px;
  font-weight:   600;
  padding:       3px 10px;
  border-radius: var(--radius-pill);
  border:        1px solid var(--line);
  color:         var(--ink-3);
  letter-spacing: 0.04em;
  white-space:   nowrap;
}

.pill-peach {
  background:   var(--peach);
  color:        var(--peach-ink);
  border-color: transparent;
}

.pill-teal {
  background: var(--accent-soft);
  color:      var(--accent);
  border:     1px solid rgba(14, 165, 160, 0.22);
}

.pill-ok {
  background: rgba(43, 138, 87, 0.08);
  color:      var(--ok);
  border:     1px solid rgba(43, 138, 87, 0.22);
}

.pill-warn {
  background: rgba(180, 83, 9, 0.07);
  color:      var(--warn);
  border:     1px solid rgba(180, 83, 9, 0.22);
}

.pill-err {
  background: rgba(185, 28, 28, 0.07);
  color:      var(--err);
  border:     1px solid rgba(185, 28, 28, 0.22);
}

/* ----------------------------------------------------------------
   LEVEL DOTS
   ---------------------------------------------------------------- */

/* Single coloured dot (used inline in level headings) */
.level-dot {
  display:       inline-block;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* 7-dot row strip showing all Dilts levels */
.level-strip {
  display: flex;
  gap:     4px;
}

/* Individual dot within a strip */
.ldot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  border:        1.5px solid currentColor;
  flex-shrink:   0;
}

/* Active state: filled */
.ldot.on {
  background: currentColor;
}

/* ----------------------------------------------------------------
   DONUT (SVG cohesion score)
   The SVG itself is authored inline per use-case.
   These classes style the two circle elements inside the SVG.
   ---------------------------------------------------------------- */
.donut-track {
  fill:   none;
  stroke: var(--line);
}

.donut-fill {
  fill:             none;
  stroke:           var(--accent);
  stroke-linecap:   round;
  transition:       stroke-dasharray 0.4s ease;
}

/* ----------------------------------------------------------------
   PRIORITY BAR
   ---------------------------------------------------------------- */
.bar-wrap {
  flex:          0 0 90px;
  height:        5px;
  background:    var(--canvas);
  border-radius: 3px;
  overflow:      hidden;
}

.bar-fill {
  height:        5px;
  background:    var(--accent);
  border-radius: 3px;
}

/* ----------------------------------------------------------------
   TYPOGRAPHY UTILITIES
   ---------------------------------------------------------------- */

/* Small-caps section label */
.eyebrow {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--ink-3);
}

/* Muted body copy */
.dim {
  color: var(--ink-2);
}

/* Hairline divider */
.hairline {
  height:     1px;
  background: var(--line);
  border:     none;
}

/* Tabular numbers utility */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------
   CONFIDENCE RIBBON (amber-tinted notice band)
   ---------------------------------------------------------------- */
.conf-ribbon {
  background:    rgba(184, 122, 20, 0.07);
  border:        1px solid rgba(184, 122, 20, 0.22);
  border-radius: var(--radius-sm);
  padding:       10px 16px;
  font-size:     12px;
  color:         var(--ink-2);
  line-height:   1.5;
}

/* ----------------------------------------------------------------
   TENSION CARD (left-accent variant of .card)
   ---------------------------------------------------------------- */
.tension-card {
  background:    var(--canvas-elev);
  border:        1px solid var(--line);
  border-left:   3px solid var(--err);
  border-radius: var(--radius-sm);
  padding:       14px 18px;
}

.tension-card.secondary {
  border-left-color: var(--line);
}

/* ----------------------------------------------------------------
   ALIGNMENT CARD (teal left-accent)
   ---------------------------------------------------------------- */
.alignment-card {
  background:    var(--canvas-elev);
  border:        1px solid var(--line);
  border-left:   3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  padding:       24px;
}

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line);
  padding:    32px 24px;
}

.foot-row {
  max-width:       1100px;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             8px 20px;
  font-size:       12px;
  color:           var(--ink-3);
}

.foot-link {
  color:           var(--ink-3);
  text-decoration: none;
}

.foot-link:hover {
  color:           var(--ink);
  text-decoration: underline;
}

@media (max-width: 480px) {
  .foot      { padding: 24px 16px; }
  .foot-row  { gap: 6px 12px; }
}

/* ================================================================
   REFINED WARM ADDITIONS (v1.2, 2026-07-07)
   Editorial type helpers, system-mono numerals, and the reusable
   hero-pyramid signature component. Additive only: nothing above
   this line changed, so existing pages keep their current look.
   ================================================================ */

/* ---- Editorial heading helpers (opt-in, consume the type-scale tokens) ---- */
.display-1 {
  font-size:      var(--fs-h1);
  font-weight:    800;
  letter-spacing: var(--tracking-tight);
  line-height:    1.08;
  color:          var(--ink);
}
.display-2 {
  font-size:      var(--fs-h2);
  font-weight:    800;
  letter-spacing: -0.03em;
  line-height:    1.12;
  color:          var(--ink);
}
.lede {
  font-size:   var(--fs-lede);
  line-height: 1.6;
  color:       var(--ink-2);
}

/* ---- System-mono numerals / micro-labels (step numbers 01/02/03) ---- */
.mono,
.mono-num {
  font-family:          var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing:       0.02em;
}

/* ----------------------------------------------------------------
   HERO-PYRAMID SIGNATURE COMPONENT
   Seven bars as a warm terracotta-to-peach ramp, floating over a
   soft blurred teal radial wash, with a single peach annotation pill.
   Reusable across pages. Intended markup:

     <div class="pyramid-scene">
       <div class="pyramid-wash" aria-hidden="true"></div>
       <svg class="pyramid-ramp" viewBox="0 0 192 192">
         <rect class="pr-b0" .../> ... <rect class="pr-b6" .../>
       </svg>
       <div class="pyramid-note"><span class="pill">Start: Umwelt</span></div>
     </div>

   The .pr-b0..pr-b6 classes colour the bands via CSS, so the SVG needs
   no inline fills (keeps the ramp themeable and de-duplicated).
   ---------------------------------------------------------------- */
.pyramid-scene {
  position:    relative;
  display:     grid;
  place-items: center;
  min-height:  clamp(280px, 40vw, 380px);
  /* Terracotta-to-peach ramp, decorative only. */
  --pr-0: #5C3527;
  --pr-1: #7A4530;
  --pr-2: #9A5736;
  --pr-3: #BE7440;
  --pr-4: #DB9B57;
  --pr-5: #EFBD82;
  --pr-6: #FFD4B5;
}
.pyramid-wash {
  position:      absolute;
  inset:         0;
  margin:        auto;
  width:         min(560px, 92%);
  aspect-ratio:  1;
  border-radius: 50%;
  background:    radial-gradient(circle,
                   color-mix(in srgb, var(--accent) 32%, transparent) 0%,
                   transparent 68%);
  filter:        blur(28px);
  z-index:       0;
  pointer-events: none;
}
.pyramid-ramp {
  position:    relative;
  z-index:     1;
  width:       min(380px, 100%);
  height:      auto;
  filter:      drop-shadow(0 26px 46px rgba(26, 22, 16, 0.10));
}
.pyramid-ramp .pr-b0 { fill: var(--pr-0); }
.pyramid-ramp .pr-b1 { fill: var(--pr-1); }
.pyramid-ramp .pr-b2 { fill: var(--pr-2); }
.pyramid-ramp .pr-b3 { fill: var(--pr-3); }
.pyramid-ramp .pr-b4 { fill: var(--pr-4); }
.pyramid-ramp .pr-b5 { fill: var(--pr-5); }
.pyramid-ramp .pr-b6 { fill: var(--pr-6); }
.pyramid-note {
  position:    absolute;
  z-index:     2;
  right:       4%;
  bottom:      14%;
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}
.pyramid-note::before {
  content:    "";
  width:      26px;
  height:     1px;
  background: repeating-linear-gradient(90deg,
                var(--ink-3) 0 4px, transparent 4px 8px);
}
.pyramid-note .pill {
  background:    var(--peach);
  color:         var(--peach-ink);
  font-size:     0.75rem;
  font-weight:   700;
  padding:       0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  white-space:   nowrap;
}