/* ========================================================================== AMIN APAC — profile-services.css "What they do", the numbered service list. On profile-v2.html only. THIS REPLACED A PINNED STEPPER (client direction, 2026-09-01), and the reason is worth keeping because it is the trade any scroll-gated section makes. Measured, on M2.0's five services: stepper: 3780px of section (4.2 screens) to show 5 names and 3 sub-services. 12 of 15 sub-services behind scroll. list: ~820px to show 5 names and all 15 sub-services. A stepper is the right device when each item is one abstract word doing emotional work - the reference uses it for exactly that, four one-word claims, where the mechanism IS the message and nothing is being withheld. A services list is the opposite: the reader arrives with a question ("do they do crisis comms") and the answer has to be scannable, linkable and reachable by Cmd-F. Scroll-gating it works against the one job the section has. THE REFERENCE CHANGED (client direction, 2026-09-02). It was unitedcarriers.com/about's numbered row list; it is now the capability grid that Analogue Agency, Raw Materials and Aino Agency all set this content in, pulled from Mobbin. The reason is in the note on .svc-list below: our data has three levels of taxonomy and a row list can only show two of them without spending 900px. WHAT CARRIED OVER FROM THE REFERENCES, and what did not: - the practice area as a column heading over a rule. That rule is the only hairline left in the section, and it separates a heading from its own list rather than one row from the next. - the numerals. 01-05 signals completeness - "this is all of it" - which is worth more on a services list than on a values list. They moved from a rail to a prefix; see .svc-head. - NOT the dark ground several of them use. Ours is the last band before the dark footer, and inverting it would end the page in two dark bands with nothing between them. The footer is the switch. - NOT the boxed columns of Raw Materials. A card here would be the only card in the section. Deletable set: this file, js/profile-services.js and the one
in profile-v2.html. ========================================================================== */ /* -------------------------------------------------------------------------- THE BAND IS DARK (client direction, 2026-09-02) WHAT IT WAS: --surface-alt #F9F9FB. Measured against the white above and below it that is 1.05:1 - not a tone change, a rounding error. base.css's surface rule makes the tone change the separator, and this separator was invisible at arm's length, so the section had no ground at all rather than a quiet one. WHAT THE PAGE LOOKED LIKE. Ground sequence, top to bottom: dark video hero, white, white, white, 1.05:1 grey, white, 1.05:1 closer, dark footer. One dark moment and then roughly six thousand pixels of one surface. A page this long needs a second beat. WHY THIS SECTION AND NOT THE APPROACH BAND, which is the real question, because .approach-head is 84px against these names' 68 and the two were competing for the same job on the same white. The stage goes to the section the reader OPERATES. Every name here is a real button and the scroll drives them; the approach band is read, not used. So the approach band keeps the largest type and this one takes the ground - two currencies, one each, which is a cleaner split than both shouting on white. AND IT FIXES THE REVEAL'S CONNOTATION. Grey type on white is a UI convention that means DISABLED. Grey type on black is a stage convention that means NOT YET LIT. This section's whole conceit is names coming into light as the page scrolls; on white it was fighting that reading, on dark it uses it. --ink, NOT #000. It is the token the hero stage and the footer already carry, so this is the site's dark rather than a third one. 17.8:1 under white. EVERY TONE BELOW IS A TOKEN so the light band is one swap away, and the values are measured rather than picked: --svc-hi #FFFFFF 18.1:1 headings, the lit name --svc-mid #C9CCD2 11.3:1 the description --svc-int #B4B8C0 9.1:1 the intro --svc-lo #9A9EA8 6.8:1 eyebrow, sub-services --svc-unlit #4C505A 2.2:1 the far end of the name ramp --svc-open --purple 4.1:1 the open service - see the note below --svc-touch --lavender 10.5:1 hover and focus - see the note below --svc-rule 22% white 2.0:1 the sub-service separator, composited Read off the rendered page, not calculated from the hex - the last two are composited values and the ramp's ends were sampled by forcing --t to 0 and 1 on a live name. The unlit tone is deliberately under any floor for copy, and legitimately so for the same reason the light version's was - see the long note on .svc-name below. 2.24:1 here against the 1.9:1 it replaced, and the step from unlit to lit is 8.07:1 - wider than the light band managed, which is the reveal getting louder, not just different. -------------------------------------------------------------------------- */ .svc{ background:var(--ink); padding:var(--sec) 0; --svc-hi:#FFFFFF; --svc-mid:#C9CCD2; --svc-int:#B4B8C0; --svc-lo:#9A9EA8; --svc-unlit:#4C505A; --svc-open:var(--purple); --svc-touch:var(--lavender); --svc-rule:rgb(255 255 255 / .22); /* Read by the shared eyebrow rule in css/profile-v-system.css - see the note there. Without it that rule's --gray lands at 1.43:1 on this ground. */ --eyebrow-ink:var(--svc-lo); /* THE LIGHT BAND, kept whole rather than deleted: paste these six over the six above and delete the background line, and the section is exactly what it was. background:var(--surface-alt); --svc-hi:var(--black); --svc-mid:var(--slate); --svc-int:var(--gray); --svc-lo:var(--gray); --svc-rule:var(--line); --svc-open:var(--purple); --svc-touch:var(--purple); --svc-unlit:color-mix(in srgb, var(--ash) 34%, var(--surface-alt)); */ } /* THE GROUND IS FULL BLEED, THE CONTENT IS IN THE CONTAINER (client direction, 2026-09-02). The inline padding was hero V's clamp, so the eyebrow sat on the same vertical as the agency name in the hero and "Our story" above it. The page has since moved the other way: every band except the hero is back in the site's 1400px container, and "Our story" is centred inside it, so matching the hero would now leave this the odd one out. .wrap's own two numbers, declared here rather than by adding the class, because the pin needs this element to stay the grid child of .svc-pin. */ .svc-wrap{ width:100%; margin-inline:auto; padding-inline:var(--s6); /* CAPPED, THOUGH THE SECTION IS STILL FULL BLEED. The ground runs edge to edge; the content does not. Measured at 1920 the uncapped row was 1829px wide holding a service name, three short sub-services and a two-character numeral - 580px of it dead space between the name and its own sub-services. A hero name or a 76%-wide photograph can hold that measure. A three-item list cannot, and stretching one to fit does not make it look generous, it makes it look like a table with the wrong column widths. 1240, ARRIVED AT BY MEASURING TWICE. 1500 was the first cap and it fixed the middle of the row but not the end of it: with the name track sized to its content the row's text finished at 910 while the hairline carried on to 1400, and 490px of rule with nothing under it draws the eye straight to the gap. The rule belongs to the list, so it has to end near the list. STILL LEFT-ANCHORED, and now anchored to the CONTAINER rather than to the hero's gutter - which is the only thing that changed here. The cap moved off this element onto .svc-header and .svc-list below, so this box can be .wrap's 1400 while the row keeps the 1240 measured above; centring the 1240 instead would push the eyebrow 56px inboard of "Our story", "In practice" and the work grid, all of which start at the container's content edge. Below 1240 nothing changes. */ max-width:1400px; } /* The 1240 cap, moved here from .svc-wrap so the wrap can be the container. Same number, kept because it is still the widest this band should ever get. CENTRED, NOT LEFT-ANCHORED - and that is a correction, not a preference (client direction, 2026-09-02). It read "left-anchored, so the row starts on the container's content edge with every other band on the page", which was correct while this section was a list of hairline rows with a numeral in the left margin. It is not that any more: the header sets its own contents to text-align:center and the stack below caps at 900 with margin-inline:auto. So the cap was doing something nobody asked for. Measured at 1400: the wrap gives a 1352px content box, the header took 1240 of it flush left and centred its type on 644, while the stack centred on 700. Two centred blocks on two different axes, 56px apart - which is exactly far enough to look like a mistake and not far enough to look like a decision. Both boxes now centre in the same container, so both axes land on 700. */ .svc-header, .svc-list{ max-width:1240px; margin-inline:auto; } /* THE LIST FILLS THE HEADER'S WIDTH. IT USED TO SHRINK TO ITS ROWS AND THAT WAS THE WRONG FIX (client direction, 2026-09-02). The reasoning behind the shrink was sound on its own terms - measure both tracks, then size the list to the widest row, so no hairline runs past the content it belongs to. But it was solving for one row in isolation and the reader does not see one row. Measured at 1440 it left the list 880px wide under a 1240px header, so the rules stopped 360px short of the intro paragraph directly above them. Two content widths in one section reads as a fault, and it is the first thing anyone looking at the section noticed. ONE MEASURE FOR THE WHOLE SECTION. The eyebrow, the heading, the intro and the grid all end inside the same vertical. */ /* -------------------------------------------------------------------------- 01. The header block Heading left, intro right, eyebrow spanning both as its own row. The same arrangement, and the same reasoning, as .approach-grid directly above it: spanning puts something in the top-left corner so the heading is not the first thing to arrive out of empty space, and it starts both columns on row 2 so they align to each other rather than one sitting under a label the other does not have. -------------------------------------------------------------------------- */ /* 1.3 : 1, NOT 1 : 1. The heading is display type that wants two lines; the intro is one sentence. Equal columns gave the heading three lines and the intro two - the same imbalance, and the same fix, as .approach-grid's 1.15/.85 directly above. */ .svc-header{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:clamp(32px, 5vw, 88px); align-items:end; /* SMALL, BECAUSE THE RUNWAY IS ALREADY DOING THIS JOB. .svc-list carries 12vh of top padding as the scrub's pace control, and 60px of header margin on top of it measured 196px between the intro and the first name - the header floating away from the stack it introduces. 24 + the runway lands around 150, which is the pause the section wants and not a gap. */ margin-bottom:clamp(16px, 2vh, 28px); } /* THE MARGIN HERE WAS DEAD. --s10 was declared and then overridden to 0 by the centred-header rule further down this file, so 40px was written and 0 applied - the first line anyone tuning this gap would have edited is the one that does nothing. The gap belongs to .svc-header's row-gap now, and the colour belongs to base.css's .eyebrow: this rule and .approach-eyebrow's were the same four declarations, and the copy carried --ash into two bands while the story band kept --gray. See css/profile-v-system.css. */ .svc-eyebrow{ grid-column:1 / -1; margin:0; } /* RAISED OFF .story-head's 34/42, WHICH IT USED TO SHARE. The service names below are display type now, and a 34px section heading over a 40px list item is an inverted hierarchy - the label reading smaller than the things it labels. The scale holds a clear gap at every width: 60/40 at 1920, 52/36 at 1440. That it no longer matches .story-head is deliberate rather than drift. The story band is a two-column section whose heading sits beside a measure of body copy; this one is full bleed and closes the page. The two are not the same job at the same width, and forcing one number across both was what produced the inversion. It still sits clearly under .approach-head's 84px display step, so the page reads hero > approach > svc > story. */ .svc-h2{ margin:0; /* THE CEILING IS REACHED AT ~1278px OF VIEWPORT, WHICH IS DELIBERATE AND IS THE RULE FOR EVERY FLUID SIZE IN THIS FILE. The measure stops growing at 1240; a vw-based size that carries on past it puts more type into a column that is no longer getting wider, which is exactly what happened here - at 1920 a 60px heading broke into three lines in a 540px column. Type and measure have to stop together. */ font-size:var(--pf-h2); line-height:1.1; font-weight:500;letter-spacing:-.018em; color:var(--svc-hi); text-wrap:balance; } /* ON THE PROSE STEP NOW. It ran clamp(15,1.3vw,17) at a 1.6 ratio, which was a fourth body size and a fifth leading ratio in a page that declares one of each. It is a lede - base.css sets .lede at 18/27 in --gray - so that is what it is, and it stops shrinking to 15 on a tablet where it is the only sentence explaining how the stack below it works. */ .svc-intro{ margin:0; font-size:var(--pf-body);line-height:var(--pf-line); color:var(--svc-int); max-width:52ch; } .svc-intro:empty{display:none} /* -------------------------------------------------------------------------- 02. The stack One centred column of display type. Every service is a name; the open one is black and shows its sub-services, the rest sit back in a pale grey. Cut against Klarna's "Explore our offering", which the client sent as the target: mobbin.com/sites/sections/2dcd9862-9787-411f-89ae-42a8465f2be6 THIS IS THE FOURTH LAYOUT FOR THIS SECTION AND THE FIRST THAT IS ABOUT THE NAMES. The row list, the capability grid and the plate variant all treated the sub-services as the payload and the name as its label - which is why each of them spent a column, a track or a picture slot solving where to put fifteen short strings. This inverts it: the five service names ARE the section, at a size that says so, and the sub-services are what one of them says when you ask. WHAT THAT COSTS, AND IT IS THE SAME COST THE PINNED STEPPER WAS DELETED FOR. Only the open service's sub-services are on screen: twelve of fifteen are behind an interaction again. The difference is what is being withheld. The stepper hid the NAMES - a reader could not see that crisis work existed without scrolling four screens. Here every name is visible, at the largest type on the page, from the first frame; what is behind a click is the detail under one of them. A reader who arrives asking "do they do crisis comms" is answered without touching anything. The mitigations are in the markup rather than here: real