/* Cota's Painting Interiors & Exteriors - Santa Maria - spec build #52
   ---------------------------------------------------------------------------
   ⚠⚠ THE PALETTE WAS CHOSEN, NOT SAMPLED. There is no logo, truck, sign or
   photo of his own anywhere - the listing's only photo is the reviewer's. The
   locked client-material rule cannot be followed, and this comment says so
   rather than implying a sampling step (the Paul Cuce #29 / Armorcoat #49
   precedent). Chosen: a deep green ground (hue ~155, unused by #46-#51) with
   a cream paper and a clay swatch.

   ⚠ The two hero swatches are a DESIGN DEVICE echoing the review ("a little
   of the trim paint ... and the main color before proceeding"). They are not
   his colors and the page never says what color any house was.

   Structure, deliberately unlike the last six:
     green hero with type left and two painted swatch "patches" right, then
     the one reviewed job as a NUMBERED SEQUENCE (the order carries meaning:
     prep, colors tried, paint and stain, clean up), each step her own words,
     the full review under it, a three-column scope row, the license record.
     Type-led, no photographs. Square corners. No eyebrows.

   ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED.
     #F4EFE3 cream  on green 9.57
     #BFD3C3 sage   on green 6.97                  DARK GROUNDS ONLY
     #A9BDB0 mutedG on green 5.54                  DARK GROUNDS ONLY
     #18201C ink    on cream 14.50
     #8E4827 clayD  on cream 5.89 | on white 6.76 | white on it 6.76
     #56605A muted  on cream 5.69
     trim swatch: white on clayD 6.76; cream swatch: ink on cream 14.50
   --------------------------------------------------------------------------- */

:root {
  --green:  #1F4335;
  --cream:  #F4EFE3;
  --white:  #FFFFFF;
  --ink:    #18201C;
  --sage:   #BFD3C3;   /* DARK GROUNDS ONLY */
  --mutedG: #A9BDB0;   /* DARK GROUNDS ONLY */
  --clayD:  #8E4827;
  --muted:  #56605A;
  --rule:   #DCD5C6;
  --rule-d: #36594B;
  --wide: 1160px;
  --sect: clamp(64px, 9vw, 112px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}

/* Browser surfaces. The parts you did not draw still carry the design, and
   this is the cheapest signal that a page was built rather than assembled. */
::selection      { background: var(--green); color: var(--cream); }
:root            { caret-color: var(--clayD); accent-color: var(--green); }
:focus-visible   { outline: 2px solid var(--clayD); outline-offset: 3px; }
a                { color: var(--clayD); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tabular, time, dd, .steps { font-variant-numeric: tabular-nums; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--green) var(--cream); scrollbar-width: thin; }
}

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; }
.muted { color: var(--muted); }
h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.08; font-weight: 800; }
h2 { font-size: clamp(28px, 3.8vw, 44px); margin: 0 0 12px; }
.intro { color: var(--muted); max-width: 58ch; margin: 0 0 34px; }

.btn {
  display: inline-block; background: var(--clayD); color: var(--white); font-weight: 700;
  text-decoration: none; padding: 15px 26px; white-space: nowrap;
}
.btn:hover { background: #733A1F; }

/* ── Masthead ─────────────────────────────────────────────────────────── */
.mast { background: var(--green); border-bottom: 1px solid var(--rule-d); }
.mast .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  justify-content: space-between; padding-block: 18px; }
.mark { margin: 0; color: var(--cream); font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.mark span { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--sage); }
.mast .tel { color: var(--cream); font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 1.5px solid var(--sage); padding: 9px 18px; }
.mast .tel:hover { background: var(--cream); color: var(--green); }

