/* David's Pool & Spa Service - Oceano - spec build #41 --------------------------------------------------------------------------- TYPE-LED. The listing carries three photographs and only two are his, and the listing panel shows no photo carousel at all. There is nothing to build a photo-led page from, so this is the first type-led build since Ormonde #36 after four photo-led ones (#37, #38, #39, #40). ⚠⚠ NO LICENCE BAND, AND NO LICENSURE CLAIM ANYWHERE ON THIS PAGE. Checked three ways on 2026-09-18 and all came back empty: no CSLB licence on his phone number, none of the ten C-53s in the south-county cities is his, and none of the thirteen locally licensed businesses whose name begins DAVID is a pool business. Google's own category is "Pool cleaning service", and pool cleaning and maintenance requires no licence in California. Step 0 cannot be performed and does not need to be. ⚠⚠ THE COPY GUARD IS TIGHTER HERE THAN ON BEYOND CARPET #38. Carpet cleaning NEVER needs a licence. Pool work is different: REPAIRS OVER $500 DO NEED A C-53. Nothing in his reviews shows a paid repair - one customer says he was not charged at all, another praises him for NOT upselling repairs - so there is no evidence of unlicensed contracting. But this page must describe CLEANING AND MAINTENANCE ONLY and must never imply repair or installation work. Read every line of copy against that before changing it. ⭐ THE REVIEWS ARE THE SPINE, NOT A SECTION. With no photographs, no licence record and no founding date, what this business has is five people who wrote at length. So they ARE the body of the page, in sequence, each under a short mono label naming what it is evidence of. #34 and #36 - the other two type-led builds - both had a licence band as their anchor and put reviews in a subordinate block. This one cannot, and does not pretend otherwise. ⚠ ALL FIVE QUOTES ARE CONTIGUOUS SPANS. After the two silent elisions caught on #40, every quote here runs unbroken from its first word to its last with nothing removed from the middle. No [...] was needed because none was taken. THE PALETTE WAS CHOSEN, NOT SAMPLED, AND THIS FILE SAYS SO. The locked rule is that the palette comes from the client's own material. There is no material, so it is named for what it is: #12211F a deep blue-green near-black #0F6F73 a teal, chosen for water. ⚠ HUE 182. #37's sampled sign blue was hue 212 and #38's sampled air-mover navy hue 215 - both properly blue. 30 degrees of separation is deliberate: three blues in five builds would read as one template. #BFDCD9 a pale aqua, for dark grounds only ⭐ AND THE LIGHT-GROUNDS-ONLY TRAP WAS CHECKED BEFORE CHOOSING, NOT AFTER. #38's navy died on dark at 2.12, #39's stain at 1.95, #40's olive at 1.84 - three builds running. So the candidate teals were tested on BOTH grounds up front. #0F6F73 is 5.93 on white and only 2.80 on the deep, so it is still light-grounds-only and the pale aqua carries the dark bands - but that was a decision made with the number in hand rather than a discovery made late. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED. #0F6F73 on white 5.93 | on paper 5.44 | white on it 5.93 -> text AND fills #0B5F63 white on it 7.42 -> hover #12211F on white 16.63 | on paper 15.26 #4F5A59 on white 7.14 | on paper 6.56 -> muted body #BFDCD9 on white 1.50 UNUSABLE | on deep 11.44 -> DARK ONLY #C6D2D0 on deep 10.71 -> body on dark #9AA8A6 on deep 6.75 -> labels on dark --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F2F6F5; /* ink 15.26, teal 5.44, muted 6.56 */ --ink: #12211F; /* on white 16.63 */ --muted: #4F5A59; /* on white 7.14 */ --rule: #DFE7E5; --teal: #0F6F73; /* CHOSEN. light grounds: text AND fills, 5.93 */ --teal-h: #0B5F63; /* hover, 7.42 */ --aqua: #BFDCD9; /* DARK GROUNDS ONLY - 1.50 on white */ --deep: #12211F; --rule-d: #2B3836; --body-d: #C6D2D0; /* on deep 10.71 */ --dim: #9AA8A6; /* on deep 6.75 */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --measure: 680px; --wide: 1120px; --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(--aqua); color: var(--deep); } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--teal); } /* One container width for the whole page, so every section shares a left edge. Reading measure is imposed on the PROSE ELEMENTS instead - an earlier draft put the narrow measure on the container and the three service cards came out 200px wide, in a 1440px window, as three skinny ribbons. */ .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; } .wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; } /* ── Eyebrow ──────────────────────────────────────────────────────────── */ .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(--teal); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--teal); flex: none; } /* ⚠ on dark the accent is the AQUA, never the teal - it is 2.80 there */ .eyebrow.on-dark { color: var(--aqua); } .eyebrow.on-dark::before { background: var(--aqua); } /* ── Masthead ─────────────────────────────────────────────────────────── */ .mast { background: var(--ground); border-bottom: 1px solid var(--rule); } .mast .wide { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; padding-block: 18px; } .mast .mark { margin: 0; color: var(--ink); 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(--teal); color: #fff; font-size: 17px; font-weight: 700; /* 5.93 */ text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px; } .mast .tel:hover { background: var(--teal-h); } /* ── Hero: words only. There is nothing to show, so nothing is faked. ─── */ .hero { background: var(--paper); border-bottom: 1px solid var(--rule); padding-block: clamp(54px, 8vw, 96px); } .hero h1 { margin: 0 0 var(--s-md); color: var(--ink); 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(--teal); } /* 5.44 on paper */ .hero p.lede { margin: 0 0 var(--s-xl); color: var(--muted); font-size: 19px; max-width: 52ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; } .btn { display: inline-block; background: var(--teal); color: #fff; /* 5.93 */ font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: var(--teal-h); } .btn.ghost { background: var(--ground); color: var(--ink); border-color: #C8D2D0; } .btn.ghost:hover { border-color: var(--teal); } .btn.light { background: var(--aqua); color: var(--deep); } /* dark grounds: 11.44 */ .btn.light:hover { background: #D4E7E4; } /* ── Sections ─────────────────────────────────────────────────────────── */ section { padding-block: var(--sect); } .band-paper { background: var(--paper); } .band-deep { background: var(--deep); color: var(--body-d); } .band-deep 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: 19px; font-weight: 800; letter-spacing: -0.018em; } p { margin: 0 0 var(--s-md); } p:last-child { margin-bottom: 0; } .lede { font-size: 19px; } .muted { color: var(--muted); } .intro { font-size: 19px; max-width: 58ch; } /* ── THE REVIEW SPINE. The body of the page, in sequence, each under a mono label naming what it is evidence of. ───────────────────────────── */ .spine { margin-top: var(--s-2xl); border-top: 1px solid var(--rule); } .spine .item { display: grid; gap: 10px 48px; padding-block: var(--s-xl); border-bottom: 1px solid var(--rule); } @media (min-width: 880px) { .spine .item { grid-template-columns: 190px 1fr; } } .spine .label { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); font-weight: 600; } .spine blockquote { margin: 0; max-width: 640px; } /* reading measure, not column width */ .spine blockquote p { margin: 0 0 12px; color: var(--ink); font-size: 18px; line-height: 1.55; } .spine .first blockquote p { font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; line-height: 1.42; } /* ⚠ LOAD-BEARING, carried from #29 onward: the page footer is also a