/* ============================================================
   DM Sans, self hosted.
   ------------------------------------------------------------
   Loaded from Google's CDN until now, which sent every visitor's
   IP address to Google on every page view. That was the only
   third party request the site made, and removing it means the
   privacy page can say nothing leaves this domain and be
   literally true.

   One variable file rather than three static weights: Google
   serves the same variable woff2 for 400, 500 and 700, so three
   downloads were three copies of one 61KB file.
   ============================================================ */
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:100 1000;          /* variable file; plain woff2 format string is the
                                    broadly supported way to declare one */
  font-display:swap;
  src:url(/assets/fonts/dm-sans-var.woff2) format('woff2');
}

/* ============================================================
   site.css — shared across every page
   ------------------------------------------------------------
   Extracted from the old single page. It was one 25KB document
   with the stylesheet inline, so every page would have carried
   its own copy. As a separate file the browser fetches it once
   and reuses it for the other four.

   Light only, on purpose. This is a marketing site with one
   committed look, so it does not follow the viewer's OS theme.
   Every colour is painted explicitly, including the body
   background, because the host paints its own ground behind it.
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-soft:#FAF7F2;
  --panel:#FFFFFF;
  --ink:#1E2E45;
  --ink-2:#54637A;
  --ink-3:#8A93A2;
  --line:#E8E2D8;
  --brand:#AD7F56;
  --brand-2:#1E2E45;
  --brand-soft:#F5EFE6;
  --shadow:0 1px 2px rgba(30,46,69,.05), 0 8px 24px rgba(30,46,69,.07);
  --shadow-lg:0 2px 4px rgba(30,46,69,.05), 0 18px 48px rgba(30,46,69,.11);
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --grad:linear-gradient(112deg,#1E2E45 0%,#31486B 46%,#AD7F56 100%);
}
/* Deliberately light only. This is a marketing site with one committed look,
   so it does not follow the viewer's OS theme. Every colour is painted
   explicitly below, including the body background, because the host paints
   its own ground behind the page. */

*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em}
.w{max-width:1140px;margin:0 auto;padding:0 26px}
a{color:var(--ink)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}

header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* One row at every width. Wrapping this bar stacked the logo, the section
   links and the button into three rows on a phone and clipped the links off
   the left edge, so the nav links hide below tablet instead. They only jump
   down the page anyway, which a phone user does by scrolling. */
.bar{display:flex;align-items:center;gap:12px;padding:12px 0;flex-wrap:nowrap;min-width:0}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;
  letter-spacing:-.02em;text-decoration:none;color:var(--ink);white-space:nowrap;min-width:0}
.logo .glyph{width:30px;height:30px;flex:none;display:block}
.foot .logo .glyph{width:34px;height:34px}
nav{margin-left:auto;display:flex;gap:26px;align-items:center;flex-wrap:nowrap}
nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
nav a:hover{color:var(--ink)}
nav .links{display:none;gap:26px}
@media(min-width:860px){nav .links{display:flex}}

.btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  padding:11px 20px;border-radius:9px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;white-space:nowrap}
.bar .btn{padding:9px 15px;font-size:13.5px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--panel);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--brand)}

/* Hero: light, with a soft directional wash rather than a solid field. */
.hero{position:relative;overflow:hidden;padding:clamp(44px,8vw,88px) 0 clamp(48px,7vw,74px);
  background:
    radial-gradient(1100px 520px at 10% -12%, color-mix(in srgb,var(--brand) 20%,transparent), transparent 62%),
    radial-gradient(950px 470px at 94% 6%, color-mix(in srgb,var(--brand-2) 12%,transparent), transparent 60%),
    var(--bg)}
.hero-grid{display:grid;gap:44px;grid-template-columns:1.02fr .98fr;align-items:center}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-art{order:-1}
}
.hero-art{margin:0;position:relative}
.hero-art img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 26px 44px rgba(30,46,69,.20))}
.hero-art figcaption{margin-top:12px;font-size:12px;color:var(--ink-3);text-align:right}
@media(max-width:900px){.hero-art figcaption{text-align:left}}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--brand);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);
  padding:6px 13px;border-radius:999px;margin-bottom:22px}
h1{font:700 clamp(38px,5.6vw,62px)/1.06 var(--sans);letter-spacing:-.035em;margin:0 0 20px;
  max-width:17ch;text-wrap:balance}
.lede{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:56ch;margin:0 0 30px}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:32px;padding-top:20px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3);font-weight:500}

section{padding:clamp(48px,7vw,74px) 0}
.soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{max-width:62ch;margin:0 0 40px}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 12px}
h2{font:700 clamp(27px,3.4vw,38px)/1.14 var(--sans);letter-spacing:-.03em;margin:0 0 14px;
  text-wrap:balance}
.head p{color:var(--ink-2);font-size:17px;margin:0}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:24px;
  box-shadow:var(--shadow)}
.card .ic{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.card .ic svg{width:19px;height:19px;stroke:var(--brand);fill:none;stroke-width:1.8}
.card h3{margin:0 0 7px;font-size:16.5px;font-weight:700;letter-spacing:-.015em}
.card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}

/* Capability sheet. The specificity here is the credibility. */
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);overflow:hidden}
.sheet + .sheet{margin-top:18px}
.sheet-h{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line);
  background:var(--bg-soft)}
.sheet-h .dot{width:9px;height:9px;border-radius:50%;background:var(--grad);flex:none}
.sheet-h span{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2)}
table{width:100%;border-collapse:collapse}
td{padding:14px 24px;vertical-align:top;font-size:15px;border-top:1px solid var(--line)}
tr:first-child td{border-top:none}
td:first-child{width:184px;color:var(--ink-3);font-size:13px;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;padding-right:14px}
td b{font-weight:700}

.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.step{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:15px;
  padding:22px;box-shadow:var(--shadow)}
.step::before{content:counter(s);display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-weight:700;
  font-size:14px;margin-bottom:14px}
.step h3{margin:0 0 6px;font-size:15.5px;font-weight:700}
.step p{margin:0;color:var(--ink-2);font-size:14.5px}


.gal{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.gal figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow)}
.gal-wide{grid-column:1 / -1}
.gal img{display:block;width:100%;height:auto;background:var(--bg-soft)}
.gal figcaption{padding:14px 18px;border-top:1px solid var(--line);font-size:14px;
  color:var(--ink-2)}
@media(max-width:760px){.gal{grid-template-columns:1fr}}
.withArt{display:grid;gap:38px;grid-template-columns:.82fr 1.18fr;align-items:center}
@media(max-width:900px){.withArt{grid-template-columns:1fr;gap:28px}}
.artCards{display:grid;gap:18px}
.art{margin:0}
.art img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 22px 38px rgba(30,46,69,.22))}
.art figcaption{margin-top:10px;font-size:12px;color:var(--ink-3)}
.compare{display:grid;gap:20px;grid-template-columns:1fr 1fr}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.compare figure{margin:0;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.compare img{display:block;width:100%;height:auto;background:#fff}
.compare figcaption{padding:16px 20px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px}
.compare figcaption b{font-size:15px;font-weight:700;color:var(--ink)}
.compare figcaption span{font-size:14px;color:var(--ink-2)}
.disclose{margin:16px 0 0;font-size:13px;color:var(--ink-3)}
.kicker{color:var(--brand)}
.split{display:grid;gap:34px;grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;
  box-shadow:var(--shadow-lg)}
.row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:620px){.row{grid-template-columns:1fr}}
.f{margin-bottom:16px}
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;font:400 15px/1.4 var(--sans);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
textarea{min-height:104px;resize:vertical}

footer{border-top:1px solid var(--line);padding:38px 0 0;background:var(--bg-soft)}
.foot{display:flex;gap:28px;justify-content:space-between;flex-wrap:wrap;padding-bottom:28px}
.tag{font-size:14px;line-height:1.6;color:var(--ink-2);max-width:44ch;margin:12px 0 0}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap;margin-left:0}
.foot-nav a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none}
.foot-nav a:hover{color:var(--ink)}
.foot-base{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:18px;padding-bottom:34px;
  font-size:13px;color:var(--ink-3)}
