/* ZH Construction — generated by tools/convert/run.mjs. Do not edit.
   1. tools/fonts/fonts.css — the build's Google Fonts, served by the site
   2. tools/design/zh-construction/site/assets/site.css — the build's stylesheet, verbatim
   3. tools/convert/theme.css — the engine's chrome, starter blocks, phones
   Edit those sources and re-run, never this file. */

/* --- 1. tools/fonts/fonts.css --- */
/* The build's Google Fonts, served by the site (tools/fonts/fetch.mjs). SIL OFL. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url(fonts/bricolage-grotesque-500-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url(fonts/bricolage-grotesque-500-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dm-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dm-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/dm-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/dm-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(fonts/instrument-sans-400-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(fonts/instrument-sans-400-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- 2. the build's site.css --- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#EFEDE8;color:#1E1C1A;font-family:'Instrument Sans',system-ui,sans-serif}
a{color:#9A3F24}a:hover{color:#1E1C1A}
summary{list-style:none}summary::-webkit-details-marker{display:none}
:focus-visible{outline:2.5px solid #C65A3A;outline-offset:2px}
img,svg{max-width:100%}

/* --- 3. tools/convert/theme.css --- */
/* ZH Construction — the theme's own CSS, appended to the build's site.css by
   tools/convert/run.mjs (which writes theme/assets/styles.css; edit this file,
   never that one).

   The build styles every element inline, so there is nothing here for the pages
   themselves. What is here is only:
     1. the engine's chrome (back-to-top, footer accordion) in the brand colours
     2. the skip link
     3. the starter blocks of the block picker, for content the design has no
        section for — the build has no classes to reuse, so they bring their own
     4. admin-only helpers
   Everything is prefixed .zh- so it can never collide with the build's markup. */

:root {
  --zh-ink: #1E1C1A;
  --zh-text: #34302C;
  --zh-muted: #5A544E;
  --zh-paper: #EFEDE8;
  --zh-line: #DCD8D0;
  --zh-terra: #C65A3A;
  --zh-rust: #9A3F24;
  --zh-peach: #EE9A76;
  --zh-stone: #CFC8C0;
  --zh-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --zh-sans: 'Instrument Sans', system-ui, sans-serif;
  --zh-mono: 'DM Mono', ui-monospace, monospace;

  /* The engine's mobile chrome (core-assets/mobile.css) in the brand colours. */
  --bc-acc-rule: rgba(255, 255, 255, 0.12);
  --bc-top-bg: #C65A3A;
  --bc-top-bg-hover: #9A3F24;
  --bc-top-border: rgba(255, 255, 255, 0.28);
  --bc-top-color: #FFFFFF;
}

/* 1. Back-to-top clears the right page gutter. */
.bc-top { right: max(20px, env(safe-area-inset-right)); }

/* The footer accordion: the titles are the build's own column titles (they
   carry data-bc-acc-title), so they keep their mono peach look as buttons. */
.bc-footer-acc .bc-acc-title { color: var(--zh-peach); font-family: var(--zh-mono); }
/* The build lays the footer columns out as a grid with a 32px row gap, which is
   right for open columns and leaves a hole between folded ones: while the
   engine has them folded, the rows close up (the contact block above keeps the
   build's own 48px gap). */
footer.site.bc-footer-acc [style*="grid-template-columns"] { row-gap: 0 !important; }

/* 2. A visually hidden skip link, shown on focus: the build has none, and the
      engine's layout gives every page a <main id="content"> to skip to. */
