/* Lokalna narracja strony. Filmowe hero zachowuje własny arkusz stylów. */
body.new-home .new-intro-detail,
body.new-home .page > .wrap > #drogi,
body.new-home .page > .wrap > #wyniki,
body.new-home .page > .wrap > #przekaz,
body.new-home .page > .wrap > #zasady { display:none!important; }
body.new-home .page > .wrap { max-width:none; padding:0; }
body.new-home .film { display:none; }
body.new-home .s6 { padding-top:0; }
body.new-home .new-intro-lead { position:relative; }
body.new-home .new-intro-lead h1 { margin-bottom:clamp(70px,8vh,110px); }

.story-container { width:min(calc(100% - 64px),1240px); margin-inline:auto; }
.story-kicker { font:600 12px/1.4 "Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.story-kicker span { margin-inline:8px; opacity:.55; }

/* Jeden pomarańczowy kadr. Otwór w płaszczyźnie ujawnia scenę pod spodem. */
.story-system { position:relative; z-index:7; height:180svh; }
.story-system-pin {
  position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden;
  background:var(--orange); border-radius:22px 22px 0 0;
  --hole:0px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 var(--hole), #000 calc(var(--hole) + 1px));
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 var(--hole), #000 calc(var(--hole) + 1px));
}
.story-system-grid { width:min(calc(100% - 64px),1240px); margin-inline:auto; }
.story-system h2 { max-width:1180px; font:520 clamp(60px,6vw,110px)/.98 "Bricolage",sans-serif; letter-spacing:-.071em; text-wrap:balance; }
.story-system h2 span { color:var(--paper); }
.story-system-note {
  position:absolute; right:max(32px,calc((100vw - 1240px)/2)); bottom:clamp(48px,8svh,92px);
  margin:0; color:var(--paper); font:italic 400 clamp(28px,2.3vw,36px)/.91 "Instrument",serif;
  letter-spacing:-.03em; text-align:center; transform:rotate(-9deg); transform-origin:50% 50%;
  -webkit-text-stroke:.3px currentColor; pointer-events:none;
}
.story-system-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:52px; margin-top:clamp(34px,5vh,64px); padding:0 19px 0 23px; border:1px solid var(--ink); border-radius:999px; color:var(--ink); font:600 15px/1 "Geist",sans-serif; text-decoration:none; }
.story-system-cta span { font-size:22px; font-weight:400; }
.story-system-cta:hover { background:var(--ink); color:var(--paper); }
.story-system-cta:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }

/* Po filmie: jedna decyzja, jeden przycisk, obraz znany z pierwszej sceny. */
.story-decision { position:relative; z-index:8; min-height:100svh; overflow:hidden; isolation:isolate; background:var(--ink); color:var(--paper); }
.story-decision-image { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% 50%; }
.story-decision-shade { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(18,15,12,.96) 0%,rgba(18,15,12,.91) 23%,rgba(18,15,12,.66) 49%,rgba(18,15,12,.08) 83%),linear-gradient(0deg,rgba(18,15,12,.55),transparent 28%); }
.story-decision-frame { width:min(calc(100% - 96px),1540px); min-height:100svh; margin-inline:auto; padding:clamp(100px,11vh,148px) 0 42px; display:flex; flex-direction:column; }
.story-decision .story-kicker { color:var(--orange); }
.story-decision-body { margin:auto 0; padding:36px 0 80px; }
.story-decision h2 { max-width:1020px; font:510 clamp(64px,7.2vw,128px)/.94 "Bricolage",sans-serif; letter-spacing:-.072em; text-wrap:balance; }
.story-decision h2 em { color:var(--orange); font:italic 400 1.04em/.9 "Instrument",serif; letter-spacing:-.045em; }
.story-decision-action { display:flex; flex-wrap:wrap; align-items:center; gap:19px 28px; margin-top:clamp(42px,6vh,76px); }
.story-decision-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-height:62px; padding:0 20px 0 27px; border-radius:999px; background:var(--orange); color:var(--paper); font:600 16px/1 "Geist",sans-serif; text-decoration:none; box-shadow:0 12px 42px rgba(0,0,0,.3); transition:background .2s,transform .2s; }
.story-decision-cta span { padding-left:18px; border-left:1px solid rgba(241,237,228,.5); font-size:24px; font-weight:400; }
.story-decision-cta:hover { background:var(--paper); color:var(--ink); transform:translateY(-2px); }
.story-decision-cta:focus-visible,.story-decision-next:focus-visible { outline:3px solid var(--orange); outline-offset:5px; }
.story-decision-action > span { color:#ddd4ca; font:500 12px/1.4 "Mono",monospace; }
.story-decision-next { align-self:flex-start; display:inline-flex; gap:18px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(241,237,228,.45); color:var(--paper); font:500 13px/1.2 "Mono",monospace; text-decoration:none; transition:border-color .2s,color .2s; }
.story-decision-next span { color:var(--orange); font-size:19px; }
.story-decision-next:hover { border-color:var(--orange); color:var(--orange); }

/* Jasna scena jest pod pomarańczową planszą, widoczna przez otwierający się okrąg. */
.story-film { position:relative; z-index:6; margin-top:-150svh; background:var(--paper); color:var(--ink); padding:calc(50svh + clamp(74px,7vw,110px)) 0 clamp(110px,12vw,176px); }
.story-film .story-container { scroll-margin-top:clamp(88px,10vh,120px); }
.story-film-head { display:flex; justify-content:space-between; align-items:end; gap:64px; margin-bottom:58px; }
.story-film .story-kicker { margin-bottom:29px; color:var(--orange-dark); }
.story-film h2 { max-width:810px; font:510 clamp(58px,6.3vw,108px)/.99 "Bricolage",sans-serif; letter-spacing:-.065em; }
.story-film h2 em { color:var(--orange-dark); font:italic 400 1.02em/1 "Instrument",serif; }
.story-film-head > p { max-width:340px; padding-bottom:8px; color:var(--ink-2); font:450 18px/1.5 "Geist",sans-serif; }
.story-film-frame { margin:0; border:1px solid rgba(24,19,15,.23); border-radius:18px; overflow:hidden; background:var(--ink); }
.story-film-top { display:flex; justify-content:space-between; padding:17px 23px; border-bottom:1px solid rgba(241,237,228,.2); color:#c9c0b5; font:600 11px/1 "Mono",monospace; letter-spacing:.12em; }
.story-film-top i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--orange); vertical-align:middle; }
.story-film-player { position:relative; aspect-ratio:16/9; }
.story-film video { display:block; width:100%; height:100%; object-fit:contain; background:#090807; }
.story-film-play { position:absolute; inset:0; display:block; width:100%; border:0; padding:0; cursor:pointer; background:var(--ink); color:var(--paper); text-align:left; }
.story-film-play[hidden] { display:none; }
.story-film-play img { display:block; width:100%; height:100%; object-fit:cover; }
.story-film-play-action { position:absolute; left:24px; bottom:24px; display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:7px 20px 7px 8px; border-radius:999px; background:var(--ink); color:var(--paper); font:600 15px/1 "Geist",sans-serif; box-shadow:0 10px 35px rgba(0,0,0,.25); }
.story-film-play-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--orange); color:var(--paper); font-size:14px; }
.story-film-play-action small { font:400 13px/1 "Mono",monospace; color:#c9c0b5; }
.story-film-play:hover .story-film-play-action { background:var(--orange-dark); }
.story-film-play:focus-visible { outline:3px solid var(--orange); outline-offset:-6px; }
.story-film figcaption { padding:14px 23px 18px; color:#c9c0b5; font:450 13px/1.45 "Geist",sans-serif; }

/* Statyczny opis usługi pod filmem: cztery odpowiedzialności w jednym widoku. */
.story-service { margin-top:clamp(72px,8vw,120px); padding-top:clamp(44px,5vw,72px); border-top:1px solid var(--rule); scroll-margin-top:clamp(88px,10vh,120px); }
.story-service-head { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,.5fr); align-items:end; gap:64px; }
.story-service-label { margin-bottom:22px; color:var(--orange-dark); font:600 11px/1.4 "Mono",monospace; letter-spacing:.11em; text-transform:uppercase; }
.story-service h2 { max-width:890px; font:510 clamp(44px,5vw,76px)/1.02 "Bricolage",sans-serif; letter-spacing:-.055em; text-wrap:balance; }
.story-service h2 em { color:var(--orange-dark); font:italic 400 1.06em/.98 "Instrument",serif; letter-spacing:-.025em; }
.story-service-intro { max-width:320px; padding-bottom:7px; color:var(--ink-2); font:450 18px/1.55 "Geist",sans-serif; }
.story-service-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; margin:clamp(48px,5vw,72px) 0 0; padding:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.story-service-steps li { min-width:0; padding:26px 28px 31px; border-right:1px solid var(--rule); }
.story-service-steps li:first-child { padding-left:0; }
.story-service-steps li:last-child { padding-right:0; border-right:0; }
.story-service-num { display:block; margin-bottom:34px; color:var(--orange-dark); font:600 12px/1 "Mono",monospace; letter-spacing:.12em; }
.story-service-steps h3 { margin:0 0 15px; font:530 clamp(26px,2.5vw,35px)/1.04 "Bricolage",sans-serif; letter-spacing:-.04em; }
.story-service-steps p { max-width:270px; color:var(--ink-2); font:450 16px/1.55 "Geist",sans-serif; text-wrap:pretty; }
.story-service-boundary { margin-top:21px; color:var(--ink-2); font:450 14px/1.5 "Geist",sans-serif; }
.story-service-boundary::before { content:""; display:inline-block; width:7px; height:7px; margin-right:10px; border-radius:50%; background:var(--orange-dark); vertical-align:2px; }
.story-steps-next { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:36px; }
.story-steps-next > span { color:var(--muted); font:500 13px/1.4 "Mono",monospace; }
.story-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:52px; padding:0 18px 0 23px; border:1px solid transparent; border-radius:999px; font:600 15px/1 "Geist",sans-serif; text-decoration:none; white-space:nowrap; transition:background .2s,color .2s,transform .2s; }
.story-cta span { padding-left:16px; border-left:1px solid currentColor; font-size:21px; font-weight:400; }
.story-cta:hover { transform:translateY(-2px); }
.story-cta:focus-visible { outline:3px solid var(--orange-dark); outline-offset:4px; }
.story-cta-dark { background:var(--ink); color:var(--paper); }
.story-cta-dark:hover { background:var(--orange-dark); color:var(--paper); }
.story-cta-paper { background:var(--paper); color:var(--ink); }
.story-cta-paper:hover { background:var(--orange); color:var(--ink); }
.story-steps-next { padding:28px 0 16px; border-top:1px solid var(--rule); }

