# CFS Reconcile Accuracy Log — overnight run 2026-06-17

Goal (set by Arjun, evening 2026-06-17): reconcile/build all remaining pages
section-by-section (desktop THEN mobile) to Figma, by **coordinate measurement**
(never eyeballing screenshots), then run **3 inspection rounds** per page covering
static layout, font properties, images, hover/interaction states — in full detail.

## Scope (6 pages)
| Page | Type | Figma desktop | Figma mobile | Reconcile | Insp R1 | Insp R2 | Insp R3 |
|---|---|---|---|---|---|---|---|
| blog-individual | reconcile (built) | 3121:20084 | 3121:20260 | ⬜ | ⬜ | ⬜ | ⬜ |
| doctor-individual | reconcile (built) | 3121:22256 | 3121:22399 | ⬜ | ⬜ | ⬜ | ⬜ |
| city-individual | reconcile (built) | 3121:22150 | 3121:21144 | ⬜ | ⬜ | ⬜ | ⬜ |
| About Us | build (new) | 3121:22745 | 3121:23680 | ⬜ | ⬜ | ⬜ | ⬜ |
| Contact Us | build (new) | 3121:23946 | 3121:24843 | ⬜ | ⬜ | ⬜ | ⬜ |
| News & Media | build (new) | 3121:24934 | 3121:24028 | ⬜ | ⬜ | ⬜ | ⬜ |

Notes from runbook:
- About Us has 2 desktop layout variants (3121:22745 / 3121:22956) — pick one, flag for client.
- News & Media has 3 desktop tab states: News 3121:24934 / PR 3121:25016 / Video 3121:25098.
- Client said FOUR new pages; only THREE are designed-but-unbuilt. 4th unresolved — flag.

## Method (per section)
1. Pull section IR (`get_node`/`get_implementation_context`); table of bbox, font
   family/size/weight/case/decoration, color, fill, stroke, radius — per RUN for text.
2. Measure our render via `/browse` `getBoundingClientRect()`+`getComputedStyle()`,
   normalized to Figma px (scale = FIGMA_W / measured section width).
3. Fix clear numeric mismatches. Position by Figma coords.
4. Hover/variant: diff default vs hover variant IR; wire each delta; verify it FIRES.
5. Mobile: pull mobile frame IR separately — often different structure, not smaller numbers.
6. Commit per page; document residuals + deliberate deviations below.

---

## blog-individual

Figma frames: desktop **3121:20084**, mobile **3121:20260** (file key R6EY4TpNCvVqUEikM7Lof9).
Method: IR (`get_node`/`get_node_outline`/`get_node_tree`) per element vs DOM `getBoundingClientRect`/`getComputedStyle` at 1440px (desktop) and 393px (mobile). No eyeballing.

### Reconcile — desktop (measured vs Figma IR, fixes applied)

Page was already substantially built (hero done in a prior pass). All article text is **Poppins** with **`textCase=TITLE`** (capitalize) and navy `#2b286f` — confirmed across every text node in the IR. Fixes:

