/* Scoped finishing styles: no effect on the homepage, catalogue or demonstrations. */
.services-page main .container { width: min(1120px, calc(100% - 64px)); }
.services-page main { --service-gold: #e7c989; --service-muted: #bdc9ce; }
.services-page main h2 { text-wrap: balance; }
.services-page main .button { min-height: 46px; padding: 12px 20px; border-radius: 6px; font-size: 13px; }
.services-page main .button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px #0002; }
.services-page main :focus-visible { outline-color: #c69b4f; }

.services-introduction { text-align: center; padding: 48px 0 40px; background: #10191e; color: #fff; border-bottom: 1px solid #dcc08a29; }
.services-introduction h1 { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.16; letter-spacing: -1.3px; text-wrap: balance; color: #f3e2c0; }
.services-introduction p { max-width: 650px; margin: 16px auto 18px; color: #c5d0d4; font-size: 15px; line-height: 1.65; text-wrap: balance; }
.intro-contact { display: inline-flex; align-items: center; gap: 14px; padding: 8px 0; color: #ead1a0; font-size: 13px; border-bottom: 1px solid #bb9860; }
.intro-contact:hover { color: white; border-color: #f2d89f; }

.services-page .service-detail { padding: 52px 0; background: #10191e; overflow: visible; }
.services-page .service-detail-reverse { background: #f6f5f1; }
.services-page .service-detail::after { content: none; }
.services-page .service-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); column-gap: 48px; row-gap: 30px; }
.services-page .service-detail-copy { padding-top: 0; align-self: center; min-width: 0; }
.services-page .service-detail-copy > .eyebrow { font-size: 10px; letter-spacing: 1.8px; margin-bottom: 15px; }
.services-page .service-title-line { gap: 13px; margin-bottom: 18px; align-items: start; }
.services-page .service-title-line > .icon { width: 28px; height: 28px; margin-top: 4px; }
.services-page .service-title-line h2 { font-size: clamp(25px, 2.4vw, 31px); letter-spacing: -.6px; line-height: 1.18; margin: 0; }
.services-page .service-short { font: 400 15px/1.6 Arial, sans-serif; margin-bottom: 12px; color: #f1f3f3; }
.services-page .service-detail-copy > p:not(.eyebrow):not(.service-short) { font-size: 13px; line-height: 1.65; color: #bac8ce; max-width: none; }
.services-page .service-detail-reverse .service-short { color: #25363f; }
.services-page .service-detail-reverse .service-detail-copy > p:not(.eyebrow):not(.service-short) { color: #556770; }
.services-page .service-meta { display: flex; align-items: center; gap: 12px; margin: 19px 0; }
.services-page .service-meta .quote-badge { margin: 0; font-size: 9px; letter-spacing: 1px; padding: 5px 9px; border-color: #c5a36573; color: #eed299; }
.services-page .service-meta p { color: #bbc8cd; font-size: 11px; }
.services-page .service-detail-reverse .service-meta .quote-badge { border-color: #b49151; color: #77531a; }
.services-page .service-detail-reverse .service-meta p { color: #5b6a70; }
.services-page .service-detail .button { margin: 0; }

.services-page .service-detail-notes { gap: 0 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.services-page .service-detail-notes article { padding: 20px 0 19px; border-top: 1px solid #c8ac7540; }
.services-page .service-detail-notes h3 { font: 500 18px/1.3 Georgia, serif; color: #f0deba; margin-bottom: 12px; }
.services-page .service-detail-notes li { font-size: 13px; line-height: 1.55; padding-left: 21px; color: #c1cdd1; }
.services-page .service-detail-notes li::before { color: #d9b979; }
.services-page .service-detail-notes ol li { padding-left: 26px; }
.services-page .service-detail-notes ul, .services-page .service-detail-notes ol { gap: 7px; }
.services-page .service-detail-notes details { border-top: 1px solid #c8ac7540; border-bottom: 1px solid #c8ac7540; align-self: start; }
.services-page .service-detail-notes summary { display: flex; align-items: center; justify-content: space-between; list-style: none; min-height: 48px; padding: 12px 0; font-size: 12px; font-weight: 600; gap: 15px; }
.services-page .service-detail-notes summary::-webkit-details-marker { display: none; }
.services-page .service-detail-notes summary > span { font-size: 22px; line-height: 1; color: #e1c68b; font-weight: 400; transition: transform .15s; }
.services-page .service-detail-notes details[open] summary > span { transform: rotate(45deg); }
.services-page .service-detail-notes details > ul, .services-page .service-detail-notes details > ol { padding: 0 8px 18px 0; }
.services-page .service-detail-reverse .service-detail-notes article, .services-page .service-detail-reverse .service-detail-notes details { border-color: #bcb5a780; }
.services-page .service-detail-reverse .service-detail-notes h3 { color: #324048; }
.services-page .service-detail-reverse .service-detail-notes li { color: #52616a; }
.services-page .service-detail-reverse .service-detail-notes summary > span, .services-page .service-detail-reverse .service-detail-notes li::before { color: #886423; }

/* Keep mockups inside their column, with a consistent frame and legible captions. */
.services-page .service-visual { width: 100%; max-width: 560px; justify-self: end; align-self: center; min-width: 0; }
.services-page .audit-mock, .services-page .vitrine-mock, .services-page .maintenance-mock, .services-page .responsive-mock { border: 1px solid #a68a5759; border-radius: 10px; padding: 17px; box-shadow: 0 10px 26px #0002; }
.services-page .mock-top { padding: 9px 10px 15px; align-items: center; font-size: 12px; }
.services-page .mock-top > span { font-size: 9px; color: #d6c4a0; }
.services-page .audit-mock > p, .services-page .vitrine-mock > p, .services-page .maintenance-mock > p, .services-page .responsive-mock > p { font-size: 10px; line-height: 1.5; margin: 15px 3px 0; color: #bac8ce; }
.services-page .audit-layout { padding: 20px 2px 6px; gap: 20px; grid-template-columns: .75fr 1.25fr; }
.services-page .score { padding: 20px 12px; gap: 12px; }
.services-page .score small, .services-page .score span { font-size: 10px; line-height: 1.5; }
.services-page .score strong { font-size: 42px; }
.services-page .audit-list { gap: 10px; }
.services-page .audit-list b { font-size: 12px; }
.services-page .audit-list > span { font-size: 11px; padding-bottom: 9px; }
.services-page .responsive-mock { padding-right: 46px; }
.services-page .wide-screen { border-width: 1px; }
.services-page .wide-content { min-height: 224px; grid-template-columns: 1fr 1fr; }
.services-page .wide-content > div { padding: 25px 15px; }
.services-page .wide-content h3 { font-size: 25px; }
.services-page .wide-content img { min-height: 224px; height: 100%; }
.services-page .small-screen { right: 13px; bottom: 52px; width: 100px; min-height: 193px; padding: 19px 10px 13px; border: 3px solid #d1d7d3; }
.services-page .small-screen h4 { font-size: 15px; margin: 24px 0 16px; }
.services-page .vitrine-hero { min-height: 232px; }
.services-page .vitrine-hero > div { padding: 33px 17px; }
.services-page .vitrine-hero h3 { font-size: 25px; }
.services-page .vitrine-hero img { min-height: 232px; }
.services-page .vitrine-cards { padding: 11px; }
.services-page .vitrine-cards span { padding: 14px 6px; }
.services-page .maintenance-grid { padding: 17px 5px; gap: 10px; }
.services-page .maintenance-grid span { padding: 15px 12px; }
.services-page .maintenance-grid b { font-size: 11px; }
.services-page .maintenance-grid i { font-size: 10px; line-height: 1.5; }
.services-page .maintenance-list { margin: 0 5px; padding: 14px; gap: 9px; }
.services-page .maintenance-list b, .services-page .maintenance-list span { font-size: 10px; }

/* Two complete, immobile layers: the divider changes clipping, never geometry. */
.renovation-comparison { margin: 0; }
.comparison-labels { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.comparison-labels > span { font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; color: #52616b; }
.comparison-labels > span:last-child { color: #80591f; }
.comparison-labels > b { font: 500 13px Georgia, serif; color: #34424a; }
.services-page .service-comparison { position: relative; isolation: isolate; container-type: inline-size; width: 100%; height: auto; min-height: 370px; aspect-ratio: 1.4; overflow: hidden; border: 1px solid #b09a7299; border-radius: 9px; background: #0c1920; touch-action: pan-y; }
.comparison-layer { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.comparison-after { z-index: 0; background: #112027; color: white; }
.comparison-before { z-index: 1; clip-path: inset(0 calc(100% - var(--position)) 0 0); background: #e2e2de; color: #434943; }
.example-site { display: grid; grid-template-rows: 61px minmax(0, 1fr) 70px 31px; width: 100%; height: 100%; padding: 0 20px; overflow: hidden; }
.example-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 61px; border-bottom: 1px solid #ffffff20; }
.example-header > b { font: 600 clamp(11px, 2.7cqw, 15px)/1.2 Georgia, serif; color: #eed3a1; }
.example-header > b > span { display: block; margin-top: 4px; font: 400 7px/1.3 Arial, sans-serif; letter-spacing: .7px; color: #bdcbd0; }
.example-navigation { font-size: clamp(7px, 1.6cqw, 9px); color: #d0dade; white-space: nowrap; }
.example-menu { display: none; }
.example-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 18px; min-height: 0; padding: 20px 0; align-items: stretch; }
.example-copy { display: flex; flex-direction: column; align-items: start; justify-content: center; min-width: 0; min-height: 0; }
.example-copy > small { font-size: clamp(7px, 1.7cqw, 9px); color: #dcb978; margin-bottom: 11px; }
.example-copy h3 { font: 500 clamp(21px, 5.7cqw, 32px)/1.04 Georgia, serif; letter-spacing: -.6px; margin: 0 0 11px; }
.example-copy p { font: 400 clamp(8px, 1.9cqw, 10px)/1.5 Arial, sans-serif; color: #c0ced4; margin-bottom: 14px; }
.example-cta { font-size: clamp(7px, 1.7cqw, 9px); padding: 9px 10px; background: #e6c485; color: #14232a; border-radius: 3px; white-space: nowrap; }
.example-body > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 52% center; border-radius: 3px; }
.example-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #ffffff25; padding: 14px 0; gap: 8px; }
.example-services > span { font-size: clamp(7px, 1.8cqw, 10px); color: #ebeeeb; }
.example-services i { font-style: normal; display: block; color: #d5b77e; font-size: 8px; margin-bottom: 6px; }
.example-footer { padding: 9px 0; border-top: 1px solid #ffffff20; color: #adc0c9; font-size: 8px; }
.comparison-before .example-header { border-color: #b8bdb9; }
.comparison-before .example-header > b { font-family: Arial, sans-serif; font-size: clamp(10px, 2.3cqw, 13px); font-weight: 400; color: #454d47; }
.comparison-before .example-header > b > span { letter-spacing: 0; color: #59665e; }
.comparison-before .example-navigation { color: #4c564f; font-size: 7px; text-decoration: underline; }
.comparison-before .example-copy > small { color: #566158; }
.comparison-before .example-copy h3 { font: 400 clamp(16px, 3.9cqw, 22px)/1.25 Arial, sans-serif; letter-spacing: 0; }
.comparison-before .example-copy p { color: #536058; }
.comparison-before .example-cta { background: #d0d2cd; color: #45514a; border: 1px solid #afb6ae; border-radius: 0; padding: 7px 8px; }
.comparison-before .example-body > img { border-radius: 0; filter: saturate(.4); }
.comparison-before .example-services { border-color: #aab3ac; }
.comparison-before .example-services span { color: #49564e; font-size: 8px; background: #d3d7d0; padding: 5px; }
.comparison-before .example-services i { color: #617267; margin-bottom: 4px; }
.comparison-before .example-footer { color: #57655e; border-color: #afb8b0; }
.comparison-divider { position: absolute; z-index: 2; inset: 0 auto 0 var(--position); width: 2px; transform: translateX(-50%); background: #ecd5a3; pointer-events: none; }
.comparison-divider > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #e9c984; border-radius: 50%; background: #14232b; color: #f4dcaa; box-shadow: 0 2px 10px #0004; font: 22px Arial, sans-serif; }
.services-page .service-comparison { cursor: ew-resize; }
.services-page .service-comparison-range { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; touch-action: pan-y; }
.service-comparison:has(input:focus-visible) { outline: 3px solid #a2752f; outline-offset: 4px; }
.service-comparison.is-dragging .comparison-divider > span { background: #2e414b; }
.comparison-help { font-size: 11px; color: #57666e; line-height: 1.5; margin: 12px 0 5px; text-align: center; }
.renovation-comparison figcaption { font-size: 10px; color: #66717a; text-align: center; }
@container (max-width: 410px) {
  .example-site { padding: 0 14px; grid-template-rows: 54px minmax(0, 1fr) 64px 31px; }
  .example-header { min-height: 54px; }
  .comparison-after .example-navigation { display: none; }
  .comparison-after .example-menu { display: block; font-size: 16px; color: #dfc18b; }
  .example-body { gap: 12px; padding: 15px 0; }
  .example-copy h3 { font-size: 23px; }
  .example-copy > small { margin-bottom: 8px; }
  .example-cta { font-size: 7px; padding: 8px 6px; }
  .comparison-before .example-copy h3 { font-size: 18px; }
  .example-services { padding: 11px 0; }
  .example-services > span { font-size: 8px; }
}

.services-page .services-comparison, .services-page .service-faq { padding: 48px 0; }
.services-page .services-comparison h2, .services-page .service-faq h2 { font-size: 31px; line-height: 1.2; letter-spacing: -.6px; }
.services-page .services-comparison .section-heading > p { color: #58686f; font-size: 12px; }
.services-page .service-table-wrap td:nth-child(2) { color: #53636c; }
.services-page .service-table-wrap tbody th { font-size: 15px; line-height: 1.45; }
.services-page .service-table-wrap td:last-child { white-space: nowrap; }
.services-page .service-faq > .container { gap: 40px; }
.services-page .service-faq summary { min-height: 50px; font-size: 13px; line-height: 1.45; }
.services-page .service-faq .faq-list details > p { color: #53636c; line-height: 1.65; }
.services-page .cta-band::before { content: none; }
.services-page .cta-band h2 { font-size: 31px; letter-spacing: -.6px; }

@media (max-width: 980px) {
  .services-page main .container { width: calc(100% - 48px); }
  .services-page .service-detail-grid { column-gap: 30px; }
  .services-page .service-title-line { gap: 10px; }
  .services-page .service-title-line > .icon { width: 24px; height: 24px; }
  .services-page .service-title-line h2 { font-size: 27px; }
  .services-page .service-meta { gap: 8px; }
  .services-page .service-meta p { font-size: 10px; }
  .services-page .service-comparison { aspect-ratio: 1.05; }
  .services-page .audit-layout { grid-template-columns: 1fr; padding-top: 12px; gap: 10px; }
  .services-page .score { display: flex; align-items: center; justify-content: space-between; padding: 12px; gap: 10px; }
  .services-page .score strong { font-size: 26px; }
  .services-page .audit-list { gap: 6px; }
  .services-page .wide-content h3, .services-page .vitrine-hero h3 { font-size: 22px; }
}
@media (max-width: 820px) {
  .services-page .service-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .services-page .service-detail { padding: 40px 0; }
  .services-page .service-visual { max-width: 610px; justify-self: center; }
  .services-page .service-detail-copy { max-width: 640px; }
  .services-page .service-comparison { min-height: 0; aspect-ratio: 1.55; }
  .services-page .audit-layout { grid-template-columns: .75fr 1.25fr; gap: 18px; }
  .services-page .score { display: grid; justify-content: center; }
  .services-page .score strong { font-size: 42px; }
  .services-page .service-detail-notes { gap: 0 24px; }
  .services-page .service-title-line h2 { font-size: 28px; }
}
@media (max-width: 600px) {
  .services-page main .container { width: calc(100% - 36px); }
  .services-introduction { padding: 32px 0 29px; }
  .services-introduction h1 { font-size: 34px; letter-spacing: -.8px; }
  .services-introduction p { font-size: 14px; margin: 14px auto; }
  .services-page .service-detail { padding: 34px 0; }
  .services-page .service-title-line h2 { font-size: 26px; }
  .services-page .service-title-line { margin-bottom: 15px; }
  .services-page .service-short { font-size: 14px; }
  .services-page .service-detail-copy > .eyebrow { font-size: 9px; margin-bottom: 13px; }
  .services-page .service-meta { margin: 17px 0; gap: 10px; }
  .services-page .service-meta p { font-size: 10px; }
  .services-page .service-detail-notes { grid-template-columns: 1fr; gap: 0; }
  .services-page .service-detail-notes article { padding: 18px 0; }
  .services-page .service-detail-notes h3 { font-size: 18px; }
  .services-page .service-detail-notes li { font-size: 13px; }
  .services-page .service-detail-notes details + details { border-top: 0; }
  .services-page .service-detail-notes summary { font-size: 13px; min-height: 48px; }
  .services-page .service-comparison { height: 332px; aspect-ratio: auto; }
  .services-page .audit-mock, .services-page .vitrine-mock, .services-page .maintenance-mock, .services-page .responsive-mock { padding: 13px; }
  .services-page .responsive-mock { padding-right: 37px; }
  .services-page .small-screen { right: 10px; width: 88px; min-height: 178px; bottom: 63px; padding: 16px 8px 10px; }
  .services-page .small-screen h4 { font-size: 13px; margin: 23px 0 15px; }
  .services-page .wide-nav { font-size: 7px; padding: 11px 8px; }
  .services-page .wide-nav span { font-size: 6px; }
  .services-page .wide-content > div { padding: 23px 10px; }
  .services-page .wide-content h3 { font-size: 22px; }
  .services-page .wide-content p { font-size: 9px; }
  .services-page .wide-content img { min-height: 216px; }
  .services-page .wide-content { min-height: 216px; }
  .services-page .vitrine-hero { min-height: 208px; }
  .services-page .vitrine-hero > div { padding: 27px 12px; }
  .services-page .vitrine-hero h3 { font-size: 22px; }
  .services-page .vitrine-hero img { min-height: 208px; }
  .services-page .vitrine-hero b { font-size: 7px; }
  .services-page .mock-top { font-size: 11px; padding: 7px 4px 13px; }
  .services-page .mock-top > span { font-size: 8px; }
  .services-page .audit-layout { gap: 13px; }
  .services-page .audit-list > span { font-size: 10px; }
  .services-page .score small, .services-page .score span { font-size: 9px; }
  .services-page .services-comparison, .services-page .service-faq { padding: 36px 0; }
  .services-page .services-comparison .section-heading { display: block; }
  .services-page .services-comparison .section-heading > p { max-width: none; margin-top: 13px; }
  .services-page .services-comparison h2, .services-page .service-faq h2, .services-page .cta-band h2 { font-size: 28px; }
  .services-page .service-table-wrap table { min-width: 0; }
  .services-page .service-table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .services-page .service-table-wrap tbody { display: block; }
  .services-page .service-table-wrap tr { display: grid; grid-template-columns: 1fr 1fr; padding: 17px; border-bottom: 1px solid #e0e3e0; }
  .services-page .service-table-wrap tbody th, .services-page .service-table-wrap td:nth-child(2) { grid-column: 1 / -1; }
  .services-page .service-table-wrap th, .services-page .service-table-wrap td { padding: 0; border: 0; background: none; }
  .services-page .service-table-wrap td:nth-child(2) { margin: 10px 0 14px; font-size: 13px; line-height: 1.5; }
  .services-page .service-table-wrap td:last-child { text-align: right; }
  .services-page .service-table-wrap tr:last-child { border: 0; }
  .services-page .service-faq > .container { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-page main .button, .services-page .service-detail-notes summary > span { transition: none; }
}