/* NAHWERK Website Story + Conversion Final — frozen story implementation */
:root{
  --story-bg:#030304;
  --story-bg-soft:#070708;
  --story-panel:#0b0b0d;
  --story-text:#f7f5f0;
  --story-muted:#b8b4ac;
  --story-line:rgba(255,255,255,.10);
  --story-line-strong:rgba(255,255,255,.18);
  --story-gold:#d4af37;
  --story-radius:24px;
}
html{scroll-behavior:smooth}
body.story-site{background:var(--story-bg)!important;color:var(--story-text)}
body.story-site main{background:var(--story-bg)}
body.story-site .top{background:#000!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
body.story-site.nw-header-scrolled .top{background:rgba(3,3,4,.88)!important;backdrop-filter:blur(22px) saturate(130%)}
body.story-site .links a{white-space:nowrap}
body.story-site .links a.active{color:#fff}
body.story-site main>section.reveal,body.story-site .footer.reveal{opacity:1!important;transform:none!important;transition:none!important}
.story-shell{width:min(1180px,calc(100% - 48px));margin:0 auto}
.story-section{position:relative;overflow:hidden;padding:clamp(88px,9vw,138px) 0;border-bottom:1px solid var(--story-line)}
.story-section--soft{background:linear-gradient(180deg,#050506 0%,#080809 100%)}
.story-section--quiet{background:
  radial-gradient(760px 440px at 84% 16%,rgba(82,92,132,.08),transparent 68%),
  #050506}
.story-kicker{margin:0 0 16px;color:var(--story-gold);font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.story-title{max-width:940px;margin:0;font-size:clamp(2.45rem,5.7vw,5.7rem);line-height:.96;letter-spacing:-.055em;color:#fff}
.story-title--section{font-size:clamp(2.25rem,4.6vw,4.4rem);max-width:920px}
.story-lead{max-width:720px;margin:24px 0 0;color:var(--story-muted);font-size:clamp(1.04rem,1.55vw,1.23rem);line-height:1.72}
.story-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.story-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border:1px solid var(--story-line-strong);border-radius:12px;text-decoration:none;font-weight:700;letter-spacing:.01em;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.story-btn:hover{transform:translateY(-1px)}
.story-btn--primary{background:#f3f0e9;color:#111;border-color:#f3f0e9}
body.story-site a.story-btn.story-btn--primary{background:#f3f0e9!important;color:#111!important;border-color:#f3f0e9!important;opacity:1!important}
.story-btn--primary:hover{background:#fff;border-color:#fff}
.story-btn--secondary{background:rgba(255,255,255,.035);color:#fff}
.story-btn--secondary:hover{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.28)}
.story-btn:focus-visible{outline:2px solid #f3f0e9;outline-offset:3px}
.story-hero{position:relative;isolation:isolate;min-height:clamp(690px,48vw,880px);display:flex;align-items:center;padding:clamp(90px,10vw,150px) 0;border-bottom:1px solid var(--story-line);background:#000}
.story-hero-art{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.story-hero::after{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.73) 36%,rgba(0,0,0,.25) 62%,rgba(0,0,0,.04) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18))}
.story-hero-copy{max-width:700px}
.story-hero .story-title{max-width:760px}
.story-product-thought{max-width:620px;margin:24px 0 0;padding:16px 0 16px 18px;border-left:2px solid var(--story-gold);color:#f7f5ef;font-size:clamp(1.04rem,1.4vw,1.18rem);line-height:1.55}
.story-product-thought strong{color:#fff}
.story-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;color:#d0ccc4;font-size:.86rem}
.story-meta span{display:inline-flex;align-items:center;gap:8px}
.story-meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--story-gold)}
.story-demo-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:clamp(38px,7vw,90px);align-items:end}
.story-demo-quote{margin:0;padding:0 0 8px;color:#dedad2;font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.65}
.story-demo-quote strong{display:block;margin-bottom:8px;color:#fff;font-size:.86rem;letter-spacing:.10em;text-transform:uppercase}
.story-demo-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--story-line-strong)}
.story-demo-step{position:relative;min-height:220px;padding:28px 24px 20px 0;border-right:1px solid var(--story-line)}
.story-demo-step+ .story-demo-step{padding-left:24px}
.story-demo-step:last-child{border-right:0}
.story-demo-step::before{content:attr(data-step);display:block;margin-bottom:28px;color:var(--story-gold);font-size:.74rem;font-weight:800;letter-spacing:.14em}
.story-demo-step h3{margin:0 0 12px;color:#fff;font-size:1.18rem}
.story-demo-step p{margin:0;color:var(--story-muted);line-height:1.62}
.story-demo-result{margin-top:34px;padding:20px 0;border-top:1px solid var(--story-line);border-bottom:1px solid var(--story-line);color:#d8d3ca;line-height:1.65}
.story-demo-result strong{color:#fff}
.story-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:clamp(44px,8vw,104px);align-items:center}
.story-safety-preview{position:relative;max-width:480px;margin-left:auto;padding:28px;border:1px solid var(--story-line-strong);border-radius:30px;background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 28px 80px rgba(0,0,0,.34)}
.story-safety-preview::before{content:"Safety Check";display:block;margin-bottom:24px;color:#a9a59d;font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.story-check-time{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--story-line);color:#cbc7bf}
.story-check-time strong{font-size:1.7rem;color:#fff}
.story-check-message{margin:24px 0 0;padding:18px 20px;border-radius:18px;background:#f2efe8;color:#161616;font-weight:700;line-height:1.45}
.story-check-reply{width:max-content;margin:12px 0 0 auto;padding:11px 16px;border:1px solid rgba(212,175,55,.35);border-radius:16px;color:#fff;background:rgba(212,175,55,.08)}
.story-check-note{margin:22px 0 0;color:#aaa69f;font-size:.9rem;line-height:1.55}
.story-family-media{position:relative;margin:0;min-height:520px;border-radius:30px;overflow:hidden;border:1px solid var(--story-line)}
.story-family-media img{display:block;width:100%;height:100%;min-height:520px;object-fit:cover;object-position:center center}
.story-family-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(3,3,4,.36))}
.story-principles{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--story-line)}
.story-principle{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--story-line)}
.story-principle span{color:var(--story-gold);font-size:.76rem;font-weight:800}
.story-principle strong{display:block;color:#fff;margin-bottom:4px}
.story-principle p{margin:0;color:var(--story-muted);line-height:1.55}
.story-channels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,84px);margin-top:48px}
.story-channel{padding-top:28px;border-top:1px solid var(--story-line-strong)}
.story-channel-label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.story-channel-label h3{margin:0;color:#fff;font-size:clamp(1.5rem,2.4vw,2.25rem)}
.story-channel-label span{color:var(--story-gold);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.story-channel p{max-width:52ch;margin:0;color:var(--story-muted);line-height:1.68}
.story-channel-proof{margin-top:20px;padding:18px 0;border-top:1px solid var(--story-line);color:#e0dcd4;font-size:.94rem;line-height:1.55}
.story-channel-media{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:24px;align-items:start}
.story-chat-proof{padding:22px;border:1px solid var(--story-line);border-radius:22px;background:rgba(255,255,255,.025)}
.story-chat-row{margin-bottom:12px;padding:13px 15px;border-radius:16px;line-height:1.45}
.story-chat-row--user{margin-left:10%;background:#f2efe8;color:#171717}
.story-chat-row--nw{margin-right:10%;border:1px solid var(--story-line);color:#eeeae2;background:#0b0b0d}
.story-agent-mini{width:132px;max-width:132px;margin:0;justify-self:end;align-self:start;border:1px solid var(--story-line);border-radius:18px;overflow:hidden;background:#09090a}
.story-agent-mini img{display:block;width:132px!important;height:165px!important;max-width:132px!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center top!important}
.story-agent-mini figcaption{padding:8px 10px;color:#c4c0b7;font-size:.72rem;line-height:1.35}
.story-final{padding:clamp(100px,11vw,160px) 0;background:
  radial-gradient(720px 430px at 86% 14%,rgba(212,175,55,.09),transparent 68%),
  linear-gradient(180deg,#080809,#030304)}
.story-final .story-title{max-width:980px}
.story-final .story-lead{max-width:650px}
.story-subhero{padding:clamp(96px,10vw,148px) 0 clamp(80px,8vw,118px);background:
  radial-gradient(700px 480px at 82% 18%,rgba(80,91,136,.11),transparent 68%),
  #030304;border-bottom:1px solid var(--story-line)}
.story-subhero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.78fr);gap:clamp(40px,7vw,90px);align-items:center}
.story-subhero .story-title{font-size:clamp(2.7rem,5.7vw,5.4rem)}
.story-proof-block{padding:26px;border:1px solid var(--story-line);border-radius:24px;background:rgba(255,255,255,.025)}
.story-proof-block strong{display:block;margin-bottom:10px;color:#fff;font-size:1.04rem}
.story-proof-block p{margin:0;color:var(--story-muted);line-height:1.6}
.story-compact-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:44px;border-top:1px solid var(--story-line)}
.story-compact-item{padding:26px 22px 0 0;min-height:160px;border-right:1px solid var(--story-line)}
.story-compact-item+ .story-compact-item{padding-left:22px}
.story-compact-item:last-child{border-right:0}
.story-compact-item strong{display:block;margin-bottom:9px;color:#fff}
.story-compact-item p{margin:0;color:var(--story-muted);line-height:1.55}
.story-page-footer .footer{background:#030304!important}
body.story-site .footer{background:#030304!important;border-top:1px solid var(--story-line)!important}
body.story-site .footer p,body.story-site .footer a,body.story-site .footbottom,body.story-site .footbottom span{color:#cbc7bf!important}
body.story-site .footer h3,body.story-site .footer h4{color:#fff!important}
.story-hidden-unreleased[hidden]{display:none!important}
@media(max-width:980px){
  .story-demo-intro,.story-split,.story-subhero-grid{grid-template-columns:1fr}
  .story-safety-preview{margin:18px 0 0}
  .story-family-media{order:2;min-height:440px}
  .story-family-media img{min-height:440px}
  .story-compact-list{grid-template-columns:1fr}
  .story-compact-item,.story-compact-item+ .story-compact-item{min-height:auto;padding:22px 0;border-right:0;border-bottom:1px solid var(--story-line)}
}
@media(max-width:760px){
  .story-shell{width:min(100% - 30px,1180px)}
  .story-section{padding:76px 0}
  .story-hero{min-height:auto;padding:76px 0 320px;align-items:flex-start}
  .story-hero-art{height:100%;object-fit:cover;object-position:50% 50%}
  .story-hero::after{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.90) 38%,rgba(0,0,0,.42) 66%,rgba(0,0,0,.08) 100%)}
  .story-title{font-size:clamp(2.55rem,13vw,4.2rem)}
  .story-title--section{font-size:clamp(2.2rem,10.5vw,3.45rem)}
  .story-actions{display:grid;grid-template-columns:1fr}
  .story-btn{width:100%}
  .story-meta{display:grid;gap:9px}
  .story-demo-flow{grid-template-columns:1fr;margin-top:40px;border-top:0;border-left:1px solid var(--story-line-strong)}
  .story-demo-step,.story-demo-step+ .story-demo-step{min-height:auto;padding:0 0 32px 24px;border-right:0;border-top:0}
  .story-demo-step::before{margin-bottom:10px}
  .story-channels{grid-template-columns:1fr;gap:38px}
  .story-channel-media{grid-template-columns:1fr}
  .story-agent-mini{width:132px;max-width:132px;justify-self:end}
  .story-family-media,.story-family-media img{min-height:360px}
  .story-safety-preview{padding:22px;border-radius:24px}
  .story-subhero{padding:78px 0 70px}
}
@media(max-width:480px){
  .story-hero{padding-bottom:275px}
  .story-hero-art{object-position:50% 50%}
  .story-chat-row--user{margin-left:4%}
  .story-chat-row--nw{margin-right:4%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .story-btn{transition:none}
}