/* Contractor Local — generated by tools/convert/run.mjs. Do not edit.
   1. tools/fonts/fonts.css — the build's Google Fonts, served by the site
   2. the <style> block every page of tools/design/contractorlocal-site/static carries, 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: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/jetbrains-mono-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/jetbrains-mono-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; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/schibsted-grotesk-400-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: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/schibsted-grotesk-400-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; }

/* --- 2. the build's <style> block --- */
body{margin:0}
a{color:#0E0E10;text-underline-offset:4px}a:hover{color:#0E0E10;text-decoration-thickness:2px}
.cell{text-decoration:none}.cell:hover{background:#0E0E10;color:#FFFFFF}
select,input,textarea,button{font:inherit}
td a,li a,p a{font-weight:600}

/* --- 3. tools/convert/theme.css --- */
/* Contractor Local — the theme's own CSS, appended to the build's <style> block
   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 and the photo boxes
     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 .cl- so it can never collide with the build's markup. */

:root {
  --cl-ink: #0E0E10;
  --cl-text: #2A2B2F;
  --cl-muted: #55575C;
  --cl-paper: #F3F3F1;
  --cl-line: #E2E3E5;
  --cl-chip: #C9CBCF;
  --cl-red: #C2412D;
  --cl-sans: 'Schibsted Grotesk', sans-serif;
  --cl-mono: 'JetBrains Mono', 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: #0E0E10;
  --bc-top-bg-hover: #2A2B2F;
  --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(16px, 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 grey look as buttons. */
.bc-footer-acc .bc-acc-title { color: #9C9EA4; font-family: var(--cl-mono); }
/* The build lays the footer columns out as a wrapping row 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. */
footer.site.bc-footer-acc [style*="gap: 32px 48px"] { 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. */
.cl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1001;
  padding: 12px 20px; border-radius: 0 0 10px 0;
  background: var(--cl-ink); color: #FFFFFF;
  font: 700 15px/1 var(--cl-sans); text-decoration: none;
}
.cl-skip:focus { left: 0; color: #FFFFFF; }

/* The photo boxes (data-cl-photo, the rows from tools/convert/strips.mjs): 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. */
[data-cl-photo] > picture { display: contents; }
[data-cl-photo] > span:empty { display: none; }

/* 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. */
.cl-sec { max-width: 1240px; margin: 0 auto; box-sizing: border-box; padding: 64px 32px 0; }
.cl-sec--band { max-width: none; background: var(--cl-paper); padding: 36px 0 56px; }
.cl-sec--band > .cl-in { max-width: 1240px; margin: 0 auto; box-sizing: border-box; padding: 0 32px; }
.cl-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 400 12px/1.3 var(--cl-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cl-muted); }
.cl-eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--cl-red); flex: none; }
.cl-h1 { margin: 0 0 22px; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; font-weight: 800;
  letter-spacing: -0.04em; max-width: 1000px; }
.cl-h2 { margin: 0 0 20px; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; }
.cl-lede { margin: 0 0 24px; max-width: 820px; font-size: 21px; line-height: 1.55; color: var(--cl-text); }
.cl-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px; border-radius: 10px; font-family: var(--cl-sans);
  font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap;
  background: var(--cl-ink); color: #FFFFFF; border: 1px solid var(--cl-ink); }
.cl-btn:hover { color: #FFFFFF; background: #2A2B2F; text-decoration: none; }
.cl-btn--ghost { background: #FFFFFF; color: var(--cl-ink); border-color: var(--cl-chip); }
.cl-btn--ghost:hover { background: #FFFFFF; color: var(--cl-ink); border-color: var(--cl-ink); }

.cl-prose { max-width: 760px; font-size: 17px; line-height: 1.6; color: var(--cl-text); }
.cl-prose h2 { margin: 48px 0 16px; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; font-weight: 800;
  letter-spacing: -0.025em; color: var(--cl-ink); }
.cl-prose h3 { margin: 30px 0 10px; font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--cl-ink); }
.cl-prose > :first-child { margin-top: 0; }
.cl-prose p, .cl-prose ul, .cl-prose ol { margin: 0 0 16px; }
.cl-prose li { margin-bottom: 6px; }
.cl-prose blockquote { margin: 24px 0; padding: 18px 24px; border-left: 4px solid var(--cl-ink);
  background: var(--cl-paper); border-radius: 0 16px 16px 0; color: var(--cl-ink); }
.cl-prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 16px; }
.cl-prose th, .cl-prose td { padding: 14px 16px; border-bottom: 1px solid var(--cl-line); text-align: left; }
.cl-prose th { font: 400 12px/1.3 var(--cl-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cl-muted); background: var(--cl-paper); }

.cl-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.cl-card { padding: 24px; background: #FFFFFF; border: 1px solid var(--cl-line); border-radius: 16px; }
.cl-card-num { display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; margin-bottom: 14px; border-radius: 8px;
  background: var(--cl-ink); color: #FFFFFF; font: 700 13px/1 var(--cl-mono); }
.cl-card h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.25; font-weight: 700; }
.cl-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cl-text); }

.cl-cta { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between;
  padding: clamp(28px, 5vw, 56px); background: var(--cl-ink); border-radius: 20px; color: #FFFFFF; }
.cl-cta p { margin: 0; }
.cl-cta .cl-cta-title { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; }
.cl-cta .cl-cta-sub { margin-top: 14px; font-size: 19px; line-height: 1.55; color: #C4C6CB; max-width: 60ch; }
.cl-cta .cl-btn { background: #FFFFFF; color: var(--cl-ink); border-color: #FFFFFF; }

.cl-form { display: flex; flex-direction: column; gap: 18px; padding: 28px;
  border: 1px solid var(--cl-line); border-radius: 18px; max-width: 820px; }
.cl-field { display: flex; flex-direction: column; gap: 6px; }
.cl-field > label { font: 600 15px/1.3 var(--cl-sans); }
.cl-field input, .cl-field textarea, .cl-field select {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--cl-chip); background: #FFFFFF; font: 400 17px/1.4 var(--cl-sans); color: var(--cl-ink); }
.cl-field textarea { min-height: 140px; resize: vertical; }
.bc-form-msg { border-radius: 10px !important; font-family: var(--cl-sans); font-size: 15px !important; }

/* A disabled submit while a message is on its way (the engine's submit script
   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(58, 124, 165, 0.6); outline-offset: 2px; border-radius: 4px;
}