/* Shared presentation for Michael Evingham's hire page and its six skill pages. */
.ns-architect {
    color: var(--ns-text);
    background: var(--ns-bg);
    font-family: var(--ns-font);
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.ns-architect__shell { width: min(1120px, calc(100% - 2rem)); margin: auto; }
.ns-architect__hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 2rem; align-items: center; }
.ns-architect__hero--factory-pane { grid-template-columns: minmax(0, 1fr); }
.ns-architect__eyebrow { color: var(--ns-text-2); font-weight: 600; font-size: 1rem; }
.ns-architect h1 { font-size: clamp(2.25rem, 4.5vw, 4rem); letter-spacing: -.04em; line-height: 1.08; margin: .75rem 0 1.25rem; }
.ns-architect h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.025em; margin-bottom: 1rem; }
.ns-architect__lede { font-size: 1.25rem; line-height: 1.6; max-width: 720px; }
.ns-architect__bio,
.ns-architect__list { color: var(--ns-text-2); line-height: 1.65; max-width: 880px; }
.ns-architect__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.ns-architect__button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1rem; border-radius: var(--ns-radius); text-decoration: none; font-weight: 600; border: 1px solid var(--ns-border-strong); }
.ns-architect .ns-architect__button.ns-architect__button--primary { background: var(--ns-gold); color: var(--ns-on-accent); border-color: transparent; }
.ns-architect .ns-architect__button.ns-architect__button--quiet { color: var(--ns-text); background: var(--ns-card); }
.ns-architect__back { display: inline-flex; min-height: 44px; align-items: center; color: var(--ns-text-2); text-underline-offset: .2em; }
.ns-architect__reach { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .875rem 0 0; }
.ns-architect .ns-architect__reach a.ns-architect__reach-link { min-height: 44px; display: inline-flex; align-items: center; padding: .5rem .875rem; border: 1px solid var(--ns-border-strong); border-radius: 999px; background: var(--ns-card); color: var(--ns-text); text-decoration: none; font-weight: 600; }
.ns-architect--hire .ns-architect__reach a.ns-architect__reach-link { gap: .375rem; }
.ns-architect__reach-label { color: var(--ns-text-2); font-weight: 500; }
.ns-architect .ns-architect__reach a.ns-architect__reach-link:focus-visible { outline: 2px solid var(--ns-gold-deep); outline-offset: 3px; }
.ns-architect__reach--quiet { gap: 0; color: var(--ns-text-2); }
.ns-architect__reach--quiet li { display: inline-flex; align-items: center; }
.ns-architect__reach--quiet li + li::before { content: "·"; padding: 0 .5rem; }
.ns-architect .ns-architect__reach--quiet a.ns-architect__reach-link { min-height: 44px; padding: .25rem 0; border: 0; border-radius: 0; background: transparent; color: var(--ns-text-2); font-weight: 500; }
.ns-architect__downloads { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: .75rem 0 0; }
.ns-architect__downloads a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ns-text-2); text-underline-offset: .2em; }
.ns-architect--hire .ns-architect__downloads a { font-weight: 500; }
.ns-architect__host { min-height: 340px; }
.ns-architect__host alive-agent { display: block; width: 100%; height: 340px; --alive-agent-size: 360px; }
.ns-architect__host alive-agent[data-mode="container"] { margin-bottom: 5.8em; }
.ns-architect__host alive-agent[data-mode="container"] > .ak-caption { top: calc(100% + .4em); bottom: auto; -webkit-line-clamp: 4; min-height: 2.7em; max-height: 5.4em; }
.ns-architect__section { padding: 2.5rem 0; border-top: 1px solid var(--ns-border); }
.ns-architect--hire .ns-architect__hero + .ns-architect__section { margin-top: 2.5rem; }
.ns-architect__list { padding-left: 1.25rem; margin-bottom: 0; }
.ns-architect__list li { padding-left: .25rem; margin-bottom: .875rem; }
/* Line 22852: a skill link opens its list sentence (WCAG 2.5.8's inline case keeps its line); padding on the inline box makes it a 44 px tap without moving a line (pass 22679 measured 19 px at 375). An inline box is the font's content area (about 19 px at 16 px), not the 26 px line, so 13 px each side. */
.ns-architect__list a { padding-block: 13px; }
.ns-architect--hire .ns-architect__list strong { color: var(--ns-text); }
.ns-architect__numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 1.5rem 0 0; }
.ns-architect__numbers dt { font-size: 2rem; font-weight: 600; letter-spacing: -.035em; }
.ns-architect__numbers dd { color: var(--ns-text-2); margin: .25rem 0 0; line-height: 1.5; }
.ns-architect__counted { display: block; font-size: .875rem; color: var(--ns-text-2); }
.ns-architect__proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ns-architect__proof { display: flex; min-height: 96px; align-items: center; padding: 1rem; border: 1px solid var(--ns-border); border-radius: var(--ns-radius); background: var(--ns-card); color: var(--ns-text); font-weight: 600; text-underline-offset: .2em; }
.ns-architect__contact { display: grid; grid-template-columns: .75fr 1.25fr; gap: 2rem; align-items: start; }
.ns-architect__form { padding: 1.5rem; border: 1px solid var(--ns-border); border-radius: var(--ns-radius); background: var(--ns-card); }
.ns-architect__form label { display: block; font-weight: 600; margin: .875rem 0 .375rem; }
.ns-architect__form input,
.ns-architect__form textarea { width: 100%; min-height: 44px; border: 1px solid var(--ns-border-strong); border-radius: 8px; background: var(--ns-bg); color: var(--ns-text); padding: .75rem; }
.ns-architect__form textarea { min-height: 140px; }
.ns-architect__form button { margin-top: 1rem; }
.ns-architect--hire .ns-architect__button:focus-visible,
.ns-architect--hire .ns-architect__form :is(input, textarea):focus-visible,
.ns-architect--skill :is(a, button, input, textarea):focus-visible { outline: 2px solid var(--ns-gold-deep); outline-offset: 3px; }

