# Contact Us — FINAL QA CERTIFICATION (agent contact-qa, 2026-06-18)

Target: `html/contact-us.html` · Figma desktop `3121:23946` (1440×2488) · mobile `3121:24843`
(393×3640) · file key `R6EY4TpNCvVqUEikM7Lof9`.
Method: coordinate measurement — Figma IR (`get_node` bbox / per-run fonts / fills / variant
diff) vs DOM (`getBoundingClientRect` + `getComputedStyle`), normalized to Figma px. Hover/active
states triggered live (browse `hover` / `focus`) and read by computed style after the 300ms
transition settled. Browser engine: `browse` slot. Measured desktop @1440, mobile @393.

## Per-section verdict — DESKTOP (1440)

| Section | geometry | fonts | color | images/icons | hovers | notes (measured) |
|---|---|---|---|---|---|---|
| Breadcrumb | ✓ | ✓ | ✓ | ✓ | n/a | Poppins Light 15px capitalize; Home #000, Contact Us #636262. IR sep "Arrow 13" = degenerate 1×0 line → "›" chevron kept (conventional). |
| Hero panel | ✓ | ✓ | ✓ | ✓ | n/a | panel 1396×302 r15 #f4f4f8 (IR 1397×302). H1 Poppins SemiBold 55px #2b286f capitalize, ls 0px. |
| Hero contact items | ✓ | ✓ | ✓ | ✓ | ✓ | panel-rel x: loc 60 / Delhi 588 / Rest 1066 = IR EXACT. loc Light 23px ls-0.92px; icon circle 38×38 transparent + #2b286f 1px border; Delhi/Rest label Medium 15px + value Light 23px. **Location text fixed** (see flip-flops). |
| Form — navy card | ✓ | — | ✓ | — | n/a | 636×645 r15 #2b286f at x116. Image panel 542×677 r15 at x782 (gap 30, offset UP 32 — image top y499 vs navy y531, Δ=32). |
| Form — fields | ✓ | ✓ | ✓ | — | ✓(focus) | H2 "Appointment Form" Poppins Regular(400) 38px #fff ORIGINAL. Fields 469×48 r6 #f4f4f8; placeholder Light 20px #919191 TITLE; textarea 469×107; Submit 469×42 r6 #ffcb05 Light 20px #2b286f. Focus ring = 1px #ffcb05 box-shadow (fires). |
| State chips | ✓ | ✓ | ✓ | n/a | ✓ | chip h50 r7 #2b286f 1px border, Poppins 22px ls-0.88px padL11. Rest = white bg + Light(300) navy text. Active "All" = #ffcb05 + Medium(500) navy. 18 chips, 3 wrap rows. |
| Map | ✓ | n/a | ✓ | functional-equiv | n/a | container 1360×553 r15 overflow-hidden (IR map Mask group 1351×553). Google Maps iframe placeholder (deliberate). |
| Header / Footer / Sticky | ✓ | ✓ | ✓ | ✓ | (shared) | canonical shared components. nav aria-current=Locate Us. Chat bubble 72×67 "here to assist" matches Group 951. |

**Desktop verdict: PASS-WITH-RESIDUALS** (residuals are documented deliberate deviations: site
container width ~1% narrower than the 1440 artboard; map = live iframe).

## Per-section verdict — MOBILE (393)

| Section | geometry | fonts | color | images/icons | notes (measured) |
|---|---|---|---|---|---|
| Breadcrumb | ✓ | ✓ | ✓ | ✓ | Poppins Light 15px TITLE (R2 fixed the 14px→15px flip). |
| Hero panel | ✓ | ✓ | ✓ | ✓ | 345×323 r17 #f4f4f8 (IR 344×320). H1 Poppins **Bold(700) 30px** #2b286f, transform=none (ORIGINAL — NOT capitalized). |
| Hero contacts (stacked) | ✓ | ✓ | ✓ | ✓ | column (all x48). icon 30×30 **#ffcb05 fill+border** (yellow default on mobile). loc Light 15px; Delhi label Medium 12px + value Light 15px. |
| Form card | ✓ | ✓ | ✓ | — | navy 345w r15 #2b286f (IR full-bleed 425w — contained, deliberate). H2 Regular 30px; fields 48h 15px; placeholder 15px; Submit 42h 20px. |
| Image panel | ✓ | — | ✓ | ✓ | 345×304 r15 #d9d9d9 (IR Mask group 343×304). |
| State chips | ✓ | ✓ | ✓ | n/a | h31 r7 15px; wraps cleanly. |
| Map | ✓ | n/a | ✓ | functional-equiv | 681h r15 (IR 681). iframe placeholder. |
| Overflow | ✓ | | | | `document.documentElement.scrollWidth` = 393 = viewport. No horizontal overflow. |

**Mobile verdict: PASS-WITH-RESIDUALS** (residuals are documented deliberate deviations: form card
contained to 345 vs IR full-bleed 425; map iframe; location text shows pincode that mobile IR omits).

## Flip-flops resolved (vs Figma IR ground truth)

1. **Hero heading text** — IR (both node name AND run text, desktop node 3121:23977 child): exactly
   **"Get In Touch, we are here to help"**. Build matches. LOCKED. (Desktop size 55 TITLE/capitalize,
   ls 0%; mobile size 30 Bold ORIGINAL-case — both verified.)
