/* northwatchgroup.com: one stylesheet. Night for the looking, paper for the report.
   No inline scripts or styles; everything works under default-src 'none'; style-src 'self'; img-src 'self'; font-src 'self'.
   One type scale (--fs-*), used everywhere; nothing else sets a font size except the SVG labels. */
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-normal-300-800.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/spacegrotesk-normal-300-700.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --night: #0f1b2d; --night-2: #152439; --night-3: #1d2f49; --night-line: #2a3d59; --night-line-2: #3b506f;
  --on-night: #ece6d8; --on-night-2: #c6c0b2; --on-night-muted: #93a0b5;
  --paper: #efe8d6; --paper-2: #e7dfc9; --ink: #10263f; --ink-2: #334457; --muted: #5d6675; --line: #b9ad90; --line-2: #8f8468;
  --amber: #f3b53f; --amber-2: #ffd27a; --amber-ink: #1a1304;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* the type scale */
  --fs-xs: .75rem;                                         /* labels, mono */
  --fs-s: .9375rem;                                        /* nav, footer, tables, notes */
  --fs-m: 1.0625rem;                                       /* body */
  --fs-l: clamp(1.125rem, 1rem + .45vw, 1.3125rem);        /* lead lines, h3 */
  --fs-xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);      /* h2 */
  --fs-2xl: clamp(2.375rem, 1.4rem + 3.8vw, 4.375rem);     /* h1 */
  /* space */
  --max: 74rem; --measure: 36rem; --gutter: clamp(1rem, 4vw, 3rem); --gap-sec: clamp(3rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 48em) { :root { --fs-m: 1.125rem; } }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--fs-m); line-height: 1.6; }
