/* Services v2 (2026-09-08). Same markup as v1; desktop rebuilt as flow layout at the approved type scale. Tablet and mobile blocks are carried over below. */ .ptsb-services-page { background: var(--ptsb-precision-cream); font-size: 16px; line-height: 1.5; } .ptsb-precision-header--services { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; background: transparent; color: var(--ptsb-precision-cream); } .ptsb-precision-header--services .ptsb-precision-header__inner { border-color: rgba(252, 249, 244, .42); } /* Hero band. */ .ptsb-services-hero { min-height: var(--ptsb-precision-page-hero); padding: 236px 0 80px; background: var(--ptsb-precision-navy); color: var(--ptsb-precision-cream); } .ptsb-services-hero p { margin: 0 0 22px; font-size: 16px; font-weight: 500; letter-spacing: .02em; line-height: 1; text-transform: uppercase; } .ptsb-services-hero h1, .ptsb-services-service h2, .ptsb-services-scope h2 { margin: 0; font-family: var(--ptsb-precision-display); font-weight: 400; } .ptsb-services-hero h1 { max-width: 660px; margin-left: -4px; font-size: 68px; font-weight: 500; letter-spacing: -.045em; line-height: 1.04; } /* One service: headline, lede, then image left / details right. */ .ptsb-services-service { padding-top: 112px; } .ptsb-services-service h2, .ptsb-services-scope h2 { font-size: 56px; letter-spacing: -.03em; line-height: 1.05; } .ptsb-services-service__intro, .ptsb-services-scope > .ptsb-precision-rail > p { margin: 28px 0 0; font-size: 22px; letter-spacing: -.01em; line-height: 1.5; } .ptsb-services-service__grid { display: grid; grid-template-columns: 570px minmax(0, 1fr); gap: 60px; margin-top: 56px; } .ptsb-services-service__project .ptsb-precision-crop { position: relative; width: 570px; height: 354px; border-radius: var(--ptsb-precision-radius-lg); } .ptsb-services-service__project .ptsb-precision-crop > img { position: absolute; max-width: none; object-fit: fill; } .ptsb-services-service--industrial .ptsb-precision-crop > img { width: 107.61%; height: 115.54%; left: -7.61%; top: -7.78%; } .ptsb-services-service--commercial .ptsb-precision-crop > img { width: 126.11%; height: 135.41%; left: -5.32%; top: -27.64%; } .ptsb-services-service--institutional .ptsb-precision-crop > img { width: 113.26%; height: 121.61%; left: -.9%; top: -5.26%; } .ptsb-services-service__project > a { display: inline-flex; gap: 16px; align-items: center; margin: 36px 0 0 13px; color: var(--ptsb-precision-action); font-size: 19px; font-weight: 600; letter-spacing: .02em; line-height: 1; text-transform: uppercase; } .ptsb-services-service__project > a img { width: 21px; height: 18px; transition: transform .2s ease; } /* The right column ends on one line across all three services: the list is anchored 20px clear of the photo's bottom edge and the slack falls in the gap above 'What We Deliver', so a longer paragraph cannot push the last rule past the picture. */ .ptsb-services-service__details { display: flex; min-height: 354px; flex-direction: column; padding-top: 4px; } .ptsb-services-service__details > p { margin: 0; font-size: 16px; line-height: 1.5; } .ptsb-services-service__details h3 { margin: 40px 0 0; font-family: var(--ptsb-precision-display); font-size: 24px; font-weight: 400; letter-spacing: -.02em; line-height: 1.2; } .ptsb-services-service__details ol { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ptsb-precision-hairline-strong); } .ptsb-services-service__details li { display: grid; grid-template-columns: 88px minmax(0, 1fr); min-height: 56px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ptsb-precision-hairline); font-size: 16px; line-height: 1.4; } .ptsb-services-service__details li span:first-child { color: var(--ptsb-precision-grey); font-family: var(--ptsb-precision-display); font-size: 16px; } /* Full scope: four cards on a sideways-scrolling row that runs off the edge. */ .ptsb-services-scope { position: relative; padding: 112px 0 var(--ptsb-precision-section); } /* The Home service cards deep-link into these sections, so a jump should land with the heading clear of the top edge rather than flush against it. */ .ptsb-services-service, .ptsb-services-scope { scroll-margin-top: 32px; } .ptsb-services-scope::after { content: ""; display: none; position: absolute; z-index: 1; right: 0; bottom: var(--ptsb-precision-section); width: 160px; height: 480px; pointer-events: none; background: linear-gradient(to right, rgba(252, 249, 244, 0), var(--ptsb-precision-cream)); } /* All four scope cards sit inside the rail, like the services row on the home page. Below the desktop anchor they go back to a sideways scroll. */ .ptsb-services-scope__cards { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 56px; scrollbar-width: none; } .ptsb-services-scope__cards::-webkit-scrollbar { display: none; } .ptsb-services-scope__cards article { position: relative; min-width: 0; } .ptsb-services-scope__cards article + article::before { content: ""; position: absolute; top: 0; bottom: 0; left: -15px; width: 1px; background: var(--ptsb-precision-hairline); } .ptsb-services-scope__cards .ptsb-precision-crop { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ptsb-precision-radius-sm); } .ptsb-services-scope__cards .ptsb-precision-crop > img { position: absolute; max-width: none; object-fit: fill; } .ptsb-services-scope__cards article:nth-child(1) .ptsb-precision-crop > img { width: 106.41%; height: 107.03%; left: -3.71%; top: -4.77%; } .ptsb-services-scope__cards article:nth-child(2) .ptsb-precision-crop > img { width: 112.96%; height: 113.62%; left: -5.27%; top: -6.15%; } .ptsb-services-scope__cards article:nth-child(3) .ptsb-precision-crop > img { width: 100%; height: 100.58%; left: 0; top: -.58%; } .ptsb-services-scope__cards article:nth-child(4) .ptsb-precision-crop > img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; } .ptsb-services-scope__cards h3 { min-height: 2.3em; margin: 28px 0 0; font-family: var(--ptsb-precision-display); font-size: 24px; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; } .ptsb-services-scope__cards p { margin: 16px 0 0; font-size: 16px; line-height: 1.5; } /* Hover picks one card out of the row, the same way the services row on the Home page does. Nothing in these cards is a link, so there is deliberately no pointer cursor and no :focus-within - this reads as a highlight, not as a button. Gated on :has() so the gap between cards never dims all four at once, and on a hover-capable pointer so a tap on a phone cannot leave a card stuck at half strength. */ @media (hover: hover) { .ptsb-services-scope__cards article { transition: opacity .28s ease; } .ptsb-services-scope__cards .ptsb-precision-crop > img { transition: transform .5s ease; } .ptsb-services-scope__cards:has(article:hover) article:not(:hover) { opacity: .45; } .ptsb-services-scope__cards article:hover .ptsb-precision-crop > img { transform: scale(1.04); } } /* Fading is fine without motion; the zoom is not. */ @media (prefers-reduced-motion: reduce) { .ptsb-services-scope__cards .ptsb-precision-crop > img { transition: none; } .ptsb-services-scope__cards article:hover .ptsb-precision-crop > img { transform: none; } } /* ===== v2 responsive (2026-09-08): fluid below the 1600 anchor, stacked below 768. Written against the v2 desktop base; the v1 frozen mobile frames are not used. ===== */ @media (max-width: 1199px) { /* The same slide cue Home's service row uses, and for the same reason: this row scrolls sideways but said so with a gradient panel absolutely positioned on the section - 160px wide, 480px tall, right edge only - which was switched off again below 767px, so on a phone the cards simply stopped at the screen edge with nothing to say there was more. The panel is replaced by a mask on the scroller's own box. An ::after inside a scroller travels with the content; a mask is applied to the element, so it holds still. Both edges, and softly - the mask stops at 40% rather than running to nothing, so the card at the edge is veiled rather than erased. A row that softens on both sides reads as a window onto something wider than the screen; a hard fade on one side reads as damage. The row goes full-bleed to make that work. It used to start at the rail and bleed right only, so a left-hand veil would have eaten 40px of the first card. Now it runs edge to edge with the rail's own gutter as padding, which is how Home's row is built - the veil covers mostly gutter at rest, and the cards still line up on the rail. */ .ptsb-services-scope::after { display: none; } .ptsb-services-scope__cards { display: flex; width: calc(100% + (2 * var(--ptsb-precision-gutter))); margin-inline: calc(-1 * var(--ptsb-precision-gutter)); gap: 40px; padding-inline: var(--ptsb-precision-gutter); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; --edge: 40px; --edge-veil: rgba(0, 0, 0, .4); -webkit-mask-image: linear-gradient(to right, var(--edge-veil) 0, #000 var(--edge), #000 calc(100% - var(--edge)), var(--edge-veil) 100%); mask-image: linear-gradient(to right, var(--edge-veil) 0, #000 var(--edge), #000 calc(100% - var(--edge)), var(--edge-veil) 100%); } /* Felt rather than seen, but it turns a vague drag into a row that lands on a card, which is what tells you the row was built to be moved. */ .ptsb-services-scope__cards article { scroll-snap-align: center; } .ptsb-services-scope__cards article { width: 300px; flex: 0 0 300px; } .ptsb-services-scope__cards article + article::before { left: -20px; } .ptsb-services-scope__cards .ptsb-precision-crop { height: 225px; aspect-ratio: auto; } .ptsb-services-scope__cards h3 { min-height: 0; } .ptsb-services-service__details { display: block; min-height: 0; } .ptsb-services-service__details h3 { margin-top: 40px; } .ptsb-services-service__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; } .ptsb-services-service__project .ptsb-precision-crop { width: 100%; height: auto; aspect-ratio: 570 / 354; } } @media (max-width: 767px) { .ptsb-services-page { font-size: 16px; } /* Same as the About hero - see the note in about.css. The 495px floor is a desktop number and is dropped here; padding decides the height. */ .ptsb-services-hero { min-height: 0; padding: 132px 0 56px; } .ptsb-services-hero p { margin-bottom: 24px; font-size: 12px; } .ptsb-services-hero h1 { margin-left: -2px; font-size: 40px; } .ptsb-services-service { padding-top: 72px; } .ptsb-services-service h2, .ptsb-services-scope h2 { font-size: 32px; line-height: 1.08; } /* On desktop this is a lead-in because it is wide and shallow: 22px running three lines across the full 1170px rail, with the 16px body in a 540px column beneath it. On a phone it gets the same 334px as everything else, so the same sentence runs eight lines - nine on Institutional - and the one thing still marking it out is that it is bigger than the paragraph under it. A nine-line block of oversized type is not a lead-in, it is a wall. It joins the reading tier. Nothing is lost: the photograph sits between this and the body paragraph, so the two never touch, and the h2 directly above already says where the section starts. */ .ptsb-services-service__intro, .ptsb-services-scope > .ptsb-precision-rail > p { margin-top: 18px; font-size: 16px; line-height: 1.5; } /* This gap is what sits under the project link, and it was 32 against the 16 above it - the link hung off the photo instead of sitting between the two. 20 here and 28 above centres it: 28 of white to the photo, 29 to the first line of body copy. */ .ptsb-services-service__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; } /* An optical correction, not an indent. Set flush, the label looks like it overhangs the photograph: the photo is a solid rectangle whose edge is exactly where it is drawn, while a capital I carries a side bearing and the type starts a little inside its own box - so matching the numbers pushes the text visually left of the picture. 6px is the nudge that makes them look level. Desktop's 13 is the same idea at 19px type against a 570px photo; scaled to 14px type and 334px it lands here. */ .ptsb-services-service__project > a { margin: 28px 0 0 4px; font-size: 14px; } /* A notch under the lead paragraph above the photograph. Both are prose and both are 334px wide, so with them at the same size the only thing saying which one leads was the order they appear in. The leading stays at 24px - only the letters come down, so the block keeps its air. */ .ptsb-services-service__details > p { font-size: 15px; line-height: 1.6; } /* "What We Deliver" sat 29px under the paragraph and 26px over its own list - near enough equal that it read as floating between the two rather than introducing the list. It needs to be closer to the list than to the paragraph, and 40 against 26 is enough to say so; 48 was more air than the job needs. 40 is also the between-blocks step the mobile layer already uses in the footer. */ .ptsb-services-service__details h3 { margin-top: 40px; font-size: 20px; } .ptsb-services-service__details ol { margin-top: 14px; } .ptsb-services-service__details li { grid-template-columns: 56px minmax(0, 1fr); min-height: 48px; padding: 10px 0; font-size: 16px; } .ptsb-services-scope { padding: 72px 0; } .ptsb-services-scope__cards { gap: 40px; margin-top: 36px; } .ptsb-services-scope__cards article { width: 280px; flex-basis: 280px; } .ptsb-services-scope__cards article + article::before { left: -20px; } .ptsb-services-scope__cards .ptsb-precision-crop { height: 196px; } .ptsb-services-scope__cards h3 { margin-top: 20px; font-size: 20px; } .ptsb-services-scope__cards p { margin-top: 12px; font-size: 16px; } }