/* NMB website prototype. Grayscale wireframe styling from the Dooley Wireframe Kit tokens. */
:root {
  --white: #fff; --g50: #fafafa; --g100: #f2f2f2; --g150: #ebebeb; --g200: #e0e0e0; --g300: #ccc;
  --g400: #adadad; --g500: #8a8a8a; --g600: #6b6b6b; --g700: #4a4a4a; --g900: #1a1a1a;
  --canvas: var(--g100); --surface: var(--white); --zone: var(--g50); --zone-alt: var(--g150); --media: var(--g200);
  --line: var(--g300); --line-soft: var(--g200); --line-strong: var(--g500);
  --ink: var(--g900); --ink-soft: var(--g600); --ink-muted: var(--g500); --ink-faint: var(--g400);
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --border: 1px solid var(--line); --border-strong: 1px solid var(--line-strong);
  --radius: 2px; --px: 32px; --max: 1280px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); font: 15px/1.55 var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--g700); }
:focus-visible { outline: 3px solid var(--g900); outline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; }
h1 { font-size: 34px; letter-spacing: -0.01em; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0; }
p + p { margin-top: 12px; }
ul { margin: 0; padding-left: 20px; }
.skip { border: 0; font: inherit; cursor: pointer; position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--white); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.site { max-width: var(--max); margin: 0 auto; background: var(--surface); min-height: 100vh; border-left: var(--border); border-right: var(--border); }

/* header */
.hdr { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: var(--border-strong); }
.util { display: flex; justify-content: flex-end; gap: 18px; padding: 5px var(--px); border-bottom: var(--border); background: var(--zone); font-size: 12px; }
.util a { color: var(--ink-soft); text-decoration: none; }
.util a:hover { text-decoration: underline; color: var(--ink); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px var(--px); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .ph { width: 120px; height: 38px; }
.logo .ph::after { content: "LOGO"; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { list-style: none; position: relative; }
.nav { margin: 0; padding: 0; }
.nav > li > a, .nav > li > button { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.nav > li > a[aria-current], .nav > li.on > a, .nav > li.on > button { font-weight: 700; border-bottom-color: var(--ink); }
.nav .caret { font-size: 10px; }
.menu { display: none; position: absolute; top: calc(100% + 13px); left: 0; min-width: 270px; background: var(--surface); border: var(--border-strong); border-radius: var(--radius); padding: 8px; z-index: 40; }
.menu a { display: block; padding: 8px 10px; font-size: 14px; text-decoration: none; }
.menu a:hover { background: var(--zone); }
.menu .sub { padding-left: 24px; font-size: 13px; color: var(--ink-soft); }
.nav li.open > .menu { display: block; }
.burger { display: none; width: 48px; height: 48px; border: var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); }
.mnav { display: none; border-top: var(--border); padding: 4px var(--px) 16px; max-height: calc(100vh - 74px); overflow-y: auto; }
.mnav.open { display: block; }
.mnav a { display: block; padding: 12px 4px; border-bottom: var(--border); font-weight: 700; text-decoration: none; font-size: 17px; }
.mnav a.sub { font-weight: 400; font-size: 15px; padding-left: 18px; }
.mnav .mutil { display: flex; gap: 20px; padding-top: 10px; }
.mnav .mutil a { border: 0; font-size: 14px; font-weight: 500; text-decoration: underline; }

/* sections */
.sec { padding: 56px var(--px); }
.sec.tight { padding-top: 32px; padding-bottom: 32px; }
.sec.z { background: var(--zone); }
.sec.za { background: var(--zone-alt); }
.sec.bt { border-top: var(--border); }
.sec.bb { border-bottom: var(--border); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 28px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.g { display: grid; gap: 24px; }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.c75 { grid-template-columns: 7fr 5fr; align-items: center; }
.c57 { grid-template-columns: 5fr 7fr; align-items: start; }
.c84 { grid-template-columns: 8fr 4fr; align-items: start; }
.c48 { grid-template-columns: 4fr 8fr; align-items: start; }
.lead { font-size: 18px; line-height: 1.5; color: var(--g700); max-width: 760px; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.eyebrow { font: 700 11px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.narrow { max-width: 820px; }
.prose p, .prose ul { max-width: 760px; }
.prose ul li + li { margin-top: 6px; }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-soft); margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-faint); }
.crumbs a { color: var(--ink-soft); }
.crumbs [aria-current] { color: var(--ink-muted); font-weight: 500; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1 var(--sans); padding: 12px 24px; border-radius: var(--radius); background: var(--ink); color: var(--white); border: 1px solid var(--ink); text-decoration: none; cursor: pointer; min-height: 44px; }
.btn:hover { background: var(--g700); color: var(--white); }
.btn.lg { font-size: 17px; padding: 15px 32px; }
.btn.sm { font-size: 13px; padding: 8px 14px; min-height: 36px; }
.btn.sec2 { background: var(--surface); color: var(--ink); border: var(--border-strong); }
.btn.sec2:hover { background: var(--zone); }
.btn.full { width: 100%; }
.tlink { font-weight: 700; font-size: 14px; text-decoration: underline; }

/* image placeholders */
.ph { position: relative; background:
  linear-gradient(to top right, transparent calc(50% - 0.6px), var(--line) 50%, transparent calc(50% + 0.6px)),
  linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--line) 50%, transparent calc(50% + 0.6px)), var(--media);
  border: var(--border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-muted); text-align: center; overflow: hidden; }
