/* C3 Construction and Development - Paso Robles - spec build #35 --------------------------------------------------------------------------- TYPE-LED BUILD. No client imagery exists. The listing carries three photographs and all three are attributed to one CUSTOMER (Lauren Lekai). There is no owner photo, no logo and no job shot, so this is the third build with no client material after Paul Cuce #29 and R J Potter #34, under Matt's 2026-09-16 rule that no photographs is not a disqualification. ⚠⚠ THE STRUCTURE IS DELIBERATELY NOT #34's, AND THAT IS THE POINT. R J Potter went out the SAME DAY this was built, is also type-led, and is also in PASO ROBLES - the two owners could plausibly know each other. The banked rule is explicit: "Every spec build gets its own design. Changing the palette is not enough. Change the structure." So three things are different in kind, not in colour: 1. THE HERO IS LIGHT. #34 opens on a near-black hero with white type. This opens on pale with dark type, which inverts the whole page rhythm at a glance: light -> dark -> light -> dark, where #34 runs dark -> light. 2. THE A/B SPLIT BAND replaces #34's two rounded cards. It is driven by content #34 does not have: two classifications, set as two huge mono glyphs across a divided dark band. Nothing on #34 looks like it. 3. TESTIMONIALS ARE A LEDGER, not a pull-quote plus a card grid. Attribution in mono on the left, quote on the right, hairline rules between. It reads like a record, which is the through-line of the whole page. THE PALETTE WAS CHOSEN, NOT SAMPLED, AND THIS FILE SAYS SO OUTRIGHT. 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: #12181A a cool near-black #3E9C74 a pine green, chosen for North County oak country and for the green of a survey stake. Deliberately NOT #34's clay ochre. #CFE3D7 a pale mist, for dark grounds only DELIBERATELY NOT MATT'S BLUE. The layout vocabulary is borrowed from alignmentautomations.com per the banked design-reference rule; the colour is not, because this is the client's page and a Paso Robles contractor is not a software brand. BORROWED FROM alignmentautomations.com: bold sans display with tight tracking and an accent colour on the key phrase inside the headline; MONOSPACE AS THE ACCENT TYPEFACE for eyebrows, labels and record lines; eyebrows as a short 2px rule then uppercase mono; data as big figures; hairline rules; arrow links; alternating grounds. ⭐ The mono is the load-bearing borrow: a licence number, two classifications and an issue date ARE record data, and this entire page rests on that record being checkable. THE THREE-TONE TRAP, SEVENTEENTH BUILD RUNNING. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED - the banked craft-floor rule after estimated figures had to be corrected twice on build #34. #3E9C74 on white 3.38 -> LARGE DISPLAY + 2px RULES ONLY, never body copy #3E9C74 on deep 5.30 -> safe anywhere on the dark grounds #246F50 on white 6.06 | on pale 5.63 -> small text, links, button fills #12181A on white 17.93 | on pale 16.66 -> headings, body, dark grounds #52565C on white 7.38 | on pale 6.86 -> muted body #CFE3D7 on white 1.34 UNUSABLE | on deep 13.34 -> DARK GROUNDS ONLY #C4CCC8 on deep 10.94 -> body text on dark #9AA6A0 on deep 7.12 -> labels on dark #8C9993 on deep 6.06 -> legal line ⚠⚠ #3E9C74 IS 3.38 ON WHITE, UNDER THE 4.5 SMALL-TEXT BAR. It is used only on DARK grounds and for the 2px eyebrow rules, where the 3.0 bar applies. On the light hero the accent phrase uses #246F50 at 5.63, and EVERY button fill and small link uses #246F50. One token would silently fail one of the two jobs. --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --pale: #F5F7F6; /* ink on it 16.66, muted 6.86, moss-t 5.63 */ --ink: #12181A; /* on white 17.93 */ --muted: #52565C; /* on white 7.38 */ --rule: #E2E6E4; --rule-d: #2A3336; --moss: #3E9C74; /* DARK GROUNDS + eyebrow rules only. white 3.38 */ --moss-t: #246F50; /* small text + links. white 6.06, pale 5.63 */ --moss-f: #246F50; /* button fill, white on it 6.06 */ --moss-h: #1F6446; /* fill hover, white on it 7.07 */ --mist: #CFE3D7; /* DARK GROUNDS ONLY - 1.34 on white */ --deep: #12181A; --body-d: #C4CCC8; /* body text on dark. 10.94 */ --dim: #9AA6A0; /* labels on dark. 7.12 */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --measure: 660px; --wide: 1160px; --s-sm: 8px; --s-md: 16px; --s-lg: 26px; --s-xl: 36px; --s-2xl: 60px; --sect: clamp(64px, 9vw, 112px); } * { 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; caret-color: var(--moss-t); } ::selection { background: var(--mist); color: var(--deep); } :focus-visible { outline: 2px solid var(--moss-t); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--moss-t); } .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: 24px; } .wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; } /* ── Eyebrow: short accent rule, then uppercase mono ──────────────────── */ .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(--moss-t); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--moss-t); flex: none; } .eyebrow.on-dark { color: var(--mist); } .eyebrow.on-dark::before { background: var(--moss); } /* ── Masthead. LIGHT, unlike #34's near-black bar. ────────────────────── */ .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 { color: var(--moss-t); font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid var(--rule); border-radius: 7px; padding: 9px 16px; } .mast .tel:hover { border-color: var(--moss-t); background: var(--pale); } /* ── HERO. No image, and LIGHT. Dark display type, accent on the key phrase. */ .hero { background: linear-gradient(180deg, rgba(62,156,116,.07), transparent 60%), var(--pale); border-bottom: 1px solid var(--rule); padding-block: clamp(58px, 8.5vw, 104px); } .hero h1 { margin: 0 0 var(--s-lg); max-width: 22ch; color: var(--ink); font-size: clamp(38px, 6.4vw, 72px); line-height: 1.03; letter-spacing: -0.035em; font-weight: 800; } .hero h1 em { font-style: normal; color: var(--moss-t); } /* on pale 5.63 */ .hero p.lede { margin: 0 0 var(--s-xl); color: var(--muted); /* on pale 6.86 */ font-size: clamp(16.5px, 1.85vw, 20px); max-width: 54ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s-2xl); } /* Data as big figures. On a page with no photographs the licence figures are both the imagery and the most verifiable thing on it. */ .stats { display: grid; gap: var(--s-lg) var(--s-2xl); grid-template-columns: repeat(auto-fit, minmax(138px, max-content)); padding-top: var(--s-xl); border-top: 1px solid var(--rule); } .stats .n { display: block; font-family: var(--mono); color: var(--ink); /* 16.66 on pale */ font-size: clamp(27px, 3.6vw, 40px); line-height: 1; letter-spacing: -0.02em; font-weight: 600; } .stats .l { display: block; margin-top: 11px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); /* 6.86 */ } .btn { display: inline-block; background: var(--moss-f); color: #fff; /* 6.06:1 */ font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: var(--moss-h); } .btn.ghost { background: transparent; color: var(--ink); border-color: #C9CFCC; } .btn.ghost:hover { background: var(--ground); border-color: var(--moss-t); } .arrow { display: inline-block; font-family: var(--mono); font-size: 13.5px; color: var(--moss-t); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .arrow:hover { color: var(--ink); } .arrow.on-dark { color: var(--mist); } .arrow.on-dark:hover { color: #fff; } /* ── Sections ─────────────────────────────────────────────────────────── */ section { padding-block: var(--sect); } .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.6vw, 42px); line-height: 1.1; letter-spacing: -0.032em; font-weight: 800; max-width: 20ch; } h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; } p { margin: 0 0 var(--s-md); } p:last-child { margin-bottom: 0; } .lede { font-size: 19px; } /* ── THE A/B BAND. #35's signature block. Two huge mono glyphs on a divided dark ground. Replaces #34's pair of rounded cards outright. ──────── */ .duo { background: var(--deep); color: var(--body-d); } .duo h2 { color: #fff; } .duo .intro { color: var(--body-d); font-size: 19px; max-width: 62ch; } .duo .grid { display: grid; gap: var(--s-2xl); margin-top: var(--s-2xl); } @media (min-width: 860px) { .duo .grid { grid-template-columns: 1fr 1fr; gap: 0; } .duo .half:first-child { padding-right: var(--s-2xl); } .duo .half + .half { padding-left: var(--s-2xl); border-left: 1px solid var(--rule-d); } } .duo .glyph { display: block; font-family: var(--mono); color: var(--moss); /* 5.30 on deep */ font-size: clamp(66px, 9vw, 116px); line-height: 0.9; font-weight: 600; letter-spacing: -0.05em; } .duo .kind { margin: var(--s-md) 0 var(--s-sm); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); /* 7.12 */ } .duo h3 { color: #fff; font-size: 22px; margin-bottom: 12px; } .duo .half p:last-child { color: var(--body-d); margin: 0; } /* ── TESTIMONIAL LEDGER. Attribution in mono at the left, quote at the right, hairline rules between. Reads like a record, which is the through-line of the page. NOT #34's pull-quote plus card grid. ──── */ .ledger { margin-top: var(--s-xl); border-top: 1px solid var(--rule); } .ledger .q { display: grid; gap: 10px 48px; padding-block: var(--s-lg); border-bottom: 1px solid var(--rule); } @media (min-width: 840px) { .ledger .q { grid-template-columns: 210px 1fr; } } .ledger .who { margin: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--moss-t); font-weight: 600; /* 6.06 */ } .ledger .who span { display: block; margin-top: 4px; color: var(--muted); /* 7.38 */ font-weight: 400; letter-spacing: 0.1em; font-size: 10.5px; } .ledger .q p:last-child { margin: 0; color: var(--ink); font-size: 17px; } .ledger .feat p:last-child { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.38; letter-spacing: -0.015em; font-weight: 700; } .cta-line { margin-top: var(--s-2xl); } /* ── Licence band ─────────────────────────────────────────────────────── */ .lic dl { margin: var(--s-xl) 0 0; display: grid; gap: 0; } .lic .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 13px 0; border-bottom: 1px solid var(--rule-d); } .lic .row:first-child { border-top: 1px solid var(--rule-d); } .lic dt { color: var(--dim); font-size: 14.5px; margin: 0; } .lic dd { margin: 0; color: #fff; font-weight: 600; font-family: var(--mono); font-size: 14.5px; } .lic dd b { color: var(--mist); font-weight: 700; } /* 13.34 on deep */ .lic .note { margin-top: var(--s-lg); font-size: 14px; color: var(--dim); } .lic .note b { color: var(--mist); } .lic a { color: var(--mist); } /* ── Letter ───────────────────────────────────────────────────────────── */ .letter p { color: var(--muted); } .letter strong { color: var(--ink); } .letter .sign { margin-top: var(--s-lg); color: var(--ink); font-weight: 600; } /* ── Footer ───────────────────────────────────────────────────────────── */ /* ⚠ LOAD-BEARING NOTE, carried from #29/#32/#33/#34: this global `footer` rule reaches INSIDE any