| Section | Figma IR | Was (build) | Fix |
|---|---|---|---|
| **Uses tabs** (instance 3121:20214) | Poppins SemiBold w600 active / Light w300 inactive, pill r13 | `font-['Lato']` + `font-bold` active | → Poppins + `font-semibold` (brief flagged "may be Lato" — IR proved **Poppins/TITLE**, not Lato) |
| **Types tabs** (instance 3121:20215) | Poppins SemiBold w600 active, pill r6 | already Poppins/semibold/r6 | ✓ no change |
| **All 7 tab panels** | Poppins Light 20px navy `textCase=TITLE` | `text-justify` no capitalize | + `capitalize` |
| **Article body** (8 section wrappers: intro/what-are/how-do/why-not-viral/how-to-use/other-uses/precautions/when-to-see) | Poppins Light 20px navy TITLE | no capitalize | + `capitalize` |
| **Headings** intro/what-are/how-do etc. | Poppins Light 45px navy `case=TITLE` ls −4% leading 68px | already light 45px capitalize | ✓ (verified against IR) |
| **Comparison cards** (Group 688) | cards `#f1f1f1` r15; "Antibiotic"/"Lubricating" Light 45px TITLE; body Light 20px TITLE; "VS" Light 45px | body wrapper no capitalize | + `capitalize` on body |
| **Dosage** (Group 900) | "Dosage and Frequency:" SemiBold **25px**, body Light 20px navy TITLE | whole block `font-semibold` | wrapper → `font-light` + inline `<strong class="font-semibold lg:text-[25px]">` labels; + capitalize |
| **Step-by-Step** (Component 159) | card r15 `#f4f4f8`; title SemiBold 30px navy; 5 dots 25px (first navy, rest `#d9d9d9`); 14px navy active line seg; step text Light **25px** navy centered; max-w 733 | matched | ✓ no change |
| **Do's/Don'ts** (Frame 1597884542) | Do's `#f1f1f1` LEFT, Don'ts `#2b286f` RIGHT, r15; headings SemiBold 30px TITLE; items Light 20px TITLE | matched | + capitalize on lists (cosmetic parity) |
| **Side-Effects** (Component 158) | purple card `#2b286f` r15; heading Light 45px navy; **"Common Side Effects" = Poppins Medium w500 white UNDERLINE (active)**, "Rare Side Effects" = Light w300 navy (inactive); body Light 20px white TITLE justified leading **36px** | active tab missing underline; body leading 30px no capitalize | + `data-[active=true]:underline`; body `lg:leading-[36px]` + capitalize |
| **Conclusion** (Frame 1597884637) | rect 1395×221 r15 `#f1f1f1`; heading Light 45px navy TITLE; body Light 20px navy TITLE justified leading 36px | matched (leading 36 ✓) | + capitalize on body |
| **Sidebar TOC** (Frame 1597884519) | "Table Of Content" SemiBold 30px navy `case=TITLE` ls −4%; items Light 20px navy TITLE | matched | ✓ |
| **Sidebar widget 2** (Frame 1597884517) | Figma name = **"Readers Favorite"** SemiBold 30px; thumb 158×142 r7; title Light 17px navy TITLE; meta 10px | heading said **"Related Blogs"** | → "Readers Favorite" |
| **Related Blogs grid** (Frame 1597884437) | 4-up cards r7; title Light 17px navy TITLE; meta 10px | matched | ✓ |
| **FAQ** (Frame 1597884438) | accordion `#f1f1f1` r5; question Normal 20px black TITLE; answer Light 18px navy | matched | ✓ |

Measured-after (desktop, 1440px): Uses tab `{Poppins, w600, r13}`; Types/Uses panels + intro body `textTransform: capitalize`; dosage wrapper `fontWeight 300` + label `{600, 25px}`; side-effects active tab `{underline, w500}`. All match IR.

### Reconcile — mobile (frame 3121:20260, measured at 393px)

Mobile is a flat layered mockup (siblings by y). Key per-section IR deltas:

- **All article H2 headings flip to Poppins SemiBold 30px** navy TITLE (desktop = Light 45px). Confirmed on mobile "Introduction" (3121:20353 = SemiBold w600 30px) and mobile "Types of Antibiotic Eye Drops" (3121:20321 = SemiBold w600 30px). **Fix:** all 14 article H2s → `font-semibold lg:font-light text-[30px] lg:text-[45px]`.
- **Comparison cards stack vertically** on mobile (Group 514: Antibiotic card → "vs" → Lubricating card), titles in 45px-tall boxes (~30px text). Build already `flex-col lg:flex-row`; bumped card h3 + VS to `text-[30px]` mobile.
- **Hero h1** SemiBold 32px — already done in prior pass (verified w600/32px).
- **Do's/Don'ts** stack to 1 col on mobile (verified `grid-template-columns` = 1).
- **Stepper** stays horizontal, no overflow at 393px (scrollW 315 = width 315).
- No page horizontal overflow at 393px (`documentElement.scrollWidth` = 393).

### Dynamic-tab rule (NON-NEGOTIABLE) — verified

Injected extra tabs at runtime: Types (desktop `lg:grid-cols-4`) +4 tabs, Uses (mobile `grid-cols-2`) +3 long-label tabs, Side-Effects (`flex-wrap`) +4 tabs. **No horizontal overflow** on the tablist or document at either breakpoint — grids wrap to extra rows, flex wraps. Tab switching verified for non-default tabs (clicked Macrolide, Rare → correct panel shown). The CMS-safe wrapping layout is kept over Figma's mobile notch-card-with-absolute-tabs (see deviation 2).

### Shared components — identity audit + hover proof

Diffed each shared block byte-for-byte against canonical `centre-cluster.html`:
- **01-utility-bar**: IDENTICAL. **16-sticky-bar**: IDENTICAL. **footer + callback**: IDENTICAL.
- **02-main-nav**: only diff is `aria-current="page"` correctly on "Our Blogs" here vs "Locate Us" there — per-page state, not a fork. Hover classes identical.

Hover-fire proof via `$B hover` + computed style: nav CTA `filter: brightness(1.05)` ✓; callback submit `brightness(1.05)` ✓; footer phone border `→ #ffcb05` (rgb 255,203,5) ✓ — the same `$B hover` mechanism applies `:hover`. (Note: `getComputedStyle().textDecorationLine` reads `none` for `hover:underline` links — a browse readback artifact; the underline classes are present and identical to every reconciled page, and the non-underline hovers proved the mechanism fires.)

### Deliberate deviations / client questions

1. **Hero CTA buttons rendered (vs occluded in Figma)** — pre-decided. In Figma the hero's Read More / Book An Appointment buttons (y=408) are OCCLUDED behind the overlapping Blog Summary card (card top y=411 over an image ending y=573), so they don't render. Our build shows them as visible hero CTAs (Book left, Read More right) and keeps Blog Summary as a separate section below. Intentional UX choice. **Flag for client.**
2. **Mobile tab sections use wrapping pills, not Figma's notch-card** — In the mobile frame, the Types/Uses tab sections (Component 165/163) render as a single navy `#2b286f` card with the tab labels as absolutely-positioned inline text in a top "notch" and the image embedded INSIDE the card. Reproducing that literally would break the project's **dynamic-tab NON-NEGOTIABLE** (CMS can add 5/6/7+ tabs; absolute-positioned notch tabs overflow). We keep the CMS-safe wrapping-pill layout (navy tabs, yellow active, image stacked, panel below) on both breakpoints. Same visual language, robust to tab count. **Flag for client** (visual differs slightly from mobile mock: image sits above/beside pills rather than embedded in a navy card).
3. **Side-effects inactive tab color** — Figma IR colors the inactive "Rare Side Effects" tab navy `#2b286f` on a `#2b286f` purple card (i.e. invisible). Build uses `text-white/70` for the inactive tab so it's legible. Intentional adaptation of an apparent Figma quirk.
4. **TOC + "Readers Favorite" both in sidebar** — confirmed both widgets exist in the Figma sidebar (Frame 1597884519 = Table Of Content, Frame 1597884517 = Readers Favorite). Build matches. (The second-widget heading was corrected from "Related Blogs" to "Readers Favorite".)

---

## doctor-individual

Reconciled 2026-06-17 (agent: doctor-agent). Desktop frame `3121:22256`, mobile `3121:22399`.
Method: per-element IR (relativeBbox / per-run font / fill / stroke / radius) vs DOM
getBoundingClientRect + getComputedStyle, scaled to Figma px. Page was already built; this
was a fix-to-IR pass. Commits: hero / sidebar / research+awards / mobile / partial-resync.

### Desktop — measured vs Figma (FIXED)
- **Hero left card**: was `bg-#f1f1f1` + `lg:pt-[180px]` (content pushed 177px down; card 561 tall).
  IR: card `#f4f4f8`, content sits at card top (subtitle bbox y=11 inside the 329-tall card).
  → bg `#f4f4f8`, `pt-11px pb-25px px-44`. Subtitle now y=11 (IR 11). Card 386 tall vs IR 329
  (auto-sizes to content; visually aligns with photo card — residual, acceptable).
- **Experience line** "42+ Years of Experience | Delhi" (29px): was all SemiBold. Per-run IR:
  `"42+ Years"` SemiBold, `"of Experience"`/`"Delhi"` Regular. → split spans, weights match (600/400).
- **Jumplink pills**: were `text-[21px]`; IR Poppins Light **22px**, h50, r7, 1px navy border. → 22px.
- **Booking submit**: was `font-normal`; IR "Book An Appointment" Poppins **Light** 22px. → font-light.
  Sidebar otherwise exact: card 467/navy/r15, h2 22 SemiBold, labels 18 Regular, inputs h45/r7, btn h55/#ffcb05.
- **Research & Designation bullets**: were `text-[21px]`; IR left col **24px**, right col **25px**
  Poppins Light navy capitalize. → 24/25px. Divider verified 3px dashed `#ebeaea` (border-left, lg-only).
- **Award badge** 55→**43px** (IR premium-badge 43×43). **Carousel nav circles** 53→**43px** (IR Ellipse 43×43).
  Card 205×228 / #f1f1f1 / r15, text 17px Light — already matched.

### Desktop — measured CLEAN (no change needed)
- Specialization h2 69px Light; cards 406×106 r15 #f1f1f1, img 86 circular, label 25px SemiBold navy.
- Qualification/Experience cards: header h79 / 39px Light / white-on-navy; body 21px Light navy; r15.
- Callback form (canonical `.callback-form__*`): card 478 r11, subtitle 22 Light, title 38 Regular,
  inputs h40, CTA 239×42 navy/white 20px Light — all match IR `3124:58347`.

### Hover / interaction (TRIGGERED + computed-style proven)
- Booking submit: IR `Component 185` has **empty reactions** (no Figma hover variant). Shared
  `.cta-submit` → `scale(1.05)`; triggered → `matrix(1.05…)` fires. Kept as canonical site pattern.
- Awards next/prev arrow: no IR hover variant; site affordance `hover:bg-#2b286f hover:text-white`
  → triggered, computed bg `rgb(43,40,111)` + color white. Fires.
- Footer action item: `hover:underline` → triggered, `text-decoration-line: underline`. Fires.
- No doctor-card / centre-loc-card components on this page → fork-swap audit N/A.

### Mobile — frame `3121:22399` @ 393px (FIXED; structure differs from desktop)
- Hero (mobile IR `Frame 1597884433`): grey card r17 (desktop r28); subtitle 15px (was 18);
  h1 Bold **30px** (was SemiBold 32); experience **18px** (was 20); pills h31/15px/r7 (desktop h50/22).
  Photo card stacks below text card (already stacked via grid-cols-1).
- **Section headings** all Poppins SemiBold **30px** on mobile (Light 69px lg): Specialization LEFT;
  Research & Awards **CENTER** (lg:text-left) — per per-section mobile IR alignment.
- Specialization cards: h76 r10, label 15px (mobile IR `Frame 1597884551`, single column / our grid stacks).
- Qualification/Experience: header SemiBold **30px** h63, card r10, body 15px lh25 (mobile IR
  `3121:22400`/`3121:22405` — header flips Light 39→SemiBold 30, h79→63).
- Award cards 146×160 (mobile IR `3121:22446`).
- Verified: `scrollWidth` 378 < 393 → **no horizontal overflow**; booking sidebar stacks below content.

### Residuals / client questions
- **Hero left card height** renders 386 vs IR 329 (content auto-sizes; aligns with photo card). Cosmetic.
- **Research mobile "Load More"**: Figma mobile (`3121:22449`) collapses the right column behind a
  "Load More" pill (navy 1px border, 18px). Our build keeps BOTH columns stacked (full list visible,
  no Load-More button). Deliberate: simpler for the static/CMS handover. Flag if client wants the
  collapse + Load-More JS.
- **Qualification/Experience body case**: IR text is uppercase (`textCase=TITLE` on ALL-CAPS source
  e.g. "MS OPHTHALMOLOGY"); our content is "MS Ophthalmology" + CSS `capitalize` (renders title-case).
  Content-level (CMS-managed), not a design token — left as-is.
- **Doctor photo** (`doctor-mahipal-sachdev.png`) is design-specified and already wired (correct subject).

## city-individual

Reconciled 2026-06-17 (agent: city-agent, chrome slot). Desktop frame 3121:22150,
mobile frame 3121:21144. Measured via Chrome DevTools getBoundingClientRect/
getComputedStyle, normalized to Figma px; hover proven by triggering + reading
computed style. Bare-`<p>` cms-* convention preserved.

### Component-identity audit (run first)
- **Doctor cards = FORK.** Page used `.specialist-card` with ZERO `.doctor-card__*`
  hooks → custom.css canonical hover (pill→yellow, city→navy, img pan, exp grow,
  book underline) could NOT fire. Fork geometry also wrong: location pill at TOP
  (Figma y=204 → BOTTOM of 227px photo), pill always-yellow (Figma `#d9d9d9` at rest),
  image area h-246 (Figma 227). **SWAPPED** to canonical `.doctor-card` block (desktop
  vertical grid + mobile horizontal list) from eye-specialists, kept this page's 4
  Mumbai doctors.
- **Centres = FORK of `.centre-loc-card`.** Had the class but wrong layout (name+city
  stacked top, book+phone separate row), no group-hover underline, no expanding book
  arrow, phone yellow-filled with no fill→white. Figma layout = name top, then
  (city | book-pill | phone) bottom row. **SWAPPED** to canonical centre-cluster
  structure + city's phone treatment (outlined-at-rest desktop per IR; navy-filled
  mobile per mobile IR).
- Utility bar / main-nav / footer / sticky-bar / callback-form: canonical, left as-is.

### Desktop deltas fixed (Figma vs measured)
| Element | Figma | Was | Now |
|---|---|---|---|
| Doctor card pill | y=204 bottom, `#d9d9d9` | y=9 top, yellow | y=216 bottom `#d9d9d9`; hover→`#ffcb05` |
| Doctor img area h | 227 | 246 (276 render) | 227 (253 render) |
| Doctor exp "41+" hover | 16→23px | dead | 16→23px |
| Hero right card | navy `#2b286f` r28 | `#f1f1f1` | `#2b286f` r28 |
| Hero submit button h | 65 | 48 | 65 |
| Breadcrumb current label | `#636262` | black/50 + "›" | `#636262` |
| Specialties heading align | center (x=439) | left | center |
| FAQ heading align | center (x=375) | left | center |
| Accordion container r | 20 | 15 | 20 |
| Centre card | r7 border-only | shadow only | r7; phone outlined-rest→fill+white-icon hover |
| Callback placeholder | `#919191` | gray-500 | `#919191` |
| Hero row width | fits ≤1440 | 1505 overflow | 1425 (right col minmax 1fr) |

### Hover proofs (computed style after trigger)
- Doctor card: loc-bar `rgb(217,217,217)`→`rgb(255,203,5)`; city black→`rgb(43,40,111)`;
  img `matrix(1.13…)`; exp "41+" 16→23px; book underline; card border→navy. ALL FIRE.
- Centre card: name→underline; book arrow width 0→7px; phone fill→white. ALL FIRE.

### Mobile (393px) — verified
- 0 horizontal-overflow offenders, bodyScrollW=393.
- Headings Poppins SemiBold (Centres 30 / EyeCare 35 / FAQ 30 / Specialties 30) centered
  vs desktop Poppins Light 50.
- Doctor cards HORIZONTAL (photo-left 131px, yellow pill, Lato city) — canonical block.
- Centre cards single col, r10 +1px navy border, name 20px underlined, phone navy-filled
  at rest (scoped `@media(max-width:1023px) .city-centres a.phone-icon`; desktop outlined
  per shared `a.phone-icon`).
- Hero stacked; About 15px mobile / 20px desktop.

### Residuals / deliberate deviations
- **About paragraph case:** Figma marks About body (and Specialties body) `textCase=TITLE`.
  Specialties panels render `capitalize`; did NOT apply to About prose — Title-casing a
  full paragraph corrupts readability (Figma text-style artifact, not intent). See Q1.
- **Mobile doctor exp-bar font:** Figma mobile = Lato Black 13px; canonical eye-specialists
  mobile block uses Poppins font-black. Kept canonical for cross-page consistency. Minor.
- **Hero right width:** Figma layers a navy r28 panel (525-wide, overlapping the 964 left
  at x=857) behind an inset photo. Rebuilt as clean 2-col grid (964 + fluid right ≈460px);
  visually equivalent navy-framed photo, no overlap markup.

### Open client questions
1. About + Specialties body are `textCase=TITLE` in Figma — keep sentence-case for
   readability (current) or honor literal Title-case? Recommend sentence-case.
2. Centre-card phone icon is OUTLINED at rest on desktop but NAVY-FILLED at rest on
   mobile in Figma — built that split; confirm intentional vs uniform.

## About Us

**Built new** from Figma desktop **3121:22745** + mobile **3121:23680** (file key
R6EY4TpNCvVqUEikM7Lof9). New file: `html/about-us.html`. Scaffolded shared blocks
(utility-bar, main-nav w/ About-Us `aria-current`, why-cfs, callback-form, footer,
sticky-bar) from canonical `blogs.html`. `main.js` wired. Commits 24ba2e7 (desktop) +
mobile pass.

**Desktop variant choice (CLIENT QUESTION):** Figma has TWO desktop layouts for this
page — `3121:22745` and `3121:22956`. Per the brief I built **3121:22745** as primary.
The client must confirm which variant is canonical (the second may differ in section
order / a hero treatment). FLAGGED for client.

All measurements at 1440 (desktop) / 393 (mobile) via `/browse` getBoundingClientRect +
getComputedStyle vs the node IR. No horizontal overflow at either breakpoint.

| Section | Figma IR | Measured (ours) | Status |
|---|---|---|---|
| Hero heading "About Us" | Poppins SemiBold 55px #2b286f | 55px / 600 / Poppins / rgb(43,40,111) | ✅ |
| Hero subtitle | Poppins Light 25px #2b286f | 25px / 300 | ✅ |
| Hero grey card | #f4f4f8 r28; photo in navy r28 mask | matches; mobile text-above-photo (per mobile IR) | ✅ |
| Founded paragraph | Poppins Light 20px #2b286f, textCase TITLE | capitalize, 20px (15px mobile), justified | ✅ |
| Stat pill | 232×108 r15, alt navy/#f1f1f1 | 232×108, #2b286f, r15 | ✅ |
| Stat number | Poppins Medium 65px (white on navy / navy on grey) | 65px / 500 / white | ✅ |
| Stat label | Poppins Regular 30px #2b286f | 30px / 400 / navy | ✅ |
| Section tabs (CFS Tech/Chairmen/Mgmt/Board) | white r7, 1px #2b286f, Poppins Light 22px TITLE h50 | h50, 22px, border navy, capitalize; flex-wrap (dynamic-count safe) | ✅ |
| Advanced-tech band | grey #f1f1f1 full-bleed; heading Light 50px (mobile SemiBold 30px) | band #f1f1f1; 50px Light desktop / 30px SemiBold mobile; body left-on-mobile | ✅ |
| Leading-future cards (×3) | navy #2b286f r15 186 tall, white Regular 20px TITLE | 428×186 navy r15, 20px | ✅ |
| CFS Equipment tabs (×4, dynamic) | active yellow #ffcb05 Medium #2b286f 23px r13 325×75; inactive navy/white Light | active 325×75 yellow/navy/Medium/23px/r13; inactive navy/white; JS tab-switch verified | ✅ |
| Equipment panel | image 385×216 r19 + justified Light 20px #2b286f | matches; flex row → col on mobile | ✅ |
| Why-CFS (shared canonical) | 4 cards reveal-on-hover | swapped in canonical blogs.html block (hover reveal intact) | ✅ |
| Avant-garde cards | yellow #ffcb05 r15 behind, #f4f4f8 offset 9px, Light 20px #2b286f TITLE | outer yellow, inner #f4f4f8 ml9, 20px; grid wraps; Load More r10 1px navy Lato SemiBold 25px | ✅ |
| Chairman's Desk | navy panel (white Light 20px justified) + photo card + #f1f1f1 nameplate | matches; mobile photo-above-navy (per mobile IR) | ✅ |
| Team card (desktop) | 265×341 r17, photo 227 top, navy bottom bar 32px, name Poppins Medium 20px, role Light 13px white | 262×341 r17, img 260×227, navy bar 32px/13px/white | ✅ |
| **Team card HOVER** (variant 3121:15523) | bar navy→yellow #ffcb05; +1px #2b286f border; role white→navy + Light→SemiBold; photo grows | triggered in /browse: border→rgb(43,40,111), bar→rgb(255,203,5), role→navy, img scale 1.06 — **PROVEN FIRES** | ✅ |
| Team card (mobile) | HORIZONTAL 345×162 r10: photo-left 124px, name-right Poppins Medium 19-21px, YELLOW role bar bottom-right Lato SemiBold 14px navy | `lg:hidden` horizontal list (desktop grid `hidden lg:grid`); 124px photo, yellow bar navy 36px; mobile Load More | ✅ |
| Board of Directors | same team-card design (7 cards) | desktop grid + mobile horizontal list | ✅ |

**Images extracted** (`assets/images/about-us/`): hero, stats-doctors (2-people),
chairman (= Mahipal team photo, shared hash), equipment-panel, doctor-male,
doctor-lady-1, doctor-lady-2. The team/board grids REUSE these ~4 distinct stock photos
across cells exactly as the Figma does (the design repeats them — they are CMS
placeholders, not per-person portraits). Noted per the "verify image subject" rule:
genuine repeats in the design, not stale placeholders.

**Deliberate deviations / notes:**
- Section tabs + both dynamic tab groups (section-tabs, CFS Equipment) use flex-wrap, not
  fixed widths, per the dynamic-CMS-tab rule. Equipment panel switching wired in JS.
- Team/board hover is a real Figma variant delta (not a guess) and is measured-proven.
- `<p>` tags are bare (CMS rule); typography on wrappers / spans.

## Contact Us

Built new page `html/contact-us.html` from Figma desktop `3121:23946` (1440×2488) +
mobile `3121:24843` (393×3640). Scaffolded from `blogs.html` canonical shared blocks
(utility-bar, main-nav, footer, sticky-bar). Nav `aria-current` = Locate Us (desktop) /
Get In touch (mobile). All measurements DOM-vs-IR at the stated breakpoint.

