/* ══ contact.css — THE OFFICES PAGE ════════════════════════════════════════════ Loaded only by contact.html. Every class is prefixed .ct- so it can collide with nothing, per the precedent products.css set after `.plate` was introduced twice and the later file silently restyled 24 figures (qa/css-collision.py). WHY THIS FILE EXISTS. Measured on the shipped page at 1440, in a real browser, after a full scroll-walk so every lazy image had been requested and had settled: 3,244px tall · 345 words · 3 images · 0 SVG · 3 sections · 7 animated words per figure 115.0 · dead pixel rows per 900px screen 496 That last number is the one that indicts the page. 496 of every 900 rows carried no ink of any kind — not a rule, not a glyph, not a photograph. More than half of every screen was flat navy. Ranked against the other ten pages on both metrics taken the same way, this was the plainest page on the site. THE DIAGNOSIS, and it is not "not enough decoration". This page owns the only content on the site that exists nowhere else: three registered addresses on two continents, an office line, and the rule that routes a stranger to an engineer. It rendered all of it as four columns of 13px mono headings over 15px grey lists — the same treatment the footer gives a nav link. The single most concrete thing AIREI can say on a contact page ("we are HERE, and here, and here") was the smallest ink in the document, while the largest type on the page was a headline that only restates it. That inversion is the defect. Nothing needed to be added to fix it; what was already there needed to be sized like it mattered. SO: SCALE, NOT COLOUR. The palette is not touched — no new hue enters this file, and the one strong colour used is Signal Gold on a display numeral, which is the exact and only job DESIGN.md §3 gives that token ("display numerals on dark only"). Three glyphs. Boldness here is a ratio: the office index numeral runs to 104px against an 11.5px mono label in the same cell, ~9:1, where the old block ran 15px against 13px, ~1.2:1. Nothing on the page was loud; nothing was important either, and those were the same fact. WHAT IS DRAWN IS THE HOUSE'S OWN. The map mark on each plate is assets/brand/icons/polygon-map.svg, inlined verbatim rather than redrawn, so the site keeps one icon language: 24x24 box, fill:none, stroke currentColor, stroke-width 1.75, linecap butt, linejoin miter, miterlimit 4. It is one mark on one link inside a ruled cell — deliberately NOT the three-icon rounded-square feature grid DESIGN.md §8 names in the AI-tell blacklist. There is no card here, no radius and no fill: the gutters are the rule, which is the same hairline-grid idiom .pr-grid and .figures already use. MOTION invents nothing. Reveal is base.css `.rev` + `data-d`, which already carries both its reduced-motion arm and — load-bearing — its `@media (scripting:none)` arm in shell.css, so every plate is visible with JavaScript off. The only other movement is hover, on properties inside qa/motion-allow.json's allowlist (border-color, background, color, transform), and every animated selector has an exact-match final-state rule in the reduce block at the foot of this file. qa/motion-lint.py matches those selectors EXACTLY, so the pairs travel together and must not be renamed one at a time. NOT DONE HERE, and left for the lane that owns it: ms/hubungi.html is this page's Malay twin and still carries the old flat block. It needs the same structure with its own translated strings; this file is linked by contact.html only, so the twin is unaffected until someone does that deliberately. */ /* ── 1. THE HERO ──────────────────────────────────────────────────────────────── The hero's right-hand column was empty from the headline down to the section rule — the same defect products.css §1 measured and closed on the range page. The photograph that used to sit mid-page in a 1:1 band moves up into it, which does two things at once: it fills the hero's dead column, and it stops the offices section from having to share attention with a picture. 0.78fr, not 1fr. The copy column holds a headline at clamp(38px,6.2vw,78px) over three buttons that must stay on one row at desktop; the photograph is 4:5, so an even split makes it 604x755 and pushes the hero well past one screen. At 0.78 it settles near 470x588 and the hero closes inside a single 900px viewport with the button row unbroken. DOM ORDER IS THE MOBILE ORDER. The copy block (which contains the buttons) comes first in the source and the figure second, so a phone reader reaches the call to action before the photograph, with no flex reorder needed — the same conclusion base.css reached for the home hero, in its more durable form. */ .ct-herogrid{display:grid;gap:clamp(26px,3.6vw,52px);grid-template-columns:minmax(0,1fr)} @media (min-width:1000px){ .ct-herogrid{grid-template-columns:minmax(0,1fr) minmax(0,0.78fr);align-items:start} } .ct-herofig{margin:0} .ct-herofig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block; background:var(--panel-navy);border:1px solid var(--hairline)} /* 4:5 and not the 1:1 the shared .pband uses. base.css §.pband argues the square for a band that must sit BESIDE a caption column and keep a horizontal rhythm; this frame sits beside the hero copy instead, which is already 588px of type, so the picture can be its own shape and discard nothing. Every jpg in assets/img/45/ is 0.800, so 4:5 is a zero-crop frame for this file. */ .ct-herofig figcaption{margin-top:14px;max-width:44ch;font-size:14.5px;line-height:1.5; color:var(--ink-subtle)} .ct-herofig .k{font:600 11.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase; color:var(--airei-blue-lift);margin:0 0 9px} /* ── 2. THE OFFICE PLATES ─────────────────────────────────────────────────────── The page's hero moment, and the reason this file exists. THE GUTTERS ARE THE RULE. `gap:1px` over a --hairline-strong ground with each plate painting its own --deep-water: the 1px the background shows through IS the hairline between plates, so three plates need three rules and not six borders, and they can never disagree about which side owns the line. Same idiom as .pr-grid and .figures. THE THREE COLUMNS ARE THREE DIFFERENT KINDS OF FACT, which is why they are columns and not a paragraph: an index and what kind of office it is · the city and what it does · the postal address and the way to open it. Reading across a plate answers "where is it, and why would I call it" in one pass. Below 900px they stack in that same order, which is also the order they matter in. THE WIDEST SHARE GOES TO THE ADDRESS, not to the display type. An address line that wraps reads as two addresses, so column three takes 1fr and the city column 0.62fr — enough for "Coimbatore" at the 50px display ceiling, and no more. Measured against the longest line in the set, "Pusat Perdagangan Canning II, 30350 Ipoh", which must hold on one line from 900px up. */ .ct-offices{display:grid;gap:1px;background:var(--hairline-strong); border-block:1px solid var(--hairline-strong);margin-top:clamp(30px,3.4vw,46px)} .ct-office{background:var(--deep-water);padding:clamp(26px,3vw,44px) 0; display:grid;gap:clamp(16px,2.2vw,34px);grid-template-columns:minmax(0,1fr); transition:background var(--d2) var(--e-cubic)} @media (min-width:900px){ .ct-office{grid-template-columns:minmax(150px,0.5fr) minmax(0,0.62fr) minmax(0,1fr); align-items:start} } @media (hover:hover) and (pointer:fine){.ct-office:hover{background:var(--panel-navy)}} /* THE NUMERAL IS THE SCALE CONTRAST. Fraunces at up to 104px against the 11.5px mono label directly beneath it — a ratio of about 9:1 inside one cell, where the old block ran 15px against 13px. Signal Gold is not a decision this file makes: DESIGN.md §3 assigns that token to "display numerals on dark only" and this is the only place on the page one exists. Three glyphs, so the ≤10% accent budget is not in play. line-height .82 and a -0.055em left inset: Fraunces' figures carry noticeable side bearing at display size, and without the pull the numeral optically hangs inside the column while the label under it sits flush. Measured against the label's left edge, not assumed. */ .ct-idx{font-family:var(--f-display);font-weight:400;font-size:clamp(52px,6.2vw,104px); line-height:.82;color:var(--signal-gold);margin:0 0 12px;margin-left:-.055em; font-variant-numeric:tabular-nums} .ct-kind{font:600 11.5px/1.5 var(--f-mono);letter-spacing:.2em;text-transform:uppercase; color:var(--airei-blue-lift);margin:0} .ct-city{font-family:var(--f-display);font-weight:420;font-size:clamp(30px,3.4vw,50px); line-height:1.02;letter-spacing:-0.0068em;margin:0 0 14px;color:var(--ink)} .ct-what{margin:0;font-size:clamp(16px,1.5vw,18.5px);line-height:1.5;color:var(--ink-muted); max-width:32ch} .ct-addr{list-style:none;margin:0;padding:0;display:grid;gap:5px} .ct-addr li{font-size:15.5px;line-height:1.5;color:var(--ink-muted)} .ct-addr li:first-child{color:var(--ink)} /* THE MAP LINK IS AN AFFORDANCE, NOT A FOOTNOTE. It was the fourth item of a grey