/* Self-hosted, open-licence fonts (SIL OFL 1.1, licences in fonts/). Latin subset, woff2, font-display swap. No CDN. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }

/* Docket Studio law-site kit (ventures/agency/kit), 2026-11-01.
   Premium editorial look: hairline rules, generous spacing, real photography, a restrained palette taken from the firm's logo.
   Static CSS, no CDN, no JS. Self-hosted OFL fonts (fonts.css). Patterns imitate free/MIT ideas (Tailwind spacing scale,
   shadcn-style quiet components); no paid theme code. Each site sets its palette by overriding the tokens in its own site.css. */

:root {
  --paper: #f7f4ee;        /* page */
  --paper-2: #efeae0;      /* quiet band */
  --ink: #1b1a17;          /* text */
  --ink-2: #4a463f;        /* secondary text (AA on paper) */
  --rule: #d8d0c2;         /* hairlines */
  --panel: #1c2230;        /* dark hero panel / footer */
  --on-panel: #f3efe7;
  --on-panel-2: #c9c3b6;
  --accent: #8a2a22;       /* the one accent: calls to action */
  --on-accent: #ffffff;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 72rem;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.65 var(--sans); font-feature-settings: "kern", "liga"; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 var(--s2); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.75rem); font-weight: 400; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 400; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--s2); max-width: 66ch; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 46rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .75rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }
.eyebrow { font: 600 1rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s2); }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--ink-2); }
.small { font-size: 1rem; color: var(--ink-2); }
.rule-top { border-top: 1px solid var(--rule); }

/* ribbon (mock-up label, always on) */
.ribbon { margin: 0; background: var(--ink); color: var(--paper); font: 500 1rem/1.4 var(--sans); text-align: center; padding: .5rem 1rem; max-width: none; }

/* header with logo */
.site-header { background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 1.1rem 0; }
.brand { display: flex; align-items: center; min-height: 48px; line-height: 0; }
.brand img { width: 220px; height: auto; mix-blend-mode: multiply; }
.nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
.nav a { font: 500 1rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; padding: 0; min-height: 48px; display: inline-flex; align-items: center; }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); }
.header-call { font: 600 1rem/1 var(--sans); text-decoration: none; border: 1px solid var(--ink); padding: .85rem 1.1rem; min-height: 48px; display: inline-flex; align-items: center; white-space: nowrap; }
.header-call:hover { background: var(--ink); color: var(--paper); }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; font: 600 1rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--ink); padding: .9rem 1rem; min-height: 48px; display: flex; align-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu ul { list-style: none; margin: 0; padding: .5rem 0; position: absolute; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--rule); z-index: 20; }
.menu li a { display: block; padding: 1rem 1.25rem; font-size: 1.1rem; text-decoration: none; border-top: 1px solid var(--rule); }

/* hero: dark text panel + real photograph */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--panel); color: var(--on-panel); }
.hero .copy { padding: var(--s5) clamp(1.25rem, 5vw, 4.5rem); align-self: center; }
.hero .eyebrow { color: var(--on-panel-2); }
.hero h1 { color: var(--on-panel); }
.hero .lead { color: var(--on-panel-2); }
.hero .photo { position: relative; min-height: 34rem; }
.hero .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: var(--s3); }
.hero .text-link { color: var(--on-panel); font-weight: 500; display: inline-flex; align-items: center; min-height: 48px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .9rem 1.5rem; background: var(--accent); color: var(--on-accent); font: 600 1.05rem/1.2 var(--sans); text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn-quiet { background: transparent; color: inherit; border: 1px solid currentColor; }

/* sections */
.section { padding: var(--s6) 0; }
.section.band { background: var(--paper-2); }
.section-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s4); align-items: end; border-bottom: 1px solid var(--ink); padding-bottom: var(--s3); margin-bottom: var(--s4); }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--ink-2); }

/* practice-area grid: hairline cells, no cards */
.practice-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.practice-grid li { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.practice-grid a, .practice-grid div { display: block; height: 100%; padding: var(--s3); text-decoration: none; }
.practice-grid a:hover { background: var(--paper-2); }
.practice-grid .num { font: 400 1.1rem/1 var(--serif); font-style: italic; color: var(--accent); display: block; margin-bottom: var(--s2); }
.practice-grid h3 { margin-bottom: .5rem; }
.practice-grid p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.practice-grid .more { display: inline-block; margin-top: var(--s2); font-weight: 600; font-size: 1rem; border-bottom: 1px solid currentColor; }

/* attorney card with portrait */
.attorney { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s4); align-items: start; }
.attorney .portrait { border: 1px solid var(--rule); padding: .5rem; background: #fff; }
.attorney .portrait img { width: 100%; }
.attorney .role { font: 600 1rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.facts { list-style: none; margin: var(--s3) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s2); padding: .8rem 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.facts b { font-weight: 600; color: var(--ink-2); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; padding-top: .15rem; }

/* framed photograph with caption */
.figure { margin: 0; }
.figure img { border: 1px solid var(--rule); }
.figure figcaption { font-size: 1rem; color: var(--ink-2); padding-top: .75rem; border-top: 1px solid var(--rule); margin-top: .75rem; font-style: italic; font-family: var(--serif); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }

/* process steps */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s4); }
.steps li { counter-increment: s; border-top: 1px solid var(--ink); padding-top: var(--s2); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 400 2.4rem/1 var(--serif); color: var(--accent); display: block; margin-bottom: var(--s2); }
.steps h3 { font-size: 1.2rem; }
.steps p { font-size: 1rem; color: var(--ink-2); margin: 0; }

