/* Wykeham layout. A 12-column grid on a 1280px content measure, inside a 1440 canvas. */ :root{ --canvas-max:1440px; --content-max:1280px; --measure-prose:66ch; /* body copy never runs wider — ch of body type */ --measure-lead:44ch; /* standfirst / lead paragraph */ /* Heading cap in root rem so it matches the prose column in pixels. 16ch on Newsreader display was ~365px; 66ch body is ~666px, so titles wrapped inside their own paragraphs. 42rem ≈ 672px at a 16px root. */ --measure-display:672px; /* px, not ch: 16ch of Newsreader is ~365px */ --page-x:80px; /* page side padding, desktop */ --page-x-sm:24px; --grid-cols:12; /* @kind other */ --header-h:72px; /* nav height — the lockup's 72px test case */ /* Homepage hero. Raised from 520 in the 2026 redesign: the composition changed from a title over an abstract to title + lead + action, vertically centred, and 520 crowded it. 620 is the design value. */ /* 720 since the polish pass of 13 October 2026 (row 12, client decision). The header overlays the band, so this IS the 720 "including the 72px header" the handoff specifies, and the field asset is baked to match. Verified against the design file, whose hero band lays out at 1440x720. */ --hero-h:720px; /* --- ADDED FOR SITE BUILD (client decision, 10 September 2026) --- The two sector pages still on the Home hero component (Software, Manufacturing) run 488 under the 72 header: 560, the interior banner height chosen against the reference sites — see tokens/spacing.css. */ --hero-h-industry:488px; --hero-h-about:400px; /* about hero render height (2560x800 asset) */ /* The proof band overlaps the hero's lower edge. Was 80; the redesign's band is a taller three-module composition and 56 is the design value. */ --card-overlap:56px; --pcard-media-h:144px; /* image well on the proof band's case-study card */ /* Below 900 the profile portrait stops sitting beside the name and moves above it. Left full-width it becomes a 4:5 slab most of a screen tall, so it is capped — the portrait is supporting evidence, not the page. */ --identity-portrait-sm:320px; /* Index banners bottom-align a display-1 title against a standfirst. The minimum holds the band open when the title is one short word ("Services"). */ --banner-min-h:196px; /* The disclosure glyph's box on the scope accordion. Square, hairline, copper. */ --glyph-box:34px; /* Card grids are count-agnostic: auto-fit against a minimum rather than a fixed column count, so a section with three entries and one with nine both lay out correctly and neither depends on the number. */ --card-min:300px; --artcard-min-h:236px; /* --- ADDED FOR SITE BUILD (2026 redesign) --- Case-study card floor. SECTOR DIGITAL INFRA draws the case-strip cards at min-height:220px with the "Read more" link pushed to the foot, so a two-line title and a one-line title leave the link at the same height. */ --workcard-min-h:220px; /* --- ADDED FOR SITE BUILD (2026 redesign) --- About values band (punch-list 2e): the constraint field is a 460px column at the band's left edge, and the content starts 500px from that edge. */ --values-field-w:460px; --values-content-x:500px; /* Travel on the hero copy's first-paint fade-up. Small: the movement is a courtesy under the opacity, not the effect itself. */ --hero-rise:8px; /* Capability tile: the design gives this one component a 5px underline offset and a 3px arrow nudge, both a step above the site defaults, because the type is larger and sits on a photograph. */ --captile-underline-offset:5px; --captile-nudge:3px; --rail-w:320px; /* article side rail: authors and topics */ /* --- ADDED FOR SITE BUILD — Careers open-roles pages (10 October 2026) --- The ruled row on these pages is the sector/service intro-band idiom with a fixed right column: 1fr | 660 with a 64 gap, which at the 1120 content width leaves 396 for the label column. */ --job-col-w:660px; --job-gap:64px; --job-mark-w:28px; /* the en-dash marker column in a role's lists */ /* ADDED FOR SITE BUILD — polish pass 2 (handoff, 13 October 2026, row 25). The Private Equity differentiators picture stretches to whatever height the three points beside it make, but never reads as a strip: no token set a media minimum, because no other picture on the site is sized by the column next to it. */ --pe-diff-media-min:480px; /* --- ADDED FOR SITE BUILD — article exhibits (handoff, 26 September 2026) --- The exhibits are drawn at a 1120 figure: prose + rail in the design's own article grid. This build's grid is 1280 (864 prose + 96 gap + 320 rail), so the figure breaks out across both columns and the fr tracks absorb the extra 160. Every fixed measure below is the handoff's, and none of them exists on the space scale. */ --ex-pad:48px; /* figure padding, desktop */ --ex-pad-y-sm:32px; /* figure padding, mobile */ --ex-pad-x-sm:20px; --ex-cell-y:18px; /* data cell, vertical */ --ex-cell-y-lg:22px; /* data cell in the roomier tables */ --ex-cell-x:16px; --ex-head-y:14px; /* header row and country label cells */ --ex-head-x:16px; --ex-gap:4px; /* matrix column gap and rail gap */ --ex-panel-pad:20px; /* the grey panel behind a second layer */ --ex-note-gap:6px; /* between footnote lines */ --ex-foot-gap:28px; /* table to footnotes */ --ex-layer-1:40px; /* above the first layer label */ --ex-layer-2:56px; /* above the second */ --ex-layer-gap:14px; /* layer label to its table */ --ex-indent-sm:54px; /* mobile field indent under a row strip */ --ex-figure-y:48px; /* clear space above and below each figure — 48 since 13 October 2026 (row 6); it was 64 when the figure broke out across the rail */ --ex-rule-w:2px; /* the copper top rule and the rail's stage edge */ --ex-numcol:64px; /* the T-/stage-/test number column */ --ex-marketcol:120px; /* Market column, A1 Ex 2 matrix */ --ex-labelcol:184px; /* row-label column, A1 Ex 2 country evidence */ --ex-dimcol:240px; /* Dimension column, A2 Ex 2 public record */ /* --- ADDED FOR SITE BUILD (2026-09-10) --- CASE STUDIES INDEX draws two measures the scale did not carry: the index standfirst beside the title at 60ch (the dark banner's body copy already runs at that width, still as a literal at site.css .pagebanner__body p), and the confidentiality note above the grid at 80ch, wide enough that its one sentence wraps once rather than running the content width. */ --measure-standfirst:60ch; --measure-note:80ch; /* --- ADDED FOR SITE BUILD (2026-09-10) --- CASE STUDY "more case studies": the related card floor. The index card runs 236; these carry an outcome line instead of a body and the design floors them at 196. */ --artcard-min-h-related:196px; /* --- ADDED FOR SITE BUILD (round 2, 21 September 2026) --- CAREERS: the body column beside a section heading (660) and the culture band's 3:2 photograph column (520). */ --careers-col-w:660px; --careers-media-w:520px; /* ADDED FOR SITE BUILD — the culture collage frame (handoff 25 September 2026, change 8) is drawn 520 x 460. The width is --careers-media-w above; the height rides on this ratio so the collage scales with its column instead of being pinned. Unitless because aspect-ratio takes numbers, not lengths: 520/460 == 26/23 exactly. Every coordinate inside the collage is a percentage of its own box, so no vertex needs a token of its own. */ --careers-collage-ratio:26 / 23; /* ADDED FOR SITE BUILD — the region tile's overlapping card (change 10) is drawn 320 wide, overhanging the foot of a 12:5 image. */ /* ADDED FOR SITE BUILD — 13 October 2026 (client). The touch target floor. WCAG 2.2 AA asks 24; this is the AAA figure, and the one the client asked for, applied to the controls that are hardest to hit. */ --tap-target:44px; /* ADDED FOR SITE BUILD — AAA pass round 2, 15 October 2026 (client). 44 is the 2.5.5 figure exactly, so a box measuring 44.0 clears the criterion and has no margin at all. The client asked for real margin and counts anything inside 5% as not done, which 44 is by definition. This is the value anything sized FOR margin uses: 48 is 9.1% clear. --tap-target stays 44 because that is what the standard says and what the coarse-pointer box rules were measured against. */ --tap-target-clear:48px; --careers-loccard-w:320px; /* ADDED FOR SITE BUILD — 14 October 2026 (client). The single Where we work card is capped here rather than running to the content width: one 12:5 well across the full 1265 stood 527 tall and dominated the section. This is close to the width each of the two region cards had. */ --careers-single-w:720px; /* --- ADDED FOR SITE BUILD (client decision, 10 September 2026) --- Service hero image column. At 480 the 3:4 well ran 640 tall and set the hero's height on its own; at 360 it is 480, inside the 560 banner. */ --servicehero-media-w:320px; /* round 2: 320 × 408, so the hero holds 560 with the header */ /* CONTACT "Our Locations": two office cards, 320 each, centred. */ --office-w:320px; /* --- ADDED FOR SITE BUILD (chunk 1) --- */ /* Responsive counterparts to the header and hero heights. The brief calls for both to reduce on mobile; the DS shipped only the desktop values. */ --header-h-sm:60px; --hero-h-sm:440px; --hero-h-about-sm:340px; /* ADDED FOR SITE BUILD — 14 October 2026 (client: the mobile and tablet pass). Home's band is --hero-h + the header, 792, at every width; on a 375x667 phone that is taller than the screen and nothing below the hero is ever in view. 520 + the 60 mobile header leaves ~87px of the panel below showing on the shortest common phone, which is what tells a visitor the page continues. Desktop above 1200 keeps 720 — the client's decision of 13 October 2026 — and is not touched. The field is baked to match, as --hero-h is: hero-field-mobile-860x1040.png. Change this and the field must be re-baked, never stretched. */ --hero-h-mobile:520px; /* ADDED FOR SITE BUILD — 14 October 2026. The landscape answer. A phone or iPad turned sideways is 896-1024 wide and 375-768 tall, so width alone cannot say the band is too deep; this caps it against the viewport instead. A token rather than a height media query because site.css holds exactly three media-query literals (1200/900/600) and this would be a fourth. --hero-h-cap-dvh is the same figure in svh, declared after it so a browser that does not know svh simply keeps the vh value; svh is the address-bar-SHOWN height, which is the conservative one on iOS Safari. */ --hero-h-cap:88vh; --hero-h-cap-dvh:88svh; /* ADDED FOR SITE BUILD — 14 October 2026. The About "Our name" plate. Was a bare 280px width on .ournamesec__fig; stacked below 900 it needs to be a cap on a full-width figure rather than a fixed width indenting it. */ --ournamesec-fig-w:280px; /* ADDED FOR SITE BUILD — 14 October 2026. Stacked, the Private Equity evidence picture takes a 4:3 well rather than the 480px floor it has beside the points. This is the FLOOR for that stacked state, not 0: .evidence__media is the one well on the site sized by min-height instead of .imgwell's aspect-ratio, so dropping the floor to 0 would collapse the photograph to nothing on any engine that does not support aspect-ratio. Below the 4:3 height at every phone width, so the ratio wins where it is supported and this shows the picture where it is not. */ --pe-diff-media-min-sm:240px; /* ADDED FOR SITE BUILD — 14 October 2026 (client). The Country / Region combobox's popup. 288 is eight 36px rows on a pointer device, enough to show that the list is long without covering the fields beneath it. The vh cap is what matters on a phone, where the on-screen keyboard already owns the lower half of the screen: 44vh leaves the input and a few rows of results visible above it. Below .site-header's 60, so an open list can never sit over the fixed bar. */ --combo-max-h:288px; --combo-max-h-vh:44vh; --combo-z:39; /* Mobile menu panel width. Slides from the right on --surface-page. */ --menu-panel-w:min(360px,86vw); /* Wordmark lockup geometry, matching assets/mark.svg. Newsreader 400 cap height .733em; the mark is a .399em-wide solid at a 0.6 width:height ratio, sheared 17 degrees off vertical. All in em so the lockup scales with font-size. The ratio was 0.4 until the solid was found to read as a thin slash rather than a parallelogram at nav size — .266em is only 5.3px of solid against 13.3px of height at 20px. At 0.6 it is 8.0px. The shear is unchanged, as are --wordmark-mark-h, --wordmark-mark-gap and --wordmark-mark-lift. NOTE: components/brand/Wordmark.jsx and Mark.jsx still default to ratio 0.4. They are reference-only and no longer match the shipped asset. */ --wordmark-mark-w:.60231em; /* .399em glyph width + .20331em shear */ --wordmark-mark-h:.665em; /* unchanged: .399em / 0.6 ratio */ --wordmark-mark-gap:.24em; /* the .30em spec less the .06em trailing letterspace */ --wordmark-mark-lift:.068em; /* cap height .733em less mark height .665em */ --wordmark-size-nav:20px; /* the DS lockup test case at --header-h */ --wordmark-size-footer:22px; /* --- ADDED FOR SITE BUILD (chunk 2) --- */ /* Optical offset that drops the small copper workstream numeral onto the first baseline of the Newsreader title beside it. Transcribed from components/content/WorkstreamList.jsx, which ships it as `paddingTop: 6`. Off-scale on purpose: it is an optical correction, not a spacing decision. */ --workstream-num-offset:6px; /* Width of the Services dropdown panel. Sized to the four menu descriptors. */ --nav-menu-w:380px; /* --- ADDED FOR SITE BUILD (2026-09-10) --- Header glyphs — the globe beside EN and the search magnifier, the design's own 15px drawings (Site Design Launch (1) export), 6px from the label. */ --nav-icon-size:15px; --nav-icon-gap:6px; /* --- ADDED FOR SITE BUILD (chunk 3) --- */ /* Media aspect ratios. The industry card image steps to 4:3 below 900px — 3:2 loses too much vertical subject at narrow widths. The portrait ratio defines the reserved rail slot on Contact, which renders nothing until a real portrait exists. */ --card-media-ratio:3 / 2; --card-media-ratio-sm:4 / 3; --portrait-ratio:4 / 5; /* Portrait width in the principals grid. The well keeps a true 4:5 — at 200px that is 250px tall, against a ~201px text block, so the photo sits alongside the text in weight rather than leading it. A full-bleed 4:5 well in a 406px card renders 507px tall, two and a half times the text. Constraining the width rather than capping the height keeps the ratio honest and means no face is ever cropped to fit. */ --portrait-card-w:200px; /* The industry abstracts carry their subject centre-right of frame; the card crop is pulled that way rather than centred. */ --card-media-position:75% 50%; }