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

/* --- 1. the build's site.css --- */
/* Canty Construction — site styles. Most layout is inline per element (exported from the design canvas). */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/outfit-400.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/outfit-500.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/outfit-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/outfit-700.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/outfit-800.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/figtree-400.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/figtree-500.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/figtree-600.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/figtree-700.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/figtree-800.woff2') format('woff2')}
body{margin:0}
a{color:#2346D8}a:hover{color:#0E1A3A}
*{box-sizing:border-box}
.btn{transition:transform .15s ease, filter .15s ease}.btn:hover{filter:brightness(0.95);transform:translateY(-1px)}
.nav:hover{background:#EEF3FF}
.card{transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease}.card:hover{transform:translateY(-3px);border-color:#C3CEEA !important;box-shadow:0 12px 30px rgba(14,26,58,0.10)}
.chip:hover{background:#2346D8 !important;color:#FFFFFF !important}
.fl:hover{color:#FFC83D !important}
.toc:hover{color:#2346D8 !important}
button{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #FF6A3D;outline-offset:2px}
@media (max-width:760px){.mbar{display:flex !important}.navrow{flex-wrap:nowrap !important;overflow-x:auto;justify-content:flex-start !important}.pgroot{padding-bottom:84px}}
[hidden]{display:none !important}

/* --- 2. tools/convert/theme.css --- */
/* Canty 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 phone rules the build leaves out (its own are in site.css)
     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 .cy- so it can never collide with the build's markup. */

:root {
  --cy-navy: #0E1A3A;
  --cy-blue: #2346D8;
  --cy-blue-dark: #1A35A8;
  --cy-tint: #EEF3FF;
  --cy-border: #DCE3F2;
  --cy-muted: #5A6482;
  --cy-body: #3A4568;
  --cy-orange: #FF6A3D;
  --cy-head: 'Outfit', system-ui, sans-serif;
  --cy-text: 'Figtree', system-ui, sans-serif;

  /* 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: #2346D8;
  --bc-top-bg-hover: #1A35A8;
  --bc-top-border: rgba(255, 255, 255, 0.28);
  --bc-top-color: #FFFFFF;
}

/* 1. Back-to-top sits above the build's fixed bottom bar on phones, and clears
      the right page gutter on larger screens. */
.bc-top { right: max(20px, env(safe-area-inset-right)); }
@media (max-width: 760px) {
  .bc-top { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); }
}

/* The footer accordion: the titles are the build's own <div>s (they carry
   data-bc-acc-title), so give them the colour and weight they lose as buttons. */
.bc-footer-acc .bc-acc-title { color: #FFFFFF; }

/* 2. Phones. The build's own rules (site.css) make the nav row scroll, show the
      bottom bar and pad .pgroot for it. These are the gaps it leaves. */

/* The request form's "Property address" field is set to `grid-column: span 2`
   inside `repeat(auto-fit, minmax(240px, 1fr))`. Below about 590px that grid is
   one column wide, so spanning two creates an implicit second column and the
   row runs ~3px past the screen (the build does this too). `1 / -1` means the
   whole row however many columns there are, which is what the design wants at
   every width.
   `!important` because the span is in the element's own style attribute. */
.pgroot form [style*="grid-column: span 2"] { grid-column: 1 / -1 !important; }

@media (max-width: 760px) {
  /* The navigation row scrolls; fade its right edge so it reads as scrollable
     and stop the browser's scrollbar from covering a menu item. */
  .navrow { scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
  .navrow::-webkit-scrollbar { display: none; }
  .navrow > .nav { scroll-snap-align: start; }
  /* Tables in guide copy (comparison tables) scroll instead of forcing the page
     sideways. The build sets their width inline. */
  .pgroot table { display: block; max-width: 100%; overflow-x: auto; }
}

/* 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. */
.cy-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1001;
  padding: 12px 20px; border-radius: 0 0 14px 0;
  background: var(--cy-blue); color: #FFFFFF;
  font: 600 15px/1 var(--cy-text); text-decoration: none;
}
.cy-skip:focus { left: 0; 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. */
.cy-sec { max-width: 1240px; margin: 0 auto; box-sizing: border-box;
  padding: 80px clamp(20px, 4vw, 48px); }
.cy-sec--tint { max-width: none; background: var(--cy-tint); border-radius: 48px; }
.cy-sec--tint > .cy-in { max-width: 1240px; margin: 0 auto; box-sizing: border-box;
  padding: 0 clamp(20px, 4vw, 48px); }
.cy-eyebrow { margin: 0 0 12px; font: 700 13.5px/1.3 var(--cy-text);
  letter-spacing: .08em; text-transform: uppercase; color: var(--cy-blue); }
.cy-h1 { margin: 0 0 18px; font-family: var(--cy-head); font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; color: var(--cy-navy); }
.cy-h2 { margin: 0 0 18px; font-family: var(--cy-head); font-size: clamp(27px, 3vw, 36px);
  line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--cy-navy); }
.cy-lede { margin: 0 0 26px; max-width: 62ch; font-size: 18.5px; line-height: 1.6; color: var(--cy-body); }
.cy-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; font-family: var(--cy-head);
  font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: var(--cy-blue); color: #FFFFFF; border: 2px solid var(--cy-blue); }
.cy-btn--ghost { background: transparent; color: var(--cy-navy); border-color: var(--cy-border); }
.cy-btn--light { background: #FFFFFF; color: var(--cy-navy); border-color: #FFFFFF; }

.cy-prose { max-width: 72ch; font-size: 17px; line-height: 1.7; color: var(--cy-body); }
.cy-prose h2 { margin: 36px 0 14px; font-family: var(--cy-head); font-size: clamp(24px, 2.6vw, 31px);
  line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: var(--cy-navy); }
.cy-prose h3 { margin: 28px 0 10px; font-family: var(--cy-head); font-size: 19px;
  line-height: 1.35; font-weight: 600; color: var(--cy-navy); }
.cy-prose > :first-child { margin-top: 0; }
.cy-prose p, .cy-prose ul, .cy-prose ol { margin: 0 0 16px; }
.cy-prose li { margin-bottom: 7px; }
.cy-prose blockquote { margin: 24px 0; padding: 18px 24px; border-left: 3px solid var(--cy-blue);
  background: var(--cy-tint); border-radius: 0 16px 16px 0; color: var(--cy-navy); }
.cy-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 16px; }
.cy-prose th, .cy-prose td { padding: 11px 14px; border-bottom: 1px solid var(--cy-border); text-align: left; }
.cy-prose th { font-family: var(--cy-head); font-weight: 600; color: var(--cy-navy); }

.cy-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cy-grid--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.cy-card { padding: 26px 28px; background: #FFFFFF; border: 1px solid var(--cy-border);
  border-radius: 20px; }
.cy-card-num { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 14px; border-radius: 999px;
  background: var(--cy-tint); color: var(--cy-blue); font: 700 14px/1 var(--cy-text); }
.cy-card h3 { margin: 0 0 8px; font-family: var(--cy-head); font-size: 19px; line-height: 1.35;
  font-weight: 600; color: var(--cy-navy); }
.cy-card p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--cy-body); }

.cy-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap;
  gap: 28px 40px; align-items: center; justify-content: space-between;
  padding: clamp(32px, 5vw, 56px); background: var(--cy-blue); border-radius: 32px; color: #FFFFFF; }
.cy-cta p { margin: 0; }
.cy-cta .cy-cta-title { font-family: var(--cy-head); font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.cy-cta .cy-cta-sub { margin-top: 12px; font-size: 15.5px; color: #D3DDFF; }

.cy-form { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 4vw, 40px);
  background: #FFFFFF; border: 1px solid var(--cy-border); border-radius: 32px; max-width: 680px; }
.cy-field { display: flex; flex-direction: column; gap: 7px; }
.cy-field > label { font: 700 15px/1.3 var(--cy-text); color: var(--cy-navy); }
.cy-field input, .cy-field textarea, .cy-field select {
  width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 16px;
  border: 1px solid var(--cy-border); border-radius: 14px; background: #FFFFFF;
  font: 400 16.5px/1.5 var(--cy-text); color: var(--cy-navy); }
.cy-field textarea { min-height: 140px; resize: vertical; }
.cy-field input:focus, .cy-field textarea:focus, .cy-field select:focus { border-color: var(--cy-blue); }
.bc-form-msg { border-radius: 14px !important; font-family: var(--cy-text); }

/* 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 inset ring. */
body.bc-admin [data-edit]:hover, [data-edit]:focus-within {
  outline: 2px solid rgba(35, 70, 216, 0.55); outline-offset: 2px; border-radius: 4px;
}