/* Northspire home: hero selector, ledger, matrix, expanding spires, journal grid, scene, numbers band, slips, Q&A, CTA. */
@layer pages{
  /* ---------- 1. hero ---------- */
  .hero{padding-block:clamp(2rem,1rem + 4vw,5rem) clamp(3rem,2rem + 4vw,6rem);border-bottom:1px solid var(--line)}
  .hero__grid{display:grid;gap:var(--s-5) var(--s-6);grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "fig" "sel"}
  .hero__rail{display:none}
  .hero__copy{grid-area:copy;display:grid;gap:var(--s-5);justify-items:start;align-content:start}
  .hero__kick .acc{color:var(--uv)}
  .hero__h{font-size:clamp(2.5rem,1rem + 5.2vw,6.5rem);line-height:.96;letter-spacing:-.02em;max-width:14ch;overflow-wrap:normal;word-break:normal;hyphens:manual}
  .hero__h em{font-weight:500}
  .hero__fig{grid-area:fig;position:relative;margin:0 0 var(--s-5)}
  .hero__spire{--ar:4/5;width:min(100%,60svh)}
  .hl{opacity:0;transition:opacity .9s var(--ease)}
  .hl.on{opacity:1}
  .slip{position:relative;background:var(--paper);padding:var(--s-4);margin:var(--s-4) 6px 0;display:grid;gap:var(--s-2);justify-items:start}
  .slip__h{font:600 var(--step-2)/1.05 var(--font-display);letter-spacing:-.01em}
  .slip__b{font-size:.9375rem;color:var(--ink-2)}
  .slip__n{font:500 .8125rem/1.4 var(--font-mono);color:var(--ink-2)}
  .sel{grid-area:sel;display:grid;gap:var(--s-3);min-width:0}
  .sel__opts{display:flex;gap:var(--s-2);overflow-x:auto;scroll-snap-type:x proximity;padding:2px 28px 2px 0;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .sel__opts::-webkit-scrollbar{display:none}
  .sel__o{flex:none;scroll-snap-align:start;display:flex;gap:.75rem;align-items:center;min-height:48px;padding:0 16px 0 14px;border:1px solid var(--line-strong);text-decoration:none;font-weight:500;background:transparent;position:relative;transition:background .16s}
  .sel__o .num{font-size:.75rem;color:var(--ink-2)}
  @media (hover:hover){.sel__o:hover{background:var(--haze)}}
  .sel__o[aria-current],.sel__o[aria-checked=true]{background:var(--lilac);border-color:var(--uv);color:var(--uv-deep)}
  .sel__o[aria-current] .num,.sel__o[aria-checked=true] .num{color:var(--uv-deep)}
  .sel__o[aria-current]::before,.sel__o[aria-checked=true]::before{content:"";position:absolute;left:-1px;top:-5px;width:6px;height:12px;background:var(--uv);clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%)}
  @media (min-width:768px){
    .hero__grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"copy fig" "sel fig";align-items:start}
    .hero__spire{width:100%}
    .slip{margin-left:calc(-1 * var(--s-5));margin-top:calc(-1 * var(--s-7))}
    .hero__fig{margin-bottom:var(--s-6)}
    .sel__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;mask-image:none;padding:0}
    .sel__o{flex:1}
  }
  @media (min-width:1280px){
    .hero{min-height:min(88svh,880px);display:grid;align-items:center}
    .hero__grid{grid-template-columns:3rem minmax(0,7fr) minmax(0,5fr);grid-template-areas:"rail copy fig" "rail sel fig";column-gap:var(--s-7)}
    .hero__rail{display:block;grid-area:rail;grid-row:1/3;border-right:1px solid var(--line);position:relative}
    .hero__rail span{position:sticky;top:calc(var(--hd) + var(--s-5));display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
    .hero__kick{display:none}
    .sel__opts{grid-template-columns:repeat(3,minmax(0,1fr))}
    .slip{margin-left:calc(-1 * var(--s-5));margin-top:-5rem;max-width:380px}
  }
  @media (min-width:1920px){.hero__h{max-width:12ch}}

  /* ---------- 2. ledger ---------- */
  .ledger{border-block:1px solid var(--line)}
  .ledger__in{display:grid;grid-template-columns:minmax(0,1fr)}
  .ledger__c{padding:var(--s-5) 0;border-top:1px solid var(--line);display:grid;gap:var(--s-2);align-content:start}
  .ledger__c:first-child{border-top:0}
  .ledger__c p{font-size:.9375rem;color:var(--ink-2);max-width:34ch}
  .ledger__c .kick{color:var(--uv)}
  @media (min-width:768px){.ledger__in{grid-template-columns:repeat(2,minmax(0,1fr))}.ledger__c{padding:var(--s-6) var(--s-5)}.ledger__c:nth-child(2){border-top:0}.ledger__c:nth-child(even){border-left:1px solid var(--line)}}
  @media (min-width:1280px){.ledger__in{grid-template-columns:repeat(4,minmax(0,1fr))}.ledger__c{border-top:0}.ledger__c:nth-child(n+2){border-left:1px solid var(--line)}.ledger__c:first-child{padding-left:0}}

  /* ---------- 3. package finder ---------- */
  .fd{display:grid;gap:var(--s-6)}
  .fd__step{display:grid;gap:var(--s-3)}
  .fd__lab{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);font-weight:650}
  .fd__no{display:inline-grid;place-items:center;width:28px;height:28px;background:var(--uv);color:#fff;font:600 .8125rem/1 var(--font-mono)}
  .fd__q{font-weight:400;color:var(--ink-2);font-size:.9375rem}
  .fd__opts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
  .fd__opts .chip svg{width:18px;height:18px;flex:none}
  .fd__opts .chip[aria-pressed=true]{background:var(--uv);color:#fff;border-color:var(--uv)}
  .fd__opts .chip[aria-pressed=true] .n{color:#fff}
  .fd__opts .chip:disabled{opacity:.45;cursor:not-allowed}
  .fd__note{display:none}
  .fd__res{background:var(--paper);padding:var(--s-4);display:grid;gap:var(--s-4)}
  .fd__sum{font:500 .8125rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
  .fd__list{list-style:none;padding:0;display:grid}
  .fd__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-4);align-items:baseline;padding:var(--s-3) 0;border-top:1px solid var(--line)}
  .fd__list li[hidden]{display:none}
  .fd__main{display:grid;gap:2px}
  .fd__n{font-weight:600;line-height:1.3}
  .fd__pr{color:var(--ink-2);font-size:.875rem;white-space:nowrap}
  .fd__list .btn--text{grid-column:1/-1;justify-self:start;min-height:36px;font-size:.875rem}
  .fd__empty{color:var(--ink-2)}
  @media (min-width:768px){
    .fd__res{padding:var(--s-5)}
    .fd__list li{grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s-5);align-items:center}
    .fd__list .btn--text{grid-column:auto;justify-self:end}
  }
  @media (min-width:1024px){
    .fd__opts .chip[data-stage]{flex-direction:column;align-items:flex-start;gap:4px;padding-block:10px;min-height:64px}
    .fd__opts .chip[data-stage="all"]{flex-direction:row;align-items:center;min-height:64px}
    .fd__note{display:block;font:400 .75rem/1.25 var(--font-body,inherit);letter-spacing:0;color:var(--ink-2);white-space:normal;max-width:20ch}
    .fd__opts .chip[aria-pressed=true] .fd__note{color:#fff}
  }

  /* ---------- 4. approach: expanding spires ---------- */
  .ap{display:grid;gap:2px;background:var(--line-dark)}
  .ap__p{background:var(--basalt-900);min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .ap__h{font-family:inherit}
  .ap__h button{display:flex;align-items:baseline;gap:var(--s-4);width:100%;min-height:72px;padding:var(--s-4) var(--s-5);text-align:left;color:var(--text)}
  .ap__no{font:600 var(--step-3)/1 var(--font-display);color:transparent;-webkit-text-stroke:1px var(--iris);flex:none;min-width:2.2ch}
  .ap__t{font:600 var(--step-2)/1.05 var(--font-display);letter-spacing:-.01em}
  .ap__h button:hover .ap__no{color:var(--iris)}
  .ap__b{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .28s var(--ease),visibility .28s}
  .ap__bi{overflow:hidden;min-height:0;display:grid;gap:var(--s-4);padding:0 var(--s-5);color:var(--text-2)}
  .ap__bi ul{list-style:none;padding:0;display:grid;gap:var(--s-2);color:var(--text);font-size:.9375rem}
  .ap__bi li{position:relative;padding-left:1.25rem}
  .ap__bi li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--iris)}
  .ap__p.is-open .ap__b{grid-template-rows:1fr;visibility:visible}
  .ap__p.is-open .ap__bi{padding-bottom:var(--s-5)}
  .ap__p.is-open .ap__no{color:var(--iris)}
  @media (min-width:1280px){
    .ap{display:flex;height:520px}
    .ap__p{flex:1 1 0;transition:flex-grow .28s var(--ease)}
    .ap__p.is-open{flex:3 1 0}
    .ap__h{height:100%}
    .ap__h button{flex-direction:column;justify-content:space-between;align-items:flex-start;height:100%;padding:var(--s-5);min-height:0}
    .ap__t{writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-start;white-space:nowrap}
    .ap__no{font-size:var(--step-4)}
    .ap__p.is-open .ap__h button{height:auto}
    .ap__p.is-open .ap__t{writing-mode:horizontal-tb;transform:none;font-size:var(--step-3);white-space:normal}
    .ap__b{display:block;visibility:hidden;opacity:0;transition:opacity .2s}
    .ap__p.is-open .ap__b{visibility:visible;opacity:1;transition:opacity .3s .12s}
    .ap__bi{min-width:340px;padding:var(--s-3) var(--s-5) var(--s-5);display:grid}
  }
  @media (min-width:1920px){.ap{height:600px}}

  /* ---------- 5. featured journal grid ---------- */
  .jg{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr)}
  @media (min-width:768px){.jg{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}.jg__1{grid-column:1/-1}}
  @media (min-width:1280px){
    .jg{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"a a a a a a b b b b b b" "a a a a a a c c c c c c" "d d d d e e e e f f f f";gap:var(--s-6)}
    .jg__1{grid-area:a}.jg__2{grid-area:b}.jg__3{grid-area:c}.jg__4{grid-area:d}.jg__5{grid-area:e}.jg__6{grid-area:f}
    .jg .ts--lg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .jg .ts--lg .ts__img .spire{min-height:0}
  }

  /* ---------- scene band ---------- */
  .scene{position:relative;margin:0;height:clamp(280px,38vw,560px);overflow:hidden;background:var(--basalt-950)}
  .scene picture,.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgb(18 16 22 / .55))}
  .scene__c{position:absolute;left:0;right:0;bottom:var(--s-5);margin-inline:auto;z-index:2}
  .scene__box{background:var(--paper);padding:var(--s-4) var(--s-5);display:grid;gap:var(--s-2);max-width:min(100%,440px);outline:1px solid var(--line)}
  .scene__box p{font-size:.9375rem}

  /* ---------- 6. numbers band ---------- */
  .nb{background:var(--grad-prism);padding-block:var(--s-8)}
  .nb__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-4)}
  @media (min-width:1024px){.nb__in{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}}
  .nb__c{container-type:inline-size;display:grid;gap:var(--s-3);justify-items:start;align-content:start}
  .nb__v{font:600 min(var(--step-5),22cqi)/1 var(--font-display);color:transparent;-webkit-text-stroke:1.5px var(--paper);transition:color .8s var(--ease) .1s;font-variant-numeric:lining-nums;white-space:nowrap}
  .nb__c.in .nb__v,.no-js .nb__v{color:var(--paper)}
  .nb__l{background:var(--basalt-950);color:var(--text);padding:6px 10px;font:500 .75rem/1.3 var(--font-mono);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.06em}
  @media (prefers-reduced-motion:reduce){.nb__v{color:var(--paper);transition:none}}

  /* ---------- 7. services slips ---------- */
  .slips{display:grid;grid-auto-flow:column;grid-auto-columns:min(85%,22rem);gap:var(--s-5);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:8px 8px var(--s-3);margin-inline:-8px;scrollbar-width:thin}
  .slips>*{scroll-snap-align:start}
  @media (min-width:1280px){.slips{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;gap:var(--s-7);padding:8px;scroll-snap-type:none}}
  .slip-s{background:var(--paper);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
  .slip-s h3{font-size:var(--step-2);line-height:1.05}
  .slip-s__d{font-size:.9375rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .slip-s__f{margin-top:auto;padding-top:var(--s-3);display:grid;gap:var(--s-3);border-top:1px solid var(--line)}

  /* ---------- 8. Q&A ---------- */
  .qa{display:grid;gap:var(--s-6)}
  .qa__l{display:grid;gap:var(--s-4);justify-items:start;align-content:start}
  .qa__l h2{font-size:var(--step-4)}
  @media (min-width:1280px){.qa{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-8)}.qa__l{position:sticky;top:calc(var(--hd) + 24px);align-self:start}}
  .qa__i{border-top:1px solid var(--line-strong)}
  .qa__i:last-child{border-bottom:1px solid var(--line-strong)}
  .qa__i summary{display:flex;gap:var(--s-4);justify-content:space-between;align-items:center;min-height:64px;padding:var(--s-3) 0;cursor:pointer;list-style:none;font:600 max(1.5rem,var(--step-1))/1.15 var(--font-display);letter-spacing:-.01em}
  .qa__i summary::-webkit-details-marker{display:none}
  .qa__i summary:hover{color:var(--uv)}
  .qa__m{position:relative;width:16px;height:16px;flex:none}
  .qa__m::before,.qa__m::after{content:"";position:absolute;background:currentColor;transition:transform .25s var(--ease)}
  .qa__m::before{left:0;right:0;top:7px;height:2px}
  .qa__m::after{top:0;bottom:0;left:7px;width:2px}
  .qa__i[open] .qa__m::after{transform:scaleY(0)}
  .qa__a{padding:0 0 var(--s-5);max-width:60ch;color:var(--ink-2)}

  /* ---------- 9. CTA spire ---------- */
  .cta{padding-block:var(--sec);overflow:hidden}
  .cta__in{display:grid;gap:var(--s-7);align-items:center}
  .cta__t{display:grid;gap:var(--s-5);justify-items:start}
  .cta__t h2{font-size:var(--step-5);max-width:14ch}
  .cta__m{font-size:var(--step-0)}
  .cta__spire{position:relative;order:-1;aspect-ratio:16/6;clip-path:polygon(0 24%,50% 0,100% 24%,100% 100%,0 100%);display:grid;place-items:center;overflow:hidden}
  .cta__geode{position:absolute;inset:-30%;background:var(--grad-geode);animation:geode 40s linear infinite}
  .cta__spire img{position:relative;height:60%;width:auto}
  @keyframes geode{to{--geode-angle:360deg}}
  @media (prefers-reduced-motion:reduce){.cta__geode{animation:none}}
  @media (min-width:1280px){
    .cta__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8)}
    .cta__spire{order:0;aspect-ratio:4/5;clip-path:polygon(0 12%,50% 0,100% 12%,100% 100%,0 100%);max-width:440px;justify-self:end;width:100%}
    .cta__spire img{height:30%}
  }

  /* ---------- reveal ---------- */
  @media (prefers-reduced-motion:no-preference){
    .js-ready:not(.js-late) [data-reveal]:not(.rule):not(.settle){opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
    .js-ready:not(.js-late) [data-reveal].in:not(.rule):not(.settle){opacity:1;transform:none}
  }
}
@layer pages{@media (prefers-reduced-motion:reduce){.hl{transition:none}.ap__p,.ap__b{transition:none}}}
@layer pages{.hero__note{font:500 var(--step--1)/1.4 var(--font-mono);color:var(--ink-2)}}