/* Aaron Peel Construction, Inc - Paso Robles - spec build #31
   ---------------------------------------------------------------------------
   PALETTE SAMPLED FROM THEIR OWN LOGO. Matt supplied the mark mid-build and it
   OUTRANKS the photograph sampling this file originally carried - a real mark
   is the client's own material in a way a sky is not.

     #434551  the logo's ground, read at all FOUR CORNERS and identical in each
     #8B0F11  the dark red diamond behind APC
     white    the distressed display type

   ⭐ THE GROUND IS PERFECTLY FLAT, WHICH IS THE WHOLE REASON THIS WORKS.
   Rainscape's logo was a JPG cut from a Facebook banner with a baked-in sky
   GRADIENT, and no flat masthead could match it - it had to be given a plate
   and a hairline to look deliberate. This one is a single solid colour, so the
   masthead is set to #434551 EXACTLY and the JPG sits flush with no plate, no
   border and no visible box. Verify in a render if the logo is ever replaced.

   THE THREE-TONE TRAP, THIRTEENTH BUILD RUNNING - and this time it is ALSO the
   two-brand-colour trap, because their red on their own slate is 1.58:
     #8B0F11  white 9.66 PASS | white ON it 9.66 PASS -> links + button fills
     #434551  white 9.51      | white ON it 9.51      -> the masthead, matched
     #23252D  white 15.28                             -> dark grounds
     #F09B9D  white 2.13 UNUSABLE | on deep 7.19 PASS -> DARK BANDS ONLY
     #C7CBD6  white 1.6 unusable  | on deep 9.42      -> body text on dark
     ⚠ #8B0F11 ON #23252D is 1.58. THEIR RED CANNOT GO ON THEIR OWN DARK.

   ⚠⚠ THERE IS NO TESTIMONIAL SECTION AND NO RATING ANYWHERE ON THIS PAGE.
   Their Google listing carries ONE review, it is SEVEN YEARS OLD, and it has
   NO TEXT - a bare star with no words. There is nothing honest to quote and a
   rating built on a single click would mislead. The photographs and the licence
   record carry the page instead. Do not add a rating later.

   ⚠ FOUR PHOTOGRAPHS, ALL SUPPLIED BY MATT off their own Facebook. A FIFTH WAS
   EXCLUDED: it carried a CRMLS watermark, making it a real-estate listing photo
   rather than theirs to give.
   --------------------------------------------------------------------------- */

