/* Service pages (brief 8.3). Builds on tokens, base and home.css. */

/* breadcrumb */
.ns-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.ns-crumbs li+li::before{content:"/";margin-right:6px;color:var(--ns-survey)}
.ns-crumbs a{color:var(--ns-ink-2);text-decoration:none;border-bottom:1px solid var(--ns-rule)}
.ns-crumbs a:hover{color:var(--ns-redline);border-color:currentColor}
.ns-crumbs [aria-current]{color:var(--ns-ink)}

/* D6 drawing */
.ns-d6{display:block;width:100%;height:auto}
.d6-main{fill:none;stroke:var(--ns-verdigris);stroke-width:3.2}
.d6-svc{fill:none;stroke:var(--ns-verdigris);stroke-width:1.4}
.d6-end{fill:var(--ns-paper);stroke:var(--ns-verdigris);stroke-width:2}
.d6-prop{fill:none;stroke:var(--ns-redline);stroke-width:2.6;stroke-dasharray:8 5}
.d6-prop.thin{stroke-width:1.8;stroke-dasharray:5 4}
.d6-path{fill:none;stroke:var(--ns-ochre);stroke-width:2;stroke-dasharray:2 3}
.d6-field{fill:var(--ns-verdigris);opacity:.18;stroke:var(--ns-verdigris);stroke-width:1}
.d6-cross{fill:none;stroke:var(--ns-ink);stroke-width:3}
.d6-cross-sv{fill:none;stroke:var(--ns-survey);stroke-width:3}
.d6-cross-w{fill:none;stroke:var(--ns-paper);stroke-width:3.5}
.d6-tick{fill:none;stroke:var(--ns-verdigris);stroke-width:2.6}
.d6-north{fill:var(--ns-ink)}
.d6-scale{fill:none;stroke:var(--ns-ink);stroke-width:1.2}

/* header */
.ns-sv-head{padding-block:var(--ns-s6) var(--ns-s7)}
.ns-sv-top{margin-top:var(--ns-s6);display:grid;gap:var(--ns-s5)}
.ns-sv-scale{margin:0 0 var(--ns-s2);font-family:var(--ns-f-mono);font-size:clamp(1rem,.9rem + .5vw,1.375rem);letter-spacing:.04em;color:var(--ns-redline)}
.ns-sv-top{--t:clamp(2.75rem,1.4rem + 5.6vw,6.5rem)}
.ns-sv-h1{margin:0;font-family:var(--ns-f-display);font-weight:800;font-stretch:82%;letter-spacing:-.035em;line-height:.9;font-size:var(--t);text-wrap:balance}
.ns-sv-intro .ns-lead{max-width:44ch;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.5;margin:0}
.ns-sv-answer{margin:var(--ns-s3) 0 0;max-width:46ch;color:var(--ns-ink-2);line-height:1.55}
@media (min-width:1024px){
  .ns-sv-top{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ns-gutter);align-items:end}
  .ns-sv-top > div:first-child{grid-column:1 / 8}
  /* the two paragraphs sit on the title's two lines: problem on the first, answer on the second,
     each set to fill its two lines to the right margin (sizes per page in --lead and --ans, in container units) */
  .ns-sv-intro{grid-column:8 / 13;container-type:inline-size;display:grid;grid-template-rows:repeat(2,calc(var(--t) * .9))}
  .ns-sv-intro p{align-self:end;max-width:none;margin:0;text-wrap:wrap}
  .ns-sv-intro .ns-lead{font-size:4.83cqi;line-height:1.42;margin-bottom:.2em}
  .ns-sv-intro .ns-sv-answer{font-size:3.8cqi;line-height:1.42;margin-bottom:.32em}
}
.ns-sv-fig{margin:var(--ns-s7) 0 0;border-top:1px solid var(--ns-ink);padding-top:var(--ns-s5)}
.ns-sv-fig .ns-d6{max-width:1040px;margin-inline:auto}
.ns-sv-fig .ns-d6.is-wide{max-width:none}
.ns-sv-fig figcaption{margin-top:var(--ns-s4)}

/* who it is for */
.ns-sv-aud{display:grid;gap:var(--ns-s5)}
@media (min-width:768px){.ns-sv-aud{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ns-s6) var(--ns-gutter)}}
@media (min-width:1024px){.ns-sv-aud{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
.ns-sv-aud li{border-left:1px solid var(--ns-ink);padding-left:var(--ns-s4)}
.ns-sv-aud .ns-body{margin-top:var(--ns-s2)}

/* what we help with */
.ns-sv-help{display:grid;gap:var(--ns-s6)}
@media (min-width:1024px){.ns-sv-help{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ns-gutter)}}
.ns-sv-group > .ns-ann{margin:0 0 var(--ns-s3)}
.ns-sv-group ul{display:grid;border-top:1px solid var(--ns-ink)}
.ns-sv-group li{padding:var(--ns-s4) 0;border-bottom:1px solid var(--ns-rule);font-family:var(--ns-f-display);font-weight:650;font-stretch:95%;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.3;letter-spacing:-.005em}

/* how an engagement runs */
.ns-stages{display:grid;gap:var(--ns-s7)}
@media (min-width:1024px){.ns-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ns-gutter)}}
.ns-stage{display:grid;gap:var(--ns-s4);align-content:start}
.ns-stage-fig{margin:0;background:var(--ns-paper);border:1px solid var(--ns-rule);padding:var(--ns-s3)}
.ns-stage-t{display:grid;grid-template-columns:auto auto 1fr;column-gap:var(--ns-s3);row-gap:var(--ns-s2);align-items:center}
.ns-stage-t .ns-h3,.ns-stage-t .ns-body{grid-column:1 / -1;margin:0}
.ns-stage-t .ns-tag{justify-self:start}

