/*
 * Energy Home Insulation design layer (10 Nov 2026). Loaded last in <head>, so it sets the look of the whole site.
 * Its own design: warm, homely and calm. It must not look like Energy Insulation, Insulation Eco, EcoInsulate,
 * Energy Home Insulation or the other national sites; see CLAUDE.md "Design". (Class names keep the theme's `ei-`/`ie-`
 * prefixes; only the look is Energy Home Insulation's.)
 *
 * Palette: burgundy #7A2531 (buttons with white text, 9:1; marks), deep burgundy #5E1B25, slate #2F3A45 (text,
 * footer), sky #EEF4FA (heroes, alternate sections), blush #F6D5D9 (highlights, from the logo), line #D5DEE8.
 * Type: Outfit throughout, medium-weight headings. Sentence case.
 * Shape: soft — 10px buttons and fields, 16px cards, 22px quote form; the main menu sits in a sky pill.
 */

:root {
  --ei-ink: #2f3a45; --ei-ink-soft: #4d5a67; --ei-ink-muted: #5f6b77;
  --ie-heather: #7a2531; --ie-heather-dark: #5e1b25; --ie-saffron: #7a2531; --ie-saffron-dark: #5e1b25;
  --ei-mist: #eef4fa; --ei-line: #d5dee8; --eh-blush: #f6d5d9;
  --ie-serif: Outfit, system-ui, sans-serif;
  --ie-sans: Outfit, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --el-shadow: 0 24px 48px -28px rgb(47 58 69 / .45);
}