:root {
  --ground:  #FFFFFF;
  --pale:    #F2F4F6;
  --ink:     #23252D;   /* on white 15.28 */
  --muted:   #555A66;   /* on white  6.91 */
  --rule:    #DEE3E8;
  --rule-d:  #3A3D49;

  --red:     #8B0F11;   /* their diamond. links, button fills */
  --red-d:   #6E0C0E;   /* hover */
  --red-l:   #F09B9D;   /* DARK GROUNDS ONLY - 2.13 on white, unusable */
  --mark:    #434551;   /* the logo's own ground, matched exactly */
  --deep:    #23252D;
  --deep-2:  #2E303A;
  --stone:   #C7CBD6;   /* body text on the dark grounds */

  --measure: 700px;
  --wide:    1180px;

  --s-sm: 8px;  --s-md: 16px; --s-lg: 26px;
  --s-xl: 36px; --s-2xl: 56px; --sect: clamp(58px, 8vw, 96px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  caret-color: var(--red);
}

::selection { background: var(--red-l); color: var(--deep); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: 22px; }
.wide { width: 100%; max-width: var(--wide);    margin-inline: auto; padding-inline: 22px; }

/* ── Utility bar ──────────────────────────────────────────────────────── */
.util { background: var(--deep); color: var(--stone); font-size: 13.5px; }
.util .wide {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  align-items: center; justify-content: center; padding-block: 9px;
}
.util b { color: #fff; font-weight: 600; }
.util a { color: var(--red-l); text-decoration: none; font-weight: 600; }
.util a:hover { text-decoration: underline; }
.util .dot { color: var(--rule-d); }

/* ── Masthead ─────────────────────────────────────────────────────────── */
/* ⭐ The ground is the logo's OWN #434551, sampled at four corners and flat in
   all of them, so the supplied JPG sits flush with no plate and no hairline.

   ⚠⚠ REWORKED after Matt said the header "looks a bit strange". Two causes,
   and the ground match was only half of it:
     1. THE SUPPLIED JPG CARRIED ITS OWN DEAD SPACE - 18% empty at the top and
        15% at the bottom, measured against the flat ground. With the masthead
        matching that ground exactly there was no edge to explain the gap, so
        the mark read as floating in a tall empty bar. FIXED BY CROPPING the
        file to its content (logo-orig.jpg is kept beside it).
     2. THREE DARK BANDS STACKED - utility strip, masthead, then a dark-scrimmed
        hero - ran together into one heavy mass. The masthead is now a COMPACT
        bar: tighter padding, the logo sized to read, and the phone promoted
        into it so the band carries something useful instead of one line of
        descriptor floating at the far right. */
.mast { background: var(--mark); border-bottom: 1px solid rgba(255,255,255,.10); }
.mast .wide {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  align-items: center; justify-content: space-between; padding-block: 11px;
}
.mast img { width: 164px; height: auto; display: block; }
.mast .right { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.mast .sub { color: #D2D6DE; font-size: 14.5px; }
.mast .tel {
  color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
  text-decoration: none; white-space: nowrap;
}
.mast .tel:hover { text-decoration: underline; }

/* ── Full-bleed photo hero. ⚠ padding-block:0 - it is a <section> and would
      otherwise inherit the generic section padding and open a dead band
      under the masthead (banked on Landers, build #26). ───────────────── */
.hero { display: grid; background: var(--deep); padding-block: 0; }
.hero > img, .hero .scrim { grid-area: 1 / 1; }
.hero > img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3; max-height: 620px; object-position: 50% 58%;
}
.hero .scrim {
  display: grid; place-items: center; text-align: center;
  padding: clamp(44px, 7vw, 86px) 22px;
  background: linear-gradient(180deg, rgba(10,16,24,.42), rgba(10,16,24,.82));
}
.hero h1 {
  margin: 0 auto var(--s-md); color: #fff; max-width: 18ch;
  font-size: clamp(30px, 4.9vw, 54px);
  line-height: 1.06; letter-spacing: -0.032em; font-weight: 800;
}
.hero p {
  margin: 0 auto var(--s-xl); color: rgba(255,255,255,.94);
  font-size: clamp(16px, 1.9vw, 20px); max-width: 56ch;
}

.btn {
  display: inline-block; background: var(--red); color: #fff;   /* 9.66:1 */
  font-size: 17px; font-weight: 700; padding: 15px 32px;
  border-radius: 4px; text-decoration: none;
}
.btn:hover { background: var(--red-d); }

/* ── Sections ─────────────────────────────────────────────────────────── */
section { padding-block: var(--sect); }
.band-pale { background: var(--pale); }

h2 {
  margin: 0 0 var(--s-md);
  font-size: clamp(25px, 3.2vw, 35px);
  line-height: 1.12; letter-spacing: -0.03em; font-weight: 800;
  max-width: 22ch;
}
h3 { margin: 0 0 var(--s-sm); font-size: 19px; font-weight: 800; letter-spacing: -0.018em; }
p  { margin: 0 0 var(--s-md); }
p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.lede { font-size: 19px; }

/* ── Three cards ──────────────────────────────────────────────────────── */
.cards { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); }
@media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards > div {
  border: 1px solid var(--rule); border-radius: 5px;
  padding: var(--s-lg); background: var(--ground);
}
.cards p { color: var(--muted); margin: 0; }
.cards .cls {
  display: inline-block; background: var(--deep); color: var(--red-l);  /* 7.19:1 */
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 3px; margin-bottom: 10px;
}

/* ── Call strip. padding-block:0 - the section rule already spaces it. ── */
.strip { background: var(--red); color: #fff; padding-block: 0; }
.strip .wide {
  display: flex; flex-wrap: wrap; gap: var(--s-md) var(--s-xl);
  align-items: center; justify-content: space-between; padding-block: var(--s-xl);
}
.strip h2 { margin: 0; color: #fff; font-size: clamp(21px, 2.6vw, 27px); max-width: 26ch; }
.strip .btn { background: #fff; color: var(--red-d); }
.strip .btn:hover { background: var(--pale); }

/* ── Alternating feature rows ─────────────────────────────────────────── */
.feat { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; }
@media (min-width: 880px) {
  .feat { grid-template-columns: 1.05fr 1fr; }
  /* reverse the tracks on a flipped row, or the two photos come out
     different widths (banked on Leo's, build #28) */
  .feat.flip { grid-template-columns: 1fr 1.05fr; }
  .feat.flip figure { order: 2; }
  .feat.portrait { grid-template-columns: 0.72fr 1fr; }
  .feat.portrait.flip { grid-template-columns: 1fr 0.72fr; }
}
.feat + .feat { margin-top: var(--s-2xl); }
.feat figure { margin: 0; }
.feat img { border-radius: 5px; width: 100%; max-height: 560px; object-fit: cover; }
.feat figcaption { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.feat h2 { max-width: 19ch; }

/* ── Licence band ─────────────────────────────────────────────────────── */
.lic { background: var(--deep); color: var(--stone); }
.lic h2 { color: #fff; }
.lic dl { margin: var(--s-lg) 0 0; display: grid; gap: 1px; }
.lic .row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  padding: 13px 0; border-bottom: 1px solid var(--rule-d);
}
.lic dt { color: #8F9DAC; font-size: 15px; margin: 0; }
.lic dd { margin: 0; color: #fff; font-weight: 600; }
.lic dd b { color: var(--red-l); font-weight: 700; }   /* 7.19 on deep */
.lic .note { margin-top: var(--s-lg); font-size: 14.5px; color: #8F9DAC; }
.lic a { color: var(--red-l); }

/* ── Letter ───────────────────────────────────────────────────────────── */
.letter p { color: var(--muted); }
.letter strong { color: var(--ink); }
.letter .sign { margin-top: var(--s-lg); color: var(--ink); font-weight: 600; }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer { background: var(--deep); color: var(--stone); padding-block: var(--s-2xl) var(--s-xl); }
footer .wide { display: grid; gap: var(--s-lg); }
@media (min-width: 700px) { footer .wide { grid-template-columns: 1.2fr 1fr 1fr; } }
footer h4 { margin: 0 0 8px; color: #fff; font-size: 15px; }
footer p { margin: 0 0 4px; font-size: 15px; }
footer a { color: var(--red-l); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.legal {
  margin-top: var(--s-xl); padding-top: var(--s-md);
  border-top: 1px solid var(--rule-d); font-size: 13px; color: #74828F;
}

/* ── Sticky call button, phones only ──────────────────────────────────── */
.callbar { display: none; }
@media (max-width: 700px) {
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--red); padding: 13px 16px; text-align: center;
  }
  .callbar a { color: #fff; font-weight: 700; text-decoration: none; font-size: 17px; }
  body { padding-bottom: 62px; }
}