# Contact Us — Round 3 reconcile (contact-r3)

Target: `html/contact-us.html` · Figma desktop `3121:23946` · mobile `3121:24843` · file `R6EY4TpNCvVqUEikM7Lof9`.
Method: coordinate measurement (Figma IR bbox/runs vs DOM getBoundingClientRect/getComputedStyle), normalized to Figma px. Hover states diffed against the component variant IR and verified to fire via computed-style read. Browser engine: playwright slot.

## Desktop (measured at 1440px)

| Section | Figma node | measured vs IR | fixed? | residual/question |
|---|---|---|---|---|
| Breadcrumb | Group 449 | Poppins Light 15px capitalize ✓ | n/a | — |
| Hero card | Hero Banner 3121:23977 | panel r15 #f4f4f8, h305 vs IR 302; h1 x67/y60 vs IR x66/y59, 55px w600 Poppins capitalize #2b286f ✓ | n/a (already correct) | card renders 1381 wide vs IR panel 1397 (~1%, px-[22px] on container) |
| Hero contact info | Component 204/205/206 | location x61/y176 (IR x60/y174); Delhi x595/y192 (IR x588/y184+icon3); Rest x1078/y195 (IR x1066). Label Medium 15px, value Light 23px #2b286f ✓ | n/a static; **hover wired** | +7..+12px x-drift on Delhi/Rest from ×1.0116 section scale (~1%) |
| Form — navy card | Group 1044 / Rect 1223 | navy 636×645 r15 #2b286f; grey panel 542×677 r15, offset up 32px (grey y7 vs navy y39) ✓ | n/a | — |
| Form — fields | Group 1046 | h2 "Appointment Form" Poppins Regular(400) 38px ✓; inputs h48 r6 #f4f4f8, gap 21px, placeholder Light 20px #919191 ✓; submit h42 r6 ✓ | n/a static; **hover fixed** | — |
| State chips | Component 201 / Group 993 | chip h50 r7 1px #2b286f border, Poppins Light 22px #2b286f, 2 rows gap 16px ✓; active "All" yellow+medium ✓ | n/a static; **hover fixed** | label order/active = CMS filter default (no active chip in static map component; "All"-default is sensible) |
| Map | Component 201 / Mask group | container h553 r15 ✓ | n/a | **deliberate deviation**: Figma static map image → live Google Maps iframe (per existing HTML comment; +/-/gps map onto native controls) |

### Hover deltas fixed (diffed against variant IR, each verified to fire)

1. **State chips** (set 3121:11765, rest 11766 → hover 11770): IR delta = rect fill transparent→**#ffcb05**, text weight Light(300)→**Medium(500)**, text stays #2b286f. HTML had a WRONG navy-bg/white-text invert (`hover:bg-[#2b286f] hover:text-white`). Fixed to `hover:bg-[#ffcb05] hover:font-medium` (text stays navy). Verified hover: bg rgb(255,203,5), color rgb(43,40,111), weight 500. ✓
2. **Submit button** (set 2284:11138, rest 11137 → hover 11136): IR delta = add **1px white inset stroke**, text weight Light→**Medium**. HTML had `hover:brightness-105` only. Fixed to `hover:font-medium hover:ring-1 hover:ring-inset hover:ring-white`. Verified hover: weight 500, white 1px inset box-shadow, bg stays yellow. ✓
3. **Hero contact icon circles** (Component 205 rest 11183 → hover 11182, Ellipse 83): IR delta = circle fill transparent→**#ffcb05** + stroke #2b286f→#ffcb05; text/icon unchanged. HTML left these unwired (`group` present, no hover rule). Fixed: added `group` to location div + `lg:group-hover:bg-[#ffcb05] lg:group-hover:border-[#ffcb05]` to all 3 icon spans. Verified hover: span bg+border rgb(255,203,5). ✓ (location uses the same shared span pattern.)

No horizontal overflow at 1440 (scrollWidth 1425).

## Mobile (measured at 393px)

| Section | Figma node | measured vs IR | fixed? | residual |
|---|---|---|---|---|
| Hero card | Frame 1597884734 / Rect 2 | r17 #f4f4f8; h1 Poppins Bold(700) 30px case=ORIGINAL (no transform) #2b286f ✓; card w330 vs IR 344 | n/a | card ~13px narrower than IR (px-6; ~4%) |
| Hero contact (stacked) | Component 213/214/215 | icon circles 30×30 fill+border #ffcb05 (yellow by default on mobile) ✓; location Light 15px; Delhi label Medium 12px / value Light 15px ✓ | n/a | mobile default = desktop hover state (yellow circle), as expected |
| Form card | Frame 1597884735 | navy r15 #2b286f w330; "Appointment Form" Regular 30px ✓; inputs h48 r6, placeholder Light 15px ✓; submit h42 text 20px ✓ | n/a | — |
| Image panel | Component 205 / Mask group | h304 ✓ | n/a | — |
| State chips | Component 205 / Frame 1597884723 | h31 r7 15px, wraps (4 rows) ✓ | n/a | — |
| Map | Mask group | container h681 ✓ | n/a | Figma has a featureless grey Rect 1212 (#f1f1f1) over the map bottom — no content; live iframe used instead |

No horizontal overflow at 393 (scrollWidth 378).

## Summary
- Desktop + mobile static geometry/typography/colors already matched the IR (no static fixes needed).
- Three hover states were WRONG/unwired and were corrected to the exact variant deltas, each proven to fire by computed-style read: state chips, submit button, hero contact icon circles.
- Deliberate deviation: the centres map is a live Google Maps iframe (Figma shows a static map image + featureless grey overlay rect); functional controls replace the static +/-/gps glyphs. Pre-existing decision, retained.
- Open question for client: the "All" state chip is active-by-default (yellow); the Figma map-attached chip strip shows no active chip in its rest state. Default-active "All" is the sensible exposed-filter behaviour but confirm if the client wants no default selection.