/* FAQ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; font: 400 1.25rem/1.35 var(--serif); position: relative; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 1.1rem; font: 300 1.6rem/1 var(--sans); color: var(--accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--ink-2); padding-bottom: var(--s2); }
.faq .src { font-size: 1rem; }

/* two-column for/not-for */
.for-not { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.for-not > div { border-top: 1px solid var(--ink); padding-top: var(--s2); }
.for-not ul { margin: 0; padding-left: 1.1rem; }
.for-not li { margin-bottom: .5rem; }

/* call-back form */
.form { background: #fff; border: 1px solid var(--rule); padding: var(--s4); }
.form label { display: block; font-weight: 600; font-size: 1rem; margin: var(--s2) 0 .35rem; }
.form input:not([type=checkbox]) { width: 100%; min-height: 52px; padding: .75rem .9rem; border: 1px solid #8f877a; background: var(--paper); font: inherit; color: var(--ink); }
.form .consent { display: grid; grid-template-columns: 28px 1fr; gap: .6rem; align-items: start; margin-top: var(--s2); font-size: 1rem; color: var(--ink-2); }
.form .consent { grid-template-columns: 48px 1fr; }
.form .consent input { width: 48px; height: 48px; margin: 0; accent-color: var(--accent); }
.form .consent label { font-weight: 400; margin: 0; }
.form .btn { width: 100%; margin-top: var(--s3); }

/* contact block */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
.nap { font-style: normal; font-size: 1.15rem; line-height: 1.7; }
.big-tel { font: 400 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.1 var(--serif); text-decoration: none; display: inline-flex; align-items: center; min-height: 52px; margin: .25rem 0 var(--s2); border-bottom: 1px solid var(--accent); }

/* footer with disclaimer */
.site-footer { background: var(--panel); color: var(--on-panel-2); padding: var(--s5) 0 7rem; font-size: 1rem; }
.site-footer a { color: var(--on-panel); }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid rgba(255,255,255,.18); }
.site-footer .fname { font: 400 1.5rem/1.2 var(--serif); color: var(--on-panel); margin-bottom: var(--s2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer li a, .site-footer .nap a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }
.site-footer .fine { font-size: 1rem; max-width: 80ch; margin-top: var(--s3); }

/* sticky call bar (phones) */
.callbar { display: none; }

/* ---- 2026-11-03 variants (reference/PATTERNS.md). New classes only; nothing above changed. ---- */
/* header sharpening: an SVG wordmark when the firm has no logo file */
.wordmark-svg { display: block; height: auto; max-width: 100%; color: var(--ink); }
.site-header.on-photo { position: absolute; left: 0; right: 0; z-index: 30; background: transparent; border-bottom: 1px solid rgba(255,255,255,.22); }
.site-header.on-photo .nav a, .site-header.on-photo .wordmark-svg { color: #fff; }
.site-header.on-photo .header-call, .site-header.on-photo .menu summary { border-color: rgba(255,255,255,.7); color: #fff; }
.site-header.on-photo .menu ul a { color: var(--ink); }

/* P1 full-bleed photo hero with scrim; claim low-left */
.hero-full { position: relative; min-height: min(86vh, 48rem); display: flex; align-items: flex-end; color: #fff; background: var(--panel); overflow: hidden; }
.hero-full > img, .hero-full > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-full .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,16,.10) 0%, rgba(10,12,16,.20) 40%, rgba(10,12,16,.78) 100%); }
.hero-full .hf-copy { position: relative; padding: 8rem 0 var(--s5); }
.hero-full h1 { color: #fff; max-width: 17ch; font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.6rem); line-height: 1.04; }
.hero-full .eyebrow, .hero-full .lead { color: rgba(255,255,255,.86); }
.hero-full .lead { max-width: 44ch; }
.hero-full .cta-row { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: var(--s3); }
.hero-full .text-link { color: #fff; font-weight: 500; display: inline-flex; align-items: center; min-height: 48px; }
.hf-proof { list-style: none; margin: var(--s4) 0 0; padding: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; border-top: 1px solid rgba(255,255,255,.3); font-size: 1rem; color: rgba(255,255,255,.86); }

/* P1 + P7 attorney-as-hero (solo firms) */
.hero-portrait { background: var(--paper); border-bottom: 1px solid var(--rule); }
.hp-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: end; padding-top: var(--s5); }
.hp-copy { padding-bottom: var(--s5); }
.hp-copy h1 { font-size: clamp(2.3rem, 1.3rem + 3.8vw, 4.2rem); max-width: 16ch; }
.hp-copy .cta-row { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: var(--s3); }
.hp-copy .text-link { font-weight: 500; display: inline-flex; align-items: center; min-height: 48px; }
.hp-photo { margin: 0; position: relative; }
.hp-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.hp-photo figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 1rem 1.25rem; background: linear-gradient(0deg, rgba(10,12,16,.82), rgba(10,12,16,0)); color: #fff; display: grid; gap: .15rem; font-size: 1rem; }
.hp-photo figcaption b { font: 400 1.4rem/1.2 var(--serif); }
.hp-creds { color: rgba(255,255,255,.85); }

/* P5 typographic hero (no photo yet): big claim + contact card */
.hero-type { background: var(--paper); border-bottom: 1px solid var(--ink); }
.ht-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s5); align-items: end; padding: var(--s6) 0 var(--s5); }
.ht-copy h1 { font-size: clamp(2.5rem, 1.2rem + 5vw, 5.2rem); line-height: 1.02; letter-spacing: -.02em; max-width: 14ch; margin-bottom: var(--s3); }
.ht-copy h1 em { font-style: italic; color: var(--accent); }
.ht-card { background: var(--panel); color: var(--on-panel); padding: var(--s4) var(--s3); display: grid; gap: .5rem; justify-items: start; }
.ht-card .eyebrow, .ht-card .small { color: var(--on-panel-2); margin: 0; }
.ht-card .big-tel { color: var(--on-panel); margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.3rem); white-space: nowrap; }
.ht-card .btn { margin-top: var(--s2); }
@media (max-width: 960px) { .ht-grid { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4) 0; } .ht-card .btn { display: none; } /* the sticky call bar is the one phone action (P3) */ }

/* P6 trust strip: checkable facts, hairline cells */
.trust-strip { background: var(--paper); border-bottom: 1px solid var(--rule); }
.trust-strip ul { list-style: none; margin-block: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.trust-strip li { padding: var(--s3) var(--s3) var(--s3) 0; border-right: 1px solid var(--rule); display: grid; gap: .25rem; }
.trust-strip li + li { padding-left: var(--s3); }
.trust-strip li:last-child { border-right: 0; }
.trust-strip b { font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.05 var(--serif); color: var(--ink); }
.trust-strip span { font-size: 1rem; color: var(--ink-2); }

/* P8 practice tiles with photographs */
.practice-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s4) var(--s3); }
.practice-tiles a, .practice-tiles > li > div { display: block; text-decoration: none; height: 100%; }
.pt-img { overflow: hidden; background: var(--paper-2); }
.pt-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.practice-tiles a:hover .pt-img img { transform: scale(1.03); }
.pt-body { padding-top: var(--s2); border-top: 2px solid var(--accent); margin-top: var(--s2); }
.pt-body h3 { margin-bottom: .4rem; }
.pt-body p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.pt-body .more { display: inline-block; margin-top: .75rem; font-weight: 600; font-size: 1rem; border-bottom: 1px solid currentColor; }

