/* Northspire pages: page heads, term-sheet card, services, catalog, checkout, contacts, privacy, 404. */
@layer pages{
  /* ---------- shared page head ---------- */
  .phead{padding-block:clamp(2.5rem,1.5rem + 5vw,6rem) clamp(2rem,1.5rem + 3vw,4rem);border-bottom:1px solid var(--line)}
  .phead h1{font-size:var(--step-5);margin-top:var(--s-4);max-width:16ch}
  .phead--sm h1{font-size:var(--step-4)}
  .phead .lead{margin-top:var(--s-5)}
  .phead__u{margin-top:var(--s-5)}
  .phead__n{margin-top:var(--s-5);max-width:60ch}
  .phead__grid{display:grid;gap:var(--s-7);align-items:end}
  @media (min-width:1280px){.phead__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8)}.phead__grid h1{max-width:12ch}}
  .note-slip{background:var(--paper);padding:var(--s-5);display:grid;gap:var(--s-3);justify-items:start;margin:6px}
  .sec-head{display:grid;gap:var(--s-4);margin-bottom:var(--s-7)}
  .sec-head h2,.sec-h{font-size:var(--step-4);max-width:18ch}
  .sec-h{margin-bottom:var(--s-7)}
  .sec-head--row{grid-template-columns:minmax(0,1fr);align-items:end}
  @media (min-width:768px){.sec-head--row{grid-template-columns:minmax(0,1fr) auto}.sec-head--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}}
  .empty{display:grid;justify-items:center;text-align:center;gap:var(--s-4);padding-block:var(--s-8)}
  .empty h2{font-size:var(--step-3)}
  .empty__chips{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;list-style:none;padding:0}

  /* ---------- term-sheet card ---------- */
  .ts{display:grid;grid-template-columns:minmax(110px,34%) minmax(0,1fr);gap:var(--s-5);padding:var(--s-4);background:var(--paper);align-content:start;transition:box-shadow .25s var(--ease);margin:6px}
  .ts>*{min-width:0}
  @media (hover:hover){.ts:hover{box-shadow:var(--shadow-lift)}}
  .ts__img .spire{--ar:4/5}
  .ts__body{display:grid;gap:var(--s-3);align-content:start}
  .ts__t{font-size:var(--step-1);line-height:1.1;letter-spacing:-.01em;min-height:2.2em}
  .ts__short{color:var(--ink-2);font-size:.9375rem;line-height:1.5}
  .ts__specs{display:grid;gap:6px;font-size:.8125rem;line-height:1.35}
  .ts__specs>div{display:flex;gap:.5rem;align-items:baseline}
  .ts__specs dt{display:flex;flex:1;align-items:baseline;gap:.5rem;color:var(--ink-2);font:500 .75rem/1.3 var(--font-mono);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
  .ts__specs dt::after{content:"";flex:1;min-width:8px;border-bottom:1px dotted var(--line-strong);transform:translateY(-.2em)}
  .ts__specs dd{max-width:62%;text-align:right;font-weight:500}
  .ts__more{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s var(--ease),visibility .3s}
  .ts__more-in{overflow:hidden;min-height:0;display:grid;gap:var(--s-3);font-size:.9375rem}
  .ts.is-open .ts__more{grid-template-rows:1fr;visibility:visible}
  .ts__defs{display:grid;gap:var(--s-2);font-size:.875rem;padding-top:var(--s-3);border-top:1px solid var(--line)}
  .ts__defs dt{font:500 .75rem/1.3 var(--font-mono);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
  .ts__defs dd{margin:0 0 var(--s-2)}
  .ts__foot{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:center;justify-content:space-between;margin-top:var(--s-2)}
  .ts__foot .price{font-size:var(--step-2)}
  .ts__act{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center}
  .ts [data-toggle-more]::after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.5em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .2s}
  .ts.is-open [data-toggle-more]::after{transform:translateY(.05em) rotate(-135deg)}
  .no-js .ts__more{grid-template-rows:1fr;visibility:visible}
  .no-js [data-toggle-more]{display:none}
  .btn.is-added{background:var(--ok)}
  @media (max-width:559px){
    .ts{grid-template-columns:minmax(0,1fr)}
    .ts__img .spire{--ar:4/3;--peak:10%}
  }
  .ts--v{grid-template-columns:minmax(0,1fr)}
  .ts--v .ts__img .spire{--ar:4/3;--peak:10%}
  .ts--lg{grid-template-columns:minmax(0,1fr)}
  .ts--lg .ts__t{font-size:var(--step-3);min-height:0}
  .ts--lg .ts__img .spire{--ar:4/3;--peak:10%}
  @media (min-width:768px){.ts--lg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--s-5)}.ts--lg .ts__img .spire{--ar:auto;--peak:14%;height:100%;min-height:360px}}

  /* ---------- services ---------- */
  .svc-grid{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr)}
  @media (min-width:768px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}}
  @media (min-width:1280px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7)}}
  .svc{background:var(--paper);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);margin:6px;min-width:0}
  .svc .spire{width:100%}
  .svc__no{margin-top:var(--s-2)}
  .svc__t{font-size:var(--step-2);line-height:1.05}
  .svc__d{color:var(--ink-2);font-size:.9375rem}
  .svc__f{list-style:none;padding:0;display:grid;gap:var(--s-2);font-size:.9375rem}
  .svc__f li{position:relative;padding-left:1.25rem}
  .svc__f li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--uv)}
  .svc__foot{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line);display:grid;gap:var(--s-3)}
  .svc__btn{width:100%}
  .steps{list-style:none;padding:0;display:grid;gap:var(--s-6);position:relative}
  .steps li{display:grid;gap:var(--s-2);padding-left:var(--s-5);border-left:1px solid var(--line-strong)}
  .steps h3{font-size:var(--step-2)}
  .steps li .num{color:var(--uv)}
  @media (min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}.steps li{padding:var(--s-5) 0 0;border-left:0;border-top:1px solid var(--line-strong)}}
  .note-band{display:grid;gap:var(--s-4);justify-items:start;max-width:74ch}
  .note-band__h{font-size:var(--step-3)}

  /* ---------- catalog ---------- */
  .cbanner{display:grid;gap:var(--s-5);margin-top:var(--s-6);align-items:center}
  .cbanner__ph{width:100%;--ar:16/10;--peak:10%}
  .cbanner__h{font:600 var(--step-3)/1 var(--font-display);letter-spacing:-.015em}
  .cbanner__t{display:grid;gap:var(--s-3);justify-items:start;max-width:56ch}
  @media (min-width:768px){.cbanner{grid-template-columns:280px minmax(0,1fr);gap:var(--s-6)}.cbanner__ph{--ar:4/5;--peak:18%}}
  .cbar{position:sticky;top:var(--hd);z-index:50;background:rgb(246 244 248 / .97);border-bottom:1px solid var(--line);transition:top .28s var(--ease)}
  .hd-off .cbar{top:0}
  .cbar__in{display:flex;gap:var(--s-3);align-items:center;padding-block:var(--s-2)}
  .cbar__chips{display:flex;gap:var(--s-2);overflow-x:auto;scroll-snap-type:x proximity;list-style:none;padding:2px 24px 2px 0;margin:0;flex:1;min-width:0;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .cbar__chips::-webkit-scrollbar{display:none}
  .cbar__chips li{scroll-snap-align:start;flex:none}
  .cbar__btn{flex:none;min-height:44px}
  @media (max-width:559px){.cbar__btn{font-size:0;gap:0;padding:0 14px}.cbar__btn .icon{width:20px;height:20px}}
  @media (min-width:1280px){.cbar,.sheet{display:none!important}}
  .sheet{margin:0 0 0 auto;height:100svh;width:min(100%,420px);background:var(--paper);overflow:auto}
  .sheet[open]{animation:sheet-in .28s var(--ease)}
  @keyframes sheet-in{from{transform:translateX(30px);opacity:0}}
  .sheet__in{padding:var(--s-5);display:grid;gap:var(--s-5)}
  .cat__grid{display:grid;gap:var(--s-6)}
  .cat__main{min-width:0}
  .cat__side{display:none}
  @media (min-width:1280px){
    .cat__grid{grid-template-columns:280px minmax(0,1fr);gap:var(--s-7);padding-top:var(--s-4)}
    .cat__side{display:grid;gap:var(--s-6);align-content:start;position:sticky;top:calc(var(--hd) + 24px);align-self:start;max-height:calc(100svh - var(--hd) - 48px);overflow:auto}
  }
  .flt{display:grid;gap:var(--s-4)}
  .flt__q{display:grid;grid-template-columns:minmax(0,1fr) 52px}
  .flt__q .btn{padding:0;min-height:52px}
  .flt__act{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap}
  .js .nojs-only{display:none}
  .cat__sectors ul{list-style:none;padding:0;display:grid;margin-top:var(--s-3)}
  .cat__sectors a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);align-items:center;min-height:44px;padding:6px 10px;text-decoration:none;border-bottom:1px solid var(--line);position:relative}
  .cat__sectors li:first-child a{grid-template-columns:minmax(0,1fr) auto}
  .cat__sectors a:hover{background:var(--haze)}
  .cat__sectors a[aria-current]{background:var(--lilac);color:var(--uv-deep);font-weight:600}
  .cat__sectors a[aria-current]::before{content:"";position:absolute;left:-1px;top:50%;width:5px;height:14px;transform:translateY(-50%);background:var(--uv);clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%)}
  .cat__sectors .num{font-size:.8125rem}
  .cat__disc{font-size:.8125rem;color:var(--ink-2);line-height:1.5}
  .tags{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin-bottom:var(--s-5)}
  .tag{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 12px;background:var(--lilac);color:var(--uv-deep);font:500 .8125rem/1 var(--font-mono);text-decoration:none}
  .tag:hover{background:var(--platinum);color:var(--ink)}
  .ts-grid{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr);align-items:stretch}
  @media (min-width:1280px){.ts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-grid .ts:nth-child(even){margin-top:2rem}}
  @media (min-width:1280px){.ts-grid .ts__t{font-size:var(--step-1)}}
  .pager{display:flex;align-items:center;justify-content:center;gap:var(--s-2);margin-top:var(--s-8);flex-wrap:wrap}
  .pager__a,.pager__n a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);text-decoration:none;font:500 .8125rem/1 var(--font-mono);background:var(--paper)}
  .pager__n{display:flex;gap:var(--s-2);list-style:none;padding:0}
  .pager__n a{padding:0}
  .pager__a:hover,.pager__n a:hover{background:var(--haze)}
  .pager__n a[aria-current]{background:var(--uv);color:var(--paper);border-color:var(--uv)}
  .pager__a.is-off{opacity:.45}
  .pager__e{display:grid;place-items:center;min-width:24px}
  .pager__m{display:none;font-size:.8125rem}
  @media (max-width:559px){.pager__n{display:none}.pager__m{display:inline}.pager{justify-content:space-between}}

  /* ---------- checkout ---------- */
  .co{display:grid;gap:var(--s-6);align-items:start}
  @media (min-width:1280px){.co{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8)}.co-form{grid-column:1;grid-row:1}.co-sum{grid-column:2;grid-row:1;position:sticky;top:calc(var(--hd) + 24px)}}
  .co-form{display:grid;gap:var(--s-6)}
  .co-sec{border:0;padding:0;min-width:0;display:grid;gap:var(--s-4)}
  .co-sec legend{padding:0;width:100%}
  .co-row{display:grid;gap:var(--s-4)}
  @media (min-width:768px){.co-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .co-submit{width:100%}
  @media (min-width:768px){.co-submit{width:auto;justify-self:start;min-width:280px}}
  .co-disc{font-size:.875rem;color:var(--ink-2);max-width:60ch}
  .co-sum{background:var(--paper);margin:6px}
  .co-sum summary{display:flex;align-items:center;gap:var(--s-4);justify-content:space-between;min-height:56px;padding:0 var(--s-4);cursor:pointer;list-style:none;font:600 var(--step-0)/1.2 var(--font-text)}
  .co-sum summary::-webkit-details-marker{display:none}
  .co-sum summary .num{margin-left:auto}
  .co-sum summary .chev{transition:transform .2s}
  .co-sum[open] summary .chev{transform:rotate(180deg)}
  .co-sum__b{padding:0 var(--s-4) var(--s-4);display:grid;gap:var(--s-3)}
  .co-sum__l{list-style:none;padding:0;display:grid}
  .co-sum__l li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:var(--s-3);padding:var(--s-4) 0;border-top:1px solid var(--line);transition:opacity .2s}
  .co-sum__l li.is-busy{opacity:.6}
  .co-sum__lt{font-size:.9375rem}
  @media (min-width:1280px){.co-sum summary{pointer-events:none}.co-sum summary .chev{display:none}}
  .co-done{background:var(--paper);padding:var(--s-6);display:grid;gap:var(--s-5);justify-items:start;margin:6px}
  .co-done h2{font-size:var(--step-5)}
  .co-next{list-style:none;padding:0;display:grid;gap:var(--s-3)}
  .co-next li{display:flex;gap:var(--s-4);align-items:baseline}
  .co-next .num{color:var(--uv)}

  /* ---------- contacts ---------- */
  .ct-h{font-size:var(--step-5);max-width:none!important;line-height:.98}
  .ct-h span{display:block}
  @media (max-width:559px){.ct-h{font-size:var(--step-4)}}
  .ct{display:grid;gap:var(--s-7)}
  @media (min-width:1280px){.ct{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8)}.ct__f{grid-column:1/-1}}
  .dl{display:grid}
  .dl>div{display:grid;gap:4px;padding:var(--s-4) 0;border-top:1px solid var(--line)}
  .dl>div:last-child{border-bottom:1px solid var(--line)}
  .dl dt{font:500 var(--step--1)/1.2 var(--font-mono);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
  .dl dd{font-size:var(--step-1);overflow-wrap:anywhere}
  .dl address{font-style:normal}
  .map{margin:6px;background:var(--haze)}
  .map__box{position:relative;aspect-ratio:1/1;overflow:hidden}
  @media (min-width:768px){.map__box{aspect-ratio:4/3}}
  @media (min-width:1920px){.map__box{aspect-ratio:16/10}}
  .map__box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .map__face{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--s-4);padding:var(--s-5);text-align:center;
    background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/48px 48px,var(--haze)}
  .map__pin{width:14px;height:44px;background:linear-gradient(90deg,var(--uv) 50%,var(--lilac) 50%);clip-path:polygon(50% 0,100% 35%,50% 100%,0 35%)}
  .map__a{font:600 var(--step-1)/1.25 var(--font-display);max-width:20ch}
  .map__n{font-size:.8125rem;color:var(--ink-2);max-width:34ch}
  .ct__f{background:var(--paper);padding:var(--s-5);margin:6px}
  @media (min-width:768px){.ct__f{padding:var(--s-7)}}
  .ct__fields{display:grid;gap:var(--s-4)}
  @media (min-width:768px){.ct__fields{grid-template-columns:repeat(2,minmax(0,1fr))}.ct__wide{grid-column:1/-1}}

  /* ---------- privacy ---------- */
  .pv__grid{display:grid;gap:var(--s-6);padding-top:var(--s-6)}
  @media (min-width:1280px){.pv__grid{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s-8)}.pv__toc{position:sticky;top:calc(var(--hd) + 24px);align-self:start}}
  .pv__det summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
  .pv__toc ol{list-style:none;padding:0;display:grid;margin-top:var(--s-2)}
  .pv__toc a{display:flex;gap:.75rem;align-items:baseline;min-height:40px;padding:6px 0;text-decoration:none;border-bottom:1px solid var(--line);font-size:.9375rem}
  .pv__toc a .num{font-size:.75rem;color:var(--ink-2);min-width:3.2em}
  .pv__toc a[aria-current]{color:var(--uv);font-weight:600}
  .pv__toc a:hover{color:var(--uv)}
  @media (min-width:1280px){.pv__det summary{pointer-events:none}}
  .pv__text{max-width:68ch;min-width:0}
  .pv__text section{padding-bottom:var(--s-7);scroll-margin-top:calc(var(--hd) + 16px)}
  .pv__text h2{font-size:var(--step-3);margin-bottom:var(--s-4);display:flex;gap:.75rem;align-items:baseline;border-top:1px solid var(--line);padding-top:var(--s-4)}
  .pv__text h2 .num{font:500 var(--step--1)/1 var(--font-mono);color:var(--uv);flex:none}
  .pv__text h3{font:650 1.0625rem/1.3 var(--font-text);margin:var(--s-5) 0 var(--s-2);letter-spacing:0}
  .pv__text ul{padding-left:1.2rem;display:grid;gap:var(--s-2);margin-top:var(--s-3)}
  .pv__text address{font-style:normal;margin-top:var(--s-3);padding:var(--s-3) var(--s-4);border-left:2px solid var(--uv)}
  .credits h3{font-size:1.125rem;margin:var(--s-5) 0 var(--s-2)}
  .credits__l{list-style:none;padding:0;display:grid;gap:6px;font-size:.8125rem;color:var(--ink-2);line-height:1.45}
  .credits__f{font:500 .75rem/1.4 var(--font-mono);color:var(--ink)}

  /* ---------- 404 ---------- */
  .lost{min-height:min(80svh,780px);display:grid;align-items:center;padding-block:var(--s-8)}
  .lost__in{display:grid;gap:var(--s-4);justify-items:center;text-align:center}
  .lost__n{display:flex;align-items:flex-end;gap:.04em;font-size:min(var(--step-6),14rem);line-height:.9}
  .lost__d{font:600 1em/1 var(--font-display);color:transparent;-webkit-text-stroke:1.5px var(--ink)}
  .lost__needle svg{height:.86em;width:auto;transform-origin:50% 75%;animation:needle-settle 2.6s var(--ease) both}
  @keyframes needle-settle{0%{transform:rotate(-38deg)}35%{transform:rotate(22deg)}60%{transform:rotate(-9deg)}80%{transform:rotate(3deg)}100%{transform:rotate(0)}}
  @media (prefers-reduced-motion:reduce){.lost__needle svg{animation:none}}
  .lost h1{font-size:var(--step-4)}
  .lost .lead{margin-inline:auto}
  .lost .btn-row{justify-content:center}
  .lost__s{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);width:min(100%,420px);margin-top:var(--s-4)}
}