/* Line 31287: the hire page's first screen is who, what, the three ways to work and one next step. Book a call opens the
   call line and the message form in place; once open, the call itself is the gold button. A post's anchor clears the header. */
.ns-architect__hero--factory-pane .ns-architect__pitch { max-width: 720px; }
.ns-architect--hire .ns-architect__lede { margin-bottom: 1rem; }
.ns-architect__ways { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; padding: 0; margin: 0 0 1.25rem; color: var(--ns-text); font-weight: 500; }
.ns-architect__ways li { position: relative; padding-left: 1rem; }
.ns-architect__ways li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ns-gold); }
.ns-architect__book > summary { list-style: none; cursor: pointer; }
.ns-architect__book > summary::-webkit-details-marker { display: none; }
.ns-architect .ns-architect__book[open] > summary.ns-architect__button--primary { background: var(--ns-card); color: var(--ns-text); border-color: var(--ns-border-strong); }
.ns-architect__book-panel { margin-top: .75rem; padding: 1rem; border: 1px solid var(--ns-border); border-radius: var(--ns-radius); background: var(--ns-card); max-width: 560px; }
.ns-architect__book-panel .ns-architect__actions { margin-top: 0; }
.ns-architect__book-panel .ns-architect__reach--quiet { gap: 0 1.25rem; }
.ns-architect__book-panel .ns-architect__reach--quiet li + li::before { content: none; }
.ns-architect--hire :is(#book-a-call, #ways-to-work, .ns-architect__help li) { scroll-margin-top: 6rem; }
.ns-architect--hire .ns-architect__help li:target { margin-left: -.75rem; padding: .25rem .5rem .25rem 1rem; border-radius: var(--ns-radius); background: var(--ns-card); box-shadow: inset 3px 0 0 var(--ns-gold); }

/* The skill doors keep their slightly tighter, editorial proportions. */
.ns-architect--skill { padding: clamp(1.5rem, 5vw, 4rem) 0; }
.ns-architect--skill .ns-architect__shell { width: min(1080px, calc(100% - 2rem)); }
.ns-architect--skill .ns-architect__hero { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: clamp(1.5rem, 5vw, 3.5rem); padding: 1rem 0 3rem; }
.ns-architect--skill .ns-architect__eyebrow { margin-bottom: .5rem; }
.ns-architect--skill h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); letter-spacing: -.045em; line-height: 1.04; margin: .5rem 0 1.25rem; }
.ns-architect--skill .ns-architect__lede { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 680px; }
.ns-architect--skill .ns-architect__bio,
.ns-architect--skill .ns-architect__list { max-width: none; }

@media (max-width: 760px) {
    .ns-architect__hero,
    .ns-architect--skill .ns-architect__hero,
    .ns-architect__contact { grid-template-columns: 1fr; }
    .ns-architect__numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ns-architect__host { min-height: 270px; }
    .ns-architect__host alive-agent { min-height: 270px; height: 270px; }
    .ns-architect__proofs { grid-template-columns: 1fr; }
    /* Line 31287: the phone header is two rows (about 118 px), so a post's anchor lands below it. */
    .ns-architect--hire :is(#book-a-call, #ways-to-work, .ns-architect__help li) { scroll-margin-top: 8.5rem; }
}