# Contact Us — Round 1 reconcile (agent contact-r1, 2026-06-17)

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).
Browser engine: playwright slot. Measured desktop @1440, mobile @393.

## Desktop (frame 3121:23946)

| Section | Figma node | measured-vs-IR | fixed? | residual / note |
|---|---|---|---|---|
| Breadcrumb | Group 449 | Poppins 300/15 capitalize, Home #000, Contact Us #636262 — all match. Left edge our 48 vs Figma 68 (20px) | n/a (already correct) | breadcrumb left-edge is a site convention; within tolerance |
| Hero banner | 3121:23977 | Panel x22 w1381(Fig1397) h302 r15 #f4f4f8 ✓. H1 x88 y(panel)59 Poppins SemiBold 55px #2b286f capitalize ✓. **Contact items were mis-positioned: Delhi/NCR circle x789 vs Figma 610** (grouped-right w/100px gap) | YES | each item now `lg:absolute` at Figma panel-x — circles 60/588/1066 = Figma 82/610/1088 (−22 panel inset) EXACT. Icon circles transparent + navy border ✓ (desktop). No hover variant on items |
| Form card | Group 1044 (Rect 1223) | Navy 636×645 r15 #2b286f ✓. H2 "Appointment Form" Poppins Reg 38px white y41 ✓. Fields 469w×48h r6 #f4f4f8, pitch 69 ✓; **field block was 10px high (y118 vs 128)**; Submit 469×42 #ffcb05 Light20 ✓. Placeholders Poppins Light 20 #919191 TITLE-case | YES | mb-29→mb-39 (field1 y=128 ✓); inputs `capitalize` (TITLE: "Full Name") |
| Image panel | Group 1044 (Rect 1224 + "3 1") | **Grey panel was flex-1 645h stretch; Figma fixed 542w × 677h, offset up 32px** from navy card. Image hash af73a3e… CROP (object-contain→cover) | YES | `lg:w-542 lg:h-677 lg:-mt-32`, items-start; image object-cover object-bottom. Subject correct (CFS care team), matches Figma hash |
| State chips | Component 201 (Group 993) | Chips 50h r7 #2b286f/1w; All #ffcb05 Medium22, others white Light22 #2b286f TITLE ls-4%. **Order was alphabetical; Figma = All,Delhi,Gujarat,Haryana,Andhra,Assam,Bihar,Chandigarh,J&K / Jharkhand,MP,Maharashtra,Odisha,Punjab,Rajasthan,Telangana,UP,WB.** Padding px-5(20) vs Figma ~11 → chips ~18px too wide | YES | reordered to Figma; px-[11px]; gap-x 20 / gap-y 16. Widths now match IR rects ±2px. Hover navy/white verified firing (Delhi → bg#2b286f text#fff) |
| Map | Component 201 (Mask group) / Frame 1597884461 | **h714 vs Figma map image 553**; x40(Fig45) w1345(Fig1351) r15 ✓ | YES | `lg:h-553`. Iframe (interactive); +/−/gps map to native GMaps controls per project note |
| Header / Footer / Sticky | shared instances | reused canonical components (utility-bar, main-nav, footer, sticky-bar) | n/a | not re-reconciled this round (shared, page-unique work was the focus) |

### Deviations / open questions (desktop)
- **State-chip left alignment**: Figma row1 "All" sits at x=105 while row2 "Jharkhand" sits at x=40 (same group). The +65px row1 offset is a Figma layout anomaly row2 doesn't share. Kept both rows left-aligned at the section edge (consistent flex-wrap, CMS-correct). Deliberate deviation.
- Container max-width yields panels ~15px narrower than the Figma 1440-frame content (1381 vs 1397 hero, 542 grey, 1345 map) — site-wide convention; insets/positions match.

## Mobile (frame 3121:24843)

Visual order from the mobile screenshot (ground truth — the IR groups are a layered mockup with out-of-document y): breadcrumb → hero (grey panel: heading + 3 STACKED contact items) → navy Appointment Form → doctor image → state chips → map → footer. **This matches the current DOM stacking order** (no reorder needed).

| Section | measured-vs-mobile-IR | fixed? | note |
|---|---|---|---|
| Hero | Panel x24 w330(Fig344) h323(Fig320) r17 ✓. H1 Poppins **Bold 700 / 30px**, case ORIGINAL (no capitalize) ✓. Icon circles 30×30 **yellow #ffcb05 fill+border** ✓. Delhi/NCR label 12px, value 15px ✓ | n/a (already correct) | mobile heading case original (lg:capitalize only at desktop) ✓ |
| Form | Card x24 w330; H2 30px Reg ✓; fields 48h 15px ✓; Submit 42h ✓ | n/a | Figma mobile form card BLEEDS to 425w (x−16); ours contained 330. Deliberate deviation (consistent with inset hero panel; full-bleed navy would clash) |
| Doctor image | Figma mobile image (Mask group 3121:24885) 343×**304**; ours was min-h-360 | YES | mobile panel `h-[304px]`, object-cover |
| State chips | Figma mobile chips **31h, 15px, r7**, pad ~5–7; ours was 40h/16px/px-4 | YES | `h-[31px] text-[15px] px-2`; widths match (All 34, Delhi 51 ≈ Figma) |
| Map | Figma mobile map (C205 inner Mask group) **681h**; ours was 420 | YES | mobile map `h-[681px]` |
| Overflow | document.scrollWidth = 378 ≤ 393 | OK | no horizontal overflow |

## Commits
- `0c10a4d` hero contact-item positioning
- form-content fixes (folded into a concurrent agent commit a92098f — verified present in HEAD)
- state-chips order/padding (folded into 4ebd8eb — verified present in HEAD)
- `cc4c148` desktop map height 553
- `1799329` mobile chip dims + image/map heights

(Several mid-run `git commit` calls reported "nothing to commit" because a parallel agent
committing to master staged-all and absorbed my unstaged edits into its commits. All edits
verified present in `git show HEAD:html/contact-us.html`.)