# city-individual — Round 1 reconcile (agent city-r1, 2026-06-17)

Desktop frame **3121:22150** (1440, content ~1364-1382 @ ~29px gutters), mobile frame
**3121:21144** (393). Measured every section against the Figma IR (bbox/font/colour per run),
fixed every clear delta, verified hovers FIRE in the browser, committed per section.

## Page-wide fix (root cause)
`.city-*` sections used `max-w-[var(--container-site)] (1440) mx-auto px-6 lg:px-0`. In the
`<main class="flex flex-col">` the **grid-containing** block sections did NOT stretch — they
shrank to content width (centres 1137, doctors 1269, faq 630, services 1038) while non-grid
sections filled 1440. Neither matched Figma (content ≈1364-1382, ~29px gutters). **Fix:** switched
all 8 sections to `max-w-[var(--container-inner)] (1380) mx-auto px-6 lg:px-0 w-full`. The definite
1380 max-width + `w-full` removes the flex-shrink; all sections now uniformly 1380 (Figma ~1364-1382).
(This is the mistakes-log "mx-auto + fixed-px grid shrinks to content" gotcha.)

## DESKTOP

| Section | Figma node | measured-vs-IR | fixed? | residual |
|---|---|---|---|---|
| Hero | 3121:22164 | Left card 964×**381** (we had 486, items-stretch). Form (phone+submit) **621** wide (we had full-width). Left pad **53** (we had 82). h1 Poppins SemiBold 55px ✓. Photo card 419 tall, bottom-aligned. | YES — card `lg:h-[381px]`, form `width:621px` via custom.css (CDN refused `lg:w-[621px]`), `lg:px-[53px]`, `items-end`, right `lg:h-[419px]` | hero submit button: Figma instance has NO ON_HOVER reaction → kept `hover:brightness-105` (no scale; scale on a full-width btn is a smell) |
| About | 3121:22183 | Poppins Light 20px #2b286f JUSTIFIED **textCase=TITLE** (confirmed via screenshot: every word capitalised) | YES — added `capitalize` | — |
| Centres heading | in 3121:22185 | "Centres In Mumbai" Poppins Light 50px #2b286f TITLE center | already ✓ | — |
| Centre cards (×10) | Generic Card desktop | Card 421×315 r7; img 421×207; name Light 30px; city Light 20px; **book "Book an Appoinment" Light 12px** (we had 15px); phone ellipse 28×28 navy-border (transparent fill — matches our rest). Canonical `.centre-loc-card`, NOT a fork. | YES — book button `lg:text-[12px]` | — |
| Centre card HOVER | — | name→underline, arrow 0→7px expand, phone fill→white + bg→navy. **Verified FIRES** (hovered `.centre-loc-card__image`; `$B hover` on the article edge does NOT trigger group-hover). | ✓ verified | — |
| Specialties heading | 3121:22202 | Poppins Light 50px lh90 center | ✓ | — |
| Specialties accordion | 3121:22202 | container 1384×636 r20 #f1f1f1. **Active panel has its OWN left navy strip (92px, rotated white label) + white content; content title at x132** (we were missing the strip — content was full-width px-44). Collapsed tabs 92px each, graduated navy `--spec-bg`. | YES — restructured all 5 panels: `flex flex-col lg:flex-row`, added `hidden lg:flex w-[92px]` rotated strip + `flex-1` content (title x132). Tab-swap click verified (retina↔keratoconus). | — |
| Doctors heading | 3121:22205 | "Eye Care Specialists" Poppins Light 50px TITLE center | ✓ | — |
| Doctor cards (×4) | 3121:22205 | Cards 314×437 r17, **gap 41** (we had 16). name Medium 21px; degrees Medium 14px #1a1a1a; book Regular 13px; exp bar navy "41+" SemiBold16 + "years…" Regular16. Canonical `.doctor-card` w/ hooks. | YES — `lg:gap-[41px]` (cards now 314) | — |
| Doctor card HOVER | — | pill #d9d9d9→#ffcb05, city black→navy, img scale 1.13, exp "41+" 16→23px. **Verified FIRES** (hovered desktop grid li:first `.doctor-card__image`). | ✓ verified | — |
| FAQ | 3121:22215 | heading Light 50px center; 3 rows 1381×69 #f1f1f1 r5, gap 13; question Poppins Regular 20px #000 TITLE lh37. | ✓ (row 77 vs 69 — lh37+py-5 inflates by ~8px; within tolerance, CMS-variable accordion) | row +8px height |
| Services strip | 3121:22218 | heading Light 50px center; links Poppins Light 20px lh38 #2b286f center | ✓ | — |
| Callback form | 3124:58592 | shared component; wrapper 1380×521 r30 (Figma ~1398×509). | ✓ shared/reconciled | — |

