/* Project stories use the same ink, cobalt and open composition as the home page. */
.n-case{background:var(--paper);color:var(--ink)}
.n-case>.header{height:86px;border-color:var(--line)}
.n-case .brand-symbol{background:#5675f2;color:#f1f3fb}
.n-case .brand-dev{color:var(--blue)}
.n-case .header-contact{border-color:#77809a;transition:background .2s,color .2s,border-color .2s}
.n-case .header-contact:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.n-case .skip{background:#4565dc;color:#fff}
.n-case :focus-visible{outline-color:var(--blue)}
.n-case .case-main{padding-block:50px 90px}
.n-case .back-link{display:inline-flex;align-items:center;gap:12px;padding-block:7px;color:var(--muted);transition:color .2s,border-color .2s}
.n-case .back-link::before{content:'←';color:var(--blue);transition:transform .25s}
.n-case .back-link:hover{color:var(--ink);border-color:var(--blue)}
.n-case .back-link:hover::before{transform:translateX(-4px)}
.n-case .case-top{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(35px,6vw,85px);margin-top:50px}
.n-case .case-top>div,.n-case .case-meta{min-width:0}
.n-case .case-top h1{font-size:clamp(3.3rem,6vw,6rem);font-weight:500;line-height:1.04;letter-spacing:-.06em}
.n-case .case-project-brand{color:var(--blue);font-size:1rem}
.n-case .case-lead{color:#bbc3d5;line-height:1.75;font-size:1.05rem}
.n-case .case-status{display:flex;align-items:center;gap:9px;color:var(--blue);font-size:.8rem}
.n-case .case-status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.n-case .case-meta{margin:0;gap:22px;padding-top:25px}
.n-case .case-meta dt{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.n-case .case-meta dd{color:#dbe0ed;font-size:.9rem;line-height:1.7}
.n-case .case-art{border-radius:0;margin-top:55px;background:#151a26;isolation:isolate}
.n-case .case-brand-panel,.n-case .case-brand-panel.vp{position:relative;isolation:isolate;overflow:hidden;min-height:340px;padding:clamp(30px,5vw,65px);gap:45px;background:#172344;color:var(--ink)}
.n-case .case-brand-panel.vp{background:#223774}
.n-case .case-brand-panel::before,.n-case .case-brand-panel::after{content:'';position:absolute;z-index:-1;width:520px;height:520px;right:-50px;top:50%;border:1px solid #91aaff30;border-radius:50%;transform:translateY(-50%) rotate(-28deg);pointer-events:none}
.n-case .case-brand-panel::after{width:300px;border-color:#91aaff40}
.n-case .case-brand-name{max-width:100%;color:#dce5ff;font-size:clamp(3.2rem,6.4vw,6.4rem);font-weight:500;letter-spacing:-.07em}
.n-case .case-brand-panel p{position:relative;max-width:340px;font-size:.95rem;color:#c1cdef;opacity:1;line-height:1.75}
.n-case .case-body{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(40px,6vw,80px);margin-top:80px}
.n-case .case-outline{position:sticky;top:44px;align-self:start;gap:0;align-items:flex-start}
.n-case .case-outline a{position:relative;display:inline-block;padding-block:11px;color:var(--muted);font-size:.8rem;transition:color .2s}
.n-case .case-outline a::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.n-case .case-outline a:hover,.n-case .case-outline a:focus-visible{color:var(--ink)}
.n-case .case-outline a:hover::after,.n-case .case-outline a:focus-visible::after{transform:scaleX(1)}
.n-case .case-story{min-width:0}
.n-case .case-story section{padding-bottom:46px;margin-bottom:46px;scroll-margin-top:35px}
.n-case .case-story section:target>h2{color:var(--blue)}
.n-case .case-story h2{font-size:clamp(1.85rem,2.5vw,2.5rem);letter-spacing:-.045em;font-weight:500;line-height:1.15;margin-bottom:23px;transition:color .25s}
.n-case .case-story p,.n-case .case-components dd{color:#b4bdd0;line-height:1.8}
.n-case .case-components dt{font-size:1.1rem;line-height:1.4;color:var(--ink)}
.n-case .case-components>div+div{margin-top:28px;padding-top:28px}
.n-case .case-technologies{margin-top:32px}
.n-case .case-technologies h3{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}
.n-case .case-technologies ul{gap:12px 20px;margin-top:16px;color:#c7d5ff}
.n-case .case-technologies li{font-size:.9rem;line-height:1.5}
.n-case .text-link{color:var(--blue);border-color:#91aaff60;transition:color .2s,border-color .2s}
.n-case .text-link:hover{color:var(--ink);border-color:var(--ink)}
.n-case .case-next{margin-top:15px;padding-top:35px}
.n-case .case-next p{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}
.n-case .case-next a{display:inline-flex;align-items:baseline;justify-content:space-between;gap:24px;max-width:100%;font-size:clamp(1.2rem,2vw,1.8rem);letter-spacing:-.03em;line-height:1.4;border-color:#91aaff50;transition:color .2s,border-color .2s}
.n-case .case-next a::after{content:'↗';color:var(--blue);flex:none;transition:transform .25s}
.n-case .case-next a:hover{color:var(--blue);border-color:var(--blue)}
.n-case .case-next a:hover::after{transform:translate(3px,-3px)}
.n-case .case-contact{background:#151c2e;border-top:1px solid var(--line);padding-block:85px 90px}
.n-case .case-contact .shell{gap:65px}
.n-case .case-contact h2{font-size:clamp(2.7rem,4.8vw,4.5rem);font-weight:500;letter-spacing:-.055em;line-height:1.05}
.n-case .case-contact h2 em{color:var(--blue)}
.n-case .case-contact p{margin-top:25px;max-width:570px;color:#b4bdd0;line-height:1.75}
.n-case .case-contact .primary{flex:none;background:#4565dc;color:#fff;transition:transform .25s,background .25s}
.n-case .case-contact .primary:hover{background:#4969df}
.n-case>.footer{border-top:0}
@media(prefers-reduced-motion:no-preference){
  .n-case .case-top{animation:case-intro .7s cubic-bezier(.16,1,.3,1) both}
  .n-case .case-art{animation:case-intro .9s .1s cubic-bezier(.16,1,.3,1) both}
}
@keyframes case-intro{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.n-case .case-brand-panel{gap:28px}.n-case .case-contact .shell{gap:35px}.n-case .case-body{gap:40px}}
@media(max-width:760px){
  .n-case>.header{height:74px}.n-case .brand{font-size:1.05rem}.n-case .brand-symbol{width:28px;height:28px;font-size:1.15rem}.n-case .header-contact{font-size:.65rem;padding:9px 11px}
  .n-case .case-main{padding-block:28px 60px}.n-case .back-link{font-size:.75rem}
  .n-case .case-top{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:35px}
  .n-case .case-top h1{font-size:clamp(2.5rem,8vw,3.8rem);line-height:1.06;overflow-wrap:normal}
  .n-case .case-project-brand{font-size:.9rem}.n-case .case-lead{font-size:1rem;margin-top:22px}
  .n-case .case-meta{padding-top:22px;gap:22px}.n-case .case-meta dd{font-size:.85rem}
  .n-case .case-art{margin-top:35px}.n-case .case-brand-panel,.n-case .case-brand-panel.vp{min-height:245px;padding:30px;gap:28px;flex-direction:column;align-items:flex-start}
  .n-case .case-brand-name{font-size:clamp(2.5rem,9vw,4rem)}.n-case .case-brand-panel p{font-size:.875rem;max-width:32ch}
  .n-case .case-brand-panel::before{right:-265px}.n-case .case-brand-panel::after{right:-120px}
  .n-case .case-body{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:32px}.n-case .case-outline{position:static;flex-direction:row;gap:0 23px;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--line)}
  .n-case .case-outline a{font-size:.75rem;padding-block:12px}.n-case .case-outline a::after{bottom:7px}
  .n-case .case-story section{padding-bottom:32px;margin-bottom:32px}.n-case .case-story h2{font-size:1.85rem}
  .n-case .case-story p,.n-case .case-components dd{font-size:.9375rem;line-height:1.8}.n-case .case-components dt{font-size:1.05rem}
  .n-case .case-next{gap:20px;padding-top:28px}.n-case .case-next a{font-size:1.25rem}
  .n-case .case-contact{padding-block:58px 62px}.n-case .case-contact .shell{display:block}.n-case .case-contact h2{font-size:clamp(2.4rem,9.5vw,3.5rem)}.n-case .case-contact p{font-size:.9375rem}.n-case .case-contact .button{margin-top:28px}
}
@media(max-width:360px){.n-case .brand-dev{display:none}.n-case .case-brand-panel,.n-case .case-brand-panel.vp{padding:24px}.n-case .case-top h1{font-size:2.5rem}}
@media(prefers-reduced-motion:reduce){.n-case .back-link:hover::before,.n-case .case-next a:hover::after{transform:none}}
@media(max-width:760px){
  .n-case .header-contact,.n-case .brand,.n-case .back-link,.n-case .case-outline a,.n-case .text-link{min-height:44px;display:inline-flex;align-items:center}
}