/* ── Hero: type and two painted patches ───────────────────────────────── */
.hero { background: var(--green); color: var(--cream); padding-block: clamp(52px, 8vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero h1 { font-size: clamp(38px, 5.4vw, 66px); margin: 0 0 24px; }
.hero h1 em { font-style: normal; color: var(--sage); }
.lede { font-size: 19px; max-width: 46ch; margin: 0 0 30px; color: var(--cream); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0; }
.hours { color: var(--mutedG); font-size: 15px; }

.swatches { position: relative; height: 340px; }
.sw { position: absolute; display: flex; align-items: flex-end; padding: 14px 16px;
  font-size: 14px; font-weight: 700; }
.sw-main { inset: 0 18% 22% 0; background: var(--cream); color: var(--ink);
  /* a brushed edge: the patch is painted, not printed */
  clip-path: polygon(0 3%, 12% 0, 31% 2%, 55% 0, 78% 3%, 100% 1%, 98% 30%, 100% 62%, 97% 100%, 70% 97%, 44% 100%, 20% 98%, 1% 100%, 3% 64%, 0 31%); }
.sw-trim { inset: 46% 0 0 42%; background: var(--clayD); color: var(--white);
  clip-path: polygon(2% 0, 30% 3%, 64% 0, 100% 2%, 97% 40%, 100% 100%, 60% 97%, 26% 100%, 0 98%, 3% 50%); }
.sw-note { position: absolute; left: 0; bottom: 0; margin: 0; font-size: 15px; color: var(--mutedG); }

/* ── The job, in order ────────────────────────────────────────────────── */
.job { padding-block: var(--sect); }
.steps { list-style: none; counter-reset: s; margin: 0 0 48px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
.steps li { counter-increment: s; border-top: 3px solid var(--ink); padding-top: 16px; }
.steps li::before { content: counter(s); display: block; font-size: 44px; font-weight: 800;
  line-height: 1; color: var(--clayD); margin-bottom: 10px; }
.steps b { display: block; font-size: 20px; letter-spacing: -0.015em; }
.steps span { display: block; color: var(--muted); font-size: 15px; margin-top: 6px; }

.review { margin: 0; background: var(--white); border-left: 6px solid var(--green);
  padding: clamp(24px, 4vw, 44px); }
.review blockquote { margin: 0; }
.review p { margin: 0; font-size: clamp(19px, 2vw, 23px); line-height: 1.6; max-width: 62ch; }
.review figcaption { margin-top: 18px; color: var(--muted); font-size: 15px; }
.review figcaption b { color: var(--ink); }
.stars { color: var(--clayD); letter-spacing: 2px; margin-right: 8px; }

/* ── Scope ────────────────────────────────────────────────────────────── */
.scope { background: var(--white); padding-block: var(--sect); border-block: 1px solid var(--rule); }
.scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; margin-top: 28px; }
.scope h3 { margin: 0 0 8px; font-size: 24px; }
.scope p { margin: 0; color: var(--muted); }

/* ── License record ───────────────────────────────────────────────────── */
.license { padding-block: var(--sect); }
.license .wrap { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 72px); }
.record { margin: 0; border-top: 3px solid var(--ink); }
.record div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.record dt { color: var(--muted); font-size: 15px; }
.record dd { margin: 0; }
.record .hi dd { font-weight: 800; font-size: 21px; color: var(--clayD); }

/* ── Reach ────────────────────────────────────────────────────────────── */
.reach { background: var(--green); color: var(--cream); padding-block: clamp(52px, 7vw, 84px); }
.reach .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.reach h2 { margin-bottom: 6px; }
.reach .muted { color: var(--mutedG); margin: 0; }
.reach-call { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.big { margin: 0; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
.big a { color: var(--cream); text-decoration: none; }

/* ── Letter ───────────────────────────────────────────────────────────── */
.letter { padding-block: var(--sect); }
.letter .wrap { max-width: 700px; }
.letter p { font-size: 18px; margin: 0 0 18px; }
.sign { margin-top: 26px !important; font-weight: 700; }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer { background: var(--ink); color: var(--cream); padding-block: 56px 96px; }
footer .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
footer h4 { margin: 0 0 8px; font-size: 17px; }
footer p { margin: 0 0 4px; color: var(--mutedG); font-size: 15px; }
footer a { color: var(--sage); }
footer .legal { grid-column: 1 / -1; margin-top: 18px; padding-top: 18px; border-top: 1px solid #34403A; font-size: 13px; line-height: 1.6; }

.callbar { display: none; }

@media (max-width: 900px) {
  .hero .wrap, .license .wrap { grid-template-columns: 1fr; }
  .swatches { height: 220px; max-width: 360px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .steps, .scope-grid, footer .wrap { grid-template-columns: 1fr; }
  .record div { grid-template-columns: 1fr; gap: 2px; }
  .mast .tel { display: none; }
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--green);
  }
  .callbar a { display: block; text-align: center; background: var(--clayD); color: var(--white);
    font-weight: 700; text-decoration: none; padding: 14px; }
}