/* So-Cal Construction - Lompoc - spec build #46 --------------------------------------------------------------------------- TYPE-LED WITH TWO PHOTOGRAPHS, and that ratio is the whole design problem. ⚠⚠ HE HAS POSTED TWO PHOTOS. HIS CUSTOMERS HAVE POSTED EIGHT. Of the ten images on the listing, only p01 and p02 are attributed to So-Cal Construction; the rest belong to Robert Perez, Stephanie Millender and David V. The locked rule is THEIR PHOTOS OR NO PHOTOS - never anyone else's work - so the page publishes two and the letter tells him the other eight are his customers', which is a free fix worth more than this page. So the reviews carry the page and the two photographs anchor it. Five reviews, all with real text, GROUPED BY ROOM - three bathrooms, two kitchens - which is how the work actually divides and is a structure none of the others used: #37 text beside a photo #38 text above a full-bleed photo #39 text over a photo #40 a triptych #41 a review spine, no photographs at all #42 one thesis photo beside its caption #43 two bands by LICENCE CLASS #44 a numbered four-stage sequence #45 two bands by JOB STATE #46 reviews grouped BY ROOM ⚠⚠ NO CREW CLAIM. CSLB: "exempt from having workers compensation insurance; they certified that they have no employees at this time", effective 2026-05-09. THREE reviews mention other people - "Eddie and his crew", "the workers were friendly", "the guys were amazing" - and all three are dated 2023-2024, before the exemption. They are quoted as the customers' words; the page's own copy says "he" and the footer says BONDED, not insured. ⭐⭐ THE PALETTE IS SAMPLED, BUT FROM ONLY TWO PHOTOGRAPHS, SO IT IS THIN. Both are bathroom finish work. What is in them: warm travertine and pebble mosaic (hue 22-31) and the painted vanity (hue 190). ⚠ Both collide. The stone is #44's amber at 23 and #40's olive at 39. The vanity sits between #41's teal (182) and #45's cyan (197) - 8 and 7 degrees, the tightest of any build. The vanity wins anyway, and the reason is SATURATION, not hue: at 0.12 it is a grey with a teal cast, where #41 was a saturated dark teal (sat 0.86) and #45 a pale cyan (sat 0.60). Side by side they do not read as the same decision. ⭐ And per the #45 lesson, the separation that actually works is in the GROUND: this page is WARM (stone paper, warm near-black) where #45 is cool-neutral and #41 was pale. ⚠ THE LIGHT-GROUNDS-ONLY TRAP IS BACK after missing on #44 and #45, both of which had LIGHT sampled accents. This one is mid-dark: 6.57 on white and 2.51 on the ink. Checked before choosing, as always, so the dark band uses a lightened slate instead. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED. #241E1A on white 16.46 | on paper 14.75 | white on it 16.46 #555F61 on white 6.57 | on paper 5.90 -> body text ok, AS SAMPLED #3E4749 white on it 9.54 -> hover #575049 on white 7.93 | on paper 7.10 -> muted body #94A3A6 on ink 6.31 | on white 2.61 DARK GROUNDS ONLY #D5CEC7 on ink 10.57 -> body on dark #9C938B on ink 5.46 -> labels on dark --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F5F2EE; /* warm stone, from the tile */ --ink: #241E1A; /* warm near-black, from the travertine shadows */ --slate: #555F61; /* SAMPLED off the vanity. hue 190, sat 0.12 */ --slate-h:#3E4749; --slate-l:#94A3A6; /* DARK GROUNDS ONLY - 2.61 on white */ --muted: #575049; --rule: #E4DED6; --rule-d: #3B332D; --body-d: #D5CEC7; --dim-d: #9C938B; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --wide: 1180px; --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(--slate-l); color: var(--ink); } :focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--slate); } .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(--slate); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--slate); flex: none; } .eyebrow.on-dark { color: var(--slate-l); } .eyebrow.on-dark::before { background: var(--slate-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(--slate); color: #fff; font-size: 17px; font-weight: 700; /* 6.57 */ text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px; } .mast .tel:hover { background: var(--slate-h); } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { background: var(--paper); padding-block: clamp(56px, 8vw, 96px); } .hero h1 { margin: 0 0 var(--s-md); max-width: 24ch; 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(--slate); } /* 5.90 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(--slate); 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(--slate-h); } .btn.ghost { background: var(--ground); color: var(--ink); border-color: #CFC7BE; } .btn.ghost:hover { border-color: var(--slate); } /* ── 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 var(--s-lg); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--slate); font-weight: 700; } p { margin: 0 0 var(--s-md); } p:last-child { margin-bottom: 0; } .intro { font-size: 19px; max-width: 62ch; color: var(--muted); } .band-ink .intro { color: var(--body-d); } /* ── The two photographs ──────────────────────────────────────────────── */ .pair { display: grid; gap: var(--s-lg); margin-top: var(--s-2xl); } @media (min-width: 820px) { .pair { grid-template-columns: 1fr 1fr; } } .pair figure { margin: 0; } .pair img { border-radius: 10px; width: 100%; } .pair figcaption { margin-top: 11px; color: var(--muted); font-size: 15.5px; max-width: 46ch; } .pair figcaption b { color: var(--ink); font-weight: 700; } /* ── Reviews, grouped by room ─────────────────────────────────────────── */ .rooms { display: grid; gap: var(--s-2xl); margin-top: var(--s-2xl); align-items: start; } @media (min-width: 900px) { .rooms { grid-template-columns: 1fr 1fr; } } .rooms blockquote { margin: 0 0 var(--s-xl); padding-left: var(--s-lg); border-left: 3px solid var(--slate); } .rooms blockquote:last-child { margin-bottom: 0; } .rooms blockquote p { margin: 0 0 10px; color: var(--ink); font-size: 16.5px; line-height: 1.55; } /* ⚠ LOAD-BEARING: a

, never a nested