/*
 * Energy Insulation design layer (9 Nov 2026). Loaded last in <head>, after tic.css and component CSS,
 * so it sets the look of the whole site. Selectors start with `html` to win over component styles.
 *
 * This site's design is its own: it must not look like The Insulation Company or the other national
 * sites. Palette, type and shapes below are Energy Insulation's; see CLAUDE.md "Design".
 *
 * Palette
 *   ink      #14233C  text, footer, dark bands
 *   green    #0d7f3f  buttons (white text); #12A150 accents; #0B6E36 links on white
 *   cobalt   #2B59C3  data (housing-mix bar), focus rings
 *   mist     #EEF3F8  alternate section background, hero
 *   line     #D6DEE8  borders and dividers
 * Type: Figtree 400/500/600/700/800, sentence case throughout (no all-caps labels).
 * Shape: 6px on controls, 8px on cards, 12px on the raised quote form (hierarchy, not one radius).
 */

:root {
  --ei-ink: #14233c; --ei-ink-soft: #45546b; --ei-ink-muted: #5b6880;
  --ei-green: #0d7f3f; --ei-green-bright: #12a150; --ei-green-dark: #0b6e36; --ei-green-wash: #effbf3;
  --ei-cobalt: #2b59c3; --ei-mist: #eef3f8; --ei-line: #d6dee8;
}