/* Istniejący projekt kroków: jego makiety, fotografie i animacja pozostają. */
body.new-home .page > .wrap > #jak-wchodzimy { width:min(calc(100% - 64px),1240px); margin-inline:auto; }
body.new-home #jak-wchodzimy .s5-head { padding-top:12px; }
body.new-home #jak-wchodzimy .s5-minus small { display:block; margin-top:3px; color:var(--muted); font:400 10px/1.2 "Mono",monospace; }

/* Przycisk w wolnym narożniku hero, pod hasłem na telefonie. */
.story-hero-cta {
  position:absolute; right:0; bottom:clamp(70px,8vh,110px); display:inline-flex;
  align-items:center; justify-content:space-between; gap:24px; min-height:54px;
  padding:0 17px 0 21px; border-radius:999px; background:var(--orange-dark);
  color:var(--paper); font:600 15px/1 "Geist",sans-serif; text-decoration:none;
  white-space:nowrap; box-shadow:0 10px 30px rgba(197,53,15,.15);
  transition:transform .2s,background .2s;
}
.story-hero-cta span { padding-left:18px; border-left:1px solid rgba(241,237,228,.4); font-size:21px; font-weight:400; }
.story-hero-cta:hover { transform:translateY(-2px); background:var(--ink); }
.story-hero-cta:focus-visible { outline:2px solid var(--orange-dark); outline-offset:4px; }

