took from its place in the markup. */
.tpg-hero__scrim,
.tpg-hero .tpg-hero__stage > .kt-inside-inner-col::after {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 61.04%;
background: linear-gradient(90deg, rgba(97, 155, 185, 0) 0%, rgba(13, 70, 99, .5) 100%);
-webkit-backdrop-filter: blur(35px);
backdrop-filter: blur(35px);
transform: translateZ(0);
}
.tpg-hero__rings {
position: absolute;
top: 0;
left: 40.73%;
width: 59.27%;
height: auto;
pointer-events: none;
filter: drop-shadow(0 43px 48px rgba(0, 0, 0, .18));
}
.tpg-hero__body {
position: relative;
z-index: 2;
width: 100%;
color: var(--tpg-white);
}
.tpg-hero__title { max-width: 687px; font-size: var(--tpg-fs-3xl); }
.tpg-hero__lead { max-width: 884px; font-size: var(--tpg-fs-m); }
@media (max-width: 900px) {
.tpg-hero { min-height: 640px; }
.tpg-hero__scrim,
.tpg-hero .tpg-hero__stage > .kt-inside-inner-col::after { width: 100%; background: linear-gradient(180deg, rgba(10, 32, 46, .25) 0%, rgba(13, 70, 99, .72) 100%); }
.tpg-hero__rings { left: 22%; width: 105%; opacity: .92; }
.tpg-hero__body { padding-block: var(--tpg-6xl) var(--tpg-5xl); }
}
/* ==========================================================================
Stats
========================================================================== */
.tpg-stats { position: relative; padding-block: clamp(56px, 5.208vw, 100px) clamp(56px, 5.417vw, 104px); }
.tpg-stats__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, max-content));
column-gap: var(--tpg-6xl);
row-gap: var(--tpg-4xl);
}
.tpg-stat { display: flex; flex-direction: column; gap: var(--tpg-m); }
.tpg-stat__value { font-size: var(--tpg-fs-4xl); font-weight: 100; line-height: var(--tpg-lh-display); white-space: nowrap; }
.tpg-stat__label { display: flex; align-items: center; gap: var(--tpg-xs); font-size: var(--tpg-fs-s); }
.tpg-stat__label img { width: 24px; height: 24px; flex: 0 0 24px; }
@media (max-width: 1024px) {
/* Below laptop the figures need room to wrap rather than run off the page. */
.tpg-stat__value { white-space: normal; }
}
@media (max-width: 640px) {
.tpg-stats__grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
Connecting band (image card + service strip)
========================================================================== */
.tpg-band {
position: relative;
/* Gap between the statement and the services strip that sits on the card. */
--tpg-strip-clear: clamp(40px, 3.646vw, 70px);
/* How far the strip drops past the card edge, as a share of its own height —
so it straddles the edge the same way however far the columns wrap. */
--tpg-strip-drop: 45%;
padding-bottom: clamp(60px, 4.688vw, 90px);
}
.tpg-band__card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
min-height: clamp(420px, 38.646vw, 742px);
/* No bottom padding: the strip sits flush with the card edge, then drops past it. */
padding: var(--tpg-7xl) var(--tpg-5xl) 0;
border-radius: var(--tpg-radius);
background: #2b2b2b;
text-align: center;
color: var(--tpg-white);
}
.tpg-band__card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
border-radius: inherit;
}
.tpg-band__card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .18) 34%, rgba(0, 0, 0, .58) 66%, rgba(0, 0, 0, .92) 100%);
}
.tpg-band__copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--tpg-2xl);
max-width: 738px;
}
.tpg-band__copy h2 { font-size: var(--tpg-fs-3xl); }
.tpg-band__copy p { font-size: var(--tpg-fs-s); }
/* The strip sits in the card's flow, then drops by a share of its own height so
it straddles the bottom edge — no pixel pull to keep in step with wrapping. */
.tpg-band__strip {
width: 100%;
margin-top: var(--tpg-strip-clear);
transform: translateY(var(--tpg-strip-drop));
position: relative;
z-index: 3;
}
.tpg-services {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0 auto;
width: 100%;
max-width: var(--tpg-content);
/* The card paints its copy white and centres it; the strip owns its own. */
color: var(--tpg-ink);
text-align: left;
background: var(--tpg-white);
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-radius-sm);
box-shadow: var(--tpg-shadow-card);
overflow: hidden;
position: relative;
z-index: 3;
}
.tpg-service {
display: flex;
align-items: center;
justify-content: center;
gap: var(--tpg-l);
padding: var(--tpg-4xl) var(--tpg-2xl);
min-height: 144px;
transition: background-color .35s var(--tpg-ease);
}
.tpg-service + .tpg-service { border-left: 1px solid var(--tpg-beige); }
.tpg-service:hover { background: var(--tpg-sand); }
.tpg-service__icon { flex: 0 0 48px; width: 48px; height: 48px; }
.tpg-service__title { font-size: var(--tpg-fs-m); }
.tpg-service__desc { font-size: var(--tpg-fs-s); opacity: .7; }
.tpg-service__text { display: flex; flex-direction: column; gap: var(--tpg-xs); }
@media (max-width: 1100px) {
/* Two rows tall: a smaller share of the strip clears the card edge. */
.tpg-band { --tpg-strip-drop: 28%; }
.tpg-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpg-service:nth-child(odd) { border-left: 0; }
.tpg-service:nth-child(n+3) { border-top: 1px solid var(--tpg-beige); }
}
@media (max-width: 1100px) {
/* The strip takes the lower third, pushing the statement onto the bright
part of the skyline — so the scrim starts dark at the top. */
.tpg-band__card::after {
background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .8) 100%);
}
}
@media (max-width: 600px) {
/* Four stacked rows — only the strip's foot clears the card. */
.tpg-band { --tpg-strip-drop: 12%; }
.tpg-services { grid-template-columns: 1fr; }
.tpg-service { border-left: 0 !important; justify-content: flex-start; }
.tpg-service + .tpg-service { border-top: 1px solid var(--tpg-beige); }
}
/* ==========================================================================
Expertise cards
Three specialisation cards. Each holds its quick links collapsed behind the
title and unfolds them on hover (Figma interaction annotation).
========================================================================== */
.tpg-expertise { padding-block: var(--tpg-7xl) 0; }
.tpg-expertise__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--tpg-3xl);
}
.tpg-card {
position: relative;
display: flex;
align-items: flex-end;
width: 100%;
aspect-ratio: 486 / 560;
min-height: 560px;
padding: var(--tpg-5xl) var(--tpg-4xl) var(--tpg-4xl);
border-radius: var(--tpg-radius);
overflow: hidden;
color: var(--tpg-white);
background: #1b1b1b;
isolation: isolate;
}
.tpg-card__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .9s var(--tpg-ease-out);
z-index: -2;
}
/* Two scrims: the resting one keeps the photograph readable, the second fades
in on hover so the quick links always land on enough contrast. */
.tpg-card::before,
.tpg-card::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
}
.tpg-card::after {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 48%, rgba(0, 0, 0, .92) 100%);
}
.tpg-card::before {
background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 26%, rgba(0, 0, 0, .95) 100%);
opacity: 0;
transition: opacity .6s var(--tpg-ease);
}
.tpg-card:hover .tpg-card__media,
.tpg-card:focus-within .tpg-card__media { transform: scale(1.06); }
.tpg-card__body { display: flex; flex-direction: column; gap: var(--tpg-xs); width: 100%; }
.tpg-card__eyebrow { font-size: var(--tpg-fs-xs); text-transform: uppercase; letter-spacing: .02em; }
.tpg-card__title { font-size: var(--tpg-fs-l); text-wrap: balance; }
.tpg-card__rule { height: 1px; background: #d9d9d9; opacity: .4; border: 0; margin: 0; width: 100%; }
.tpg-card__list {
display: flex;
flex-direction: column;
gap: var(--tpg-xs);
margin: 0;
padding: 0;
list-style: none;
}
.tpg-card__list li {
display: flex;
align-items: flex-start;
gap: var(--tpg-xs);
font-size: var(--tpg-fs-xs);
line-height: 1.3;
}
/* The quick links sit in a 0fr grid track at rest, so the card height never
changes — the title simply rides up as the track opens. */
.tpg-card__reveal {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .65s var(--tpg-ease-out);
}
.tpg-card__reveal-inner {
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--tpg-l);
padding-top: var(--tpg-l);
}
.tpg-card--reveal .tpg-card__rule {
opacity: 0;
transform: scaleX(.55);
transform-origin: left center;
transition: opacity .5s var(--tpg-ease), transform .6s var(--tpg-ease-out);
}
.tpg-card--reveal .tpg-card__list li {
opacity: 0;
transform: translateY(14px);
transition: transform .45s var(--tpg-ease) calc(35ms * var(--i, 0)), opacity .45s var(--tpg-ease) calc(35ms * var(--i, 0));
}
.tpg-card--reveal:hover .tpg-card__reveal,
.tpg-card--reveal:focus-within .tpg-card__reveal { grid-template-rows: 1fr; }
.tpg-card--reveal:hover .tpg-card__rule,
.tpg-card--reveal:focus-within .tpg-card__rule { opacity: .4; transform: scaleX(1); }
.tpg-card--reveal:hover .tpg-card__list li,
.tpg-card--reveal:focus-within .tpg-card__list li { opacity: 1; transform: translateY(0); }
.tpg-card--reveal:hover::before,
.tpg-card--reveal:focus-within::before { opacity: 1; }
/* Everything below is an always-open card: either there is no hover to trigger
the reveal (touch, pen), or the column is too narrow to hold both states —
below 1400px a three-up card cannot fit nine links without going tower-thin,
so the cards drop to two columns and simply stay open. */
@media (hover: none), (max-width: 1400px) {
.tpg-card { aspect-ratio: auto; min-height: 0; }
.tpg-card--reveal .tpg-card__reveal { grid-template-rows: 1fr; }
.tpg-card--reveal .tpg-card__rule { opacity: .4; transform: none; }
.tpg-card--reveal .tpg-card__list li { opacity: 1; transform: none; }
.tpg-card::before {
opacity: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .68) 22%, rgba(0, 0, 0, .95) 100%);
}
}
@media (max-width: 1400px) {
.tpg-expertise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpg-card { padding: var(--tpg-5xl) var(--tpg-4xl) var(--tpg-4xl); }
}
@media (max-width: 680px) {
.tpg-expertise__grid { grid-template-columns: 1fr; }
.tpg-card { padding: var(--tpg-6xl) var(--tpg-4xl) var(--tpg-4xl); }
}
/* ==========================================================================
People led / AI supported
========================================================================== */
.tpg-people {
position: relative;
background: linear-gradient(180deg, var(--tpg-sand-deep) 0%, var(--tpg-sand) 100%);
margin-top: var(--tpg-8xl);
padding-block: var(--tpg-8xl) 0;
/* No `overflow: hidden` here — it would make this section its own scroll
container and stop the column inside it from pinning. The watermark that
used to need clipping is handled by `overflow-x: clip` on the body. */
}
.tpg-people .tpg-shell {
max-width: none;
padding-inline: clamp(20px, 9.792vw, 188px) clamp(20px, 7.969vw, 153px);
}
.tpg-people__inner {
display: grid;
grid-template-columns: minmax(0, 636px) minmax(0, 1fr);
gap: clamp(40px, 8.021vw, 154px);
align-items: center;
}
.tpg-people__visual { justify-self: end; width: 100%; }
.tpg-people__visual .tpg-orbit { margin-left: auto; margin-right: 0; margin-top: clamp(-44px, -2.279vw, -20px); }
.tpg-people__copy { display: flex; flex-direction: column; gap: var(--tpg-5xl); }
.tpg-people__title { font-size: var(--tpg-fs-3xl); }
.tpg-people__lead { font-size: var(--tpg-fs-m); }
.tpg-team-cta {
display: inline-flex;
align-items: center;
gap: var(--tpg-l);
align-self: flex-start;
padding: var(--tpg-m) var(--tpg-m) var(--tpg-m) var(--tpg-2xl);
border-radius: var(--tpg-pill);
background: var(--tpg-red);
color: var(--tpg-white);
font-size: var(--tpg-fs-s);
transition: transform .35s var(--tpg-ease), box-shadow .35s var(--tpg-ease);
}
.tpg-team-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(205, 46, 63, .3); }
/* The pill is a group (a link cannot hold image blocks); the label's link is
stretched over all of it, so it still clicks anywhere. */
.tpg-main .tpg-team-cta { position: relative; margin: 0; }
.tpg-team-cta__label a { color: inherit; text-decoration: none; }
.tpg-team-cta__label a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tpg-team-cta__label a:focus-visible { outline: none; }
.tpg-team-cta:has(a:focus-visible) { outline: 2px solid var(--tpg-red); outline-offset: 3px; }
.tpg-team-cta__faces figure { margin: 0; }
.tpg-team-cta__faces { display: flex; align-items: center; }
.tpg-team-cta__faces img {
width: 54px;
height: 54px;
border-radius: 999px;
border: 1px solid var(--tpg-red);
object-fit: cover;
background: var(--tpg-white);
}
.tpg-team-cta__faces > * + * { margin-left: -20px; }
/* Orbit */
.tpg-orbit {
position: relative;
width: min(100%, 789px);
aspect-ratio: 1;
margin-inline: auto;
}
/* The six rings, drawn rather than marked up so the orbit is only images:
each is a hairline at its diameter (23.2% … 88.8% of the stage), and
closest-side makes 100% the stage's radius, so a ring's stop is its diameter.
The stops ramp in and out over a pixel rather than switching hard, or the
rings alias into dashes. */
.tpg-orbit::before {
content: '';
position: absolute;
inset: 0;
--r: rgba(205, 46, 63, .18);
background: radial-gradient(circle closest-side,
transparent calc(23.2% - 1.5px), var(--r) calc(23.2% - .5px), transparent calc(23.2% + .5px),
transparent calc(35.1% - 1.5px), var(--r) calc(35.1% - .5px), transparent calc(35.1% + .5px),
transparent calc(47.8% - 1.5px), var(--r) calc(47.8% - .5px), transparent calc(47.8% + .5px),
transparent calc(62% - 1.5px), var(--r) calc(62% - .5px), transparent calc(62% + .5px),
transparent calc(75.2% - 1.5px), var(--r) calc(75.2% - .5px), transparent calc(75.2% + .5px),
transparent calc(88.8% - 1.5px), var(--r) calc(88.8% - .5px), transparent calc(88.8% + .5px));
pointer-events: none;
}
.tpg-orbit figure { margin: 0; }
.tpg-orbit figure img { display: block; width: 100%; height: auto; }
.tpg-orbit:not(.is-live) .tpg-orbit__core,
.tpg-orbit:not(.is-live) .tpg-orbit__avatar { animation-play-state: paused; }
.tpg-orbit__core {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 15.7%;
height: auto;
animation: tpg-breathe 7s var(--tpg-ease) infinite;
}
.tpg-orbit__avatar {
position: absolute;
overflow: hidden;
border-radius: 999px;
/* Each portrait carries a hairline white ring in the design. */
border: 1px solid var(--tpg-white);
box-shadow: var(--tpg-shadow);
animation: tpg-float 9s var(--tpg-ease) infinite;
animation-delay: calc(var(--i, 0) * -.9s);
will-change: transform;
}
/* Each portrait's place and size (% of the 789px stage, from the Figma
layout) follows its order in the group; the brand mark is child 1. */
.tpg-orbit > .tpg-orbit__avatar:nth-child(2) { left: 42.21%; top: 63.05%; width: 5.96%; --i: 0; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(3) { left: 13.69%; top: 46.64%; width: 10.65%; --i: 1; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(4) { left: 28.39%; top: 32.76%; width: 6.08%; --i: 2; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(5) { left: 79.34%; top: 26.17%; width: 4.31%; --i: 3; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(6) { left: 69.2%; top: 39.42%; width: 8.75%; --i: 4; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(7) { left: 57.16%; top: 10.2%; width: 7.1%; --i: 5; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(8) { left: 21.8%; top: 10.84%; width: 5.7%; --i: 6; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(9) { left: 40.56%; top: 14.64%; width: 8.75%; --i: 7; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(10) { left: 23.45%; top: 76.93%; width: 6.34%; --i: 8; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(11) { left: 58.43%; top: 75.22%; width: 6.34%; --i: 9; }
.tpg-orbit > .tpg-orbit__avatar:nth-child(12) { left: 80.1%; top: 62.42%; width: 6.72%; --i: 10; }
@keyframes tpg-float {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -12px, 0); }
}
@keyframes tpg-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
@media (max-width: 1024px) {
.tpg-people__inner { grid-template-columns: 1fr; }
.tpg-orbit { width: min(100%, 560px); }
}
/* ==========================================================================
Insights
========================================================================== */
.tpg-insights {
background: transparent;
padding-block: clamp(40px, 3.958vw, 76px) var(--tpg-8xl);
}
.tpg-insights__head { display: flex; flex-direction: column; gap: var(--tpg-xl); max-width: 862px; }
.tpg-insights__title { font-size: var(--tpg-fs-3xl); }
.tpg-insights__lead { font-size: var(--tpg-fs-m); }
.tpg-insights__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--tpg-3xl);
}
.tpg-insight { display: flex; flex-direction: column; gap: var(--tpg-xl); }
.tpg-insight__media {
border-radius: var(--tpg-radius-sm);
overflow: hidden;
aspect-ratio: 370.75 / 278;
}
.tpg-insight__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--tpg-ease-out); }
.tpg-insight:hover .tpg-insight__media img { transform: scale(1.05); }
.tpg-insight__body { display: flex; flex-direction: column; gap: var(--tpg-m); padding-right: var(--tpg-4xl); }
.tpg-insight__meta { font-size: var(--tpg-fs-xxs); opacity: .5; }
.tpg-insight__title { font-size: var(--tpg-fs-m); font-weight: 200; line-height: var(--tpg-lh-body); }
.tpg-insight__excerpt { font-size: var(--tpg-fs-s); opacity: .8; }
.tpg-insight__more { display: inline-flex; align-items: center; gap: var(--tpg-xs); color: var(--tpg-red); font-size: var(--tpg-fs-s); }
.tpg-insight__more img { width: 24px; height: 24px; transition: transform .3s var(--tpg-ease); }
.tpg-insight:hover .tpg-insight__more img { transform: translateX(4px); }
@media (max-width: 1024px) { .tpg-insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .tpg-insights__grid { grid-template-columns: 1fr; } }
/* ==========================================================================
Insights index (home.php) — the page set as the posts page.
The latest article runs wide at the top; everything after it falls into the
same three-up grid the homepage section uses, so the two read as one family.
No category filter: the archive is small enough that it would cost more
than it saves.
========================================================================== */
.tpg-insights-page__head {
/* Clears the fixed header, which is on its solid plate here. */
padding-block: calc(var(--tpg-header-h) + var(--tpg-6xl)) var(--tpg-6xl);
}
.tpg-insights-page__head .tpg-shell {
display: flex;
flex-direction: column;
/* 2xl, not xl: the design sets 102px between the headline's second line and
the lead's first, which is 4px more than xl leaves. */
gap: var(--tpg-2xl);
}
/* Both lines sit in the design's 866px column: 1920 − 194 gutter − 860 right
inset. That measure is what breaks the headline after "and" and the lead
after "regional", so it is the wrap, not a hard
. */
/* As a Kadence row the stack is one wrapper deeper. */
.tpg-insights-page__head.tpg-kb .tpg-shell > .kt-inside-inner-col {
display: flex;
flex-direction: column;
gap: var(--tpg-2xl);
}
.tpg-insights-page__title {
max-width: 866px;
font-size: var(--tpg-fs-3xl);
}
.tpg-insights-page__lead {
max-width: 866px;
font-size: var(--tpg-fs-m);
}
.tpg-insights-page__body { padding-bottom: var(--tpg-8xl); }
.tpg-insights-page__empty { opacity: .6; }
/* ---------- The latest article ----------
One off-white card spanning the content column, image flush to its left
edge. The design's 1533px card splits 972/561, and the image is 16:9 at
that width — which is what gives the card its 547px height. */
.tpg-feature {
display: grid;
grid-template-columns: minmax(0, 972fr) minmax(0, 561fr);
margin-bottom: var(--tpg-7xl);
background: var(--tpg-off-white);
border-radius: var(--tpg-radius);
overflow: hidden;
}
.tpg-feature__media {
display: block;
aspect-ratio: 16 / 9;
background: var(--tpg-sand-deep);
}
.tpg-feature__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--tpg-ease-out);
}
.tpg-feature:hover .tpg-feature__media img { transform: scale(1.04); }
.tpg-feature__body {
display: flex;
flex-direction: column;
padding: var(--tpg-5xl);
}
.tpg-feature__meta,
.tpg-insights-page .tpg-insight__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--tpg-xs);
font-size: var(--tpg-fs-xxs);
opacity: .5;
}
/* Scoped past `.tpg-main p { margin: 0 }`, which outweighs a bare class. */
.tpg-insights-page .tpg-feature__meta { margin-bottom: var(--tpg-m); }
/* Separators as generated content rather than their own elements: a long
byline wraps the meta line, and a standalone dot would be left stranded at
the end of the row it wrapped from. */
.tpg-insights-page .tpg-feature__meta > * + *::before,
.tpg-insights-page .tpg-insight__meta > * + *::before {
content: '\00b7';
margin-right: var(--tpg-xs);
}
/* On a card the byline is too long to share the row with the category and the
date, so it takes one of its own rather than wrapping mid-row. flex-basis
rather than a second
: it keeps the 8px row gap the meta line already has,
where a sibling paragraph would inherit the body's much larger one. */
.tpg-insights-page .tpg-insight__meta .tpg-meta__byline,
.tpg-insights-page .tpg-feature__meta .tpg-meta__byline { flex-basis: 100%; }
.tpg-insights-page .tpg-insight__meta .tpg-meta__byline::before,
.tpg-insights-page .tpg-feature__meta .tpg-meta__byline::before { content: none; }
/* The authors read larger than the category and date around them. */
.tpg-insights-page .tpg-meta__byline {
font-size: var(--tpg-fs-s);
line-height: var(--tpg-lh-body);
}
.tpg-feature__title { font-size: var(--tpg-fs-2xl); }
.tpg-insights-page .tpg-feature__deck {
margin-top: var(--tpg-xl);
font-size: var(--tpg-fs-s);
opacity: .8;
}
/* Sits on the card's bottom padding line rather than under the deck, so the
card reads the same whatever length the standfirst runs to. */
.tpg-insights-page .tpg-feature__more {
margin-top: auto;
padding-top: var(--tpg-3xl);
}
.tpg-feature__title a:hover,
.tpg-insights-page .tpg-insight__title a:hover { color: var(--tpg-red); }
/* The grid cards carry their own link, so the feature's arrow is the only
one that needs nudging on hover of the whole article. */
.tpg-feature:hover .tpg-insight__more::after { transform: translateX(4px); }
/* ---------- The rest of the archive ---------- */
.tpg-insights-page__grid { row-gap: var(--tpg-6xl); }
.tpg-insights-page .tpg-insight__body { padding-right: 0; }
.tpg-insights-page .tpg-insight__title { font-size: var(--tpg-fs-l); }
/* ---------- Pagination ---------- */
.tpg-insights-page .tpg-pagination { margin-top: var(--tpg-7xl); }
.tpg-pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--tpg-m);
font-size: var(--tpg-fs-s);
}
.tpg-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding-inline: var(--tpg-m);
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-pill);
transition: border-color .25s var(--tpg-ease), color .25s var(--tpg-ease);
}
.tpg-pagination .page-numbers:hover { border-color: var(--tpg-red); color: var(--tpg-red); }
.tpg-pagination .page-numbers.current {
border-color: var(--tpg-ink);
background: var(--tpg-ink);
color: var(--tpg-white);
}
.tpg-pagination .page-numbers.dots {
border-color: transparent;
min-width: 0;
padding-inline: 0;
opacity: .5;
}
@media (max-width: 900px) {
.tpg-feature {
grid-template-columns: 1fr;
margin-bottom: var(--tpg-6xl);
}
.tpg-insights-page .tpg-feature__more { padding-top: var(--tpg-2xl); }
/* The stacked card is narrow enough that the feature's byline needs the
same treatment as a grid card's. */
.tpg-insights-page .tpg-feature__meta .tpg-meta__byline { flex-basis: 100%; }
.tpg-insights-page .tpg-feature__meta .tpg-meta__byline::before { content: none; }
}
/* ==========================================================================
Footer
========================================================================== */
.tpg-footer {
background: var(--tpg-red-deep);
color: var(--tpg-white);
padding-block: clamp(64px, 7.031vw, 135px);
}
/* Figma places the link block 40px after the brand and leaves the slack on
the right, rather than pushing it to the edge. */
.tpg-footer__top { display: flex; flex-wrap: wrap; gap: var(--tpg-4xl); }
.tpg-footer__brand { display: flex; flex-direction: column; gap: var(--tpg-3xl); flex: 1 1 480px; max-width: 748px; }
.tpg-footer__tagline {
max-width: 468px;
font-size: var(--tpg-fs-xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-footer__social { display: flex; align-items: center; gap: var(--tpg-3xl); }
.tpg-footer__social a { display: inline-flex; opacity: .9; transition: opacity .25s var(--tpg-ease), transform .25s var(--tpg-ease); }
.tpg-footer__social a:hover { opacity: 1; transform: translateY(-2px); }
.tpg-footer__social img { width: 25.9px; height: 25.9px; }
/* The icons are a core Social Icons block (edited in the footer pattern):
white logos, no chips, at the frame's 25.9px. */
.tpg-footer .wp-block-social-links.tpg-footer__social { margin: 0; padding: 0; list-style: none; }
.tpg-footer .tpg-footer__social .wp-social-link { margin: 0; padding: 0; background: none; color: var(--tpg-white); }
.tpg-footer .tpg-footer__social .wp-social-link a { padding: 0; color: inherit; }
.tpg-footer .tpg-footer__social .wp-social-link svg { width: 25.9px; height: 25.9px; }
.tpg-footer .tpg-footer__brand > p,
.tpg-footer .tpg-footer__right > .wp-block-buttons { margin: 0; }
.tpg-footer__right { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tpg-3xl); flex: 1 1 520px; max-width: 636px; }
.tpg-footer__cols { display: flex; gap: var(--tpg-3xl); flex-wrap: wrap; width: 100%; }
.tpg-footer__col { display: flex; flex-direction: column; gap: var(--tpg-l); width: 188px; }
.tpg-footer__col h3 { font-size: var(--tpg-fs-xxs); font-weight: 200; opacity: .6; }
.tpg-footer__col ul { display: flex; flex-direction: column; gap: var(--tpg-l); margin: 0; padding: 0; list-style: none; font-size: var(--tpg-fs-s); }
.tpg-footer__col a:hover { opacity: .75; }
.tpg-footer__rule { height: .5px; background: var(--tpg-white); opacity: .4; border: 0; margin: var(--tpg-5xl) 0; }
.tpg-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tpg-3xl); font-size: var(--tpg-fs-xs); }
.tpg-footer__legal ul { display: flex; gap: var(--tpg-3xl); margin: 0; padding: 0; list-style: none; }
.tpg-footer .tpg-logo__word { filter: none; }
/* Two columns on mobile. Expertise (the long list) spans both rows of the
right column, so Company tucks under Services instead of starting a new
row below Expertise and leaving a gap under Services. */
@media (max-width: 780px) {
.tpg-footer__cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.tpg-footer__col { width: auto; min-width: 0; }
.tpg-footer__col:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.tpg-footer__col:nth-child(3) { grid-column: 1; grid-row: 2; }
}
/* ==========================================================================
Motion — load sequence, scroll reveals
========================================================================== */
/* 1. Hero image, 2. navbar, 3. heading + copy, 4. CTA */
.tpg-js .tpg-anim-hero-media { opacity: 0; transform: scale(1.06); }
.tpg-js .tpg-anim-hero-rings { opacity: 0; transform: translate3d(6%, -4%, 0) scale(1.08); }
.tpg-js .tpg-anim-header { opacity: 0; transform: translate3d(0, -12px, 0); }
.tpg-js .tpg-anim-up { opacity: 0; transform: translate3d(0, 24px, 0); }
.tpg-loaded .tpg-anim-hero-media { animation: tpg-media-in 1.4s var(--tpg-ease-out) forwards; }
.tpg-loaded .tpg-anim-hero-rings { animation: tpg-rings-in 1.6s var(--tpg-ease-out) .15s forwards; }
.tpg-loaded .tpg-anim-header { animation: tpg-fade-down 0.9s var(--tpg-ease-out) .75s forwards; }
.tpg-loaded .tpg-anim-up { animation: tpg-slide-up 1s var(--tpg-ease-out) forwards; animation-delay: calc(1.05s + var(--i, 0) * .14s); }
@keyframes tpg-media-in { to { opacity: 1; transform: none; } }
@keyframes tpg-rings-in { to { opacity: 1; transform: none; } }
@keyframes tpg-fade-down { to { opacity: 1; transform: none; } }
@keyframes tpg-slide-up { to { opacity: 1; transform: none; } }
/* Scroll reveals */
.tpg-js .tpg-reveal {
opacity: 0;
transform: translate3d(0, 32px, 0);
transition: opacity .9s var(--tpg-ease-out), transform .9s var(--tpg-ease-out);
transition-delay: calc(var(--i, 0) * 90ms);
will-change: opacity, transform;
}
.tpg-js .tpg-reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
.tpg-js .tpg-reveal--left { transform: translate3d(-32px, 0, 0); }
.tpg-js .tpg-reveal--right { transform: translate3d(32px, 0, 0); }
.tpg-js .tpg-reveal--zoom { transform: scale(.96); }
.tpg-js .tpg-reveal.is-visible.tpg-reveal--left,
.tpg-js .tpg-reveal.is-visible.tpg-reveal--right,
.tpg-js .tpg-reveal.is-visible.tpg-reveal--zoom { transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.tpg-anim-hero-media,
.tpg-anim-hero-rings,
.tpg-anim-header,
.tpg-anim-up,
.tpg-reveal { opacity: 1 !important; transform: none !important; }
}
/* ==========================================================================
Editor-facing niceties + single/archive fallbacks
========================================================================== */
.tpg-page { padding-block: calc(var(--tpg-header-h) + var(--tpg-6xl)) var(--tpg-7xl); }
.tpg-page__title { font-size: var(--tpg-fs-3xl); margin-bottom: var(--tpg-5xl); }
.tpg-prose > * + * { margin-top: var(--tpg-xl); }
.tpg-prose h2 { font-size: var(--tpg-fs-xl); margin-top: var(--tpg-5xl); }
.tpg-prose a { color: var(--tpg-red); text-decoration: underline; text-underline-offset: 3px; }
.tpg-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--tpg-3xl); }
.tpg-pagination { display: flex; gap: var(--tpg-m); margin-top: var(--tpg-5xl); }
/* ==========================================================================
Kadence + core block plumbing
Sections are Kadence Row Layout / Column blocks; these rules let the design
own the layout while the blocks keep their editor behaviour.
========================================================================== */
.tpg-hero.tpg-hero > .kt-row-column-wrap,
.tpg-stats.tpg-stats > .kt-row-column-wrap,
.tpg-band.tpg-band > .kt-row-column-wrap,
.tpg-expertise.tpg-expertise > .kt-row-column-wrap,
.tpg-people.tpg-people > .kt-row-column-wrap,
.tpg-insights.tpg-insights > .kt-row-column-wrap {
display: block;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
grid-template-columns: none;
row-gap: 0;
column-gap: 0;
}
.tpg-hero .wp-block-kadence-column,
.tpg-stats .wp-block-kadence-column,
.tpg-band .wp-block-kadence-column,
.tpg-expertise .wp-block-kadence-column,
.tpg-people .wp-block-kadence-column,
.tpg-insights .wp-block-kadence-column { min-width: 0; width: 100%; }
.tpg-hero .kt-inside-inner-col,
.tpg-stats .kt-inside-inner-col,
.tpg-band .kt-inside-inner-col,
.tpg-expertise .kt-inside-inner-col,
.tpg-people .kt-inside-inner-col,
.tpg-insights .kt-inside-inner-col { display: block; }
/* Core block resets inside our sections. WordPress' global styles land after
the theme stylesheet, so these carry a class each to win on specificity. */
.tpg-main figure.wp-block-image { margin: 0; }
.tpg-main .wp-block-group { margin: 0; }
.tpg-main .wp-block-heading { margin: 0; }
.tpg-main .tpg-services { margin: 0 auto; }
.tpg-main .tpg-band__strip { margin-top: var(--tpg-strip-clear); }
.tpg-main .tpg-insights__head { margin-bottom: var(--tpg-5xl); }
.tpg-main .wp-block-buttons { margin: 0; gap: var(--tpg-m); }
.tpg-main ul.wp-block-list { margin: 0; padding: 0; list-style: none; }
.tpg-main .wp-block-separator { margin: 0; border: 0; }
.tpg-main p { margin: 0; }
/* ---------- Hero plumbing ---------- */
.tpg-hero { position: relative; display: block; padding: 0; }
.tpg-hero.tpg-hero > .kt-row-column-wrap {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: clamp(560px, 47.917vw, 920px);
padding: 0;
}
.tpg-hero .tpg-hero__stage,
.tpg-hero .tpg-hero__stage > .kt-inside-inner-col { position: static; }
.tpg-hero figure.tpg-hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.tpg-hero figure.tpg-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.tpg-hero figure.tpg-hero__rings {
position: absolute;
top: 0;
left: 40.73%;
width: 59.27%;
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 43px 48px rgba(0, 0, 0, .18));
}
.tpg-hero figure.tpg-hero__rings img { width: 100%; height: auto; }
.tpg-hero .tpg-hero__body { position: relative; z-index: 2; }
.tpg-hero .tpg-hero__body > .kt-inside-inner-col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--tpg-2xl);
padding-block: var(--tpg-7xl);
color: var(--tpg-white);
}
.tpg-hero .tpg-hero__body .wp-block-buttons { margin-top: var(--tpg-xs); }
.tpg-anim-up:nth-child(1) { --i: 0; }
.tpg-anim-up:nth-child(2) { --i: 1; }
.tpg-anim-up:nth-child(3) { --i: 2; }
.tpg-anim-up:nth-child(4) { --i: 3; }
@media (max-width: 1100px) {
/* The ring only bleeds past the hero on wide screens; below that it would
paint over the figures in the stats band. */
.tpg-hero { overflow: hidden; }
}
/* Mobile keeps the desktop composition: the executive framed in the hole of
the rings. Everything is sized off --u, the phone width (capped for
tablets):
- the ring sits flush with the top, at left -63px on a 390px phone (-.1615u),
and is 1.42u wide, which makes its hole ~.9u across. On wider screens it
is held flush right instead, because the image's right edge cuts through
the ring and must stay off-screen. hero-rings.webp's
hole is centred at 69.4% / 41.3% of the image, i.e. .986u / .662u from
the ring's corner.
- the photo is drawn at its own 1920:920 ratio, 1.15u tall (2.4u wide), and
offset so her centre (82.3% / 57% of hero-bg.webp) lands on the hole's.
The copy starts below the ring. */
@media (max-width: 900px) {
.tpg-hero {
--u: min(100vw, 500px);
--ring-left: max(calc(var(--u) * -.1615), calc(100% - var(--u) * 1.411));
--ring-top: 0px;
}
.tpg-hero.tpg-hero > .kt-row-column-wrap { min-height: 0; justify-content: flex-start; }
.tpg-hero figure.tpg-hero__media {
inset: auto;
top: var(--ring-top);
left: calc(var(--ring-left) - var(--u) * .989);
width: calc(var(--u) * 2.4);
height: calc(var(--u) * 1.15);
/* The bottom edge fades out below the hole instead of cutting off. */
-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
mask-image: linear-gradient(180deg, #000 80%, transparent);
}
/* The frosted scrim covers what shows left of the ring, as on desktop. */
.tpg-hero .tpg-hero__stage > .kt-inside-inner-col::after {
top: var(--ring-top);
bottom: auto;
width: max(0px, calc(var(--ring-left) + var(--u) * .3));
height: calc(var(--u) * 1.15);
background: rgba(13, 70, 99, .35);
-webkit-mask-image: linear-gradient(180deg, #000 92%, transparent);
mask-image: linear-gradient(180deg, #000 92%, transparent);
}
.tpg-hero figure.tpg-hero__rings {
top: var(--ring-top);
left: var(--ring-left);
width: calc(var(--u) * 1.42);
}
.tpg-hero .tpg-hero__body > .kt-inside-inner-col {
padding-block: calc(var(--ring-top) + var(--u) * 1.45) var(--tpg-6xl);
}
}
/* ---------- Stats icons ---------- */
.tpg-stat__label::before {
content: '';
flex: 0 0 24px;
width: 24px;
height: 24px;
background: var(--tpg-stat-icon) center / contain no-repeat;
}
.tpg-stat--founded { --tpg-stat-icon: url('../icons/flag.svg'); }
.tpg-stat--offices { --tpg-stat-icon: url('../icons/globe.svg'); }
.tpg-stat--placements { --tpg-stat-icon: url('../icons/user.svg'); }
.tpg-stat--sectors { --tpg-stat-icon: url('../icons/work.svg'); }
/* ---------- Connecting band plumbing ---------- */
.tpg-band__card { position: relative; }
.tpg-band__card figure.tpg-band__media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.tpg-band__card figure.tpg-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.tpg-band__copy { position: relative; z-index: 2; }
.tpg-service::before {
content: '';
flex: 0 0 48px;
width: 48px;
height: 48px;
background: var(--tpg-svc-icon) center / contain no-repeat;
}
.tpg-service--search { --tpg-svc-icon: url('../icons/online-search.svg'); }
.tpg-service--selection { --tpg-svc-icon: url('../icons/stack.svg'); }
.tpg-service--interim { --tpg-svc-icon: url('../icons/flag.svg'); }
.tpg-service--intel { --tpg-svc-icon: url('../icons/ai-spark.svg'); }
/* ---------- Expertise plumbing ---------- */
.tpg-card figure.tpg-card__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.tpg-card figure.tpg-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .9s var(--tpg-ease-out);
}
.tpg-card:hover figure.tpg-card__media img,
.tpg-card:focus-within figure.tpg-card__media img { transform: scale(1.06); }
.tpg-card__body { position: relative; z-index: 1; }
/* The title link covers the whole card. The body gives up its positioning so
the overlay measures against the card, and the quick links sit above it. */
.tpg-card:has(.tpg-card__link) .tpg-card__body { position: static; }
.tpg-card__link { color: inherit; text-decoration: none; }
.tpg-card__link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.tpg-card__link:focus-visible { outline: none; }
.tpg-card:has(.tpg-card__link:focus-visible) { outline: 2px solid var(--tpg-white); outline-offset: -6px; }
.tpg-card__list a {
position: relative;
z-index: 2;
color: inherit;
text-decoration: none;
}
.tpg-card__list a:hover,
.tpg-card__list a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.tpg-card__list li::before {
content: '';
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: .18em;
background: url('../icons/arrow-sm.svg') center / contain no-repeat;
transform: scaleY(-1);
}
/* ---------- People plumbing ---------- */
.tpg-people__visual { position: relative; }
.tpg-team-cta__label { white-space: nowrap; }
/* ---------- Insights plumbing ---------- */
.tpg-insight__media figure.wp-block-image,
.tpg-insight__media img { width: 100%; height: 100%; }
.tpg-insight__media img { object-fit: cover; transition: transform .8s var(--tpg-ease-out); }
.tpg-insight:hover .tpg-insight__media img { transform: scale(1.05); }
.tpg-insight__more-wrap { margin: 0; }
.tpg-insight__more::after {
content: '';
width: 24px;
height: 24px;
background: url('../icons/chevrons.svg') center / contain no-repeat;
transition: transform .3s var(--tpg-ease);
}
.tpg-insight:hover .tpg-insight__more::after { transform: translateX(4px); }
/* The cards are a Query Loop: the grid is its
, each card sits in an - . */
.tpg-main .wp-block-query.tpg-insights__query { margin: 0; }
.tpg-main ul.tpg-insights__grid { margin: 0; padding: 0; list-style: none; max-width: none; }
.tpg-insights__grid > li { margin: 0; min-width: 0; }
.tpg-insights__grid > li > .tpg-insight { height: 100%; }
.tpg-main figure.tpg-insight__media { margin: 0; }
.tpg-main .tpg-insight__title { margin: 0; }
.tpg-insight__meta a { color: inherit; text-decoration: none; }
.tpg-insights__grid > li:nth-child(2) > .tpg-reveal { transition-delay: .09s; }
.tpg-insights__grid > li:nth-child(3) > .tpg-reveal { transition-delay: .18s; }
/* ---------- Reveal stagger for grid children ---------- */
.tpg-stats__grid > .tpg-reveal:nth-child(2),
.tpg-insights__grid > .tpg-reveal:nth-child(2) { transition-delay: .09s; }
.tpg-stats__grid > .tpg-reveal:nth-child(3),
.tpg-insights__grid > .tpg-reveal:nth-child(3) { transition-delay: .18s; }
.tpg-stats__grid > .tpg-reveal:nth-child(4) { transition-delay: .27s; }
.tpg-expertise__grid > .tpg-reveal:nth-child(2) { transition-delay: .09s; }
.tpg-expertise__grid > .tpg-reveal:nth-child(3) { transition-delay: .18s; }
.tpg-card__list li:nth-child(1) { --i: 0; }
.tpg-card__list li:nth-child(2) { --i: 1; }
.tpg-card__list li:nth-child(3) { --i: 2; }
.tpg-card__list li:nth-child(4) { --i: 3; }
.tpg-card__list li:nth-child(5) { --i: 4; }
.tpg-card__list li:nth-child(6) { --i: 5; }
.tpg-card__list li:nth-child(7) { --i: 6; }
.tpg-card__list li:nth-child(8) { --i: 7; }
.tpg-card__list li:nth-child(9) { --i: 8; }
/* ==========================================================================
Section pinning — the mechanic apple.com uses
Each section pins its inner column with `position: sticky` and scrolls the
reader through a spacer at the foot of the section before handing over to
the next one. Scrolling stays completely native throughout: the page never
touches the wheel, so it can neither stutter nor get stuck.
The spacer is a real in-flow `::after`, not padding — a sticky element is
constrained by its containing block's *content box*, so padding gives it
nothing to travel through and it never pins at all.
The hero is left in normal flow so its ring keeps bleeding into the stats
band the way the design draws it.
========================================================================== */
/* The same spacer serves two jobs: where a section pins it is the distance the
pin travels, and where pinning is off (touch, narrow viewports, reduced
motion) it is simply breathing room between sections. */
.tpg-snap-section:not(.tpg-hero)::after {
content: '';
display: block;
height: var(--tpg-section-gap);
pointer-events: none;
}
:root { --tpg-section-gap: var(--tpg-6xl); }
@media (min-width: 1025px) and (pointer: fine) {
:root { --tpg-pin: 55vh; }
.tpg-snap-section:not(.tpg-hero) > .kt-row-column-wrap {
position: sticky;
top: var(--tpg-header-h);
}
/* The arc of the hold. `--tpg-in` and `--tpg-out` are written onto the
column by app.js straight off scroll position (section 6b there); the
1 / 0 defaults below are the neutral pose, so a column that never
receives them — no JS, an editor preview, a stalled script — sits
exactly where it always did.
The outgoing section translates *down*. It is already travelling up at
full scroll speed, so lagging behind that is what reads as depth rather
than as a second movement. It fades to .4 rather than to nothing,
because a handover should be a recession, not a disappearance. */
html.tpg-js .tpg-snap-section:not(.tpg-hero) > .kt-row-column-wrap {
--tpg-in: 1;
--tpg-out: 0;
opacity: calc((.45 + .55 * var(--tpg-in)) * (1 - .6 * var(--tpg-out)));
transform: translate3d(0, calc((1 - var(--tpg-in)) * 3.5vh + var(--tpg-out) * 5vh), 0)
scale(calc(1 - .05 * var(--tpg-out)));
/* Scaling from the top edge keeps the pin line itself still. */
transform-origin: 50% 0;
will-change: transform, opacity;
}
/* The figures band is short, so it holds briefly — a long hold would leave
half a screen of empty background under it. */
.tpg-stats { --tpg-pin: 24vh; }
.tpg-snap-section:not(.tpg-hero)::after { height: var(--tpg-pin); }
/* A pinned section holds while the next one keeps advancing, so by the end
of the hold they would meet with no gap at all. This margin sits outside
the sticky slack: it separates the two sections without lengthening the
hold. Insights is excluded — it already carries 200px before the footer. */
.tpg-snap-section:not(.tpg-hero):not(.tpg-insights) { margin-bottom: var(--tpg-7xl); }
}
@media (prefers-reduced-motion: reduce) {
/* Selector shape mirrors the pin rules above so it actually wins. */
.tpg-snap-section:not(.tpg-hero) > .kt-row-column-wrap { position: static; }
.tpg-snap-section:not(.tpg-hero)::after { height: var(--tpg-section-gap); }
/* app.js never writes the progress values under reduced motion, so this is
belt and braces — but the defaults are inert and the promotion is not. */
html.tpg-js .tpg-snap-section:not(.tpg-hero) > .kt-row-column-wrap {
opacity: 1;
transform: none;
will-change: auto;
}
}
/* ==========================================================================
Insight article — the view behind "Read more"
The hero repeats the homepage hero's recipe (cover image, dark scrim, white
type) so the fixed white header stays legible on the way in. Everything
below sits in one measured prose column on the sand background.
========================================================================== */
/* Away from a dark hero the header needs its own plate to stay readable. */
.tpg-header.is-solid { background: rgba(17, 12, 14, .92); }
.tpg-header.is-solid.is-stuck { background: rgba(17, 12, 14, .72); }
.tpg-article {
display: block;
/* One centred reading spine for the whole article — hero copy, prose and
the related strip all sit on it. The cover image stays full-bleed. */
--tpg-measure: 920px;
}
.tpg-article .tpg-shell { max-width: calc(var(--tpg-measure) + var(--tpg-gutter) * 2); }
.tpg-article__hero {
position: relative;
display: flex;
align-items: flex-end;
/* Tall enough that a portrait cover still reads as a photograph rather
than a letterboxed sliver. */
min-height: clamp(460px, 44vw, 760px);
padding-block: calc(var(--tpg-header-h) + var(--tpg-5xl)) var(--tpg-6xl);
background: #12293a;
overflow: hidden;
}
.tpg-article__hero-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.tpg-article__hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 14, 20, .55) 0%, rgba(10, 14, 20, .35) 38%, rgba(9, 12, 16, .88) 100%);
}
.tpg-article__hero-body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--tpg-l);
color: var(--tpg-white);
}
.tpg-article__kicker {
margin: 0;
font-size: var(--tpg-fs-xxs);
letter-spacing: .14em;
text-transform: uppercase;
opacity: .78;
}
.tpg-article__title {
max-width: none;
margin: 0;
font-size: var(--tpg-fs-4xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-article__deck {
max-width: none;
margin: 0;
font-size: var(--tpg-fs-m);
opacity: .88;
}
.tpg-article__meta {
display: flex;
flex-wrap: wrap;
gap: var(--tpg-xs);
margin: 0;
font-size: var(--tpg-fs-xxs);
opacity: .7;
}
/* The byline links to each author's profile. On the dark hero a link inherits
white from the surrounding type, so it needs an underline to read as one. */
.tpg-article__byline a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, .45);
}
.tpg-article__byline a:hover { text-decoration-color: currentColor; }
/* On the article the byline is a line of its own, well above the meta's 12px,
so the dot that followed it would be left dangling at the end of its row. */
.tpg-article__byline {
flex-basis: 100%;
margin-bottom: var(--tpg-xs);
font-size: var(--tpg-fs-xl);
font-weight: 200;
line-height: var(--tpg-lh-display);
}
.tpg-article__byline + [aria-hidden="true"] { display: none; }
/* ---------- Meet the authors ----------
The People directory's portrait tiles, placed above the closing CTA. It sits
inside .tpg-prose, so the prose's red underlined links are undone here. */
/* Through .tpg-prose > so it outranks the prose's own sibling spacing. */
.tpg-main .tpg-prose > .tpg-article-authors,
.tpg-main .tpg-article-authors { margin-top: var(--tpg-7xl); }
.tpg-main .tpg-article-authors__title {
margin: 0 0 var(--tpg-3xl);
font-size: var(--tpg-fs-2xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-prose .tpg-article-authors a.tpg-ppl-card__link {
color: var(--tpg-white);
text-decoration: none;
}
.tpg-article__body { padding-block: clamp(48px, 5vw, 96px) clamp(40px, 4vw, 80px); }
.tpg-main .tpg-article__back { margin-top: var(--tpg-6xl); }
/* ---------- Prose ---------- */
.tpg-prose {
max-width: none;
font-size: var(--tpg-fs-s);
line-height: 1.7;
}
/* Doubled class: WordPress' global styles land after this sheet and reset
block margins at the same specificity, so these need one class more. */
.tpg-main .tpg-prose > * { margin-block: 0; }
.tpg-main .tpg-prose > * + * { margin-top: var(--tpg-2xl); }
.tpg-prose__lead {
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: 1.55;
}
.tpg-prose__h2 {
position: relative;
margin-top: var(--tpg-7xl) !important;
font-size: var(--tpg-fs-2xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-prose__h2::before {
content: '';
display: block;
width: 48px;
height: 2px;
margin-bottom: var(--tpg-l);
background: var(--tpg-red);
}
.tpg-prose__num {
display: block;
margin-bottom: var(--tpg-xs);
color: var(--tpg-red);
font-size: var(--tpg-fs-xs);
letter-spacing: .12em;
}
.tpg-prose__h3 {
margin-top: var(--tpg-5xl) !important;
font-size: var(--tpg-fs-l);
font-weight: 200;
line-height: var(--tpg-lh-display);
}
.tpg-prose__note { font-size: var(--tpg-fs-xs); opacity: .6; }
.tpg-prose__pull {
padding-left: var(--tpg-3xl);
border-left: 2px solid var(--tpg-red);
font-size: var(--tpg-fs-l);
font-weight: 200;
line-height: 1.45;
}
/* Lists inside prose get their markers back — the homepage reset strips them. */
.tpg-main .tpg-prose ul.wp-block-list,
.tpg-main .tpg-prose ol.wp-block-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--tpg-m);
}
.tpg-main .tpg-prose ul.wp-block-list > li {
position: relative;
padding-left: var(--tpg-3xl);
}
.tpg-main .tpg-prose ul.wp-block-list > li::before {
content: '';
position: absolute;
left: 0;
top: .65em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--tpg-red);
}
.tpg-main .tpg-prose ul.tpg-prose__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tpg-3xl); }
/* The reset above zeroes the list's own margins, so the flow spacing has to be
restored at the same specificity or a list lands flush against the run-in. */
.tpg-main .tpg-prose > * + ul.wp-block-list,
.tpg-main .tpg-prose > * + ol.wp-block-list { margin-top: var(--tpg-2xl); }
.tpg-callout.tpg-callout > * + ul.wp-block-list,
.tpg-callout.tpg-callout > * + ol.wp-block-list { margin-top: var(--tpg-l); }
.tpg-main .tpg-prose ol.tpg-steps { counter-reset: tpg-step; gap: var(--tpg-l); }
.tpg-main .tpg-prose ol.tpg-steps > li {
position: relative;
padding-left: calc(var(--tpg-4xl) + var(--tpg-s));
counter-increment: tpg-step;
}
.tpg-main .tpg-prose ol.tpg-steps > li::before {
content: counter(tpg-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
color: var(--tpg-red);
font-size: var(--tpg-fs-s);
font-weight: 300;
letter-spacing: .08em;
}
.tpg-prose strong { font-weight: 400; }
.tpg-prose a:not(.wp-block-button__link) { color: var(--tpg-red); text-decoration: underline; text-underline-offset: 3px; }
.tpg-prose .wp-block-button__link { text-decoration: none; }
/* ---------- Prose components ---------- */
.tpg-figures {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--tpg-3xl);
padding: var(--tpg-4xl) 0;
border-block: 1px solid var(--tpg-line);
}
.tpg-figure { display: flex; flex-direction: column; gap: var(--tpg-xs); }
.tpg-figure.tpg-figure > * { margin: 0; }
.tpg-figure__value {
font-size: var(--tpg-fs-2xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-figure__label { font-size: var(--tpg-fs-xxs); opacity: .65; line-height: 1.45; }
.tpg-callout {
padding: var(--tpg-4xl);
border-radius: var(--tpg-radius-sm);
background: var(--tpg-sand-deep);
}
.tpg-callout.tpg-callout > * + * { margin-top: var(--tpg-l); }
.tpg-callout__title {
margin: 0;
font-size: var(--tpg-fs-xxs);
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tpg-red);
}
.tpg-defs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--tpg-l);
}
.tpg-defs--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tpg-defs--numbered { counter-reset: tpg-priority; }
.tpg-def {
display: flex;
flex-direction: column;
gap: var(--tpg-s);
padding: var(--tpg-3xl);
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-radius-sm);
background: var(--tpg-white);
}
.tpg-def.tpg-def > * { margin: 0; }
.tpg-def__title { font-size: var(--tpg-fs-s); font-weight: 400; line-height: 1.4; }
.tpg-defs--numbered .tpg-def { counter-increment: tpg-priority; }
.tpg-defs--numbered .tpg-def__title::before {
content: counter(tpg-priority) '. ';
color: var(--tpg-red);
}
.tpg-def.tpg-def p { font-size: var(--tpg-fs-xs); opacity: .8; line-height: 1.6; }
.tpg-compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--tpg-l);
}
.tpg-compare.tpg-compare > * { margin: 0; }
.tpg-compare__item {
padding: var(--tpg-3xl);
border-radius: var(--tpg-radius-sm);
background: var(--tpg-sand-deep);
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: 1.4;
}
.tpg-compare__item--accent { background: var(--tpg-red-deep); color: var(--tpg-white); }
/* Core's table block styles land after this sheet and draw a full grid, so the
rules that undo it carry one class more. */
figure.tpg-table.tpg-table { margin: 0; }
.tpg-table.tpg-table table {
width: 100%;
border-collapse: collapse;
border: 0;
font-size: var(--tpg-fs-xs);
}
.tpg-table.tpg-table th,
.tpg-table.tpg-table td {
padding: var(--tpg-l) var(--tpg-m) var(--tpg-l) 0;
text-align: left;
vertical-align: top;
border: 0;
border-bottom: 1px solid var(--tpg-line);
word-break: break-word;
}
.tpg-table.tpg-table thead th {
font-weight: 400;
font-size: var(--tpg-fs-xxs);
letter-spacing: .1em;
text-transform: uppercase;
opacity: .6;
}
.tpg-table.tpg-table tbody td:first-child { font-weight: 300; }
.tpg-article__cta {
margin-top: var(--tpg-7xl) !important;
padding: var(--tpg-5xl);
border-radius: var(--tpg-radius);
background: var(--tpg-red-deep);
color: var(--tpg-white);
}
.tpg-article__cta.tpg-article__cta > * + * { margin-top: var(--tpg-l); }
.tpg-article__cta-title {
margin: 0;
font-size: var(--tpg-fs-xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-article__cta.tpg-article__cta p { opacity: .85; }
.tpg-article__cta.tpg-article__cta .wp-block-buttons { margin-top: var(--tpg-3xl); }
/* ---------- More insights ---------- */
.tpg-more-insights {
padding-block: clamp(48px, 5vw, 96px);
border-top: 1px solid var(--tpg-line);
}
.tpg-main .tpg-more-insights__title {
margin: 0 0 var(--tpg-4xl);
font-size: var(--tpg-fs-2xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-more-insights .tpg-insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpg-more-insights .tpg-insight__body > * { margin: 0; }
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.tpg-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpg-defs--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
/* The cover becomes a band across the top and the copy sits under it, as
on the homepage hero: laid over the photo, the title, deck and byline
covered almost all of it. */
.tpg-article__hero {
--tpg-cover-h: clamp(360px, 100vw, 560px);
min-height: 0;
padding-top: calc(var(--tpg-cover-h) - var(--tpg-4xl));
background: #090c10;
}
.tpg-article__hero-media { height: var(--tpg-cover-h); object-position: center 30%; }
.tpg-article__hero-scrim {
background: linear-gradient(180deg,
rgba(10, 14, 20, .55) 0,
rgba(10, 14, 20, 0) calc(var(--tpg-header-h) + 40px),
rgba(9, 12, 16, 0) calc(var(--tpg-cover-h) * .6),
#090c10 var(--tpg-cover-h));
}
.tpg-article__title { max-width: none; font-size: var(--tpg-fs-3xl); }
.tpg-prose { max-width: none; }
.tpg-main .tpg-prose ul.tpg-prose__list--two { grid-template-columns: 1fr; }
.tpg-defs,
.tpg-defs--three,
.tpg-compare { grid-template-columns: 1fr; }
.tpg-more-insights .tpg-insights__grid { grid-template-columns: 1fr; }
.tpg-callout,
.tpg-article__cta { padding: var(--tpg-3xl); }
.tpg-prose__pull { padding-left: var(--tpg-l); }
}
@media (max-width: 560px) {
.tpg-figures { grid-template-columns: 1fr; gap: var(--tpg-l); }
/* Two-column tables stack into term/detail pairs rather than forcing a
sideways scroll — the header row is the only thing lost, and both of
these tables read fine without it. */
.tpg-table.tpg-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.tpg-table.tpg-table table,
.tpg-table.tpg-table tbody,
.tpg-table.tpg-table tr,
.tpg-table.tpg-table td { display: block; width: 100%; }
.tpg-table.tpg-table tr {
padding-block: var(--tpg-l);
border-bottom: 1px solid var(--tpg-line);
}
.tpg-table.tpg-table td { padding: 0; border: 0; }
.tpg-table.tpg-table td:first-child { font-weight: 400; margin-bottom: var(--tpg-xxs); }
.tpg-table.tpg-table td + td { font-size: var(--tpg-fs-xxs); opacity: .7; }
}
/* ==========================================================================
Services page
Built from Figma "profile-services 1" (file P6G2PzC4FFcm6rQooDgZ0w,
node 1:408). Same 1920px canvas as the homepage, so every measurement
below comes from the shared --tpg-* type and space tokens.
========================================================================== */
/* ---------- Hero ---------- */
.tpg-svc-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: clamp(460px, 39.6vw, 760px);
/* 200px above the copy, 100px below it on the design canvas. */
padding-block: calc(var(--tpg-header-h) + var(--tpg-6xl)) calc(var(--tpg-5xl) + var(--tpg-4xl));
background: #12293a;
overflow: hidden;
}
.tpg-svc-hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Figma fades transparent → black over the full height of the copy block. */
.tpg-svc-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 62%, #000 100%);
}
.tpg-svc-hero__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--tpg-2xl);
color: var(--tpg-white);
}
.tpg-svc-hero__title {
/* Stops where the design's 860px right inset begins: 1920 − 194 − 860. */
max-width: 866px;
margin: 0;
font-size: var(--tpg-fs-3xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-svc-hero__lead {
max-width: 866px;
margin: 0;
font-size: var(--tpg-fs-m);
line-height: var(--tpg-lh-body);
}
/* ---------- Page body ---------- */
.tpg-svc-body { padding-block: var(--tpg-7xl) var(--tpg-8xl); }
/* ---------- Tab pills ---------- */
.tpg-svc-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--tpg-xxs);
width: fit-content;
max-width: 100%;
margin-inline: auto;
padding: var(--tpg-xxs);
border-radius: var(--tpg-pill);
background: var(--tpg-white);
scroll-margin-top: calc(var(--tpg-header-h) + var(--tpg-l));
}
.tpg-svc-tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 173px;
padding: var(--tpg-l) var(--tpg-3xl);
border-radius: var(--tpg-pill);
color: var(--tpg-ink);
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
text-align: center;
transition: background-color .3s var(--tpg-ease), color .3s var(--tpg-ease);
}
.tpg-svc-tab:hover { background: var(--tpg-sand-deep); }
.tpg-svc-tab.is-active,
.tpg-svc-tab.is-active:hover { background: var(--tpg-red); color: var(--tpg-white); }
/* ---------- Panel ---------- */
.tpg-svc-panel {
display: flex;
flex-direction: column;
gap: var(--tpg-6xl);
margin-top: var(--tpg-6xl);
}
.tpg-svc-panel[hidden] { display: none; }
.tpg-svc-panel:focus { outline: none; }
.tpg-svc-panel__media {
margin: 0;
border-radius: var(--tpg-radius);
overflow: hidden;
}
.tpg-svc-panel__media img {
display: block;
width: 100%;
/* 1532 × 680 on the design canvas. */
aspect-ratio: 1532 / 680;
height: auto;
object-fit: cover;
}
/* Focus area: 636px heading column, 748px detail column, 148px apart. */
.tpg-svc-focus {
display: grid;
grid-template-columns: minmax(0, 636fr) minmax(0, 748fr);
gap: 148px;
align-items: start;
}
.tpg-svc-focus__title {
margin: 0;
font-size: var(--tpg-fs-3xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-svc-focus__detail {
display: flex;
flex-direction: column;
gap: 48px;
}
.tpg-svc-focus__intro {
margin: 0;
font-size: var(--tpg-fs-m);
line-height: var(--tpg-lh-body);
}
.tpg-svc-focus__report {
margin: 0;
color: var(--tpg-red);
font-size: var(--tpg-fs-s);
line-height: var(--tpg-lh-body);
}
.tpg-svc-focus__cta { margin: 0; }
/* ---------- Detail list ----------
, not a scripted accordion: the copy stays reachable with
JavaScript off and the disclosure semantics come for free. */
.tpg-svc-list {
display: flex;
flex-direction: column;
gap: var(--tpg-3xl);
}
.tpg-svc-item {
display: flex;
flex-direction: column;
/* 8px between an open row's title and its copy, per the design. */
gap: var(--tpg-xs);
padding-top: var(--tpg-xl);
border-top: 1px solid rgba(0, 0, 0, .3);
}
.tpg-svc-item__row {
display: flex;
align-items: center;
gap: var(--tpg-xl);
min-height: 48px;
list-style: none;
cursor: pointer;
}
/* Safari still paints the default disclosure triangle without this. */
.tpg-svc-item__row::-webkit-details-marker { display: none; }
.tpg-svc-item__icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
}
.tpg-svc-item__icon img { display: block; width: 100%; height: 100%; }
.tpg-svc-item__title {
flex: 1 1 auto;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-svc-item__chevron {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--tpg-beige);
transition: transform .3s var(--tpg-ease);
}
.tpg-svc-item[open] > .tpg-svc-item__row .tpg-svc-item__chevron { transform: rotate(180deg); }
.tpg-svc-item__row:focus-visible { outline: 2px solid var(--tpg-red); outline-offset: 4px; }
/* Two classes: WordPress' global styles reset paragraph margins after this
stylesheet loads, and they would win at one. */
.tpg-svc-item .tpg-svc-item__body {
/* Sits under the title, clear of the 36px icon and its 24px gutter. */
margin: 0 0 0 60px;
font-size: var(--tpg-fs-s);
line-height: var(--tpg-lh-body);
}
/* A collapsed row is a fixed 48px; an open one grows to fit title + copy, so
the icon tops out with the title instead of floating mid-block. */
.tpg-svc-item[open] > .tpg-svc-item__row {
min-height: 0;
align-items: flex-start;
}
.tpg-svc-item[open] > .tpg-svc-item__body { animation: tpg-svc-open .4s var(--tpg-ease-out) both; }
/* Stands in until the row's copy lands in tpg_service_tabs(). */
.tpg-svc-item__body--todo { opacity: .55; font-style: italic; }
@keyframes tpg-svc-open {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* ---------- When to use this approach ---------- */
.tpg-svc-when {
display: flex;
flex-direction: column;
gap: var(--tpg-4xl);
margin-top: var(--tpg-7xl);
}
.tpg-svc-when__title {
margin: 0;
font-size: var(--tpg-fs-2xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-svc-when__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--tpg-3xl);
}
.tpg-svc-card {
display: flex;
flex-direction: column;
gap: var(--tpg-xl);
}
.tpg-svc-card__media {
margin: 0;
border-radius: var(--tpg-radius-sm);
overflow: hidden;
}
.tpg-svc-card__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
transition: transform .8s var(--tpg-ease-out);
}
.tpg-svc-card:hover .tpg-svc-card__media img { transform: scale(1.04); }
.tpg-svc-card__body {
display: flex;
flex-direction: column;
gap: var(--tpg-xs);
padding-right: var(--tpg-4xl);
}
.tpg-svc-card__title {
margin: 0;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-svc-card__text {
margin: 0;
font-size: var(--tpg-fs-s);
line-height: var(--tpg-lh-body);
opacity: .8;
}
.tpg-svc-when__grid > .tpg-reveal:nth-child(2) { transition-delay: .09s; }
.tpg-svc-when__grid > .tpg-reveal:nth-child(3) { transition-delay: .18s; }
/* A fourth card starts the second row, so it reveals on its own beat. */
.tpg-svc-when__grid > .tpg-reveal:nth-child(4) { transition-delay: .09s; }
/* The rows that replaced the cards (2026-09-26): the Expertise "spans" panel
— the warm card, heading in a narrow first column, the .tpg-exp-span
rows filling the rest — with a paragraph where the tags would be. The rows
are no longer an accordion: every paragraph shows in full. */
.tpg-svc-uses {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
gap: var(--tpg-4xl);
align-items: start;
margin-top: var(--tpg-7xl);
padding: var(--tpg-4xl);
border-radius: var(--tpg-radius);
background: #eee8e4;
}
.tpg-svc-uses__title {
margin: 0;
font-size: var(--tpg-fs-xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-main .tpg-svc-uses__lead {
margin: var(--tpg-m) 0 0;
max-width: 34ch;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-main .tpg-svc-uses__body {
margin: 0;
padding: var(--tpg-s) 0 var(--tpg-xl);
max-width: 62ch;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
/* Always open, so the title sits where the accordion's summary row did. */
.tpg-svc-use__title {
margin: 0;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
@media (max-width: 900px) {
.tpg-svc-uses { grid-template-columns: minmax(0, 1fr); gap: var(--tpg-xl); }
}
@media (max-width: 760px) {
.tpg-svc-uses { margin-top: var(--tpg-6xl); padding: var(--tpg-3xl); }
}
/* ---------- Services responsive ---------- */
@media (max-width: 1100px) {
/* The two focus-area columns stop fitting side by side well before the
cards do, so they stack first. */
.tpg-svc-focus { grid-template-columns: 1fr; gap: var(--tpg-4xl); }
}
@media (max-width: 900px) {
.tpg-svc-when__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpg-svc-card__body { padding-right: 0; }
}
@media (max-width: 760px) {
.tpg-svc-hero__title,
.tpg-svc-hero__lead { max-width: none; }
.tpg-svc-body { padding-block: var(--tpg-6xl) var(--tpg-7xl); }
/* A pill row that no longer fits becomes a horizontal strip rather than
wrapping into a tall white slab. */
.tpg-svc-tabs {
width: 100%;
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
border-radius: var(--tpg-radius);
}
.tpg-svc-tabs::-webkit-scrollbar { display: none; }
.tpg-svc-tab {
flex: 0 0 auto;
min-width: 0;
font-size: var(--tpg-fs-s);
white-space: nowrap;
}
.tpg-svc-panel { gap: var(--tpg-5xl); margin-top: var(--tpg-5xl); }
.tpg-svc-focus__detail { gap: var(--tpg-3xl); }
.tpg-svc-when { margin-top: var(--tpg-6xl); }
.tpg-svc-when__grid { grid-template-columns: 1fr; }
.tpg-svc-panel__media img { aspect-ratio: 4 / 3; }
}
/* ==========================================================================
Expertise page
Built from Figma "profile-expertise 1" (file x3wTJuRVbvTVTGeJygOkOV,
node 1:317). Same 1920px canvas as the homepage and the Services page, so
every measurement below resolves through the shared --tpg-* tokens. The
hero and the pill strip are the Services components unchanged — the
template reuses .tpg-svc-hero and .tpg-svc-tabs rather than restating them.
========================================================================== */
.tpg-exp-body { padding-block: var(--tpg-7xl) var(--tpg-8xl); }
/* The middle pill carries a second, smaller line; the other two are one line
and have to stay the same height, hence the column layout on every pill. */
.tpg-exp-tabs .tpg-svc-tab {
flex-direction: column;
gap: 0;
}
/* The two industry pills read "Industry Specialisation – … Practice", too long
for three pills to share one row. Capping the width breaks those labels onto
two balanced lines instead, and stretch keeps the one-line pill as tall. */
@media (min-width: 901px) {
.tpg-exp-tabs { flex-wrap: nowrap; align-items: stretch; }
.tpg-exp-tabs .tpg-svc-tab { max-width: 400px; }
.tpg-exp-tabs .tpg-svc-tab__label { text-wrap: balance; }
}
/* Sized by its own text rather than the 173px the Figma pill happened to
need: "Commerce & Industry Practice" is longer than the "Commercial
Practices" that width was drawn around, and wrapping it made that one pill
a line taller than the two beside it. */
.tpg-svc-tab__sub {
font-size: var(--tpg-fs-xs);
line-height: var(--tpg-lh-body);
white-space: nowrap;
}
/* Services and Expertise pills stack on phones. The scrolling strip hid most
of the labels ("Industry – Commerce" cut off at the edge), so each pill takes
the full width and its label may wrap. People and Search keep the strip. */
@media (max-width: 760px) {
.tpg-svc-tabs.tpg-svc-tabs--stack {
flex-direction: column;
align-items: stretch;
overflow: visible;
border-radius: calc(var(--tpg-l) * 2 + 1.4em);
}
.tpg-svc-tabs--stack .tpg-svc-tab {
flex: 0 0 auto;
padding: var(--tpg-m) var(--tpg-3xl);
white-space: normal;
text-wrap: balance;
}
.tpg-svc-tabs--stack .tpg-svc-tab__sub { white-space: normal; }
}
/* ---------- Panel ---------- */
.tpg-exp-panel {
display: flex;
flex-direction: column;
gap: var(--tpg-6xl);
margin-top: var(--tpg-7xl);
}
.tpg-exp-panel[hidden] { display: none; }
.tpg-exp-panel:focus { outline: none; }
.tpg-exp-band {
margin: 0;
border-radius: var(--tpg-radius);
overflow: hidden;
}
.tpg-exp-band img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1532 / 680;
object-fit: cover;
}
/* ---------- Sidebar + stage ----------
336px / 112px / 972px on the 1532px canvas. The sidebar keeps its design
width in pixels rather than as a share of the shell: its labels are 16px at
every breakpoint, so a column that shrank with the viewport wrapped
"Sales, Marketing & Communications" into the row below it on anything
narrower than 1920. The stage takes what is left, capped at its design
width, which reproduces the 112px of slack the design leaves on the right
at 1920 and simply closes it as the shell narrows. */
.tpg-exp-split {
display: grid;
grid-template-columns: 336px minmax(0, 1fr);
column-gap: 7.311%;
align-items: start;
}
.tpg-exp-areas {
display: flex;
flex-direction: column;
padding-block: var(--tpg-xl);
border-radius: var(--tpg-radius-sm);
background: var(--tpg-white);
}
.tpg-exp-area {
display: flex;
align-items: center;
min-height: 48px;
/* Inside the 48px row this is exactly the single line the design draws; it
only shows up if a label ever does wrap, keeping the two lines off the
rows above and below. */
padding-block: var(--tpg-s);
padding-inline: var(--tpg-xl);
color: var(--tpg-ink);
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
/* The active marker is a left border, so hold the space on every row and
the labels never shift sideways when the selection moves. */
border-left: 2px solid transparent;
padding-left: calc(var(--tpg-xl) - 2px);
transition: color .3s var(--tpg-ease), border-color .3s var(--tpg-ease);
}
.tpg-exp-area:hover { color: var(--tpg-red); }
.tpg-exp-area.is-active { border-left-color: var(--tpg-red); }
.tpg-exp-area:focus-visible { outline: 2px solid var(--tpg-red); outline-offset: -2px; }
/* The dropdown that stands in for the People sectors list below 1024px. */
.tpg-ppl-picker { display: none; }
.tpg-picker__select {
width: 100%;
min-height: 56px;
margin: 0;
padding: var(--tpg-m) calc(var(--tpg-xl) + 32px) var(--tpg-m) var(--tpg-xl);
border: 1px solid transparent;
border-radius: var(--tpg-radius-sm);
background: var(--tpg-white) url('../icons/chevron-down.svg') right var(--tpg-xl) center / 20px no-repeat;
color: var(--tpg-ink);
font: inherit;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
-webkit-appearance: none;
appearance: none;
cursor: pointer;
transition: border-color .3s var(--tpg-ease);
}
.tpg-picker__select:hover { border-color: var(--tpg-sand-deep); }
.tpg-picker__select:focus-visible { outline: 2px solid var(--tpg-red); outline-offset: 2px; }
.tpg-picker__go { margin-top: var(--tpg-s); }
.tpg-exp-stage { min-width: 0; max-width: 972px; }
.tpg-exp-back { display: none; }
.tpg-exp-area-panel {
display: flex;
flex-direction: column;
gap: 48px;
}
.tpg-exp-area-panel[hidden] { display: none; }
.tpg-exp-title {
margin: 0;
font-size: var(--tpg-fs-2xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
/* The sector line some areas carry under their heading. The Archive exports
set it as one run of text divided by rules, so the items run inline and the
divider is a character rather than a border: a flex row with a left border
per item put the divider at the start of every wrapped line. The no-break
space glues each divider to the item before it, so a wrap lands after the
divider and never orphans one at the head of a line. */
.tpg-exp-sectors {
margin: 0;
padding: 0;
list-style: none;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-exp-sectors > li { display: inline; }
.tpg-exp-sectors > li:not(:last-child)::after {
content: "\00a0|";
color: rgba(0, 0, 0, .3);
}
.tpg-exp-intro {
display: flex;
flex-direction: column;
gap: var(--tpg-2xl);
}
.tpg-exp-intro p,
.tpg-exp-close {
margin: 0;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
/* ---------- "Our expertise spans" ----------
A warm panel with the label in a narrow first column and the accordion
filling the rest. #eee8e4 sits between --tpg-sand-deep and --tpg-beige and
is used nowhere else, so it stays local to this block. */
.tpg-exp-spans {
display: flex;
gap: 48px;
align-items: flex-start;
padding: var(--tpg-4xl);
border-radius: var(--tpg-radius);
background: #eee8e4;
}
.tpg-exp-spans__label {
flex: 0 0 auto;
margin: 0;
padding-block: var(--tpg-xxs);
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-exp-spans__list {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--tpg-xl);
min-width: 0;
}
.tpg-exp-span { min-width: 0; }
/* A hairline above every row but the first, the way the design separates the
collapsed rows from the open one. */
.tpg-exp-span + .tpg-exp-span { border-top: 1px solid rgba(0, 0, 0, .3); padding-top: var(--tpg-xl); }
.tpg-exp-span__row {
display: flex;
align-items: center;
gap: var(--tpg-xl);
min-height: 48px;
list-style: none;
cursor: pointer;
}
.tpg-exp-span__row::-webkit-details-marker { display: none; }
.tpg-exp-span__title {
flex: 1 1 auto;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-exp-span__chevron {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--tpg-pill);
background: var(--tpg-beige);
transition: transform .3s var(--tpg-ease);
}
.tpg-exp-span[open] > .tpg-exp-span__row .tpg-exp-span__chevron { transform: rotate(180deg); }
.tpg-exp-span__row:focus-visible { outline: 2px solid var(--tpg-red); outline-offset: 4px; }
.tpg-exp-tags {
display: flex;
flex-wrap: wrap;
gap: var(--tpg-m);
margin: 0;
padding: var(--tpg-l) 0 var(--tpg-xl);
list-style: none;
}
.tpg-exp-span[open] > .tpg-exp-tags { animation: tpg-svc-open .4s var(--tpg-ease-out) both; }
.tpg-exp-tag {
padding: var(--tpg-s) var(--tpg-l);
border: 1px solid var(--tpg-ink);
border-radius: var(--tpg-pill);
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
/* ---------- Placeholder states ---------- */
.tpg-exp-empty {
margin: 0;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
opacity: .55;
font-style: italic;
}
.tpg-exp-cta { margin: 0; }
/* ---------- Expertise responsive ---------- */
@media (max-width: 1100px) {
/* The sidebar stays beside the panel at every width so every practice area
is on screen at once; it just narrows to leave the stage room. */
.tpg-exp-split { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--tpg-3xl); }
}
@media (max-width: 900px) {
/* The label no longer fits beside the accordion. */
.tpg-exp-spans { flex-direction: column; gap: var(--tpg-xl); }
}
@media (max-width: 760px) {
.tpg-exp-body { padding-block: var(--tpg-6xl) var(--tpg-7xl); }
.tpg-exp-panel { gap: var(--tpg-5xl); margin-top: var(--tpg-5xl); }
.tpg-exp-area-panel { gap: var(--tpg-4xl); }
.tpg-exp-spans { padding: var(--tpg-3xl); }
.tpg-exp-band img { aspect-ratio: 4 / 3; }
/* Phones stack: the full list on its white card, then the panel at full
width. Side by side left the text about 190px wide on a 390px phone. */
.tpg-exp-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--tpg-4xl); }
.tpg-exp-areas { padding-block: var(--tpg-s); }
.tpg-exp-area { min-height: 44px; }
/* ---------- Drill-down (phones, with JS) ----------
app.js adds .is-drill: the list and the stage become two slides in one
clipped frame, the list first. Choosing an area slides the stage in
from the right the way the contact drawer enters, and "All practice
areas" slides back. The pane that is not showing is taken out of flow,
so the page is only ever as tall as the slide on screen. Without the
script the two simply stack. */
.tpg-exp-split.is-drill {
position: relative;
display: block;
/* Sideways only, so the fade-up on the list is not cut off below. */
overflow-x: clip;
/* html's scroll-padding-top already clears the fixed header. */
scroll-margin-top: var(--tpg-l);
}
/* .is-animated arrives with the first tap, so setting the frame up on
load snaps into place instead of sliding. */
.tpg-exp-split.is-drill.is-animated > .tpg-exp-areas,
.tpg-exp-split.is-drill.is-animated > .tpg-exp-stage {
transition:
transform var(--tpg-dur) var(--tpg-ease-out),
opacity var(--tpg-dur) var(--tpg-ease-out),
visibility 0s linear 0s;
}
/* Whichever pane is leaving stays visible until its slide has finished. */
.tpg-exp-split.is-drill > .tpg-exp-stage,
.tpg-exp-split.is-drill.is-open > .tpg-exp-areas {
position: absolute;
inset: 0 0 auto 0;
visibility: hidden;
pointer-events: none;
transition-delay: 0s, 0s, var(--tpg-dur);
}
.tpg-exp-split.is-drill > .tpg-exp-stage { transform: translateX(100%); }
.tpg-exp-split.is-drill.is-open > .tpg-exp-areas { transform: translateX(-30%); opacity: 0; }
.tpg-exp-split.is-drill.is-open > .tpg-exp-stage {
position: relative;
inset: auto;
visibility: visible;
pointer-events: auto;
transform: none;
transition-delay: 0s;
}
/* A chevron on every row says it opens something. */
.tpg-exp-split.is-drill .tpg-exp-area { justify-content: space-between; gap: var(--tpg-m); }
.tpg-exp-split.is-drill .tpg-exp-area::after {
content: "";
flex: 0 0 auto;
width: 20px;
height: 20px;
background: url('../icons/chevron-down.svg') center / 20px no-repeat;
transform: rotate(-90deg);
}
.tpg-exp-split.is-drill .tpg-exp-back {
display: inline-flex;
align-items: center;
gap: var(--tpg-xs);
min-height: 44px;
margin: 0 0 var(--tpg-xl);
padding: 0 var(--tpg-l) 0 var(--tpg-s);
border: 0;
border-radius: var(--tpg-pill);
background: var(--tpg-white);
color: var(--tpg-ink);
font: inherit;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
cursor: pointer;
transition: color .3s var(--tpg-ease);
}
.tpg-exp-split.is-drill .tpg-exp-back img { transform: rotate(90deg); }
.tpg-exp-back:hover { color: var(--tpg-red); }
.tpg-exp-back:focus-visible { outline: 2px solid var(--tpg-red); outline-offset: 2px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
.tpg-exp-split.is-drill.is-animated > .tpg-exp-areas,
.tpg-exp-split.is-drill.is-animated > .tpg-exp-stage { transition: none; }
}
/* ---------- Expertise blocks (editor only) ----------
The front end is rendered by inc/expertise-blocks.php; these rules only
dress the editing UI, so they are scoped to the block wrappers the editor
adds and never reach the published page. */
.tpg-eb {
padding: var(--tpg-m);
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-radius-sm);
background: var(--tpg-white);
}
.tpg-eb + .tpg-eb { margin-top: var(--tpg-m); }
.tpg-eb__kicker {
margin: 0 0 var(--tpg-s);
font-size: var(--tpg-fs-s);
font-weight: 400;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--tpg-grey-dark);
}
.tpg-eb__sub { text-transform: none; letter-spacing: 0; }
.tpg-eb__band {
display: block;
width: 100%;
max-height: 160px;
margin-bottom: var(--tpg-m);
border-radius: var(--tpg-radius-sm);
object-fit: cover;
}
.tpg-eb__group {
margin-block: var(--tpg-m);
padding: var(--tpg-m);
border-radius: var(--tpg-radius-sm);
background: var(--tpg-sand);
}
.tpg-eb__legend {
margin: 0 0 var(--tpg-s);
font-size: var(--tpg-fs-s);
font-weight: 400;
}
.tpg-eb__row {
padding: var(--tpg-s) 0;
border-top: 1px solid var(--tpg-line);
}
.tpg-eb__row:first-of-type { border-top: 0; }
/* Styled to match the textareas around it. */
.tpg-eb__rich {
min-height: 5.5em;
margin: 0;
padding: 6px 8px;
border: 1px solid #949494;
border-radius: 2px;
background: var(--tpg-white);
line-height: 1.6;
}
.tpg-eb__rich:focus { border-color: var(--wp-admin-theme-color, #3858e9); box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #3858e9); outline: 0; }
.tpg-eb__thumb {
display: block;
width: 100%;
max-width: 240px;
margin-bottom: var(--tpg-s);
border-radius: var(--tpg-radius-sm);
}
/* About blocks: row actions, image pickers inside a row, and the image row's
photo-beside-copy preview (flipped when the image sits on the right). */
.tpg-eb__actions { display: flex; gap: var(--tpg-m); }
.tpg-eb__image { margin-block: var(--tpg-s); }
.tpg-eb__image + .tpg-eb__image { margin-top: var(--tpg-l); }
.tpg-eb__split {
display: grid;
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
gap: var(--tpg-m);
align-items: start;
}
.tpg-eb__split.is-flipped > img { order: 2; }
/* ==========================================================================
People page
Built from Figma "profile-people" (file isVAmQS2Pood8pSkXgj7Tz, node 1:314).
Same 1920px canvas as the homepage and the Services page, so every
measurement below resolves through the shared --tpg-* type and space
tokens. The hero is the Services hero component unchanged, so the template
reuses .tpg-svc-hero wholesale rather than restating it here.
========================================================================== */
.tpg-ppl-body { padding-block: var(--tpg-7xl) var(--tpg-8xl); }
/* ---------- Group tabs ----------
Team / Leadership / Advisors: the Services tab strip unchanged, centred
above the filter bar so it reads as the page's top-level choice. */
.tpg-ppl-groups { margin-bottom: var(--tpg-6xl); }
/* ---------- Filter bar ----------
Hub pills on the left, name search on the right. */
.tpg-ppl-filterbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tpg-3xl);
flex-wrap: wrap;
scroll-margin-top: calc(var(--tpg-header-h) + var(--tpg-l));
}
/* The hub strip is the Services tab strip, with two differences: it sits left
rather than centred, and each pill hugs its own label instead of sharing a
173px minimum. */
.tpg-ppl-hubs {
margin-inline: 0;
scroll-margin-top: 0;
}
.tpg-ppl-hubs .tpg-svc-tab { min-width: 0; }
/* The search field is the hub strip's twin: same white pill, same height —
4px of strip padding either side of a 73px pill is 81px, which is what the
block padding here adds up to. */
.tpg-ppl-search {
display: flex;
align-items: center;
gap: var(--tpg-s);
flex: 0 1 auto;
min-width: min(100%, 320px);
padding: calc(var(--tpg-l) + var(--tpg-xxs)) var(--tpg-3xl);
border-radius: var(--tpg-pill);
background: var(--tpg-white);
}
.tpg-ppl-search__input {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--tpg-ink);
font: inherit;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-ppl-search__input::placeholder {
color: var(--tpg-grey-mid);
opacity: 1;
}
.tpg-ppl-search__input:focus { outline: 0; }
/* The focus ring belongs on the pill, since the input itself has no edge. */
.tpg-ppl-search:focus-within { box-shadow: 0 0 0 2px var(--tpg-red); }
/* Safari draws its own clear button on type="search"; the form has a submit. */
.tpg-ppl-search__input::-webkit-search-decoration,
.tpg-ppl-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tpg-ppl-search__submit {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
/* A 24px mark is a poor target; the pill is tall enough to hold 44. */
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
/* The header draws this mark white for the dark navbar. On the white field it
would be invisible, so it is inverted to the ink the rest of the bar uses. */
.tpg-ppl-search__submit .tpg-icon-search img { filter: invert(1); }
.tpg-ppl-search__submit:hover .tpg-icon-search {
transform: scale(1.08);
transition: transform .3s var(--tpg-ease);
}
/* ---------- Sidebar + grid ----------
The canvas lays out a 300px sector column, a 148px channel and a 1308px
grid inside the 1756px wide shell. Both fixed figures scale with the
viewport and stop at their design value. */
.tpg-ppl-layout {
display: grid;
grid-template-columns: clamp(240px, 15.625vw, 300px) minmax(0, 1fr);
column-gap: clamp(var(--tpg-6xl), 7.708vw, 148px);
margin-top: var(--tpg-7xl);
}
/* ---------- Sector filter ---------- */
.tpg-ppl-sectors__list {
margin: 0;
padding: 0;
list-style: none;
}
/* The design rules every row off with a 1px black hairline, including above
the first one. */
.tpg-ppl-sectors__item { border-top: 1px solid var(--tpg-ink); }
.tpg-ppl-sector {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tpg-m);
/* 12px + 24px line box + 12px = the design's 48px row. */
padding: var(--tpg-s) var(--tpg-xl);
color: var(--tpg-ink);
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
transition: color .3s var(--tpg-ease);
}
.tpg-ppl-sector:hover { color: var(--tpg-red); }
.tpg-ppl-sector__mark {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: var(--tpg-pill);
background: var(--tpg-beige);
transition: background-color .3s var(--tpg-ease);
}
/* Masked so the chevron takes the design's ink, not the red the shipped SVG
carries for its other uses. */
.tpg-ppl-sector__mark::before {
content: '';
width: 16px;
height: 16px;
background: var(--tpg-ink-soft);
-webkit-mask: url('../icons/chevrons.svg') center / contain no-repeat;
mask: url('../icons/chevrons.svg') center / contain no-repeat;
transition: background-color .3s var(--tpg-ease);
}
/* The frame draws no selected state for this list — a filter needs one, so
the active row takes the same red the hub pills use. */
.tpg-ppl-sector.is-active { color: var(--tpg-red); }
.tpg-ppl-sector.is-active .tpg-ppl-sector__mark { background: var(--tpg-red); }
.tpg-ppl-sector.is-active .tpg-ppl-sector__mark::before { background: var(--tpg-white); }
/* ---------- Consultant grid ---------- */
.tpg-ppl-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--tpg-3xl);
margin: 0;
padding: 0;
list-style: none;
scroll-margin-top: calc(var(--tpg-header-h) + var(--tpg-l));
}
/* Leadership is ranked by menu order — see tpg_people_leadership_ranks() —
and fills the same three-up grid as every other tab. */
.tpg-ppl-grid[data-group="leadership"] > .tpg-ppl-card { order: var(--lead, 999); }
/* Leadership and Advisors are four people each, which a three-up row splits
3 + 1. On desktop four cards sit two by two instead, at the same card width:
two columns of the three-up grid plus the gap between them. */
@media (min-width: 1025px) {
.tpg-ppl-grid[data-group="leadership"][data-count="4"],
.tpg-ppl-grid[data-group="advisors"][data-count="4"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: calc((100% - 2 * var(--tpg-3xl)) * 2 / 3 + var(--tpg-3xl));
}
}
/* People pinned to the front of one group tab — see tpg_people_group_pins().
One rule per pinned group; the sector pins below override these. */
.tpg-ppl-grid[data-group="team"] > .tpg-ppl-card { order: var(--pin-team, 999); }
.tpg-ppl-grid[data-group="advisors"] > .tpg-ppl-card { order: var(--pin-advisors, 999); }
/* People pinned to the front of one sector filter — see
tpg_people_sector_pins(). One rule per pinned sector. */
.tpg-ppl-grid[data-sector="technology"]:not([data-group="leadership"]) > .tpg-ppl-card { order: var(--pin-technology, 999); }
.tpg-ppl-grid[data-sector="chemicals-industrial"]:not([data-group="leadership"]) > .tpg-ppl-card { order: var(--pin-chemicals-industrial, 999); }
.tpg-ppl-grid[data-sector="risk-compliance"]:not([data-group="leadership"]) > .tpg-ppl-card { order: var(--pin-risk-compliance, 999); }
.tpg-ppl-card {
position: relative;
display: flex;
align-items: flex-end;
aspect-ratio: 412 / 549;
border-radius: var(--tpg-radius);
/* The placeholder fill behind a portrait that has not decoded yet. */
background: var(--tpg-beige);
overflow: hidden;
}
.tpg-ppl-card__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* Transparent → black over the bottom 221px of the 549px card. */
.tpg-ppl-card__scrim {
position: absolute;
inset: auto 0 0;
height: 40.25%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}
/* The whole tile is the link now that each person has a profile page. */
.tpg-ppl-card__link {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
color: inherit;
text-decoration: none;
}
.tpg-ppl-card__link:focus-visible {
outline: 2px solid var(--tpg-red);
outline-offset: 3px;
}
.tpg-ppl-card__media { transition: transform .6s var(--tpg-ease-out); }
.tpg-ppl-card__link:hover .tpg-ppl-card__media { transform: scale(1.04); }
.tpg-ppl-card__body {
position: relative;
z-index: 2;
display: block;
width: 100%;
padding: 0 var(--tpg-3xl) var(--tpg-2xl);
color: var(--tpg-white);
}
.tpg-ppl-card__name {
display: block;
margin: 0;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-ppl-card__title {
display: block;
margin: var(--tpg-xs) 0 0;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
opacity: .85;
}
.tpg-ppl-card__tags {
display: flex;
flex-wrap: wrap;
gap: var(--tpg-xs);
margin: var(--tpg-l) 0 0;
}
.tpg-ppl-tag {
display: inline-flex;
align-items: center;
padding: var(--tpg-xxs) var(--tpg-s);
border-radius: var(--tpg-pill);
background: var(--tpg-white);
color: var(--tpg-ink);
font-size: var(--tpg-fs-xs);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
/* ---------- Empty state ---------- */
.tpg-ppl-empty {
margin: var(--tpg-6xl) 0 0;
color: var(--tpg-grey-dark);
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
text-align: center;
}
/* Filtering hides things with the hidden attribute. The browser's own [hidden]
rule is display:none at the weakest possible specificity, so the display
values set above quietly beat it and a "hidden" card keeps rendering — hence
restating it here. */
.tpg-ppl-card[hidden],
.tpg-ppl-empty[hidden] { display: none; }
@media (max-width: 900px) {
/* Side by side no longer leaves the search a usable width, so the bar
stacks and the search takes the full row. */
.tpg-ppl-filterbar {
flex-direction: column;
align-items: stretch;
gap: var(--tpg-m);
}
.tpg-ppl-search { min-width: 0; }
}
@media (max-width: 1024px) {
/* The sector list stops being a sidebar and sits above the grid. */
.tpg-ppl-layout {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--tpg-6xl);
margin-top: var(--tpg-6xl);
}
.tpg-ppl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Fourteen full-width rows pushed the people a screen down, so the
list becomes a dropdown. */
.tpg-ppl-picker { display: block; }
.tpg-ppl-sectors { display: none; }
}
@media (max-width: 760px) {
.tpg-ppl-body { padding-block: var(--tpg-6xl) var(--tpg-7xl); }
.tpg-ppl-search { padding: var(--tpg-xs) var(--tpg-xs) var(--tpg-xs) var(--tpg-xl); }
.tpg-ppl-search__input { font-size: var(--tpg-fs-s); }
.tpg-ppl-layout { row-gap: var(--tpg-5xl); margin-top: var(--tpg-5xl); }
/* Two to a row on phones. At ~170px a card, the type steps down a size
and the padding tightens so name and title still sit on the scrim. */
.tpg-ppl-grid { gap: var(--tpg-m); }
.tpg-ppl-card__body { padding: 0 var(--tpg-m) var(--tpg-m); }
.tpg-ppl-card__name { font-size: var(--tpg-fs-s); }
.tpg-ppl-card__title { margin-top: 2px; font-size: var(--tpg-fs-xxs); }
.tpg-ppl-card__tags { margin-top: var(--tpg-s); gap: 4px; }
.tpg-ppl-card .tpg-ppl-tag { padding: 2px var(--tpg-xs); font-size: var(--tpg-fs-xxs); }
.tpg-ppl-empty { margin-top: var(--tpg-5xl); }
/* Both toggle strips: smaller pills that share out the full width of the
white bar, each growing from its own label width. A strip that ever
overflows still scrolls from its first pill. */
.tpg-ppl-groups { margin-bottom: var(--tpg-3xl); }
.tpg-ppl-groups .tpg-svc-tab,
.tpg-ppl-hubs .tpg-svc-tab {
flex: 1 0 auto;
min-width: 0;
padding: var(--tpg-s) var(--tpg-l);
font-size: var(--tpg-fs-xs);
}
}
/* ==========================================================================
Consultant profile (single-tpg_person.php)
Structure follows the reference the client gave: portrait and name, a
standfirst with the ways to reach them, then Experience / Areas of
Expertise / Education, and a closing contact block. Sizes come from the
same --tpg-* tokens as the rest of the site.
========================================================================== */
.tpg-profile__top {
/* The header prints on a light plate here, so it needs clearing. */
padding-block: calc(var(--tpg-header-h) + var(--tpg-6xl)) var(--tpg-7xl);
background: var(--tpg-sand-deep);
}
.tpg-profile__back {
margin-bottom: var(--tpg-4xl);
font-size: var(--tpg-fs-s);
font-weight: 200;
}
.tpg-profile__back a { color: var(--tpg-grey-dark); }
.tpg-profile__back a:hover { color: var(--tpg-red); }
.tpg-profile__head {
display: grid;
grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
gap: var(--tpg-7xl);
align-items: start;
}
/* Not everyone has a portrait yet; without one the copy takes the full width
rather than sitting in the empty 420px picture track. */
.tpg-profile__head--noportrait { grid-template-columns: minmax(0, 1fr); }
.tpg-profile__portrait {
margin: 0;
border-radius: var(--tpg-radius);
overflow: hidden;
background: var(--tpg-beige);
}
.tpg-profile__media {
display: block;
width: 100%;
height: auto;
aspect-ratio: 412 / 549;
object-fit: cover;
object-position: center top;
}
.tpg-profile__name {
margin: 0;
font-size: var(--tpg-fs-3xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
/* Scoped past `.tpg-main p { margin: 0 }`, which outweighs a bare class —
without it the role, hub and standfirst paragraphs lose their spacing. */
.tpg-profile .tpg-profile__role {
margin: var(--tpg-m) 0 0;
color: var(--tpg-red);
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-profile .tpg-profile__hub {
display: flex;
align-items: center;
gap: var(--tpg-xs);
margin: var(--tpg-s) 0 0;
color: var(--tpg-grey-dark);
font-size: var(--tpg-fs-s);
font-weight: 200;
}
/* A location pin drawn in CSS rather than shipping another icon for one use. */
.tpg-profile__pin {
width: 12px;
height: 12px;
border: 2px solid var(--tpg-grey-dark);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
}
.tpg-profile .tpg-profile__lead {
margin: var(--tpg-3xl) 0 0;
max-width: 62ch;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
/* The gap under the location sets the standfirst apart; between its own
paragraphs a normal paragraph gap reads better. */
.tpg-profile .tpg-profile__lead + .tpg-profile__lead { margin-top: var(--tpg-l); }
.tpg-profile__contact {
display: flex;
flex-wrap: wrap;
gap: var(--tpg-m) var(--tpg-3xl);
margin: var(--tpg-4xl) 0 0;
padding: 0;
list-style: none;
font-size: var(--tpg-fs-s);
font-weight: 200;
}
.tpg-profile__contact a {
color: var(--tpg-ink);
border-bottom: 1px solid var(--tpg-beige);
padding-bottom: 2px;
}
.tpg-profile__contact a:hover { color: var(--tpg-red); border-bottom-color: var(--tpg-red); }
/* The LinkedIn mark sits beside the email as a quiet second way in: grey like
the location pin so it doesn't outweigh the light text, and centred on the
email's x-height rather than its underline. */
.tpg-profile__contact { align-items: center; column-gap: var(--tpg-xl); }
.tpg-profile__contact .tpg-profile__linkedin {
display: inline-flex;
color: var(--tpg-grey-dark);
border-bottom: 0;
padding: 0;
position: relative;
top: 2px;
transition: color .2s ease;
}
.tpg-profile__linkedin svg { display: block; width: 18px; height: 18px; }
/* ---------- Body ---------- */
.tpg-profile__body { padding-block: var(--tpg-7xl); }
.tpg-profile__cols {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
gap: var(--tpg-7xl);
align-items: start;
}
.tpg-profile__section + .tpg-profile__section { margin-top: var(--tpg-6xl); }
.tpg-profile__h2 {
margin: 0 0 var(--tpg-3xl);
font-size: var(--tpg-fs-xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-profile__main p {
margin: 0 0 var(--tpg-l);
max-width: 68ch;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-profile__main p:last-child { margin-bottom: 0; }
.tpg-profile__tags {
display: flex;
flex-wrap: wrap;
gap: var(--tpg-xs);
margin: 0;
padding: 0;
list-style: none;
}
.tpg-profile__tag {
padding: var(--tpg-xs) var(--tpg-m);
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-pill);
background: var(--tpg-white);
font-size: var(--tpg-fs-xs);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-profile__tag--link { padding: 0; }
.tpg-profile__tag--link a {
display: block;
padding: var(--tpg-xs) var(--tpg-m);
color: inherit;
}
.tpg-profile__tag--link:hover { border-color: var(--tpg-red); }
.tpg-profile__tag--link a:hover { color: var(--tpg-red); }
.tpg-profile__address,
.tpg-profile__licence {
margin: 0;
font-size: var(--tpg-fs-xs);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-profile .tpg-profile__licence { margin-top: var(--tpg-m); color: var(--tpg-grey-mid); }
/* ---------- Contact CTA ---------- */
.tpg-profile__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--tpg-3xl);
margin-top: var(--tpg-7xl);
padding: var(--tpg-6xl);
border-radius: var(--tpg-radius);
background: var(--tpg-sand-deep);
}
.tpg-profile__cta-title {
margin: 0;
font-size: var(--tpg-fs-xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
/* ---------- Related ---------- */
.tpg-profile__more { padding-block: 0 var(--tpg-8xl); }
.tpg-profile__more .tpg-ppl-grid { margin-top: var(--tpg-4xl); }
@media (max-width: 1024px) {
.tpg-profile__head,
.tpg-profile__cols {
grid-template-columns: minmax(0, 1fr);
gap: var(--tpg-5xl);
}
.tpg-profile__portrait { max-width: 420px; }
.tpg-profile__more .tpg-ppl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.tpg-profile__top { padding-block: calc(var(--tpg-header-h) + var(--tpg-4xl)) var(--tpg-6xl); }
.tpg-profile__body { padding-block: var(--tpg-6xl); }
.tpg-profile__cta { padding: var(--tpg-5xl) var(--tpg-4xl); }
.tpg-profile__more { padding-bottom: var(--tpg-7xl); }
.tpg-profile__more .tpg-ppl-grid { grid-template-columns: minmax(0, 1fr); }
}
/* A site part (a Content Block printed into a template) lays out as if its
blocks sat directly in the template — the plugin's wrapper is transparent. */
.tpg-part { display: contents; }
/* ==========================================================================
Kadence page sections (.tpg-kb) and the page hero (.tpg-page-hero)
Inner pages are built like the homepage: each section is a Kadence Row
Layout with standard blocks inside. .tpg-kb hands the row's layout to the
theme — Kadence's own grid, width and padding are switched off, so the
design holds whatever an editor adds or rearranges inside. Doubled classes
outrank the per-row CSS Kadence prints for each uniqueID.
========================================================================== */
.tpg-kb.tpg-kb > .kt-row-column-wrap {
display: block;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
grid-template-columns: none;
gap: 0;
}
.tpg-kb .wp-block-kadence-column { min-width: 0; width: 100%; }
.tpg-kb.tpg-kb .kt-inside-inner-col { display: block; padding: 0; }
/* The hero is .tpg-svc-hero — the component every inner page shares — built
from a Kadence row: the photograph is a core image the editor replaces, the
H1 and lead are a heading and a paragraph. The photo is taken out of flow
against the row itself, so the row and column wrappers give up positioning. */
.tpg-page-hero.tpg-page-hero > .kt-row-column-wrap {
display: block;
position: static;
/* Kadence gives this wrapper z-index: 1, and as a flex item of the hero
that alone makes it a stacking context — which would put the photo and
the text in one layer, under the scrim. */
z-index: auto;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.tpg-page-hero .wp-block-kadence-column.tpg-svc-hero__body { position: static; }
.tpg-page-hero.tpg-page-hero .tpg-svc-hero__body > .kt-inside-inner-col {
position: static;
display: flex;
flex-direction: column;
gap: var(--tpg-2xl);
padding: 0;
}
.tpg-page-hero figure.tpg-svc-hero__media {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
}
.tpg-page-hero figure.tpg-svc-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* The scrim is the row's own ::after, so there is no empty block to trip over. */
.tpg-page-hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 62%, #000 100%);
pointer-events: none;
}
.tpg-page-hero .tpg-svc-hero__body > .kt-inside-inner-col > :not(.tpg-svc-hero__media) {
position: relative;
z-index: 2;
}
/* The About and Expertise photos are brightest behind the nav (sunlit
windows), so their scrims also darken the top edge, enough for the white
nav type. */
.tpg-about-page .tpg-page-hero::after,
.tpg-expertise-page .tpg-page-hero::after {
background:
linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .25) 22%, rgba(0, 0, 0, 0) 40%),
linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 62%, #000 100%);
}
/* ==========================================================================
About page
Built from Figma "profile-about" (file n0iduweCw6VgKQOxmEIai1, node 1:367).
Same 1920 canvas as the rest of the theme. The value cards are
.tpg-svc-card; only the page's own layout is spelled out here.
This frame sets its section headings and body copy at weight 250 — a touch
heavier than the 100/200 the rest of the site uses for the same styles — so
that weight is scoped to these classes rather than changed site-wide.
========================================================================== */
.tpg-about-story__title,
.tpg-about-story__text,
.tpg-about-values__title,
.tpg-about-apart__title,
.tpg-about-apart__lead,
.tpg-about-feature__title,
.tpg-about-feature__text,
.tpg-about-join__title { font-weight: 250; }
/* ---------- Our story ----------
The title and the two photos share a row (747 + 748, 36 apart, bottom
aligned); the two paragraphs share the next one, 80 below. */
.tpg-about-story { padding-top: var(--tpg-7xl); }
.tpg-about-story.tpg-about-story .tpg-about-story__col > .kt-inside-inner-col {
display: flex;
flex-direction: column;
gap: var(--tpg-6xl);
}
.tpg-about-page .tpg-about-story__head,
.tpg-about-page .tpg-about-story__body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--tpg-3xl);
}
.tpg-about-page .tpg-about-story__head { align-items: end; }
.tpg-about-story__title { font-size: var(--tpg-fs-3xl); }
.tpg-about-story__text {
font-size: var(--tpg-fs-m);
/* A step lighter than the 250 above, at the client's request. */
font-weight: 200;
}
/* 476 + 248 at 248 tall: the second photo is square, the first takes the rest. */
.tpg-about-page .tpg-about-story__media {
display: grid;
grid-template-columns: minmax(0, 476fr) minmax(0, 248fr);
gap: var(--tpg-xl);
}
.tpg-about-page figure.tpg-about-story__figure {
margin: 0;
border-radius: 12px;
overflow: hidden;
}
.tpg-about-story__figure img {
width: 100%;
height: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.tpg-about-story__figure:first-child img { aspect-ratio: 476 / 248; }
/* ---------- Our values ----------
A 1756 × 680 band, and a 1535-wide card of five values overlapping its
foot. The card starts at y 2025 on the canvas, which with the story above
at its design height is 466px down the band: an overlap of 214. */
.tpg-about-values {
--tpg-values-overlap: clamp(110px, 11.146vw, 214px);
margin-top: var(--tpg-7xl);
}
.tpg-about-page .tpg-about-values__band {
position: relative;
min-height: clamp(380px, 35.417vw, 680px);
/* Title at y 260 of the 680 band. */
padding-top: clamp(72px, 13.542vw, 260px);
padding-bottom: calc(var(--tpg-values-overlap) + var(--tpg-3xl));
color: var(--tpg-off-white);
text-align: center;
}
/* The band sits in the wide shell's content box, so the photo is inset by the
shell's gutters and rounded to match. */
.tpg-about-page figure.tpg-about-values__media {
position: absolute;
inset: 0 var(--tpg-gutter-wide);
margin: 0;
border-radius: var(--tpg-radius);
overflow: hidden;
background: #3f6f95;
}
.tpg-about-values__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
}
/* The night skyline is busy and bright behind the title, so it is dimmed. */
.tpg-about-page figure.tpg-about-values__media::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .35);
pointer-events: none;
}
.tpg-about-page .tpg-about-values__head {
position: relative;
padding-inline: var(--tpg-gutter);
}
.tpg-about-values__title { font-size: var(--tpg-fs-3xl); }
.tpg-about-page .tpg-about-values__card {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--tpg-xl);
width: calc(100% - var(--tpg-gutter) * 2);
max-width: 1535px;
margin: calc(-1 * var(--tpg-values-overlap)) auto 0;
padding: var(--tpg-xl);
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-radius);
background: #f0edec;
/* Figma "Card shadow" — deeper than the theme's Profile shadow. */
box-shadow: 0 14px 31px rgba(0, 0, 0, .18), 0 56px 56px rgba(0, 0, 0, .16),
0 127px 76px rgba(0, 0, 0, .09), 0 226px 90px rgba(0, 0, 0, .03);
}
.tpg-about-page figure.tpg-svc-card__media { margin: 0; }
/* ---------- What sets us apart ----------
Two Kadence columns: the title in 636, the statement and rows in 748,
pushed to either edge of the 1535 content column. */
.tpg-about-apart { margin-top: var(--tpg-8xl); }
.tpg-about-apart.tpg-about-apart > .kt-row-column-wrap {
display: grid;
grid-template-columns: minmax(0, 636fr) minmax(0, 748fr);
justify-content: space-between;
column-gap: clamp(40px, 7.708vw, 148px);
max-width: calc(1535px + var(--tpg-gutter) * 2);
margin-inline: auto;
padding-inline: var(--tpg-gutter);
}
.tpg-about-apart__title { font-size: var(--tpg-fs-3xl); }
.tpg-about-apart.tpg-about-apart .tpg-about-apart__body > .kt-inside-inner-col {
display: flex;
flex-direction: column;
gap: clamp(28px, 2.5vw, 48px);
}
.tpg-about-apart__lead { font-size: var(--tpg-fs-m); }
.tpg-about-apart__kicker { font-size: var(--tpg-fs-s); }
.tpg-about-page .tpg-about-apart__list { display: flex; flex-direction: column; gap: var(--tpg-xl); }
/* The rows are core Details blocks: the summary carries the icon (a block
style — is-style-icon-*) and the beige chevron; the body is ordinary blocks.
The same 36px icon / 48px row / 1px 30% hairline as the Services list. */
.tpg-why-item {
padding-top: var(--tpg-xl);
border-top: 1px solid rgba(0, 0, 0, .3);
}
.tpg-why-item > summary {
display: flex;
align-items: center;
gap: var(--tpg-xl);
min-height: 48px;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
list-style: none;
cursor: pointer;
}
.tpg-why-item > summary::-webkit-details-marker { display: none; }
.tpg-why-item > summary::before {
content: '';
flex: 0 0 36px;
height: 36px;
background: var(--tpg-item-icon, none) center / contain no-repeat;
}
.tpg-why-item > summary::after {
content: '';
flex: 0 0 24px;
height: 24px;
margin-left: auto;
border-radius: 50%;
background: var(--tpg-beige) url('../icons/chevron-down.svg') center / 16px no-repeat;
transition: transform .3s var(--tpg-ease);
}
.tpg-why-item[open] > summary::after { transform: rotate(180deg); }
/* A closed row is a fixed 48px; an open one hugs its title, so the body sits
right under it — the frame's open row is 36 icon + 8 + body. */
.tpg-why-item[open] > summary { min-height: 0; align-items: flex-start; }
.tpg-why-item > summary:focus-visible { outline: 2px solid var(--tpg-red); outline-offset: 4px; }
.tpg-about-page .tpg-why-item > :not(summary) {
/* Under the title, clear of the 36px icon and its 24px gutter. */
margin: var(--tpg-xs) 0 0 60px;
font-size: var(--tpg-fs-s);
animation: tpg-svc-open .4s var(--tpg-ease-out) both;
}
/* ---------- Image + statement rows ----------
748 square photo, 120 gap, 664 copy column: 1532. The second row flips. */
.tpg-about-features {
margin-top: var(--tpg-8xl);
padding-block: var(--tpg-8xl);
background: linear-gradient(180deg, var(--tpg-sand-deep) 0%, var(--tpg-sand) 100%);
}
.tpg-about-features.tpg-about-features .tpg-about-features__col > .kt-inside-inner-col { display: flex; flex-direction: column; gap: var(--tpg-6xl); }
.tpg-about-page .tpg-about-feature {
display: grid;
grid-template-columns: minmax(0, 748fr) minmax(0, 664fr);
column-gap: var(--tpg-7xl);
align-items: center;
}
.tpg-about-page .tpg-about-feature.is-style-image-right { grid-template-columns: minmax(0, 664fr) minmax(0, 748fr); }
.tpg-about-feature.is-style-image-right > .tpg-about-feature__media { order: 2; }
.tpg-about-page figure.tpg-about-feature__media {
margin: 0;
border-radius: var(--tpg-radius);
overflow: hidden;
}
.tpg-about-feature__media img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
transition: transform .8s var(--tpg-ease-out);
}
.tpg-about-feature:hover .tpg-about-feature__media img { transform: scale(1.03); }
.tpg-about-page .tpg-about-feature__copy {
display: flex;
flex-direction: column;
gap: var(--tpg-3xl);
}
.tpg-about-feature__title { font-size: var(--tpg-fs-xl); }
.tpg-about-feature__text { font-size: var(--tpg-fs-m); }
/* The frame breaks the copy with a blank line (33px at M), not the 36 above. */
.tpg-about-page .tpg-about-feature__text + .tpg-about-feature__text { margin-top: calc(var(--tpg-fs-m) * 1.5 - var(--tpg-3xl)); }
/* ---------- Join Us ----------
A 1309-wide off-white card: 436px photo, then 60px-padded copy. */
.tpg-about-join { padding-bottom: var(--tpg-8xl); }
.tpg-about-page .tpg-about-join__card {
display: grid;
grid-template-columns: minmax(0, 436fr) minmax(0, 873fr);
width: calc(100% - var(--tpg-gutter) * 2);
max-width: 1309px;
margin-inline: auto;
border-radius: var(--tpg-radius);
overflow: hidden;
background: var(--tpg-off-white);
}
.tpg-about-page figure.tpg-about-join__media { position: relative; margin: 0; min-height: 240px; }
.tpg-about-join__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.tpg-about-page .tpg-about-join__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--tpg-l);
padding: var(--tpg-6xl) clamp(24px, 3.125vw, 60px);
}
.tpg-about-join__title { font-size: var(--tpg-fs-xl); }
.tpg-about-join__text { font-size: var(--tpg-fs-s); opacity: .8; }
.tpg-about-page .tpg-about-join__more { margin-top: var(--tpg-xxs); }
.tpg-about-join__more a {
display: inline-flex;
align-items: center;
gap: var(--tpg-xs);
color: var(--tpg-red);
font-size: var(--tpg-fs-s);
text-decoration: none;
}
.tpg-about-join__more a::after {
content: '';
width: 24px;
height: 24px;
background: url('../icons/chevrons.svg') center / contain no-repeat;
transition: transform .3s var(--tpg-ease);
}
.tpg-about-join__more a:hover::after { transform: translateX(4px); }
/* ---------- About responsive ---------- */
@media (max-width: 1300px) {
.tpg-about-page .tpg-about-values__card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.tpg-about-page .tpg-about-story__head,
.tpg-about-page .tpg-about-story__body { grid-template-columns: minmax(0, 1fr); gap: var(--tpg-4xl); }
.tpg-about-page .tpg-about-values__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpg-about-apart.tpg-about-apart > .kt-row-column-wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--tpg-4xl); }
.tpg-about-page .tpg-about-feature,
.tpg-about-page .tpg-about-feature.is-style-image-right { grid-template-columns: minmax(0, 1fr); gap: var(--tpg-4xl); }
.tpg-about-feature.is-style-image-right > .tpg-about-feature__media { order: 0; }
.tpg-about-page .tpg-about-join__card { grid-template-columns: minmax(0, 1fr); }
.tpg-about-page figure.tpg-about-join__media { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 600px) {
.tpg-about-page .tpg-about-values__card { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
Contact drawer
Built from Figma "Contact" (file JIkJNq9xd68tJVHU6dwnEF, node 1:341).
Canvas 1920, like the rest of the theme, so the panel's own numbers are
derived from it: 1220 wide = 63.542vw, padding 80/88, card 1044 split
707/335. The type and most of the spacing land on existing tokens at that
canvas (28px = --tpg-fs-l, 24 = --tpg-xl, 40 = --tpg-4xl, 80 = --tpg-6xl),
so only the numbers with no token are spelled out.
========================================================================== */
.tpg-drawer {
/* 1220 / 1920. Below ~1070 the floor takes over, and under 760 the panel
goes full width. */
--tpg-drawer-w: min(100%, max(680px, 63.542vw));
--tpg-drawer-bg: var(--tpg-sand);
--tpg-drawer-pad-block: clamp(32px, 4.167vw, 80px);
--tpg-drawer-pad-inline: clamp(20px, 4.583vw, 88px);
/* The input border is the one colour in the frame with no token. */
--tpg-field-line: #d3d3d3;
position: fixed;
inset: 0;
z-index: 200; /* over the sticky header (100) */
visibility: hidden;
pointer-events: none;
}
.tpg-drawer[hidden] { display: none; }
.tpg-drawer.is-open { visibility: visible; pointer-events: auto; }
/* The frame fills the area behind the panel with black at 40%. */
.tpg-drawer__scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .4);
opacity: 0;
transition: opacity var(--tpg-dur) var(--tpg-ease-out);
}
.tpg-drawer.is-open .tpg-drawer__scrim { opacity: 1; }
.tpg-drawer__panel {
position: absolute;
inset: 0 0 0 auto;
display: flex;
flex-direction: column;
width: var(--tpg-drawer-w);
background: var(--tpg-drawer-bg);
color: var(--tpg-ink);
box-shadow: var(--tpg-shadow-card);
transform: translateX(100%);
transition: transform var(--tpg-dur) var(--tpg-ease-out);
}
.tpg-drawer.is-open .tpg-drawer__panel { transform: translateX(0); }
.tpg-drawer__panel:focus { outline: 0; }
/* The panel scrolls, not the page behind it — `data-lenis-prevent` on the
panel keeps the smooth-scroll wheel handler off this box. The frame is
1124 tall and never scrolls; a real viewport is shorter, so it has to. */
.tpg-drawer__scroll {
display: flex;
flex-direction: column;
gap: clamp(32px, 3.646vw, 70px);
flex: 1 1 auto;
min-height: 0; /* a flex item will not shrink below its content without this */
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: var(--tpg-drawer-pad-block) var(--tpg-drawer-pad-inline);
}
/* This box is itself a flex column, so its children shrink by default — which
is compression, not overflow: the card would be squeezed under its own
content height and clip it against `overflow: hidden`, and the panel would
never scroll because nothing ever overflowed. They keep their height and the
panel scrolls instead. */
.tpg-drawer__scroll > *,
/* The panel is a Content Block whose wrapper is display: contents, so its
blocks are the scroll box's real flex items and need the same guard. */
.tpg-drawer__scroll > .tpg-part > * { flex: 0 0 auto; }
/* 48px circle in Beige, 30px in from the panel's top right. */
.tpg-drawer__close {
position: absolute;
top: clamp(16px, 1.563vw, 30px);
right: clamp(16px, 1.563vw, 30px);
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: var(--tpg-pill);
background: var(--tpg-beige);
cursor: pointer;
transition: background-color .25s var(--tpg-ease), transform .25s var(--tpg-ease);
}
.tpg-drawer__close:hover { background: var(--tpg-sand-deep); transform: rotate(90deg); }
/* ---------- Regional hubs ---------- */
.tpg-drawer__hubs { display: flex; flex-direction: column; gap: var(--tpg-xl); }
.tpg-drawer__hubs-title {
margin: 0;
font-size: var(--tpg-fs-l);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
/* The frame draws four cards; --tpg-hub-cols is set inline from however many
offices there actually are, so two do not sit in a half-empty four-up row. */
.tpg-drawer__hub-row {
display: grid;
grid-template-columns: repeat(var(--tpg-hub-cols, 4), minmax(0, 1fr));
gap: var(--tpg-4xl);
}
.tpg-drawer__hub { display: flex; flex-direction: column; gap: var(--tpg-m); }
.tpg-drawer__flag { border-radius: var(--tpg-pill); }
.tpg-drawer__hub-body { display: flex; flex-direction: column; gap: var(--tpg-s); }
.tpg-drawer__hub-place { display: flex; flex-direction: column; gap: var(--tpg-xxs); }
.tpg-drawer__hub-name {
margin: 0;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-drawer__hub-entity,
.tpg-drawer__hub-address {
margin: 0;
font-size: var(--tpg-fs-xxs);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
/* The registered entity, above its address — same size, a shade back. */
.tpg-drawer__hub-entity { color: var(--tpg-grey-dark); }
.tpg-drawer__hub-line {
display: flex;
align-items: center;
gap: var(--tpg-xs);
margin: 0;
font-size: var(--tpg-fs-xxs);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-drawer__hub-line img { flex: 0 0 auto; }
.tpg-drawer__hub-line a:hover { color: var(--tpg-red); }
/* ---------- The card: form on the left, photograph on the right ---------- */
.tpg-drawer__card {
display: flex;
align-items: stretch;
overflow: hidden; /* clips the photo to the card's radius */
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-radius-sm);
background: var(--tpg-white);
}
.tpg-drawer__form {
display: flex;
flex: 1 1 auto;
flex-direction: column;
/* Heading to fields is 24; the 40 before the submit comes from the grid's
own gap plus .tpg-form__actions' margin. */
gap: var(--tpg-xl);
min-width: 0;
padding: clamp(28px, 2.5vw, 48px) clamp(24px, 3.542vw, 68px);
}
/* 335 / 1920. Fixed rather than proportional: it is a portrait crop, so it
stops reading as one once it narrows much past this. */
.tpg-drawer__figure {
position: relative;
flex: 0 0 clamp(220px, 17.448vw, 335px);
}
/* Out of flow on purpose. The crop is 503x1024, which at 335 wide is 682 tall
— 20px more than the frame's slot — so in flow it would size the card and
push the form down with it. The form sets the height; the photo covers it. */
.tpg-drawer__figure img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.tpg-drawer__head { display: flex; flex-direction: column; gap: var(--tpg-xs); }
.tpg-drawer__title {
margin: 0;
font-size: var(--tpg-fs-l);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-drawer__lead {
margin: 0;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
/* ---------- The panel as blocks ----------
The panel's content is the "Contact panel" pattern, so it is core groups,
headings, paragraphs and images carrying the classes above. The drawer sits
outside .tpg-main, so block margins are reset here too. */
.tpg-drawer .wp-block-group,
.tpg-drawer .wp-block-heading,
.tpg-drawer p,
.tpg-drawer figure.wp-block-image { margin: 0; }
.tpg-drawer .is-layout-flow > * { margin-block: 0; }
.tpg-drawer figure.tpg-drawer__flag img { width: 24px; height: 24px; border-radius: var(--tpg-pill); }
/* A line linking to tel: or mailto: picks up its icon by itself, so adding an
email to an office is typing one paragraph. */
.tpg-drawer__hub-line:has(a[href^="tel:"])::before,
.tpg-drawer__hub-line:has(a[href^="mailto:"])::before {
content: '';
flex: 0 0 16px;
height: 16px;
background: url('../icons/phone.svg') center / contain no-repeat;
}
.tpg-drawer__hub-line:has(a[href^="mailto:"])::before { background-image: url('../icons/email.svg'); }
.tpg-drawer__form > .wp-block-shortcode,
.tpg-drawer__form > .wpcf7 { margin: 0; }
/* ==========================================================================
Contact Form 7 inside the drawer
Scoped to .tpg-drawer so the plugin's own markup picks up the theme's type,
colour and radius without a single rule leaking onto anything else.
========================================================================== */
.tpg-drawer .wpcf7 { margin: 0; }
.tpg-drawer .wpcf7-form > p { margin: 0; }
/* The heading block and the fields sit 24 apart; the submit clears by 40. */
.tpg-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--tpg-xl);
}
.tpg-drawer .tpg-field { display: flex; flex-direction: column; gap: var(--tpg-xs); margin: 0; }
.tpg-drawer .tpg-field--wide { grid-column: 1 / -1; }
.tpg-drawer .tpg-field label {
font-size: var(--tpg-fs-xs);
font-weight: 200;
line-height: var(--tpg-lh-body);
color: var(--tpg-grey-dark);
}
.tpg-drawer .tpg-field__req { color: var(--tpg-red); }
/* Contact Form 7 wraps every control in a span, which would otherwise break
the field's own column layout. */
.tpg-drawer .wpcf7-form-control-wrap { display: block; width: 100%; }
/* 52px tall: 1 + 13 + 24 + 13 + 1, borders included. The frame says 16px
padding on a 52px box, which its own 24px line height does not fit into. */
.tpg-drawer input[type="text"],
.tpg-drawer input[type="email"],
.tpg-drawer input[type="tel"],
.tpg-drawer select,
.tpg-drawer textarea {
/* Block, not the inline-level default: in a line box each control picks up
a few px of baseline leading underneath it. */
display: block;
width: 100%;
margin: 0;
padding: 13px var(--tpg-m);
border: 1px solid var(--tpg-field-line);
border-radius: var(--tpg-xs);
background: var(--tpg-white);
color: var(--tpg-ink);
font: inherit;
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
transition: border-color .25s var(--tpg-ease), box-shadow .25s var(--tpg-ease);
}
.tpg-drawer textarea { resize: vertical; min-height: 131px; }
.tpg-drawer input::placeholder,
.tpg-drawer textarea::placeholder { color: var(--tpg-grey-mid); opacity: 1; }
.tpg-drawer input:focus,
.tpg-drawer select:focus,
.tpg-drawer textarea:focus {
border-color: var(--tpg-red);
outline: 0;
}
/* The frame's own chevron, 24px and 16px in from the edge. */
.tpg-drawer select {
appearance: none;
padding-right: calc(var(--tpg-m) * 2 + 24px);
background-image: url('../icons/chevron-down.svg');
background-repeat: no-repeat;
background-position: right var(--tpg-m) center;
background-size: 24px 24px;
}
/* "Please select" is the placeholder, and reads as one until something is
chosen — CF7 gives it an empty value, which is what :invalid matches. */
.tpg-drawer select:invalid { color: var(--tpg-grey-dark); }
/* ---------- Actions + feedback ---------- */
/* Flex, not the block default: as an inline-level box the submit would sit in
a line box and pick up 6px of baseline leading above it. */
.tpg-form__actions { display: flex; grid-column: 1 / -1; margin: var(--tpg-m) 0 0; }
/* The CTA is 127x64 in the frame — which is exactly what .tpg-btn already
draws at this canvas, so it only has to stop stretching. */
.tpg-drawer .tpg-form__submit { width: auto; text-align: center; }
.tpg-drawer .wpcf7-spinner { margin: 0 0 0 var(--tpg-s); vertical-align: middle; }
/* The plugin ships a yellow/red bordered box; these are the theme's colours
for the same three states. */
.tpg-drawer .wpcf7-not-valid-tip {
margin-top: var(--tpg-xxs);
color: var(--tpg-red);
font-size: var(--tpg-fs-xxs);
font-weight: 200;
}
.tpg-drawer input.wpcf7-not-valid,
.tpg-drawer select.wpcf7-not-valid,
.tpg-drawer textarea.wpcf7-not-valid { border-color: var(--tpg-red); }
.tpg-drawer .wpcf7-response-output {
margin: var(--tpg-xl) 0 0;
padding: var(--tpg-s) var(--tpg-m);
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-xs);
background: var(--tpg-sand);
font-size: var(--tpg-fs-xs);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
/* Success in Profile red with white text, on every Contact Form 7 form, in
the drawer or not. The plugin's own rule draws a 2px green border. */
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output,
.tpg-drawer form.sent .wpcf7-response-output {
border-color: var(--tpg-red);
background: var(--tpg-red);
color: var(--tpg-white);
}
.tpg-drawer form.invalid .wpcf7-response-output,
.tpg-drawer form.unaccepted .wpcf7-response-output,
.tpg-drawer form.failed .wpcf7-response-output,
.tpg-drawer form.aborted .wpcf7-response-output { border-color: var(--tpg-red); color: var(--tpg-red); }
/* ---------- reCAPTCHA ---------- */
/* Google's floating badge sits over the design on every page. Hiding it is
allowed only if the attribution is shown in the form instead, which
tpg_contact_recaptcha_notice() renders — the two go together. */
.grecaptcha-badge { visibility: hidden; }
.tpg-drawer__recaptcha {
margin: var(--tpg-m) 0 0;
color: var(--tpg-grey-mid);
font-size: var(--tpg-fs-xxs);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-drawer__recaptcha a { text-decoration: underline; text-underline-offset: 2px; }
.tpg-drawer__recaptcha a:hover { color: var(--tpg-grey-dark); }
/* ---------- Page behind the panel ---------- */
body.tpg-drawer-open { overflow: hidden; }
/* ---------- Narrower than the canvas ---------- */
@media (max-width: 1400px) {
.tpg-drawer__hub-row { grid-template-columns: repeat(min(var(--tpg-hub-cols, 4), 2), minmax(0, 1fr)); }
}
/* The photo is the first thing to go: below this the form column is narrower
than the two fields it has to hold side by side. */
@media (max-width: 1100px) {
.tpg-drawer { --tpg-drawer-w: 100%; }
.tpg-drawer__figure { display: none; }
}
/* Narrow enough that the close button and the hubs heading would otherwise
share the same band: the panel's top padding shrinks faster than the
button's inset does. */
@media (max-width: 760px) {
.tpg-drawer__hubs-title { padding-right: 56px; }
}
@media (max-width: 600px) {
.tpg-drawer__hub-row { grid-template-columns: minmax(0, 1fr); gap: var(--tpg-3xl); }
.tpg-form__grid { grid-template-columns: minmax(0, 1fr); }
.tpg-drawer .tpg-form__submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.tpg-drawer__scrim,
.tpg-drawer__panel,
.tpg-drawer__close { transition: none; }
.tpg-drawer__close:hover { transform: none; }
}
/* ==========================================================================
Search — the header panel and the results page (inc/search.php, search.php)
Built from the theme's own parts rather than a new vocabulary: the field is
the People search pill grown up, the tabs are the Services tab pills, the
close button is the contact drawer's, and a result row is an off-white card
like the Insights feature. The panel drops from the top where the drawer
slides from the right, so the two never read as the same thing.
========================================================================== */
/* ---------- The field ---------- */
.tpg-search-field {
display: flex;
align-items: center;
gap: var(--tpg-m);
width: 100%;
padding: var(--tpg-xs) var(--tpg-xs) var(--tpg-xs) var(--tpg-3xl);
border-radius: var(--tpg-pill);
background: var(--tpg-white);
transition: box-shadow .3s var(--tpg-ease);
}
.tpg-search-field:focus-within { box-shadow: 0 0 0 2px var(--tpg-red); }
.tpg-search-field__input {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: var(--tpg-s) 0;
border: 0;
background: none;
color: var(--tpg-ink);
font: inherit;
font-size: var(--tpg-fs-m);
font-weight: 200;
line-height: var(--tpg-lh-body);
}
.tpg-search-field__input::placeholder { color: var(--tpg-grey-mid); opacity: 1; }
.tpg-search-field__input:focus { outline: 0; }
.tpg-search-field__input::-webkit-search-decoration,
.tpg-search-field__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tpg-search-field__submit {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 56px;
height: 56px;
padding: 0;
border: 0;
border-radius: var(--tpg-pill);
background: var(--tpg-red);
cursor: pointer;
transition: background-color .3s var(--tpg-ease);
}
.tpg-search-field__submit img { width: 20px; height: 20px; transition: transform .3s var(--tpg-ease); }
.tpg-search-field__submit:hover { background: #b32838; }
.tpg-search-field__submit:hover img { transform: translateX(3px); }
/* In the panel the field is the headline: display weight, one size down from
the page titles. */
.tpg-search-field--panel { padding-left: var(--tpg-5xl); box-shadow: 0 18px 40px rgba(0, 0, 0, .06); }
.tpg-search-field--panel .tpg-search-field__input {
font-size: var(--tpg-fs-2xl);
font-weight: 100;
line-height: var(--tpg-lh-display);
}
.tpg-search-field--panel .tpg-search-field__submit { width: 64px; height: 64px; }
.tpg-search-field--page { max-width: 866px; }
.tpg-search-field--page .tpg-search-field__input { font-size: var(--tpg-fs-l); }
/* ---------- Header panel ---------- */
.tpg-search {
position: fixed;
inset: 0;
z-index: 200; /* over the sticky header (100), like the drawer */
visibility: hidden;
pointer-events: none;
}
.tpg-search[hidden] { display: none; }
.tpg-search.is-open { visibility: visible; pointer-events: auto; }
.tpg-search__scrim {
position: absolute;
inset: 0;
background: rgba(17, 12, 14, .55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .5s var(--tpg-ease-out);
}
.tpg-search.is-open .tpg-search__scrim { opacity: 1; }
.tpg-search__panel {
position: absolute;
inset: 0 0 auto;
max-height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--tpg-sand);
color: var(--tpg-ink);
border-radius: 0 0 var(--tpg-radius) var(--tpg-radius);
box-shadow: var(--tpg-shadow-card);
transform: translateY(-100%);
transition: transform var(--tpg-dur) var(--tpg-ease-out);
}
.tpg-search.is-open .tpg-search__panel { transform: none; }
.tpg-search__panel:focus { outline: 0; }
.tpg-search__inner {
display: flex;
flex-direction: column;
gap: var(--tpg-4xl);
padding-block: var(--tpg-3xl) var(--tpg-7xl);
}
/* One 1100px column, centred: a field the full 1756px wide shell would be
too long a line to type into. */
.tpg-search__inner > * { width: 100%; max-width: 1100px; margin-inline: auto; }
.tpg-search__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tpg-l);
}
.tpg-search__title,
.tpg-search__label,
.tpg-search-page__kicker {
font-size: var(--tpg-fs-xs);
font-weight: 300;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tpg-grey-dark);
}
/* The drawer's button, out of its absolute corner and into the bar. */
.tpg-search .tpg-search__close { position: static; flex: 0 0 auto; }
/* ---------- Suggestions (the "Search panel" Content Block) ---------- */
.tpg-search__extras,
.tpg-search-page__suggest {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--tpg-5xl) var(--tpg-7xl);
}
.tpg-search.has-live .tpg-search__extras { display: none; }
.tpg-search__group { display: flex; flex-direction: column; gap: var(--tpg-l); }
.tpg-search__chips { display: flex; flex-wrap: wrap; gap: var(--tpg-xs); }
.tpg-search__chips .wp-block-button__link {
display: inline-flex;
align-items: center;
padding: var(--tpg-xs) var(--tpg-l);
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-pill);
background: var(--tpg-white);
color: var(--tpg-ink);
font-size: var(--tpg-fs-s);
font-weight: 200;
line-height: var(--tpg-lh-body);
transition: border-color .25s var(--tpg-ease), color .25s var(--tpg-ease), transform .25s var(--tpg-ease);
}
.tpg-search__chips .wp-block-button__link:hover { border-color: var(--tpg-red); color: var(--tpg-red); transform: translateY(-1px); }
.tpg-search__links { margin: 0; padding: 0; list-style: none; }
.tpg-search__links li { border-bottom: 1px solid var(--tpg-line); }
.tpg-search__links li:first-child { border-top: 1px solid var(--tpg-line); }
.tpg-search__links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tpg-l);
padding-block: var(--tpg-m);
color: var(--tpg-ink);
font-size: var(--tpg-fs-m);
}
.tpg-search__links a::after {
content: '';
flex: 0 0 auto;
width: 24px;
height: 24px;
background: url('../icons/chevrons.svg') center / contain no-repeat;
transition: transform .3s var(--tpg-ease);
}
.tpg-search__links a:hover { color: var(--tpg-red); }
.tpg-search__links a:hover::after { transform: translateX(4px); }
/* ---------- Live results ---------- */
.tpg-search__live[hidden] { display: none; }
.tpg-live {
margin: 0;
padding: var(--tpg-xs);
list-style: none;
border-radius: var(--tpg-radius);
background: var(--tpg-off-white);
}
.tpg-live__item {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) 24px;
align-items: center;
gap: var(--tpg-l);
padding: var(--tpg-xs);
border-radius: var(--tpg-radius-sm);
color: var(--tpg-ink);
transition: background-color .2s var(--tpg-ease);
}
.tpg-live__item:hover,
.tpg-live__item:focus-visible { background: var(--tpg-sand-deep); outline-offset: -2px; }
.tpg-live__thumb {
width: 56px;
height: 56px;
border-radius: 12px;
overflow: hidden;
background: var(--tpg-sand-deep) url('../icons/document.svg') center / 24px no-repeat;
}
.tpg-live__thumb--people { background-image: url('../icons/user-outline.svg'); }
.tpg-live__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.tpg-live__text { display: flex; flex-direction: column; min-width: 0; }
.tpg-live__meta {
overflow: hidden;
color: var(--tpg-grey-dark);
font-size: var(--tpg-fs-xxs);
white-space: nowrap;
text-overflow: ellipsis;
}
.tpg-live__meta b { color: var(--tpg-red); font-weight: 400; }
.tpg-live__title { font-size: var(--tpg-fs-m); line-height: 1.35; }
.tpg-live__title .tpg-mark { background: none; color: var(--tpg-red); padding: 0; }
.tpg-live__item::after {
content: '';
width: 24px;
height: 24px;
background: url('../icons/chevrons.svg') center / contain no-repeat;
opacity: 0;
transform: translateX(-4px);
transition: opacity .2s var(--tpg-ease), transform .2s var(--tpg-ease);
}
.tpg-live__item:hover::after,
.tpg-live__item:focus-visible::after { opacity: 1; transform: none; }
.tpg-live__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tpg-l);
margin-top: var(--tpg-l);
padding-inline: var(--tpg-l);
color: var(--tpg-grey-dark);
font-size: var(--tpg-fs-xs);
}
.tpg-live__empty { padding: var(--tpg-3xl); border-radius: var(--tpg-radius); background: var(--tpg-off-white); color: var(--tpg-grey-dark); }
/* ---------- Results page ---------- */
.tpg-search-page__head {
/* Clears the fixed header, which is on its solid plate here. */
padding-block: calc(var(--tpg-header-h) + var(--tpg-6xl)) var(--tpg-5xl);
}
.tpg-search-page__head .tpg-shell { display: flex; flex-direction: column; gap: var(--tpg-2xl); }
.tpg-search-page__kicker { color: var(--tpg-red); }
.tpg-search-page__title { max-width: 1100px; font-size: var(--tpg-fs-3xl); overflow-wrap: anywhere; }
.tpg-search-page__query { color: var(--tpg-red); }
.tpg-search-page__count { color: var(--tpg-grey-dark); font-size: var(--tpg-fs-s); }
.tpg-search-page__body { padding-bottom: var(--tpg-8xl); }
/* The Services pills, left-aligned, each carrying its count. */
.tpg-search-tabs { margin: 0 0 var(--tpg-5xl); }
.tpg-search-tabs .tpg-svc-tab { min-width: 0; gap: var(--tpg-xs); }
.tpg-search-tab__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding-inline: 8px;
border-radius: var(--tpg-pill);
background: var(--tpg-sand-deep);
font-size: var(--tpg-fs-xxs);
line-height: 1;
transition: background-color .3s var(--tpg-ease);
}
.tpg-svc-tab.is-active .tpg-search-tab__count { background: rgba(255, 255, 255, .22); }
.tpg-results {
display: flex;
flex-direction: column;
gap: var(--tpg-l);
margin: 0;
padding: 0;
list-style: none;
}
.tpg-result {
position: relative;
display: grid;
grid-template-columns: clamp(160px, 10.417vw, 200px) minmax(0, 1fr) 48px;
align-items: center;
gap: var(--tpg-4xl);
padding: var(--tpg-l) var(--tpg-4xl) var(--tpg-l) var(--tpg-l);
border-radius: var(--tpg-radius);
background: var(--tpg-off-white);
transition: box-shadow .4s var(--tpg-ease), transform .4s var(--tpg-ease);
}
.tpg-result:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .08); transform: translateY(-2px); }
/* The title's link covers the row, so its focus ring belongs on the row. */
.tpg-result:focus-within { box-shadow: 0 0 0 2px var(--tpg-red); }
.tpg-result__title a:focus-visible { outline: 0; }
.tpg-result__media {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 4 / 3;
border-radius: var(--tpg-radius-sm);
overflow: hidden;
background: var(--tpg-sand-deep);
}
.tpg-result__media img:not([width="32"]) {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--tpg-ease-out);
}
.tpg-result--people .tpg-result__media img { object-position: 50% 18%; }
.tpg-result__media img[width="32"] { width: 32px; height: 32px; opacity: .45; }
.tpg-result:hover .tpg-result__media img:not([width="32"]) { transform: scale(1.05); }
.tpg-result__body { display: flex; flex-direction: column; gap: var(--tpg-xs); min-width: 0; }
.tpg-result__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--tpg-xxs) var(--tpg-xs);
color: var(--tpg-grey-dark);
font-size: var(--tpg-fs-xxs);
}
.tpg-result__meta > * + *::before { content: '\00b7'; margin-right: var(--tpg-xs); }
.tpg-result__type { color: var(--tpg-red); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.tpg-result__title { font-size: var(--tpg-fs-l); font-weight: 200; line-height: 1.3; }
.tpg-result__title a { color: var(--tpg-ink); }
.tpg-result__title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tpg-result:hover .tpg-result__title a { color: var(--tpg-red); }
.tpg-result__snippet {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
color: rgba(0, 0, 0, .72);
font-size: var(--tpg-fs-s);
}
.tpg-mark {
padding: 0 .12em;
border-radius: 4px;
background: rgba(205, 46, 63, .12);
color: inherit;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.tpg-result__title .tpg-mark { padding: 0; background: none; color: var(--tpg-red); }
/* A ringed arrow at the row's end, filled red on hover. */
.tpg-result__go {
position: relative;
width: 48px;
height: 48px;
border: 1px solid var(--tpg-line);
border-radius: var(--tpg-pill);
transition: background-color .3s var(--tpg-ease), border-color .3s var(--tpg-ease);
}
.tpg-result__go::before {
content: '';
position: absolute;
inset: 0;
background: url('../icons/arrow-sm.svg') center / 18px no-repeat;
filter: invert(1);
transition: filter .3s var(--tpg-ease), transform .3s var(--tpg-ease);
}
.tpg-result:hover .tpg-result__go { border-color: var(--tpg-red); background: var(--tpg-red); }
.tpg-result:hover .tpg-result__go::before { filter: none; transform: translateX(3px); }
.tpg-search-page .tpg-pagination { margin-top: var(--tpg-6xl); }
/* ---------- No results (the "Search — no results" Content Block) ---------- */
.tpg-search-empty {
display: flex;
flex-direction: column;
gap: var(--tpg-2xl);
max-width: 866px;
padding: var(--tpg-6xl) var(--tpg-5xl);
border-radius: var(--tpg-radius);
background: var(--tpg-off-white);
}
.tpg-search-empty__title { font-size: var(--tpg-fs-2xl); }
.tpg-search-empty__lead { max-width: 640px; color: var(--tpg-grey-dark); font-size: var(--tpg-fs-m); }
.tpg-search-empty .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--tpg-m); }
/* Core's Outline button style, drawn as the brand pill in ink. */
.wp-block-button.tpg-btn.is-style-outline > .wp-block-button__link {
border: 1px solid var(--tpg-ink);
background: transparent;
color: var(--tpg-ink);
padding-block: calc(var(--tpg-l) - 1px);
}
.wp-block-button.tpg-btn.is-style-outline > .wp-block-button__link:hover {
background: var(--tpg-ink);
color: var(--tpg-white);
box-shadow: none;
}
body.tpg-search-open { overflow: hidden; }
/* ---------- Search responsive ---------- */
@media (max-width: 1024px) {
.tpg-result { grid-template-columns: 140px minmax(0, 1fr) 40px; gap: var(--tpg-3xl); padding-right: var(--tpg-3xl); }
.tpg-result__go { width: 40px; height: 40px; }
}
@media (max-width: 760px) {
/* The panel is the whole screen on a phone: the scrim would be a sliver. */
.tpg-search__panel { height: 100dvh; border-radius: 0; }
.tpg-search__inner { gap: var(--tpg-3xl); padding-block: var(--tpg-l) var(--tpg-6xl); }
.tpg-search__extras,
.tpg-search-page__suggest { grid-template-columns: minmax(0, 1fr); gap: var(--tpg-5xl); }
.tpg-search-field--panel { padding-left: var(--tpg-3xl); }
.tpg-search-field--panel .tpg-search-field__input { font-size: var(--tpg-fs-xl); }
.tpg-search-field--panel .tpg-search-field__submit { width: 52px; height: 52px; }
.tpg-search-field__submit { width: 48px; height: 48px; }
/* Tabs scroll sideways in one line rather than wrapping into a block. */
.tpg-search-tabs {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
margin-bottom: var(--tpg-3xl);
}
.tpg-search-tabs::-webkit-scrollbar { display: none; }
.tpg-search-tabs .tpg-svc-tab { flex: 0 0 auto; padding: var(--tpg-m) var(--tpg-l); font-size: var(--tpg-fs-s); }
}
@media (max-width: 680px) {
.tpg-result {
grid-template-columns: 88px minmax(0, 1fr);
align-items: start;
gap: var(--tpg-l);
padding: var(--tpg-m);
}
.tpg-result__media { aspect-ratio: 1; border-radius: 12px; }
.tpg-result__go { display: none; }
/* The role is too long to share the type's line, and a wrapped row would
strand its separator dot at the start of the next. */
.tpg-result__meta > * + * { flex-basis: 100%; }
.tpg-result__meta > * + *::before { content: none; }
.tpg-result__title { font-size: var(--tpg-fs-m); }
.tpg-result__snippet { -webkit-line-clamp: 2; font-size: var(--tpg-fs-xs); }
.tpg-result:hover { transform: none; }
.tpg-live__item { grid-template-columns: 48px minmax(0, 1fr); gap: var(--tpg-m); }
.tpg-live__thumb { width: 48px; height: 48px; }
.tpg-live__item::after { display: none; }
.tpg-live__foot { flex-direction: column; align-items: flex-start; }
.tpg-search-empty { padding: var(--tpg-5xl) var(--tpg-3xl); }
.tpg-search-empty .wp-block-button,
.tpg-search-empty .wp-block-button__link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.tpg-search__scrim,
.tpg-search__panel,
.tpg-result,
.tpg-result__media img { transition: none; }
.tpg-result:hover { transform: none; }
}