@charset "utf-8";
/* ==========================================================================
   SunRight Solar — About SunRight Solar (/about/)

   The human page. Product hubs argue with specifications; this one argues
   with type and space, so it is built from rules and measure rather than
   cards. Its signature is the sequence: an opening statement in display
   type, four beliefs on a ruled grid, and a numbered "how we work" ledger
   that reads as a procedure rather than as marketing.

     Page head    editorial masthead, banner beside the H1, statement beneath
     Beliefs      four ruled principles, 1 -> 2 columns (fixed, never auto-fit)
     Range        shared .split, ruled product categories beside the line-up
     Method       numbered ledger, four steps, the page's strongest structure
     Aftercare    three ruled columns, 1 -> 3 (never 2, which leaves a hole)
     Team         one reserved frame; H3s arrive with real names
     Get in touch shared .final-cta plus a config-driven company detail list

   Nothing here overrides main.css. Every breakpoint block sits AFTER the
   base rules it modifies — equal specificity means source order decides,
   and getting that backwards has produced overlapping text on this site
   twice already.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head
   Its own opening rather than the shared .page-head: this page leads with a
   statement, not with a button row, and the approved CTA plan deliberately
   gives it fewer calls to action than a product or pricing page.
   -------------------------------------------------------------------------- */
.about-head {
  position: relative;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(54% 62% at 92% 2%, #fff3e4, transparent 64%),
    radial-gradient(58% 72% at 0% 26%, var(--sky-50), transparent 62%),
    var(--white);
}
.about-head__inner {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
}
.about-head h1 { max-width: 12ch; }
.about-head__lead { margin-top: 1.4rem; }
.about-head__banner .media-frame { border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); }

/* Desktop: the two columns finish level by centring, not by stretching the
   photograph. Stretching made the frame's shape a function of the copy length
   — the same file rendered 1.33:1 and 1.57:1 on the one page — and a frame
   nobody can predict is a frame nobody can brief a photographer for. */
@media (min-width: 940px) {
  .about-head__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
  }
}

/* The opening statement — the approved second paragraph, given weight.
   Display face, one step under an h2, on a measure short enough to read as a
   statement rather than as a paragraph that happens to be large. */
.about-head__statement { margin-top: clamp(2.5rem, 4.5vw, 4rem); }
.about-head__statement p {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.32;
  letter-spacing: -0.016em;
  color: var(--ink);
  max-width: 44rem;
}

/* --------------------------------------------------------------------------
   What we believe — four ruled principles
   Exactly four items, so the columns are set explicitly. auto-fit would open
   a third track at 1440px and strand the fourth belief on its own row.
   -------------------------------------------------------------------------- */
.beliefs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.belief {
  min-width: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
}
.belief__lead {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.belief p { font-size: var(--step-0); line-height: 1.75; max-width: 34rem; }

/* 720px, not 780: a tablet held in portrait is 768 wide, and a single column
   there leaves a 34rem measure floating in a 44rem container. */
@media (min-width: 720px) {
  .beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The approved CTA plan puts one in-page link here: "See how we choose our
   products". It is a jump, not a conversion, so it is a link and not a button. */
.about-jump { margin-top: clamp(2.25rem, 3.5vw, 3rem); }

/* --------------------------------------------------------------------------
   How we choose our products
   Three categories as ruled entries beside the product line-up. The bold
   lead-in stays inside its sentence, exactly as the approved copy sets it.
   -------------------------------------------------------------------------- */
.range { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.range__list { border-top: 1px solid var(--line-strong); }
.range__item {
  min-width: 0;
  padding: clamp(1.15rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.range__item p { font-size: var(--step-0); line-height: 1.75; }
.range__item strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.range__note {
  margin-top: clamp(2rem, 3vw, 2.5rem);
  padding-left: clamp(1rem, 1.6vw, 1.35rem);
  border-left: 2px solid var(--orange-500);
  max-width: 46rem;
  font-size: var(--step-0);
  line-height: 1.75;
}

.range__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem 2.5rem;
  margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
}

/* --------------------------------------------------------------------------
   Our installation standards — the numbered ledger
   The page's strongest structure: a rule per step, the numeral in the left
   rail, the approved sentence intact beside it.
   -------------------------------------------------------------------------- */
.about-band { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

.method__intro {
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
  font-size: var(--step-0);
  color: var(--ink);
  font-weight: 600;
}
.method {
  display: grid;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--line-strong);
}
.method__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.2vw, 2rem);
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.method__index {
  font-family: var(--font-num);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  padding-top: .3rem;
  color: var(--sun-600);
}
/* Solid orange is the fallback and already passes on grey; the gradient is
   the enhancement, so the numeral is never invisible. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .method__index {
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.method__step p { font-size: var(--step-0); line-height: 1.75; max-width: 46rem; }
.method__step strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

@media (min-width: 780px) {
  /* One ratio at every width — the file is 20:9 and stays 20:9. */
}
/* The numeral drops above the text on a narrow phone rather than stealing a
   column from a 40-character measure. */
@media (max-width: 560px) {
  .method__step { grid-template-columns: minmax(0, 1fr); }
  .method__index { padding-top: 0; margin-bottom: .55rem; }
}

/* --------------------------------------------------------------------------
   After the installation — three ruled columns
   Three items go 1 -> 3. A two-column stage would leave a hole in the last
   row, so that breakpoint is deliberately skipped.
   -------------------------------------------------------------------------- */
.aftercare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.aftercare__item {
  min-width: 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-strong);
}
/* Holds the site's 34rem measure through the single-column stage between 600
   and 900px, where the item would otherwise run the full container width. */
.aftercare__item p { font-size: var(--step-0); line-height: 1.75; max-width: 34rem; }
.aftercare__item strong {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}

@media (min-width: 900px) {
  .aftercare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The "Our team" rules were removed with the section itself, at the client's
   direction. Nothing else on the site used .team / .team__member, so they went
   rather than sitting here as dead weight. */

/* --------------------------------------------------------------------------
   Get in touch — additions to the shared dark CTA
   -------------------------------------------------------------------------- */
/* .link-arrow--light now lives in main.css §11e; the contact and quote
   pages needed it too. */
/* .final-cta p sets `margin: 0 0 2.5rem` at (0,2,0), which outranked a bare
   class selector and left this link sitting 2px under the phone button on a
   phone. Scoped to match, so the separation actually applies. */
.final-cta .about-contact-link { margin-top: 1.75rem; margin-bottom: 0; }

/* Registered name, ABN, founding year and address come from config/site.php
   and are printed only once they are confirmed, so this list is either whole
   or absent — it never shows a labelled blank. */
.about-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2.5rem;
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.about-details > div { display: grid; gap: .2rem; min-width: 0; }
.about-details dt {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.about-details dd { color: #fff; font-size: 1rem; line-height: 1.6; }

@media (min-width: 560px) {
  .about-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The four installation steps: a 2 x 2 grid across the full width on desktop,
   instead of one narrow column with the right half empty. */
@media (min-width: 940px) {
  .method {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--head-gap);
    border-top: 0;
  }
  .method__step:nth-child(-n+2) { border-top: 1px solid var(--line-strong); }
  .method__step p { max-width: none; }
}