.skip { position: absolute; left: var(--gutter); top: -4rem; padding: .5rem .9rem; background: var(--amber); color: var(--amber-ink); text-decoration: none; z-index: 10; }
.skip:focus { top: .5rem; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.lab, .foot-label, .foot-fine, th, .n { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
h1, h2, h3, .wordmark { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; }
h1 { margin: 0; line-height: 1.04; font-size: var(--fs-2xl); max-width: 16ch; color: var(--on-night); }
h2 { margin: 0 0 1rem; font-size: var(--fs-xl); line-height: 1.12; }
h3 { margin: 0 0 .4rem; font-size: var(--fs-l); line-height: 1.25; }
p, ul, ol, dl { max-width: var(--measure); }
p { margin: 0 0 1rem; }
code { font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }

/* ---- night: header, hero, close, footer ---- */
.site-head { background: var(--night); color: var(--on-night); }
.head-in { max-width: var(--max); margin: 0 auto; padding: 1.1rem var(--gutter) 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; border-bottom: 1px solid var(--night-line); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--on-night); text-decoration: none; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.wordmark { font-size: var(--fs-l); }
.wordmark-group { font-weight: 300; color: var(--on-night-2); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; max-width: none; }
.site-nav a { display: inline-block; color: var(--on-night-2); text-decoration: none; font-size: var(--fs-s); padding: .55rem 0; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: #fff; border-bottom-color: var(--amber); }
[data-page="about"] .site-nav a[href="/about/"],
[data-page="contact"] .site-nav a[href="/contact/"], [data-page="services"] .site-nav a[href="/services/"],
[data-page="continuity"] .site-nav a[href="/continuity/"] { color: #fff; border-bottom-color: var(--amber); }
.hero { background: var(--night); color: var(--on-night); border-bottom: 1px solid var(--night-line); }
.hero a { color: var(--on-night); }
.hero-in { max-width: var(--max); margin: 0 auto; padding: 3rem var(--gutter) 0; display: grid; gap: 1.5rem 2rem; }
@media (min-width: 60em) { .hero-in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; min-height: 40rem; } .hero-in > div:first-child { align-self: center; padding-bottom: 3rem; } }
.hero.small .hero-in { min-height: 0; padding-bottom: 0; }
@media (min-width: 60em) { .hero.small .hero-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } .hero.small .hero-in > div:first-child { padding-bottom: 3rem; } }
@media (max-width: 59.99em) { .hero.small .hero-in > div:first-child { padding-bottom: 1rem; } }
.hero .lab { color: var(--amber); margin: 0 0 1rem; display: block; }
.hero p.line { margin: 1.25rem 0 0; max-width: 30rem; color: var(--on-night-2); font-size: var(--fs-l); line-height: 1.5; }
.actions { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.btn { display: inline-block; padding: .85rem 1.25rem; border: 1px solid var(--night-line-2); color: var(--on-night); text-decoration: none; font-size: var(--fs-s); line-height: 1.3; }
.btn:hover { border-color: var(--amber); color: #fff; }
.btn-primary { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); font-weight: 500; }
.btn-primary:hover { background: var(--amber-2); border-color: var(--amber-2); color: var(--amber-ink); }
.hero .btn-primary { color: var(--amber-ink); }   /* .hero a would otherwise give the amber button cream text */
.hero .more { color: var(--on-night-2); padding: .5rem 0; }
.hero .more:hover { color: #fff; }
.art-wrap { display: flex; justify-content: center; align-items: flex-end; }
.hero-art { width: 100%; height: auto; max-width: 40rem; display: block; margin-top: 1rem; }
.motif { width: 100%; max-width: 16rem; height: auto; display: block; }
@media (max-width: 59.99em) { .hero.small .motif { max-width: 10rem; } }
@media (min-width: 60em) { .hero-art { height: 100%; width: auto; max-width: 100%; } }
.hero-art .mass, .motif .mass { fill: var(--night-2); stroke: var(--night-line); stroke-width: 1; }
.hero-art .mass-far { fill: var(--night-2); stroke: var(--night-line); stroke-width: .6; opacity: .8; }
.hero-art .win, .motif .win { fill: var(--night-3); stroke: var(--night-line); stroke-width: .6; }
.hero-art .win-dim { fill: #3a3218; }
.hero-art .win-lit, .motif .win-lit { fill: var(--amber); }
.hero-art .glow, .motif .glow { fill: var(--amber); opacity: .25; }
.hero-art .bear, .motif .bear { stroke: var(--amber); stroke-width: 1.4; fill: none; }
.hero-art .lab { fill: var(--on-night); font-family: var(--mono); font-size: 15px; letter-spacing: .12em; }
.hero-art .rose, .motif .rose { fill: none; stroke: var(--on-night-2); stroke-width: 1; }
.hero-art .rose-n, .motif .rose-n { fill: var(--amber); }
.hero-art .ground, .motif .ground { stroke: var(--night-line-2); stroke-width: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .win-lit, .hero-art .glow, .hero-art .lab, .motif .win-lit, .motif .glow { opacity: 0; animation: on .3s steps(1) forwards; }
  .hero-art .glow, .motif .glow { animation-name: on-glow; }
  .hero-art .bear, .motif .bear { stroke-dasharray: 800; stroke-dashoffset: 800; animation: draw 1.1s ease-out forwards; }
  .w1, .g1, .l1 { animation-delay: .5s; } .b1 { animation-delay: .7s; }
  .w2, .g2, .l2 { animation-delay: 1.5s; } .b2 { animation-delay: 1.7s; }
  .w3, .g3, .l3 { animation-delay: 2.5s; } .b3 { animation-delay: 2.7s; }
  .w4, .g4, .l4 { animation-delay: 3.5s; } .b4 { animation-delay: 3.7s; }
  .w5, .g5, .l5 { animation-delay: 4.5s; } .b5 { animation-delay: 4.7s; }
  @keyframes on { to { opacity: 1; } }
  @keyframes on-glow { to { opacity: .25; } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* the closing band on every page: the free check, then the call */
.close { background: var(--night); color: var(--on-night); border-top: 1px solid var(--night-line); }
.close-in { max-width: var(--max); margin: 0 auto; padding: var(--gap-sec) var(--gutter); }
.close h2 { color: var(--on-night); margin: 0; max-width: 20ch; }
.close .actions { margin-top: 1.5rem; }
.close-alt { margin: 1.5rem 0 0; color: var(--on-night-2); font-size: var(--fs-s); max-width: 34rem; }
.close-alt a { color: var(--on-night); }

/* ---- paper ---- */
main { background: var(--paper); }
.paper { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) var(--gap-sec); }
.sec { padding: var(--gap-sec) 0 0; }
.sec + .sec { border-top: 1px solid var(--line); margin-top: var(--gap-sec); }
.sec > h2.lab { color: var(--muted); margin: 0 0 1.5rem; }
.sec .line { max-width: var(--measure); }
.sec.prose .line, .split .prose .line { font-size: var(--fs-l); line-height: 1.55; max-width: 38rem; }

/* trust line under the home hero */
.trust-strip { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.trust { list-style: none; max-width: var(--max); margin: 0 auto; padding: 1rem var(--gutter); display: flex; flex-wrap: wrap; gap: .4rem 0; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.trust li { display: flex; align-items: center; }
.trust li + li::before { content: "·"; margin: 0 .9rem; color: var(--line-2); }
.trust a { color: var(--ink); padding: .4rem 0; }
@media (max-width: 40em) { .trust { flex-direction: column; } .trust li + li::before { content: none; } }

/* process strip: four steps, one line each */
.process { list-style: none; counter-reset: p; padding: 0; margin: 0; max-width: none; display: grid; gap: 1.5rem; }
@media (min-width: 40em) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .process { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }   /* the four steps of how we work */
.process li { counter-increment: p; border-top: 2px solid var(--ink); padding-top: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.process li::before { content: "0" counter(p); font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .14em; color: var(--muted); }
.process b { font-family: var(--serif); font-weight: 500; font-size: var(--fs-l); }
.process .price { font-family: var(--sans); font-size: var(--fs-s); color: var(--muted); font-weight: 400; margin-left: .25rem; }
.process span:not(.price) { color: var(--ink-2); font-size: var(--fs-s); }

/* service cards: every card in a row is the same height, the link at the foot */
.cards { display: grid; gap: 1.25rem; }
@media (min-width: 44em) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: var(--paper-2); border-top: 2px solid var(--ink); padding: 1.5rem 1.5rem 1.25rem; display: flex; flex-direction: column; scroll-margin-top: 1rem; }
.card p, .card ul { font-size: var(--fs-s); max-width: none; }
.card p { margin: 0 0 .75rem; }
.card ul { margin: 0 0 .75rem; padding-left: 1.1rem; }
.card li { margin: 0 0 .35rem; }
.card .card-foot { margin-top: auto; padding-top: .5rem; margin-bottom: 0; }
.card .card-foot a { display: inline-block; padding: .3rem 0; }
.card .get { border-top: 1px solid var(--line); padding-top: .75rem; color: var(--ink-2); }
.card .get .lab { display: block; color: var(--muted); margin: 0 0 .2rem; }
.sec .cards { margin-top: 1.5rem; }
.sec > .lab + .cards { margin-top: 0; }

/* the lead offer on the home page, and the asides under the service cards */
.offer { background: var(--paper-2); border-left: 3px solid var(--amber); padding: 1.5rem 1.5rem 1.75rem; max-width: 46rem; }
.offer h3 { font-size: var(--fs-xl); line-height: 1.12; margin: 0 0 .75rem; }
.offer .price { font-family: var(--sans); font-size: var(--fs-l); color: var(--muted); font-weight: 400; margin-left: .35rem; }
.offer p { max-width: 38rem; }
.offer .offer-note { font-size: var(--fs-s); color: var(--muted); margin: 0; }
.offer .actions { margin: 1.25rem 0 0; }
.aside { margin: 1.5rem 0 0; font-size: var(--fs-s); color: var(--ink-2); max-width: 46rem; }
.boundary { max-width: 46rem; margin: 2rem 0 0; padding: 1.1rem 1.25rem; background: var(--paper-2); border-left: 3px solid var(--amber); font-size: var(--fs-s); color: var(--ink-2); }
.boundary strong { display: block; margin: 0 0 .35rem; font-family: var(--serif); font-weight: 500; font-size: var(--fs-l); color: var(--ink); }
.bounds { margin: 0; padding-left: 1.1rem; max-width: 40rem; }
.bounds li { margin: 0 0 .5rem; }
.detail { margin: 2rem 0 0; max-width: 52rem; }
.detail h3 { margin: 0 0 1rem; }
.detail p { font-size: var(--fs-s); color: var(--ink-2); max-width: 46rem; }

/* the one photograph: nw-summit on Home, graded to night at build time (tools/grade.py: navy tone map, vignette), full
   bleed and tall: at least 60vh, or the full 21:9 frame (42.86vw) when that is taller; 70vh on phones. No aspect-ratio:
   with a min-height it would widen the box past the viewport. The overlay is HTML, never baked into the image; the amber glow sits behind the words only. */
.vista { position: relative; height: max(60vh, 42.86vw); background: var(--night); color: var(--on-night); overflow: hidden; border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.vista picture { position: absolute; inset: 0; display: block; }
.vista img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@media (max-width: 47.99em) { .vista { height: auto; min-height: 70vh; } .vista img { object-position: center top; } }
.vista-frame { --arm: clamp(1.4rem, .8rem + 2.6vw, 3.2rem); --t: 1.5px; --amb: linear-gradient(var(--amber), var(--amber));
  position: absolute; inset: clamp(1rem, .4rem + 2.4vw, 2.75rem); pointer-events: none;
  background: var(--amb) top left / var(--arm) var(--t), var(--amb) top left / var(--t) var(--arm),
              var(--amb) top right / var(--arm) var(--t), var(--amb) top right / var(--t) var(--arm),
              var(--amb) bottom left / var(--arm) var(--t), var(--amb) bottom left / var(--t) var(--arm),
              var(--amb) bottom right / var(--arm) var(--t), var(--amb) bottom right / var(--t) var(--arm);
  background-repeat: no-repeat; }
.vista-text { position: absolute; top: clamp(3rem, 1rem + 6vw, 8rem); right: clamp(2.5rem, 1rem + 6vw, 9rem); text-align: right; isolation: isolate; }
.vista-text::before { content: ""; position: absolute; inset: -55% -25%; z-index: -1; background: radial-gradient(closest-side, rgba(243, 181, 63, .16), rgba(243, 181, 63, .05) 55%, transparent); }
.vista h2 { margin: 0; color: var(--on-night); font-size: clamp(2.6rem, 1rem + 5.2vw, 6rem); line-height: 1; letter-spacing: -.02em; }
.vista-text p { margin: 1rem 0 0; max-width: none; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
@media (min-width: 60em) { .vista-text p { font-size: var(--fs-s); } }
.vista-text span { white-space: nowrap; }
@media (max-width: 47.99em) { .vista-text { left: 2.5rem; right: 2.5rem; top: 3.25rem; text-align: center; } .vista-text span { display: block; } }

/* inner pages at desktop width: a second column instead of empty paper */
.split { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 60em) { .split { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); align-items: start; } }
.facts-panel, .next { background: var(--paper-2); border-top: 2px solid var(--ink); padding: 1.5rem 1.5rem 1.25rem; }
.facts-panel h2.lab, .next h2.lab { color: var(--muted); margin: 0 0 1rem; }
.facts-panel dl { margin: 0; max-width: none; }
.facts-panel dt { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: .85rem; border-top: 1px solid var(--line); }
.facts-panel dt:first-child { border-top: 0; padding-top: 0; }
.facts-panel dd { margin: .2rem 0 .85rem; font-family: var(--serif); font-size: var(--fs-l); line-height: 1.3; }
.facts-panel dd:last-child { margin-bottom: 0; }
.next .steps { max-width: none; font-size: var(--fs-s); }
.next .steps li:last-child { border-bottom: 0; }
@media (min-width: 60em) { .facts-panel, .next { position: sticky; top: 1.5rem; } }

/* Services: the pillar panel in the hero's second column, and the assessment card across the full width */
@media (min-width: 60em) { [data-page="services"] .hero.small .hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.pillars { align-self: center; margin: 0 0 3rem; border: 1px solid var(--night-line); background: var(--night-2); }
@media (max-width: 59.99em) { .pillars { margin: 0 0 2.5rem; } }
.pillars ol { list-style: none; margin: 0; padding: 0; max-width: none; }
.pillars li + li { border-top: 1px solid var(--night-line); }
.pillars a { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; padding: 1.1rem 1.4rem; color: var(--on-night); text-decoration: none; }
.pillars a:hover { background: var(--night-3); }
.pillars a:hover b { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: .2em; }
.pillars .n { grid-row: span 2; color: var(--amber); padding-top: .3rem; }
.pillars b { font-family: var(--serif); font-weight: 500; font-size: var(--fs-l); line-height: 1.2; }
.pillars span:not(.n) { color: var(--on-night-2); font-size: var(--fs-s); }
.wide-offer .offer { max-width: none; }
@media (min-width: 60em) {
  .wide-offer .offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: center; padding: 2rem 2.25rem; }
  .wide-offer .offer > * { grid-column: 1; }
  .wide-offer .offer > .actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}

/* lists, tables, definition lists */
.parts { display: grid; grid-template-columns: max-content 1fr; gap: 0 2.5rem; margin: 0 0 1.5rem; max-width: 46rem; border-top: 1px solid var(--ink); }
.parts dt, .parts dd { margin: 0; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.parts dt { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; padding-top: 1.1rem; }
@media (max-width: 40em) { .parts { grid-template-columns: 1fr; } .parts dt { padding-bottom: 0; border-bottom: 0; } .parts dd { padding-top: .25rem; } }
.promise { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.4; max-width: 34rem; margin: 2rem 0 0; padding-left: 1rem; border-left: 3px solid var(--amber); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; max-width: var(--measure); }
.steps li { counter-increment: s; position: relative; padding: .9rem 0 .9rem 2.6rem; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: "0" counter(s); position: absolute; left: 0; top: 1.15rem; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .14em; color: var(--muted); }
table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-size: var(--fs-s); }
th, td { text-align: left; vertical-align: top; padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--line); }
th { color: var(--muted); border-bottom: 1px solid var(--ink); }
table.stack td:first-child { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding-top: .95rem; }
table.verify td:first-child { width: 42%; font-weight: 500; }
@media (max-width: 40em) {
  table.stack, table.stack tbody, table.stack tr, table.stack td, table.verify, table.verify tbody, table.verify tr, table.verify td { display: block; width: 100%; }
  table.stack thead, table.verify thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack tr, table.verify tr { padding: .75rem 0; border-bottom: 1px solid var(--line); }
  table.stack td, table.verify td { border: 0; padding: .15rem 0; white-space: normal; }
  table.verify td:first-child { width: 100%; }
}
.faq { display: grid; gap: 2rem 3rem; max-width: none; }
@media (min-width: 52em) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa p { margin: 0; font-size: var(--fs-s); color: var(--ink-2); }
.todo { display: inline-block; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .06em; background: #fff3d1; color: var(--amber-ink); border: 1px dashed var(--amber-ink); padding: .1rem .4rem; line-height: 1.5; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0 0 1.25rem; font-size: var(--fs-s); }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
@media (max-width: 40em) { dl.facts { grid-template-columns: 1fr; gap: .1rem; } dl.facts dd { margin-bottom: .6rem; } }
.sec h2 .n { color: var(--muted); margin-right: .8rem; }

/* ---- footer: night again ---- */
.site-foot { background: var(--night); color: var(--on-night-2); border-top: 1px solid var(--night-line); }
.foot-in { max-width: var(--max); margin: 0 auto; padding: 2.5rem var(--gutter) 2.75rem; display: grid; gap: 1.75rem 3rem; font-size: var(--fs-s); }
@media (min-width: 52em) { .foot-in { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-in p { margin: 0 0 .5rem; }
.foot-brand { font-family: var(--serif); font-size: var(--fs-l); color: var(--on-night); }
.foot-label { color: var(--on-night-muted); margin: 0 0 .5rem; display: block; }
.foot-links { list-style: none; padding: 0; margin: 0; }
.foot-links a, .foot-in p a { display: inline-block; padding: .3rem 0; }
.site-foot a { color: var(--on-night); }
.foot-fine { grid-column: 1 / -1; margin: .5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--night-line); color: var(--on-night-muted); }
.foot-fine p { max-width: none; }
.foot-in .foot-fine p:last-child { margin: 0; }

/* the contact form (paper) */
.form { max-width: var(--measure); display: grid; gap: 1.1rem; }
.form .row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.form label { display: block; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .45rem; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: var(--fs-m); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 0; padding: .7rem .8rem; }
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible, .form button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.form .hp { position: absolute; left: -9999px; }
.form .err { margin: 0; min-height: 1.2em; color: #8a1c1c; font-size: var(--fs-s); }
.form .foot { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.form .foot small { color: var(--muted); max-width: 26rem; line-height: 1.45; font-size: var(--fs-s); }
.form button.btn { font: inherit; font-size: var(--fs-s); cursor: pointer; }
.form button[disabled] { opacity: .7; cursor: default; }
@media (max-width: 40em) { .form .row { grid-template-columns: 1fr; } }

/* ---- photo headers (v4): a night-graded photograph with the construct drawn on its ridge ----
   The <picture> and the construct's <svg> share one box (.stage) with the photograph's own aspect ratio, so nothing is
   cropped by object-fit and a point taken from the ridge stays on the ridge at any width. The stage is placed so the
   ridge lands low in the header; the scrims keep the nav and the words readable. */
body.photo-head .site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: transparent; }
body.photo-head .head-in { border-bottom-color: rgba(59, 80, 111, .45); }
.photo-hero { position: relative; overflow: hidden; isolation: isolate; }
.ph-summit, .ph-snow-ridge, .ph-valley { --av: 2.3333; }
.photo-hero .stage { position: absolute; z-index: 0; aspect-ratio: var(--av); width: 100%; left: 0; }
.photo-hero .stage picture, .photo-hero .stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.photo-hero .stage .fade { position: absolute; left: 0; right: 0; top: 0; height: 32%; background: linear-gradient(var(--night), rgba(15, 27, 45, 0)); }
.photo-hero .scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 27, 45, .9) 0, rgba(15, 27, 45, 0) 9rem),
              linear-gradient(90deg, rgba(15, 27, 45, .9) 0, rgba(15, 27, 45, .72) 30%, rgba(15, 27, 45, 0) 56%); }
.photo-hero .hero-in, .photo-hero .photo-in { position: relative; z-index: 2; }
.photo-hero .btn:not(.btn-primary) { background: rgba(15, 27, 45, .72); }

/* home: the ridge in the lower third; the stage sits on the bottom edge at its natural height */
.photo-hero.home { min-height: max(36rem, 72vh); display: flex; align-items: flex-start; }   /* the headline in the top third */
.photo-hero.home .stage { bottom: 0; }
.photo-in { width: 100%; max-width: var(--max); margin: 0 auto; padding: 7rem var(--gutter) 5rem; }
.photo-in > * { max-width: 36rem; }
.photo-in h1 { max-width: 13ch; }
/* inner pages: a 40vh header; --ry is where the ridge runs (share of the photo's height), placed at 74% of the header */
.photo-hero.inner { min-height: 40vh; }
.photo-hero.inner .stage { top: calc(var(--at, 74%) - var(--ry) * 100vw / var(--av)); }
/* where each page's ridge runs (--ry, share of the photo's height), where it lands in the header (--at), and on phones
   which part of the photo is centred (--fx, share of its width) */
[data-page="services"] .photo-hero { --ry: .59; --at: 86%; --fx: .765; }
[data-page="about"] .photo-hero { --ry: .70; --at: 80%; --fx: .66; }
[data-page="contact"] .photo-hero { --ry: .52; --at: 85%; --fx: .62; }
[data-page="legal"] .photo-hero { --ry: .59; --at: 86%; --fx: .76; }
[data-page="notfound"] .photo-hero { --ry: .70; --at: 80%; --fx: .48; }
[data-page="continuity"] .photo-hero { --ry: .70; --at: 80%; --fx: .66; }
.photo-hero.inner .hero-in { padding-top: 7.25rem; padding-bottom: 2.5rem; }
@media (min-width: 60em) { .photo-hero.inner .hero-in { min-height: 0; } .photo-hero.inner .hero-in > div:first-child { padding-bottom: 1rem; } }
[data-page="services"] .photo-hero .pillars { background: rgba(21, 36, 57, .82); }

/* the construct: line-work only, cream at low opacity, amber for the lit windows and the beams */
.construct { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.construct * { vector-effect: non-scaling-stroke; }
.c-face { fill: rgba(15, 27, 45, .22); stroke: var(--on-night); stroke-opacity: .42; stroke-width: 1.2; }
.c-side { fill: rgba(15, 27, 45, .38); stroke: var(--on-night); stroke-opacity: .32; stroke-width: 1; }
.c-floor, .c-line { fill: none; stroke: var(--on-night); stroke-opacity: .26; stroke-width: 1; }
.c-win { fill: none; stroke: var(--on-night); stroke-opacity: .2; stroke-width: 1; }
.c-leader { stroke: var(--on-night); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 2 3; }
.c-strata, .c-col, .c-wwin, .c-pile { fill: none; stroke: var(--on-night); stroke-width: 1; }
.c-ridge { fill: none; stroke: var(--amber); stroke-opacity: .55; stroke-width: 1.4; }
.c-lit, .c-beacon { fill: var(--amber); }
.c-glow { fill: var(--amber); opacity: .2; }
.c-node { opacity: .9; }
.c-beam { stroke: var(--amber); stroke-opacity: .5; stroke-width: 1.2; }
.c-lab { fill: var(--on-night); font-family: var(--mono); font-size: 22px; letter-spacing: .12em; }
.c-rose circle, .c-rose line { fill: none; stroke: var(--on-night-2); stroke-opacity: .85; stroke-width: 1; }
.c-rose-n { fill: var(--amber); }
.c-inner { opacity: .85; }
/* the other construct styles: C survey grid, D flight path, E perimeter, F signal */
.c-grid { stroke: var(--on-night); stroke-opacity: .22; stroke-width: 1; }
.c-scanline { stroke: var(--amber); stroke-opacity: .6; stroke-width: 1.2; }
.c-bracket path { fill: none; stroke: var(--amber); stroke-width: 1.4; }
.c-flight { fill: none; stroke: var(--amber); stroke-opacity: .75; stroke-width: 1.4; stroke-dasharray: 7 7; }
.c-wp { fill: rgba(15, 27, 45, .6); stroke: var(--amber); stroke-width: 1.3; }
.c-wpn { fill: var(--amber); font-family: var(--mono); font-size: 15px; letter-spacing: .04em; }
.c-pt { fill: var(--on-night); fill-opacity: .8; }
.c-quad line, .c-quad circle { fill: none; stroke: var(--on-night); stroke-opacity: .85; stroke-width: 1.2; }
.c-quad .c-lit { fill: var(--amber); stroke: none; }
.c-arc { fill: none; stroke: var(--amber); stroke-opacity: .45; stroke-width: 1.1; }
.c-post { stroke: var(--on-night); stroke-opacity: .6; stroke-width: 1.3; }
.c-cap { fill: none; stroke: var(--on-night); stroke-opacity: .6; stroke-width: 1; }
.c-ring { fill: none; stroke: var(--on-night); stroke-opacity: .14; stroke-width: 1; }
.c-pulse { fill: none; stroke: var(--amber); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.c-sig { opacity: .85; }
.c-scan, .c-quad { transform-box: view-box; }

/* motion: a few windows slowly brighten and dim, out of step; off under prefers-reduced-motion (the rule at the top) */
@media (prefers-reduced-motion: no-preference) {
  .c-node.tw1, .c-node.tw2, .c-node.tw3, .c-node.tw4, .c-beacon.tw5 { animation: glint 8s ease-in-out infinite; }
  .c-node.tw1 { animation-duration: 7s; } .c-node.tw2 { animation-duration: 9.5s; animation-delay: -3s; }
  .c-node.tw3 { animation-duration: 11s; animation-delay: -6s; } .c-node.tw4 { animation-duration: 8.5s; animation-delay: -2s; }
  .c-beacon.tw5 { animation-duration: 6s; animation-delay: -1s; }
  @keyframes glint { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
  /* C: the scan crosses the valley; D: the path's dashes travel, the marker hovers; F: a pulse every 2s, each growing
     100 units a second (scale 1.2 of r=500 in 6s), so a node a whole number of hundreds away is hit on the beat */
  .c-scan { animation: sweep 10s linear infinite; }
  @keyframes sweep { from { transform: translateX(-160px); } to { transform: translateX(1340px); } }
  .c-flight { animation: fly 2s linear infinite; }
  @keyframes fly { to { stroke-dashoffset: -28; } }
  .c-quad { animation: hover 6s ease-in-out infinite; }
  @keyframes hover { 50% { transform: translateY(-8px); } }
  .c-pulse { animation: pulse 6s linear infinite; } .c-pulse.p1 { animation-delay: -2s; } .c-pulse.p2 { animation-delay: -4s; }
  @keyframes pulse { from { transform: scale(0); opacity: .75; } to { transform: scale(1.2); opacity: 0; } }
  .c-sig { animation: catch 2s linear infinite; } .c-sig.sg1 { animation-delay: 1s; }
  @keyframes catch { 0% { opacity: 1; } 30%, 100% { opacity: .45; } }
}

/* phones: the photograph crops to the ridge, the construct scales down behind the words at lower opacity */
@media (max-width: 47.99em) {
  .photo-hero.home { min-height: 54rem; align-items: flex-start; }
  .photo-hero.home .stage { width: auto; height: 30rem; left: calc(50% - var(--fx, .5) * 30rem * var(--av)); }
  .home.ph-summit { --fx: .59; }   /* the wall and its compass clear the buttons */
  .photo-in { padding: 7.5rem var(--gutter) 2rem; }
  .photo-hero.inner .stage { width: auto; height: 22rem; left: calc(50% - var(--fx) * 22rem * var(--av)); top: calc(var(--at, 74%) - var(--ry) * 22rem); }
  .photo-hero .scrim { background: linear-gradient(180deg, rgba(15, 27, 45, .92) 0, rgba(15, 27, 45, .78) 45%, rgba(15, 27, 45, .2) 75%, rgba(15, 27, 45, 0) 100%); }
  .construct { opacity: .6; }
  .c-lab { display: none; }
}

/* the closing band on the photo home: the line the photograph used to carry, on plain night */
.close-whole .close-eyebrow { margin: 0 0 1rem; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.close-whole .close-big { max-width: none; font-size: clamp(2.6rem, 1rem + 5vw, 5.5rem); line-height: 1; letter-spacing: -.02em; }
.close-whole .close-sub { margin: 1.5rem 0 0; color: var(--on-night-2); font-size: var(--fs-l); }

/* /continuity/: examples in four, the two directions of one risk side by side, the sources in small type */
.sec h3.sub { margin: 2.5rem 0 1rem; }
.examples { margin-top: 0; }
@media (min-width: 64em) { .examples { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 60em) { .split.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split.two h3 { margin-bottom: .75rem; }
.sources { margin: 0; padding-left: 1.1rem; max-width: 52rem; font-size: var(--fs-s); color: var(--ink-2); }
.sources li { margin: 0 0 .6rem; }
.cite { white-space: normal; }
.foot-links a { text-decoration: none; }
.foot-links a:hover, .foot-links a:focus-visible { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: .25em; }
.foot-links li + li { margin-top: .1rem; }

/* About: serif subheads in the prose, and the background as a ruled list with amber ticks */
.prose .about-h { margin: 2.25rem 0 .75rem; font-size: var(--fs-xl); }
.ticks { list-style: none; margin: .25rem 0 1.25rem; padding: 0; max-width: 38rem; border-bottom: 1px solid var(--line); }
.ticks li { position: relative; padding: .7rem 0 .7rem 2rem; border-top: 1px solid var(--line); line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: .2rem; top: 1.05rem; width: .7rem; height: .36rem; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(-45deg); }
.facts-panel dd a { color: var(--ink); text-decoration-color: var(--amber); }