/* Leo's Roofing LLC - spec build #28
   ---------------------------------------------------------------------------
   PALETTE SAMPLED FROM THEIR OWN THREE PHOTOGRAPHS. There is no logo anywhere
   - the Google listing's "website" is a Facebook page whose profile picture is
   a roof photo - so the colour had to come off the work itself. Measured from
   a scaled grid of each image:

     sky in two of the three frames   #2E5FBB -> #3165C5 -> #5886E6
     the slate they are laying        #6C7075  #777B77  #84868A  #586175
     slate in shadow, top of frame    #1E2230  #161F33
     fresh OSB deck + the tan blend   #EBCA99  #CDB9A2  #B79F81

   ⚠⚠ THERE IS A GAF MASTER ELITE LOGO FOR A "LEO'S ROOFING" ON GAF'S OWN SITE.
   IT BELONGS TO A DIFFERENT COMPANY - Merced, CA, (209) 388-9LEO, 200 miles
   away. GAF's locator lists SEVEN certified contractors within 50 miles of
   Nipomo and this business is not one of them. No GAF mark and no Master Elite
   claim appears anywhere on this page. Same name is not the same business.

   THE THREE-TONE TRAP, TENTH BUILD RUNNING. Measured:
     #2E5FBB  white 6.05 PASS | white ON it 6.05 PASS -> links + button fills
     #16202D  white 16.42                             -> dark grounds
     #C9A063  white 2.42 UNUSABLE | on deep 6.80 PASS -> DARK BANDS ONLY
     #B7C6D4  white 1.62 UNUSABLE | on deep 9.42 PASS -> body text on dark

   ⚠ THE TAN IS THE FRESH-DECK COLOUR AND IT IS INK ONLY ON THE DARK GROUND.
   Never set it on white. It has one job: the accent inside the dark bands.

   ⚠ LAYOUT: ALL THREE PHOTOGRAPHS ARE 3:4 PORTRAIT (3024x4032 iPhone frames).
   That rules out the full-bleed photo hero of the house style - a letterbox
   crop would cut the man off the roof, which is the whole subject. So this
   uses the SPLIT HERO (#17 Erik): type on the dark ground, the portrait frame
   full-height beside it. Every portrait frame on the page carries a max-height
   so it cannot tower over the paragraph it sits with (the #20 rule).
   --------------------------------------------------------------------------- */

:root {
  --ground:  #FFFFFF;
  --pale:    #F2F4F6;
  --ink:     #171C24;   /* on white 17.10 */
  --muted:   #5C6B7A;   /* on white  5.47 */
  --rule:    #DDE2E7;
  --rule-d:  #2C3B4D;

  --blue:    #2E5FBB;   /* their sky. links, button fills */
  --blue-d:  #2A4E96;   /* hover, 7.99 on white */
  --deep:    #16202D;   /* their slate in shadow. dark grounds */
  --deep-2:  #1E2A3A;
  --tan:     #C9A063;   /* the fresh deck. DARK GROUNDS ONLY */
  --tan-p:   #EBCA99;
  --steel:   #B7C6D4;   /* 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(--blue);
}

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

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

.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(--steel); 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(--tan-p); text-decoration: none; font-weight: 600; }
.util a:hover { text-decoration: underline; }
.util .dot { color: var(--rule-d); }

/* ── Masthead. No logo exists, so this is a wordmark. ─────────────────── */
.mast { background: var(--deep-2); border-bottom: 1px solid var(--rule-d); }
.mast .wide {
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  align-items: baseline; justify-content: space-between; padding-block: 18px;
}
.mast .name {
  margin: 0; color: #fff; font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 800; letter-spacing: -0.03em;
}
.mast .name em { font-style: normal; color: var(--tan); }
.mast .sub { color: var(--steel); font-size: 15px; }

/* ── Split 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 { background: var(--deep); padding-block: 0; }

/* ⚠ THE HERO CONTAINER IS DELIBERATELY NOT max-width'd. The photo has to run to
   the right edge of the viewport or it floats with a dark gutter beside it,
   which reads as a mistake rather than a choice. So the grid is full width and
   the TEXT side carries the padding that lines it up with every other section:
   half the leftover gutter, plus the container's own 22px. */