.ph::after { content: "IMG"; font: 700 11px/1 var(--sans); letter-spacing: 0.1em; background: var(--media); padding: 2px 4px; }
.ph .note { order: 2; font-size: 12px; color: var(--ink-soft); background: var(--media); padding: 2px 6px; max-width: 90%; }
.ph.map::after { content: "MAP"; }
.ph.video::after { content: "VIDEO"; }
.ph.ico { width: 44px; height: 44px; flex: none; }
.ph.ico::after { content: "ICO"; font-size: 9px; }
.ph.av { border-radius: 50%; }
.ph.av::after { content: ""; }
.r43 { aspect-ratio: 4/3; } .r32 { aspect-ratio: 3/2; } .r169 { aspect-ratio: 16/9; } .r11 { aspect-ratio: 1; } .r45 { aspect-ratio: 4/5; } .r219 { aspect-ratio: 21/9; } .r1610 { aspect-ratio: 16/10; }

/* cards */
.card { border: var(--border); border-radius: var(--radius); background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.card.link { text-decoration: none; color: inherit; }
.card.link:hover { border-color: var(--line-strong); background: var(--zone); }
.card h3 { font-size: 17px; }
.card .more { margin-top: auto; font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.card .sublinks { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.card .sublinks a { color: var(--ink-soft); }
.hcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
.box { border: var(--border-strong); border-radius: var(--radius); padding: 18px; background: var(--surface); }
.band { border: var(--border-strong); background: var(--zone-alt); border-radius: var(--radius); padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cred { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--border); }
.cred > div { padding: 24px var(--px); border-right: var(--border); }
.cred > div:last-child { border-right: 0; }
.cred strong { display: block; font-size: 17px; }
.cred span { font-size: 13px; color: var(--ink-soft); }

/* project cards */
.proj { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.proj:hover h3 { text-decoration: underline; }
.proj .tags { font: 700 10px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.proj .loc { font-size: 13px; color: var(--ink-soft); }

/* jump links */
.jump { position: sticky; top: 99px; z-index: 20; display: flex; gap: 6px 20px; flex-wrap: wrap; padding: 12px var(--px); border-bottom: var(--border-strong); background: var(--surface); }
.jump button { background: none; border: 0; padding: 4px 0; font: 500 13px/1.2 var(--sans); color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.jump button:hover { color: var(--ink); }
.anch { display: grid; grid-template-columns: 4fr 8fr; gap: 24px; padding: 28px 0; border-top: var(--border); scroll-margin-top: 160px; }
.anch h3 { font-size: 20px; }
[data-anchor] { scroll-margin-top: 160px; }

/* lists */
.dots { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dots li { position: relative; padding-left: 18px; }
.dots li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); }
.steps { counter-reset: s; }
.step { border-top: 2px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.step .n { width: 30px; height: 30px; border-radius: 50%; border: var(--border-strong); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.facts { display: flex; flex-direction: column; }
.facts div { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.facts div:first-child { border-top: 0; }
.facts dt { font-size: 12px; color: var(--ink-muted); font-weight: 500; }
.facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: var(--border-strong); border-radius: var(--radius); padding: 7px 10px; font: 500 13px/1 var(--sans); text-decoration: none; background: var(--surface); }
a.chip:hover { background: var(--zone); }
.chip.on { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* faq */
.faq details { border-bottom: var(--border); }
.faq details:first-child { border-top: var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; font-weight: 700; font-size: 16px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 0 18px; color: var(--g700); max-width: 760px; }

/* forms */
.form { border: var(--border-strong); border-radius: var(--radius); background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.form h3 { color: var(--ink-soft); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.field.full, fieldset.full { grid-column: 1 / -1; }
.field input, .field select, .field textarea { font: 15px/1.4 var(--sans); color: var(--ink); border: var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; min-height: 44px; width: 100%; }
.field textarea { min-height: 100px; resize: vertical; }
.field .req { color: var(--ink); }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
fieldset legend { padding: 0; margin-bottom: 6px; }
fieldset label { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 400; color: var(--ink); }
fieldset .opts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.formnote { display: none; border: var(--border-strong); background: var(--zone); padding: 14px; font-size: 14px; }
.formnote.show { display: block; }
[hidden] { display: none !important; }

/* table */
.tbl { border: var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.tbl .tr { display: grid; grid-template-columns: 4fr 3fr 2fr 3fr; gap: 16px; padding: 16px; border-top: var(--border); align-items: start; font-size: 14px; }
.tbl .th { background: var(--zone-alt); border-top: 0; font: 700 11px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.tbl .docs { display: flex; flex-direction: column; gap: 6px; }

/* gallery */
.gal { display: flex; flex-direction: column; gap: 10px; }
.gal .ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gal .ctl button { width: 40px; height: 40px; border: var(--border-strong); background: var(--surface); border-radius: var(--radius); cursor: pointer; font-size: 18px; }
.gal .dotsrow { display: flex; gap: 6px; }
.gal .dotsrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.gal .dotsrow span.on { background: var(--ink); }

/* quote */
.quote { border-left: 3px solid var(--ink); padding: 4px 0 4px 20px; }
.quote p { font-size: 19px; line-height: 1.45; }
.quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--ink-soft); }

/* footer */
.ftr { background: var(--zone-alt); border-top: var(--border-strong); padding: 40px var(--px) 24px; display: flex; flex-direction: column; gap: 28px; font-size: 14px; }
.ftr .cols { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 28px; }
.ftr h2 { font: 700 11px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.ftr ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ftr a { color: var(--ink-soft); text-decoration: none; }
.ftr a:hover { text-decoration: underline; color: var(--ink); }
.ftr .legal { border-top: var(--border); padding-top: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-muted); font-size: 13px; }
.ftr .social { display: flex; gap: 10px; }
.ftr .social a { width: 32px; height: 32px; border-radius: 50%; border: var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

@media (max-width: 1080px) {
  .nav > li > a, .nav > li > button { padding: 8px 6px; font-size: 13px; }
  .c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --px: 16px; }
  h1 { font-size: 28px; } h2 { font-size: 21px; }
  .site { border: 0; }
  .util, .nav { display: none; }
  .burger { display: flex; }
  .sec { padding-top: 40px; padding-bottom: 40px; }
  .c2, .c3, .c75, .c57, .c84, .c48, .anch, .band, .cta, .cred, .hcard, .tbl .tr, .fgrid { grid-template-columns: minmax(0, 1fr); }
  .c4, .c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred > div { border-right: 0; border-bottom: var(--border); }
  .tbl .th { display: none; }
  .jump { top: 73px; overflow-x: auto; flex-wrap: nowrap; }
  .jump button { white-space: nowrap; }
  .hcard .ph { max-width: 120px; }
  .ftr .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anch, [data-anchor] { scroll-margin-top: 130px; }
}
@media (max-width: 480px) {
  .c4 { grid-template-columns: minmax(0, 1fr); }
  .ftr .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }