:root{
  --flow-black:#090909;
  --flow-charcoal:#111;
  --flow-warm:#f1eee7;
  --flow-muted:#a9a49a;
  --flow-brass:#b8934f;
  --flow-brass-light:#d2ad64;
  --flow-border:rgba(241,238,231,.12);
  --flow-shell:1380px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--flow-black);color:var(--flow-warm);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit}
.flow-shell{width:min(calc(100% - 56px),var(--flow-shell));margin-inline:auto}
.flow-main{margin:0!important}
.flow-kicker,.flow-eyebrow{color:var(--flow-brass-light);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.flow-kicker{margin-bottom:1rem}
.flow-gold{color:var(--flow-brass-light)}

.flow-header{position:absolute;z-index:50;left:0;right:0;top:0;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.flow-header__inner{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.flow-brand{text-decoration:none;color:var(--flow-warm);display:inline-flex;align-items:center;position:relative;min-width:170px}
.flow-brand__word{font-size:1.6rem;letter-spacing:.18em;font-weight:500}
.flow-brand__line{position:absolute;left:0;top:27px;width:170px;height:38px;color:var(--flow-brass-light);opacity:.95}
.flow-nav-desktop{display:flex;justify-content:center;gap:28px}
.flow-nav-desktop a{font-size:.72rem;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;color:#eee;transition:.2s}
.flow-nav-desktop a:hover{color:var(--flow-brass-light)}
.flow-newsletter-cta{text-decoration:none;border:1px solid var(--flow-brass);padding:.75rem 1rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.flow-menu-toggle,.flow-mobile-nav{display:none}

.flow-hero{min-height:100svh;position:relative;display:flex;align-items:center;padding:110px 0 62px;background:radial-gradient(circle at 76% 40%,rgba(184,147,79,.08),transparent 30%),#090909;overflow:hidden}
.flow-hero__grid{display:grid;grid-template-columns:1.03fr .97fr;gap:56px;align-items:center}
.flow-hero__copy{padding-top:18px}
.flow-hero h1{font-size:clamp(3.7rem,6.2vw,7.3rem);line-height:.92;letter-spacing:-.048em;margin:.9rem 0 1.5rem;font-weight:650}
.flow-hero__intro{max-width:620px;color:var(--flow-muted);font-size:1.12rem;line-height:1.6}
.flow-hero__actions{display:flex;gap:22px;align-items:center;margin-top:2rem;flex-wrap:wrap}
.flow-btn{display:inline-flex;align-items:center;gap:18px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.72rem;padding:1rem 1.25rem}
.flow-btn--gold{background:var(--flow-brass-light);color:#0a0a0a}
.flow-btn--text{padding-inline:.2rem;color:#eee}
.flow-btn span,.flow-text-link span{color:var(--flow-brass-light)}
.flow-btn--gold span{color:#0a0a0a}
.flow-portrait{position:relative;overflow:hidden;border:1px solid var(--flow-border);background:linear-gradient(145deg,#171717,#0d0d0d);display:grid;place-items:center;color:rgba(255,255,255,.28);letter-spacing:.17em;font-size:.7rem}
.flow-portrait--hero{aspect-ratio:4/5;max-height:720px;justify-self:end;width:min(100%,560px);border:0}
.flow-portrait--hero:after,.flow-portrait--about:after{content:"";position:absolute;width:55%;height:55%;border-radius:50%;border:1px solid rgba(184,147,79,.24);top:14%;left:24%}
.flow-portrait__curve{position:absolute;left:-15%;right:-15%;bottom:18%;height:1px;background:var(--flow-brass);transform:rotate(-23deg);opacity:.65}
.flow-hero__curve{position:absolute;left:-8vw;right:-8vw;bottom:25px;height:1px;background:linear-gradient(90deg,transparent,var(--flow-brass),transparent);transform:rotate(-2deg);opacity:.75}

.flow-principle{padding:90px 0 48px;background:#0b0b0b;border-top:1px solid var(--flow-border)}
.flow-principle__grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:40px;align-items:center}
.flow-principle__copy h2{font-size:clamp(2.4rem,4vw,4.5rem);line-height:.98;letter-spacing:-.04em;margin:0 0 1.5rem}
.flow-principle__copy h2 span{color:var(--flow-brass-light)}
.flow-principle__copy p{max-width:490px;color:var(--flow-muted);font-size:1.04rem;line-height:1.7}
.flow-text-link{display:inline-flex;gap:16px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;color:var(--flow-brass-light);font-size:.72rem;font-weight:700;margin-top:1rem}
.flow-principle__visual{min-width:0}
.flow-river-svg{width:100%;height:auto;display:block}
.river-label{fill:#b8b1a4;font-family:Inter,sans-serif;font-size:13px;letter-spacing:2px}
.river-ring{fill:none;stroke:#b8934f;stroke-width:2}
.river-dot{fill:#d6b162;filter:url(#goldGlow)}
.river-branch{fill:none;stroke:#625b4f;stroke-width:2;opacity:.48;stroke-dasharray:7 7}
.river-noise{fill:#6e675c;font-family:Inter,sans-serif;font-size:12px;letter-spacing:2px}
.river-cut line{stroke:#d2ad64;stroke-width:2}
.river-main{fill:none;stroke:url(#riverGold);stroke-width:8;stroke-linecap:round;filter:url(#goldGlow);stroke-dasharray:760;stroke-dashoffset:760}
.river-main--shadow{stroke:#6d5732;stroke-width:22;opacity:.13;filter:none}
.river-arrow{stroke:#d2ad64;stroke-width:5;stroke-linecap:round}
.river-flow{fill:#d2ad64;font-family:Inter,sans-serif;font-weight:700;font-size:19px;letter-spacing:3px}
.river-sub{fill:#8e877c;font-family:Inter,sans-serif;font-size:10px;letter-spacing:1.4px}
.flow-principle.is-visible .river-main{animation:riverDraw 1.7s cubic-bezier(.2,.75,.25,1) forwards}
.flow-principle.is-visible .river-branch{animation:branchFade 1.4s ease .8s forwards}
.flow-principle.is-visible .river-cut{animation:cutIn .5s ease 1.1s both}
@keyframes riverDraw{to{stroke-dashoffset:0}}
@keyframes branchFade{to{opacity:.16}}
@keyframes cutIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--flow-border);margin-top:20px}
.flow-steps>div{padding:23px 26px;border-right:1px solid var(--flow-border)}
.flow-steps>div:last-child{border-right:0}
.flow-steps span{color:var(--flow-brass-light);font-size:.72rem;letter-spacing:.12em;margin-right:10px}
.flow-steps strong{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.flow-steps small{display:block;color:var(--flow-muted);margin-top:7px;font-size:.72rem}

.flow-applications{background:#eee9df;color:#0b0b0b;padding:72px 0 90px}
.flow-applications .flow-kicker{color:#8b6e39;text-align:center}
.flow-applications h2{font-size:clamp(2.5rem,4vw,4.8rem);letter-spacing:-.045em;text-align:center;margin:0 0 38px}
.flow-image-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.flow-image-card{position:relative;min-height:440px;overflow:hidden;background:#111;color:#fff;border:1px solid rgba(0,0,0,.08)}
.flow-image-card__visual{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.18);font-size:.72rem;letter-spacing:.16em;background:
radial-gradient(circle at 70% 25%,rgba(184,147,79,.22),transparent 25%),
linear-gradient(135deg,#252525,#0c0c0c)}
.flow-image-card--fitness .flow-image-card__visual:before{content:"";position:absolute;left:8%;right:8%;bottom:17%;height:22%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 45px);opacity:.5}
.flow-image-card--job .flow-image-card__visual{background:linear-gradient(135deg,#1d2023,#08090a)}
.flow-image-card--leben .flow-image-card__visual{background:radial-gradient(circle at 78% 32%,rgba(210,173,100,.5),transparent 11%),linear-gradient(160deg,#2b281f 0%,#161615 52%,#090909 100%)}
.flow-image-card__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.88) 100%)}
.flow-image-card__body{position:absolute;left:28px;right:28px;bottom:26px;z-index:2}
.flow-image-card__number{color:var(--flow-brass-light);font-size:.78rem;letter-spacing:.12em}
.flow-image-card h3{font-size:2rem;margin:.55rem 0}
.flow-image-card p{color:#ddd;line-height:1.5;max-width:340px}
.flow-image-card a{display:inline-flex;gap:12px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;color:var(--flow-brass-light);font-size:.7rem;font-weight:700;margin-top:1rem}

.flow-about{background:#111;padding:90px 0}
.flow-about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:68px;align-items:center}
.flow-portrait--about{aspect-ratio:1/1.05}
.flow-about__copy h2,.flow-final h2,.flow-newsletter h2{font-size:clamp(2.6rem,4.6vw,5.2rem);line-height:.98;letter-spacing:-.04em;margin:.6rem 0 1.25rem}
.flow-about__copy p{color:var(--flow-muted);font-size:1.06rem;line-height:1.7;max-width:650px}

.flow-final{min-height:54vh;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,rgba(184,147,79,.07),transparent 32%),#090909;padding:90px 0}
.flow-final h2 span{color:var(--flow-brass-light)}

.flow-newsletter{padding:80px 0;background:#0d0d0d;border-top:1px solid var(--flow-border)}
.flow-newsletter__inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.flow-newsletter p{color:var(--flow-muted);max-width:620px}
.flow-newsletter__placeholder{min-height:180px;border:1px dashed rgba(210,173,100,.55);display:grid;place-items:center;color:#6f675b;letter-spacing:.12em;font-size:.72rem}

.flow-footer{border-top:1px solid var(--flow-border);padding:24px 0;background:#080808}
.flow-footer__inner{width:min(calc(100% - 56px),var(--flow-shell))!important;margin:auto;max-width:none!important}
.flow-footer__claim{color:var(--flow-brass-light);letter-spacing:.08em;font-size:.75rem}

.flow-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.flow-reveal.is-visible{opacity:1;transform:none}

@media (max-width:1080px){
  .flow-nav-desktop{gap:17px}
  .flow-nav-desktop a{font-size:.65rem}
  .flow-principle__grid{grid-template-columns:1fr}
  .flow-principle__copy{max-width:720px}
}
@media (max-width:820px){
  .flow-shell{width:min(calc(100% - 32px),var(--flow-shell))}
  .flow-header{position:absolute}
  .flow-header__inner{grid-template-columns:1fr auto}
  .flow-nav-desktop,.flow-newsletter-cta{display:none}
  .flow-menu-toggle{display:grid;width:42px;height:42px;background:transparent;border:1px solid var(--flow-border);align-content:center;gap:6px;padding:0 10px}
  .flow-menu-toggle span:not(.screen-reader-text){display:block;height:1px;background:#eee}
  .flow-mobile-nav{position:absolute;top:78px;left:16px;right:16px;background:#0b0b0b;border:1px solid var(--flow-border);padding:16px;flex-direction:column;gap:6px}
  .flow-mobile-nav.is-open{display:flex}
  .flow-mobile-nav a{text-decoration:none;text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;padding:10px}
  .flow-hero{min-height:auto;padding-top:130px}
  .flow-hero__grid,.flow-about__grid,.flow-newsletter__inner{grid-template-columns:1fr}
  .flow-portrait--hero{justify-self:stretch;width:100%;max-height:none}
  .flow-steps,.flow-image-cards{grid-template-columns:1fr 1fr}
  .flow-steps>div:nth-child(2){border-right:0}
}
@media (max-width:620px){
  .flow-hero h1{font-size:clamp(3rem,15vw,5.4rem)}
  .flow-principle{padding-top:64px}
  .flow-image-cards,.flow-steps{grid-template-columns:1fr}
  .flow-steps>div{border-right:0;border-bottom:1px solid var(--flow-border)}
  .flow-image-card{min-height:390px}
  .flow-principle__visual{margin-inline:-10px}
  .river-sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .flow-reveal{opacity:1;transform:none}
  .river-main{stroke-dashoffset:0}
}


/* FLOW v0.3 — Desktop refinement. Mobile rules from v0.2 are intentionally preserved. */
@media (min-width:821px){

  .flow-header{
    padding:14px 0;
  }
  .flow-header__inner{
    min-height:54px;
  }
  .flow-brand{
    min-width:188px;
  }
  .flow-brand__word{
    font-size:1.48rem;
    letter-spacing:.2em;
  }
  .flow-brand__line{
    width:188px;
    top:26px;
    opacity:.8;
  }
  .flow-nav-desktop{
    gap:25px;
  }
  .flow-nav-desktop a{
    font-size:.66rem;
    letter-spacing:.105em;
  }
  .flow-newsletter-cta{
    padding:.68rem .95rem;
    border-color:rgba(184,147,79,.75);
    font-size:.66rem;
  }

  .flow-hero{
    min-height:92svh;
    padding:104px 0 48px;
  }
  .flow-hero__grid{
    grid-template-columns:1.02fr .98fr;
    gap:72px;
  }
  .flow-hero__copy{
    padding-top:0;
  }
  .flow-hero h1{
    font-size:clamp(3.25rem,5.3vw,6.2rem);
    line-height:.94;
    letter-spacing:-.043em;
    margin:.85rem 0 1.25rem;
    max-width:820px;
  }
  .flow-hero__intro{
    max-width:560px;
    font-size:1.02rem;
    line-height:1.62;
  }
  .flow-hero__actions{
    margin-top:1.7rem;
  }
  .flow-portrait--hero{
    width:min(100%,535px);
    aspect-ratio:4/4.85;
    border:0;
    background:
      radial-gradient(circle at 56% 35%,rgba(184,147,79,.09),transparent 31%),
      linear-gradient(180deg,#151515 0%,#0c0c0c 100%);
    box-shadow:none;
  }
  .flow-portrait--hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(9,9,9,.34),transparent 26%);
    pointer-events:none;
  }

  .flow-principle{
    padding:74px 0 38px;
  }
  .flow-principle__grid{
    grid-template-columns:.66fr 1.34fr;
    gap:54px;
  }
  .flow-principle__copy h2{
    font-size:clamp(2.2rem,3.25vw,3.9rem);
    margin-bottom:1.25rem;
  }
  .flow-principle__copy p{
    font-size:.98rem;
    line-height:1.62;
    max-width:450px;
  }
  .flow-principle__visual{
    margin-top:-8px;
  }
  .flow-river-svg{
    max-height:430px;
  }
  .river-main--shadow{
    stroke:#5e4a2a;
    stroke-width:28;
    opacity:.11;
    filter:none;
  }
  .river-main--halo{
    stroke:#9f7a3f;
    stroke-width:15;
    opacity:.2;
    filter:url(#goldGlow);
  }
  .river-main{
    stroke-width:7;
  }
  .river-branch{
    stroke:#5d574d;
    stroke-width:2.2;
    opacity:.5;
    stroke-dasharray:6 8;
  }
  .river-noise{
    font-size:11px;
    opacity:.7;
  }
  .river-flow{
    font-size:17px;
    letter-spacing:3.4px;
  }
  .river-cut{
    transform-origin:center;
  }

  .flow-steps{
    margin-top:10px;
  }
  .flow-steps>div{
    padding:17px 22px 18px;
  }
  .flow-steps span,
  .flow-steps strong{
    font-size:.68rem;
  }
  .flow-steps small{
    font-size:.68rem;
    margin-top:5px;
  }

  .flow-applications{
    padding:58px 0 72px;
  }
  .flow-applications h2{
    font-size:clamp(2.3rem,3.4vw,4rem);
    margin-bottom:30px;
  }
  .flow-image-card{
    min-height:360px;
  }
  .flow-image-card__body{
    left:24px;
    right:24px;
    bottom:22px;
  }
  .flow-image-card h3{
    font-size:1.65rem;
    margin:.45rem 0;
  }
  .flow-image-card p{
    font-size:.95rem;
    line-height:1.5;
  }
  .flow-image-card a{
    margin-top:.7rem;
  }

  .flow-about{
    padding:72px 0;
  }
  .flow-about__grid{
    grid-template-columns:.86fr 1.14fr;
    gap:56px;
  }
  .flow-about__copy h2{
    font-size:clamp(2.45rem,3.9vw,4.5rem);
  }
  .flow-about__copy p{
    font-size:1rem;
    line-height:1.62;
  }

  .flow-final{
    min-height:38vh;
    padding:64px 0;
  }
  .flow-final h2{
    font-size:clamp(2.6rem,4vw,4.8rem);
  }

  .flow-newsletter{
    padding:62px 0;
  }
  .flow-newsletter h2{
    font-size:clamp(2.5rem,3.8vw,4.5rem);
  }
  .flow-newsletter__placeholder{
    min-height:150px;
  }
}


/* FLOW v0.3.1 — Dedicated mobile river composition and cleaner animation separation */

.flow-river-svg--mobile{display:none}

.river-shadow{
  fill:none;
  stroke:#5e4a2a;
  stroke-width:28;
  opacity:.11;
  stroke-linecap:round;
}
.river-halo{
  fill:none;
  stroke:#9f7a3f;
  stroke-width:15;
  opacity:.2;
  stroke-linecap:round;
  filter:url(#goldGlowDesktop);
}
.river-core{
  fill:none;
  stroke:url(#riverGoldDesktop);
  stroke-width:7;
  stroke-linecap:round;
  filter:url(#goldGlowDesktop);
}
.river-path{
  stroke-dasharray:760;
  stroke-dashoffset:760;
}
.flow-principle.is-visible .river-path{
  animation:flowRiverDraw 1.7s cubic-bezier(.2,.75,.25,1) forwards;
}
.flow-principle.is-visible .river-branch{
  animation:flowBranchFade 1.4s ease .8s forwards;
}
.flow-principle.is-visible .river-cut{
  animation:flowCutIn .5s ease 1.1s both;
}
@keyframes flowRiverDraw{to{stroke-dashoffset:0}}
@keyframes flowBranchFade{to{opacity:.16}}
@keyframes flowCutIn{
  from{opacity:0}
  to{opacity:1}
}

@media (max-width:620px){
  .flow-river-svg--desktop{display:none}
  .flow-river-svg--mobile{display:block;width:100%;height:auto;overflow:visible}
  .flow-principle__visual{margin:1.2rem -4px 0}
  .mobile-river-label{font-size:12px;letter-spacing:1.6px}
  .mobile-river-noise{font-size:10px;letter-spacing:1.4px}
  .mobile-river-flow{font-size:16px;letter-spacing:3px}
  .mobile-branch{stroke-width:2;stroke-dasharray:5 7;opacity:.5}
  .mobile-river-path{stroke-dasharray:330;stroke-dashoffset:330}
  .river-shadow.mobile-river-path{stroke-width:24}
  .river-halo.mobile-river-path{
    stroke-width:13;
    filter:url(#goldGlowMobile);
  }
  .river-core.mobile-river-path{
    stroke-width:7;
    stroke:url(#riverGoldMobile);
    filter:url(#goldGlowMobile);
  }
  .mobile-river-cut line{stroke-width:2.2}
}

@media (prefers-reduced-motion:reduce){
  .river-path,
  .mobile-river-path{stroke-dashoffset:0!important}
}


/* FLOW v0.3.2 — FLOW Principle rebuilt to match the agreed reference */
.flow-principle--reference{
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.flow-principle--reference .flow-principle__grid{align-items:stretch}
.flow-principle--reference .flow-principle__copy{align-self:center;position:relative;z-index:2}
.flow-principle--reference .flow-principle__copy p{max-width:365px}
.flow-principle__visual--landscape{min-width:0;position:relative;align-self:stretch}
.flow-landscape{width:100%;height:auto;display:block}
.flow-landscape--mobile{display:none}
.flow-contours path{fill:none;stroke:#a79d8a;stroke-opacity:.09;stroke-width:1.2}
.landscape-label{fill:#f2ede4;font-family:Inter,Arial,sans-serif}
.landscape-label--large{font-size:20px;font-weight:650}
.landscape-source-ring{fill:rgba(247,211,129,.08);stroke:#f1c461;stroke-width:2.6;filter:url(#smallGlow)}
.landscape-source-dot{fill:#fff1b6;filter:url(#smallGlow)}
.landscape-side{fill:none;stroke:#888172;stroke-opacity:.24;stroke-width:8;stroke-linecap:round}
.landscape-river{fill:none;stroke-linecap:round;stroke-linejoin:round}
.landscape-river--a{stroke:#c48d38;stroke-opacity:.15;stroke-width:54;filter:url(#riverGlowWide)}
.landscape-river--b{stroke:#e9bc60;stroke-opacity:.28;stroke-width:28;filter:url(#riverGlowWide)}
.landscape-river--core{stroke:url(#riverCoreGold);stroke-width:10;filter:url(#riverGlowWide)}
.landscape-filaments path{fill:none;stroke:#fff0ac;stroke-opacity:.42;stroke-width:2}
.landscape-cut circle{fill:#12110f;stroke:#f1bd55;stroke-width:1.8}
.landscape-cut path{fill:none;stroke:#f1bd55;stroke-width:1.8;stroke-linecap:round}
.landscape-title{fill:#f6f3ed;font-family:Inter,Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:.2px}
.landscape-copy{fill:#d3cec4;font-family:Inter,Arial,sans-serif;font-size:15px}
.landscape-leader{fill:none;stroke:#d3a751;stroke-width:1.3;opacity:.9}
.landscape-leader-dot{fill:#efc469}
.landscape-goal circle{fill:none;stroke:#f0be61;stroke-width:1.4;opacity:.92}
.landscape-goal-dot{fill:#fff1b4!important;filter:url(#smallGlow)}
.flow-principle.is-visible .landscape-river--a,
.flow-principle.is-visible .landscape-river--b,
.flow-principle.is-visible .landscape-river--core{
  stroke-dasharray:1250;stroke-dashoffset:1250;
  animation:landscapeRiverDraw 2.2s cubic-bezier(.16,.75,.23,1) forwards
}
.flow-principle.is-visible .landscape-river--b{animation-delay:.08s}
.flow-principle.is-visible .landscape-river--core{animation-delay:.15s}
.flow-principle.is-visible .landscape-side{animation:landscapeNoiseFade 1.2s ease 1.1s forwards}
.flow-principle.is-visible .landscape-cut{opacity:0;animation:landscapeCutPop .45s ease 1.25s forwards}
.flow-principle.is-visible .landscape-callout{opacity:0;transform:translateY(8px);animation:landscapeCalloutIn .65s ease 1.05s forwards}
@keyframes landscapeRiverDraw{to{stroke-dashoffset:0}}
@keyframes landscapeNoiseFade{to{stroke-opacity:.11}}
@keyframes landscapeCutPop{to{opacity:1}}
@keyframes landscapeCalloutIn{to{opacity:1;transform:translateY(0)}}

@media (min-width:821px){
  .flow-principle--reference{padding:0}
  .flow-principle--reference .flow-shell{width:min(100% - 64px,1500px)}
  .flow-principle--reference .flow-principle__grid{grid-template-columns:31% 69%;gap:0}
  .flow-principle--reference .flow-principle__copy{padding:54px 44px 54px 0}
  .flow-principle--reference .flow-principle__copy h2{font-size:clamp(2.5rem,3.3vw,4.15rem);line-height:.98}
  .flow-principle__visual--landscape{margin-right:calc((100vw - min(100vw - 64px,1500px))/2 * -1)}
  .flow-landscape--desktop{min-height:500px;height:100%;object-fit:cover}
}

@media (max-width:820px){
  .flow-principle--reference{padding:56px 0 0}
  .flow-principle--reference .flow-principle__grid{display:block}
  .flow-principle--reference .flow-principle__copy{padding:0 0 30px}
  .flow-principle--reference .flow-principle__copy p{max-width:none}
  .flow-principle__visual--landscape{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .flow-landscape--desktop{display:none}
  .flow-landscape--mobile{display:block}
  .mobile-landscape-path{filter:url(#mobileRiverGlow)}
  .landscape-river--a.mobile-landscape-path{stroke:#c48d38;stroke-width:40;stroke-opacity:.16}
  .landscape-river--core.mobile-landscape-path{stroke:url(#mobileRiverGold);stroke-width:8}
  .flow-principle.is-visible .mobile-landscape-path{stroke-dasharray:620;stroke-dashoffset:620}
  .landscape-title{font-size:14px}
  .landscape-copy{font-size:11.5px}
  .landscape-label--large{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .landscape-river--a,.landscape-river--b,.landscape-river--core,.mobile-landscape-path{
    stroke-dashoffset:0!important;animation:none!important
  }
  .landscape-cut,.landscape-callout{
    opacity:1!important;transform:none!important;animation:none!important
  }
}


/* FLOW v0.3.3 — accepted mockup refinement */

/* Section 1: reduce excessive desktop whitespace without touching the strong mobile rhythm */
@media (min-width:821px){
  .flow-hero--tight{
    min-height:82svh;
    padding-top:78px;
    padding-bottom:28px;
  }
  .flow-hero--tight .flow-hero__grid{
    align-items:center;
  }
  .flow-hero--tight .flow-hero__actions{
    margin-top:1.45rem;
  }
}

/* Principle copy closer to reference */
.flow-principle--reference .flow-principle__copy h2 span{
  color:#d8a846;
}
.flow-principle--reference .flow-principle__copy p{
  line-height:1.68;
}

/* Final river styling */
.flow-landscape--mobile{display:none}
.landscape-river--glow{
  fill:none;
  stroke:#d69837;
  stroke-opacity:.17;
  stroke-width:64;
  stroke-linecap:round;
  filter:url(#riverGlowStrong);
}
.landscape-river--mid{
  fill:none;
  stroke:#f2bd57;
  stroke-opacity:.42;
  stroke-width:30;
  stroke-linecap:round;
  filter:url(#riverGlowStrong);
}
.landscape-river--core{
  fill:none;
  stroke:url(#riverGoldStrong);
  stroke-width:10;
  stroke-linecap:round;
  filter:url(#riverGlowStrong);
}
.landscape-filament{
  fill:none;
  stroke:#fff3bd;
  stroke-width:2.2;
  stroke-opacity:.56;
  stroke-linecap:round;
}
.landscape-filament--lower{stroke-opacity:.36}
.landscape-side{
  fill:none;
  stroke:#817b70;
  stroke-width:8;
  stroke-opacity:.28;
  stroke-linecap:round;
}
.landscape-side--lower{stroke-opacity:.22}
.landscape-cut circle{
  fill:#11100e;
  stroke:#e8b444;
  stroke-width:2;
}
.landscape-cut path{
  fill:none;
  stroke:#e8b444;
  stroke-width:2;
  stroke-linecap:round;
}
.landscape-title{
  fill:#f4efe7;
  font-size:20px;
  font-weight:700;
}
.landscape-copy{
  fill:#d2ccc2;
  font-size:15px;
}
.landscape-leader{
  stroke:#d7a744;
  stroke-width:1.3;
}
.landscape-leader-dot{fill:#f1bd57}
.landscape-source-ring{
  fill:rgba(255,216,119,.08);
  stroke:#efbd50;
  stroke-width:2.2;
  filter:url(#goldSoftGlow);
}
.landscape-source-dot{
  fill:#fff4c4;
  filter:url(#goldSoftGlow);
}
.landscape-goal circle{
  fill:none;
  stroke:#e9b64b;
  stroke-width:1.4;
}
.landscape-goal-dot{
  fill:#fff5ca!important;
  filter:url(#goldSoftGlow);
}
.flow-contours path{
  fill:none;
  stroke:#a79d8a;
  stroke-opacity:.085;
  stroke-width:1.1;
}

.flow-principle.is-visible .landscape-river--glow,
.flow-principle.is-visible .landscape-river--mid,
.flow-principle.is-visible .landscape-river--core{
  stroke-dasharray:1300;
  stroke-dashoffset:1300;
  animation:flowReferenceRiver 2.2s cubic-bezier(.16,.75,.23,1) forwards;
}
.flow-principle.is-visible .landscape-river--mid{animation-delay:.07s}
.flow-principle.is-visible .landscape-river--core{animation-delay:.14s}
.flow-principle.is-visible .landscape-side{
  animation:flowReferenceBranch 1.15s ease .95s forwards;
}
.flow-principle.is-visible .landscape-cut{
  opacity:0;
  animation:flowReferenceCut .45s ease 1.05s forwards;
}
.flow-principle.is-visible .landscape-callout{
  opacity:0;
  transform:translateY(7px);
  animation:flowReferenceCallout .6s ease .95s forwards;
}
@keyframes flowReferenceRiver{to{stroke-dashoffset:0}}
@keyframes flowReferenceBranch{to{stroke-opacity:.11}}
@keyframes flowReferenceCut{to{opacity:1}}
@keyframes flowReferenceCallout{to{opacity:1;transform:none}}

@media (min-width:821px){
  .flow-principle--reference{
    padding:0;
  }
  .flow-principle--reference .flow-principle__grid{
    grid-template-columns:28.5% 71.5%;
    gap:0;
  }
  .flow-principle--reference .flow-principle__copy{
    padding:54px 38px 54px 0;
  }
  .flow-principle--reference .flow-principle__copy h2{
    font-size:clamp(2.45rem,3.1vw,4rem);
    line-height:.98;
  }
  .flow-principle__visual--landscape{
    margin-right:calc((100vw - min(100vw - 64px,1500px))/2 * -1);
  }
  .flow-landscape--desktop{
    min-height:510px;
    height:100%;
    object-fit:cover;
  }
}

@media (max-width:820px){
  .flow-landscape--desktop{display:none}
  .flow-landscape--mobile{display:block}
  .mobile-river{
    filter:url(#mobileGlowStrong);
  }
  .landscape-river--glow.mobile-river{
    stroke:#d69c3e;
    stroke-opacity:.17;
    stroke-width:44;
  }
  .landscape-river--core.mobile-river{
    stroke:url(#mobileGoldStrong);
    stroke-width:8;
  }
  .landscape-title{font-size:14px}
  .landscape-copy{font-size:11.5px}
  .landscape-label--large{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .landscape-river--glow,.landscape-river--mid,.landscape-river--core{
    stroke-dashoffset:0!important;
    animation:none!important;
  }
  .landscape-cut,.landscape-callout{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}


/* ==========================================================
   FLOW v0.4 — Onepager launch foundation
   ========================================================== */

/* Desktop hero: denser rhythm, mobile remains untouched. */
@media (min-width:821px){
  .flow-hero--tight{
    min-height:78svh;
    padding-top:64px;
    padding-bottom:18px;
  }
}

/* Approved FLOW river mockup is now the desktop visual source.
   This avoids the synthetic SVG look while preserving semantic copy in HTML. */
.flow-river-reference{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#0b0b0a;
}
.flow-river-reference img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.flow-river-reference--desktop{display:block}

@media (min-width:821px){
  .flow-principle--reference .flow-principle__grid{
    grid-template-columns:28% 72%;
  }
  .flow-principle--reference .flow-principle__copy{
    padding:50px 38px 50px 0;
  }
  .flow-principle__visual--landscape{
    min-height:520px;
    margin-right:calc((100vw - min(100vw - 64px,1500px))/2 * -1);
  }
  .flow-river-reference--desktop{
    min-height:520px;
  }
  .flow-landscape--mobile{display:none!important}
}

/* Keep the already successful dedicated mobile composition. */
@media (max-width:820px){
  .flow-river-reference--desktop{display:none}
  .flow-landscape--mobile{display:block}
}

/* Onepager: no fake links to not-yet-existing content pages. */
.flow-image-card__body{
  padding-bottom:4px;
}

/* Footer */
.flow-footer{
  border-top:1px solid rgba(255,255,255,.1);
  background:#0a0a0a;
  color:#eee9e1;
  padding:30px 0 24px;
}
.flow-footer__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px 40px;
}
.flow-brand--footer{
  min-width:160px;
}
.flow-footer__claim{
  margin:0;
  text-align:center;
  font-size:.72rem;
  letter-spacing:.24em;
  color:#d7aa52;
}
.flow-footer__legal{
  display:flex;
  gap:22px;
  justify-content:flex-end;
}
.flow-footer__legal a{
  color:#b8b2a9;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.64rem;
  letter-spacing:.12em;
}
.flow-footer__legal a:hover{
  color:#e0b45f;
}
.flow-footer__copyright{
  grid-column:1/-1;
  margin:2px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:right;
  color:#77736d;
  font-size:.62rem;
  letter-spacing:.08em;
}
@media (max-width:820px){
  .flow-footer{
    padding:30px 0 28px;
  }
  .flow-footer__inner{
    grid-template-columns:1fr;
    gap:20px;
    justify-items:start;
  }
  .flow-footer__claim{
    text-align:left;
  }
  .flow-footer__legal{
    justify-content:flex-start;
  }
  .flow-footer__copyright{
    width:100%;
    text-align:left;
  }
}


/* FLOW v0.4.1 — Mobile FLOW visual only.
   Desktop is intentionally untouched. */
.flow-river-reference--mobile{display:none}

@media (max-width:820px){
  .flow-river-reference--desktop{display:none!important}
  .flow-river-reference--mobile{
    display:block;
    width:100%;
    margin:0;
    background:#090909;
    overflow:hidden;
  }
  .flow-river-reference--mobile img{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
    object-position:center top;
  }
  .flow-principle__visual--landscape{
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
}


/* FLOW v0.4.2 — Mobile-only visual fix.
   Desktop + anchor links intentionally untouched. */
@media (max-width:820px){
  .flow-principle--reference .flow-principle__copy{
    padding-bottom:18px;
  }

  .flow-river-reference--mobile{
    display:block;
    width:100%;
    max-width:none;
    margin:0;
    overflow:hidden;
    background:#080808;
  }

  .flow-river-reference--mobile img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    object-fit:contain;
    object-position:center top;
  }

  .flow-principle__visual--landscape{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    overflow:hidden;
  }
}


/* FLOW v0.5 — content-ready functionality, no design redesign */
.flow-portrait--hero,
.flow-portrait--about,
.flow-image-card__visual{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.flow-text-link--static,
.flow-card-link-static,
.flow-btn--static{
  cursor:default;
}

.flow-card-link-static{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.7rem;
  color:#d8aa50;
  text-transform:uppercase;
  font-size:.68rem;
  letter-spacing:.08em;
  font-weight:700;
}

.flow-btn--static{
  display:inline-flex;
}