/* P3 + P9 closing call band */
.cta-band { background: var(--panel); color: var(--on-panel); padding: var(--s5) 0; }
.cb-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4); align-items: center; }
.cta-band h2 { color: var(--on-panel); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); margin: 0 0 var(--s2); }
.cta-band p { color: var(--on-panel-2); }
.cb-act { display: grid; gap: var(--s2); justify-items: start; }
.cta-band .big-tel { color: var(--on-panel); margin: 0; }
.cta-band .small { color: var(--on-panel-2); margin: 0; }
@media (max-width: 960px) {
  .site-header.on-photo { position: relative; background: var(--panel); }
  .hero-full { min-height: 34rem; }
  .hero-full .hf-copy { padding: 6rem 0 var(--s4); }
  .hp-grid { grid-template-columns: 1fr; gap: 0; padding-top: var(--s3); }
  .hp-photo { order: -1; max-width: 26rem; }
  .hp-photo img { aspect-ratio: 1 / 1; }
  .hp-copy { padding: var(--s3) 0 var(--s4); }
  .trust-strip ul { grid-template-columns: 1fr 1fr; }
  .trust-strip li, .trust-strip li + li { padding: var(--s2) var(--s2) var(--s2) 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .cb-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pt-img img { transition: none; } }

/* responsive */
@media (max-width: 960px) {
  .nav, .header-call { display: none; }
  .menu { display: block; }
  .site-header .bar { position: relative; }
  .brand img { width: 180px; }
  .hero { grid-template-columns: 1fr; }
  .hero .photo { min-height: 15rem; order: -1; }
  .hero .copy { padding: var(--s4) 1.25rem var(--s4); }
  .section { padding: var(--s5) 0; }
  .section-head, .split, .contact-grid, .for-not, .attorney { grid-template-columns: 1fr; gap: var(--s3); }
  .attorney .portrait { max-width: 11rem; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .callbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; min-height: 60px; align-items: center; justify-content: center; gap: .5rem; background: var(--accent); color: var(--on-accent); font: 600 1.1rem/1 var(--sans); text-decoration: none; box-shadow: 0 -1px 0 rgba(0,0,0,.2); }
  body { padding-bottom: 60px; }
  .facts li { grid-template-columns: 1fr; gap: .2rem; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- 2026-11-03 template-library variants (ventures/agency/templates). New classes only; nothing above changed.
   Backup of the file before this block: kit.css.pre-templates. Pattern grounds are pure CSS gradients: no image files, no art. ---- */
.photo-slot { position: relative; display: grid; align-content: end; gap: .2rem; padding: 1.1rem 1.25rem; width: 100%; color: var(--ink-2); overflow: hidden;
  background: var(--paper-2) repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.045) 14px 15px); border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.photo-slot.ps-fill { height: 100%; min-height: 18rem; }
.photo-slot.ps-dark { color: rgba(255,255,255,.82); background: color-mix(in srgb, var(--panel) 88%, #fff) repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.06) 14px 15px); border-color: rgba(255,255,255,.35); }
.ps-tag { font: 600 1rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; justify-self: start; padding: .3rem .55rem; border: 1px solid currentColor; }
.ps-label { font: 400 1.05rem/1.35 var(--serif); }
.ps-note { font-size: 1rem; opacity: .85; }

.lang-switch ul { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; border: 1px solid currentColor; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; justify-content: center; padding: 0 .8rem; font: 600 1rem/1 var(--sans); text-decoration: none; }
.lang-switch a[aria-current] { background: var(--ink); color: var(--paper); }

.alert-bar { background: var(--accent); color: var(--on-accent); }
.ab-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 52px; }
.alert-bar p { margin: 0; font: 500 1rem/1.35 var(--sans); max-width: none; }
.alert-bar a { font: 700 1.05rem/1 var(--sans); white-space: nowrap; display: inline-flex; align-items: center; min-height: 48px; }

.hero-intake { background: var(--panel); color: var(--on-panel); }
.hi-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: center; padding: var(--s5) 0; }
.hi-copy h1 { color: var(--on-panel); font-size: clamp(2.4rem, 1.2rem + 4vw, 4.4rem); line-height: 1.03; max-width: 15ch; }
.hi-copy .eyebrow, .hi-copy .lead { color: var(--on-panel-2); }
.hi-copy .cta-row { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: var(--s3); }
.hi-copy .text-link { color: var(--on-panel); font-weight: 500; display: inline-flex; align-items: center; min-height: 48px; }
.hi-points { list-style: none; margin: var(--s4) 0 0; padding: var(--s2) 0 0; border-top: 1px solid rgba(255,255,255,.25); display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; color: var(--on-panel-2); font-size: 1rem; }
.hi-form .form { color: var(--ink); }
.hi-form .form h3 { margin-top: 0; }

.hero-motif { position: relative; background-color: var(--panel); color: var(--on-panel); overflow: hidden; }
.hm-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: center; padding: var(--s6) 0 var(--s5); }
.hm-grid.hm-solo { grid-template-columns: minmax(0, 1fr); }
.hm-copy h1 { color: var(--on-panel); font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -.02em; max-width: 16ch; }
.hm-copy .eyebrow, .hm-copy .lead { color: var(--on-panel-2); }
.hm-copy .lead { max-width: 46ch; }
.hm-copy .cta-row { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: var(--s3); }
.hm-copy .text-link { color: var(--on-panel); font-weight: 500; display: inline-flex; align-items: center; min-height: 48px; }
.hm-note { color: var(--on-panel-2); font-size: 1rem; margin-top: var(--s3); }
.hm-aside { align-self: stretch; display: grid; }
.motif-columns { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 2px, transparent 2px 22px, rgba(255,255,255,.03) 22px 24px, transparent 24px 64px); }
.motif-grid { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; }
.motif-lines { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px); }
.motif-dots { background-image: radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.6px); background-size: 22px 22px; }
.motif-arcs { background-image: radial-gradient(circle at 100% 100%, transparent 0 38%, rgba(255,255,255,.06) 38% 38.4%, transparent 38.4% 52%, rgba(255,255,255,.05) 52% 52.4%, transparent 52.4% 66%, rgba(255,255,255,.04) 66% 66.4%, transparent 66.4%); }
.motif-ledger { background-image: linear-gradient(90deg, transparent 0 4.5rem, rgba(255,255,255,.12) 4.5rem calc(4.5rem + 1px), transparent calc(4.5rem + 1px)), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 30px); }

