Inner service hero — round 2 (A1, revised)

A1 picked, with the six changes Adi asked for. Round 1’s six options are still on the server at hero-inner-r1.html; open it beside this one to read the changes as changes (both use the .a1 namespace, so they cannot share a page).

The six changes.
#askeddone
1.tp — the slanted ::after is not needed, a straight line is enough The wedge is removed. The orange panel meets the photograph on a straight vertical edge. It was a 38px clipped triangle that had to be given z-index to paint at all, and it cut into the frame at head height.
2.in — too full, no space above or below It was 12px over: the type measured 236px inside a 300px band that already spent 76px on padding. Fixed at the cause — the band is now min-height, not a fixed height, so type can never squeeze the padding out again — and the padding went 38→48px with the rules at 16px.
3.ph — the photograph is too small; take the room from .cp 330×300 → 420×380: +27% wide, +27% tall, +61% area. The width came out of .cp and then out of .tp as well (change 5); the height out of the band.
4.cp — carry the same content as .call in home_v1 Lifted part for part: lead line, phone at display size, availability, two fields, the swarm button, the office note — centred, in that order. Two adaptations, both forced, both below.
5.tp is too wide 460 → 380, a 336px type column. The widest line the title actually sets is CAR ACCIDENT at 313.27px, so 336 leaves 22.7px and the wrap is unchanged. The 80px went to the photograph (20) and to change 6 (60).
6.cp needs a padding-left 60px. It is load-bearing, not decoration: the contact block’s own left edge — and so the left input field — was sitting flush against the photograph. Only the centred text looked as though it had air. Measured gap now 60.00px at every width.
The panels still close on the container exactly380 (type) + 420 (photograph) + 480 (contact) = 1280 — each bleeding to its own edge of the screen on top of that, so none of them drifts as the screen widens.
The two things that could not be copied straight across — and the one that could.
parthome_v1herewhy
the buttonbrown on orange — white label, 10.86:1 white, brown label — 10.86:1, orange swarm kept The panel is brown, so home_v1’s brown button is invisible on it. Filling it with brand orange instead would put a white 13px bold label on 3.03:1 — under the 4.5:1 floor for text that size. Inverting keeps the same ratio the button has on the homepage.
swarm particles9 × 10.5 — ratio 0.8579 × 10.392 — ratio 0.8660 Same arithmetic as the big hexagon: 9 / 0.8660254 = 10.392. home_v1’s pair is 1.0% off, which is small but it is the same mistake this sheet exists to stop making.
availability + office note#FBE3D8 on orange — 2.47:1 #FBE3D8 on brown — 8.84:1 Nothing changed but the ground under it. The tint that is a real contrast defect on the homepage band is comfortably legal here. The homepage still wants fixing — moving the content here does not fix it there.
What it costs on the first screen. Measured below the 93px header; a 700px viewport has 607px to give away.
breadcrumb stripbandhero totalleft for the page
round 141px300px341px266px
round 241px380px421px186px
The bigger photograph and home_v1’s contact block are both paid for out of the same 80px. If that is too much, the phone can come down from 54px and the band with it — say so and it is one number.
Still only Adi’s or the firm’s to settle (carried over from round 1):
Round 2 — A1, revised
A1The reference, mapped — revisedBrand orange · photograph · brownStraight edge between panel and photograph; the type given room; the photograph 54% bigger; and the contact panel carrying home_v1’s contact block part for part instead of a bespoke one.

Car Accident Claims

Injuries

Placeholder · November shoot
Talk to a real person now
250-888-0002
Free consultations for injury & estate litigation
Head office — Victoria · 6 offices across BC ↓

The orange block still carries only large type — the title at 38px and the sub-line at 20px bold — because white on brand orange is 3.03:1: it clears the 3:1 floor for large text and fails the 4.5:1 floor for anything smaller. All the small contact copy sits on brown (10.86:1). That is the same reason the reference’s own arrangement works: bright block for the title, dark block for the details.