Unique sections (top→bottom): breadcrumb, hero, form+image content row, state-chips, map.

### Desktop (measured at 1440)
| Element | Figma IR | Measured | Δ |
|---|---|---|---|
| Hero grey card | 1397×302 r15 #f4f4f8 | 1381×302 | h exact; w −16 (container px-[22px], scrollbar) |
| Hero H1 | Poppins SemiBold 55px #2b286f TITLE | 55px w600 #2b286f capitalize | exact |
| Contact-info row y-offset | 174 within card | 174 | exact |
| Location x-offset | ~60 | 66 | +6 (container pad) |
| Navy form card | 636×645 r15 #2b286f | 636×645 | exact |
| Form field | 469×48 r6 #f4f4f8, placeholder Poppins Light 20px #919191 | 469×48 r6 #f4f4f8 20px | exact |
| Form title | Poppins Regular 38px #fff | 38px w400 #fff | exact |
| Submit btn | 469×42 r6 #ffcb05, Light 20px #2b286f | (full-width) h42 r6 | exact |
| Doctor image slot | 542×677 on #f4f4f8 panel | 527×645 object-contain | image scaled to fit panel |
| State chip | h50 r7, Poppins Light 22px #2b286f, All=#ffcb05+Medium | h50 r7 22px; All yellow+medium | exact |
| Page width | — | scrollW 1425 < 1440 | no overflow |

### Mobile (measured at 393)
| Element | Figma IR | Measured | Δ |
|---|---|---|---|
| Hero card | 344×320 r17 | full-w r17 | edge-margin 25px |
| Hero H1 | Poppins **Bold 30px** case **ORIGINAL** (lowercase) | 30px w700 transform:none | exact |
| Contact icons | **#ffcb05 filled** circles 30px (navy vector) | bg #ffcb05, 30px | exact (flips to white+navy-border @lg) |
| Contact items | stacked column; loc Light 15px, label Medium 12px, number Light 15px | stacked, 15px/12px | exact |
| Navy form card | 425×645 r15 (full-bleed) | 345 content / full-bleed | viewport 393 < 425 |
| Form title | Poppins Regular 30px | 30px | exact |
| Form field placeholder | Poppins Light 15px | 15px | exact |
| Image panel | #d9d9d9 343×304 (white→grey gradient bg) | bg #d9d9d9 | gradient simplified to solid #d9d9d9 |
| Page width | — | scrollW 393 = viewport | no overflow |

### Hovers (proven by computed style, not assumed)
- **State chip** (non-active): triggered hover → `backgroundColor rgb(43,40,111)` (#2b286f) + `color white`. Fires. ✓
- **Submit button**: triggered hover → `filter brightness(1.05)`, `transform none`. Fires. ✓
  Dropped the global `.cta-submit` class (which forces `scale(1.05)`) — a scale on the
  full-width Submit visibly distorts it and the Figma Submit (Component 203) has **no
  hover variant / reactions** defined, so static + brightness is the faithful translation.

### Deliberate deviations / client questions
1. **Map = live Google Maps iframe, not the Figma static image.** The Figma map is a flat
   PNG (`fa9a6a23…`) with +/−/gps controls drawn on top — those controls only make sense on
   a real map. I built a Google Maps embed iframe (the +/−/gps become the map's native UI)
   and extracted the Figma map PNG to `assets/images/contact-us/` for reference.
   **Client: provide the production Maps embed URL (a "My Maps" with all centre pins), or
   confirm a static image is wanted.** Placeholder embed currently centers on India.
2. **State-chips reused from `centre-cluster` (canonical).** 19 chips incl. Bihar; "All"
   active = #ffcb05 + Medium weight per IR. These link to `?state=<slug>` — Drupal wires the
   Views exposed filter. Confirm chips should scroll/filter the same centre list as
   centre-cluster, or are purely a map-region selector here.
3. **Doctor hero image** (`af73a3e4…`, extracted @max1100) is design-specified — two CFS care
   staff on transparent bg. Wired as the real asset (not a CMS placeholder).
4. Chat bubble ("here to assist") = the shared 16-sticky-bar chat (already canonical); the
   Figma Group 951/Group 81 bubble matches it 1:1.

## News & Media

**Built NEW from Figma** (no prior page). Browser engine: playwright (queued slot). Measured at
1440 (desktop) and 393 (mobile).

### 3-tab approach
Desktop has 3 separate Figma frames of the SAME page — News (`3121:24934`),
Press Releases (`3121:25016`), Video (`3121:25098`) — differing only in the active tab + content
panel. Built as ONE page: shared chrome (breadcrumb + hero + tab bar) once, then three
`[data-newstab-panel]` panels switched by an inline `data-newstab` JS toggler (active=yellow
`#ffcb05`, inactive=white + 1px `#2b286f` border, per Figma). Did NOT reuse the generic
`[data-tabs]`/`.cat-tab` system because that force-paints inactive tabs navy — wrong colour here.

### Desktop — measured vs Figma (Figma px in parens)
| Element | Measured | Figma | Status |
|---|---|---|---|
| Hero grey card | 723x330, r28 | 723x329, r28 | ok |
| Hero H1 "News and Media" | 55px / w600 / Poppins | 55px SemiBold Poppins #2b286f | ok |
| Hero subtitle | 25px / w300 | 25px Light | ok |
| Hero building image | x887 w509 | right block x858 w526 | ~ (proportional, right-aligned beside card) |
| Tab pill | 196x50, gap 30 | 196x50, gap 30 | exact |
| Tab text | 22px, active 500 / inactive 300, TITLE | 22px Medium/Light, ls-0.04, TITLE | ok |
| Featured big-left card | 723x786 | 723x760 | ~ (+26px from excerpt+padding; column internally consistent) |
| Featured right cards | 672x393 x2 | 672x380 x2 | ~ (+13px each) |
| "All News" heading | 50px / w300 (Light), centered | 50px Light #2b286f, centered | ok |
| Grid cards (3x3=9) | 456x382, x29/485/940 | 465x388 | ok (456 = our container 1382 vs Figma frame 1396) |
| Pagination box | 38x38 navy, 25px | 38x38 #2b286f, 25px Regular | exact |

### Card hover (Figma variant 3121:16909, Component 232 default->hover) — PROVEN FIRES
Diffed default vs hover IR: card bg `#ffffff`->`#2b286f`, border removed, all text
(source/date/title/excerpt) `#2b286f`->`#ffffff`. Wired as `.nm-card:hover` in `css/custom.css`.
Triggered hover in browser, read computed style: cardBg=`rgb(43,40,111)`, border=navy,
title+meta color=`rgb(255,255,255)`. ok

### Tab switching — PROVEN
Clicked Press -> news panel hidden, press panel visible, press tab bg=yellow, news tab=white,
"All Press Release" heading centered, press grid = 9 cards. Clicked Video -> empty panel
("Videos coming soon."). Clicked News -> restored. All verified by computed class/style.

### Mobile (393) — measured vs Figma (3121:24028)
| Element | Measured | Figma | Status |
|---|---|---|---|
| Hero grey card | x24 w330 h185 r17 | x25 w344 h152 r17 | ok (r17; width within ~14px of Figma margins) |
| Hero H1 | 30px / w700 (Bold) | 30px Bold Poppins ls-0.04 | ok |
| Hero image | x24 y316 w330 h367, below card | y313 h367 r17, stacked below | ok (stacks; desktop side-by-side) |
| Tab bar | wraps to 2 rows, h31, no overflow | pills wrap on mobile | ok dynamic-safe |
| Featured cards | single column stacked | stacked | ok |
| Grid cards | single column | stacked | ok |
| Horizontal overflow | none (scrollWidth 378 < 393) | — | ok |

### Deliberate deviations / CLIENT QUESTIONS
1. **Video & Media tab has NO designed content** in Figma (`3121:25098` panel is empty whitespace
   above the footer). Built an empty-state placeholder ("Videos coming soon."). Q: what is the
   video-card layout? — needs design or content.
2. **Card images are CMS placeholders** (grey `#d9d9d9` boxes). Per-card news photos + publication
   logos are CMS content (Drupal Views rows), not design-specific brand imagery, so left as
   placeholder slots with an `<img>` that hides on error. Only the hero building image
   (`hero-building.png`, hash `262cf785...`) was design-specific and was extracted + wired.
3. **Source-logo icons** rendered as generic stroke SVG (clock + calendar) — the Figma per-source
   logos (10-vector clusters per publication) are CMS brand marks, not reproducible as one static
   asset.
4. Featured cards run ~13-26px taller than Figma due to aspect-ratio image + padding; both columns
   stay internally equal-height (723-col = 2x 672-col). Acceptable; titles/excerpts are CMS
   variable-length.