/* About (/about/) and Contact (/contact-us/) pages. Rebuilt 16 Oct 2026 in the home page's branding, like the prices,
   reviews, areas and commercial pages (James: "now redesign the about us page, and contact page, to fit the branding
   of the homepage..."). Markup: about() and contact() in src/pages/company.mjs.

   The brand, as on those pages: daylight sky fading to white at the top, white and pale blue sections taking turns,
   the sun gradient (the logo's ring) and the faded sun arc, the sun ring round every icon, white cards with a soft
   shadow, the ratings pill and "Get My Free Solar Quote".
   What's each page's own: About leads with a real install photo ringed in the sun gradient; Contact leads with the
   phone, email and office in one card, the answer to "how do I reach you?". */

.page-company { --co-radius: 20px; --co-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 18px 40px -28px rgba(38, 40, 42, .4);
  --co-lift: 0 1px 3px rgba(38, 40, 42, .08), 0 24px 56px -16px rgba(38, 40, 42, .32);
  --co-sun: linear-gradient(135deg, var(--sun-coral), var(--sun-amber)); }

/* Icons: thin ink lines with one warm stroke, always inside the sun ring */
.page-company .sp-icon { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.page-company .sp-icon .warm { stroke: var(--sun-coral); stroke-width: 1.8; }
.co-ring { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.co-ring--lg { width: 60px; height: 60px; border-width: 3px; }
.co-ring--lg .sp-icon { width: 30px; height: 30px; stroke-width: 1.6; }

/* ---------- Hero ---------- */
.co-hero { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--sky) 0%, #f5f8fa 52%, var(--paper) 100%); }
.co-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.co-hero h1 { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; }
.co-hero h1 .kicker { font: 500 1.125rem/1.4 var(--text); color: var(--ink-soft); }
.co-hero h1 .display { font-size: clamp(2.375rem, 1.45rem + 3.1vw, 4rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.co-hero .page-lede { max-width: 36rem; }
.co-hero .crumbs ol { margin-bottom: 20px; }
.co-hero .page-actions { margin-top: 0; }
/* The accreditation logos, quietly, under the words. Never recoloured (the schemes' rules). */
.co-acc { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; max-width: 34rem; }
.co-acc li { display: flex; align-items: center; }
.co-acc img { display: block; width: auto; height: calc(var(--h) * .78); max-width: none; }

/* The card sits in the sun: the faded ring rising behind its top right corner. */
.co-hero-card { position: relative; }
.co-hero-card::before { content: ""; position: absolute; z-index: 0; width: 560px; height: 560px; right: -230px; top: -200px;
  background: url("sun-arc.svg") center / contain no-repeat; pointer-events: none; }
.co-hero-card > * { position: relative; z-index: 1; }

@media (min-width: 1000px) {
  .co-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text card" "act card";
    column-gap: clamp(48px, 6vw, 96px); row-gap: 30px; align-items: start; }
  .co-hero-text { grid-area: text; }
  .co-hero-card { grid-area: card; margin-top: 30px; }
  .co-hero-act { grid-area: act; }
}
@media (max-width: 999px) {
  .co-hero-card { max-width: 30rem; }
  .co-hero-card::before { width: 380px; height: 380px; right: -170px; top: -150px; }
}
@media (max-width: 700px) {
  .co-hero-card::before { width: 300px; height: 300px; right: -200px; top: -40px; }
}
.co-hero + .section { padding-top: clamp(32px, 4vw, 56px); }

/* About: the install photo in a white card ringed in the sun gradient, with the "In solar since" tag */
.co-photo { margin: 0; padding: clamp(10px, 1.4vw, 14px); border-radius: 22px; border: 3px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--co-sun) border-box; box-shadow: var(--co-lift); }
.co-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 40%; border-radius: 14px; background: var(--line); }
.co-photo-tag { position: absolute; z-index: 2; top: clamp(22px, 2.4vw, 28px); left: clamp(22px, 2.4vw, 28px); margin: 0; padding: 6px 14px; border-radius: 999px;
  background: var(--co-sun); font-weight: 600; font-size: .9375rem; color: var(--ink); box-shadow: 0 8px 18px -10px rgba(38, 40, 42, .55); }
.co-photo figcaption { margin-top: 12px; padding: 0 6px 4px; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }

/* Contact: phone, email and office in one card */
.co-card { padding: clamp(22px, 2.6vw, 32px); border-radius: 22px; border: 3px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--co-sun) border-box; box-shadow: var(--co-lift); }
.co-card-title { font: 500 1.625rem/1.2 var(--display); letter-spacing: -0.01em; margin: 0; }
.co-ways { list-style: none; margin: 8px 0 0; padding: 0; }
.co-ways li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.co-ways li > span:last-child { min-width: 0; }
.co-way-label { display: block; font-size: .9375rem; font-weight: 500; color: var(--ink-soft); }
.co-way-big { display: inline-block; margin-top: 2px; font: 500 clamp(1.5rem, 1.25rem + .9vw, 1.875rem)/1.15 var(--display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.co-way-big:hover, .co-way-mail:hover { text-decoration: underline; text-decoration-color: var(--sun-coral); text-underline-offset: 4px; }
.co-way-sub { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 1rem; }
.co-way-mail { display: inline-block; margin-top: 2px; font-weight: 600; font-size: 1.125rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.co-ways address { font-style: normal; margin-top: 2px; line-height: 1.5; }
.co-way-map { display: inline-block; margin-top: 8px; font-weight: 600; }
.co-card-btn { width: 100%; margin-top: 22px; }

/* ---------- Two columns: the words, and a card beside them ---------- */
.co-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
@media (min-width: 900px) { .co-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); } }
.co-text > p { margin-top: 14px; max-width: 40rem; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.6; }
.co-text > h2 + p { margin-top: 18px; }
.co-text > .co-ring--lg + h2 { margin-top: 18px; }
.co-sub { margin: 36px 0 16px; font-size: 1.25rem; }

/* About: what we install, as link cards */
.co-services { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 40rem; }
.co-service { display: flex; align-items: center; gap: 18px; padding: 16px 22px 16px 16px; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), var(--co-shadow); color: var(--ink); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.co-service:hover { box-shadow: 0 0 0 2px var(--sun-coral), var(--co-shadow); transform: translateY(-2px); }
.co-service::after { content: "\2192"; margin-left: auto; padding-left: 12px; font-size: 1.25rem; color: var(--sun-coral); transition: transform .2s ease; }
.co-service:hover::after { transform: translateX(3px); }
.co-service strong { display: block; font-weight: 600; font-size: 1.125rem; }
.co-service span span { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }

/* About: company details, a white card ringed in the sun gradient with the arc in its corner */
.co-facts { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--co-radius); border: 3px solid transparent;
  background: url("sun-arc.svg") right -130px top -150px / 260px 260px no-repeat padding-box,
    linear-gradient(var(--paper), var(--paper)) padding-box, var(--co-sun) border-box; box-shadow: var(--co-shadow); }