.foot-base a{color:var(--ink-3);text-decoration:none}
.foot-base a:hover{color:var(--ink)}
.fine{font-size:13px;line-height:1.7;color:var(--ink-3);max-width:80ch;margin:14px 0 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- multi-page additions --------------------------------- */

/* Current page in the nav. Underlined rather than recoloured so
   it still reads when the link colour is already the hover one. */
nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:2px;
  text-decoration-color:var(--brand)}

/* Mobile menu. The old page hid its nav below 860px because the
   links were jump links and a phone user scrolls instead. With
   real pages that would strand every route except the quote
   button, so the links move into a disclosure panel. */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:38px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);cursor:pointer;padding:0;box-shadow:var(--shadow)}
.nav-toggle svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.9}
.nav-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(min-width:860px){.nav-toggle{display:none}}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bg)}
.mobile-nav.open{display:block}
@media(min-width:860px){.mobile-nav{display:none!important}}
.mobile-nav a{display:block;padding:13px 0;font-size:15.5px;font-weight:500;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav a[aria-current="page"]{color:var(--ink);font-weight:700}

/* Every page except home opens with this instead of the hero. */
.page-head{background:
    radial-gradient(900px 380px at 8% -20%, color-mix(in srgb,var(--brand) 15%,transparent), transparent 60%),
    var(--bg-soft);
  border-bottom:1px solid var(--line);padding:clamp(38px,6vw,62px) 0}
.page-head h1{font-size:clamp(32px,4.6vw,50px);margin:0 0 14px;max-width:20ch}
.page-head p{font-size:18px;color:var(--ink-2);max-width:58ch;margin:0}

/* Turns a card into a whole clickable target. The old product
   cards were plain divs, so nothing in the grid was reachable. */
a.card{text-decoration:none;display:block}
a.card:hover{border-color:var(--brand)}
a.card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
a.card .more{display:inline-block;margin-top:11px;font-size:14px;
  font-weight:600;color:var(--brand)}

/* Route on to the next page rather than dead-ending. */
.next{border-top:1px solid var(--line);background:var(--bg-soft)}
.next .w{display:flex;gap:18px;justify-content:space-between;align-items:center;
  flex-wrap:wrap;padding-top:34px;padding-bottom:34px}
.next h3{margin:0 0 4px;font-size:19px;letter-spacing:-.02em}
.next p{margin:0;color:var(--ink-2);font-size:15px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:26px;top:10px;z-index:60;background:var(--panel);
  padding:10px 16px;border-radius:9px;border:1px solid var(--brand)}

/* ---- category pages --------------------------------------- */
.dim-p{color:var(--ink-2);font-size:15px;margin-bottom:14px}
ul.ticks{list-style:none;padding:0;margin:0}
ul.ticks li{position:relative;padding:9px 0 9px 26px;font-size:15px;
  border-top:1px solid var(--line);color:var(--ink-2)}
ul.ticks li:first-child{border-top:none}
ul.ticks li::before{content:"";position:absolute;left:4px;top:17px;
  width:7px;height:7px;border-radius:50%;background:var(--brand)}
.tw{overflow-x:auto}

/* ---- blog --------------------------------------------------- */
.postlist{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.postcard{display:block;text-decoration:none;background:var(--panel);
  border:1px solid var(--line);border-radius:15px;padding:24px;box-shadow:var(--shadow)}
.postcard:hover{border-color:var(--brand)}
.postcard h3{margin:6px 0 8px;font-size:19px;letter-spacing:-.02em;line-height:1.25}
.postcard p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.pdate{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:0}
.page-head .kicker a{color:var(--brand);text-decoration:none}

/* Long-form reading measure. Everything else on this site is laid
   out in columns; a post is one column and wants a shorter line. */
.prose{max-width:68ch;font-size:17px;line-height:1.72;color:var(--ink-2)}
.prose h2{font-size:26px;line-height:1.2;margin:44px 0 14px;color:var(--ink);
  letter-spacing:-.02em;text-wrap:balance}
.prose h3{font-size:19px;margin:32px 0 10px;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin-bottom:9px}
.prose blockquote{margin:0 0 20px;padding:2px 0 2px 20px;
  border-left:3px solid var(--brand);color:var(--ink)}
.prose blockquote p{margin:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose code{background:var(--bg-soft);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;font-size:14px}
.prose .tw{overflow-x:auto;margin:0 0 22px}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:0 14px 8px 0;border-bottom:1px solid var(--line)}
.prose td{padding:10px 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.note-small{font-size:13px;color:var(--ink-3);margin-top:30px}
/* Honeypot: off-screen rather than display:none, which bots check for. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   Production-network model (September 2026 rewrite)
   ============================================================ */

/* Footer: two link columns instead of one row. */
.foot-nav{flex-direction:column;gap:9px}

/* The network diagram. Drawn in site colours so it reads as part of
   the brand rather than a stock infographic. The gold trunk is
   Ninefold's line, running from the brief to the delivery. */
.net{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.net text{font-family:var(--sans);text-anchor:middle}
.net .n-box{fill:var(--panel);stroke:var(--line);stroke-width:1.5}
.net .n-out{fill:var(--brand-soft);stroke:var(--brand);stroke-width:1.5}
.net .n-kick{font-size:11px;font-weight:700;letter-spacing:.12em;fill:var(--brand)}
.net .n-sub{font-size:13px;fill:var(--ink-2)}
.net .n-in{stroke:var(--ink);stroke-width:2;fill:none}
.net .n-core{fill:var(--ink)}
.net .n-core-t{font-size:20px;font-weight:700;fill:#fff;letter-spacing:-.01em}
.net .n-core-s{font-size:12px;font-weight:500;fill:#E3CDB5}
.net .n-trunk{stroke:var(--brand);stroke-width:3;fill:none}
.net .n-stub{stroke:var(--brand);stroke-width:2;fill:none}
.net .n-part rect{fill:var(--bg-soft);stroke:var(--line);stroke-width:1.5}
.net .n-pt{font-size:13.5px;font-weight:600;fill:var(--ink)}
.net .n-lbl{font-size:10.5px;font-weight:700;letter-spacing:.12em;fill:var(--ink-3)}
.net-fig{margin:0}
/* In the hero the copy leads on small screens; the old image went
   first, but the diagram is the explanation, not the hook. */
@media(max-width:900px){.hero-art.net-fig{order:0}}
.hero h1 .grad-text{display:block}

/* One project, several manufacturers: component -> who makes it. */
.kit{max-width:720px;border:1px solid var(--line);border-radius:15px;background:var(--panel);
  box-shadow:var(--shadow);overflow:hidden}
.kit-row{display:flex;justify-content:space-between;gap:16px;padding:15px 22px;
  border-top:1px solid var(--line);font-size:15px}
.kit-row:first-child{border-top:none}
.kit-row b{font-weight:600}
.kit-row span{color:var(--ink-2);text-align:right}
.kit-total{background:var(--brand-soft)}
.kit-total span{color:var(--brand);font-weight:700}

.more-link{font-size:15px;font-weight:600;color:var(--brand);text-decoration:none}
.more-link:hover{text-decoration:underline}

/* FAQ: native details/summary, so it works with no JavaScript. */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;letter-spacing:-.01em;
  list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.faq details p{margin:10px 0 0;color:var(--ink-2);max-width:66ch}