.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s3); }
.pc { background: #fff; border: 1px solid var(--rule); padding: var(--s4) var(--s3); display: flex; flex-direction: column; }
.pc-featured { border: 2px solid var(--accent); }
.pc h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.pc-price { display: flex; align-items: baseline; gap: .5rem; border-bottom: 1px solid var(--rule); padding-bottom: var(--s2); }
.pc-price b { font: 400 2.4rem/1 var(--serif); color: var(--ink); }
.pc-price span { color: var(--ink-2); font-size: 1rem; }
.pc ul { margin: var(--s2) 0 0; padding-left: 1.1rem; font-size: 1rem; }
.pc li { margin-bottom: .4rem; }
.pc-disclaimer { margin-top: var(--s3); }

.checklist h3 { margin-bottom: var(--s2); }
.checklist ul { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: var(--s4); }
.checklist ul.cl-one { columns: 1; }
.checklist li { break-inside: avoid; position: relative; padding: .7rem 0 .7rem 2.1rem; border-bottom: 1px solid var(--rule); }
.checklist li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--accent); }
.checklist li::after { content: ""; position: absolute; left: .38rem; top: 1.08rem; width: .4rem; height: .7rem; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.index-list li { border-bottom: 1px solid var(--rule); }
.index-list a, .index-list li > div { display: grid; grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 6fr) auto; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; text-decoration: none; }
.index-list a:hover .il-title { color: var(--accent); }
.il-num { font: 400 1.1rem/1 var(--serif); font-style: italic; color: var(--accent); }
.il-title { font: 400 1.6rem/1.15 var(--serif); }
.il-text { color: var(--ink-2); font-size: 1rem; }
.il-meta { font: 600 1rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }

.bi-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.bi-pair > div { padding: var(--s3) var(--s4) var(--s3) 0; }
.bi-pair > div + div { padding: var(--s3) 0 var(--s3) var(--s4); border-left: 1px solid var(--rule); }

.statement-band { background-color: var(--panel); color: var(--on-panel); padding: var(--s6) 0; }
.sb-text { font: 400 clamp(1.7rem, 1.1rem + 2.4vw, 3rem)/1.2 var(--serif); max-width: 30ch; margin: 0; letter-spacing: -.01em; }
.sb-by { color: var(--on-panel-2); margin: var(--s3) 0 0; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }

.chip-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chip-links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.1rem; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 1rem; background: var(--paper); }
.chip-links a:hover { background: var(--ink); color: var(--paper); }

.facts-table { margin: 0; border-top: 1px solid var(--ink); }
.facts-table > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s3); padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.facts-table dt { font-weight: 600; }
.facts-table dd { margin: 0; color: var(--ink-2); }

@media (max-width: 960px) {
  .hi-grid, .hm-grid { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s4) 0; }
  .hm-aside .photo-slot { min-height: 12rem; }
  .ab-row { min-height: 48px; }
  .alert-bar p { font-size: 1rem; }
  .index-list a, .index-list li > div { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .35rem var(--s2); }
  .il-text, .il-meta { grid-column: 2; }
  .bi-pair { grid-template-columns: 1fr; }
  .bi-pair > div, .bi-pair > div + div { padding: var(--s3) 0; border-left: 0; }
  .bi-pair > div + div { border-top: 1px solid var(--rule); }
  .facts-table > div { grid-template-columns: 1fr; gap: .25rem; }
  .statement-band { padding: var(--s5) 0; }
}