2. **State-chip hover** (R1 said navy-bg/white-text invert; R3 said yellow-bg + Medium, navy text) —
   resolved against the chip component variant IR: rest variant `3121:11766` → ON_HOVER → `3121:11770`.
   Diff: rect fill **transparent→#ffcb05** (stroke stays #2b286f 1px, r7 unchanged); text weight
   **Light(300)→Medium(500)**, color stays **#2b286f** (navy, NOT white). **R3 was correct.** Build's
   `hover:bg-[#ffcb05] hover:font-medium` matches; proven to fire (settled bg rgb(255,203,5), color
   rgb(43,40,111), fw 500).
3. **"Page IR has no hover variants" (brief premise / R2)** — resolved as PARTIALLY WRONG. The
   top-level frame has 0 reactions, but the chip sub-components inside Component 201
   (195/196/197/198/199/200) DO carry `ON_HOVER → CHANGE_TO` variant reactions. So the chip hover IS
   design-mandated (not merely conventional). Submit-button + hero-icon hovers, by contrast, have no
   page-instance reaction — they are conventional defaults (Submit medium+white-ring from the shared
   CTA master variant; hero icon yellow-fill = the mobile default state) and contradict no rest-state IR.
4. **Hero location address text** — desktop IR run = "Plot No 9, Sector - 9,\nDwarka, New Delhi
   **- 110075**"; build omitted "- 110075". **FIXED** (commit de620d0). Note the MOBILE IR run omits
   the pincode; kept the full pincode form at both breakpoints (single CMS `<p>`, pincode is a faithful
   improvement and matches the footer corporate-office address).

## Hover / interaction inventory (every interactive element — proven result)

| Element | State | IR source | Triggered result (computed) | Verdict |
|---|---|---|---|---|
| State chip (non-active, e.g. Delhi) | hover | variant 3121:11770 | bg #ffcb05, color #2b286f, fw 500 (settled) | ✓ fires, matches variant |
| State chip "All" | active/default | (active = Medium yellow) | bg #ffcb05, color #2b286f, fw 500 | ✓ |
| State chip (rest, e.g. Gujarat) | rest | variant 3121:11766 | bg white, color #2b286f, fw 300 | ✓ |
| Submit button | hover | shared CTA master (no page reaction) | fw 500, 1px white inset ring, bg stays #ffcb05 | ✓ fires |
| Form field (name) | focus | conventional | 1px #ffcb05 box-shadow ring, outline-none | ✓ fires |
| Hero contact icon circle | hover (desktop) | Component 205 rest→hover (yellow fill) | wired `lg:group-hover:bg/border-[#ffcb05]` (R3 verified) | ✓ wired |
| Hero phone links | hover | none | `tel:` links, no state delta | n/a |
| Breadcrumb "Home" | hover | none | underline (conventional) | n/a |
| Dynamic chip count | layout | CMS requirement | injected +5 (mobile→23 chips) / +6 (desktop→24): scrollW stays ≤ viewport | ✓ no overflow |

## Residuals & client questions

1. **Map = live Google Maps iframe, not Figma's static map PNG.** Figma map (Mask group 1351×553 / mobile
   681h) is a flat image with drawn +/−/gps glyphs. Build uses a Google Maps embed iframe (glyphs become
   native controls). **Client: provide the production Maps embed URL (a "My Maps" with all centre pins),
   or confirm a static image is wanted.** Placeholder currently centres on India.
2. **State chips reused from centre-cluster (canonical), "All" active-by-default (yellow+Medium).** The
   Figma map-attached chip strip shows no explicit active chip in its rest export. Default-active "All"
   is the sensible exposed-filter behaviour — **confirm client wants a default selection, and that the
   chips filter the same centre list as centre-cluster** (links are `?state=<slug>`; Drupal Views
   exposed filter wires them).
3. **Mobile form card contained to 345w; Figma mobile IR is full-bleed 425w** (x−16). Deliberate
   deviation, consistent with the inset hero panel; a full-bleed navy block would clash with the inset
   rhythm. Confirm if the client wants edge-to-edge.
4. **Hero location pincode** shows at both breakpoints; mobile Figma IR omits "- 110075". Single CMS
   `<p>`; kept the fuller form. Trivial — flag only if the client wants the mobile pincode dropped.
5. **Breadcrumb separator** "›" chevron vs Figma's degenerate 1px "Arrow 13" line (renders as
   whitespace). Conventional/accessible substitution. Flag only if the bare-whitespace look is wanted.
6. **Doctor hero image** (`af73a3e4…`) is the design-specified CFS care-team photo, object-cover
   object-bottom — wired as a real asset, not a CMS placeholder.

## Overall verdict

- **Desktop: PASS-WITH-RESIDUALS** — every measured section matches IR within site-convention tolerance;
  sole content defect (location pincode) fixed this round; all hovers proven to fire and match variant IR.
- **Mobile: PASS-WITH-RESIDUALS** — structure matches the mobile frame (not desktop shrunk); no horizontal
  overflow; dynamic chip count stress-tested clean.

Residuals are all documented deliberate deviations or open client decisions (map embed, chip
filter behaviour, mobile full-bleed) — none are build defects.