/* iwerks construction company - Arroyo Grande - spec build #32 --------------------------------------------------------------------------- PALETTE SAMPLED FROM HIS OWN MATERIAL. The logo is BLACK ON WHITE and carries no brand colour at all, so unlike Aaron Peel there is no mark to take a hue from. The colour had to come from the photographs, and they were unusually unanimous: ALL THREE ARE DOMINATED BY HUE ~30, WARM TIMBER. framing shot #604830 #786048 #483018 raw douglas fir pool deck #A89078 #C0A890 the same fir in full sun interior #786048 plus #301818 the dark reclaimed accent wall So #786048 is not a decorator's choice - it is the single most common tone across two unrelated jobs, and #301818 is a wall he actually built. ⭐⭐ THE MASTHEAD IS WHITE, AND THAT IS A FIRST IN THIRTY-TWO BUILDS. The banked rule from Aaron Peel is: read the logo's ground at all four corners; flat means match it exactly, a gradient means give it a plate. This logo's ground is #FFFFFF at all four corners AND STILL IS after cropping and re-encoding (verified, not assumed). So the honest match is a white masthead and the JPG sits flush with no plate, no hairline and no visible box. It also avoids the Aaron Peel problem of three dark bands stacking into one heavy mass - here the dark utility strip sits against white and reads clean. ⚠ THE SUPPLIED LOGO CARRIED ENORMOUS DEAD SPACE - 29% top, 44.4% bottom, 29% left, 27.8% right on a 500x500 canvas. Cropped to its content bbox (145,145)-(360,277) plus a 6px margin, giving 228x145. logo-orig.jpg is kept beside it. THIS IS THE AARON PEEL HEADER BUG AND IT WAS FIXED BEFORE IT SHIPPED, not after Matt spotted it. THE THREE-TONE TRAP, FOURTEENTH BUILD RUNNING: #786048 white 5.89 PASS | white ON it 5.89 PASS -> links, button fills #604830 white 8.51 -> hover #301818 white 16.54 -> dark grounds #C0A890 white 2.27 UNUSABLE | on deep 7.28 PASS -> DARK BANDS ONLY #D8C8BC on deep 10.17 -> body text on dark ⚠ #C0A890 CANNOT GO ON WHITE. It is the sunlit decking and it only works against the accent-wall dark. ⚠⚠ SINGULAR VOICE THROUGHOUT. NO CREW, NO TEAM, NO COMPANY "WE". CSLB shows his workers' compensation as EXEMPT - he certified on 2025-03-27 that he has NO EMPLOYEES. Writing a crew onto this page would contradict his own filing with the state. Grep this file and the HTML for "crew", "team" and "our workers" before any edit ships. It also happens to match the reviews, which name Dave personally in six of seven. ⚠⚠ THERE IS NO WORKERS' COMPENSATION ROW IN THE LICENCE BAND. He is exempt, and an exemption printed as a line item reads like a gap to a homeowner. It is disclosed in full in the licence note instead, where it can be explained. Same call as Erik Painting #17, the only other build that makes no WC claim. ⚠ THE REVIEWS ARE ALL OLD. Seven are three years old and the eighth is six and has no text. The rating is Google's own number and true, so it is printed - but NOTHING on this page frames the reviews as recent, and the letter names the gap outright rather than hiding it. --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; /* the logo's own ground - do not drift off this */ --pale: #F6F3F0; /* warm off-white, pulled toward the timber hue */ --ink: #1A1A1A; /* the logo's ink. on white 17.40 */ --muted: #5C5048; /* on white 7.79 */ --rule: #E4DDD6; --rule-d: #4A2E2E; --timber: #786048; /* the dominant tone in every photo. on white 5.89 */ --timber-d: #604830; /* hover. on white 8.51 */ --timber-l: #C0A890; /* DARK GROUNDS ONLY - 2.27 on white, unusable */ --deep: #301818; /* the reclaimed accent wall he built */ --stone: #D8C8BC; /* body text on the dark grounds. 10.17 */ --dim: #B09A8C; /* labels on dark. 6.18 */ --measure: 700px; --wide: 1180px; --s-sm: 8px; --s-md: 16px; --s-lg: 26px; --s-xl: 36px; --s-2xl: 56px; --sect: clamp(58px, 8vw, 96px); } * { 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.62; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; caret-color: var(--timber); } ::selection { background: var(--timber-l); color: var(--deep); } :focus-visible { outline: 2px solid var(--timber); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--timber); } .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: 22px; } .wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 22px; } /* ── Utility bar ──────────────────────────────────────────────────────── */ .util { background: var(--deep); color: var(--stone); font-size: 13.5px; } .util .wide { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; justify-content: center; padding-block: 9px; } .util b { color: #fff; font-weight: 600; } .util .dot { color: var(--rule-d); } /* ── Masthead. ⭐ WHITE, matching the logo's own flat #FFFFFF ground, so the JPG sits flush. No plate, no border around the mark. The only rule is the hairline UNDER the bar, which separates it from the hero. ─────────── */ .mast { background: var(--ground); border-bottom: 1px solid var(--rule); } .mast .wide { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; padding-block: 14px; } .mast img { width: 178px; height: auto; display: block; } .mast .right { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; } .mast .sub { color: var(--muted); font-size: 14.5px; } .mast .tel { color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .mast .tel:hover { color: var(--timber-d); text-decoration: underline; } /* ── Full-bleed photo hero. ⚠ padding-block:0 - it is a
and would otherwise inherit the generic section padding and open a dead band under the masthead (banked on Landers, build #26). ──────────────────────── */ .hero { display: grid; background: var(--deep); padding-block: 0; } .hero > img, .hero .scrim { grid-area: 1 / 1; } .hero > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; max-height: 600px; object-position: 50% 62%; } .hero .scrim { display: grid; place-items: center; text-align: center; padding: clamp(44px, 7vw, 86px) 22px; background: linear-gradient(180deg, rgba(24,12,8,.46), rgba(24,12,8,.84)); } /* ⚠ margin-inline:auto on BOTH, not margin:0. A max-width child inside a centred grid item sizes to the widest sibling and then sits flush LEFT without it - the bug Matt caught on Paso, build #24. */ .hero h1 { margin: 0 auto var(--s-md); color: #fff; max-width: 18ch; font-size: clamp(30px, 4.9vw, 54px); line-height: 1.06; letter-spacing: -0.032em; font-weight: 800; } .hero p { margin: 0 auto var(--s-xl); color: rgba(255,255,255,.94); font-size: clamp(16px, 1.9vw, 20px); max-width: 56ch; } .btn { display: inline-block; background: var(--timber); color: #fff; /* 5.89:1 */ font-size: 17px; font-weight: 700; padding: 15px 32px; border-radius: 4px; text-decoration: none; } .btn:hover { background: var(--timber-d); } /* ⚠ THE HERO BUTTON IS WHITE, AND IT HAS TO BE. Caught in the render, invisible in the source: the default timber fill passes contrast against its own white TEXT (5.89) and still disappeared, because the thing behind it is a warm brown scrim over a photograph of raw douglas fir. Timber on timber. Contrast ratios answer "can the label be read", not "can the button be found", and this build is the first where the palette is close enough to the photograph for that gap to matter. Same treatment as .strip, for the same reason. */ .hero .btn { background: #fff; color: var(--timber-d); } /* 8.51 on white */ .hero .btn:hover { background: var(--pale); } /* ── Sections ─────────────────────────────────────────────────────────── */ section { padding-block: var(--sect); } .band-pale { background: var(--pale); } h2 { margin: 0 0 var(--s-md); font-size: clamp(25px, 3.2vw, 35px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; max-width: 22ch; } h3 { margin: 0 0 var(--s-sm); font-size: 19px; font-weight: 800; letter-spacing: -0.018em; } p { margin: 0 0 var(--s-md); } p:last-child { margin-bottom: 0; } .muted { color: var(--muted); } .lede { font-size: 19px; } /* ── Three cards ──────────────────────────────────────────────────────── */ .cards { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); } @media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); } } .cards > div { border: 1px solid var(--rule); border-radius: 5px; padding: var(--s-lg); background: var(--ground); } .cards p { color: var(--muted); margin: 0; } .cards .cls { display: inline-block; background: var(--deep); color: var(--timber-l); /* 7.28:1 */ font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 9px; border-radius: 3px; margin-bottom: 10px; } /* ── Call strip. padding-block:0 - the section rule already spaces it. ── */ .strip { background: var(--timber); color: #fff; padding-block: 0; } .strip .wide { display: flex; flex-wrap: wrap; gap: var(--s-md) var(--s-xl); align-items: center; justify-content: space-between; padding-block: var(--s-xl); } .strip h2 { margin: 0; color: #fff; font-size: clamp(21px, 2.6vw, 27px); max-width: 26ch; } .strip .btn { background: #fff; color: var(--timber-d); } .strip .btn:hover { background: var(--pale); } /* ── Alternating feature rows ─────────────────────────────────────────── */ .feat { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; } @media (min-width: 880px) { .feat { grid-template-columns: 1.05fr 1fr; } /* reverse the tracks on a flipped row, or the two photos come out different widths (banked on Leo's, build #28) */ .feat.flip { grid-template-columns: 1fr 1.05fr; } /* ⚠ BOTH feature photos here are PORTRAIT (900x1200), so both rows carry .portrait. Without it a 3:4 image towers over its paragraph and opens a dead gap beside it - the #20 rule, and the bug caught in the Aaron Peel render. */ .feat.portrait { grid-template-columns: 0.72fr 1fr; } .feat.portrait.flip { grid-template-columns: 1fr 0.72fr; } } .feat + .feat { margin-top: var(--s-2xl); } .feat figure { margin: 0; } .feat img { border-radius: 5px; width: 100%; max-height: 560px; object-fit: cover; } .feat figcaption { margin-top: 10px; font-size: 14.5px; color: var(--muted); } .feat h2 { max-width: 19ch; } /* ── What customers wrote ─────────────────────────────────────────────── */ .says { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); } @media (min-width: 820px) { .says { grid-template-columns: repeat(2, 1fr); } } .says blockquote { margin: 0; padding: var(--s-lg); border: 1px solid var(--rule); border-radius: 5px; background: var(--ground); } .says p { color: var(--muted); margin: 0 0 12px; } /* ⚠⚠ LOAD-BEARING. The page footer is also a