.zh-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1001;
  padding: 12px 20px; border-radius: 0 0 14px 0;
  background: var(--zh-terra); color: #FFFFFF;
  font: 600 15px/1 var(--zh-sans); text-decoration: none;
}
.zh-skip:focus { left: 0; color: #FFFFFF; }

/* The photo boxes (data-zh-photo): the <img> covers the box from its inline
   style; the WebP <picture> around it must not become a flex item of the box,
   and a caption the owner has emptied leaves nothing behind. The case-study
   template's caption is bare text; on a photo it gets a dark pill (the rows
   from tools/convert/strips.mjs have their own). */
[data-zh-photo] > picture { display: contents; }
[data-zh-photo] > span:empty { display: none; }
[data-zh-photo]:not([data-zh-name]) > :is(img:not([src^="data:"]), picture) ~ span {
  padding: 6px 11px; border-radius: 999px; background: rgba(30, 28, 26, 0.78); color: #FFFFFF;
}

/* 3. The starter blocks (hero, prose, features, CTA, contact form). They are for
      pages and sections the design never drew, so they borrow its colours,
      type, radii and spacing rather than inventing a second look. */
.zh-sec { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 104px clamp(20px, 4vw, 48px); }
.zh-sec--dark { max-width: none; background: var(--zh-ink); color: #FFFFFF; }
.zh-sec--dark > .zh-in { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0; }
.zh-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 400 13px/1.3 var(--zh-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zh-muted); }
.zh-eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--zh-terra); flex: none; }
.zh-sec--dark .zh-eyebrow { color: var(--zh-stone); }
.zh-h1 { margin: 0 0 24px; font-family: var(--zh-display); font-size: clamp(42px, 5vw, 76px);
  line-height: .98; font-weight: 750; letter-spacing: -0.035em; color: #FFFFFF; text-wrap: balance; max-width: 980px; }
.zh-h2 { margin: 0 0 20px; font-family: var(--zh-display); font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; color: var(--zh-ink); text-wrap: balance; }
.zh-lede { margin: 0 0 28px; max-width: 62ch; font-size: 19px; line-height: 1.6; color: var(--zh-text); }
.zh-sec--dark .zh-lede { color: var(--zh-stone); }
.zh-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.zh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px; font-family: var(--zh-sans);
  font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: var(--zh-terra); color: #FFFFFF; border: 1.5px solid var(--zh-terra); }
.zh-btn:hover { color: #FFFFFF; background: var(--zh-rust); border-color: var(--zh-rust); }
.zh-btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.zh-btn--ghost:hover { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.zh-btn--light { background: var(--zh-ink); color: #FFFFFF; border-color: var(--zh-ink); }
.zh-btn--light:hover { background: #000000; color: #FFFFFF; border-color: #000000; }

.zh-prose { max-width: 74ch; font-size: 18px; line-height: 1.65; color: var(--zh-text); }
.zh-prose h2 { margin: 44px 0 16px; font-family: var(--zh-display); font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; color: var(--zh-ink); }
.zh-prose h3 { margin: 30px 0 10px; font-family: var(--zh-display); font-size: 23px;
  line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: var(--zh-ink); }
.zh-prose > :first-child { margin-top: 0; }
.zh-prose p, .zh-prose ul, .zh-prose ol { margin: 0 0 18px; }
.zh-prose li { margin-bottom: 8px; }
.zh-prose a { color: var(--zh-rust); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.zh-prose blockquote { margin: 26px 0; padding: 20px 26px; border-left: 3px solid var(--zh-terra);
  background: var(--zh-paper); border-radius: 0 16px 16px 0; color: var(--zh-ink); }
.zh-prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 16px; }
.zh-prose th, .zh-prose td { padding: 12px 16px; border-bottom: 1px solid var(--zh-line); text-align: left; }
.zh-prose th { font: 400 12.5px/1.3 var(--zh-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--zh-muted); background: var(--zh-paper); }

.zh-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.zh-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.zh-card { padding: 28px; background: #FFFFFF; border: 1px solid var(--zh-line); border-radius: 20px; }
.zh-card-num { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 16px; border-radius: 8px;
  background: var(--zh-ink); color: var(--zh-peach); font: 500 14px/1 var(--zh-mono); }
.zh-card h3 { margin: 0 0 10px; font-family: var(--zh-display); font-size: 23px; line-height: 1.2;
  font-weight: 700; letter-spacing: -0.015em; color: var(--zh-ink); }
.zh-card p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--zh-text); }

.zh-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap;
  gap: 28px 56px; align-items: flex-end; justify-content: space-between;
  padding: clamp(32px, 5vw, 64px); background: var(--zh-terra); border-radius: 24px; color: #FFFFFF; }
.zh-cta p { margin: 0; }
.zh-cta .zh-cta-title { font-family: var(--zh-display); font-size: clamp(32px, 4vw, 56px);
  line-height: 1; font-weight: 750; letter-spacing: -0.035em; text-wrap: balance; }
.zh-cta .zh-cta-sub { margin-top: 16px; font-size: 19px; line-height: 1.6; font-weight: 500; max-width: 60ch; }

.zh-form { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 4vw, 40px);
  background: #FFFFFF; border: 1px solid var(--zh-line); border-radius: 24px; max-width: 720px; }
.zh-field { display: flex; flex-direction: column; gap: 8px; }
.zh-field > label { font: 600 14px/1.3 var(--zh-sans); color: var(--zh-muted); }
.zh-field input, .zh-field textarea, .zh-field select {
  width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--zh-ink); background: #FFFFFF;
  font: 400 16px/1.5 var(--zh-sans); color: var(--zh-ink); }
.zh-field textarea { min-height: 140px; resize: vertical; }
.zh-field input:focus, .zh-field textarea:focus, .zh-field select:focus { border-color: var(--zh-terra); }
.bc-form-msg { border-radius: 12px !important; font-family: var(--zh-sans); }

/* A disabled submit while a request is on its way (the forms' Component
   disables it; the build has no style for that state). */
form button[type="submit"]:disabled { opacity: .6; cursor: progress; }

/* 4. Admin only. The in-place editors outline what can be clicked; the build's
      own markup has no spare room for it, so it is a subtle ring. */
body.bc-admin [data-edit]:hover, [data-edit]:focus-within {
  outline: 2px solid rgba(198, 90, 58, 0.6); outline-offset: 2px; border-radius: 4px;
}