/* Evangelistas Construction - Guadalupe - spec build #45 --------------------------------------------------------------------------- PHOTO-LED, and the structure is TWO STATES, not a sequence. His ten photographs split cleanly into houses opened up - a timber arch standing in bare framing, a bathroom at rough-in, stucco going on, a patio bay knocked through - and the same kind of rooms finished. So the page is two bands: "Down to the studs" and "And put back". ⚠ NO BEFORE/AFTER PAIR IS CLAIMED. Nothing in the photos proves the framed room and the finished room are the same house, so the bands group by STATE and never assert a pairing. Same discipline as #44's four stages. 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 bands, asymmetric grids, split by LICENCE CLASS #44 a numbered four-stage sequence, fixed aspect #45 two bands split by JOB STATE, two columns at natural aspect ⭐ A CREW IS SUPPORTABLE HERE, UNLIKE #44. CSLB shows real workers comp with Everest Premier to 2027-07-05, and a customer writes "Eddie and his crew". #44 was WC-exempt with no employees certified, so that page could not. ⚠ THREE NAME VARIANTS, the iwerks problem again: CSLB EVANGELISTA'S CONSTRUCTION (singular, apostrophe - the legal name) Google Evangelistas Construction (plural, no apostrophe) Reviews Evangelista Construction The page uses the GOOGLE LISTING NAME throughout, because that is the identity a customer searches, and prints the CSLB spelling only inside the licence record where it is labelled as the state's. ⚠⚠ THE PALETTE HAD NO BRAND COLOUR AND THE OBVIOUS ANSWER WAS WRONG. The set is dominated by raw timber and OSB, hue 20-39 - which is #44's amber at 23 and #40's olive at 39. #44 shipped the same day. A third warm-brown page would have read as a template, so the timber was rejected despite being the most honest single colour in the frame. What is left that is man-made: the blue protective film and tarps that recur across the site photos. Sampled at hue 197, #50A5C7. ⚠ Separation is the tightest yet: 14 degrees from #41's teal (182) and 16 from #37's blue (212). Accepted because it is sampled from his material and because both neighbours differ sharply in value and saturation - #41 was a dark teal, #37 a vivid mid blue, this is a pale site cyan. ⭐ The ink and paper are deliberately NEUTRAL (not the warm off-white of #44), which is what actually keeps the two pages apart at a glance. ⭐⭐ SECOND BUILD RUNNING WHERE THE SAMPLED ACCENT SURVIVES THE DARK GROUND. As-sampled #50A5C7 is 5.84 on the ink. The light-grounds-only trap caught five of six (#38 2.12, #39 1.95, #40 1.84, #42 2.58, #43 2.45) and has now missed twice, both times because the sampled colour was LIGHT. The trap is about mid-dark accents. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED. #1C2124 on white 16.25 | on paper 14.73 | white on it 16.25 #2A6A82 on white 6.03 | on paper 5.47 -> body text ok #245C71 white on it 7.38 -> hover #50A5C7 on ink 5.84 | on white 2.78 DARK GROUNDS ONLY #4B5257 on white 7.94 | on paper 7.20 -> muted body #C9D0D4 on ink 10.41 -> body on dark #939CA1 on ink 5.81 -> labels on dark --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F2F4F5; /* COOL neutral - #44's is warm, and that is the tell */ --ink: #1C2124; --blue: #2A6A82; /* the site blue, darkened to clear body text */ --blue-h: #245C71; --blue-l: #50A5C7; /* AS SAMPLED. 2.78 on white - dark grounds only */ --muted: #4B5257; --rule: #DFE4E6; --rule-d: #323A3F; --body-d: #C9D0D4; --dim-d: #939CA1; --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(--blue-l); color: var(--ink); } :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(--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(--blue); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--blue); flex: none; } .eyebrow.on-dark { color: var(--blue-l); } .eyebrow.on-dark::before { background: var(--blue-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(--blue); color: #fff; font-size: 17px; font-weight: 700; /* 6.03 */ text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px; } .mast .tel:hover { background: var(--blue-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(--blue); } /* 5.47 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(--blue); 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(--blue-h); } .btn.ghost { background: var(--ground); color: var(--ink); border-color: #C9D0D3; } .btn.ghost:hover { border-color: var(--blue); } /* ── 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; } 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 two work bands: two columns, NATURAL aspect ratios ───────────── */ .grid2 { display: grid; gap: var(--s-xl) var(--s-lg); margin-top: var(--s-2xl); align-items: start; } @media (min-width: 820px) { .grid2 { grid-template-columns: 1fr 1fr; } } .grid2 figure { margin: 0; } .grid2 img { border-radius: 10px; width: 100%; } .grid2 figcaption { margin-top: 11px; color: var(--muted); font-size: 15.5px; max-width: 48ch; } .grid2 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: 1fr 1fr; } } .says blockquote { margin: 0; padding-left: var(--s-lg); border-left: 3px solid var(--blue); } .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