/* what to bring + questions */
.ns-sv-split{display:grid;gap:var(--ns-s8)}
@media (min-width:1024px){.ns-sv-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ns-s8)}}
.ns-sv-split .ns-plate-h{margin-bottom:var(--ns-s5)}
.ns-sv-bring{margin-top:var(--ns-s4);display:grid;border-top:1px solid var(--ns-rule)}
.ns-sv-bring li{display:grid;grid-template-columns:2.6em 1fr;align-items:baseline;padding:var(--ns-s3) 0;border-bottom:1px solid var(--ns-rule);line-height:1.5}
.ns-faq{border-bottom:1px solid var(--ns-rule)}
.ns-faqs{border-top:1px solid var(--ns-rule)}
.ns-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--ns-s4);padding:var(--ns-s4) 0}
.ns-faq summary::-webkit-details-marker{display:none}
.ns-faq summary::after{content:"+";font-family:var(--ns-f-mono);font-size:1.25rem;color:var(--ns-ink-2);transition:transform var(--ns-ui) var(--ns-ease)}
.ns-faq[open] summary::after{transform:rotate(45deg);color:var(--ns-redline)}
.ns-faq summary .ns-h3{font-size:clamp(1.05rem,1rem + .3vw,1.25rem)}
.ns-faq summary:hover .ns-h3{color:var(--ns-redline)}
.ns-faq .ns-body{margin:0 0 var(--ns-s5)}

/* next step */
.ns-sv-next-body{display:grid;gap:var(--ns-s5);margin-top:var(--ns-s5);align-items:end}
@media (min-width:1024px){.ns-sv-next-body{grid-template-columns:7fr 5fr}.ns-sv-next-body > :last-child{justify-self:end}}
.ns-sv-next-body .ns-lead{margin:0}
.ns-sv-actions{display:flex;flex-wrap:wrap;gap:var(--ns-s3)}
.d6-chair{fill:none;stroke:var(--ns-ink);stroke-width:1.4}
.d6-chair-sv{fill:none;stroke:var(--ns-survey);stroke-width:1.4;stroke-dasharray:3 3}
.d6-wall{fill:none;stroke:var(--ns-verdigris);stroke-width:5}
.d6-wall-sv{fill:none;stroke:var(--ns-survey);stroke-width:5;stroke-dasharray:6 5}
.d6-lead{fill:none;stroke:var(--ns-survey);stroke-width:1.2;stroke-dasharray:3 3}
.d6-grid{fill:none;stroke:var(--ns-rule);stroke-width:1}
.d5-done{fill:var(--ns-verdigris)}
.d5-link{fill:none;stroke:var(--ns-ink-2);stroke-width:1}
.d5-date{fill:none;stroke:var(--ns-ochre);stroke-width:1.8}
.d6-prop rect{fill:none}
.d5-table{fill:var(--ns-survey)}
/* wide drawings (D5) in the stage cards: a deeper frame, drawing centred, so the card does not read as a squashed strip */
.ns-stage-fig:has(.is-wide){aspect-ratio:5 / 2;display:flex;align-items:center}
.ns-stage-fig:has(.is-wide) .ns-d6{width:100%}
.d4-book{fill:var(--ns-ochre)}
.d4-door{fill:var(--ns-verdigris);opacity:.85}
.ns-sv-hlink{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--ns-rule)}
.ns-sv-hlink:hover{color:var(--ns-redline);border-color:currentColor}
.d4-sign{fill:var(--ns-verdigris)}
.lite-t{opacity:.55}
.ns-trunk{fill:none;stroke:#5E8F4E;stroke-width:2}
.d4-box{fill:var(--ns-survey)}
.d4-trophy{fill:var(--ns-ochre)}
.d4-hat{fill:var(--ns-ochre)}
.ns-sv-fig .ns-bk,.ns-stage-fig .ns-bk{fill:var(--ns-ink)}
.ns-sv-fig .ns-bk-o,.ns-stage-fig .ns-bk-o{fill:var(--ns-ochre)}
.ns-sv-fig .ns-bk-v,.ns-stage-fig .ns-bk-v{fill:var(--ns-verdigris)}
.ns-sv-fig .ns-lamp,.ns-stage-fig .ns-lamp{fill:var(--ns-ink)}
.ns-sv-fig .ns-glow,.ns-stage-fig .ns-glow{fill:var(--ns-ochre);opacity:.14}
.ns-glow.lite{opacity:.06}

/* ===== Services overview ===== */
.ns-svx{list-style:none;margin:0;padding:0;display:grid;gap:var(--ns-s7)}
.ns-svx-row{display:grid;gap:var(--ns-s5);border-top:1px solid var(--ns-ink);padding-top:var(--ns-s5)}
.ns-svx-t{display:grid;gap:var(--ns-s3);align-content:start;justify-items:start}
.ns-svx-t > p{margin:0}
.ns-svx-h{margin:0;font-family:var(--ns-f-display);font-weight:800;font-stretch:85%;letter-spacing:-.02em;line-height:1;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.75rem)}
.ns-svx-h a{color:inherit;text-decoration:none}
.ns-svx-h a:hover{color:var(--ns-redline)}
.ns-svx-p{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.45}
.ns-svx-who{font-size:.9375rem;color:var(--ns-ink-2);line-height:1.5}
.ns-svx-who .ns-ann{margin-right:var(--ns-s2)}
.ns-svx-fig{margin:0}
.ns-svx-fig .ns-d6{width:100%;height:auto}
.ns-svx-band{margin-top:var(--ns-s7)}
@media (min-width:1024px){
  .ns-svx-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ns-gutter);align-items:center}
  .ns-svx-t{grid-column:1 / 6}
  .ns-svx-fig{grid-column:6 / 13}
}