/* Customer-site finish. Load after the legacy themes and before roof-system.css.
   Color swatches, photographs, and semantic feedback retain their own colors. */
:root {
  --precision-pearl: #fafaf9;
  --precision-silver: #e8eaec;
  --precision-graphite: #292c2f;
  --navy: #292c2f;
  --navy-deep: #191b1d;
  --petrol: #454a4f;
  --teal: #61686e;
  --mint: #d9dde0;
  --champagne: #e8eaec;
  --sand: #fafafa;
  --red: #303438;
  --red-dark: #17191b;
  --ink: #25282b;
  --muted: #656b71;
  --paper: #fafaf9;
  --white: #fff;
  --line: #dcdfe2;
  --head: 'DM Sans', Arial, sans-serif;
  --serif: 'DM Sans', Arial, sans-serif;
  --shadow: 0 24px 60px #17191b12, 0 4px 14px #17191b08;
}

body { background: var(--precision-pearl); color: var(--ink); }
::selection { background: #d6dade; color: #17191b; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; }
.section h2, .page-title, .service-hero h1, .closing-cta h2,
.studio-feature h2, .package-results-intro h2, .package-next h3 {
  font-family: var(--head);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.page-intro:after { background: #dce0e345; }
.red-rule { background: #747c83; }
.text-link { border-color: #9a9fa4; }
.eyebrow { color: var(--muted); }

/* Navigation stays in the same sticky stacking context as the owner preview. */
.owner-preview-bar {
  background: #f0f1f2;
  color: #41464b;
  border-bottom-color: #d8dce0;
  box-shadow: none;
}
.owner-preview-bar > span { color: #666d73; }
.owner-preview-bar a { border-color: #c5cbd0; border-radius: 999px; }
.owner-preview-bar a:first-of-type {
  background: #fff;
  border-color: #bcc3c9;
  color: #292c2f;
  box-shadow: 0 2px 6px #17191b08;
}
.owner-preview-bar a:hover { background: #e1e4e7; color: #17191b; }
.topbar { background: #f0f1f2; color: #686e74; padding-block: 6px; }
.topbar a { color: #3e4449; }
.top-divider { color: #a4a9ae; }
.header, .header.has-scrolled {
  background: #ffffffed;
  color: var(--ink);
  border-bottom-color: #dcdfe2a6;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.header.has-scrolled { box-shadow: 0 8px 30px #17191b0b; }
.brand img { filter: none; mix-blend-mode: normal; }
.brand-fallback, .brand-fallback span { color: #17191b; }
.desktop-nav a:hover { color: #72797f; }
.header .language, .header .menu-toggle { color: var(--ink); }
.header .language span { color: var(--muted); }
.header .button {
  background: #303438;
  color: #fff;
  border-color: #303438;
  box-shadow: 0 5px 15px #17191b12;
}
.header .button:hover { background: #17191b; border-color: #17191b; }
.new { border-color: #c6ccd1; color: #555d64; border-radius: 4px; }
.mobile-nav { background: #fffffff7; color: var(--ink); box-shadow: var(--shadow); }
.mobile-nav a { border-bottom-color: #dcdfe2; }
.reading-progress { background: linear-gradient(90deg, #34393e, #aeb6bd); }

/* Shared controls. No rules target the roof-color chips or color inputs. */
.button {
  background: #303438;
  border-color: #303438;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 16px #17191b0b;
}
.button:hover { background: #17191b; border-color: #17191b; box-shadow: 0 10px 24px #17191b17; }
.button.outline { background: transparent; border-color: #a8afb5; color: var(--ink); box-shadow: none; }
.button.outline:hover { background: #eceeef; border-color: #747d85; }
.button.white { background: #fff; border-color: #fff; color: #292c2f; }
.button.white:hover { background: #e8eaec; border-color: #e8eaec; }
.field input, .field select, .field textarea {
  background: #fff;
  border-color: #bdc4cb;
  color: var(--ink);
  border-radius: 9px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #636c74;
  box-shadow: 0 0 0 3px #8c969f25;
}
.choice { border-color: #cfd4d9; background: #f7f8f8; border-radius: 10px; }
.choice:has(input:checked) { background: #eceff1; border-color: #606a73; box-shadow: inset 0 0 0 1px #606a73; }
.choice input { accent-color: #424a51; }
.notice:not(.warning):not(.good) { background: #edf0f2; border-left-color: #89949e; color: #4c5862; }
.panel, .studio-controls, .quote-package {
  background: #fff;
  border-color: #d7dce0;
  border-radius: 14px;
  box-shadow: 0 12px 34px #17191b08;
}
.upload-list li, .reference { background: #eef0f2; }

/* Existing home and service sections retain their layouts with neutral surfaces. */
.entry-strip, .entry-strip > a { border-color: #d4d9dd; }
.entry-strip h2 { font-family: var(--head); font-weight: 550; letter-spacing: -.035em; }
.entry-strip a > span, .card-number, .card-arrow { color: #666e75; }
.service-card {
  background: linear-gradient(145deg, #fff, #f3f4f5);
  border-color: #d8dde1;
  border-radius: 15px;
  box-shadow: 0 12px 30px #17191b07, 0 1px 3px #17191b05;
}
.service-card:hover { background: #fff; box-shadow: 0 20px 45px #17191b12; }
.service-card h3 { font-family: var(--head); font-weight: 550; letter-spacing: -.035em; }
.studio-feature { background: linear-gradient(120deg, #eceff1, #f7f8f8 65%, #e8ecef); border-color: #d8dde1; }
.studio-feature-image {
  border-color: #fff;
  box-shadow: 12px 16px 0 #cbd1d6, 24px 31px 0 #e0e4e7, 0 30px 50px #17191b15;
}
.sample-palette i { border-color: #fff; }
.sample-palette span { color: #626b73; }
.manufacturer-strip { background: #f0f2f3; border-color: #d8dde1; }
.manufacturer-strip strong { color: #4b5258; }
.work-grid figure { background: #fff; border-color: #d8dde1; box-shadow: 0 18px 45px #17191b13; }
.work-grid figcaption strong { font-family: var(--head); font-weight: 550; }
.process-section { background: #eceff1; color: var(--ink); }
.process-section .eyebrow, .steps article > span { color: #626c74; }
.steps article { border-color: #c4cbd1; }
.steps h3 { font-family: var(--head); font-weight: 550; }
.steps p { color: #606a73; }
.closing-cta { background: linear-gradient(120deg, #24282b, #3c4247); color: #fff; box-shadow: inset 0 1px #ffffff18; }
.closing-cta .eyebrow { color: #d1d7db; }
.closing-cta .red-rule { background: #c5cdd3; }
.closing-cta .button { background: #fff; border-color: #fff; color: #25282b; }
.closing-cta .button:hover { background: #e6eaed; border-color: #e6eaed; }
.faq-list, .faq-list details { border-color: #d3d9de; }
.service-hero { background: linear-gradient(120deg, #fafafa, #e8edf0); }
.service-hero > img { border-color: #fff; box-shadow: 18px 24px 0 #d9dfe4, 0 30px 60px #17191b12; }
.area-feature { background: #eceff1; }

/* A neutral fallback if the previous photo-book hero is used on another route. */
.story-hero { background: radial-gradient(ellipse at 80% 38%, #e1e6ea, transparent 55%), #fafaf9; color: var(--ink); }
.hero-atmosphere { background: radial-gradient(ellipse, #b7c0c926, transparent 68%); }
.story-hero .eyebrow, .story-hero .hero-copy > p, .story-hero .hero-assurance,
.hero-scroll-note, .hero-chapter-index { color: #646d75; }
.story-hero .red-rule { background: #929da6; }
.story-hero h1, .story-hero h1 em { font-family: var(--head); color: var(--ink); font-style: normal; font-weight: 600; }
.story-hero .hero-actions .button { background: #303438; border-color: #303438; color: #fff; box-shadow: 0 8px 22px #17191b17; }
.story-hero .hero-actions .button:hover { background: #17191b; border-color: #17191b; }
.story-hero .hero-actions .text-link { color: var(--ink); }
.story-hero .hero-assurance span + span, .hero-chapter-index { border-color: #ccd3d9; }
.scroll-mark { border-color: #929da6; }
.scroll-mark:before { background: #747f89; }
.hero-book { filter: drop-shadow(12px 35px 24px #17191b26); }
.hero-volume-page { background: #d1d7dc; border-color: #e9ecee; box-shadow: inset 6px 0 12px #17191b15; }
.page-back { background: #939fa9; }
.page-middle { background: linear-gradient(90deg, #c8ced4, #f0f2f3 10%, #b5bfc7); box-shadow: 2px 2px 0 #d1d6da, 4px 4px 0 #8c98a2, 6px 6px 0 #d3d9de; }
.hero-volume-cover { background: #333a40; border-color: #e4e8eb99; box-shadow: inset 1px 0 2px #fff; }
.hero-volume-cover-shade { background: linear-gradient(90deg, #17191b55, transparent 13%), linear-gradient(0deg, #191c20ef, transparent 76%); }
.hero-volume-edition, .hero-volume-cover-title { color: #fff; }
.hero-volume-cover-title small, .book-open-arrow { color: #dce2e6; }
.hero-volume-cover-title strong { font-family: var(--head); font-weight: 550; }
.book-open-arrow { border-color: #d8dfe680; }
.hero-volume-spine { background: linear-gradient(90deg, #30373d, #5c6872); color: #e1e6ea; }
.floating-photo { background: #f4f5f6; color: var(--ink); border-color: #fff; box-shadow: 0 28px 42px #17191b26; }
.book-orbit { border-color: #a2adb626; }
.story-hero .studio-teaser { background: #ffffffed; color: var(--ink); border-color: #dce1e6; box-shadow: 0 15px 45px #17191b17; border-radius: 13px; }
.story-hero .teaser-icon { border-color: #bdc7cf; color: #65727d; }
.story-hero .studio-teaser small { color: #66717b; }

/* Estimate and Roof Studio chrome; material and image colors stay untouched. */
.estimate-explainer { background: linear-gradient(130deg, #e9edf0, #f6f7f8); box-shadow: inset 0 1px #fff; border-radius: 14px; }
.estimate-explainer h2, .auto-studio-controls h2 { font-family: var(--head); font-weight: 550; }
.estimate-promise span, .package-kicker { color: #606b74; }
.estimate-progress button[aria-current=step] { border-color: #535f69; }
.package-featured { border-color: #6f7b85; background: #f5f7f8; box-shadow: 0 18px 45px #17191b10; }
.quote-package h3 { font-family: var(--head); font-weight: 550; }
.package-price { font-family: var(--body); }
.package-price span { color: #66717a; }
.quote-package li { border-color: #e2e6e9; }
.quote-package li:before { color: #5b6872; }
.estimate-sidebar { background: #30363b; }
.estimate-sidebar p, .estimate-sidebar .eyebrow, .estimate-sidebar ul { color: #d0d7dd; }
.mini-stat { border-color: #69757f; }
.studio-stage, .auto-studio-photo { background: #e3e8ec; border-color: #c5ced6; }
.canvas-wrap, .automatic-canvas-wrap { background: #d8dfe5; border-color: #bdc8d1; }
.canvas-labels span { background: #252b30b3; }
.auto-studio-controls { background: #eef1f3; border: 1px solid #d6dde3; border-radius: 14px; }
.studio-bottom button { border-color: #b6c1ca; border-radius: 999px; }
.material-chip { box-shadow: 6px 9px 0 #d4dce2; }
.roof-analysis-state { background: #fffffff0; color: var(--ink); }

/* Photo journal: white pages, silver frames, graphite navigation. */
.work-storybook {
  --book-ink: #25282b;
  --book-petrol: #eceff1;
  --book-teal: #626d76;
  --book-champagne: #4a555e;
  --book-paper: #25282b;
  --book-muted: #65717b;
  --book-hairline: #d5dde3;
  background: #fafaf9;
  color: #25282b;
}
.work-storybook h1, .work-storybook .book-chapter h2,
.work-storybook .book-archive-heading h2, .work-storybook .work-closing h2,
.work-storybook .gallery-card h2 { font-family: var(--head); font-weight: 550; }
.work-storybook h1 em, .work-storybook h2 em { font-style: normal; }
.work-storybook .book-cover { background: radial-gradient(ellipse at 85% 25%, #dfe6eb88, transparent 60%); }
.work-storybook .book-frame { background: #fff; color: #424c55; border: 1px solid #dbe2e7; box-shadow: 0 20px 65px #17191b1c; }
.work-storybook .book-frame button { background: #e1e6ea; }
.work-storybook .book-frame figcaption { font-family: var(--body); font-style: normal; }
.work-storybook .book-photo-open { border-color: #ffffffb3; background: #252b30b3; color: #fff; }
.work-storybook .book-rail { color: var(--ink); background: #fafaf9f5; }
.work-storybook .book-rail li a > span { color: #68747e; }
.work-storybook .book-folio { font-family: var(--head); font-style: normal; color: #79899521; }
.work-storybook .book-page-bottom { color: #66747f; }
.work-storybook .work-archive { background: #eef1f3; border-block: 1px solid #dce3e8; }
.work-storybook .work-archive .portfolio-filters button { color: #424e58; border-color: #c0cbd3; background: #ffffff80; }
.work-storybook .work-archive .portfolio-filters button[aria-pressed=true] { background: #333c43; border-color: #333c43; color: #fff; }
.work-storybook .work-archive .project-open { background: #dce4ea; border-color: #cbd5dd; border-radius: 9px; }
.work-storybook .work-archive .gallery-expand { background: #fffffff0; color: #303a42; }
.work-storybook .work-archive .gallery-card figcaption > span,
.work-storybook .work-archive .portfolio-source-note { color: #667681; }
.work-storybook .work-closing { background: radial-gradient(ellipse at 50% 100%, #dce4ea80, transparent 70%); }
.work-storybook .book-closing-mark { font-family: var(--head); color: #7e8f9b13; }
.storybook-lightbox.project-lightbox { background: #262b30; color: #f4f6f8; border-color: #737f895c; box-shadow: 0 24px 100px #17191b80; border-radius: 14px; }
.storybook-lightbox::backdrop { background: #171b20de; }
.storybook-lightbox .project-lightbox-top { color: #d5dfe7; }
.storybook-lightbox .project-lightbox-top button { color: #f7f9fa; border-color: #75828d80; }
.storybook-lightbox > img { background: #1b2024; }
.storybook-lightbox-caption { color: #c2cdd5; }
.storybook-lightbox .project-lightbox-nav button { color: #fff; border-color: #75828d80; }
.storybook-lightbox .project-lightbox-nav button:hover { background: #424d56; }
.storybook-lightbox button:focus-visible { outline-color: #d6e0e7; }
.portfolio-feature, .project-open { background: #e3e8ec; }

/* Coverage map uses dark ink on pearl, including its SVG labels and strokes. */
.coverage-page {
  --coverage-navy: #292e33;
  --coverage-petrol: #45515b;
  --coverage-teal: #687782;
  --coverage-champagne: #53616b;
  --coverage-paper: #fafaf9;
  --coverage-line: #d8e0e6;
}
.coverage-page .coverage-intro h1, .coverage-page .coverage-numbers strong,
.coverage-page .coverage-finder-heading h2, .coverage-page .coverage-next h2,
.coverage-page .coverage-empty h3 { font-family: var(--head); font-weight: 550; }
.coverage-page h1 em, .coverage-page h2 em { font-style: normal; }
.coverage-page .coverage-map {
  --coverage-teal: #687782;
  background: #fdfdfc;
  color: #35434d;
  border-color: #cbd6de;
  border-radius: 15px;
  box-shadow: 0 24px 60px #17191b10, 0 2px 8px #17191b06;
}
.coverage-page .coverage-map-heading { color: #414d56; }
.coverage-page .coverage-map figcaption { color: #667580; border-color: #dce4e9; }
.coverage-page .coverage-crossline { stroke-opacity: .22; }
.coverage-page .coverage-distance-label { opacity: 1; fill: #697883; }
.coverage-page .coverage-map-place > circle { stroke: #fdfdfc; }
.coverage-page .coverage-map-place > text { fill: #303d46; stroke: #fdfdfc; }
.coverage-page .coverage-map-place.is-focused > circle { fill: #25343f; stroke: #c9d5de; }
.coverage-page .coverage-map-place.is-focused > text { fill: #172731; }
.coverage-page .coverage-airport > circle { fill: #fdfdfc; }
.coverage-page .coverage-airport > path { stroke: #43545f; }
.coverage-page .coverage-airport > text { fill: #4f626f; stroke: #fdfdfc; }
.coverage-page .coverage-scale > text, .coverage-page .coverage-map-watermark { opacity: .85; }
.coverage-page .coverage-search-input { background: #fff; border-radius: 10px; }
.coverage-page .coverage-search-input input::placeholder { color: #707f89; }
.coverage-page .coverage-filters > button { border-radius: 999px; }
.coverage-page .coverage-town-list { background: #fff; }
.coverage-page .coverage-town-link:hover,
.coverage-page .coverage-town-link:focus-visible,
.coverage-page .coverage-town:target .coverage-town-link { background: #edf2f5; }
.coverage-page .coverage-next { background: #edf1f4; }

/* Footer, assistance, and privacy controls. */
footer { background: #272c30; color: #d7dee3; border-top-color: #5b6872; }
footer strong { font-family: var(--body); color: #fff; font-weight: 550; }
footer p { color: #b8c4cd; }
footer a:hover { color: #fff; }
.footer-bottom { border-color: #69798566; color: #b3c1cc; }
.chat-launch { background: #30383f; color: #fff; border-color: #707f8b; box-shadow: 0 10px 28px #17191b26; }
.chat-launch span { color: #dbe5ec; }
#chat-panel { background: #fafbfc; border-color: #c1cfd9; border-radius: 16px; box-shadow: 0 25px 70px #17191b24; }
.chat-head { background: #30383f; color: #fff; }
.chat-head small { color: #c2ced7; }
.chat-message { background: #edf2f5; color: #303d47; border-radius: 12px; }
.chat-message.user { background: #485864; color: #fff; }
.chat-message.user a { color: #fff; }
.chat-form input { background: #fff; color: var(--ink); }
.chat-suggestions button { background: #fff; border-color: #c3d0d9; color: #414f59; }
.mobile-dock { background: #fff; color: #343f48; border-top-color: #c4d1db; }
.mobile-dock a:last-child { background: #343d44; color: #fff; }
.privacy-dialog, #cookie-banner { background: #fff; color: var(--ink); border-color: #c4d0d9; border-radius: 14px; box-shadow: 0 22px 60px #17191b20; }
.privacy-dialog::backdrop { background: #252e3699; }
#cookie-banner button { background: #eef2f5; color: #394852; border-color: #bccbd6; border-radius: 999px; }
#cookie-banner button:first-child { background: #36434d; border-color: #36434d; color: #fff; }

@media (max-width: 520px) {
  .studio-feature-image { box-shadow: 9px 12px 0 #cbd1d6, 17px 23px 0 #e0e4e7, 0 20px 38px #17191b15; }
  .coverage-page .coverage-map { box-shadow: 0 16px 36px #17191b10; }
}

@media print {
  body, .work-storybook, .process-section, .closing-cta { background: #fff; color: #111; }
  .panel, .quote-package, .service-card, .coverage-page .coverage-map { box-shadow: none; }
}