.hero .wide { max-width: none; padding-inline: 0; display: grid; }
@media (min-width: 900px) {
  .hero .wide { grid-template-columns: 1fr 0.72fr; align-items: stretch; }
}
.hero .say {
  padding: clamp(40px, 6vw, 76px) 22px;
  padding-left: max(22px, calc((100vw - var(--wide)) / 2 + 22px));
  display: flex; flex-direction: column; justify-content: center;
}
.hero h1 {
  margin: 0 0 var(--s-md); color: #fff; max-width: 17ch;
  font-size: clamp(31px, 4.6vw, 52px);
  line-height: 1.05; letter-spacing: -0.035em; font-weight: 800;
}
.hero p {
  margin: 0 0 var(--s-xl); color: var(--steel);
  font-size: clamp(16px, 1.8vw, 19px); max-width: 46ch;
}
.hero .btn { align-self: flex-start; }
.hero figure { margin: 0; }
.hero figure img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3 / 4; max-height: 640px; object-position: 50% 42%;
}
/* ⚠ An <img> with height:100% inside a grid item resolves against a figure that
   has no height of its own, so it collapses. The figure has to be positioned
   and the image taken out of flow to fill the row the grid stretched it to. */
@media (min-width: 900px) {
  .hero figure { position: relative; }
  .hero figure img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; aspect-ratio: auto; max-height: none;
  }
}

.btn {
  display: inline-block; background: var(--blue); color: #fff;   /* 6.05:1 */
  font-size: 17px; font-weight: 700; padding: 15px 32px;
  border-radius: 4px; text-decoration: none;
}
.btn:hover { background: var(--blue-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) var(--s-lg) calc(var(--s-lg) + 2px);
  background: var(--ground);
}
.cards p { color: var(--muted); margin: 0; }

/* ── Call strip ───────────────────────────────────────────────────────── */
/* padding-block:0 - it is a <section>, and the generic section padding on top
   of the strip's own makes a 260px band around one line of text. */
.strip { background: var(--blue); 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(--blue-d); }
.strip .btn:hover { background: var(--pale); }

/* ── Feature rows. ⚠ PORTRAIT FRAMES NEED A MAX-HEIGHT or a 3:4 image
      towers over the paragraph beside it (banked on build #20). ───────── */
.feat { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; }
@media (min-width: 880px) {
  .feat { grid-template-columns: 0.78fr 1fr; }
  /* reverse the track widths too, or the flipped row's photo lands in the
     wider column and the two portrait frames come out different sizes */
  .feat.flip { grid-template-columns: 1fr 0.78fr; }
  .feat.flip figure { order: 2; }
}
.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; }

/* ── Testimonials ─────────────────────────────────────────────────────── */
.says { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); }
@media (min-width: 860px) { .says { grid-template-columns: repeat(3, 1fr); } }
.says blockquote {
  margin: 0; border: 1px solid var(--rule); border-radius: 5px;
  padding: var(--s-lg); background: var(--ground);
}
.says .mark {
  display: block; color: var(--blue); font-size: 34px;
  line-height: 1; font-weight: 800; margin-bottom: 6px;
}
.says p { color: var(--muted); font-size: 16px; }
.says footer {
  margin-top: var(--s-md); background: none; padding: 0;
  font-size: 14.5px; color: var(--muted);
}
.says cite { display: block; font-style: normal; font-weight: 700; color: var(--ink); }

/* ── Licence band ─────────────────────────────────────────────────────── */
.lic { background: var(--deep); color: var(--steel); }
.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: #8DA2B5; font-size: 15px; margin: 0; }
.lic dd { margin: 0; color: #fff; font-weight: 600; }
.lic dd b { color: var(--tan-p); font-weight: 700; }   /* 10.51 on deep */
.lic .note { margin-top: var(--s-lg); font-size: 14.5px; color: #8DA2B5; }
.lic a { color: var(--tan-p); }

/* ── 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(--steel); 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(--tan-p); 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: #6F8296;
}

/* ── 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(--blue); padding: 13px 16px; text-align: center;
  }
  .callbar a { color: #fff; font-weight: 700; text-decoration: none; font-size: 17px; }
  body { padding-bottom: 62px; }
}