/* ---- Type ---- */
html, html body, html button, html input, html select, html textarea { font-family: var(--ie-sans); }
html h1, html h2, html h3, html .font-display, html .prose-content :is(h1, h2, h3) { font-family: var(--ie-serif); }
html h4, html .prose-content :is(h4, h5, h6, th) { font-family: var(--ie-sans); }
html body { background: #fff; color: var(--ei-ink); font-size: 1.0625rem; 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: 600; font-size: 2.6rem; line-height: 1.05; letter-spacing: -0.02em; }
html h2.text-3xl, html h2.text-2xl, html .prose-content h2 { font-weight: 600; font-size: 1.9rem; line-height: 1.12; letter-spacing: -0.015em; }
html h3[class], html h2.text-xl, html h2.text-lg, html h2.text-base { font-weight: 600; font-size: 1.375rem; line-height: 1.15; }
html p.tic-ahero__lede, html h1 ~ p.text-lg, html p.ei-hero__lede { font-size: 1.1875rem; line-height: 1.6; color: var(--ei-ink-soft); }
@media (min-width: 640px) {
  html h1, html h1[class] { font-size: 3.4rem; }
  html h2.text-3xl, html h2.text-2xl, html .prose-content h2 { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
  html h1, html h1[class] { font-size: 4.25rem; }
  html h2.text-3xl, html h2.text-2xl { font-size: 2.75rem; }
}
html .eyebrow { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; color: var(--ie-heather); display: inline-block; background: var(--eh-blush); padding: .2rem .75rem; border-radius: 999px; }
html .prose-content { --tw-prose-headings: var(--ei-ink); --tw-prose-bold: var(--ei-ink); --tw-prose-bullets: var(--ie-saffron); --tw-prose-links: var(--ie-heather-dark); }
html .prose-content p, html .prose-content li { max-width: 66ch; }

/* ---- 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(--ie-heather-dark); }
html .text-moss-500 { color: var(--ie-saffron-dark); }
html .text-clay-500 { color: #b3261e; }
html .link-inline { color: var(--ie-heather); text-decoration-color: rgb(122 37 49 / .35); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
html .link-inline:hover { text-decoration-color: currentColor; }
html :focus-visible { outline: 3px solid #7a2531; outline-offset: 3px; }

/* ---- Shapes ---- */
html .card, html .rounded-card { border-radius: 16px; }
html .card { box-shadow: none; border-color: var(--ei-line); }
html .card:hover { box-shadow: var(--el-shadow); border-color: var(--ei-line); }
html .btn-primary, html .btn-secondary, html .btn-ghost { border-radius: 10px; }
html .form-input, html .form-select, html select, html input, html textarea { border-radius: 10px; border: 1.5px solid #c4cfdb; }
html .form-input:focus, html select:focus, html input:focus, html textarea:focus { border-color: #7a2531; box-shadow: 0 0 0 4px rgb(122 37 49 / .14); }

/* ---- Buttons: safety yellow with graphite text and a hard shadow ---- */
html .btn-primary, html .tic-ahero__form button[type=submit], html form button[type=submit] {
  background-color: #7a2531; color: #fff; box-shadow: none; border: 0; font-weight: 600; letter-spacing: 0; border-radius: 10px;
}
html .btn-primary:hover, html form button[type=submit]:hover { background-color: #5e1b25; 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); }

/* ---- Header: white bar, logo left, menu inside a sky pill, burgundy quote button ---- */
html header.sticky { background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--ei-line); box-shadow: none; }
html header .container-page { max-width: 1240px; }
html header > .container-page:first-child > a:first-child img { height: 46px; width: auto; }
html header #mobile-menu-button { border-radius: 12px; border: 1px solid var(--ei-line); background: var(--ei-mist); color: var(--ei-ink); }
html header a[href*="#quote"], html header .ei-navcta { background: #7a2531; color: #fff !important; border: 0; border-radius: 999px !important; box-shadow: none; font-weight: 600; padding-left: 1.3rem; padding-right: 1.3rem; white-space: nowrap; }
html header a[href*="#quote"]:hover, html header .ei-navcta:hover { background: #5e1b25; }
html header .ei-navcta__roof { display: none; }
html header nav[aria-label="Primary"] > ul { background: var(--ei-mist); border: 1px solid var(--ei-line); border-radius: 999px; padding: .3rem; gap: .1rem; }
html header nav[aria-label="Primary"] > ul > li > a { color: var(--ei-ink); font-weight: 500; font-size: .97rem; padding: .5rem .95rem; border-radius: 999px; background: none; box-shadow: none; white-space: nowrap; }
html header nav[aria-label="Primary"] > ul > li > a:hover,
html header nav[aria-label="Primary"] > ul > li:focus-within > a { background: #fff; color: var(--ie-heather); }
html header nav[aria-label="Primary"] > ul > li > a[aria-current="page"] { background: #fff; color: var(--ie-heather); box-shadow: 0 1px 3px rgb(47 58 69 / .15); }
@media (max-width: 1365px) { html header nav[aria-label="Primary"] > ul > li > a { padding: .45rem .7rem; font-size: .93rem; } }
html header .ei-drop { border-radius: 16px; border: 1px solid var(--ei-line); box-shadow: var(--el-shadow); padding: .5rem; min-width: 16rem; background: #fff; }
html header .ei-drop:has(> li:nth-child(8)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 31rem; column-gap: .25rem; }
html header .ei-drop > li > a { padding-left: .8rem !important; color: var(--ei-ink) !important; font-weight: 400; border-radius: 10px; }
html header .ei-drop > li > a:hover { background: var(--ei-mist) !important; color: var(--ie-heather) !important; }

/* ---- Inner-page hero with a photo: full-width picture fading from white on the left ---- */
html .bg-canvas-soft > nav[aria-label="Breadcrumb"] a:hover { color: var(--ie-heather-dark); }
.ei-bghero { position: relative; overflow: hidden; isolation: isolate; background: #fff !important; }
.ei-bghero__img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; }
.ei-bghero::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .86) 0%, rgb(255 255 255 / .93) 50%, #fff 92%); }
.ei-bghero { border-bottom: 0; }
@media (min-width: 1024px) {
  .ei-bghero { --ei-text-edge: calc(max(1.5rem, 50% - 568px) + 34rem); }
  .ei-bghero::before { background:
      linear-gradient(90deg, #fff 0, #fff calc(var(--ei-text-edge) - 10rem), rgb(255 255 255 / .9) calc(var(--ei-text-edge) - 4rem),
        rgb(255 255 255 / .55) calc(var(--ei-text-edge) + 4rem), rgb(255 255 255 / .18) calc(var(--ei-text-edge) + 12rem), rgb(255 255 255 / 0) calc(var(--ei-text-edge) + 20rem)),
      linear-gradient(0deg, #fff 0, rgb(255 255 255 / 0) 5rem); }
  .ei-bghero__copy > * { max-width: 32rem; }
}
.ei-bghero__cap { margin-top: 1.25rem; max-width: 34rem; font-size: .8125rem; line-height: 1.5; color: var(--ei-ink-muted); }

/* ---- Town hero (LocationPage) ---- */
html .tic-ahero { background: var(--ei-mist); border-bottom: 0; }
html .tic-ahero__title { color: var(--ei-ink); font-weight: 800; }
html .tic-ahero__ticks li { color: var(--ei-ink-soft); }
html .tic-ahero__form { border: 1px solid var(--ei-line); border-radius: 22px; box-shadow: var(--el-shadow); }
html .tic-ahero__form h2, html .tic-ahero__form h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
/* The Census housing-mix bar is Energy Insulation's signature: never shown on this site. */
.ei-mix { display: none !important; }

/* ---- Footer: graphite with a tape-measure stripe on top ---- */
html footer.bg-ink { background: #2f3a45; border-top: 0; border-radius: 28px 28px 0 0; }
html footer a:hover { color: #f6d5d9; }

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

/* Town page: service links as a plain two-column list. */
.ei-svc { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem 2rem; }
@media (min-width: 640px) { .ei-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ei-svc a { color: var(--ie-heather-dark); text-decoration: underline; text-decoration-color: rgb(122 37 49 / .35); text-underline-offset: 5px; }
.ei-svc a:hover { text-decoration-color: currentColor; }
/* Steps: serif numerals, no boxes. */
.ei-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.ei-steps__item { border-top: 0; padding-top: 0; }
.ei-steps__n { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; font-weight: 600; font-size: 1.1rem; line-height: 1; color: #7a2531; background: #f6d5d9; border-radius: 50%; }
.ei-steps__item h3 { margin-top: .8rem; font-size: 1.2rem; font-weight: 600; color: var(--ei-ink); }
.ei-steps__item p { margin-top: .35rem; font-size: 1rem; line-height: 1.6; color: var(--ei-ink-soft); }
@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 */
.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(--ie-heather-dark); text-decoration: underline; text-decoration-color: rgb(122 37 49 / .35); text-underline-offset: 4px; }
.ei-links a:hover { text-decoration-color: currentColor; }

/* FAQ */
html details { border-radius: 0; }
html details summary { font-family: var(--ie-serif); font-size: 1.15rem; font-weight: 500; }

/* 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 list (/services/). */
.ei-services { margin-top: 2.5rem; border-top: 1px solid var(--ei-line); }
.ei-services__row { display: grid; gap: .35rem; padding: 1.25rem 0; border-bottom: 1px solid var(--ei-line); }
.ei-services__row dt a { font-family: var(--ie-serif); font-size: 1.375rem; font-weight: 700; color: var(--ei-ink); text-decoration: underline; text-decoration-color: var(--ei-line); text-underline-offset: 6px; }
.ei-services__row dt a:hover { text-decoration-color: var(--ie-saffron); }
.ei-services__row dd { margin: 0; color: var(--ei-ink-soft); max-width: 62ch; }
@media (min-width: 768px) { .ei-services__row { grid-template-columns: 17rem 1fr; gap: 2rem; align-items: baseline; } }
.ei-split > .ei-services { margin-top: 0; }

/* Content with the quote form beside it on desktop. */
.ei-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) {
  .ei-split { grid-template-columns: minmax(0, 1fr) 25rem; gap: 4.5rem; }
  .ei-split > aside { position: sticky; top: 6.5rem; }
  .ei-split > .ei-aside-right { grid-column: 2; grid-row: 1; }
}
.ei-split > * { min-width: 0; }
.ei-region { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--ei-line); }
html .ei-formcard, html .tic-ahero__form { border-radius: 22px; }
html .ei-formcard { border: 1px solid var(--ei-line) !important; border-radius: 22px !important; box-shadow: var(--el-shadow) !important; background: #fff; }
html .ei-formcard h2.text-xl, html .tic-ahero__form h2.text-xl, html .enquiry-form h2.text-xl { font-family: var(--ie-serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }

/* Article pages: facts table and sources. */
.ei-facts { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ei-line); }
.ei-facts caption { text-align: left; font-family: var(--ie-serif); font-size: 1.375rem; color: var(--ei-ink); padding-bottom: .6rem; }
.ei-facts th, .ei-facts td { text-align: left; vertical-align: top; padding: .8rem 0; border-bottom: 1px solid var(--ei-line); font-size: 1rem; }
.ei-facts th { width: 36%; padding-right: 1.25rem; font-weight: 700; 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(--ie-heather-dark); text-decoration: underline; text-underline-offset: 3px; }
.ei-note { font-size: .9375rem; 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: 700; 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(--ie-heather-dark); text-decoration: underline; text-underline-offset: 3px; }
@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: "Good for: "; font-weight: 600; color: var(--ei-ink); }
}

/* Photos */
.ei-photo { margin: 0; }
.ei-photo img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--ei-mist); }
.ei-photo figcaption { margin-top: .6rem; font-size: .875rem; line-height: 1.5; color: var(--ei-ink-soft); }

/* County pages: towns as a ruled list in columns. */
.ei-townlist { margin: 0; padding: 0; list-style: none; columns: 2 12rem; column-gap: 2rem; border-top: 1px solid var(--ei-line); }
.ei-townlist li { break-inside: avoid; border-bottom: 1px solid var(--ei-line); }
.ei-townlist a { display: block; padding: .7rem 0; color: var(--ei-ink); }
.ei-townlist a:hover { color: var(--ie-heather-dark); text-decoration: underline; }

/* Service pictures as soft cards with the name underneath (used on /services/ and elsewhere). */
.ie-cards { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.75rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .ie-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2rem; } }
.ie-cards a { display: block; color: var(--ei-ink); }
.ie-cards img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }

.ie-cards strong { display: block; margin-top: .85rem; font-family: var(--ie-serif); font-weight: 600; font-size: 1.3125rem; line-height: 1.25; }
.ie-cards span { display: block; margin-top: .3rem; font-size: .9375rem; line-height: 1.5; color: var(--ei-ink-soft); }
.ie-cards a:hover strong { text-decoration: underline; text-decoration-color: var(--ie-saffron); text-underline-offset: 5px; }

/* Leftover theme accent classes mapped to Energy Home Insulation's palette. */
html .text-moss-600, html .text-moss-800, html .group-open\:text-moss-700 { color: var(--ie-heather); }
html .bg-moss-50 { background-color: var(--ei-mist); }
html .border-moss-200 { border-color: var(--ei-line); }
/* Menus near the right edge open leftwards so they never push the page sideways. */
html header li.group:nth-child(n+5) > div.absolute { left: auto; right: 0; }
html .enquiry-form select.form-input, html .enquiry-form select { width: 100%; }
.ec-tick { display: flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--ei-line); font-size: .875rem; font-weight: 500; color: var(--ei-ink); }
.ec-tick::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #7a2531; }
html .tic-cta, html section.bg-ink { background: #7a2531; color: #fff; }
html section.bg-ink :is(h2, p) { color: #fff !important; }
html section.bg-ink .eyebrow { background: rgb(255 255 255 / .15) !important; color: #fff !important; }
html section.bg-ink .btn-primary { background: #fff; color: #7a2531; }
html section.bg-ink .btn-primary:hover { background: #f6d5d9; color: #5e1b25; }
html .enquiry-form .form-input, html .enquiry-form select, html .enquiry-form textarea { border: 1.5px solid #c4cfdb; border-radius: 10px; }
/* House-type tiles in the quiz form (step 1). */
html .quiz-form .quiz-tiles--homes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html .quiz-form .quiz-tile--home span { flex-direction: column; justify-content: center; text-align: center; gap: .4rem; padding: .85rem .4rem; border-radius: 14px; font-weight: 500; font-size: .875rem; }
html .quiz-form .quiz-tile--home svg { color: #7a2531; }
html .quiz-form .quiz-tile span { border-radius: 12px; }