@media(max-width:900px) {
  .story-decision-frame { width:min(calc(100% - 56px),1540px); }
  .story-decision h2 { font-size:clamp(62px,8.3vw,90px); }
  .story-hero-cta { min-height:50px; font-size:13px; gap:14px; padding:0 13px 0 16px; }
  .story-hero-cta span { padding-left:11px; font-size:17px; }
}
@media(max-width:760px) {
  body.new-home .new-intro-lead h1 { margin-bottom:0; }
  .story-hero-cta { position:static; margin-top:24px; min-height:48px; font-size:13px; }
  body.new-home .new-home-hero { padding-bottom:30px; }
  body.new-home .new-agent-feed { width:62%; height:224px; left:4%; bottom:5%; }
  body.new-home .new-agent-track { gap:4px; }
  body.new-home .new-agent-note { height:52px; padding:6px 7px; border-radius:9px; }
  body.new-home .new-agent-note strong { font-size:10px; line-height:1.16; }
  body.new-home .new-note-meta,body.new-home .new-note-time { font-size:7px; }
  body.new-home .new-agent-icon { width:15px; height:15px; }
  body.new-home .new-agent-icon svg { width:14px; height:14px; }
  body.new-home .new-owner-alert,body.new-home #new-email-alert,body.new-home #new-phone-alert { width:43%; padding:8px 9px; }
  body.new-home .new-owner-alert strong { font-size:11px; }
  body.new-home .new-owner-alert p { font-size:9px; }

  .story-container,body.new-home .page > .wrap > #jak-wchodzimy { width:min(calc(100% - 40px),1240px); }
  .story-system { height:160svh; }
  .story-system-pin { border-radius:16px 16px 0 0; }
  .story-system-grid { width:min(calc(100% - 40px),1240px); }
  .story-system h2 { font-size:clamp(43px,10.6vw,68px); line-height:1.01; letter-spacing:-.063em; overflow-wrap:normal; }
  .story-system-note { right:24px; bottom:44px; font-size:clamp(26px,7vw,33px); transform:rotate(-8deg); }
  .story-decision { min-height:100svh; }
  .story-decision-image { height:56%; object-position:64% 40%; }
  .story-decision-shade { background:linear-gradient(0deg,var(--ink) 0%,var(--ink) 18%,rgba(18,15,12,.96) 38%,rgba(18,15,12,.1) 73%),linear-gradient(90deg,rgba(18,15,12,.35),transparent 70%); }
  .story-decision-frame { width:min(calc(100% - 40px),1240px); min-height:100svh; padding:88px 0 32px; }
  .story-decision .story-kicker { font-size:10px; }
  .story-decision-body { margin-top:auto; margin-bottom:0; padding:clamp(220px,36svh,350px) 0 48px; }
  .story-decision h2 { max-width:650px; font-size:clamp(51px,10.8vw,74px); line-height:.97; }
  .story-decision-action { align-items:flex-start; flex-direction:column; gap:13px; margin-top:35px; }
  .story-decision-cta { min-height:55px; padding:0 16px 0 19px; font-size:14px; }
  .story-decision-cta span { font-size:20px; padding-left:13px; }
  .story-decision-action > span { font-size:10px; }
  .story-decision-next { font-size:11px; }
  .story-film { margin-top:-130svh; padding:calc(30svh + 72px) 0 112px; }
  .story-film-head { display:block; margin-bottom:32px; }
  .story-film h2 { font-size:clamp(52px,12vw,70px); }
  .story-film-head > p { margin-top:28px; font-size:16px; }
  .story-film-frame { border-radius:12px; }
  .story-film-top { padding:12px 13px; font-size:9px; }
  .story-film-play-action { left:12px; bottom:12px; min-height:44px; padding:5px 13px 5px 5px; gap:8px; font-size:12px; }
  .story-film-play-icon { width:34px; height:34px; font-size:11px; }
  .story-film-play-action small { font-size:11px; }
  .story-film figcaption { padding:12px 13px 16px; font-size:12px; }
  .story-service { margin-top:72px; padding-top:42px; }
  .story-service-head { display:block; }
  .story-service-label { margin-bottom:18px; font-size:10px; }
  .story-service h2 { font-size:clamp(39px,9.5vw,58px); }
  .story-service-intro { max-width:37ch; margin-top:24px; font-size:16px; }
  .story-service-steps { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:40px; }
  .story-service-steps li { padding:23px 16px 27px; }
  .story-service-steps li:first-child,.story-service-steps li:nth-child(3) { padding-left:0; }
  .story-service-steps li:nth-child(2),.story-service-steps li:last-child { padding-right:0; border-right:0; }
  .story-service-steps li:nth-child(-n+2) { border-bottom:1px solid var(--rule); }
  .story-service-num { margin-bottom:23px; font-size:11px; }
  .story-service-steps h3 { font-size:clamp(23px,5.8vw,30px); }
  .story-service-steps p { font-size:14px; line-height:1.5; }
  .story-service-boundary { font-size:13px; }
  .story-system-cta { min-height:48px; margin-top:28px; padding:0 17px; font-size:13px; }
  .story-steps-next { align-items:flex-start; flex-direction:column; gap:15px; }
  .story-cta { min-height:48px; font-size:13px; }
  .story-steps-next .story-cta { width:100%; max-width:100%; gap:10px; white-space:normal; line-height:1.2; }
  .story-steps-next .story-cta span { flex:0 0 auto; }
  .story-steps-next { margin-top:28px; }
}
@media(max-width:380px) {
  .story-decision h2 { font-size:clamp(43px,11.5vw,54px); }
}
@media(prefers-reduced-motion:reduce) {
  .story-system { height:100svh; }
  .story-system-pin { position:relative; -webkit-mask-image:none; mask-image:none; }
  .story-film { margin-top:0; padding-top:clamp(96px,11vw,168px); }
  .story-decision-cta,.story-decision-next { transition:none; }
}
html.dv-still .story-system { height:100svh; }
html.dv-still .story-system-pin { position:relative; -webkit-mask-image:none; mask-image:none; }
html.dv-still .story-film { margin-top:0; padding-top:clamp(96px,11vw,168px); }