.co-facts-title { font: 500 1.5rem/1.2 var(--display); letter-spacing: -0.01em; }
.co-facts dl { margin: 12px 0 0; }
.co-facts dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.co-facts dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.co-facts dt { color: var(--ink-soft); }
.co-facts dd { margin: 0; font-weight: 500; }

/* About: the team, as white cards on the pale blue */
.page-company .team { gap: clamp(16px, 2vw, 24px); }
.page-company .person { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--co-radius); background: var(--paper); box-shadow: var(--co-shadow); }
.page-company .person .ring { width: 88px; height: 88px; border-width: 5px; margin-bottom: 18px; }
.page-company .person h3 { font-size: 1.25rem; }
@media (max-width: 800px) { .page-company .team { grid-template-columns: minmax(0, 1fr); } }

/* About: first call to switch-on, six numbered cards */
.co-steps { list-style: none; margin: 0; padding: 0; counter-reset: co-step; display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 700px) { .co-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .co-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.co-step { position: relative; counter-increment: co-step; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--co-radius); background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), var(--co-shadow); }
.co-step::after { content: counter(co-step, decimal-leading-zero); position: absolute; top: 24px; right: 24px; font: 600 .9375rem/1 var(--text); color: var(--star); }
.co-step .co-ring { margin-bottom: 16px; }
.co-step h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.co-step p { margin-top: 8px; color: var(--ink-soft); line-height: 1.6; }

/* About: what customers say, review cards */
.co-reviews { display: grid; gap: 16px; }
@media (min-width: 800px) { .co-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.co-review { position: relative; margin: 0; padding: 18px 22px 16px; border-radius: 16px; background: var(--paper); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 14px 30px -20px rgba(38, 40, 42, .35); }
.co-review::before { content: ""; position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; opacity: .2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ec7a4a' transform='rotate(180 12 12)' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.co-review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; padding-right: 44px; font-size: .875rem; color: var(--ink-soft); }
.co-review-top .stars { color: var(--star); letter-spacing: 2px; font-size: 1rem; }
.co-review-src { font-weight: 600; color: var(--ink); }
.co-review blockquote { margin: 0 0 auto; padding: 0; border: 0; }
.co-review blockquote p { font: 400 1.125rem/1.45 var(--display); color: var(--ink); }
.co-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.co-review-initial { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 .9375rem/1 var(--text); color: var(--ink);
  border: 2px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.co-review-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: .9375rem; color: var(--ink-soft); }
.co-review-who strong { font-weight: 600; color: var(--ink); }
.page-company .ratings-line { margin-top: 24px; }

/* Contact: what happens when you get in touch, the first three steps in a white card */
.co-next { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--co-radius); background: var(--paper); box-shadow: var(--co-shadow); }
.co-next-title { font: 500 1.5rem/1.2 var(--display); letter-spacing: -0.01em; }
.co-next ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: co-next; }
.co-next li { position: relative; counter-increment: co-next; padding: 14px 0 14px 58px; border-bottom: 1px solid var(--line); }
.co-next li::before { content: counter(co-next); position: absolute; left: 0; top: 13px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font: 500 1.125rem/1 var(--display); color: var(--ink); border: 3px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.co-next h4 { margin: 0; padding-top: 9px; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.co-next p { margin-top: 4px; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.co-next-btn { width: 100%; margin-top: 22px; }
.co-next-link { display: inline-block; margin-top: 14px; font-weight: 600; }

/* Contact: what you can expect, under the heading (facts used across the site: free survey, written quote, no pressure) */
.co-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.co-ticks li { position: relative; padding-left: 36px; font-size: 1.0625rem; line-height: 1.45; color: var(--ink); }
.co-ticks li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--co-sun); }
.co-ticks li::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }