/* Integrity Painting - Santa Maria - spec build #44 --------------------------------------------------------------------------- PHOTO-LED, and the spine is ONE JOB IN FOUR STAGES. His photo set contains a complete cabinet refinish: the boxes stripped back to raw wood, the kitchen masked and papered, a carcass on the dropcloth being sprayed, and the finished white kitchen. That sequence IS the page, because it is also what two of his four reviews are about - one customer had a different company paint her cabinets and the paint chipped and peeled within months, and Rick redid them. Structure against the predecessors, none repeated: #37 text beside one photo #38 text above one full-bleed photo #39 text over a photo #40 a triptych, three edge to edge #41 no photos, review spine #42 one thesis photo beside its caption #43 two classification bands #44 a NUMBERED FOUR-STAGE SEQUENCE ⭐⭐ THE SERVICE LIST IS HIS OWN, OFF HIS OWN YARD SIGN, not my inference. p02 caught the sign in frame and it reads: Interior, Exterior, Residential, Commercial, Repaints, Cabinetry, Special Finishes, Pressure Washing, Airbrushing, Glass Etching. ⭐ It also prints "Lic. #967410", which matches the number verified live on CSLB - he already puts it on his own marketing, so the page is echoing him, not introducing it. ⚠⚠ NO CREW CLAIM ANYWHERE. CSLB: "This license is exempt from having workers compensation insurance; they certified that they have no employees at this time", effective 2025-11-26. Two reviews say "Rick and his crew" and "Rick and his team" - those are the CUSTOMERS' words and are quoted as such, but the page's own copy must never assert employees. The sweep greps for it. ⚠ AND THE TENURE TRAP IS IN A REVIEW, NOT THE RECORD, WHICH IS NEW. Barbara Luis writes "over the past 20 years, he has painted 2 of my homes". The licence dates from 2011-11-04 - FOURTEEN years - and the personnel record shows Rick Anthony Barretto associated since that same date, so the tenure is clean but it is 14, not 20. Her sentence is quotable as hers. THE PAGE MUST NOT CLAIM 20 YEARS. ⭐⭐ THE PALETTE IS SAMPLED FROM HIS OWN YARD SIGN, by the clustering method banked on #42 (find the ink by hue population, never by eyeballed coordinates; white-balance first, because the sign is shot in full sun and its white ground reads #BBBDB2). #E1905F the amber swoosh, hue 22.6 - the sign's dominant ink ⚠ Hue 22.6 is tight against #39's stain at 14.7 and #40's olive at 39.4. The locked rule is that the palette comes from the client's own material, so the brand wins - the same call as #42's navy colliding with #37's blue. It is also a saturated amber where #39 was a desaturated brown. ⭐ AND FOR THE FIRST TIME THE SAMPLED ACCENT SURVIVES ON BOTH GROUNDS. The light-grounds-only trap caught five of the last six builds (#38 2.12, #39 1.95, #40 1.84, #42 2.58, #43 2.45). Here the brand colour is a LIGHT warm tone, so as-sampled it is 6.67 on the dark ink while a darkened #8F5025 is 6.28 on white. Checked before choosing, as always now. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED. #241C16 on white 16.76 | on paper 15.16 | white on it 16.76 #8F5025 on white 6.28 | on paper 5.68 -> body text ok #7D461F white on it 7.59 -> hover #E1905F on ink 6.67 | on white 2.51 DARK GROUNDS ONLY #5A5049 on white 7.84 | on paper 7.09 -> muted body #D6CEC6 on ink 10.78 -> body on dark #9E9288 on ink 5.52 -> labels on dark --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F6F3EF; /* a WARM off-white, to sit with the amber */ --ink: #241C16; /* warm near-black */ --amber: #8F5025; /* the sign's amber, darkened to clear body text */ --amber-h:#7D461F; --amber-l:#E1905F; /* AS SAMPLED off the sign. 2.51 on white - dark only */ --muted: #5A5049; --rule: #E5E0D9; --rule-d: #3E332B; --body-d: #D6CEC6; /* on ink 10.78 */ --dim-d: #9E9288; /* on ink 5.52 */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --wide: 1180px; --s-sm: 8px; --s-md: 16px; --s-lg: 26px; --s-xl: 36px; --s-2xl: 60px; --sect: clamp(64px, 9vw, 108px); } * { 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.65; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } ::selection { background: var(--amber-l); color: var(--ink); } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--amber); } .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; } .eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--amber); flex: none; } .eyebrow.on-dark { color: var(--amber-l); } .eyebrow.on-dark::before { background: var(--amber-l); } /* ── Masthead ─────────────────────────────────────────────────────────── */ .mast { border-bottom: 1px solid var(--rule); } .mast .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; padding-block: 18px; } .mast .mark { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; } .mast .mark span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); margin-top: 5px; font-weight: 400; } .mast .tel { background: var(--amber); color: #fff; font-size: 17px; font-weight: 700; /* 6.28 */ text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px; } .mast .tel:hover { background: var(--amber-h); } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { background: var(--paper); padding-block: clamp(56px, 8vw, 96px); } .hero h1 { margin: 0 0 var(--s-md); max-width: 26ch; font-size: clamp(34px, 5.2vw, 56px); line-height: 1.05; letter-spacing: -0.034em; font-weight: 800; } .hero h1 em { font-style: normal; color: var(--amber); } /* 5.68 on paper */ .hero p.lede { margin: 0 0 var(--s-xl); color: var(--muted); font-size: 19px; max-width: 58ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; } .btn { display: inline-block; background: var(--amber); color: #fff; font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: var(--amber-h); } .btn.ghost { background: var(--ground); color: var(--ink); border-color: #D3CCC3; } .btn.ghost:hover { border-color: var(--amber); } /* ── Sections ─────────────────────────────────────────────────────────── */ section { padding-block: var(--sect); } .band-paper { background: var(--paper); } .band-ink { background: var(--ink); color: var(--body-d); } .band-ink h2 { color: #fff; } h2 { margin: 0 0 var(--s-md); font-size: clamp(28px, 3.5vw, 40px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; max-width: 24ch; } h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.018em; } p { margin: 0 0 var(--s-md); } p:last-child { margin-bottom: 0; } .intro { font-size: 19px; max-width: 60ch; color: var(--muted); } .band-ink .intro { color: var(--body-d); } /* ── THE FOUR-STAGE SEQUENCE. One job, start to finish. ───────────────── */ .stages { display: grid; gap: var(--s-xl) var(--s-lg); margin-top: var(--s-2xl); } @media (min-width: 760px) { .stages { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .stages { grid-template-columns: repeat(4, 1fr); } } .stages figure { margin: 0; display: flex; flex-direction: column; } /* ⚠ the four photos are different shapes - one is a tall portrait. A fixed aspect box with object-fit keeps the row honest without cropping anything important, because each frame's subject is central. */ .stages .shot { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; } .stages .num { margin: 12px 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); font-weight: 700; } .stages figcaption { color: var(--muted); font-size: 15.5px; } .stages figcaption b { color: var(--ink); font-weight: 700; } /* ── Reviews ──────────────────────────────────────────────────────────── */ .says { display: grid; gap: var(--s-xl); margin-top: var(--s-2xl); } @media (min-width: 880px) { .says { grid-template-columns: repeat(2, 1fr); } } .says blockquote { margin: 0; padding-left: var(--s-lg); border-left: 3px solid var(--amber); } .says blockquote p { margin: 0 0 10px; color: var(--ink); font-size: 16.5px; line-height: 1.55; } .says .lead blockquote p { font-size: 18.5px; } /* ⚠ LOAD-BEARING: a

, never a nested