/* Project stories: quiet editorial space, full creative, visible thinking. */
.nb1-story{position:relative;display:grid;grid-template-columns:1.05fr .8fr;gap:9%;align-items:center;padding:80px 0 95px;margin-top:25px;border-top:1px solid #1b4d8c25}
.nb1-story-copy{position:relative;z-index:1;max-width:510px}
.nb1-story-kicker{color:var(--blue);font-size:12px;margin-bottom:22px}
.nb1-story h3{font:400 clamp(40px,4.9vw,67px)/1.08 var(--serif);letter-spacing:-.055em;margin:0 0 25px}
.nb1-story-copy>p:not(.nb1-story-kicker){max-width:390px;font-size:14px;line-height:1.85;color:var(--muted)}
.nb1-story-facts{display:flex;gap:30px;margin:28px 0 24px;padding-top:22px;border-top:1px solid #1b4d8c22}
.nb1-story-facts>div{display:flex;flex-direction:column;gap:2px}.nb1-story-facts dt{font:400 29px/1.2 var(--serif);color:var(--blue)}.nb1-story-facts dd{margin:0;font-size:10px;color:var(--muted)}
.nb1-story .project-view{font-size:13px;margin:0}
.nb1-story-visual{margin:0;position:relative;max-width:390px;justify-self:center;width:100%}
.nb1-story-visual:before{content:'';position:absolute;inset:-8% -25%;background:url('/assets/tidal-dawn.png') center/cover;opacity:.18;mask-image:radial-gradient(ellipse,#000 25%,transparent 70%);pointer-events:none}
.nb1-story-visual img{position:relative;width:100%;max-height:440px;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:48% 48% 2px 2px}
.nb1-story-visual figcaption{position:relative;margin-top:13px;font-size:10px;color:var(--muted)}
/* A continuous painted journey. Every source creative remains intact. */
#project-dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;border-radius:0;padding:0;background:var(--bg);box-shadow:none;overscroll-behavior:contain;scrollbar-gutter:stable;--story-brush:url('/assets/brush-stewart-v17.png');--story-landscape:url('/assets/portfolio-river.png')}
#project-dialog[data-project=moment]{--story-brush:url('/assets/brush-moment-v17.png');--story-landscape:url('/assets/tidal-dawn.png')}
#project-dialog[data-project=nb1]{--story-brush:url('/assets/brush-nb1-v17.png');--story-landscape:url('/assets/painted-lakeshore.png')}
#project-dialog[data-project=newsmile]{--story-brush:url('/assets/brush-newsmile-v17.png');--story-landscape:url('/assets/painted-lakeshore.png')}
#project-dialog::backdrop{background:var(--bg)}
#project-dialog[open]{animation:story-arrive .3s ease-out}
#project-dialog .close-dialog{position:fixed;top:16px;right:32px;min-width:85px;height:44px;width:auto;padding:8px 0 8px 15px;background:var(--bg);border-radius:0;font:400 12px/1 var(--sans);color:var(--ink);z-index:6}
.story-top{position:sticky;top:0;z-index:5;display:flex;gap:30px;justify-content:space-between;padding:29px 160px 25px 5vw;background:var(--bg);border-bottom:1px solid #1b4d8c18;color:var(--blue);font-size:11px}
.story-opening{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:38px 7vw 30px;max-width:1440px;margin:auto}
#project-dialog .story-category{font-size:11px;color:var(--blue);margin:0 0 15px;line-height:1.6}
#project-dialog h2{font:400 clamp(42px,5.1vw,72px)/1.05 var(--serif);letter-spacing:-.055em;margin:0;outline:none}
#project-dialog .story-brief{font-size:13px;line-height:1.8;color:var(--muted);max-width:290px;margin:0}
#project-dialog .story-proof{font-size:11px;color:var(--blue);line-height:1.8;margin:12px 0 0}
.story-chapter-nav{position:sticky;top:70px;z-index:4;display:flex;justify-content:center;gap:30px;padding:0 24px;background:var(--bg);border-bottom:1px solid #1b4d8c16}
.story-chapter-nav button{font:400 11px/1.5 var(--sans);color:var(--muted);border:0;border-bottom:1px solid transparent;padding:14px 0;background:none;min-height:44px;cursor:pointer}
.story-chapter-nav button[aria-current=true]{border-color:var(--blue);color:var(--blue)}
.story-journey{position:relative;isolation:isolate;overflow:clip;--river-progress:0}
.story-world{position:absolute;inset:0;pointer-events:none;z-index:-3;background-image:var(--story-landscape);background-position:center;background-size:auto 100%;opacity:.07;mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent);transform:translateY(var(--world-drift,0px))}
.story-scene{position:relative;min-height:94svh;padding:52px 7vw 72px;scroll-margin-top:122px}
.story-scene:first-of-type{min-height:74svh;padding-top:32px}
.story-scene-inner{max-width:1180px;margin:auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:9%;align-items:center}
.story-scene-copy{max-width:310px;position:relative;z-index:1;justify-self:center}
#project-dialog .story-scene-copy h3{font:400 clamp(27px,2.8vw,38px)/1.16 var(--serif);letter-spacing:-.045em;margin:0;text-wrap:balance}
.story-scene-creative{position:relative;min-width:0;width:100%;margin:0;isolation:isolate;transform:translateY(var(--media-drift,0px))}
.scene-1 .story-scene-copy{grid-column:2;grid-row:1}.scene-1 .story-scene-creative{grid-column:1;grid-row:1}
.scene-1 .story-scene-inner{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr)}
.story-media{position:relative}
.story-media-frame{aspect-ratio:var(--asset-ratio);height:auto;max-width:100%;width:min(100%,calc(min(62svh,620px) * var(--asset-factor)));margin:0 auto;position:relative}
.story-media-frame video,.story-media-frame img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;border-radius:0;background:none;box-shadow:none}
.story-edge-paint{position:absolute;display:block;pointer-events:none;z-index:0}
.story-scene-creative figcaption{max-width:430px;margin:36px auto 0;display:flex;align-items:baseline;gap:22px;color:var(--muted);font-size:10px;line-height:1.7}
.story-scene-creative figcaption>span{color:var(--blue);white-space:nowrap}
#project-dialog .story-scene-creative figcaption p{font-size:10px;line-height:1.7;margin:0}
.story-player{display:flex;align-items:center;gap:13px;margin:28px auto 0;min-height:44px;max-width:520px}
.story-player button{background:none;border:0;padding:0;min-height:44px;font:400 10px var(--sans);color:var(--blue);white-space:nowrap;cursor:pointer}
.story-play{display:flex;gap:8px;align-items:center;min-width:76px}.story-play span{font-size:18px}
.story-seek{flex:1;min-width:20px;width:100%;height:28px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.story-seek::-webkit-slider-runnable-track{height:1px;background:#1b4d8c55}
.story-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;background:var(--blue);border:0;border-radius:50%;margin-top:-3.5px}
.story-seek::-moz-range-track{height:1px;background:#1b4d8c55}.story-seek::-moz-range-thumb{width:8px;height:8px;background:var(--blue);border:0;border-radius:50%}
.story-time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:28px}

.story-invitation{max-width:990px;margin:0 auto;padding:45px 7vw 70px;text-align:center;position:relative}
.story-invitation h3{font:400 clamp(35px,4vw,54px)/1.12 var(--serif);letter-spacing:-.05em;margin:0 auto 24px;max-width:650px}
#project-dialog .story-invitation>p:not(.story-category){max-width:460px;margin:0 auto 24px;font-size:13px;line-height:1.8;color:var(--muted)}
.story-enquire{font:400 13px var(--sans);padding:14px 0;border:0;border-bottom:1px solid var(--blue);color:var(--blue);background:none;cursor:pointer;min-height:44px}.story-enquire span{margin-left:30px}
.story-source{display:block;width:fit-content;font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:5px;min-height:44px;padding:16px 0;margin:8px auto 0}
.story-footer{max-width:1280px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 auto;padding:28px 7vw 50px;border-top:1px solid #1b4d8c20}
.story-footer button{border:0;background:none;color:var(--blue);text-align:left;cursor:pointer;padding:8px 0;min-height:44px}
.story-approach{font:400 12px/1.6 var(--sans);max-width:230px}.story-next{display:flex;flex-direction:column;gap:8px}.story-next small{font:400 10px var(--sans);color:var(--muted)}.story-next>span{font:400 25px var(--serif)}
#project-dialog button:focus-visible,.story-seek:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.partnership-steps .use-case-link{border:0;background:none;padding:10px 0;min-height:44px;font:400 12px var(--sans);color:var(--blue);cursor:pointer;margin-top:10px}
@keyframes story-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:700px){
 .nb1-story{grid-template-columns:1fr;gap:32px;padding:50px 0 65px;margin-top:0}.nb1-story h3{font-size:44px}.nb1-story-copy>p:not(.nb1-story-kicker){font-size:13px}.nb1-story-visual{max-width:280px}.nb1-story-visual img{max-height:340px}.nb1-story-facts{gap:32px}
 #project-dialog .close-dialog{right:20px;top:12px;font-size:11px;min-width:70px}
 .story-top{padding:27px 110px 25px 24px;font-size:10px}.story-top>span:last-child{display:none}
 .story-opening{display:block;padding:26px 24px}
 #project-dialog h2{font-size:clamp(38px,10vw,54px)}#project-dialog .story-brief{font-size:12px;max-width:310px;margin-top:15px}
 #project-dialog .story-category{font-size:10px;margin-bottom:12px}
 .story-chapter-nav{top:68px;gap:22px;padding:0 18px}.story-chapter-nav button{font-size:10px}
 .story-scene,.story-scene:first-of-type{min-height:0;padding:36px 24px 65px;scroll-margin-top:118px}
 .story-scene-inner,.scene-1 .story-scene-inner{display:flex;flex-direction:column;gap:24px}
 .story-scene-copy{width:100%;max-width:none}
 #project-dialog .story-scene-copy h3{font-size:28px;max-width:340px;text-wrap:pretty}
 .story-media-frame{height:auto;width:min(100%,calc(58svh * var(--asset-factor)));max-width:100%;aspect-ratio:var(--asset-ratio)}
 .story-media-frame img,.story-media-frame video{max-height:58svh;object-fit:contain}
 .story-world{opacity:.035;background-size:auto 100%}
 .story-scene-creative figcaption{display:block;margin-top:25px;font-size:10px;text-align:center}.story-scene-creative figcaption>span{display:block;margin-bottom:4px}
 #project-dialog .story-scene-creative figcaption p{font-size:10px}
 .story-player{gap:9px;margin-top:22px}.story-player button{font-size:10px}.story-play{min-width:72px}.story-time{font-size:9px;min-width:25px}
 .story-invitation{padding:22px 24px 42px}.story-invitation h3{font-size:34px}#project-dialog .story-invitation>p:not(.story-category){font-size:12px}
 .story-footer{padding:20px 24px 35px;align-items:flex-start;flex-direction:column;gap:15px}.story-next>span{font-size:24px}
}
@media(prefers-reduced-motion:reduce){#project-dialog[open]{animation:none}.story-scene-creative,.story-world{transform:none!important}}
.motion-paused .story-scene-creative,.motion-paused .story-world{transform:none!important}

/* A faint horizon connects each scene to the wider painted setting. */
.story-scene:before{content:'';position:absolute;inset:20% 0 -8%;z-index:-1;pointer-events:none;background:var(--story-landscape) center/cover no-repeat;opacity:.055;mask-image:linear-gradient(transparent,#000 60%,transparent)}
@media(max-width:700px){.story-scene:before{opacity:.025}}
