/* Styles for the cost and area pages.

   An external file rather than an inline <style> block, because these pages
   serve under the document CSP — script-src 'none', style-src 'self' — and
   'self' does not permit inline styles. Embedded, every rule was discarded by
   the browser and sixteen pages built to be found by search rendered as raw
   Times New Roman. The tests asserted the CSP was strict and that no script
   tag had crept in; nothing asserted the page had any styling left. */

:root{color-scheme:light}
  *{box-sizing:border-box}
  body{font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#FBF8F3;color:#0F1012;margin:0;padding:0}
  .wrap{max-width:760px;margin:0 auto;padding:24px 18px 64px}
  header.site{border-bottom:1px solid #e4e4e7;background:#FBF8F3}
  header.site .wrap{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .logo{font-weight:700;letter-spacing:-0.02em;text-decoration:none;color:#0F1012}
  h1{font-size:30px;line-height:1.15;letter-spacing:-0.02em;margin:28px 0 0}
  h2{font-size:20px;line-height:1.25;margin:36px 0 10px}
  p{margin:12px 0;color:#27272a}
  .answer{margin-top:18px;padding:18px 20px;background:#fff;border:1px solid #e4e4e7;border-left:3px solid #0F1012;border-radius:12px}
  .answer strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:#6B6E78;font-weight:600;margin-bottom:6px}
  .answer span{font-size:19px;line-height:1.4}
  table{width:100%;border-collapse:collapse;margin:14px 0;background:#fff;border:1px solid #e4e4e7;border-radius:12px;overflow:hidden;font-size:15px}
  th,td{text-align:left;padding:11px 14px;border-bottom:1px solid #f1f1f3}
  thead th{background:#F6F3EE;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#52525b}
  tbody th{font-weight:500}
  /* A price range must not break across two lines.

     "£10,960 – £15,772" at 15px needs about 128px, and the value column on a
     393px phone is narrower than that once the label column has taken its
     share — so it wrapped at the en dash and read as two separate prices,
     which on a page whose whole purpose is telling somebody what a job costs
     is the one thing it must not do. These are the SEO pages: for a search
     visitor they are the first and often only screen. */
  td{font-variant-numeric:tabular-nums;white-space:nowrap}
  /* The label column gives way instead, because a style name wrapping is
     harmless and a price wrapping is not. */
  tbody th{overflow-wrap:anywhere}
  tr:last-child th,tr:last-child td{border-bottom:0}
  .cta-block{margin:40px 0 0;padding:26px 22px;background:#0F1012;color:#fff;border-radius:18px}
  .cta-block h2{margin-top:0;color:#fff}
  .cta-block p{color:rgba(255,255,255,.72)}
  a.cta{display:block;margin:18px 0 0;padding:16px 20px;background:#fff;color:#0F1012;text-decoration:none;border-radius:999px;text-align:center;font-weight:600}
  .muted{color:#6B6E78;font-size:13px}
  .cta-block .muted{color:rgba(255,255,255,.55)}
  /* The journey hero, above the guide: the action first for somebody who came
     to see it on their own house, and out of the way in a second for somebody
     who came for the number. Lighter than .cta-block on purpose — the dark
     block at the foot of the page is still the close, and two identical black
     slabs on one page would read as an advert either side of an article. */
  .journey-hero{margin:0 0 28px;padding:22px 20px;background:#FBF8F3;border:1px solid #e4e4e7;border-radius:18px}
  .journey-hero h2{margin:0;font-size:21px;line-height:1.25}
  .journey-hero p{margin:8px 0 0;color:#52525b}
  .journey-hero a.cta{margin:16px 0 0;background:#0F1012;color:#fff}
  .journey-hero .muted{margin-top:10px;text-align:center}
  .notice{margin-top:20px;padding:14px 16px;border-radius:12px;background:#FFFBEB;border:1px solid #FDE68A;font-size:13px;line-height:1.6;color:#78350F}
  .caveat{margin-top:28px;padding-top:18px;border-top:1px solid #e4e4e7;font-size:13px;line-height:1.6;color:#52525b}
  nav.related{margin-top:32px;font-size:14px}
  nav.related ul{padding-left:18px;margin:8px 0}
  nav.related li{margin:5px 0}
  footer.site{border-top:1px solid #e4e4e7;margin-top:48px}
  footer.site .wrap{padding:20px 18px;font-size:13px;color:#6B6E78}
  a{color:#0F1012}
  @media(min-width:640px){h1{font-size:38px}.wrap{padding:32px 24px 80px}}