/* FK Consulting — homepage-specific (Hero + Pinned Statement + Horizontal Scroll) */

  /* ---------- hero ---------- */
  .hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    width: 100%;
    overflow: hidden;
    background: #0a0a0a;
    color: #fff;
    isolation: isolate;
  }

  /* video: 21:9 cover, nudged to crop bottom watermark */
  .hero__video {
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: 100%;
    object-fit: cover;
    /* scale slightly > 1 and shift up so the bottom ~9% (Gemini badge) sits outside the visible frame */
    transform: translate(-50%, -54%) scale(1.12);
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
    will-change: opacity;
  }
  .hero__video--inactive { opacity: 0; }

  /* soft cinematic scrims — edges only, keep center clean */
  .hero__scrim {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 18%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 82%, rgba(0,0,0,0.75) 100%),
      radial-gradient(120% 80% at 50% 55%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
  }

  /* bottom fade into paper background so transition to next section is seamless */
  .hero__fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(245,242,236,0) 0%, rgba(245,242,236,0.5) 70%, var(--bg) 100%);
  }

  /* content — logo top-left, headline centered */
  .hero__logo {
    position: absolute;
    top: clamp(88px, 11vh, 116px);
    left: clamp(24px, 4vw, 56px);
    z-index: 5;
    width: clamp(160px, 16vw, 230px);
    height: auto;
    filter: drop-shadow(0 2px 20px rgba(0,0,0,0.35)) brightness(1.08);
    opacity: 0;
  }
  /* invert the dark logo onto dark bg — use a white/gold version via CSS filter trick: keep original but add backdrop-contrast via brightness */
  .hero__logo img {
    display: block;
    width: 100%; height: auto;
    /* logo already has navy + gold; on dark video, boost with light drop-shadow for legibility */
  }

  .hero__center {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 clamp(24px, 4vw, 56px);
    max-width: 1440px;
    margin: 0 auto;
  }

  .hero__eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 32px;
    font-family: "Geist", sans-serif;
    font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500;
    color: rgba(255,255,255,0.78);
    opacity: 0;
  }
  .hero__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--highlight); box-shadow: 0 0 12px var(--highlight); }
  .hero__eyebrow .rule { width: 40px; height: 1px; background: rgba(255,255,255,0.4); }

  .hero__headline {
    font-family: "Fraunces", serif;
    font-variation-settings: "SOFT" 40, "opsz" 144;
    font-weight: 300;
    font-size: clamp(56px, 8.4vw, 132px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 0 0 40px;
    max-width: 18ch;
    color: #fff;
  }
  .hero__headline .line {
    display: block; overflow: hidden; padding: 0 0 0.22em;
  }
  .hero__headline .line > span {
    display: block;
    line-height: 1.0;
    will-change: transform;
  }
  .hero__headline em {
    font-style: italic;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    color: var(--highlight);
    font-weight: 300;
  }

  .hero__sub {
    font-family: "Geist", sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.55;
    letter-spacing: 0.005em;
    max-width: 56ch;
    color: rgba(255,255,255,0.88);
    margin: 0 0 44px;
    opacity: 0;
  }

  .hero__cta {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 18px 30px;
    background: var(--highlight);
    color: #0a0a0a;
    border-radius: 999px;
    font-family: "Geist", sans-serif;
    font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transition: transform .4s var(--ease-expo), background .4s var(--ease-expo), box-shadow .4s var(--ease-expo);
    box-shadow: 0 10px 30px rgba(176,139,63,0.35), 0 2px 0 rgba(255,255,255,0.12) inset;
  }
  .hero__cta:hover { background: var(--highlight); box-shadow: 0 18px 40px rgba(176,139,63,0.55), 0 2px 0 rgba(255,255,255,0.2) inset; transform: translateY(-2px); }
  .hero__cta .arrow {
    width: 18px; height: 10px; position: relative; display: inline-block;
  }
  .hero__cta .arrow::before { content:""; position:absolute; left:0; right:3px; top:50%; height:1.5px; background: currentColor; transition: right .4s var(--ease-expo); }
  .hero__cta .arrow::after { content:""; position:absolute; right:0; top:50%; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; background:none; transform: translateY(-50%) rotate(45deg); transition: transform .4s var(--ease-expo); }
  .hero__cta:hover .arrow::before { right: 0; }
  .hero__cta:hover .arrow::after { transform: translate(3px,-50%) rotate(45deg); }

  /* meta — bottom left, subtle */
  .hero__meta {
    position: absolute;
    left: clamp(24px, 4vw, 56px);
    bottom: 40px;
    z-index: 5;
    display: flex; align-items: center; gap: 14px;
    font-family: "Geist", sans-serif;
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,0.8);
    opacity: 0;
  }
  .hero__meta .pulse {
    width: 6px; height: 6px; border-radius: 50%; background: var(--highlight);
    position: relative;
  }
  .hero__meta .pulse::after {
    content:""; position:absolute; inset:-5px; border-radius:50%;
    border: 1px solid var(--highlight); opacity: 0.5;
    animation: heroping 2.2s var(--ease-soft) infinite;
  }
  @keyframes heroping {
    0% { transform: scale(0.7); opacity: 0.7; }
    100% { transform: scale(2); opacity: 0; }
  }

  /* hero video pause/play toggle — bottom right, über scroll-cue */
  .hero__video-toggle {
    position: absolute;
    right: clamp(24px, 4vw, 56px);
    bottom: 110px;
    z-index: 6;
    opacity: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 14, 12, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), transform 0.3s var(--ease-expo);
  }
  .hero__video-toggle:hover {
    background: rgba(14, 14, 12, 0.65);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
  }
  .hero__video-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
  .hero__video-toggle svg { width: 14px; height: 14px; display: block; }
  .hero__video-toggle .icon-play { display: none; }
  .hero__video-toggle[aria-pressed="true"] .icon-play { display: block; }
  .hero__video-toggle[aria-pressed="true"] .icon-pause { display: none; }

  /* scroll cue — bottom right */
  .hero__scroll {
    position: absolute;
    right: clamp(24px, 4vw, 56px);
    bottom: 40px;
    z-index: 5;
    display: flex; align-items: center; gap: 12px;
    font-family: "Geist", sans-serif;
    font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,0.8);
    opacity: 0;
  }
  .hero__scroll .line {
    position: relative; width: 1px; height: 48px;
    background: rgba(255,255,255,0.2); overflow: hidden;
  }
  .hero__scroll .line::after {
    content:""; position:absolute; left:0; right:0; top:-60%; height:60%;
    background: linear-gradient(to bottom, transparent, var(--highlight));
    animation: trickle 2.2s var(--ease-soft) infinite;
  }
  @keyframes trickle {
    0% { transform: translateY(0%); }
    100% { transform: translateY(260%); }
  }

  @media (max-width: 720px) {
    /* Hero auf Mobile: kleiner, ruhiger, nicht mehr überzoomt.
       svh statt vh → keine Sprünge durch iOS-URL-Leiste. */
    .hero {
      height: 100svh;
      min-height: 560px;
      max-height: 780px;
    }
    .hero__video {
      /* kein extra-scale mehr, Blickfang etwas nach oben verschoben */
      transform: translate(-50%, -50%);
      object-position: 50% 35%;
    }
    /* dichterer Scrim — Video wird Stimmungs-Layer statt Hauptmotiv */
    .hero__scrim {
      background:
        linear-gradient(180deg,
          rgba(0,0,0,0.55) 0%,
          rgba(0,0,0,0.35) 30%,
          rgba(0,0,0,0.55) 65%,
          rgba(0,0,0,0.85) 100%);
    }
    .hero__center {
      justify-content: flex-end;
      padding-bottom: clamp(80px, 14vh, 120px);
    }
    .hero__logo { width: 140px; top: 80px; }
    .hero__eyebrow { margin-bottom: 20px; font-size: 11px; letter-spacing: 0.24em; }
    .hero__eyebrow .rule { width: 24px; }
    .hero__headline {
      font-size: clamp(40px, 10vw, 64px);
      line-height: 1.02;
      margin: 0 0 24px;
      max-width: 12ch;
    }
    .hero__sub {
      font-size: 15px;
      line-height: 1.5;
      margin: 0 0 28px;
      max-width: 36ch;
    }
    .hero__sub br { display: none; }
    .hero__cta {
      padding: 15px 24px;
      font-size: 14px;
      gap: 10px;
    }
    .hero__meta { display: none; }
    .hero__scroll { display: none; }
    .hero__fade { height: 60px; }
    /* Pause-Button rückt auf Mobile in die freigewordene Ecke */
    .hero__video-toggle {
      bottom: 24px;
      right: 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__logo, .hero__eyebrow, .hero__sub, .hero__cta, .hero__meta, .hero__scroll, .hero__video-toggle { opacity: 1 !important; }
    .hero__headline .line > span { transform: none !important; }
  }

  /* ---------- pinned statement ---------- */
  .pin-section {
    position: relative;
    height: 300vh;
  }
  .pin-inner {
    position: sticky; top: 0;
    height: 100vh;
    display: flex; align-items: center;
    padding: 0 clamp(24px, 4vw, 56px);
  }
  .pin-statement {
    font-size: clamp(40px, 6.2vw, 92px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    max-width: 18ch;
    margin: 0;
  }
  .pin-statement .w {
    color: color-mix(in oklab, var(--ink) 18%, var(--bg));
    transition: color .2s linear;
    display: inline-block;
  }
  .pin-statement .w.on { color: var(--ink); }
  .pin-statement .w.hl.on { color: var(--accent); font-style: italic; font-variation-settings: "SOFT" 80, "opsz" 144; }

  .pin-index {
    position: absolute; top: 40px; right: clamp(24px, 4vw, 56px);
    font-family: "Geist", sans-serif; font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    display: flex; align-items: center; gap: 10px;
  }
  .pin-index .num { color: var(--ink); }

  /* ---------- horizontal scroll (what you get) ---------- */
  .hscroll-section {
    position: relative;
    height: 420vh; /* scroll distance */
    background: var(--bg);
  }
  .hscroll-sticky {
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .hscroll-head {
    display:flex; justify-content: space-between; align-items: flex-end;
    padding: clamp(96px, 11vh, 120px) clamp(24px, 4vw, 56px) 24px;
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  }
  .hscroll-head h2 {
    font-family: "Fraunces", serif; font-weight: 400; font-variation-settings: "SOFT" 30, "opsz" 144;
    font-size: clamp(32px, 3.8vw, 56px); letter-spacing: -0.03em; margin: 0;
    max-width: 14ch; line-height: 1.05;
  }
  .hscroll-head .count {
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
    display: flex; align-items: baseline; gap: 10px;
  }
  .hscroll-head .count b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

  .hscroll-viewport {
    flex: 1; position: relative; overflow: hidden;
  }
  .hscroll-track {
    position: absolute; inset: 0;
    display: flex; align-items: stretch;
    will-change: transform;
  }
  .hitem {
    flex: 0 0 auto;
    width: 58vw;
    padding: 72px clamp(32px, 5vw, 80px) 72px;
    border-right: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
    display: flex; flex-direction: column; justify-content: space-between;
    transition: opacity .5s var(--ease-expo);
    opacity: 0.28;
  }
  .hitem.active { opacity: 1; }
  .hitem-num {
    font-family: "Fraunces", serif; font-variation-settings: "SOFT" 60, "opsz" 144;
    font-weight: 300;
    font-size: clamp(140px, 18vw, 240px);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--ink);
    margin: 0;
  }
  .hitem-body { max-width: 40ch; }
  .hitem-title {
    font-family: "Fraunces", serif; font-variation-settings: "SOFT" 40, "opsz" 72;
    font-weight: 400; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.02em;
    margin: 0 0 18px; line-height: 1.1;
  }
  .hitem-desc { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0; }
  .hitem-kicker {
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 48px;
  }

  .hscroll-progress {
    height: 1px; background: color-mix(in oklab, var(--ink) 10%, transparent);
    position: relative; margin: 0 clamp(24px, 4vw, 56px) 32px;
  }
  .hscroll-progress::after {
    content:""; position: absolute; left:0; top:0; bottom:0; background: var(--ink);
    width: var(--p, 0%); transition: width .1s linear;
  }

  @media (max-width: 900px) {
    .hscroll-section { height: auto; }
    .hscroll-sticky { position: static; height: auto; }
    .hscroll-viewport { overflow: visible; }
    .hscroll-track { position: relative; flex-direction: column; transform: none !important; }
    .hitem { width: 100%; opacity: 1; border-right: none; border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
    .hscroll-progress { display:none; }
  }