/* ---- Type ---- */
html, html body, html button, html input, html select, html textarea,
html h1, html h2, html h3, html h4, html .font-display, html .prose-content :is(h1, h2, h3, h4, h5, h6, th) {
  font-family: Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
html body { background: #fff; color: var(--ei-ink); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
html h1, html h2, html h3, html h4 { color: var(--ei-ink); }
html h1, html h1[class] { font-weight: 800; font-size: 2.125rem; line-height: 1.08; letter-spacing: -0.025em; }
html h2.text-3xl, html h2.text-2xl, html .prose-content h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.015em; }
html h3[class], html h2.text-xl, html h2.text-lg, html h2.text-base { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.005em; }
html p.tic-ahero__lede, html h1 ~ p.text-lg, html p.ei-hero__lede { font-size: 1.125rem; line-height: 1.6; color: var(--ei-ink-soft); }
@media (min-width: 640px) {
  html h1, html h1[class] { font-size: 2.75rem; }
  html h2.text-3xl, html h2.text-2xl, html .prose-content h2 { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  html h1, html h1[class] { font-size: 3.25rem; }
  html h2.text-3xl, html h2.text-2xl { font-size: 2.125rem; }
}
/* Labels above headings: sentence case, no tracking (TIC uses tracked capitals). */
html .eyebrow { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; font-weight: 600; color: var(--ei-green-dark); }
html .prose-content { --tw-prose-headings: var(--ei-ink); --tw-prose-bold: var(--ei-ink); --tw-prose-bullets: var(--ei-green-bright); --tw-prose-links: var(--ei-green-dark); }
html .prose-content p, html .prose-content li { max-width: 68ch; }

/* ---- Colour utilities used by the theme ---- */
html .text-ink { color: var(--ei-ink); }
html .text-ink-soft { color: var(--ei-ink-soft); }
html .text-ink-muted { color: var(--ei-ink-muted); }
html .bg-ink { background-color: var(--ei-ink); }
html .bg-canvas-soft { background-color: var(--ei-mist); }
html .bg-canvas { background-color: #fff; }
html .border-line, html .divide-line > * + * { border-color: var(--ei-line); }
html .text-moss-700, html .hover\:text-moss-700:hover, html .group:hover .group-hover\:text-moss-700 { color: var(--ei-green-dark); }
html .link-inline { color: var(--ei-green-dark); text-decoration-color: rgb(13 127 63 / .35); text-underline-offset: 3px; }
html .link-inline:hover { text-decoration-color: currentColor; }
html :focus-visible { outline: 3px solid var(--ei-cobalt); outline-offset: 2px; }

/* ---- Shapes ---- */
html .card, html .rounded-card { border-radius: 8px; }
html .card { box-shadow: none; border-color: var(--ei-line); }
html .card.hover\:shadow-cardhover:hover, html .card:hover { box-shadow: none; border-color: #b9c6d6; }
html .btn-primary, html .btn-secondary, html .btn-ghost, html .form-input, html .form-select, html select, html input, html textarea { border-radius: 6px; }

/* ---- Buttons: green with white text ---- */
html .btn-primary, html .tic-ahero__form button[type=submit], html form button[type=submit] {
  background-color: var(--ei-green); color: #fff; box-shadow: none; font-weight: 700; letter-spacing: 0;
}
html .btn-primary:hover, html form button[type=submit]:hover { background-color: var(--ei-green-dark); color: #fff; }
html .btn-secondary { border-color: var(--ei-ink); color: var(--ei-ink); }
html .btn-secondary:hover { background-color: var(--ei-ink); color: #fff; }
html .btn-ghost { color: var(--ei-ink); border-color: var(--ei-line); }
html .btn-ghost:hover { border-color: var(--ei-ink); }

/* ---- Header: white bar, ink text, green quote button ---- */
html header.sticky { background: rgb(255 255 255 / .97); border-bottom: 1px solid var(--ei-line); }
html header nav[aria-label="Primary"] > ul > li > a { color: var(--ei-ink); font-weight: 500; font-size: .95rem; padding-left: .6rem; padding-right: .6rem; white-space: nowrap; }
html header nav[aria-label="Primary"] > ul > li > a[aria-current="page"], html header nav[aria-label="Primary"] > ul > li > a:hover { color: var(--ei-green-dark); }
html header a[href*="#quote"], html header a[href*="get-a-quote"] { background: var(--ei-green); color: #fff; border-radius: 6px; }
html header a[href*="#quote"]:hover { background: var(--ei-green-dark); }
@media (min-width: 1280px) { html header > .container-page { max-width: 1240px; } }

/* ---- Inner-page hero (PageHero): mist band ---- */
html .bg-canvas-soft > nav[aria-label="Breadcrumb"] a:hover { color: var(--ei-green-dark); }

/* ---- Town hero (LocationPage) ---- */
html .tic-ahero { background: var(--ei-mist); border-bottom: 1px solid var(--ei-line); }
html .tic-ahero__title { color: var(--ei-ink); font-weight: 800; }
html .tic-ahero__ticks li { color: var(--ei-ink-soft); font-weight: 500; }
html .tic-ahero__form { border: 1px solid var(--ei-line); border-top: 0; border-radius: 12px; box-shadow: 0 18px 40px -24px rgb(20 35 60 / .45); }
html .tic-ahero__form h2, html .tic-ahero__form h3 { font-size: 1.25rem; }

/* Housing mix bar (the town's Census 2021 figures) */
.ei-mix { margin-top: 1.75rem; max-width: 34rem; }
.ei-mix__title { font-size: .9375rem; font-weight: 600; color: var(--ei-ink); }
.ei-mix__bar { display: flex; height: 14px; margin-top: .6rem; border-radius: 3px; overflow: hidden; background: var(--ei-line); }
.ei-mix__bar span { display: block; height: 100%; }
.ei-mix__key { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .7rem 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--ei-ink-soft); }
.ei-mix__key li { display: inline-flex; align-items: center; gap: .4rem; }
.ei-mix__key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ei-mix__key b { color: var(--ei-ink); font-weight: 700; }
.ei-mix__src { margin-top: .5rem; font-size: .8125rem; color: var(--ei-ink-muted); }
.ei-c1 { background: #14233c; } .ei-c2 { background: #2b59c3; } .ei-c3 { background: #7aa0e8; } .ei-c4 { background: #12a150; } .ei-c5 { background: #b9c6d6; }

/* ---- Footer ---- */
html footer.bg-ink { background: var(--ei-ink); border-top: 4px solid var(--ei-green-bright); }
html footer a:hover { color: #8ce0ae; }

/* ---- Dark CTA band ---- */
html .tic-cta, html section.bg-ink { background: var(--ei-ink); }

/* Section rhythm: alternate white and mist, hairline between same-colour neighbours. */
html main > section + section.bg-canvas { border-top: 1px solid transparent; }

@media (prefers-reduced-motion: reduce) { html * { transition: none !important; animation: none !important; } }

/* Town page: service links as a plain two-column list (no boxed cards, no arrows). */
.ei-svc { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem 2rem; }
@media (min-width: 640px) { .ei-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ei-svc a { color: var(--ei-green-dark); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(13 127 63 / .3); text-underline-offset: 4px; }
.ei-svc a:hover { text-decoration-color: currentColor; }
/* Steps (also used by the town template). */
.ei-steps { list-style: none; margin: 0; padding: 0; }
.ei-steps__item { border-top: 2px solid var(--ei-ink); padding-top: 1rem; }
.ei-steps__n { display: block; font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--ei-green); letter-spacing: -.02em; }
.ei-steps__item h3 { margin-top: .6rem; font-size: 1.0625rem; font-weight: 700; color: var(--ei-ink); }
.ei-steps__item p { margin-top: .35rem; font-size: .9375rem; line-height: 1.55; color: var(--ei-ink-soft); }
.ei-steps { display: grid; gap: 2rem 2rem; }
@media (min-width: 640px) { .ei-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ei-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Related links: plain underlined list in columns. */
.ei-links { margin: 1rem 0 0; padding: 0; list-style: none; columns: 1; column-gap: 2rem; }
@media (min-width: 640px) { .ei-links { columns: 2; } }
@media (min-width: 1024px) { .ei-links { columns: 3; } }
.ei-links li { break-inside: avoid; padding: .3rem 0; }
.ei-links a { color: var(--ei-green-dark); font-weight: 500; text-decoration: underline; text-decoration-color: rgb(13 127 63 / .3); text-underline-offset: 4px; }
.ei-links a:hover { text-decoration-color: currentColor; }

/* County page: towns as a ruled table with population. */
.ei-towns { width: 100%; border-collapse: collapse; font-size: .975rem; }
.ei-towns th { text-align: left; font-size: .875rem; font-weight: 600; color: var(--ei-ink-muted); padding: 0 0 .6rem; border-bottom: 2px solid var(--ei-ink); }
.ei-towns th:last-child, .ei-towns td:last-child { text-align: right; }
.ei-towns td { padding: .7rem 0; border-bottom: 1px solid var(--ei-line); color: var(--ei-ink-soft); font-variant-numeric: tabular-nums; }
.ei-towns td a { color: var(--ei-ink); font-weight: 600; }
.ei-towns td a:hover { color: var(--ei-green-dark); text-decoration: underline; }

/* FAQ: ruled rows, not a boxed card. */
html details { border-radius: 0; }

/* Quote form first on phones and tablets, beside the content on desktop. */
.ei-aside-first { order: -1; }
@media (min-width: 1024px) { .ei-aside-first { order: 0; } .lg\:order-last.ei-aside-first { order: 9; } }

/* Services as a ruled definition list (homepage and /services/). */
.ei-services{margin-top:2.5rem;border-top:2px solid #14233c}
.ei-services__row{display:grid;gap:.35rem;padding:1.15rem 0;border-bottom:1px solid #d6dee8}
.ei-services__row dt a{font-weight:700;font-size:1.125rem;color:#14233c;text-decoration:underline;text-decoration-color:#d6dee8;text-underline-offset:4px}
.ei-services__row dt a:hover{text-decoration-color:#0d7f3f;color:#0b6e36}
.ei-services__row dd{margin:0;color:#45546b;max-width:62ch}
@media (min-width:768px){.ei-services__row{grid-template-columns:16rem 1fr;gap:2rem;align-items:baseline}}
.ei-split > .ei-services{margin-top:0}

/* Content with the quote form beside it on desktop; form first on smaller screens (.ei-aside-first). */
.ei-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) {
  .ei-split { grid-template-columns: minmax(0, 1fr) 24rem; gap: 4rem; }
  .ei-split > aside { position: sticky; top: 6.5rem; }
  .ei-split > .ei-aside-right { grid-column: 2; grid-row: 1; }
}
.ei-region { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--ei-line); }
html .ei-formcard h2.text-xl, html .tic-ahero__form h2.text-xl, html .enquiry-form h2.text-xl { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }

/* Article pages: "at a glance" facts table and sources. */
.ei-facts { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ei-ink); }
.ei-facts caption { text-align: left; font-weight: 700; font-size: 1.0625rem; color: var(--ei-ink); padding-bottom: .6rem; }
.ei-facts th, .ei-facts td { text-align: left; vertical-align: top; padding: .75rem 0; border-bottom: 1px solid var(--ei-line); font-size: .975rem; }
.ei-facts th { width: 36%; padding-right: 1.25rem; font-weight: 600; color: var(--ei-ink); }
.ei-facts td { color: var(--ei-ink-soft); }
.ei-sources ul { margin: .6rem 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.ei-sources li { padding: .2rem 0; }
.ei-sources a { color: var(--ei-green-dark); text-decoration: underline; text-underline-offset: 3px; }
.ei-note { font-size: .875rem; line-height: 1.6; color: var(--ei-ink-soft); margin-top: 1rem; }
.ei-scroll { overflow-x: auto; }
.ei-compare th, .ei-compare td { padding-right: 1rem; }
.ei-compare thead th { font-size: .875rem; font-weight: 600; color: var(--ei-ink-soft); border-bottom: 1px solid var(--ei-line); padding: .5rem 1rem .5rem 0; width: auto; }
.ei-compare tbody th { width: 30%; }
.ei-compare a { color: var(--ei-green-dark); text-decoration: underline; text-underline-offset: 3px; }
.ei-split > * { min-width: 0; }
@media (max-width: 639px) {
  .ei-compare thead { display: none; }
  .ei-compare tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--ei-line); }
  .ei-compare tbody th, .ei-compare td { display: block; width: auto; border: 0; padding: .1rem 0; }
  .ei-compare td:nth-of-type(1)::before { content: "Lambda: "; font-weight: 600; color: var(--ei-ink); }
}