/* site tokens and overrides */
:root{--ink:#0a1020;--ink-2:#131c33;--surface:#f4f6fb;--surface-2:#e9edf6;--text:#0d1426;--muted:#4a5468;--on-ink:#f2f5fb;--on-ink-2:#b4bdd0;--accent:#3ee0b0;--accent-ink:#04261c;--accent-2:#8b7bff;--glow:rgba(62,224,176,.22);--glow-2:rgba(139,123,255,.20);--line:rgba(13,20,38,.12);--line-dark:rgba(242,245,251,.14)}
/* Northcase brand, the owner's pick (2026-11-08): ink blue + sky, with gold accents "here and there, just to make it pop".
   Uses the site's own variable names, so build-pages.js appends it over its defaults. Gold rule: gold is TEXT only on dark
   grounds (--gold, 9.6:1 on ink); on light grounds it is a line or a dot, or --gold-ink (5.3:1) for small numerals. */
:root{
--ink:#0B1F3A;--ink-2:#12294A;--surface:#FBF8F3;--surface-2:#F3EDE3;--text:#0B1F3A;--muted:#4A5160;
--on-ink:#F5F9FC;--on-ink-2:#A9BCD4;
--accent:#4CC9F0;--accent-ink:#0B1F3A;--accent-2:#0B6E99;
--gold:#F2C14E;--gold-ink:#8A6410;--gold-line:#E0A93B;
--glow:rgba(76,201,240,.20);--glow-2:rgba(242,193,78,.14);
--line:rgba(11,31,58,.12);--line-dark:rgba(245,249,252,.14);
--violet:#2A1B5C;--teal:#0E3B3A;--navy-mid:#1D2F5E;--glow-3:rgba(123,224,176,.10)}
/* [WARM PASS 2026-11-08] owner: "a little TOO blue... maybe some gradients or other colors". Light grounds are warm ivory and sand
   (no blue tint); dark bands are gradients into violet or teal (the purple and green from round 4). Contrast, all AA:
   ink on ivory 15.6, muted on sand 6.8, gold-ink on sand 4.6, on-ink-2 on violet 7.7, on teal 6.4, ink on gold button 9.8. */


body.nc{background:var(--surface);color:var(--text);font:400 1.125rem/1.6 Manrope,"Segoe UI",system-ui,sans-serif;--serif:Manrope,"Segoe UI",system-ui,sans-serif;--sans:var(--serif)}
.nc p{max-width:31em}
.nc h1,.nc h2,.nc h3{font-family:Manrope,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.12;color:inherit}
.nc .ribbon{max-width:none;background:var(--ink-2);color:var(--on-ink);font-family:Manrope,sans-serif}
.nc a{color:inherit}
.nc-head{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--on-ink);border-bottom:1px solid var(--line-dark)}
.nc-bar{display:flex;align-items:center;gap:1.5rem;min-height:68px;position:relative}
.nc-head .nc-logo,.nc-foot .nc-logo{--nc-ink:var(--on-ink);--nc-paper:var(--ink);height:40px;width:auto}
.nc-brand{display:inline-flex;align-items:center;min-height:48px;color:var(--on-ink);text-decoration:none;margin-right:auto}
.nc-nav ul{display:flex;gap:.25rem 1.75rem;list-style:none;margin:0;padding:0}
.nc-nav a{display:inline-flex;align-items:center;min-height:48px;text-decoration:none;font-weight:500;color:var(--on-ink-2)}
.nc-nav a:hover,.nc-nav a[aria-current]{color:var(--on-ink)}
.nc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.5rem;border-radius:4px;background:var(--accent);color:var(--accent-ink)!important;font:700 1.0625rem/1.2 Manrope,sans-serif;text-decoration:none;border:1px solid var(--accent);transition:transform .2s}
.nc-btn:hover{transform:translateY(-2px)}
.nc-btn-ghost{background:transparent;color:var(--on-ink)!important;border-color:var(--on-ink-2)}
.nc-btn-ghost-dark{background:transparent;color:var(--text)!important;border-color:var(--text)}
.nc-menu{display:none}
.nc-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:48px;padding:0 1rem;border:1px solid var(--on-ink-2);border-radius:4px;font-weight:700}
.nc-menu summary::-webkit-details-marker{display:none}
.nc-menu ul{list-style:none;margin:0;padding:.5rem 0;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.nc-menu li a{display:flex;align-items:center;min-height:48px;padding:0 1.25rem;text-decoration:none;color:var(--on-ink)}
.nc-eyebrow{font:700 1rem/1.5 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem}
.nc-light .nc-eyebrow{color:var(--muted)}
.nc-hero,.nc-pagehead{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink)}
.nc-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(40rem 26rem at 78% 30%,var(--glow),transparent 70%),radial-gradient(34rem 24rem at 12% 85%,var(--glow-2),transparent 70%)}
.nc-glow-2{background:radial-gradient(36rem 22rem at 85% 15%,var(--glow-2),transparent 70%)}
.nc-hero{padding:4.5rem 0 3.5rem}
.nc-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:center}
.nc-hero h1{font-size:clamp(2.5rem,1.4rem + 3vw,4rem);margin:0 0 1.25rem}
.nc-hl{color:var(--accent)}
.nc-lead{font-size:1.25rem;line-height:1.55;color:var(--on-ink-2);margin:0 0 2rem}
.nc-actions{display:flex;flex-wrap:wrap;gap:1rem;margin:0}
.nc-stage{position:relative;min-height:30rem}
.nc-desk{background:#1d2436;border:1px solid var(--line-dark);border-radius:8px;padding:0 6px 6px;box-shadow:0 18px 30px rgba(0,0,0,.12)}
.nc-desk-bar{display:flex;align-items:center;gap:.9rem;min-height:34px;padding:0 .5rem;color:#f2f5fb}
.nc-dots{display:flex;gap:6px}.nc-dots i{width:9px;height:9px;border-radius:50%;background:#56607a;display:block}
.nc-tag{font:700 1rem/1 Manrope,sans-serif;letter-spacing:.02em;color:#f2f5fb}
.nc-desk img{display:block;width:100%;height:auto;border-radius:3px}
.nc-desk-back{position:absolute;top:0;right:0;width:68%}
.nc-desk-front{position:absolute;left:0;top:4.5rem;width:86%}
.nc-phone{position:absolute;right:2%;bottom:0;width:22%;background:#1d2436;border:1px solid var(--line-dark);border-radius:22px;padding:48px 6px 10px;box-shadow:0 18px 30px rgba(0,0,0,.12)}
.nc-phone img{display:block;width:100%;height:auto;border-radius:12px}
.nc-tag-phone{position:absolute;top:8px;left:0;right:0;text-align:center;line-height:1.1}
.nc-proofwrap{position:relative}
.nc-proofstrip .ph{display:inline-block}
.nc-proofstrip{list-style:none;margin:3.5rem 0 0;padding:1.5rem 0 0;border-top:1px solid var(--line-dark);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;font-size:1.25rem;font-weight:700}
.nc-logos{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.nc-logos li{display:flex}.nc-logos .ph{flex:1;display:flex;align-items:center;justify-content:center;min-height:64px;text-align:center;font-size:1rem}
.ph{outline:2px dashed var(--accent);outline-offset:3px;border-radius:2px;padding:0 .25rem}
.nc-light .ph{outline-color:var(--text)}
.nc-band{position:relative;padding:6rem 0}
.nc-light{background:var(--surface);color:var(--text)}
.nc-light + .nc-light{background:var(--surface-2)}
.nc-dark{background:var(--ink);color:var(--on-ink);overflow:hidden}
.nc-dark-2{background:var(--ink-2)}
.nc-dark p{color:var(--on-ink-2)}
.nc-head2{position:relative;margin-bottom:3rem}
.nc-head2 h2{font-size:clamp(2rem,1.3rem + 1.8vw,3rem);margin:0 0 1rem;max-width:20ch}
.nc-head2 p{color:var(--muted);margin:0}.nc-dark .nc-head2 p{color:var(--on-ink-2)}
.nc-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:2rem}
.nc-light + .nc-light .nc-card{background:var(--surface)}
.nc-card-dark{background:var(--ink-2);border-color:var(--line-dark)}
.nc-dark-2 .nc-card-dark{background:var(--ink)}
.nc-num{display:block;font-weight:700;font-size:1.125rem;color:var(--muted);margin-bottom:1rem}
.nc-dark .nc-num{color:var(--accent)}
.nc-card h3{font-size:1.5rem;margin:0 0 .6rem}.nc-card p{margin:0;color:var(--muted)}.nc-dark .nc-card p{color:var(--on-ink-2)}
.nc-show-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.nc-show-card{padding:0;overflow:hidden}
.nc-scroll{display:block;background:#1d2436;padding:0 6px 6px;text-decoration:none}
.nc-scroll-win{display:block;height:26rem;overflow:hidden;border-radius:3px}
.nc-scroll-win img{display:block;width:100%;height:auto}
.nc-show-copy{padding:1.75rem 2rem 2rem}
.nc-kicker{font:700 1rem/1.5 Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;margin:0 0 .4rem!important}
.nc-dark .nc-kicker{color:var(--accent)!important}
.nc-show-copy h3 span{font-size:1.125rem;font-weight:400;color:var(--muted)}
.nc-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line)}
.nc-proof dt{font-size:1rem;color:var(--muted)}.nc-proof dd{margin:0;font-weight:700;font-size:1.5rem}
.nc-src{font-size:1rem;color:var(--muted);margin-top:2rem}.nc-src-dark{color:var(--on-ink-2)!important}
.nc-clients{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:1.5rem}
.nc-quote{margin:0}.nc-quote blockquote{margin:0 0 1.5rem}.nc-quote blockquote p{font-size:1.6rem;line-height:1.5;color:var(--on-ink)!important}
.nc-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.nc-prom{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.25rem}
.nc-prom h3{font-size:1.25rem}
.nc-cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.nc-prom.nc-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.nc-steps+.nc-cards2{margin-top:1.5rem}.nc-cards2+.nc-actions{margin-top:2rem}
.nc-card-feature p+p{margin-top:1.5rem}
.nc-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1rem 0 1.5rem}
.nc-prices div{border-top:2px solid var(--text);padding-top:1rem}
.nc-prices dt{font-size:1rem;color:var(--muted)}.nc-prices dd{margin:.25rem 0;font-size:1.9rem;font-weight:700;letter-spacing:-.02em}
.nc-prices-page{margin:2rem 0}.nc-prices-page p{font-size:1rem;color:var(--muted)}
.nc-pagehead{padding:4.5rem 0 4rem}.nc-pagehead .wrap{position:relative}.nc-pagehead h1{font-size:clamp(2.2rem,1.4rem + 2.2vw,3.25rem);max-width:20ch;margin:0 0 1rem}
.nc-prose{max-width:46rem}.nc-prose h2{font-size:1.6rem;margin:2.5rem 0 .75rem}.nc-prose li{margin-bottom:.5rem}
.nc-note{border-left:3px solid var(--text);padding:.25rem 0 .25rem 1.25rem}
.nc-table{overflow-x:auto}.nc-table table{border-collapse:collapse;width:100%;font-size:1rem}
.nc-table th,.nc-table td{text-align:left;vertical-align:top;padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--line)}
.nc-foot{background:var(--ink);color:var(--on-ink);padding:4rem 0 5rem}
.nc-foot a{display:inline-flex;align-items:center;min-height:48px;color:var(--on-ink)}
.nc-foot p{color:var(--on-ink-2)}
.nc-foot-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem}.nc-foot ul{list-style:none;margin:0;padding:0}
.nc-fine{font-size:1rem;border-top:1px solid var(--line-dark);padding-top:1.5rem;margin-top:2rem}
@media (prefers-reduced-motion:no-preference){
.nc-rise{animation:nc-rise .7s ease-out both}.nc-rise-2{animation-delay:.12s}
@keyframes nc-rise{from{transform:translateY(16px)}to{transform:none}}
.nc-scroll-win img{transition:transform 7s ease-in-out}
.nc-scroll:hover .nc-scroll-win img,.nc-scroll:focus-visible .nc-scroll-win img{transform:translateY(calc(-100% + 26rem))}}
@media (max-width:960px){
.nc-prom.nc-steps{grid-template-columns:1fr}
.nc-nav{display:none}.nc-menu{display:block}.nc-bar{min-height:59px;max-height:59px;gap:1rem}.nc-head .nc-logo{height:34px}
.nc-hero{padding:2.5rem 0}.nc-hero-grid,.nc-clients,.nc-cards3,.nc-cards2,.nc-show-grid,.nc-foot-grid{grid-template-columns:1fr}
.nc-stage{min-height:0;aspect-ratio:4/3}.nc-desk-front{top:3rem}
.nc-actions{flex-direction:column;align-items:stretch}.nc-proofstrip{grid-template-columns:1fr;gap:1rem}.nc-logos{grid-template-columns:1fr 1fr}.nc-phone{width:30%;padding-top:72px}.nc-desk-back .nc-tag{white-space:nowrap;overflow:hidden}.nc-prom{grid-template-columns:1fr}.nc-proof{grid-template-columns:1fr 1fr}
.nc-band{padding:3.5rem 0}.nc-scroll-win{height:20rem}.nc-card{padding:1.5rem}.nc-show-card{padding:0}
.nc-prices{grid-template-columns:1fr}.nc-quote blockquote p{font-size:1.3rem}
@media (prefers-reduced-motion:no-preference){.nc-scroll:hover .nc-scroll-win img,.nc-scroll:focus-visible .nc-scroll-win img{transform:translateY(calc(-100% + 20rem))}}}

@font-face{font-family:Manrope;src:url(fonts/manrope-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-latin-600-normal.woff2) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope-latin-800-normal.woff2) format('woff2');font-weight:700 800;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-600-italic.woff2) format('woff2');font-style:italic;font-weight:600;font-display:swap}
.nc h1,.nc h2{font-weight:800;letter-spacing:-.03em}
.nc-hl{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:600;letter-spacing:-.01em;color:var(--accent);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.07em;text-underline-offset:.14em}
.nc-head .nc-logo,.nc-foot .nc-logo{--nc-ink:var(--on-ink);--nc-accent:var(--accent);--nc-tile:var(--accent);--nc-accent2:var(--ink)}
.nc-head{border-bottom:1px solid var(--line-dark);box-shadow:inset 0 -2px 0 -1px var(--gold)}
.nc-dark .nc-eyebrow,.nc-hero .nc-eyebrow,.nc-pagehead .nc-eyebrow{color:var(--gold)}
.nc-light .nc-head2::before{content:'';display:block;width:3rem;height:3px;background:var(--gold-line);margin-bottom:1.25rem;border-radius:2px}
.nc-dark .nc-num{color:var(--gold)}.nc-light .nc-num{color:var(--gold-ink)}
.nc-dark .nc-kicker{color:var(--gold)!important}
.nc-proofstrip{border-top-color:rgba(242,193,78,.35)}
.nc-prices div{border-top-color:var(--gold-line)}
.nc-show-card:hover,.nc-show-card:focus-within{border-color:var(--gold-line)}
.nc-btn-ghost:hover{border-color:var(--gold)}