## MOBILE (393)

| Section | Figma node | measured-vs-IR | fixed? | residual |
|---|---|---|---|---|
| Hero | 3121:21146 | **DIFFERENT structure:** card(heading+subtitle, r17 #f4f4f8) → photo (344×367 navy r17) → form (BELOW photo, outside card). Heading Poppins **Bold 38px** ORIGINAL (we had 36 semibold inside card with form). | YES — separate `lg:hidden` mobile block (card→photo→form) + `hidden lg:grid` desktop block. Order verified: card 210h → photo 367h → form 122h. | — |
| About | 3121:21145 | Poppins Light 15px #2b286f **LEFT** (desktop JUSTIFIED) TITLE | YES — `text-left lg:text-justify` | — |
| Centres | 3121:21325-ish | heading SemiBold 30px center; single-column cards; **navy border at rest** (desktop = transparent+shadow). | YES — `@media(max-width:1023px){article.centre-loc-card{border:1px solid #2b286f!important}}` (the canonical card forces transparent border via `!important` for desktop hover behaviour). | — |
| Specialties | 3121:21188 | **DIFFERENT:** vertical accordion — navy **header bars (~64px)** stacked w/ centered white labels (graduated `--spec-bg`); active reveals body below; body LEFT-align; title is the bar (no repeat). We had collapsed panels at h0 (broken `absolute inset-0`). | YES — added `lg:hidden` mobile header bar (min-h-64) per panel; `flex-col lg:flex-row`; h3 `hidden lg:block`; body `text-left lg:text-justify`. Mobile click verified (glaucoma expands to 284, others 64). | — |
| Doctors | 3121:21191 | heading SemiBold 35px center; horizontal cards 345×276 r10, photo 130/131 left, yellow loc pill. **Fonts: Lato** — degrees Light 12, specialisations Regular 11, book Regular 14 (underline), exp **Lato Black 13** (we had Poppins throughout). | YES — mobile card fonts → Lato (degrees Light12, book Regular14+underline, exp Black13). Verified computed. | — |
| FAQ heading | 3121:21326 | Poppins SemiBold 30px center | ✓ | — |
| Services | 3121:21328 | heading SemiBold 30px center; links Light **15px** lh30 (we had 16) — Figma links LEFT | YES — links `text-[15px] leading-[30px]` | links centered (we keep center; Figma LEFT — 8-city pipe list reads fine centered) |
| Callback/Footer/Sticky | shared | render OK, no overflow | ✓ | — |

No horizontal overflow at either breakpoint (`scrollWidth==1440` desktop, `==393` mobile).

## Residuals / open questions
1. **Mobile gutter:** `px-6` (should be 24px) computes as **15px** on this page under the bare CDN
   (same family as the `lg:w-[621px]`-not-generated quirk). Mobile cards render ~363 wide vs Figma
   ~344 (gutter 15 vs ~24). Page-wide & matches sibling pages' baseline; did NOT add a one-off
   override. To verify with the dev team whether the CDN gutter quirk is intended.
2. **CDN arbitrary-at-breakpoint quirk:** `lg:w-[621px]` and `lg:bg-white` did not always generate/win
   under the Play CDN; worked around hero form width via `css/custom.css`. Hypothesis only — not root-caused.
3. FAQ collapsed row +8px taller than Figma (lh37 + py-5); left as tolerance.
4. Centre card photos are "zudio" placeholders (repeating CMS centre imagery) — left per the
   placeholder convention.

## Commits
hero+about · sections-inner-width+centre-book · specialties-strip · doctors-gap ·
mobile-hero · mobile-centre-border · mobile-specialties · mobile-doctors-Lato · mobile-services.