/* Solid, alternating surfaces and precise rules give each chapter a clear boundary. */
:root { --soft: #ededed; --line: #c9c9c9; --section-space: clamp(38px, 3.6vw, 68px); }
main h2 { font-size: clamp(1.85rem, 2.45vw, 2.8rem); line-height: 1.13; }
main .section { padding-block: var(--section-space); }
.site-block + .site-block { border-top: 1px solid var(--line); }
.site-block--home_services, .site-block--about_story, .site-block--services_build, .site-block--services_lighting { background: #fff; }
.site-block--project_highlights, .site-block--projects_gallery, .site-block--about_people { background: var(--soft); }
.site-block--home_hero + .site-block, .site-block--home_trust + .site-block { border-top: 0; }
.site-block--home_trust .trust-strip { border-bottom-color: var(--line); }
.site-block .page-title { border-bottom: 0; background: #f3f3f3; }
.page-title-photo { border-radius: 3px; border-color: #c9c9c9; }
.page-title-photo figcaption { border-top: 2px solid #171717; }
.section-heading { border-bottom: 2px solid #171717; padding-bottom: 20px; gap: 20px; }
main .eyebrow { color: var(--red); font-size: .69rem; letter-spacing: .11em; margin-bottom: 13px; }
/* Logo colours stay distinct on white, charcoal and red section backgrounds. */
main .eyebrow::before { content: ''; width: 7px; height: 11px; background: var(--ink); box-shadow: 10px 0 var(--red), 0 0 0 1px #fff, 10px 0 0 1px #fff; transform: skew(-32deg); flex: 0 0 7px; margin-right: 11px; }
main .story-copy .eyebrow, main .svc-energy .eyebrow, main .contact-band .eyebrow { color: #e0e0e0; }
.section-intro { margin-top: 16px; line-height: 1.65; }
.section-heading .text-link { padding-inline: 14px; border: 1px solid #b9b9b9; background: #fff; min-height: 44px; }
.section-heading .text-link:hover { border-color: var(--red); background: #f5f5f5; }
.button { border-radius: 2px; }
.icon-tile, .person-icon { border: 1px solid #d0d0d0; border-radius: 2px; }

/* Home: a compact service grid, a distinct story, then framed examples and steps. */
.service-grid { margin-top: 25px; gap: 16px; border: 0; }
.service-grid .service-card { border: 1px solid #c9c9c9; border-top: 3px solid #171717; background: #f5f5f5; padding: 25px 23px 20px; }
.service-grid .service-card:hover { background: #fff; border-top-color: var(--red); }
.service-grid .service-icon { width: 33px; height: 33px; margin-bottom: 20px; }
.service-grid .card-number { color: #626262; top: 24px; right: 22px; font-size: .7rem; }
.service-grid .service-card h3 { font-size: 1.2rem; line-height: 1.25; margin-bottom: 10px; }
.service-grid .service-card p { font-size: .92rem; line-height: 1.65; }
.service-grid .card-link { padding-top: 20px; font-size: .78rem; }
.story-section { padding-block: var(--section-space); background: #191919; }
.story-grid { gap: clamp(30px, 4vw, 90px); grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.story-visual { height: clamp(330px, 30vw, 460px); }
.story-copy { max-width: 61ch; }
.story-copy h2 { margin-bottom: 18px; }
.story-copy>p:not(.eyebrow) { line-height: 1.65; font-size: .95rem; margin-bottom: 14px; }
.story-copy>p.story-emphasis { font-size: 1.05rem; margin-block: 18px 12px; }
.story-stamp { right: 0; min-width: 180px; padding: 22px 25px; }
.story-stamp strong { font-size: 1.6rem; }
.story-stamp>span { margin-top: 12px; }
.project-grid { margin-top: 24px; gap: 20px; }
.project-card { background: #fff; border: 1px solid #c9c9c9; }
.project-image { height: clamp(230px, 21vw, 340px); }
.project-meta { padding: 19px 20px; border-top: 3px solid #171717; }
.project-meta h3 { font-size: 1.1rem; line-height: 1.3; margin-top: 6px; }
.project-meta div>span { font-size: .66rem; }
.project-meta>span { color: var(--red); }
.project-card:hover .project-meta { border-top-color: var(--red); }
.process-section { padding-block: var(--section-space); background: #fff; border-block: 1px solid var(--line); }
.process-grid { gap: clamp(30px, 4vw, 80px); grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
.process-steps { border: 1px solid #c9c9c9; background: #f5f5f5; }
.process-steps li, .process-steps li:first-child, .process-steps li:last-child { padding: 22px 24px; gap: 20px; }
.process-steps li>span { display: grid; place-items: center; padding: 0; width: 36px; height: 36px; flex: 0 0 36px; background: #171717; color: #fff; font-size: .76rem; line-height: 1; }
.process-steps h3 { font-size: 1.1rem; }
.process-steps p { font-size: .94rem; line-height: 1.65; }
.contact-band { padding-block: 38px; border-top: 4px solid #171717; }
.contact-band h2 { font-size: clamp(1.8rem, 2.5vw, 2.7rem); }
.contact-band p:not(.eyebrow) { margin-top: 12px; }
.footer { padding-top: 42px; }
.footer-grid { padding-bottom: 32px; }

/* About: separate the story, the people and the family promise. */
.about-grid { gap: clamp(32px, 4vw, 80px); }
.about-grid .prose p { margin-top: 16px; line-height: 1.7; }
.about-grid .prose .eyebrow { margin-top: 0; color: var(--red); }
.about-collage { min-height: clamp(380px, 32vw, 500px); }
.about-detail { inset-inline-start: 12%; width: 88%; height: 90%; }
.about-brand-card { padding: 22px 26px; gap: 20px; border-top: 3px solid var(--red); }
.about-brand-card img { width: 80px; }
.about-brand-card p { font-size: 1.35rem; }
.experience-note { padding: 16px 21px; top: 18px; }
.experience-note strong { font-size: 2.15rem; }
.experience-note span { font-size: .76rem; }
.people-section { background: var(--soft); border: 0; }
.people-grid { gap: 20px; margin-top: 26px; }
.person { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 20px; padding: 26px; border-color: #c9c9c9; border-top: 3px solid #171717; }
.person-icon { width: 46px; height: 46px; margin: 0; background: var(--red); color: #fff; border: 0; }
.person-icon .ui-icon { width: 25px; height: 25px; }
.person h3 { font-size: 1.4rem; }
.person .role { margin: 9px 0 13px; font-size: .7rem; }
.person p { font-size: .94rem; line-height: 1.7; }
.person .text-link { margin-top: 12px; }
.site-block--about_quote { background: #191919; color: #fff; }
.family-quote { padding-block: 42px; }
.quote-mark { font-size: 3.8rem; color: #ccc; }
.family-quote blockquote { font-size: clamp(1.45rem, 2.2vw, 2.4rem); max-width: 46ch; line-height: 1.45; }
.family-quote p { margin-top: 18px; color: #d7d7d7; }

/* Service categories: alternating panels, bounded photos and readable options. */
.service-shortcuts { background: #171717; color: #fff; border-bottom: 3px solid var(--red); }
.service-shortcuts-inner { column-gap: 0; }
.service-shortcuts a { padding: 4px 26px; border-right: 1px solid #575757; }
.service-shortcuts a:first-child { padding-left: 0; }
.service-shortcuts a:last-child { border-right: 0; }
.service-shortcuts a>span { color: #fff; }
.service-shortcuts a:hover { color: #fff; text-decoration: underline; }
.service-shortcuts a:focus-visible { outline-color: #fff; }
.svc-section, .svc-energy, .services-faq { padding-block: var(--section-space); }
.svc-section-soft { background: var(--soft); border: 0; }
.svc-feature, .svc-feature-reverse { gap: clamp(30px, 4vw, 80px); }
.svc-feature-reverse { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.svc-content h2, .svc-energy h2 { font-size: clamp(1.9rem, 2.5vw, 2.9rem); }
.svc-lead { margin-top: 17px; font-size: .96rem; line-height: 1.65; }
.svc-photo, .svc-panel-photo { height: clamp(370px, 32vw, 510px); border: 1px solid #bdbdbd; }
.svc-photo figcaption { padding: 14px 19px; border-top: 3px solid var(--red); font-size: .76rem; }
.svc-options { margin-top: 23px; gap: 0; }
.svc-option { gap: 19px; padding-block: 18px; border-color: #bcbcbc; }
.svc-option>svg { width: 29px; height: 29px; }
.svc-option h3 { font-size: 1.15rem; }
.svc-option p { margin-top: 8px; font-size: .92rem; line-height: 1.65; }
.service-record-link { font-size: .82rem; margin-top: 5px; }
.svc-options-grid { gap: 0 24px; }
.svc-options-grid .svc-option { padding-block: 18px; gap: 12px; }
.svc-energy { background: #191919; }
.svc-energy-heading { margin-bottom: 25px; gap: 25px; }
.svc-energy-heading>p { font-size: .96rem; line-height: 1.65; }
.svc-energy-grid { gap: 24px; }
.svc-energy-card { border: 1px solid #575757; background: #242424; }
.svc-energy-image { height: clamp(250px, 23vw, 360px); }
.svc-energy-copy { padding: 23px; gap: 18px; border-top: 3px solid var(--red); }
.svc-energy-copy h3 { font-size: 1.5rem; }
.svc-energy-copy p { font-size: .94rem; line-height: 1.65; margin-top: 12px; }
.svc-energy-copy>svg { width: 28px; height: 28px; }
.faq-section { background: var(--soft); padding-block: var(--section-space); border-block: 1px solid var(--line); }
.faq-grid { gap: clamp(28px, 4vw, 80px); }
.faq-list { border-top: 2px solid #171717; }
.faq-list details { background: #fff; border: 1px solid #c9c9c9; border-top: 0; padding: 0 22px; }
.faq-list details[open] { border-left: 3px solid var(--red); padding-left: 20px; }
.faq-list summary { padding-block: 19px; font-size: .94rem; }
.faq-list details p { font-size: .93rem; line-height: 1.7; padding-bottom: 20px; }
.svc-faq-icon { width: 34px; height: 34px; margin-bottom: 18px; }
.svc-faq-intro { margin-top: 16px; font-size: .94rem; }

/* Portfolio cards stay together visually, including their descriptions. */
.project-toolbar { background: #171717; color: #fff; padding: 18px; margin-bottom: 25px; border-bottom: 3px solid var(--red); gap: 15px; }
.project-filters { gap: 8px; }
.filter-button { background: #171717; color: #fff; border-color: #666; font-size: .8rem; padding: 10px 14px; }
.filter-button:hover:not([aria-pressed="true"]) { background: #fff; color: #171717; border-color: #fff; }
.project-toolbar .project-count { color: #ddd; font-size: .76rem; }
.project-toolbar button:focus-visible { outline-color: #fff; }
.portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.portfolio-item { border: 1px solid #c9c9c9; background: #fff; }
.portfolio-item img { height: clamp(280px, 26vw, 410px); }
.portfolio-description { padding: 23px; border-top: 3px solid #171717; }
.portfolio-description h2 { font-size: 1.5rem; }
.portfolio-description>p:not(.eyebrow) { font-size: .94rem; margin-top: 12px; line-height: 1.65; }
.portfolio-item.solar-item { display: block; grid-column: auto; background: #fff; }
.portfolio-item.solar-item img { height: clamp(280px, 26vw, 410px); }
.solar-item .portfolio-description { padding: 23px; border-top: 3px solid #171717; }
.portfolio-note { margin-top: 25px; padding-top: 18px; }

@media(min-width:1100px) {
  .portfolio-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .portfolio-item img, .portfolio-item.solar-item img { height: clamp(270px, 22vw, 390px); }
}
@media(max-width:1000px) {
  .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .story-grid { gap: 30px; }
  .person { grid-template-columns: 1fr; }
  .svc-photo, .svc-panel-photo { height: 420px; }
}
@media(max-width:800px) {
  .svc-feature, .svc-feature-reverse { grid-template-columns: 1fr; gap: 24px; }
  .svc-photo, .svc-panel-photo { height: 300px; }
  .svc-energy-heading { gap: 18px; }
}
@media(max-width:700px) {
  :root { --section-space: 34px; }
  main h2 { font-size: 1.85rem; }
  main .eyebrow { font-size: .66rem; letter-spacing: .09em; }
  .section-heading { padding-bottom: 18px; align-items: flex-start; flex-direction: column; gap: 14px; }
  .section-heading .text-link { padding: 0; border: 0; min-height: 38px; background: transparent; }
  .service-grid { gap: 12px; }
  .service-grid .service-card { padding: 21px 18px 17px; }
  .service-grid .card-number { top: 19px; right: 16px; }
  .story-grid, .process-grid { grid-template-columns: 1fr; gap: 26px; }
  .story-visual { height: 320px; }
  .story-stamp { min-width: 160px; padding: 18px 22px; }
  .project-grid { gap: 18px; }
  .project-image { height: 270px; }
  .process-steps li, .process-steps li:first-child, .process-steps li:last-child { padding: 20px 18px; gap: 16px; }
  .contact-band { padding-block: 30px; }
  .about-grid { gap: 25px; }
  .about-collage { min-height: 360px; }
  .about-brand-card { padding: 19px 22px; gap: 16px; }
  .about-brand-card img { width: 64px; }
  .about-brand-card p { font-size: 1.15rem; }
  .people-grid { grid-template-columns: 1fr; gap: 16px; }
  .person { grid-template-columns: 42px minmax(0,1fr); gap: 16px; padding: 22px; }
  .person-icon { width: 42px; height: 42px; }
  .family-quote { padding-block: 34px; }
  .service-shortcuts a { padding: 4px 13px; font-size: .71rem; }
  .service-shortcuts a:nth-child(2) { border-right: 0; }
  .service-shortcuts a:nth-child(3) { padding-left: 0; }
  .service-shortcuts-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
  .svc-content h2, .svc-energy h2 { font-size: 1.9rem; }
  .svc-energy-grid { gap: 20px; }
  .svc-energy-image { height: 270px; }
  .svc-energy-copy { padding: 21px 19px; gap: 15px; }
  .svc-options-grid { gap: 0 18px; }
  .faq-list details { padding-inline: 18px; }
  .faq-list details[open] { padding-left: 16px; }
  .faq-grid { gap: 22px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 20px; }
  .project-toolbar { padding: 16px; }
  .filter-button { font-size: .76rem; padding-inline: 11px; }
  .portfolio-item img, .portfolio-item.solar-item img { height: 290px; }
  .portfolio-item.solar-item { display: block; }
  .solar-item .portfolio-description, .portfolio-description { padding: 22px; border-top: 3px solid #171717; }
  .footer { padding-top: 34px; }
}
@media(max-width:430px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-grid .service-card { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px 15px; padding: 20px; }
  .service-grid .service-icon { margin: 0; grid-column: 1; grid-row: 1; }
  .service-grid .service-card h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  .service-grid .card-number { display: none; }
  .service-grid .service-card p, .service-grid .card-link { grid-column: 1/-1; }
  .service-grid .card-link { padding-top: 0; }
  .person { grid-template-columns: 1fr; }
  .person-icon { margin-bottom: 0; }
  .svc-photo, .svc-panel-photo { height: 260px; }
}
@media print {
  .site-block { background: #fff; color: #000; }
  .site-block + .site-block { border-top: 1px solid #aaa; }
  main .section, .svc-section, .svc-energy, .story-section, .process-section, .family-quote { padding-block: 20px; }
  .project-toolbar, .service-shortcuts { display: none; }
  .project-image, .svc-photo, .svc-energy-image { height: 180px; }
  .family-quote p { color: #333; }
}