/* Site drafts, 2026-10-03. Loads after options.css and build.css, which are copied in from the
   homepage folder on every build. Only what the inner pages and the new header need is here.
   Every colour is a token variable. */

body.site { padding-bottom: 0; }

/* Header panels: a short list in one column, or headed columns for a long one */
.nav-panel--one { min-width: 280px; }
.nav-panel--one ul { grid-template-columns: 1fr; }
.nav-panel--cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, auto); gap: var(--space-7); min-width: 0; width: max-content; max-width: calc(100vw - 48px); padding: var(--space-5) var(--space-6); }
.nav-panel--cols ul { grid-template-columns: 1fr; }
.np-h { max-width: none; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: var(--space-2); }
.has-panel > a::after { content: ""; width: 5px; height: 5px; margin-left: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }

/* Phone menu: a label with links under it opens in place */
.m-sub summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; border: 0; border-bottom: 1px solid var(--bone-line); padding: 0; cursor: pointer; font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: 0; text-transform: none; font-variation-settings: "opsz" 36; }
.m-sub summary::-webkit-details-marker { display: none; }
.m-sub summary::after { content: ""; width: 9px; height: 9px; margin-right: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
.m-sub[open] summary::after { transform: rotate(-135deg); }
.m-sub ul { padding: var(--space-2) 0 var(--space-3) var(--space-4); }
.m-list .m-sub ul a { min-height: 44px; font-size: 17px; border-bottom: 0; }
.m-list .m-util a { min-height: 44px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.m-menu[open] .m-list { max-height: calc(100svh - var(--hdr)); overflow-y: auto; }

/* Footer with four link columns beside the brand column */
.fa-grid--5 { grid-template-columns: minmax(240px, 1.35fr) repeat(4, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
@media (max-width: 1099px) { .fa-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fa-grid--5 .fa-brand { grid-column: 1 / -1; } }
@media (max-width: 699px) { .fa-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 419px) { .fa-grid--5 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Header and footer compare page: comp chrome, not part of the design ---------- */
.nc-page { padding-block: var(--space-8) 0; }
.nc-page h1 { font-size: clamp(32px, 3.6vw, 52px); margin-bottom: var(--space-4); }
.nc-page .lede { max-width: 72ch; }
.nc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); margin-top: var(--space-8); align-items: start; }
.nc-card .eyebrow { margin-bottom: var(--space-2); color: var(--slate); font-weight: 600; }
.nc-note { font-size: 16px; line-height: 1.5; color: var(--slate-soft); margin-bottom: var(--space-4); max-width: 60ch; }
.nc-card .nc-note { min-height: 4.5em; }
.nc-frame { border: 1px solid var(--slate); overflow: hidden; background: var(--bone); }
.nc-scale { width: 1440px; zoom: .45; pointer-events: none; }
.nc-scale .site-header, .nc-live-frame .site-header { position: relative; }
.nc-stub { display: grid; place-items: center; height: 220px; background: var(--bone-raised); border-bottom: 1px solid var(--bone-line); }
.nc-card h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: var(--space-6) 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--slate); }
.nc-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5) var(--space-5); }
.nc-map li, .nc-none { font-size: 15px; line-height: 1.45; }
.nc-map li + li { margin-top: 4px; }
.nc-none { color: var(--slate-soft); }
.nc-sub { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-soft); margin: var(--space-3) 0 4px; }
.nc-sub:first-of-type { margin-top: 0; }
.nc-live { margin-top: var(--space-10); }
.nc-live .eyebrow { margin-bottom: var(--space-2); color: var(--slate); font-weight: 600; }
.nc-live-frame { border-block: 1px solid var(--slate); }
.nc-live-frame .nc-stub { height: 320px; }
@media (max-width: 899px) { .nc-row { grid-template-columns: 1fr; } .nc-card .nc-note { min-height: 0; } }

/* Eight work type tabs on the homepage fit one row at laptop width (Luke 2026-10-06, Ground-up tab added) */
.tabs { column-gap: 22px; }

/* Forms wired to the site's form handler (launch 2026-10-14): the spam trap stays off screen, and the failure
   message takes no space until there is one. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
form[data-mb-form] { position: relative; }
.form-status:empty { display: none; }
.form-status { margin-top: var(--space-4, 16px); font-weight: 600; color: inherit; }
form[data-mb-form].is-sending [type="submit"] { opacity: .6; pointer-events: none; }