wrappers with a link inside; scaling those on press would animate a non-control, which is worse than no feedback. Two ratios, because one does not fit both sizes. 0.97 on the small controls, per the reference; 0.99 on .railcard, which is a ~330px card where 0.97 reads as a lurch rather than a press. Each transition re-states the properties the base rule already animated. `transition` is a shorthand: declaring it again with only `transform` would silently drop the border-colour and box-shadow transitions those hovers depend on. */ .announce { transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.12s var(--ease); } .tlink { transition: border-color 0.25s var(--ease), transform 0.12s var(--ease); } .railcard { transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.12s var(--ease); } .hero__dot { transition: background 0.3s var(--ease), width 0.3s var(--ease), transform 0.12s var(--ease); } .footer__social a { transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.12s var(--ease); } .announce:active, .tlink:active, .hero__dot:active, .footer__social a:active { transform: scale(0.97); } .railcard:active { transform: scale(0.99); } /* .ecocard__go is a full-bleed strip across the bottom of a card that clips its children. Scaling it would pull it off both edges and show the card behind. It presses with colour instead. */ .ecocard__go { transition: background 0.15s var(--ease); } .ecocard__go:active { background: var(--brand-50); } @media (prefers-reduced-motion: reduce) { .announce:active, .tlink:active, .hero__dot:active, .footer__social a:active, .railcard:active { transform: none; } } /* ================================================================== v20 · THE TINT MARKS MEANING, NOT EVERY OTHER SECTION "rn it is one section white n another one is lil light blue — dont keep alternating, think n keep only important sections like that ... in the hero banner reduce the blue colour a lil" Two changes, and one thing they turned up on the way. ================================================================== */ /* ---- 1 · The scrim comes off the pure brand navy ---------------- The hero wash was rgb(0, 12, 99) — the brand blue at full saturation, blue eight times over green with no red at all. It read as a blue filter laid over the photograph rather than as shade on it. The new value is DESATURATED, NOT LIGHTENED, and that distinction is the whole point. Every alpha in the three scrim variants is untouched, so the photograph is veiled exactly as much as before. It does cost a little contrast, and the reason is worth writing down because the solid colour predicts the wrong sign. As a solid, rgb(14,20,74) is DARKER than rgb(0,12,99) — luminance 0.01087 vs 0.01164. But the scrim is never solid; it composites at alpha over whatever the photograph shows, and the worst case is a white pixel. Composited, R goes 0 -> 14 and G goes 12 -> 20, and green carries 0.7152 of the luminance weight, so the ground ends up marginally LIGHTER and every ratio slips by roughly 0.15-0.50. Measured in-browser against the resolved gradient stops, sampling each element's actual inked extent (not its box, which for the flex .microline overruns the text by ~190px and reads far too dark a stop). Desktop, 1280, over a pure-white photo pixel: element px alpha was now needs headline 69 0.617 5.21 4.95 3.0 headline .mute 69 0.705 4.13 3.97 3.0 lead 16 0.710 6.59 6.26 4.5 microline 13 0.687 5.59 5.32 4.5 announce 13 0.807 10.14 9.64 4.5 ghost button 16 0.805 10.07 9.57 4.5 Mobile, 375, against the <=720 vertical ramp: 6.98 / 4.44 / 9.28 / 11.26 / 5.32, all likewise passing. Nothing crosses its floor. Re-measure if you change these numbers. Do not change them to "lighten the hero": lighten means alpha, and alpha is load bearing — v11 tried a lighter ramp and the headline failed at 3.68:1. */ :root { --scrim: 14, 20, 74; /* was 0, 12, 99 — the wash */ --scrim-deep: 10, 14, 48; /* was 0, 8, 62 — the bottom edge */ } /* ---- 2 · Four bands, not six, and they are not alternating ----- Before: standard / brands / values / who-we-are / insights / contact were tinted and the rest white, which is strict alternation — thirteen sections in a stripe. A stripe carries no information: every section looks equally important, which is the same as none of them being important. Now the tint marks the page's four anchors, and nothing else: #standard the promise — fee only, fiduciary. The claim the whole firm rests on, and already the one section carrying .moment. #brands the fork. Where a visitor self-selects into a practice. The single most valuable click on the page. #regulation the trust anchor. For a registered adviser this is what separates the firm from an app. #contact the destination. Read down the page they are a spine: our promise, our practices, our regulation, talk to us. No two are adjacent — the gaps run 2, 1, 4, 2 sections — so each one reads as a chapter marker rather than as a stripe. The change is in index.html (the band/band--warm classes), not here. This comment is where the reasoning lives. If a fifth section ever wants the tint, the question to answer first is which of these four it outranks. ---------------------------------------------------------------- */ /* ---- 3 · Glass had nothing left behind it ---------------------- Found while re-banding, and it is the reason the cards on the white sections looked like outlines rather than objects. v12 set the rule: glass only where something sits behind it. That held while .gridband painted a 46px graph-paper wash and .band--warm was on half the page. v16 removed the texture and this pass removes most of the bands — so backdrop-filter across the homepage was blurring flat white. A frosted panel over white is white. .valuecard at rgba(255,255,255,.58) over #ffffff is literally #ffffff: the card was its 1px border and nothing else. So the tint moves from the band to the card. A card is now a solid surface that contrasts with whatever ground it is on: tinted on white, white on the tinted bands. That is what makes the four remaining bands legible as bands — the cards no longer compete with them. Glass is KEPT in exactly the three places that still have a photograph behind them: the nav while it sits over the hero, the hero's own controls, and .closer__card. Everything else here is a straight solid, which also returns the GPU cost of fourteen backdrop-filters on one page. */ /* On the white ground: the card carries the tint. */ .eco__hub, .ecocard, .reachpanel, .valuecard, .quoteband, .whycard, .formcard, .newsstrip { background: var(--warm-50); backdrop-filter: none; -webkit-backdrop-filter: none; } /* On a tinted band: the card goes white so it lifts off the ground. Same rule read the other way round. */ .band--warm .eco__hub, .band--warm .ecocard, .band--warm .reachpanel, .band--warm .valuecard, .band--warm .quoteband, .band--warm .whycard, .band--warm .formcard, .band--warm .newsstrip { background: var(--n-0); border-color: var(--warm-line); } /* .ibadge is a 40px icon chip that has to separate from whatever is immediately BEHIND it, which is not always the section. Three of its eleven placements sit on bare section ground with no card at all — .trio__item in #experience, .reachlist li in #global and .contactpoints li in #contact — and keying the chip off .band--warm painted those three the exact colour they were sitting on, leaving a 1px ring and a hairline shadow to carry a 40px element. There are only two grounds in the system, so the chip is simply the opposite of its host. Read the four rules in order — each one flips the previous where the surface underneath has flipped: ground card? host is chip is white no white tint <- rule 1 white yes tint white <- rule 2 band no tint white <- rule 3 band yes white tint <- rule 4 Specificity already sorts rules 2 and 3 (both 0,2,0 — source order decides) and puts rule 4 (0,3,0) on top, so the order below is load bearing. .closer__card .ibadge at ~1871 stays translucent white on purpose: that one sits on a photograph, not on either ground. */ .ibadge { background: var(--warm-50); border-color: var(--warm-line); backdrop-filter: none; -webkit-backdrop-filter: none; } .eco__hub .ibadge, .ecocard .ibadge, .reachpanel .ibadge, .valuecard .ibadge, .quoteband .ibadge, .whycard .ibadge, .formcard .ibadge, .newsstrip .ibadge { background: var(--n-0); border-color: var(--line); } .band--warm .ibadge { background: var(--n-0); border-color: var(--line); } .band--warm .eco__hub .ibadge, .band--warm .ecocard .ibadge, .band--warm .reachpanel .ibadge, .band--warm .valuecard .ibadge, .band--warm .quoteband .ibadge, .band--warm .whycard .ibadge, .band--warm .formcard .ibadge, .band--warm .newsstrip .ibadge { background: var(--warm-50); border-color: var(--warm-line); } /* ---- 4 · The hero's load plate matched the OLD scrim ------------- .hero--stage paints --brand-900 (#000c63 = rgb(0,12,99)) behind the photograph. That is character for character the navy section 1 just took out of the scrim, so until the LCP image decodes the hero flashed the full-saturation blue this pass exists to remove, then settled into the desaturated one. Point it at the same token the scrim uses so the plate and the veil cannot drift apart again. --brand-900 itself is untouched: it is a palette token used elsewhere, and this is a hero-local concern. */ .hero--stage { background: rgb(var(--scrim)); } /* ================================================================== v20b · THE MOBILE PASS "see each n every section in detail ... see in the mobile verstion also" Audited at 375x812 with device emulation on. Five findings, all real, none cosmetic. Document scroll width is 375 — no horizontal overflow anywhere except the hero's own Ken Burns slide, which overhangs by design. ================================================================== */ /* ---- 1 · A 16px floor on every field, or iOS zooms the page ----- The fields resolved to 14.4-15.2px. Mobile Safari zooms the whole viewport whenever a focused input is under 16px, and it does not zoom back out on blur — the reader is left pinching their way back to a page they were halfway through. This is the one place a fixed px value beats the type scale: the number is a browser threshold, not a design decision, so it cannot be expressed in rem against a root that changes. Applied to every page, since every page that has a field has this bug. Named selectors, not a bare `input`: .field input is 0,1,1 and a bare element is 0,0,1, and a media query adds no specificity at all — the first draft of this rule lost to line 1070 and every field stayed at 15.2px. Verified resolved, not just written. */ @media (max-width: 640px) { .field input, .field textarea, .field select, .newsform input, .footer__sub input { font-size: 16px; } } /* ---- 2 · The carousel dots were a 30x3px target ----------------- Three buttons, each 30 wide and 3 TALL, which is the visual bar and nothing else — well under the 24px WCAG 2.2 minimum and far under what a thumb can actually find. The bar has to stay 3px or it stops reading as a progress rule, so the target grows around it instead: the button keeps its painted size and gains a transparent ::before that reaches full finger height. Nothing moves on screen. */ .hero__dot { position: relative; } .hero__dot::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* ---- 3 · #careers cards were 106px of text per column ----------- The grid carried grid-template-columns:1fr 1fr as an INLINE style, which outranks every media query in this file, so it stayed two-up at 375 and gave each paragraph a 106px measure — roughly thirteen characters, nine lines of rag for two sentences. The inline style is gone from the markup and the intent lives here, where a breakpoint can reach it. minmax(0, 1fr) because a bare 1fr floors at min-content and would be pushed open by the longest word. */ .bento--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 560px) { .bento--pair { grid-template-columns: minmax(0, 1fr); } } /* ---- 4 · Footer links under the 24px minimum -------------------- All six sit in the footer: the three mailto addresses measured 19px tall and the three footer-bottom links 17px, both below WCAG 2.2 AA target size. They are text links inside running copy, so they cannot be padded into blocks without breaking the line — the target extends vertically only, which grows the hit box without moving the baseline or the line box around it. */ .footer a[href^="mailto:"], .footer__bottom a { position: relative; } .footer a[href^="mailto:"]::after, .footer__bottom a::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 24px; transform: translateY(-50%); } /* ---- 5 · The two logo bitmaps reflowed after decode ------------- Both wealthdoor-logo.png placements are sized by CSS height with no width or height attribute, so their width was unknown until the bitmap decoded. The height is fixed, so there was no vertical shift, but the logo snapped from 0 to its true width and shoved the row. Declaring the intrinsic ratio reserves the width up front. Done in CSS rather than as width/height attributes because both sit inside #brands, and that markup stays as it is. */ .barch__cell img, .brandcard__mark { aspect-ratio: 878 / 290; } /* ================================================================ v21 · THE NESTVEST LOCKUP ================================================================ #brands used to set nestvest as live text — a bold Plus Jakarta "nestvest" with an orange full stop — because there was no asset. There is one now: assets/img/nestvest-logo.svg, the horizontal lockup (bird-on-nest mark, then the serif wordmark whose "v" is an upward arrow). It is composed from the two brand source files as vector, so it stays crisp at any size and needs no @2x bitmap. Its ratio is 5131:1000, far wider than the wealthdoor bitmap's 878:290, so the shared reflow guard above has to be overridden rather than reused — hence a class instead of another element selector, and hence it sits after that rule. The heights are NOT the same as their wealthdoor siblings, and they are deliberately SMALLER. Equal box heights would be wrong here because the two logos spend their height very differently. Measuring the ink rows of wealthdoor-logo.png, the arc takes the top two thirds and the wordmark's x-height band is only 31% of the 290px canvas. In this lockup the wordmark is 78% of the canvas and its own x-height is 71% of that, so 55% of the box is x-height — nearly twice the ratio. Matched at 26px the nestvest wordmark drew almost double the size of "wealthdoor" next to it and swamped the row. Sized side by side against the 26px bitmap, 22px is where the two read as equals: nestvest's serif is much lighter than the bold wealthdoor wordmark, so a slightly larger x-height is what it takes to balance, and below about 20px the bird loses its egg. The photo band on both cards drops from 16/9 to 21/9 (declared up at .brandcard__media, not here, so there is one aspect-ratio for that element rather than a base and an override). At the 1240px max width each card is ~600px, so the image goes 338px -> 257px. The photographs are already cropped with the subject centred and object-fit: cover holds that centre, so the 81px comes off the ceiling and floor, not off anyone's face. The ratio is repeated on both rules rather than hoisted into a shared .mark--nv. A bare class is (0,1,0) and .barch__cell img is (0,1,1), so the wealthdoor bitmap's ratio won and the lockup drew at 3.03:1 — squashed to 94px wide instead of 159px. Two chained selectors clear it; a lone class cannot. */ .brandcard__mark.mark--nv { aspect-ratio: 5131 / 1000; width: auto; height: 24px; } .barch__cell img.mark--nv { aspect-ratio: 5131 / 1000; width: auto; height: 22px; } /* ================================================================ v22 · THE ORANGE IS THE LOGO ORANGE, AND THE RULES COME OFF ================================================================ 1 · The emphasised word in a headline was the wrong orange. wealthdoor-logo.png contains exactly two opaque colours: #0013A0 across 69,508 pixels and #F05A29 across 9,568. So the brand orange is #F05A29, which is what --accent has always held. But every in a headline was painted --accent-700 (#c23f14), a brick that reads noticeably browner and duller beside the mark. That is most obvious in #what-we-do, where "businesses" sits a few hundred pixels below the logo in .eco__hub and the two are compared directly. The em rules now use --accent. This is a contrast decision as much as a colour one, so the numbers matter. #F05A29 on white measures 3.39:1 -- under the 4.5:1 normal-text floor but over the 3:1 large-text floor. Every selector changed is a headline: .h2 is clamp(2.15rem, 4.1vw, 3.4rem), so 34.4px at its very smallest, comfortably past the 24px large-text threshold at any weight. Two orange s were deliberately LEFT on --accent-700, and it would be a regression to "finish the job" by changing them: .quoteband__q em clamp(1.3rem, 2.2vw, 1.8rem) at weight 400. Bottoms out at 20.8px, which is under 24px, so it is normal text and needs 4.5:1. .newsstrip__t h3 em 1.18rem flat -- 18.9px. Same reasoning. #c23f14 scores 5.23:1 on white, so both clear the normal-text floor. They are a darker shade of the same brand hue, not a different colour, and at that size the difference is invisible. ^ SUPERSEDED BY v24. Both are on --accent now, and v24 pays the contrast cost in type rather than in hue. See the foot of file. 2 · Every section had a hairline across the top. .divide-top put a 1px border on 24 of the 26 section elements, so the page read as a stack of ruled rows -- the line under one section is what you actually see, which is why it reads as a bottom border. taste-skill/SKILL.md:652 is explicit: hairlines drawn to make a page "feel designed" are banned; keep them only where they organise real content. These organised nothing. The v20 pass already gave the page its rhythm through four tinted bands and clamp(4.5rem, 8.5vw, 8.5rem) of section padding, so the rules were doing a job that was already done, twice. The border is dropped in CSS rather than by stripping the class from 26 sections across 13 files: the markup stays as it is, and one line brings the rules back if they are ever wanted. Three declarations set it, at 215, 1047 and 2180, so all three are overridden here at the foot of the file. hr is untouched. It is a real element used inside content, not section furniture. */ .divide-top, .band--warm .divide-top { border-top: 0; } /* ================================================================ v24 · THE LAST OF THE LINES, AND ONE HEADLINE THAT WANTED ROOM ================================================================ 1 · The hairlines that survived v22. v22 took the border off .divide-top and read the page as done. It was not. Walking the rendered DOM and collecting every element over 200px wide that paints a top or bottom edge turns up two rules still drawing full-width rules the page does not need: p.seclabel::after 10 instances, #e2e6f1 .reachlist li + li 3 instances, #e2e6f1 .contactpoints li + li 2 instances, #e2e6f1 .seclabel::after is the one the eye actually catches. It is the rule that runs from the end of a section label out to the edge of the column, and because a label sits at the top of a section, the rule you see below any given block of content is the *next* section's label rule. That is why it reads as a bottom border on every section -- the same illusion v22 diagnosed for .divide-top, from a second source it missed. It cannot be deleted at 639, because .sechead--centre at 1995 restyles this same pseudo-element into the little 34x2 orange dash under a centred label and never re-declares `content`. Drop the base rule and the dash goes with it -- three of them on this page alone. So the pseudo-element keeps its content and loses its box, and the centred variant puts the box back. The two list rules are a closer call, and they go for a different reason than "no hairlines": those rows are already separated by 1.05rem of block padding and each one leads with an icon, so the rule is decoration on a list that was legible without it. .reachlist and .contactpoints are the same component twice -- identical display, gap and padding-block at 1731 and 1901 -- so they are treated as one. Missing the second is easy: #contact sits 12,000px down the page, and a fix verified only at #global looks complete while half the lines are still there. Everything else the scan found stays. Cards, inputs, .frame, .imgslot, .regbadge and the footer rules bound real objects or real controls -- they are edges with a job, not section furniture, and the brief was the lines under the sections. */ .seclabel::after { display: none; } .sechead--centre .seclabel::after { display: block; } .reachlist li + li, .contactpoints li + li { border-top: 0; } /* 2 · "One promise, across three businesses." on one line. The
in the markup is gone, but that alone would only have moved the break, not removed it: .sechead is capped at 46rem = 736px and the headline measures ~884px set on one line at its 54.4px display size. It would have wrapped in the same place and looked identical, which is the trap here. So the centred head gets its own cap. 60rem = 960px clears 884px with room for the letter-spacing to breathe, and still sits well inside the 1240px wrap. The cap is only widened for the *centred* variant, because that is the one holding a display headline meant to be read as a banner; left-aligned .sechead keeps 46rem. .lead has to be pulled back to 46rem by hand. It was inheriting its measure from the 736px parent, and letting it stretch to 960 would put the body copy at roughly 105 characters -- well past the 75ish where a line stops being comfortable to track. The headline wants width; the sentence under it does not. text-wrap: balance is on the h2 so that if a narrow viewport does force a wrap, it breaks into even lines instead of leaving one word stranded. */ .sechead--centre { max-width: min(60rem, 100%); } .sechead--centre .h2 { text-wrap: balance; } .sechead--centre .lead { max-width: 46rem; margin-inline: auto; } /* 3 · Paying for the logo orange in type instead of in hue. Every orange on the site is now #F05A29 exactly, including the two s v22 held back. v22 was right that they were the risky ones and wrong about the numbers, which were read off the CSS rather than off the rendered page: .quoteband__q em v22 said 20.8px. Rendered at desktop it is 28.8px -- 2.2vw wins over the 1.3rem floor until about 1090px viewport. Large text already; 3.18:1 on the --warm-50 ground clears the 3:1 floor. .newsstrip__t h3 em 18.88px at weight 500. Genuinely normal text, genuinely 3.39:1 on white, genuinely under 4.5:1. v22's one real catch. Two small type changes settle both rather than reintroducing a second orange. The quote's clamp floor goes 1.3rem -> 1.5rem so it stays >= 24px at every viewport instead of only wide ones, and the news goes to weight 700, which at 18.88px crosses the 14pt-bold threshold and moves it to the same 3:1 floor. Bolding an emphasised word is what is for, so it costs nothing. The result: one orange, matching the mark, and no text below its WCAG AA floor. */ .quoteband__q { font-size: clamp(1.5rem, 2.2vw, 1.8rem); } .newsstrip__t h3 em { font-weight: 700; } /* ================================================================ v25 · WHAT WE BELIEVE BECOMES A SECTION, AND THE TRIO GOES ================================================================ #believe was four lines of markup: a heading split off from a single sentence, sitting in a .split meant for a heading beside an image. It read as a caption to nothing. The section directly under it, #experience, was three equal cards in a row -- the layout taste-skill-v1 bans outright at line 114, "the generic '3 equal cards horizontally' feature row", and the client asked for it gone. Both problems have the same answer, so they are solved together: the convictions that were trapped in the card row move up into #believe and become the thing it was missing. The copy is rewritten rather than moved. The trio said what we DO -- start with the goal, one adviser, advice you can check -- and #standard immediately below already says "advice that puts you first, not what earns us the most", while #regulation says the fee-only part again at 482 and .contactpoints says it a third time at #contact. Lifting the words verbatim would have put the same sentence on screen four times. So #believe now states the WHY -- a plan begins with a life, advice is a relationship, trust has to be checkable -- and leaves the mechanics to the two sections built to carry them. The page argues once and then evidences itself. LAYOUT. Three things, and the obvious move is three columns again, which is the banned row wearing a different section id. It is an editorial stack instead: a wide belief set at display scale, then numbered rows where the ordinal, the claim and the reasoning each hold their own column. Reading down a numbered list is what a manifesto wants anyway -- convictions are ordered, features are parallel, and the vertical form says which of the two this is. Rows are separated by space, never by a rule. v24 spent its length removing hairlines from this page; adding three back here would undo it, and taste-skill-v1:53 asks for logic-grouping "via purely negative space" regardless. 2.6rem of gap does the work a border was doing. GROUND. #believe stays white. It is not an oversight: v20's rule is that no two tinted grounds may touch, and with #experience deleted #believe now sits directly against .band--warm #standard. Tinting it would put two warm bands edge to edge and collapse the rhythm the bands exist to create. LEFT BEHIND. .statement at 670-674 was written for the old #believe and is now referenced by no page; it stays in the file under the same convention as every superseded block here, so the history reads. .trio at 799-811 looks equally dead from index.html and is NOT -- _m.html still renders it. Deleting it on the strength of a grep against this page alone would take a live layout down with it. */ .creed__stmt { max-width: 20ch; text-wrap: balance; margin-block: 1.1rem clamp(2.8rem, 5vw, 4.2rem); } .creed { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 3.4vw, 2.6rem); } .creed__item { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1rem, 2.6vw, 2.4rem); align-items: start; } .creed__n { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; font-variant-numeric: tabular-nums; color: var(--accent); padding-top: 0.42rem; } .creed__t { font-family: var(--font-display); font-size: clamp(1.18rem, 1.75vw, 1.5rem); font-weight: 500; line-height: 1.24; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; margin: 0; } .creed__p { font-size: 0.98rem; line-height: 1.66; color: var(--muted); max-width: 58ch; margin: 0; } /* Under 900px the three columns stop being columns. The ordinal goes inline above the claim rather than beside it, because a 3.25rem gutter on a 375px screen spends 9% of the width on two digits. */ @media (max-width: 900px) { .creed__stmt { max-width: 24ch; } .creed__item { grid-template-columns: 1fr; gap: 0.55rem; } .creed__n { padding-top: 0; } .creed__p { max-width: 62ch; } } /* ================================================================ v26 · THE ELEGANCE PASS ================================================================ A designer's read of the whole page, with taste-skill-v1 as the brief. Three things were wrong and all three were the same kind of wrong: the page was saying more than it needed to, in more boxes than it needed. 1 · #believe said it twice. The section shipped in v25 with a display statement, a supporting paragraph under it, and three two-sentence reasonings -- around 208 words before the reader reaches #standard, which is the section that actually has to sell something. Worse, #why further down states the same four convictions almost verbatim across its whycards ("legally bound to act in your interest", "a named person holding your whole picture", "you can look us up"). A manifesto that is restated 400px later is not a manifesto, it is a draft. So the sub- paragraph is gone entirely and each reasoning is cut to one clause -- 63 words, a 70% cut. The claims now sit on a single line each at desktop, which is what makes the numbered stack scan as a list rather than as three small essays. .creed__head and .creed__sub were deleted with the copy; what survives is .creed__stmt, which only has to hold the statement and set the space beneath it. 2 · Two of the three IMAGE placeholders are now photographs. They pointed at standard-fees.jpg, who-we-are.jpg and regulation.jpg, none of which exist on disk -- the page was shipping three empty boxes with the word "Image" in them. Deleting #experience in v25 freed exp-goal.jpg (a goal written by hand beside the charts) and exp-check.jpg (a magnifier over a printed statement of holdings and fees); they go to #standard and #regulation respectively, where the subject matter is already what the copy is about. exp-adviser.jpg was NOT reused -- it is on this page already, in .quoteband. 3 · #who-we-are had no photograph left and is not getting a fabricated one. Rather than keep an empty 4:3 box next to the copy, the section drops to .splithead: headline low-left, supporting copy and the button aligned to its baseline on the right. It is the one text-only section on a page of image splits, which gives the run of sections a beat of quiet before #regulation -- the same job the empty box was failing to do. This is taste-skill-v1:226, "are cards omitted in favour of spacing where possible", answered honestly. .imgslot keeps its placeholder rules. One slot is gone and two are filled, but the component is how a photograph gets dropped into this page later, and .imgslot__note is what makes an unfilled one legible instead of blank. */ /* The regulator badges were the last 3-across card row on the page. The content has to stay -- these are disclosure facts, not features -- but the chrome does not: three bordered boxes directly under a section that already carries a photograph and a ruled pull-quote is four framed things stacked. Cards give way to a single top rule and hairline dividers, which is the "divide-y" grouping taste-skill-v1:53 asks for and reads much closer to a filing than a feature grid. */ .regbadges--row { gap: 0; border-top: 1px solid var(--warm-line); margin-top: clamp(1.8rem, 3.4vw, 2.6rem); } .regbadge { background: none; border: 0; border-radius: 0; padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2.4vw, 2rem) 0 0; } .regbadge + .regbadge { border-left: 1px solid var(--warm-line); padding-left: clamp(1.2rem, 2.4vw, 2rem); } /* No hover: there is no longer a box edge for it to light up, and a border-colour transition on a divider shared with the panel next door would make the wrong element look interactive. */ .regbadge:hover { border-color: var(--warm-line); } .regbadge__note { max-width: 34ch; } /* Below 860px .regbadges--row is already one column, so the divider has to turn ninety degrees with it. */ @media (max-width: 860px) { .regbadge { padding-right: 0; } .regbadge + .regbadge { border-left: 0; border-top: 1px solid var(--warm-line); padding-left: 0; } } /* ================================================================ v27 · THE VALUES ROW GOES BACK TO FIVE ================================================================ The client sent a full-page comp. On it, OUR VALUES is five columns in a single row and each card carries two short lines. The live page was three-up with an orphan row of two, which v18's note at 2381 chose deliberately: repeat(5, 1fr) inside a 1240px wrap left 212px a card, and the copy then ran ~24 characters over five lines, below the ~30 where prose stops reading. That reasoning was sound about the measure and wrong about the cause. The fix for 24-character lines is not a wider card, it is less copy -- the same call already made in v26 for #believe. Each value is cut to one sentence of roughly 55 characters, so the card is three lines, not five, and 24 characters over three lines reads as a caption, which is what these are. Five-up also removes the orphan row, which was the uglier of the two problems: two cards centred under three reads as a layout that ran out. So the min-width:1081px flex-wrap override at 2390 is reverted to the grid it was suppressing. It stays in the file, superseded, under the same convention as every other retired block here. The headline loses its
and its full-line emphasis. The comp puts one word in orange -- "everything" -- and so does #what-we-do, whose "businesses" is the only orange word in that headline. A whole line of accent on a screen that also carries five orange .crule dashes was the most orange thing on the page. */ @media (min-width: 1081px) { .valuegrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: stretch; } .valuegrid > .valuecard { flex: initial; } } /* Centred leads were wrapping to a widow: "…what we say no / to." under OUR VALUES, "…advice that puts you / first." under OUR ECOSYSTEM. v24 gave .sechead--centre .h2 text-wrap: balance and stopped there; the sentence under it needs the same treatment or the block ends on a two-character line. */ .sechead--centre .lead { text-wrap: balance; } /* Same widow, left-aligned this time: the hero lead broke as "...across the US and / India." balance fixes it without touching the measure. */ .hero .lead { text-wrap: balance; } /* ================================================================ v28 · #BELIEVE, SECOND CUT ================================================================ v26 took this section from ~208 words to 63 by deleting the sub-paragraph and shortening each reasoning to a clause. The client asked for less again, so the reasonings go entirely. Three convictions, stated and left alone -- 30 words in the whole section, and nothing on screen that a reader has to finish before the next line starts. Losing the third column changes what the layout should be. The v25/v26 row -- ordinal, claim, reasoning -- only earned its width because something sat in the right-hand track. With that gone, a full-width row would strand the claim in the left third of a 1240px wrap with 800px of nothing beside it. So the section splits: the label and the statement hold the left, the three convictions stack on the right at display scale. The two columns are close enough in height to read as a spread rather than a heading with a list bolted under it. The statement is cut too, from "Your plan should be built around your goals, not an industry average." to "Built around your goals, not an average." Half a column is not the full measure it had, and the long version ran five lines against a right column of three -- the imbalance the split was meant to fix. The short version, held to 13ch, is three lines of display type against three convictions: 214px of lede against 175px of list, near enough to level. 18ch was tried first and ran four lines, and a 26ch cap on .creed__t wrapped two of the three convictions onto a second line; both are gone. .creed__t stops being an
. With no paragraph beneath it, it is not heading anything; it is the content. The ordinals stay aria-hidden --
already tells a screen reader that this is a numbered list of three, and reading "zero one" over the top of it is noise. */ .creed__split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } /* Overrides the v25 rule: no trailing margin now that the statement sits beside the list instead of above it. */ .creed__stmt { max-width: 13ch; margin-block: 1.1rem 0; } .creed { gap: clamp(1.5rem, 2.6vw, 2.1rem); } .creed__item { grid-template-columns: 2.6rem minmax(0, 1fr); gap: clamp(0.75rem, 1.4vw, 1.1rem); align-items: baseline; } .creed__n { padding-top: 0; } .creed__t { font-family: var(--font-display); font-size: clamp(1.28rem, 2vw, 1.72rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.014em; color: var(--ink); text-wrap: balance; margin: 0; } @media (max-width: 900px) { .creed__split { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.8rem); } .creed__stmt { max-width: 22ch; } .creed__item { grid-template-columns: 2.2rem minmax(0, 1fr); } .creed__t { max-width: none; } } /* ===================================================================== v41 — 2026-08-10 — CAREERS PAGE --------------------------------------------------------------------- careers.html is rebuilt from the client's "Careers & Culture" document and reuses the homepage vocabulary wherever one already fits, so the two pages read as one site: .pagehero, .split + .imgslot, .sechead, .seclabel, .bento--pair, .divisions (the five values), .steps (the hiring process), .joinus, and the warm band rhythm. Three things the homepage had no component for, added here: .afternote A single closing line after a list — the "how we work together" habits under the values, and the "don't see your role" line under the join CTA. Muted, indented to the list's text column so it reads as a footnote to what precedes it rather than a new paragraph of body copy. .voices Two employee quotes, side by side. Deliberately NOT the homepage .quoteband: that component pairs one quote with a photograph, and we have no employee photography. Rather than invent a face, these are text-only, attributed by team and market only. They are the sample stories from the client's document and are marked as placeholders in the HTML. .teamlist Eight teams. Eight cards would have been a wall, and the taste rules bar a generic three-across card row anyway, so this is a divided list in two columns: the group reads as one object held together by rules, not eight boxes. Each row is a hairline-separated pair of title and one sentence. ===================================================================== */ .afternote { color: var(--muted); font-size: 0.97rem; max-width: 62ch; margin-top: clamp(1.6rem, 2.6vw, 2.2rem); } .divisions + .afternote { padding-left: 0; } @media (min-width: 861px) { .divisions + .afternote { padding-left: calc(4rem + clamp(1rem, 3vw, 2.5rem)); } } /* ---------- Voices ---------- */ .voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); } .voice { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; transition: border-color 0.3s var(--ease); } .voice:hover { border-color: var(--brand-200); } .voice__q { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 500; line-height: 1.34; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; margin: 0; } .voice__q::before { content: '\201C'; } .voice__q::after { content: '\201D'; } .voice__body { color: var(--muted); font-size: 0.95rem; line-height: 1.65; margin-top: 1.05rem; } .voice__by { margin-top: auto; padding-top: 1.3rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } /* ---------- Team list ---------- */ .teamlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); border-top: 1px solid var(--line); } .teamrow { padding-block: clamp(1.15rem, 2vw, 1.6rem); border-bottom: 1px solid var(--line); } .teamrow h3 { font-family: var(--font-sans); font-size: 1.06rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; } .teamrow p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; max-width: 48ch; } /* Warm-band inheritance. The v20 band rules name each component that has a hairline explicitly, so the three added above have to opt in or they render a cool grey line on a warm ground. */ .band--warm .voice, .band--warm .divisions, .band--warm .division, .band--warm .teamlist, .band--warm .teamrow, .band--warm .steps, .band--warm .stepr { border-color: var(--warm-line); } .band--warm .division:hover { background: var(--warm-100); } @media (max-width: 900px) { .voices { grid-template-columns: minmax(0, 1fr); } .teamlist { grid-template-columns: minmax(0, 1fr); } } /* The site is now two pages, so the primary nav needs a current-page state for the first time. Weight only -- a rule or a colour would put a second accent on a page that already spends its one on the headline verb. */ .nav__links a[aria-current='page'] { color: var(--ink); font-weight: 600; } /* ============================================================ v29 · "remove the proof strip, the assure strip, the arc, the fee-only line, and the grey half of every headline" ------------------------------------------------------------ Six client notes, all subtractive except two. The removals are recorded next to the rules they replaced (search "REMOVED (v29)"); what follows is only what needed new CSS. ============================================================ */ /* ---- 1 · Headlines are one colour -------------------------- Every h1/h2 on the site was written as two halves: an inked clause and a clause at --faint (#8892ab, 3.97:1 on white). It was doing two jobs at once -- marking a grammatical break AND lowering the second clause's voice -- and the second job is the one the client is reading as a headline that fades out. The break is already carried by the line wrap and by the sentence itself. Scoped to headings rather than deleting .mute, because .mute is a general utility and body copy may want it later. The hero rule is restated at equal specificity: .hero--stage h1 .mute is (0,2,1) and a bare h1 .mute (0,1,1) would lose to it however late it sits in the file. The orange is untouched. That one IS the accent, it is the logo orange, and it stays. */ h1 .mute, h2 .mute, h3 .mute, h4 .mute, .display .mute, .h2 .mute { color: inherit; } .hero--stage h1 .mute { color: inherit; } /* ---- 2 · Regulator marks in the hero ----------------------- The client asked for "the SEC logo and the SEBI logo" beside the two registration lines. Neither official seal ships with this project, and both are government trademarks whose use by a regulated firm is a compliance decision, not a design one -- a plausible-looking seal drawn here would be a fabricated credential on the page that states the firm's registrations. So the marks are typographic, and deliberately the SAME marks already used in #regulation (.regbadge__code): the site says SEC and SEBI in its own voice, twice, consistently. When the official artwork is cleared it drops straight in -- the markup comment in index.html carries the swap, and .regmark__art is already sized for it. */ .regmark { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 3.1rem; padding: 0.16rem 0.42rem; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.11em; line-height: 1.35; text-transform: uppercase; border-radius: var(--radius-xs); color: var(--brand); background: var(--brand-50); border: 1px solid var(--brand-200); } .regmark__art { height: 20px; width: auto; flex: none; display: block; } /* One chip, then its sentence -- so the gap inside a pair has to be tighter than the gap between the pairs, or the two read as four. */ .microline--reg { gap: 0.7rem 1.6rem; } .microline--reg > span { gap: 0.58rem; } /* On the hero the chips sit on a photograph, so they invert: the brand blue has nothing to hold on to there. 1px of white at 42% over the scrim measures 4.6:1 against the chip label. */ .hero--stage .regmark { color: #fff; background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.42); } @media (max-width: 560px) { .regmark { min-width: 2.8rem; font-size: 0.62rem; } .microline--reg { gap: 0.6rem 1.1rem; } } /* ---- 3 · "01 02 03, make it better in design" -------------- The three convictions were a tiny mono ordinal (0.78rem, the size of a form label) sitting beside a 1.72rem display line. Nothing about that said "these are the three things"; the numbers read as list furniture and the column read as loose text. Two changes: The ordinal becomes a real numeral -- display face, the same size as the statement it marks -- so the pair reads as one typographic unit instead of a label plus a sentence. It is set in --brand-200, which is quiet enough to sit behind the words at that size. It does NOT take the accent: this section already spends its one orange on "your goals" in the statement, and three big orange numerals beside it would be a second, louder claim on the same eye. The statements then get room. gap goes from a flat 2.1rem to 3.0rem, which is what actually makes three lines read as three convictions rather than as a wrapped paragraph -- and the right column had the vertical space to spend, since the lede beside it runs three lines of display type. No rule, no card, no bullet. The numeral is the structure. */ .creed { gap: clamp(2rem, 3.4vw, 3rem); } .creed__item { grid-template-columns: minmax(2.9rem, auto) minmax(0, 1fr); gap: clamp(0.9rem, 1.7vw, 1.35rem); align-items: baseline; } .creed__n { font-family: var(--font-display); font-size: clamp(1.28rem, 2vw, 1.72rem); font-weight: 400; letter-spacing: 0.01em; line-height: 1.3; color: var(--brand-200); padding-top: 0; } /* Hanging the numerals outside the text column keeps the three statements on one hard left edge, which is the thing being read. Only above 900px -- stacked, there is no column to hang from and the numeral belongs above its line. */ @media (min-width: 901px) { .creed__item { margin-left: calc(-1 * clamp(0.9rem, 1.7vw, 1.35rem) - 2.9rem); } .creed { padding-left: calc(clamp(0.9rem, 1.7vw, 1.35rem) + 2.9rem); } } /* ---- 4 · The promise loses its grey half too --------------- .promise__quote strong was --faint at weight 400: a rendering lighter and thinner than the sentence around it, and the same two-tone headline the client is removing -- here on the one line that states the promise. Inked, and given the weight the tag was asking for. */ .promise__quote strong { color: var(--ink); font-weight: 600; } /* ---- 5 · The first hero slide is a new photograph ---------- Slide 1 changed at the client's request: the boardroom-with- market-screens is out, a lounge conversation behind glass is in. Two consequences, both handled here rather than by touching the scrim, which is shared by all three slides and was measured against them. Contrast first, because the file header asks for it. The scrim was re-measured over the new photograph by compositing it over every pixel of the copy column at 375/760/1024/1440/1728px: the new slide scores 5.27-7.17:1 for white type where the outgoing one scored 4.15-6.61:1. It is a brighter picture but a flatter one, and it clears the old floor at every width, so the alphas below stay untouched. See CREDITS.md for the method. Crop second. The source is 16:9 and the hero is taller than it is wide on a phone, so `cover` throws away roughly three quarters of the frame -- and dead centre of this particular picture is the back of someone's head. Pulling the crop to 68% puts the two people who are facing each other in the window instead. Scoped to :first-child: the other two slides are skylines, which are composed centrally and would be spoiled by the same shift. */ @media (max-width: 720px) { .hero--stage .hero__slide:first-child { object-position: 68% 42%; } } /* ============================================================ v30 · "believe: better. ecosystem: no hub, no wires, photos back, logo top right. brands: real buttons, equal size. global: home keeps the headline, the subtext, a CTA and the picture -- the rest moves to an About page, and About grows subsections in the nav." (client, 2026-08-11) ============================================================ Six asks, in the order they were given. Each is numbered below and each says what it replaced, because every one of them supersedes something written two or three revisions ago that still reads as current if you only look at the CSS. ---- 1 · #believe, third cut ------------------------------ v28 cut this section to a lede and three display lines, and v29 turned the ordinals into display numerals. What was left is honest but thin: three sentences floating in a column with nothing holding them, and a left column of two elements against a right column of three, so the split reads as lopsided rather than as a pair. Three changes, no new colour and no new motion: The convictions get their reasoning back. v26 deleted it to cut 208 words to 63, and that was right about the words and wrong about the shape -- a claim with no sentence under it is a slogan, and this is the section where a stranger decides whether the firm means it. .creed__p already exists from v25; it is used again rather than reinvented. The three sentences are drawn from copy already on this page (the goal-first process in #standard, the named adviser in #why, the published disclosures in #regulation), so nothing here is a claim the site does not already make and stand behind. The rows get a hairline. Nothing separated the three before except vertical space, which at this type size reads as one loose paragraph. A 1px --line above each item turns the column into a register -- and because the min-width:901px rule below hangs the numerals outside the text column, the rule runs the full width including the numeral, which is what makes the ordinals read as an index rather than as decoration. gap goes to 0: the padding inside each row now does that job, and keeping both would double it. The lede gets the subtext and one link. The subtext is the line from the message document that this section was always meant to carry, and the link points at #standard, which is the section that defines the promise the three convictions are drawn from. Both are quiet: the subtext is body copy at --muted, the link is the same brand blue as every other in-page link. It costs the accent nothing -- the one orange in this section is still the on "your goals". */ .creed { gap: 0; } .creed__item { padding-block: clamp(1.3rem, 2.1vw, 1.85rem); border-top: 1px solid var(--line); } .creed__p { margin-top: 0.6rem; max-width: 52ch; } /* The lede column. max-width on the subtext rather than on the column, so the seclabel and the statement keep their own measures (13ch on the statement, set in v28). */ .creed__sub { margin-top: 1.15rem; font-size: 0.98rem; line-height: 1.66; color: var(--muted); max-width: 34ch; } .creed__go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; font-size: 0.92rem; font-weight: 600; color: var(--brand); } .creed__go .arrow { transition: transform 0.25s var(--ease); } .creed__go:hover .arrow { transform: translateX(4px); } /* Stacked, the numeral sits in a 2.2rem column beside the claim (v28) and the reasoning has to clear it, or it hangs under the digits. Subgrid would be the clean answer; it is not safe enough across the browsers this site supports, so the content is wrapped in .creed__c and the row stays two columns at every width. */ @media (max-width: 900px) { .creed__p { max-width: none; } .creed__sub { max-width: 46ch; } } /* ---- 2 · The ecosystem loses its diagram ------------------ v29 built this section as a wiring diagram: a glass hub carrying the Wealthdoor mark, a 1px bus under it, three drops falling onto the cards, and a logo plate closing each card. The client has asked for all of it out except the marks, and for the photographs to come back where the plates were. The diagram is the right thing to lose. It drew a structure the page already states twice -- the brand architecture in #brands says "one group, two child brands" with the marks themselves, and the section head says "one promise, across three businesses". A third telling in 1px rules added a drawing to look at, not a fact to read. And it was fragile: .eco__wires was already display:none below 940px, so two thirds of visitors never saw the diagram the layout above them was built around. What replaces it is the arrangement each card was missing. The mark moves to the head of the card, opposite the icon -- a masthead, which is where a reader looks for "whose is this", and where it no longer needs .ecocard__brandname repeating in type what the logo already says. The photograph takes the foot, on margin-top:auto so the three pictures line up across the row whatever the copy above them does. That ordering matters: icon and mark, then the claim, then the people it is about, then the way in. Photo-first would have made three magazine cards; photo-last makes three statements with evidence under them. .eco__hub, .eco__wires, .eco__bus, .eco__drop, .ecocard__brand and .ecocard__brandname are now referenced by no page. They stay in the file under the same convention as every other superseded block here. */ /* The masthead. space-between, not a grid: the two marks have very different widths and any fixed column would leave one of them floating short of the right edge -- which is the exact corner the client asked for. */ .ecocard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.3rem, 2.2vw, 1.7rem) clamp(1.3rem, 2.2vw, 1.7rem) 0; } .ecocard__badge { margin: 0; } /* Height, not width -- the optical match measured in v21, scaled down from 26/22 to 20/17 now that the mark is a masthead beside a 40px icon rather than a plate of its own. */ .ecocard__logo { height: 20px; width: auto; display: block; flex: none; } .ecocard__logo--nv { height: 17px; aspect-ratio: 5131 / 1000; } /* The photograph. 16/9 as it was before v29 -- CREDITS.md records that ratio as the contract for these three files, and the crops were chosen against it. */ .ecocard__media { margin-top: auto; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); border-top: 1px solid var(--line-faint); } .ecocard__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* .ecocard__body had margin-top:auto's job before; the media has it now, so the body sits tight under the masthead and the gap opens between copy and photograph instead. */ .ecocard__body { padding-top: 1.15rem; } /* ---- 3 · The brand sites become buttons ------------------- .sitepill was a 0.83rem hairline pill at --muted: the same weight as a tag, on the one element in the card that is the point of the card. Two of them, sized by their own text, so "wealthdoor.us" and "wealthdoor.in" came out different widths and the pair read as a wrapped list rather than as a choice between two countries. A 1fr 1fr grid fixes the widths at both ends -- inside each card, and across the two cards, which are themselves equal columns -- so all four buttons match. They take the quiet filled treatment the site already uses for a secondary action: --brand-50 ground, --brand-200 edge, brand blue label at 600. Not btn--primary: these two sit under a paragraph that is not a call to action, and two solid blue buttons per card, four on the row, would outrank the hero's own CTA. The arrow goes to the right edge rather than trailing the word, which is what makes them read as destinations. */ .brandcard__sites { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .sitepill { justify-content: space-between; padding: 0.72rem 0.95rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; color: var(--brand); background: var(--brand-50); border-color: var(--brand-200); transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease); } .sitepill:hover { background: var(--brand-100); border-color: var(--brand-500); color: var(--brand-600); } .sitepill .arrow { transition: transform 0.25s var(--ease); } .sitepill:hover .arrow { transform: translateX(3px); } /* Under 420px the two names plus an arrow will not sit side by side without the type dropping below 0.8rem. One column, full width, still equal. */ @media (max-width: 420px) { .brandcard__sites { grid-template-columns: 1fr; } } /* ---- 4 · #global on the homepage is now a door, not a room - The section carried the whole argument for two markets: a headline, a subtext, four reasoned points with icons, two market tiles and a four-figure stats strip. That is an About page's worth of material sitting six sections into a homepage whose job is to route people, and it was the longest thing on the page by some way. The client's cut is the right one. The homepage keeps the claim (headline plus subtext), one way in, and the picture -- the two market tiles, which are the only part of the panel that says "United States and India" without being read. The four points and the stats now open the Global reach section on about.html, where a reader who followed the CTA is asking for exactly that. Two consequences here. The column ratio widens a little in the panel's favour: with the list gone the left column is four short elements, and 1fr/1.05fr left it looking like a caption beside a picture. And .reachpanel now holds only the map, so its own padding is what separates the tiles from the card edge -- no stats strip, no border above them, nothing to change there. */ .reach--brief { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } .reach__cta { margin-top: clamp(1.7rem, 2.6vw, 2.2rem); } @media (max-width: 940px) { .reach--brief { grid-template-columns: minmax(0, 1fr); } } /* ---- 5 · "About us" grows subsections --------------------- The nav was six flat links and About pointed at an anchor halfway down the homepage. There is a real About page now, and the client asked for the sections under it to be reachable from the bar. A disclosure, not a hover menu. The trigger is a

and its --- The client asked for the "Your message reaches the right team, not a queue" line to go, and for the CTA to read "Talk to an adviser" -- which was word-for-word what the

and its
--- The client asked for the "Your message reaches the right team, not a queue" line to go, and for the CTA to read "Talk to an adviser" -- which was word-for-word what the