.nc-hero,.nc-pagehead{background:linear-gradient(135deg,var(--ink) 0%,var(--navy-mid) 48%,var(--violet) 100%)}
.nc-glow{background:radial-gradient(40rem 26rem at 80% 25%,var(--glow),transparent 70%),radial-gradient(34rem 24rem at 8% 92%,var(--glow-2),transparent 70%),radial-gradient(30rem 20rem at 50% 110%,var(--glow-3),transparent 70%)}
.nc-dark{background:linear-gradient(160deg,var(--ink) 0%,var(--teal) 100%)}
.nc-dark-2{background:linear-gradient(160deg,var(--ink-2) 0%,var(--violet) 100%)}
.nc-dark .nc-card-dark{background:rgba(11,31,58,.45);border-color:rgba(245,249,252,.12)}
.nc-btn{background:linear-gradient(135deg,var(--gold) 0%,#F7D77E 100%);border-color:var(--gold-line);color:var(--ink)!important}
.nc-btn:hover{box-shadow:0 8px 24px -10px rgba(242,193,78,.7)}
.nc-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.nc-btn.nc-btn-ghost{background:transparent;border-color:var(--on-ink-2);color:var(--on-ink)!important}.nc-btn.nc-btn-ghost:hover{border-color:var(--gold);box-shadow:none}.nc-light .nc-btn.nc-btn-ghost{color:var(--text)!important;border-color:var(--text)}
.nc-foot{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--accent),var(--violet),var(--gold)) 1}
.nc-nav a,.nc-menu a{min-width:48px;justify-content:center}
.nc-stickycall{display:none}
@media (max-width:960px){.nc-stickycall{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;min-height:56px;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),#F7D77E);color:var(--ink);font:800 1.0625rem/1 Manrope,sans-serif;text-decoration:none;box-shadow:0 -6px 18px -8px rgba(11,31,58,.4)}body.nc{padding-bottom:56px}}
.nc-form{display:grid;gap:1rem}.nc-field{display:grid;gap:.35rem}.nc-field label{font-weight:600}
.nc-field input,.nc-field select{font:inherit;min-height:48px;padding:.6rem .8rem;border:1px solid var(--muted);border-radius:4px;background:#fff;color:var(--text)}
.nc-field input:focus-visible,.nc-field select:focus-visible{outline:3px solid var(--accent-2);outline-offset:1px}

main{position:relative}
.nc-pause-in{position:absolute;opacity:0;width:1px;height:1px}
.nc-pause{position:absolute;z-index:6;right:1rem;top:1rem;display:inline-flex;align-items:center;min-height:48px;padding:0 1rem;border:1px solid var(--line-dark);border-radius:999px;background:rgba(11,31,58,.55);color:var(--on-ink);font-size:1rem;font-weight:600;cursor:pointer}
.nc-pause-in:focus-visible + .nc-pause{outline:3px solid var(--gold);outline-offset:2px}
.nc-pause-in:checked + .nc-pause::after{content:' (paused)'}
.nc-pause-in:checked ~ * *,.nc-pause-in:checked ~ * *::after{animation-play-state:paused!important}
/* sheets: every band after the hero is a rounded sheet laid over the one before it */
main > .nc-band{border-radius:2.75rem 2.75rem 0 0;margin-top:-2.75rem;box-shadow:0 -14px 30px -14px rgba(11,31,58,.12)}
.nc-hero-v3{padding:5rem 0 0}
.nc-drafting{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(60rem 30rem at 78% 18%,rgba(76,201,240,.16),transparent 62%),radial-gradient(42rem 26rem at 6% 100%,rgba(242,193,78,.12),transparent 62%)}
.nc-drafting::after{content:'';position:absolute;left:-20%;right:-20%;bottom:0;height:62%;background-image:linear-gradient(rgba(169,188,212,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(169,188,212,.12) 1px,transparent 1px);background-size:56px 56px;transform:perspective(520px) rotateX(60deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent);mask-image:linear-gradient(to top,#000 10%,transparent)}
.nc-stage3d{position:relative;perspective:1700px;min-height:36rem}
.nc-dev{position:absolute;margin:0;background:#1d2436;border:1px solid var(--line-dark);box-shadow:0 24px 30px -12px rgba(0,0,0,.12),0 0 0 1px rgba(245,249,252,.06)}
.nc-dev-desk{top:0;left:2%;width:122%;border-radius:10px;padding:0 6px 6px;transform:rotateY(-17deg) rotateX(5deg);transform-origin:0 50%}
.nc-dev-win{overflow:hidden;border-radius:4px;aspect-ratio:16/10;background:#fff}
.nc-dev-phone{left:5%;bottom:-.5rem;width:11.5rem;border-radius:30px;padding:44px 7px 10px;transform:rotateY(12deg) rotateZ(-3deg)}
.nc-dev-phone .nc-dev-win{aspect-ratio:390/844;border-radius:18px;background:#F4EFE6}
.nc-autoscroll{display:block;width:100%;height:auto}
.nc-dim{position:absolute;display:flex;align-items:center;gap:.5rem;color:var(--gold);font:600 1rem/1 Manrope,sans-serif;letter-spacing:.06em}
.nc-dim::before,.nc-dim::after{content:'';flex:1;height:1px;background:currentColor;opacity:.6}
.nc-dim-w{left:0;right:0;top:-2rem}
.nc-dim-p{left:0;right:0;bottom:-2.2rem}
.nc-chip{position:absolute;right:-2%;bottom:1rem;max-width:21rem;margin:0;padding:.7rem 1rem;border:1px solid rgba(242,193,78,.55);border-radius:8px;background:rgba(11,31,58,.82);color:var(--on-ink);font-size:1rem;line-height:1.4}
.nc-ticker{position:relative;display:flex;overflow:hidden;margin-top:3rem;padding:1.1rem 0 calc(1.1rem + 2.75rem);border-top:1px solid var(--line-dark);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nc-tick{display:flex;flex:none;gap:3rem;margin:0;padding:0 1.5rem;list-style:none;color:var(--on-ink-2);font-weight:600;white-space:nowrap}
.nc-tick li::before{content:'\2713';margin-right:.6rem;color:var(--gold)}
/* case studies: a staggered wall */
.nc-show-grid{align-items:start}
@media (min-width:961px){.nc-show-card:nth-child(even){margin-top:7rem}}
.nc-scroll-win{--win:26rem}
/* the checklist at work */
.nc-edit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem;align-items:center}
.nc-browser{background:#1d2436;border:1px solid var(--line-dark);border-radius:10px;padding:0 6px 6px;box-shadow:0 24px 30px -12px rgba(0,0,0,.12);transform:rotate(-1.2deg)}
.nc-edits{display:grid;margin:0;padding:2.25rem 2rem;list-style:none;background:#FBF8F3;border-radius:4px;min-height:17rem}
.nc-ed{grid-area:1/1;align-self:center}
.nc-ed-line,.nc-dark .nc-ed-line{margin:0 0 1.25rem;color:#0B1F3A;font:600 clamp(1.4rem,1rem + 1.4vw,2rem)/1.3 Fraunces,Georgia,serif}
.nc-ed-line del{text-decoration:line-through;text-decoration-thickness:.09em;text-decoration-color:#C2410C;color:#46566E}
.nc *{font-feature-settings:"kern" 1,"liga" 0,"calt" 0}
.nc-ed-line ins{display:block;margin-top:.6rem;text-decoration:none;color:#0B1F3A;font-family:Manrope,sans-serif;font-weight:800;font-style:normal;background:linear-gradient(transparent 62%,rgba(242,193,78,.55) 62%)}
.nc-ed-line del + ins{display:block;margin-top:.6rem}
.nc-ed-rule{display:inline-block;margin:0;padding:.45rem .8rem;border-radius:4px;background:#0B1F3A;color:#F2C14E;font-size:1rem;font-weight:700}.nc-dark .nc-ed-rule{color:#F2C14E}
/* who it's for: lawyers as dots */
.nc-lawyers{display:flex;flex-wrap:wrap;gap:6px;max-width:7.5rem;min-height:2.5rem;margin-bottom:1.1rem}
.nc-lawyers i{width:16px;height:16px;border-radius:50%;background:var(--gold-line);box-shadow:inset 0 -4px 0 rgba(11,31,58,.12)}
/* how we work: ledger */
.nc-ledger-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;align-items:start}
.nc-sticky{position:sticky;top:7rem}
.nc-ledger{list-style:none;margin:0;padding:0}
.nc-ledger li{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:1.5rem;align-items:baseline;padding:2rem 0;border-top:1px solid var(--line)}
.nc-ledger li:last-child{border-bottom:1px solid var(--line)}
.nc-ledger .nc-num{font:600 italic 3.5rem/1 Fraunces,Georgia,serif;color:var(--gold-ink)}
.nc-ledger h3{margin:0 0 .4rem;font-size:1.5rem}.nc-ledger p{margin:0;color:var(--muted)}
/* how a build works: one drawn path through three steps */
.nc-path{position:relative}
.nc-path svg{position:absolute;left:0;right:0;top:0;width:100%;height:3.5rem;overflow:visible}
.nc-path path{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke;opacity:.8}
.nc-steps .nc-step{position:relative;background:none;border:0;padding:0 1.5rem 0 0}
.nc-step .nc-num{display:inline-grid;place-items:center;width:3.5rem;height:3.5rem;margin-bottom:1.25rem;border:2px solid var(--gold);border-radius:50%;background:var(--ink);color:var(--gold);font-weight:800}
@media (max-width:960px){
main > .nc-band{border-radius:1.75rem 1.75rem 0 0;margin-top:-1.75rem}
.nc-hero-v3{padding-top:4.5rem}
.nc-stage3d{min-height:0;aspect-ratio:4/3.4;margin-top:1rem}
.nc-dev-desk{width:100%;left:0;transform:rotateY(-9deg) rotateX(3deg)}
.nc-dev-phone{width:36%;left:-2%;padding-top:52px;border-radius:22px}
.nc-dev-phone .nc-tag-phone{font-size:1rem;line-height:1.15}
.nc-dim{display:none}
.nc-chip{display:none}
.nc-ticker{padding-bottom:calc(1.1rem + 1.75rem)}
.nc-scroll-win{--win:20rem}
.nc-edit-grid,.nc-ledger-grid{grid-template-columns:1fr;gap:2rem}
.nc-sticky{position:static}
.nc-ledger li{grid-template-columns:4rem minmax(0,1fr)}.nc-ledger .nc-num{font-size:2.5rem}
.nc-path svg{display:none}
.nc-edits{padding:1.5rem 1.25rem;min-height:19rem}
}
@media (prefers-reduced-motion:no-preference){
.nc-drafting::after{animation:nc-grid 14s linear infinite}
@keyframes nc-grid{to{background-position:0 56px,0 0}}
.nc-autoscroll{animation:nc-pagescroll var(--t) ease-in-out infinite alternate}
@keyframes nc-pagescroll{0%,6%{transform:none}94%,100%{transform:translateY(var(--y))}}
.nc-stage3d:hover .nc-autoscroll{animation-play-state:paused}
.nc-tick{animation:nc-tick 55s linear infinite}
.nc-ticker:hover .nc-tick{animation-play-state:paused}
@keyframes nc-tick{to{transform:translateX(-100%)}}
.nc-show-card .nc-scroll-win img{transition:none;animation:nc-pan var(--t,32s) ease-in-out infinite alternate}
.nc-scroll:hover .nc-scroll-win img,.nc-scroll:focus-visible .nc-scroll-win img{animation-play-state:paused;transform:none}
@keyframes nc-pan{0%,8%{transform:none}92%,100%{transform:translateY(calc(-100% + var(--win)))}}
/* the edit loop: 18 s, three lines, 6 s each. Visibility and clip-path only, so text contrast never sits half-faded */
.nc-ed{visibility:hidden;animation:nc-ed 18s var(--d) infinite}
.nc-ed:first-child{visibility:visible}
@keyframes nc-ed{0%{visibility:visible;transform:translateY(10px)}3%{transform:none}31%{visibility:visible}33.4%,100%{visibility:hidden}}
.nc-ed-line del{animation:nc-strike 18s var(--d) infinite}
@keyframes nc-strike{0%,4%{text-decoration-color:transparent}9%,100%{text-decoration-color:#C2410C}}
.nc-ed-line ins{animation:nc-ins 18s var(--d) infinite}
@keyframes nc-ins{0%,10%{clip-path:inset(0 100% 0 0)}17%,100%{clip-path:inset(0 0 0 0)}}
.nc-ed-rule{animation:nc-rule 18s var(--d) infinite}
@keyframes nc-rule{0%,16%{transform:scale(.7);clip-path:inset(0 100% 0 0)}20%,100%{transform:none;clip-path:inset(0 0 0 0)}}
@supports (animation-timeline:view()){
main .nc-band .nc-head2,main .nc-card,.nc-ledger li,.nc-browser{animation:nc-up linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
.nc-show-card .nc-scroll-win img{animation:nc-pan var(--t,32s) ease-in-out infinite alternate}
@keyframes nc-up{from{transform:translateY(56px)}to{transform:none}}
.nc-lawyers i{animation:nc-dot linear both;animation-timeline:view();animation-range:entry calc(var(--i) * 4%) cover calc(18% + var(--i) * 4%)}
@keyframes nc-dot{from{transform:scale(0)}to{transform:none}}
.nc-path path{stroke-dashoffset:1;animation:nc-draw linear both;animation-timeline:view();animation-range:entry 10% cover 55%}
@keyframes nc-draw{to{stroke-dashoffset:0}}
}
}
@media (prefers-reduced-motion:reduce){
.nc-edits{gap:1.75rem;min-height:0}.nc-ed{grid-area:auto}
.nc-ticker{flex-wrap:wrap}.nc-tick[aria-hidden]{display:none}.nc-tick{flex-wrap:wrap;white-space:normal;gap:.75rem 2rem}
.nc-pause,.nc-pause-in{display:none}
}