/* ==========================================================================
RPO Partners — design system
Edit colours, fonts and spacing in the :root block below. Everything else
is derived from these tokens, so changing one value here changes the site.
========================================================================== */
:root {
/* ---- Blues: the base palette ---- */
--paper: #FFFFFF; /* default ground */
--mist: #F2F8FD; /* alternating full-bleed bands */
--sky: #E3F1FB; /* pills, soft fills */
--powder: #7FC1E8; /* rules, quiet marks */
--azure: #1E90D6; /* links, hover */
--cobalt: #0A6FB8; /* primary blue */
/* ---- Ink: blue-biased greys, not neutral ---- */
--ink: #0B2740; /* headlines, dark bands */
--slate: #3F5C73; /* body copy */
--haze: #8AA2B4; /* labels, captions */
--line: #DCEAF5; /* hairlines */
/* ---- Green: the one accent, sampled from the hero image (#01A65E).
Used for eyebrow pills, rules, marks and focus. Buttons use --cta. ---- */
--accent: #01A65E; /* the hero green — dots, rules, marks, focus */
--accent-deep: #016138; /* text sitting on the wash, link hover */
--accent-wash: #E4F6EC; /* eyebrow pills, soft fills */
--accent-light: #6FD9A5; /* the accent on the navy ground */
/* ---- Primary action colour: pale blue. It is far too light to carry
white text (1.62:1), so button labels are ink instead — 9.38:1. ---- */
--cta: #9BD4E4; /* button fills */
--cta-deep: #7CC3D8; /* button hover / pressed — 7.7:1 with ink */
--cta-ink: #0B2740; /* label colour on both */
/* ---- Headline highlight. Deliberately its own token so re-colouring the
buttons does not silently re-colour the hero headline. ---- */
--headline-hl: #9BD4E4;
/* ---- Type ---- */
/* Poppins throughout, matching netsoltech.com. Their display face (Qualy)
is a commercial licence we do not hold, so headings use Poppins too —
contrast comes from weight and italics rather than a second family. */
--sans: "Poppins", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
--display: "Poppins", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
/* ---- Layout ---- */
--wrap: 1240px;
--gutter: clamp(1.25rem, 5vw, 3.5rem);
--radius: 14px;
--radius-sm: 10px;
--ease: cubic-bezier(.22, .61, .36, 1);
--shadow-sm: 0 2px 10px rgba(11, 39, 64, .06);
--shadow-md: 0 14px 40px rgba(11, 39, 64, .12);
--shadow-lg: 0 28px 70px rgba(11, 39, 64, .16);
}
/* ==========================================================================
Reset + base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--slate);
font-family: var(--sans);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
font-family: var(--sans);
color: var(--ink);
font-weight: 500;
letter-spacing: -.032em;
line-height: 1.08;
margin: 0;
text-wrap: balance;
}
/* The accent word. With one family sitting throughout, the accent is carried
by italics and a lighter weight rather than a second typeface. */
.accent {
font-family: var(--display);
font-style: italic;
font-weight: 400;
letter-spacing: -.005em;
}
p { margin: 0; }
a { color: var(--cobalt); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* ==========================================================================
Layout helpers
========================================================================== */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(4.5rem, 11vw, 9rem); }
.section--tight { padding-block: clamp(3.5rem, 8vw, 6rem); }
.band--mist { background: var(--mist); }
.band--ink { background: var(--ink); }
.eyebrow {
display: inline-flex; align-items: center; gap: .55rem;
background: var(--accent-wash);
color: var(--accent-deep);
font-size: .68rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
padding: .45rem .9rem;
border-radius: 999px;
}
.eyebrow::before {
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: var(--accent); flex: none;
}
.band--ink .eyebrow { background: rgba(1, 166, 94, .18); color: var(--accent-light); }
.lead { font-size: 1.12rem; line-height: 1.6; }
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
padding: .95rem 1.7rem;
border: 1.5px solid transparent;
border-radius: 999px;
font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
cursor: pointer;
transition: background-color .2s var(--ease), border-color .2s var(--ease),
color .2s var(--ease), transform .2s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--cta); color: var(--cta-ink); }
.btn--primary:hover { background: var(--cta-deep); color: var(--cta-ink); }
.btn--outline { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--sky); color: var(--ink); }
.btn--ghost-light { border-color: rgba(255,255,255,.28); color: var(--paper); }
.btn--ghost-light:hover { border-color: var(--paper); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
/* ==========================================================================
Header
========================================================================== */
/* The band itself is transparent; the visible chrome is the .nav pill inside
it, so the page shows through above and beside the bar. */
.site-header {
position: sticky; top: 0; z-index: 100;
background: transparent;
padding-block: 12px;
}
.site-header > .wrap { max-width: 1320px; }
.nav {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; min-height: 62px;
padding: 6px 10px 6px 20px;
border-radius: 50px;
background: rgba(255, 255, 255, .96);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
box-shadow: 0 2px 15px rgba(11, 39, 64, .10);
transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled .nav { box-shadow: 0 6px 24px rgba(11, 39, 64, .16); }
/* Centre the links between the logo and the button rather than letting
space-between push them to the middle of whatever is left. Only from 1200px:
taking them out of flow means they no longer push the logo and the button
apart, and below that the centred block overlapped the CTA. Between the nav
breakpoint and 1200px they stay in flow and space-between handles it. */
.nav { position: relative; }
@media (min-width: 1200px) {
.nav__links { position: absolute; left: 50%; transform: translateX(-50%); }
}
.logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.logo__mark { width: 36px; height: 36px; flex: none; object-fit: contain; }
.logo__text {
font-weight: 600; font-size: 1.1rem; color: var(--ink);
letter-spacing: -.03em; line-height: 1.1;
}
.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav__links a {
display: block; padding: 9px 13px; border-radius: 999px;
font-size: 1rem; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.nav__links a:hover { color: var(--accent-deep); background: var(--accent-wash); }
/* The reference marks the current page by colour alone rather than an
underline, which suits a pill bar better. */
.nav__links a.is-active { font-weight: 600; color: var(--cobalt); }
.nav__cta { flex: none; padding: .68rem 1.35rem; font-size: .875rem; border-radius: 50px; }
.nav__toggle {
display: none; width: 44px; height: 44px; flex: none;
border: 1px solid var(--line); border-radius: 10px;
background: var(--paper); cursor: pointer; padding: 0; place-items: center;
}
.nav__toggle span {
display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--ink);
transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span + span { margin-top: 4.5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* --- Nav dropdown ---------------------------------------------------------
Desktop: hover / keyboard-focus opens a floating panel.
Mobile: the caret button expands it inline as an accordion.
-------------------------------------------------------------------------- */
.nav__links .has-sub { position: relative; display: flex; align-items: center; }
.sub-menu { list-style: none; }
.sub-toggle {
display: inline-grid; place-items: center;
padding: 0; border: 0; background: none; cursor: pointer;
color: var(--ink); border-radius: 8px;
}
.sub-toggle svg { width: 15px; height: 15px; transition: transform .22s var(--ease); }
.sub-toggle:hover { color: var(--accent); }
.has-sub.is-open > .sub-toggle svg { transform: rotate(180deg); }
@media (min-width: 1100px) {
.sub-toggle { width: 24px; height: 30px; margin-left: -9px; }
.sub-menu {
position: absolute; top: calc(100% + 12px); left: 0;
min-width: 244px; padding: 8px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
z-index: 60;
}
/* Invisible bridge so the pointer can cross the gap into the panel. */
.has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu,
.has-sub.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.has-sub:hover > .sub-toggle svg,
.has-sub:focus-within > .sub-toggle svg { transform: rotate(180deg); }
.sub-menu a { padding: 10px 12px; font-size: .92rem; }
}
@media (max-width: 1099px) {
.nav__toggle { display: grid; }
.nav { gap: 12px; }
/* The header keeps its CTA on mobile — without it the collapsed menu
would offer no route to Contact at all. */
.nav__cta { padding: 10px 16px; font-size: .88rem; }
.nav__links {
position: absolute; left: 0; right: 0; top: 100%;
flex-direction: column; align-items: stretch; gap: 2px;
padding: 14px var(--gutter) 24px;
background: var(--paper);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-md);
display: none;
}
.nav__links.is-open { display: flex; }
.nav__links a { padding: 12px 10px; font-size: 1rem; }
/* Dropdown collapses to an inline accordion. */
.nav__links .has-sub { flex-wrap: wrap; }
.nav__links .has-sub > a { flex: 1 1 auto; }
.sub-toggle { width: 44px; height: 44px; flex: none; }
.sub-menu {
flex-basis: 100%; display: none;
margin: 2px 0 8px 12px; padding-left: 12px;
border-left: 2px solid var(--sky);
}
.has-sub.is-open > .sub-menu { display: block; }
.sub-menu a { font-size: .95rem; }
}
@media (max-width: 1099px) {
/* Read the bar as logo | CTA | menu, rather than logo | menu | CTA. */
.logo { order: 1; min-width: 0; }
.nav__cta { order: 2; }
.nav__toggle { order: 3; }
}
@media (max-width: 560px) {
.logo__text { font-size: .95rem; }
.logo__mark { width: 34px; height: 34px; }
.nav__cta { padding: 9px 13px; font-size: .82rem; }
}
/* Below this the wordmark, the CTA and the menu button cannot all fit. The
mark alone identifies the brand, so the wordmark goes. Threshold moved back
up to 420px when the site switched to Poppins, which is appreciably wider
than the previous face — at 375px the row needed 368px of a 335px wrap. */
@media (max-width: 420px) {
.logo__text { display: none; }
}
/* ==========================================================================
Hero
========================================================================== */
/* The sticky header already separates the hero — a large top pad here reads
as a dead gap, made worse by the centred grid offsetting the shorter copy
column against the taller image. */
.hero { padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero__grid {
display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
/* Copy column widened from 1fr:1.1fr so the headline can hold two lines —
it needed 594px of a 556px column at 1440. */
.hero__grid { grid-template-columns: 1.12fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.hero__title {
/* Sized to break "Your Recruitment / Team, Extended" rather than four short
lines; balance evens the two rather than leaving a stub on the second. */
/* 2rem floor, not 2.15: at a 320px viewport the larger minimum pushed
"Your Recruitment" wider than the column and it broke to three lines. */
font-size: clamp(2rem, 4.9vw, 3.75rem);
font-weight: 500; letter-spacing: -.042em; line-height: 1.06;
margin-bottom: 1.4rem;
text-wrap: balance;
/* Between 768 and 899 the layout is a single wide column and the headline
fitted on one line; the measure caps it so it breaks in two everywhere. */
max-width: 17ch;
}
.hero__title .hl { color: var(--headline-hl); }
.hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 42ch; margin-bottom: 2.2rem; }
.hero .btn-row { margin-bottom: 2rem; }
/* .accent is italic site-wide; this un-italicises it for the hero headline
only. Scoped to .hero__title so it scores (0,2,0) and beats the base rule. */
.hero__title .accent { font-style: normal; }
/* Deliberately no blanket `.hero__media img` rule. An element+class selector
like that scores (0,1,1) and outranks a component class at (0,1,0) — the bug
that silently oversized the Section 3 hub. The globe sizes itself. */
.hero__media { position: relative; }
/* ==========================================================================
Stat band — five figures over a faint generative network
========================================================================== */
.stats {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(3.25rem, 7vw, 5.5rem);
/* No rules top or bottom: the tint returns to paper at both edges so the
band dissolves into the white sections above and below it. The network
backdrop is what separates this section, not a border. */
background: linear-gradient(180deg, var(--paper), #F4F9FD 48%, var(--paper));
}
.stats__web {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: -1; pointer-events: none;
/* Fade the network out at the edges, otherwise it stops dead at the
section boundary and reinstates the very line we removed. */
-webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.stats__head { margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); text-align: center; }
/* Set to the brand light blue at the client's direction. The band runs from
white to #F4F9FD, where this lands at 1.6:1 — under the 3:1 large-text
threshold — so the heading reads as a pale tint rather than as type. */
.stats__head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); color: var(--headline-hl); }
/* Only "Delivers" keeps the light blue; the opening words take ink so the line
has something legible to lead with — the blue is 1.6:1 on this band. */
.stats__lead-in { color: var(--ink); } /* 12.3:1 */
/* The second and fourth figures in the brand light blue, per the client. At
1.6:1 on the band these read as a tint rather than as numerals, while the
three ink ones beside them stay at 12.3:1. */
.stat:nth-child(2) .stat__num,
.stat:nth-child(4) .stat__num { color: var(--headline-hl); }
.stats__grid {
list-style: none;
display: grid;
align-items: start;
gap: clamp(2.25rem, 4vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.stat__num {
display: block;
font-weight: 700;
font-size: clamp(2.15rem, 4.2vw, 3.4rem);
line-height: .95;
letter-spacing: -.045em;
color: var(--stat-c, var(--ink));
font-variant-numeric: tabular-nums;
margin-bottom: .55rem;
}
.stat__label {
display: block;
font-size: clamp(.92rem, 1.1vw, 1.02rem);
font-weight: 500;
line-height: 1.32;
color: var(--ink);
max-width: 13ch;
}
/* ==========================================================================
Problem section — artwork left, argument right
========================================================================== */
/* Text only, so this band does not need the full .section rhythm the taller
sections use — it was the artwork that set the old height. */
/* Optical alignment: the capital T carries a 1px left side bearing where the
lowercase h carries 3px, so a flush-left T visibly hangs into the margin.
Nudging the first line right by the difference (0.043em, measured) squares
the T with the h below it. Expressed in em so it holds at every clamp step. */
/* Task cluster — no borders, no icons, varied scale, so it reads as a
typographic cluster rather than a control panel. Currently unused on Home
(the artwork carries the eight tasks) — kept as a shared component for the
Services and RPO Models pages. Delete if those end up not needing it. */
.task-list {
list-style: none; display: flex; flex-wrap: wrap; gap: .65rem;
margin-bottom: 2.4rem;
}
.task-list li {
background: var(--sky); color: var(--ink);
border-radius: 999px; padding: .62rem 1.15rem;
font-size: .98rem; font-weight: 500; letter-spacing: -.012em;
transition: background-color .2s var(--ease), color .2s var(--ease);
}
.task-list li:nth-child(3n) { background: var(--accent-wash); color: var(--accent-deep); }
.task-list li:nth-child(4n) { font-size: 1.12rem; padding: .74rem 1.35rem; }
.task-list li:nth-child(7n) { background: var(--ink); color: var(--paper); }
.task-list li:hover { background: var(--cobalt); color: var(--paper); }
.pull-line {
font-family: var(--display);
font-style: italic; font-weight: 400;
font-size: clamp(1.3rem, 2.4vw, 1.75rem);
line-height: 1.35; color: var(--ink);
letter-spacing: -.015em;
padding-left: 1.4rem;
border-left: 2px solid var(--accent);
margin-top: 2rem !important;
max-width: 34ch;
}
/* ==========================================================================
Partner marquee — two borderless rows, counter-scrolling
========================================================================== */
/* Shorter band: the eyebrow is gone and the strip is only 48px tall, so the
section no longer needs full .section padding. */
.partners { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.partners__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.partners__head h2 { font-size: clamp(1.65rem, 2.9vw, 2.2rem); margin-bottom: .85rem; }
.partners__head .lead { max-width: 52ch; }
/* Home's lead is one short sentence that wants 657px against the 52ch (585px)
measure, so it broke over two lines with the band 1240px wide. The cap comes
off here only — testimonials.html shares .partners__head and still carries the
longer sentence the 52ch measure is there for. */
.partners__head--wide { text-align: center; }
/* The --wide modifier is the home-only hook, so testimonials.html keeps this
heading in one ink tone. At 1.6:1 on white the blue reads as a tint and
"Expertise" carries the line. */
.partners__head--wide h2 span { color: var(--headline-hl); }
/* Matched to .tst-title, the page's own hero heading. Only testimonials.html
takes this — the home page's copy of the head keeps the smaller size. */
.partners__head--lg h2 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); }
.partners__head--wide .lead { max-width: none; }
.marquee {
position: relative; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
display: flex; align-items: center; width: max-content;
gap: clamp(2rem, 4vw, 3.5rem);
animation: marquee 64s linear infinite;
}
.marquee + .marquee { margin-top: clamp(1rem, 2vw, 1.5rem); }
/* Second row runs the other way, so the two do not read as one block sliding. */
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* One uniform box for every mark. The supplied logos range from 2.4:1 to
8.8:1, so they are contained inside the box rather than stretched — same
footprint each, each at its own true proportions. */
.logo-chip {
display: inline-flex; align-items: center; justify-content: center;
flex: none;
width: 150px; height: 48px;
opacity: .88;
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.logo-chip:hover { opacity: 1; transform: translateY(-2px); }
.logo-chip img {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; gap: 1.5rem 2.5rem; }
.marquee { -webkit-mask-image: none; mask-image: none; }
html { scroll-behavior: auto; }
}
/* ==========================================================================
Interior pages — hero, split sections, reason list
Shared by About and the other interior pages.
========================================================================== */
.page-hero {
padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(2rem, 4vw, 3rem);
}
.page-hero__grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 900px) {
.page-hero__grid { grid-template-columns: 1.05fr 1fr; align-items: end; gap: clamp(2rem, 5vw, 4rem); }
}
.page-hero__title {
font-size: clamp(2.4rem, 5.6vw, 4rem);
font-weight: 500; letter-spacing: -.04em; line-height: 1.03;
}
.page-hero__lead { font-size: clamp(1.02rem, 1.4vw, 1.14rem); max-width: 48ch; }
/* Argument left, body right — the same rhythm as the home problem section. */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 900px) {
.split { grid-template-columns: 4fr 8fr; gap: clamp(2.5rem, 6vw, 5rem); }
.split__aside { position: sticky; top: 110px; align-self: start; }
}
.split__aside h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.split__aside .lead { margin-top: .9rem; max-width: 30ch; }
.split__body > p { max-width: 62ch; }
.split__body > p + p { margin-top: 1.2rem; }
/* Shared section head — a heading plus lead, used by About, RPO Models,
Why RPO Partners and Testimonials. Named for the services list it was first
written for; that component is gone but these five section heads remain. */
.svc__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 46rem; }
.svc__head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: .8rem; }
.svc__head .lead { max-width: 52ch; }
/* Three associate roles — same hairline logic, three across on desktop. */
.roles { list-style: none; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 820px) {
.roles { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
.roles > li { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
}
@media (max-width: 819px) {
.roles > li { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.roles > li:first-child { border-top: 2px solid var(--ink); }
}
.roles h3 {
font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em;
margin-bottom: .4rem;
}
.roles p { max-width: 40ch; }
/* --------------------------------------------------------------------------
Stack coverage. Grouped by function so this reads as a reference someone
can check their own tooling against, rather than a recognition strip.
Reuses .task-list, which is why that component was kept after the homepage
stopped using it.
-------------------------------------------------------------------------- */
.stack { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 760px) { .stack { grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 3.5vw, 2.75rem); } }
.stack__group h3 {
font-size: .76rem; font-weight: 600;
letter-spacing: .15em; text-transform: uppercase;
color: var(--haze);
margin-bottom: .85rem;
}
.stack__group .task-list { margin-bottom: 0; }
.stack__note {
margin-top: clamp(1.5rem, 3vw, 2.25rem);
padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
border-top: 1px solid var(--line);
color: var(--haze);
max-width: 52ch;
}
/* On the interior pages the pills are a reference list, not a feature —
drop the homepage's varied sizing so they read as one even set. */
.stack .task-list li,
.split__body > .task-list li { font-size: .95rem; padding: .55rem 1rem; }
.stack .task-list li:nth-child(4n),
.split__body > .task-list li:nth-child(4n) { font-size: .95rem; padding: .55rem 1rem; }
.stack .task-list li:nth-child(7n),
.split__body > .task-list li:nth-child(7n) { background: var(--sky); color: var(--ink); }
.stack .task-list li:nth-child(3n),
.split__body > .task-list li:nth-child(3n) { background: var(--sky); color: var(--ink); }
.stack .task-list li:hover,
.split__body > .task-list li:hover { background: var(--cobalt); color: var(--paper); }
/* --------------------------------------------------------------------------
Contact form
-------------------------------------------------------------------------- */
.contact { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 880px) {
.contact { grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
}
.contact__form h2,
.contact__details h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); margin-bottom: .7rem; }
.contact__form .lead { margin-bottom: clamp(1.5rem, 3vw, 2rem); max-width: 44ch; }
.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.field { display: grid; gap: .4rem; }
.field label {
font-size: .78rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.field input,
.field textarea {
font: inherit; font-size: 1rem;
color: var(--ink);
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
padding: .8rem 1rem;
width: 100%;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: var(--haze); }
.field input:focus,
.field textarea:focus {
outline: none;
border-color: var(--cobalt);
box-shadow: 0 0 0 3px rgba(10, 111, 184, .14);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #C4341F; }
.field__error { font-size: .82rem; color: #C4341F; }
/* Honeypot — off-screen rather than display:none, which some bots skip. */
.field--trap {
position: absolute; left: -9999px;
width: 1px; height: 1px; overflow: hidden;
}
.form .btn { justify-self: start; margin-top: .3rem; }
.form__notice {
padding: .85rem 1rem;
border-radius: var(--radius-sm);
font-size: .92rem;
background: var(--sky);
color: var(--ink);
border-left: 3px solid var(--cobalt);
}
.form__notice[data-tone="warn"] { background: #FDF3E7; border-left-color: #C4771F; }
.form__notice[data-tone="ok"] { background: var(--accent-wash); border-left-color: var(--accent); }
/* Details column */
.contact__details .contact__list { list-style: none; display: grid; gap: 1.15rem; margin-top: 1.25rem; }
.contact__label {
display: block;
font-size: .72rem; font-weight: 600;
letter-spacing: .13em; text-transform: uppercase; color: var(--haze);
margin-bottom: .2rem;
}
.contact__list a { color: var(--ink); font-weight: 500; }
.contact__list a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================================
About page — reference: netsoltech.com/about-us/why-netsol
Full-width hero with an eyebrow label above the headline, a single large
lede paragraph, then labelled sections and two-up proof blocks.
========================================================================== */
/* Section labels — "Who we are", "At a glance", "Our Mission". One component,
so they scale together; tracking eases off as the size goes up, because
heavy letter-spacing at a larger size reads as stretched. */
.lede__label {
font-size: 1rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
/* Set to the brand light blue at the client's direction. At 16px this is
small text needing 4.5:1 and it lands at 1.6:1 on white, so it reads as a
very pale tint rather than a label. */
color: var(--cta);
margin-bottom: 1rem;
}
/* --------------------------------------------------------------------------
Bento grid — geometry copied from netsoltech.com/about-us/why-netsol §5:
transparent boxes, 1px #98A2B3 border, 24px radius, 24px padding, 220px
min-height. Type sizes are theirs too — 25px box heading, 22px stat label,
14px body. Text colour stays on our --ink rather than their warm grey, so
the boxes sit with the rest of the site.
-------------------------------------------------------------------------- */
.bento {
display: grid;
gap: clamp(.9rem, 1.6vw, 1.25rem);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(3, 1fr); } }
/* min-width:0 is load-bearing in BOTH places: grid items and flex items each
default to min-width:auto, so without it the carousel track and the logo
strip size to their full content and push the page sideways — 1158px of
horizontal scroll at 375px before this was set. */
.bento__box > * { min-width: 0; }
.bento__box {
min-width: 0;
background: transparent;
border: 1px solid #98A2B3;
border-radius: 24px;
padding: 24px;
min-height: 220px;
display: flex; flex-direction: column;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bento__box:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px -15px rgba(11, 39, 64, .18);
}
/* Decoration only — the boxes are not links and nothing depends on the movement. */
@media (prefers-reduced-motion: reduce) {
.bento__box { transition: none; }
.bento__box:hover { transform: none; }
}
@media (min-width: 1000px) {
.bento__box[data-span="2"] { grid-column: span 2; }
.bento__box--wide { grid-column: span 3; }
}
@media (min-width: 700px) and (max-width: 999px) {
.bento__box[data-span="2"], .bento__box--wide { grid-column: span 2; }
}
.bento__box h3 {
font-size: 25px; font-weight: 400; line-height: 32px;
letter-spacing: normal; text-transform: none;
color: var(--ink);
margin-bottom: 1rem;
}
.bento__box p { font-size: 14px; font-weight: 500; line-height: 20px; max-width: 46ch; }
/* The double-width box is ~772px inside its padding; a 46ch measure left half
of it empty. No cap there, so the copy runs the full width — and a larger
size so it fills the 220px box rather than sitting small at the top. */
.bento__box[data-span="2"] p { max-width: none; font-size: 17px; line-height: 28px; }
.bento__lead { font-size: 14px; margin-bottom: .9rem; }
.bento__lead strong { color: var(--ink); font-weight: 700; }
.bento__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.bento__tags li {
border: 1px solid var(--line); color: var(--ink);
border-radius: 999px; padding: .34rem .75rem;
font-size: 14px; font-weight: 500; line-height: 20px;
}
.bento__link {
margin-top: auto; padding-top: 1rem;
font-size: 14px; font-weight: 600; color: var(--accent-deep);
}
.bento__link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* --- Moving box 1: stat carousel ---------------------------------------- */
.bento__box--carousel { justify-content: space-between; }
.statcar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.statcar__track {
display: flex;
/* Explicit width is required: slides are flex-basis 100%, and without a
definite track width that resolves against the track's own content —
each slide sizes to the whole run and the page scrolls sideways. */
width: 100%;
transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.statcar__slide {
flex: 0 0 100%;
display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
}
.statcar__num {
font-weight: 700; font-size: clamp(2.2rem, 4vw, 2.9rem);
line-height: 1; letter-spacing: -.035em; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.statcar__label { font-size: 22px; font-weight: 500; line-height: 28px; color: var(--slate); }
.statcar__dots { display: flex; gap: .35rem; margin-top: 1.1rem; }
.statcar__dots span {
width: 6px; height: 6px; border-radius: 50%;
background: var(--line);
transition: background-color .3s var(--ease), width .3s var(--ease);
}
.statcar__dots span.is-on { background: var(--accent); width: 18px; border-radius: 3px; }
/* --- Moving box 2: platform strip --------------------------------------- */
.bento__box--strip { min-height: 0; }
.bento__box--strip .marquee { margin-top: auto; width: 100%; min-width: 0; }
.bento__box--strip .marquee__track { gap: clamp(2rem, 4vw, 3rem); animation-duration: 40s; }
.bento__box--strip .logo-chip { width: 116px; height: 38px; }
@media (prefers-reduced-motion: reduce) {
.statcar__track { transition: none; }
}
/* "Who we are": copy on the left, map on the right. */
.lede { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); align-items: center; }
@media (min-width: 900px) {
.lede { grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 5vw, 4rem); }
}
.lede__media img { width: 100%; height: auto; }
.lede__body + .lede__body { margin-top: .9rem; }
/* The closing line is the section's takeaway, so it carries weight rather
than a colour — ink at 600 reads as emphasis without adding another tone. */
.lede__body--strong { font-weight: 600; color: var(--ink); }
.lede__body {
/* Sized for a ~57-word paragraph. At the original display size this ran to
11 lines and left the text column 91px taller than the map beside it. */
font-size: clamp(1.02rem, 1.45vw, 1.18rem);
line-height: 1.62; letter-spacing: -.01em;
color: var(--ink);
max-width: 56ch;
}
/* A statement line — the one sentence in a section that should carry weight.
No longer used on About, but why-rpo-partners.html still relies on it, so
this rule stays. The !important beats `.split__body > p`'s 62ch measure. */
.statement {
font-family: var(--display);
font-style: italic; font-weight: 400;
font-size: clamp(1.35rem, 2.6vw, 1.95rem);
line-height: 1.35; letter-spacing: -.015em;
color: var(--ink);
max-width: 38ch !important;
}
.statement + p { margin-top: 1.5rem !important; }
/* --------------------------------------------------------------------------
Mission pillars. Rebuilt from the client's reference image; the four accent
colours and their pale circle tints were sampled from that file.
-------------------------------------------------------------------------- */
.pillars {
list-style: none;
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: 1fr;
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
--tone: #5B4FD6;
--tone-tint: #EDEBFD;
min-width: 0; /* grid items default to min-width:auto */
display: flex; flex-direction: column; align-items: center; text-align: center;
background: var(--paper); border: 1px solid var(--line);
border-radius: 20px;
padding: clamp(1.15rem, 1.7vw, 1.45rem);
box-shadow: 0 1px 2px rgba(11, 39, 64, .04), 0 16px 34px -26px rgba(11, 39, 64, .3);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pillar:hover {
transform: translateY(-4px);
box-shadow: 0 1px 2px rgba(11, 39, 64, .04), 0 24px 50px -15px rgba(11, 39, 64, .18);
}
/* Decoration only — the card is not a link and nothing depends on the movement. */
@media (prefers-reduced-motion: reduce) {
.pillar { transition: none; }
.pillar:hover { transform: none; }
}
.pillar[data-tone="blue"] { --tone: #3E88FA; --tone-tint: #ECF5FE; }
.pillar[data-tone="green"] { --tone: #46B368; --tone-tint: #E5F7E9; }
.pillar[data-tone="amber"] { --tone: #F1852D; --tone-tint: #FEF2E9; }
.pillar__icon {
display: grid; place-items: center;
width: 76px; height: 76px;
border-radius: 50%;
background: var(--tone-tint);
color: var(--tone);
margin-bottom: 1.15rem;
}
.pillar__icon svg { width: 40px; height: 40px; }
.pillar h3 {
font-size: clamp(1.25rem, 1.9vw, 1.5rem);
font-weight: 700; letter-spacing: -.025em;
color: var(--ink);
margin-bottom: .9rem;
}
.pillar__rule {
display: block; width: 46px; height: 3px; border-radius: 2px;
background: var(--tone);
margin-bottom: 1.4rem;
}
.pillar p {
font-size: .95rem; line-height: 1.65;
color: var(--slate);
max-width: 30ch;
}
/* Mission runs tighter than the default section: 96px top and bottom was 40%
of its own height for three short blocks of copy. */
.section--mission { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
/* ==========================================================================
CTA band
========================================================================== */
/* The band and the footer were both --ink and met flush, so the CTA read as
the top of the footer rather than a section of its own. Contained as a card
on the page ground it separates cleanly — the same treatment the Blog,
Testimonials and Consultation pages already give their closing CTA. */
.cta-band { padding-block: clamp(2.25rem, 5vw, 4rem); text-align: center; }
.cta-band.band--ink { background: transparent; }
.cta-band > .wrap {
background: var(--ink);
border-radius: 22px;
padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
}
.cta-band h2 {
color: var(--paper); font-size: clamp(1.9rem, 4vw, 3rem);
max-width: 20ch; margin-inline: auto; margin-bottom: 1.2rem;
}
.cta-band h2 .accent { color: var(--accent-light); }
.cta-band p { color: #A9C6DD; max-width: 54ch; margin-inline: auto; margin-bottom: 2.2rem; font-size: 1.06rem; }
.cta-band .btn-row { justify-content: center; }
/* ==========================================================================
Footer (Korn Ferry inspired)
========================================================================== */
/* White, with dark text. The top corners stay rounded as in the reference —
overflow:hidden so nothing square pokes out past the curve — and a hairline
keeps the footer legible as its own region against the white page above it. */
.site-footer {
background: var(--paper);
color: var(--ink); font-size: .93rem; /* 15.2:1 */
border-top: 1px solid var(--line);
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.footer__top {
display: grid; grid-template-columns: 1.5fr repeat(4, 1fr);
gap: 26px 32px;
padding: clamp(1.75rem, 3vw, 2.25rem) 0 1.4rem;
}
.footer__brand .logo__mark { width: 40px; height: 40px; }
.footer__brand .logo__text { color: var(--ink); }
.footer__contact { list-style: none; display: grid; gap: 7px; font-size: .88rem; }
.footer__contact li { display: flex; align-items: center; gap: 11px; }
.footer__contact svg { width: 17px; height: 17px; color: var(--ink); flex: none; }
/* The LinkedIn mark carries its own brand colours, so it opts out of the
--powder tint the outline icons use, and runs slightly larger to match
their optical weight (a filled square reads smaller than a line icon). */
.footer__contact .footer__contact-brand { width: 19px; height: 19px; }
.footer__contact a { color: var(--ink); }
/* Underline rather than a colour shift: no second colour in the palette clears
4.5:1 against this blue. */
.footer__contact a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* The reference sets these as plain sentence-case headings at 16px/700
rather than small letterspaced caps. */
.footer__col h4 {
color: var(--ink); font-size: 1rem; font-weight: 700;
letter-spacing: -.01em; margin-bottom: .85rem;
}
.footer__col ul { list-style: none; display: grid; gap: 8px; }
.footer__col a { color: var(--ink); font-size: .875rem; }
.footer__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Centred and hairline-separated, as in the reference, rather than pushed to
opposite ends of the row. */
.footer__bottom {
display: flex; flex-direction: column; align-items: center;
gap: 7px; margin-top: .9rem; padding: .85rem 0 1rem;
border-top: 1px solid var(--line);
font-size: .875rem; color: var(--ink); text-align: center;
}
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.footer__legal a { color: var(--ink); }
.footer__legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* The five-column row holds down to 880px; below that the brand block goes
full width above four link columns, and below 700px those pair up. */
@media (max-width: 879px) {
.footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 22px; }
.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
.footer__top { grid-template-columns: 1fr 1fr; }
}
/* Stay two-up on phones. Collapsing to one column stacked all five blocks
and pushed the footer past 900px; the link lists are short enough to sit
side by side at 375px. */
@media (max-width: 560px) {
.footer__top { gap: 24px 20px; }
.footer__col h4 { margin-bottom: .6rem; }
}
/* ==========================================================================
Motion — one staged hero entrance, not a blanket page-wide fade
========================================================================== */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-visible {
opacity: 1; transform: none;
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal[data-delay="1"].is-visible { transition-delay: .1s; }
.reveal[data-delay="2"].is-visible { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
.btn:hover { transform: none; }
}
/* ==========================================================================
Utilities
========================================================================== */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
padding: 12px 20px; background: var(--cta); color: var(--cta-ink);
border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--paper); }
/* ==========================================================================
SERVICES PAGE
A self-contained visual system, built from the client's mockup: warm
off-white grounds, a deep navy, a single gold accent, and Playfair Display
for headings. Every token is namespaced --sv-* and every class sv-*, so
nothing here leaks into the rest of the site.
========================================================================== */
.sv {
--sv-cream: #FBFAF9; /* hero ground */
--sv-warm: #F6F2F0; /* engagement panel */
--sv-warm-2: #FAF8F7; /* engagement cards ground */
--sv-navy: #152434; /* impact + CTA bands */
--sv-ink: #14202F; /* headings */
--sv-body: #4C5561; /* body copy */
/* The light blue from Home and About. Split by job: the pale tone is only
legible as a fill or on the navy band, so small text uses a deeper shade
of the same hue — 4.6:1 on cream, where the pale one is 1.56:1. */
--sv-accent: #9BD4E4; /* fills, marks, icons on the navy band */
--sv-accent-mid: #6FBBD2; /* rules and hairlines */
--sv-accent-deep: #2E7B95; /* small text: eyebrows, numbers, links */
/* The reference blue introduced by the services panels. 5.2:1 on white and
on its own tint, so it carries text as well as fills. */
--sv-brand: #2563EB;
--sv-brand-soft: #EAF1FE;
--sv-line: #E7E2DC; /* hairlines and card borders */
--sv-serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
color: var(--sv-body);
}
.sv .sv-display,
.svc .sv-display {
font-family: var(--sv-serif);
font-weight: 500;
color: var(--sv-ink);
letter-spacing: -.01em;
line-height: 1.14;
}
.sv-eyebrow {
font-size: .72rem; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase;
color: var(--sv-accent-deep);
margin-bottom: 1.1rem;
}
.sv-rule {
display: block; width: 54px; height: 2px;
background: var(--sv-accent-mid);
margin: 1.1rem 0;
}
/* The hero is meant to sit inside one screen, so its chrome is tight and the
hub is capped against viewport height rather than column width alone. */
/* There is no rule between the hero and the Impact band — the line you see is
the cream fill meeting white. Fading the cream out over the last third of the
hero dissolves that edge, so the two sections read as one run. */
.sv-hero { background: linear-gradient(180deg, var(--sv-cream) 0%, var(--sv-cream) 62%, #FFFFFF 100%); padding-block: clamp(.85rem, 1.8vw, 1.5rem) clamp(1.25rem, 2.5vw, 2.25rem); }
.sv-hero__grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(.85rem, 1.8vw, 1.4rem); }
@media (min-width: 940px) {
.sv-hero__grid { grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
}
.sv-hero__copy .sv-display { font-size: clamp(2rem, 4.4vw, 3.2rem); }
/* On the cream hero ground the brand light blue is 1.5:1, so these two words
read as a tint and the rest of the line carries it. */
.sv-hero__title span { color: var(--headline-hl); }
/* Bold and set to the brand light blue at the client's direction. Note this
lands at 1.6:1 on the cream hero ground, under the 3:1 large-text threshold,
so the headline reads as a pale tint rather than a strong statement. */
/* Scoped to .sv so it matches the (0,2,0) of `.sv .sv-display` above, which
sets the weight and colour for every display heading on this page — a bare
.sv-hero__title at (0,1,0) lost to it no matter where it sat in the file. */
.sv .sv-hero__title { font-weight: 700; color: var(--sv-ink); }
.sv-lead { max-width: 34ch; line-height: 1.7; font-size: 1rem; }
.sv-lead + .sv-lead { margin-top: 1rem; }
.sv-lead--gold { color: var(--sv-accent-deep); font-weight: 500; }
/* --- Hub diagram ----------------------------------------------------------
A square stage; nodes sit on a circle at fixed angles and their labels
radiate outward. Percentages rather than a scaled pixel stage, so it needs
no JS and reflows on its own.
-------------------------------------------------------------------------- */
/* The stage is square because the geometry needs it, but the drawn diagram is
only ~82% as tall as it is wide, so a square box wastes a band of empty space
above and below. Sizing lives here rather than on the stage so that 1cqw is
exactly 1% of the stage width — which lets the stage pull that dead band back
in with a negative block margin and still scale with everything else. */
.sv-hub {
container-type: inline-size;
width: min(100%, calc((100svh - 160px) * 1.20));
margin-inline: auto;
}
.sv-hub__stage {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
/* Trims the empty band the square leaves above and below the diagram, so the
hub occupies only the height it actually draws into. The labels overflow
this box by design; nothing clips them. */
margin-block: -9cqw;
}
.sv-hub__ring {
position: absolute; left: 50%; top: 50%;
border-radius: 50%; transform: translate(-50%, -50%);
border: 1px dashed #DCD6CE;
}
.sv-hub__ring--outer { width: 54%; height: 54%; }
.sv-hub__ring--inner { width: 47%; height: 47%; border-style: solid; border-color: #EFEAE3; }
.sv-hub__core {
position: absolute; left: 50%; top: 50%;
width: 36%; height: 36%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #fff;
box-shadow: 0 10px 34px rgba(21, 36, 52, .10);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
}
.sv-hub__core-icon { color: var(--sv-accent-deep); display: block; margin-bottom: .35cqw; }
.sv-hub__core-icon svg { width: 3.9cqw; height: 3.9cqw; }
.sv-hub__name {
font-family: var(--sv-serif); font-weight: 700;
font-size: 3.1cqw; line-height: 1.18; color: var(--sv-ink);
text-transform: uppercase; letter-spacing: .01em;
}
.sv-hub__tag { font-size: 1.55cqw; line-height: 1.4; font-weight: 700; color: var(--sv-body); margin-top: .6cqw; }
.sv-hub__nodes { list-style: none; }
/* Each node is a zero-size anchor sitting exactly on the ring; the dot is
centred on it and the label is placed outward from there. Anchoring the
point rather than the whole dot+label box is what keeps the eight dots on
a true circle — translating the combined box pushed them off by ~7deg. */
.sv-hub__node { position: absolute; width: 0; height: 0; }
.sv-hub__dot {
position: absolute; left: 0; top: 0;
transform: translate(-50%, -50%);
width: 8.4cqw; height: 8.4cqw;
border-radius: 50%;
background: #fff;
border: 1px solid var(--sv-line);
display: grid; place-items: center;
color: var(--sv-ink);
}
.sv-hub__dot svg { width: 4cqw; height: 4cqw; }
.sv-hub__label {
position: absolute;
font-size: 1.45cqw; line-height: 1.34; font-weight: 700; color: var(--sv-body);
/* Each label carries its own
, so nowrap guarantees exactly two lines
regardless of font metrics. Width is content-driven; the ring radius is
what keeps the longest one inside the square. */
white-space: nowrap;
}
.sv-hub__label b {
display: block; font-weight: 700; color: var(--sv-ink);
font-size: 1.62cqw; margin-bottom: .25cqw;
}
/* Ring radius 32% of the stage — chosen so the outermost label still lands
inside the square rather than spilling into the copy column. */
.sv-hub__node[data-n="1"] { left: 50%; top: 23%; }
.sv-hub__node[data-n="2"] { left: 69.1%; top: 30.9%; }
.sv-hub__node[data-n="3"] { left: 77%; top: 50%; }
.sv-hub__node[data-n="4"] { left: 69.1%; top: 69.1%; }
.sv-hub__node[data-n="5"] { left: 50%; top: 77%; }
.sv-hub__node[data-n="6"] { left: 30.9%; top: 69.1%; }
.sv-hub__node[data-n="7"] { left: 23%; top: 50%; }
.sv-hub__node[data-n="8"] { left: 30.9%; top: 30.9%; }
/* Labels radiate outward: right of the dot on the right side, left on the
left, above at the top and below at the bottom. */
.sv-hub__node[data-n="2"] .sv-hub__label,
.sv-hub__node[data-n="3"] .sv-hub__label,
.sv-hub__node[data-n="4"] .sv-hub__label { left: 5.6cqw; top: 0; transform: translateY(-50%); text-align: left; }
.sv-hub__node[data-n="6"] .sv-hub__label,
.sv-hub__node[data-n="7"] .sv-hub__label,
.sv-hub__node[data-n="8"] .sv-hub__label { right: 5.6cqw; top: 0; transform: translateY(-50%); text-align: right; }
.sv-hub__node[data-n="1"] .sv-hub__label { bottom: 5.6cqw; left: 0; transform: translateX(-50%); text-align: center; }
.sv-hub__node[data-n="5"] .sv-hub__label { top: 5.6cqw; left: 0; transform: translateX(-50%); text-align: center; }
/* Below the two-column breakpoint the diagram would be unreadable. */
@media (max-width: 939px) { .sv-hub { display: none; } }
/* --- Impact band ---------------------------------------------------------- */
/* No fill — the cards sit directly on the page. Their hairline and soft
shadow are all that separate them, so the band reads as part of the site
rather than a pasted-in panel. */
.sv-impact { background: transparent; padding-block: clamp(1.6rem, 3vw, 2.4rem); }
.sv-impact__head { max-width: 54rem; margin-inline: auto; text-align: center; }
.sv-impact .sv-display {
font-family: var(--sans);
font-size: clamp(1.85rem, 4.6vw, 3.4rem); font-weight: 700;
line-height: 1.08; letter-spacing: -.035em;
color: var(--ink);
}
/* This band is not the navy one — it inherits the page ground, so the blue is
1.6:1 here like the other highlighted words, and reads as a tint. */
.sv-impact .sv-display span { color: var(--headline-hl); }
.sv-impact .sv-rule { margin: .8rem auto 0; }
.sv-impact__cards {
list-style: none; margin: clamp(1.25rem, 2.4vw, 1.8rem) 0 0;
display: grid; gap: clamp(.85rem, 1.6vw, 1.15rem);
}
@media (min-width: 600px) { .sv-impact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .sv-impact__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv-impact__cards li {
min-width: 0; /* grid items default to min-width:auto */
background: #fff; border-radius: 18px;
padding: clamp(1.1rem, 1.8vw, 1.45rem);
border: 1px solid #EAF2F7;
box-shadow: 0 1px 2px rgba(21,36,52,.05), 0 12px 28px -18px rgba(21,36,52,.35);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sv-impact__cards li:hover {
transform: translateY(-4px);
box-shadow: 0 1px 2px rgba(21,36,52,.05), 0 24px 50px -15px rgba(21,36,52,.28);
}
/* Decoration only — the cards are not links and nothing depends on the movement. */
@media (prefers-reduced-motion: reduce) {
.sv-impact__cards li { transition: none; }
.sv-impact__cards li:hover { transform: none; }
}
.sv-impact__icon {
display: grid; place-items: center;
width: 44px; height: 44px; border-radius: 50%;
background: #EAF6FA; color: var(--sv-accent-deep);
}
.sv-impact__icon svg { width: 21px; height: 21px; }
.sv-impact__fig {
margin: .8rem 0 0;
font-family: var(--sv-serif); font-weight: 600; color: var(--sv-ink);
line-height: 1; letter-spacing: -.015em;
display: flex; align-items: baseline; gap: .06em;
}
.sv-impact__fig span { font-size: clamp(2.1rem, 3.5vw, 2.7rem); }
.sv-impact__fig i { font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-style: normal; }
.sv-impact__bar {
display: block; width: 48px; height: 3px; border-radius: 2px;
margin-top: .6rem;
background: linear-gradient(90deg, var(--sv-accent-mid), var(--sv-accent));
}
.sv-impact__cap {
margin: .6rem 0 0;
font-size: .9rem; line-height: 1.45; color: var(--sv-body);
}
.sv-impact__cap b { font-weight: 600; color: var(--sv-accent-deep); }
/* --- Services ------------------------------------------------------------- */
.sv-services { background: #fff; padding-block: clamp(3rem, 6vw, 5rem); }
.sv-services__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 1000px) {
.sv-services__grid { grid-template-columns: minmax(0, .62fr) minmax(0, 2fr); gap: clamp(2rem, 4vw, 3.5rem); }
}
.sv-services__aside .sv-display { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.sv-services__aside > p { font-size: .95rem; line-height: 1.75; max-width: 30ch; margin-bottom: 1.75rem; }
.sv-shot { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.sv-shot__img {
width: 100%; aspect-ratio: 4 / 3;
border-radius: 999px 999px 0 0;
background: linear-gradient(160deg, #EFEAE4, #DCD5CC 60%, #CFC7BC);
}
.sv-shot__badge {
position: absolute; right: -4%; bottom: 6%;
width: 46%; aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--sv-navy); color: #fff;
border: 3px solid var(--sv-accent-mid);
display: grid; place-items: center; text-align: center;
font-size: .78rem; line-height: 1.5; padding: 1rem;
}
.sv-cards { list-style: none; display: grid; gap: clamp(.85rem, 1.6vw, 1.15rem); }
@media (min-width: 560px) { .sv-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .sv-cards { grid-template-columns: repeat(4, 1fr); } }
.sv-card {
position: relative;
display: flex; flex-direction: column;
background: var(--sv-warm-2);
border: 1px solid var(--sv-line);
padding: clamp(1.15rem, 2vw, 1.5rem);
transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sv-card:hover { border-color: var(--sv-accent-mid); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(21,36,52,.07); }
.sv-card__num {
font-size: .78rem; font-weight: 600; color: var(--sv-accent-deep);
letter-spacing: .1em;
padding-bottom: .5rem; margin-bottom: 1.1rem;
border-bottom: 1px solid var(--sv-accent-mid);
align-self: flex-start;
}
.sv-card__icon {
width: 46px; height: 46px; border-radius: 50%;
background: #fff; border: 1px solid var(--sv-line);
display: grid; place-items: center; color: var(--sv-ink);
margin-bottom: 1.1rem;
}
.sv-card__icon svg { width: 22px; height: 22px; }
.sv-card h3 {
font-family: var(--sv-serif); font-weight: 500;
font-size: 1.05rem; line-height: 1.3; color: var(--sv-ink);
margin-bottom: .6rem;
}
.sv-card p { font-size: .84rem; line-height: 1.65; }
.sv-card__go { margin-top: auto; padding-top: 1.1rem; align-self: flex-end; color: var(--sv-accent-deep); }
.sv-card__go svg { width: 17px; height: 17px; }
/* --- Engagement models ---------------------------------------------------- */
.sv-models { background: var(--sv-warm-2); }
.sv-models__grid { display: grid; }
@media (min-width: 1000px) { .sv-models__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); } }
.sv-models__aside { background: var(--sv-warm); padding: clamp(2rem, 4vw, 3.25rem) var(--gutter); }
@media (min-width: 1000px) { .sv-models__aside { display: flex; align-items: center; justify-content: flex-end; } }
.sv-models__aside-inner { max-width: 22rem; }
.sv-models__aside .sv-display { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 1.1rem; }
.sv-models__aside p { font-size: .92rem; line-height: 1.7; }
.sv-models__list {
list-style: none; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(2rem, 4vw, 3.25rem) var(--gutter);
}
@media (min-width: 560px) { .sv-models__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .sv-models__list { grid-template-columns: repeat(4, 1fr); } }
.sv-models__list h3 {
font-family: var(--sv-serif); font-weight: 500;
font-size: 1.08rem; color: var(--sv-ink); margin-bottom: .6rem;
}
.sv-models__list p { font-size: .85rem; line-height: 1.65; margin-bottom: 1rem; }
.sv-more {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .82rem; font-weight: 600; color: var(--sv-accent-deep);
}
.sv-more svg { width: 15px; height: 15px; }
.sv-more:hover { color: #26697F; text-decoration: underline; text-underline-offset: 3px; }
/* --- CTA band ------------------------------------------------------------- */
/* --- CTA band -------------------------------------------------------------
Near-white ground, per the reference. The ringed mark, the divider and the
button's own weight carry the section, so it needs no fill of its own.
-------------------------------------------------------------------------- */
@media (min-width: 980px) { .sv-cta__inner { flex-wrap: nowrap; text-align: left; } }
/* --- Ringed mark --------------------------------------------------------- */
/* --- Copy ---------------------------------------------------------------- */
@media (min-width: 980px) { .sv-cta__rule { margin-inline: 0; } }
/* --- Divider ------------------------------------------------------------- */
@media (min-width: 980px) {
.sv-cta__divider {
display: block; position: relative; flex: none;
width: 1px; align-self: stretch; min-height: 70px;
background: linear-gradient(180deg, transparent, #CBD8EC 18%, #CBD8EC 82%, transparent);
}
.sv-cta__divider::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: 7px; height: 7px; border-radius: 50%;
transform: translate(-50%, -50%);
background: #fff; border: 1.5px solid #9FB8E4;
}
}
/* --- Button --------------------------------------------------------------
A rectangle rather than the site's pill, matching the reference. */
/* --- Services scroller ------------------------------------------------------
A tall section with a sticky one-screen stage. Eight panels are stacked on
top of one another inside a clipped box; scrolling raises the next one over
the last. The stack itself is clipped and shadowed rather than the cards, so
an off-stage panel can never peek out below the frame.
-------------------------------------------------------------------------- */
.svc {
/* The stack chains its own tokens onto --sv-*, which are declared on .sv —
a scope that exists on services.html only. On the home page, which carries
the same stack, those chains resolved to nothing: body copy, the rail
labels and the step numbers all came out the wrong colour.
Declaring them here makes the component self-contained wherever it is
spliced. The values are the same ones .sv sets, so services.html is
unchanged; it simply stops being the only page where the stack works. */
--sv-brand: #2563EB;
--sv-brand-soft: #EAF1FE;
--sv-body: #4C5561;
--sv-ink: #14202F;
--sv-accent: #9BD4E4;
--sv-serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
color: var(--sv-body);
/* The blue from the reference. 5.2:1 on white and 4.6:1 on its own tint, so
it carries text as well as fills; the deep step is for 10px pill labels
where 4.6 is too thin a margin. */
--svc-brand: var(--sv-brand);
--svc-brand-deep: #1D53C9;
--svc-brand-soft: var(--sv-brand-soft);
--svc-line: #E6EBF2;
--svc-muted: #5D6B77; /* 5.9:1 on white */
/* Measured from the live header by site.js; the literal is only the value
used before that first measurement lands. A hardcoded number here went
1px wrong the moment the header changed. */
--svc-hdr: var(--hdr-h, 79px);
--svc-good: #1F7A4D;
position: relative;
background: #fff;
/* Exactly one screen. The panels are driven by the wheel over the card, not
by page position, so the section needs no scroll track of its own. */
/* Nine tenths of the screen below the header, not all of it. Sized to the
exact pixel the section was only ever fully visible at one scroll position,
which is what made it look clipped; the content needs about 570px of the
820 available at 1440x900, so giving back a tenth costs nothing and leaves
a wide band of scroll positions where the whole section is on screen. */
height: calc((100svh - var(--svc-hdr)) * .9);
min-height: 480px;
/* For anchor jumps, so the heading does not land under the sticky header. */
scroll-margin-top: var(--svc-hdr);
}
.svc__stage {
position: relative;
height: 100%;
display: flex;
}
.svc__inner {
flex: 1; min-height: 0;
display: flex; flex-direction: column;
gap: clamp(.7rem, 1.4vh, 1.25rem);
padding-block: clamp(.75rem, 1.6vh, 1.4rem);
}
/* --- Head ---------------------------------------------------------------- */
/* This section follows the reference, which sets its headings in the heavy
sans rather than the serif the rest of the Services page uses. */
.svc .sv-display { font-family: var(--sans); font-weight: 700; letter-spacing: -.022em; }
.svc .sv-eyebrow { color: var(--svc-brand); }
.svc__intro { flex: none; text-align: center; }
.svc__intro .sv-eyebrow { display: block; }
.svc__intro .sv-display {
margin-top: 0;
font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.14; color: #0F172A;
}
/* Set to the brand light blue at the client's direction. It lands at 1.6:1
on white, under the 3:1 large-text threshold, so it reads as a pale tint. */
.svc__intro .sv-display em { font-style: normal; color: var(--cta); }
.svc__lead { margin-top: .55rem; font-size: .95rem; color: var(--sv-body); }
/* --- Layout -------------------------------------------------------------- */
.svc__body-grid {
flex: 1 1 auto; min-height: 0;
display: grid;
grid-template-columns: 168px minmax(0, 1fr) 44px;
gap: clamp(1rem, 2vw, 2rem);
}
/* --- Left rail ----------------------------------------------------------- */
.svc__rail {
list-style: none; margin: 0; padding: 0;
position: relative;
display: flex; flex-direction: column; justify-content: space-between;
}
.svc__rail::before {
content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px;
width: 1px; background: var(--svc-line);
}
.svc__step {
position: relative; z-index: 1;
display: flex; align-items: flex-start; gap: .6rem;
background: none; border: 0; padding: 0; margin: 0;
font: inherit; text-align: left; cursor: pointer;
}
.svc__step-n {
flex: none; width: 35px; height: 35px; border-radius: 50%;
display: grid; place-items: center;
background: #fff; border: 1px solid var(--svc-line);
font-size: .76rem; font-weight: 600; color: var(--svc-muted);
transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.svc__step-t {
padding-top: .42rem; min-width: 0;
font-size: .78rem; line-height: 1.32; color: var(--svc-muted);
transition: color .3s var(--ease);
}
.svc__step.is-on .svc__step-n { background: var(--svc-brand); border-color: var(--svc-brand); color: #fff; }
.svc__step.is-on .svc__step-t { color: var(--svc-brand); font-weight: 600; }
.svc__step:hover .svc__step-t { color: var(--sv-ink); }
/* --- The stack ----------------------------------------------------------- */
.svc__stack {
position: relative; min-height: 0;
overscroll-behavior: contain;
border: 1px solid var(--svc-line); border-radius: 24px;
background: #fff;
overflow: hidden;
box-shadow: 0 20px 60px -40px rgba(21, 36, 52, .55);
}
.svc__card {
position: absolute; inset: 0;
display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr);
gap: clamp(1.1rem, 2.2vw, 2.2rem);
padding: clamp(1.1rem, 2.1vw, 1.9rem);
background: #fff;
transform: translateY(101%);
transition: transform .7s cubic-bezier(.22, .61, .36, 1);
pointer-events: none;
}
/* Panels already passed stay put; the incoming one rides up over them. */
.svc__card.is-on, .svc__card.is-past { transform: translateY(0); }
.svc__card.is-on { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .svc__card { transition: none; } }
/* --- Card: copy side ----------------------------------------------------- */
.svc__copy { min-width: 0; display: flex; flex-direction: column; }
/* Number and rule set to the brand light blue at the client's direction. The
number is 21px bold, which still needs 4.5:1, and this is 1.6:1 on white. */
.svc__num { font-size: 1.3rem; font-weight: 700; color: var(--cta); letter-spacing: .01em; }
.svc__title { margin-top: .25rem; font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.06; color: #0F172A; }
.svc__rule { display: block; width: 52px; height: 3px; border-radius: 2px; margin: .8rem 0 0; background: var(--cta); }
.svc__tagline { margin-top: .85rem; font-size: clamp(.95rem, 1.3vw, 1.2rem); font-weight: 600; line-height: 1.35; color: #0F172A; }
.svc__body { margin-top: .6rem; font-size: .88rem; line-height: 1.6; color: var(--sv-body); }
/* Was margin-top:auto, which shoved the list to the foot of the copy column
and opened a gap under the paragraph whenever the copy ran short. */
.svc__points { list-style: none; margin: 0; padding-top: .9rem; display: grid; gap: .55rem; }
.svc__points li { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.svc-point__icon {
flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 8px;
background: var(--svc-brand-soft); color: var(--svc-brand);
}
.svc__points span { font-size: .84rem; line-height: 1.35; color: var(--sv-body); min-width: 0; }
/* --- Card: panel side ---------------------------------------------------- */
.svc__panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .7rem; }
.svc__panel-top {
flex: 1 1 auto; min-height: 0;
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .7rem;
}
.svc__figure, .svc__stats, .svc__block {
border: 1px solid var(--svc-line); border-radius: 14px; background: #FCFDFE;
}
.svc__figure { margin: 0; padding: .8rem .9rem; min-width: 0; display: flex; flex-direction: column; }
.svc__figure figcaption { font-size: .72rem; font-weight: 600; color: var(--svc-muted); }
.svc__stats { list-style: none; padding: .3rem .7rem; display: flex; flex-direction: column; justify-content: center; }
/* The box takes its height from the figure beside it in the same grid row, so
four centred rows left 35-45% of it empty. Growing the rows fills it, and the
separators divide it evenly. `1 1 auto` grows but will not shrink a row below
its own content, so short windows clip rather than squash. */
.svc__stats li { flex: 1 1 auto; display: flex; align-items: center; gap: .55rem; padding: .5rem 0; min-width: 0; }
.svc__stats li + li { border-top: 1px solid var(--svc-line); }
/* On a short window the box is already tighter than its four rows, so growing
them only pushes content under the clip. Below 720px tall they keep their
natural height and the box goes back to centring them. */
@media (max-height: 719px) {
.svc__stats li { flex: 0 0 auto; }
}
.svc-stat__icon { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 7px; background: var(--svc-brand-soft); color: var(--svc-brand); }
.svc-stat__body { min-width: 0; display: flex; flex-direction: column; }
.svc-stat__body b { font-size: 1.02rem; font-weight: 700; line-height: 1.15; color: var(--sv-ink); }
.svc-stat__body span { font-size: .68rem; line-height: 1.25; color: var(--svc-muted); }
.svc-stat__delta { margin-left: auto; flex: none; font-size: .68rem; font-weight: 600; color: var(--svc-good); }
.svc__block { padding: .6rem .8rem; }
.svc__block-label { font-size: .7rem; font-weight: 600; color: var(--svc-muted); }
.svc__chips { list-style: none; margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.svc__chips li {
font-size: .72rem; line-height: 1; padding: .38rem .6rem; border-radius: 999px;
border: 1px solid var(--svc-line); background: #fff; color: var(--sv-body);
}
.svc__tools { list-style: none; margin-top: .5rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.svc__tools li { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.svc-tool__icon { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: var(--svc-brand-soft); color: var(--svc-brand); }
/* Vendor marks sit on white rather than the brand tint, and are contained
rather than stretched — the logos run from 2.4:1 to 8.8:1 in aspect. */
.svc-tool__icon--logo {
background: #fff; border: 1px solid var(--svc-line);
padding: 3px; display: grid; place-items: center;
}
.svc-tool__icon--logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* With no caption beneath them the marks can take the space the text used, and
they sit directly on the card — no tile fill, no border.
Flex rather than the parent grid: that grid is a fixed six columns, and this
row now holds five. Flexing lets it share the width evenly at any count. */
.svc__tools--bare { display: flex; align-items: center; gap: clamp(.5rem, 1.2vw, 1rem); margin-top: .35rem; }
.svc__tools--bare li { flex: 1 1 0; min-width: 0; gap: 0; }
.svc__tools--bare .svc-tool__icon {
width: 100%; height: auto; aspect-ratio: 5 / 2; padding: 0;
background: none; border: 0;
/* Capped: in the stacked list layout the card goes full width and an
uncapped tile reached 297x198. */
max-width: 92px; margin-inline: auto;
}
.svc__tools span { font-size: .62rem; line-height: 1.2; color: var(--svc-muted); }
/* --- Figures ------------------------------------------------------------- */
.svc-orbit { position: relative; flex: 1; min-height: 0; margin-top: .5rem; }
/* Height-driven square, centred. Keeping the stage square is what makes the
percentage node positions land on a real circle rather than an ellipse. */
.svc-orbit__stage {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
height: 100%; aspect-ratio: 1; max-width: 100%;
}
.svc-orbit__links {
position: absolute; inset: 0; width: 100%; height: 100%;
stroke: #C7DAFA; stroke-width: .45; stroke-dasharray: 2 2;
}
.svc-orbit__ring {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
aspect-ratio: 1; border-radius: 50%;
border: 1px dashed #D8E6EE;
}
.svc-orbit__core {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
height: 16%; aspect-ratio: 1; border-radius: 50%;
background: var(--svc-brand); color: #fff;
display: grid; place-items: center;
}
.svc-orbit__core-glyph { width: 58%; height: 58%; }
.svc-orbit__node { position: absolute; width: 0; height: 0; }
.svc-orbit__disc {
position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
width: 26px; height: 26px; border-radius: 50%;
background: #fff; border: 1px solid var(--svc-line);
display: grid; place-items: center; color: var(--svc-brand);
box-shadow: 0 2px 6px rgba(21, 36, 52, .07);
}
.svc-orbit__glyph { width: 14px; height: 14px; }
.svc-bars { flex: 1; min-height: 0; margin-top: .6rem; display: flex; flex-direction: column; justify-content: center; gap: .55rem; }
.svc-bars__row { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) 2rem; align-items: center; gap: .5rem; }
.svc-bars__label { font-size: .7rem; color: var(--svc-muted); min-width: 0; }
.svc-bars__track { height: 7px; border-radius: 4px; background: #EEF4F8; overflow: hidden; }
.svc-bars__fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--svc-brand), var(--sv-accent)); }
.svc-bars__val { font-size: .7rem; font-weight: 600; color: var(--sv-ink); text-align: right; }
.svc-rows { list-style: none; flex: 1; min-height: 0; margin-top: .6rem; display: flex; flex-direction: column; justify-content: center; }
.svc-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .42rem 0; }
.svc-rows li + li { border-top: 1px solid var(--svc-line); }
.svc-rows__a { font-size: .74rem; color: var(--sv-ink); min-width: 0; }
.svc-rows__b { font-size: .7rem; color: var(--svc-muted); }
.svc-rows__c {
font-size: .62rem; font-weight: 600; padding: .2rem .45rem; border-radius: 999px;
background: var(--svc-brand-soft); color: var(--svc-brand-deep); white-space: nowrap;
}
.svc-rows__c[data-tone="done"], .svc-rows__c[data-tone="sent"] { background: #E6F4EC; color: var(--svc-good); }
/* --- Arrows and mouse ---------------------------------------------------- */
.svc__arrows { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; }
.svc__arrow {
flex: none; width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--svc-line); background: #fff; color: var(--svc-muted);
display: grid; place-items: center; cursor: pointer;
transition: color .25s var(--ease), border-color .25s var(--ease);
}
.svc__arrow svg { width: 18px; height: 18px; }
.svc__arrow:hover { color: var(--svc-brand); border-color: var(--svc-brand); }
.svc__arrow[disabled] { opacity: .35; cursor: default; }
.svc__mouse { flex: none; width: 24px; height: 38px; border-radius: 999px; border: 1px solid var(--svc-line); position: relative; }
.svc__mouse span {
position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; border-radius: 2px;
background: var(--svc-muted); transform: translateX(-50%);
animation: svc-wheel 1.8s var(--ease) infinite;
}
@keyframes svc-wheel {
0%, 100% { opacity: 0; transform: translate(-50%, 0); }
40% { opacity: 1; }
70% { opacity: 0; transform: translate(-50%, 10px); }
}
@media (prefers-reduced-motion: reduce) { .svc__mouse span { animation: none; opacity: 1; } }
/* --- Foot ---------------------------------------------------------------- */
.svc__foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.svc__dots { display: flex; gap: .35rem; }
.svc__dot {
width: 22px; height: 5px; border-radius: 999px; border: 0; padding: 0;
background: #DDE7EE; cursor: pointer;
transition: background .3s var(--ease), width .3s var(--ease);
}
.svc__dot.is-on { width: 34px; background: var(--svc-brand); }
.svc__hint { font-size: .8rem; color: var(--svc-muted); }
/* --- Below the breakpoint the pinned mechanism is dropped entirely --------
Sticky scroll-jacking is hostile on a touch screen, so the panels become a
plain stacked list and the rail, arrows and dots come off. */
@media (max-width: 999px) {
.svc { height: auto; min-height: 0; padding-block: clamp(2rem, 6vw, 3.5rem); }
.svc__stage { height: auto; padding-top: 0; }
.svc__inner { height: auto; }
.svc__rail, .svc__arrows, .svc__foot { display: none; }
.svc__body-grid { display: block; }
.svc__stack {
border: 0; border-radius: 0; overflow: visible; box-shadow: none;
background: transparent;
display: grid; gap: 1rem; margin-top: 1.5rem;
}
.svc__card {
position: static; transform: none; pointer-events: auto;
grid-template-columns: minmax(0, 1fr);
border: 1px solid var(--svc-line); border-radius: 18px;
padding: clamp(1.1rem, 4vw, 1.6rem);
}
.svc__points { margin-top: 1rem; }
.svc__panel-top { grid-template-columns: minmax(0, 1fr); }
.svc-orbit { min-height: 240px; }
.svc__tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.svc-bars__row { grid-template-columns: 4.4rem minmax(0, 1fr) 1.8rem; }
.svc-rows li { grid-template-columns: minmax(0, 1fr) auto; }
.svc-rows__b { display: none; }
}
/* --- Short windows --------------------------------------------------------
The panel has a fixed budget: one screen, less the header, the section head
and the footer. On a 720-tall window that budget is ~130px short of what the
copy column wants, so type and rhythm step down in two tiers rather than the
stack clipping a card. Nothing is hidden except the lead line.
-------------------------------------------------------------------------- */
@media (min-width: 1000px) and (max-height: 959px) {
.svc__intro .sv-display { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.svc__lead { margin-top: .35rem; font-size: .85rem; }
.svc__card { padding: clamp(1.1rem, 1.8vw, 1.6rem); }
.svc__num { font-size: 1.2rem; }
.svc__title { font-size: clamp(1.6rem, 2.7vw, 2.3rem); }
.svc__rule { margin-top: .75rem; }
.svc__tagline { margin-top: .85rem; font-size: clamp(1.02rem, 1.2vw, 1.18rem); }
.svc__body { margin-top: .6rem; font-size: .95rem; line-height: 1.6; }
.svc__points { padding-top: 1rem; gap: .6rem; }
.svc-point__icon { width: 30px; height: 30px; padding: 6px; }
.svc__points span { font-size: .9rem; }
.svc__stats li { padding: .38rem 0; }
.svc-stat__body b { font-size: .95rem; }
.svc-tool__icon { width: 24px; height: 24px; padding: 5px; }
}
/* 879, not 819: the enlarged copy sizes in the tier above overflowed two
cards at a 820-tall window, which fell in the gap between the two. */
@media (min-width: 1000px) and (max-height: 879px) {
.svc__intro .sv-display { font-size: 1.35rem; }
.svc__lead { display: none; }
.svc__title { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.svc__body { font-size: .78rem; line-height: 1.45; }
.svc__points { gap: .3rem; padding-top: .55rem; }
.svc__points span { font-size: .75rem; line-height: 1.3; }
.svc-point__icon { width: 24px; height: 24px; padding: 5px; }
.svc__tagline { font-size: .92rem; }
.svc__block { padding: .45rem .7rem; }
.svc__chips li { font-size: .68rem; padding: .3rem .5rem; }
.svc__tools span { font-size: .58rem; }
.svc__hint { display: none; }
/* A third step for netbook-height windows, where the copy column is still
a few pixels over its budget. */
@media (min-width: 1000px) and (max-height: 679px) {
.svc__title { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.svc__num { font-size: .95rem; }
.svc__tagline { margin-top: .5rem; font-size: .86rem; }
.svc__body { margin-top: .35rem; font-size: .74rem; line-height: 1.4; }
.svc__points { gap: .24rem; padding-top: .45rem; }
.svc__points span { font-size: .72rem; }
.svc-point__icon { width: 22px; height: 22px; padding: 4px; }
.svc__figure figcaption { display: none; }
}
}
/* --- RPO engagement model cards --------------------------------------------
Card layout from the client's reference. The cards are rpo-models.html only,
but .rpo-head / .rpo-badge / .rpo-title are also used by the Industries
section on services.html.
-------------------------------------------------------------------------- */
.rpo-head { text-align: center; max-width: 54rem; margin-inline: auto; }
.rpo-badge {
display: inline-block;
padding: .5rem 1.05rem; border-radius: 999px;
background: var(--sky); color: var(--ink); /* 12.6:1 */
font-size: .74rem; font-weight: 600;
letter-spacing: .09em; text-transform: uppercase;
}
/* .rpo-title's top margin exists to clear the badge above it. This head has no
badge, so it comes off — the other two heads on rpo-models.html keep theirs. */
.rpo-head--plain .rpo-title { margin-top: 0; }
/* This is the first band under the header, so the full section rhythm left a
large gap above the h1 with nothing in it. */
.rpo-intro { padding-top: clamp(1.25rem, 3vw, 2rem); }
/* The shared 46ch measure broke this lead over two lines — 738px of text in a
499px box. It has a 1240px wrap to sit in, so the cap comes off here and the
line still wraps naturally once the viewport is narrower than the sentence. */
.rpo-head--plain .rpo-lead { max-width: none; }
/* This heading is 934px of type against the shared 54rem (864px) measure, so it
broke over two lines. The band it sits in is 1240px wide, so the cap comes off
for this head and the line holds until the viewport is narrower than it. */
.rpo-head--wide { max-width: none; }
/* --wide is this heading's own hook, so the two highlighted words stay put even
though .rpo-title dresses heads on three pages. 1.6:1 on white, so they read
as tints and the ink words carry the line. */
.rpo-head--wide .rpo-title span { color: var(--headline-hl); }
.rpo-title {
margin-top: 1.15rem;
font-size: clamp(1.85rem, 4.6vw, 3.4rem); font-weight: 700;
line-height: 1.08; letter-spacing: -.035em; color: var(--ink);
}
.rpo-lead {
margin-top: .9rem; max-width: 46ch; margin-inline: auto;
font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.6; color: var(--slate);
}
.rpo-cards {
list-style: none; margin-top: clamp(2rem, 4vw, 3.25rem);
display: grid; gap: clamp(1rem, 1.8vw, 1.5rem);
}
@media (min-width: 700px) { .rpo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1220px) { .rpo-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rpo-card {
min-width: 0; /* grid items default to min-width:auto */
position: relative; /* the number badge hangs off the top */
display: flex; flex-direction: column;
background: var(--paper); border: 1px solid var(--line);
border-radius: 20px;
padding: clamp(1.15rem, 1.7vw, 1.45rem);
box-shadow: 0 1px 2px rgba(11, 39, 64, .04), 0 16px 34px -26px rgba(11, 39, 64, .3);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.rpo-card:hover {
transform: translateY(-4px);
box-shadow: 0 1px 2px rgba(11, 39, 64, .04), 0 24px 50px -15px rgba(11, 39, 64, .18);
}
/* Motion is decoration here — the card is not a link and nothing depends on it. */
@media (prefers-reduced-motion: reduce) {
.rpo-card { transition: none; }
.rpo-card:hover { transform: none; }
}
.rpo-card__head { min-width: 0; }
.rpo-card__n {
position: absolute; top: -11px; left: clamp(1.15rem, 1.7vw, 1.45rem);
padding: .3rem .6rem; border-radius: 999px;
background: var(--ink); color: var(--paper); /* 15.2:1 */
font-size: .68rem; font-weight: 700; letter-spacing: .12em;
line-height: 1.35;
}
.rpo-card__title {
margin-top: .35rem;
font-size: clamp(1.2rem, 1.9vw, 1.4rem); font-weight: 700;
letter-spacing: -.025em; color: var(--ink);
}
.rpo-card__sub {
margin-top: .35rem;
font-size: .86rem; line-height: 1.4; color: var(--slate);
}
.rpo-card__ticks { list-style: none; margin-top: .8rem; display: grid; gap: .45rem; }
.rpo-card__ticks li { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; }
.rpo-card__ticks svg { flex: none; width: 19px; height: 19px; margin-top: .1rem; fill: var(--ink); }
.rpo-card__ticks span { font-size: .9rem; line-height: 1.4; color: var(--ink); min-width: 0; }
/* Dashed, and pushed to the bottom so the rule and the closing paragraph line
up across cards whose bullet lists differ in length. */
.rpo-card__rule {
display: block; margin: auto 0 0; padding-top: .95rem;
border-bottom: 1px dashed var(--line);
}
.rpo-card__body {
margin-top: .8rem;
font-size: .84rem; line-height: 1.5; color: var(--slate);
}
/* Each card is four blocks tall. Making the card a subgrid over those four
rows is what lines the dashed rules up across a row: without it every rule
sits wherever its own card's copy happens to end, which put card four 22px
above its neighbours. Must come after the .rpo-card base rule, or that
rule's display:flex wins on source order. Browsers without subgrid keep the
flex column and simply lose the alignment. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 700px) {
.rpo-cards { grid-template-rows: repeat(8, auto); }
.rpo-card {
display: grid; grid-template-rows: subgrid; grid-row: span 4;
align-content: start;
}
/* The auto margin was doing the bottom-anchoring the subgrid now handles. */
.rpo-card__rule { margin: 0; }
}
@media (min-width: 1220px) {
.rpo-cards { grid-template-rows: repeat(4, auto); }
}
}
/* --- How it works: numbered step cards -------------------------------------
Same card shell as the model cards so the page reads as one system. Only
rpo-models.html uses these.
-------------------------------------------------------------------------- */
.how-cards {
list-style: none; margin-top: clamp(2rem, 4vw, 3.25rem);
display: grid; gap: clamp(1rem, 1.8vw, 1.5rem);
}
@media (min-width: 700px) { .how-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .how-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how-card {
min-width: 0; /* grid items default to min-width:auto */
position: relative; /* the number badge hangs off the top */
display: flex; flex-direction: column;
background: var(--paper); border: 1px solid var(--line);
border-radius: 20px;
padding: clamp(1.15rem, 1.7vw, 1.45rem);
box-shadow: 0 1px 2px rgba(11, 39, 64, .04), 0 16px 34px -26px rgba(11, 39, 64, .3);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.how-card:hover {
transform: translateY(-4px);
box-shadow: 0 1px 2px rgba(11, 39, 64, .04), 0 24px 50px -15px rgba(11, 39, 64, .18);
}
/* Decoration only — the card is not a link and nothing depends on the movement. */
@media (prefers-reduced-motion: reduce) {
.how-card { transition: none; }
.how-card:hover { transform: none; }
}
.how-card__head { min-width: 0; }
.how-card__n {
position: absolute; top: -11px; left: clamp(1.15rem, 1.7vw, 1.45rem);
padding: .3rem .6rem; border-radius: 999px;
background: var(--ink); color: var(--paper); /* 15.2:1 */
font-size: .68rem; font-weight: 700; letter-spacing: .12em;
line-height: 1.35;
}
.how-card__step {
margin-top: 0;
font-size: .72rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
color: var(--cobalt); /* 5.3:1 */
}
.how-card__title {
margin-top: .35rem;
font-size: clamp(1.02rem, 1.5vw, 1.15rem); font-weight: 700;
letter-spacing: -.02em; line-height: 1.3; color: var(--ink);
}
.how-card__body {
margin-top: .75rem;
font-size: .86rem; line-height: 1.6; color: var(--slate);
}
/* The head block is one subgrid row, so the body paragraphs start on the same
line across a row however long each step's title runs. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 700px) {
.how-cards { grid-template-rows: repeat(4, auto); }
.how-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }
}
@media (min-width: 1180px) {
.how-cards { grid-template-rows: repeat(2, auto); }
}
}
/* --- Why RPO Partners: media + feature list --------------------------------
Only rpo-models.html uses these.
.why-media crops with object-fit, so the photograph fills the panel at any
column width without distorting. Regenerate the WebP variants from
why-source.png with: npm run img
-------------------------------------------------------------------------- */
@media (min-width: 960px) {
/* Stretch, not centre: the photograph is landscape and the copy column runs
much taller, so centring left the panel floating at half the row height.
Stretching lets object-fit crop it to the full column instead. */
.why-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: stretch; }
}
@media (min-width: 960px) {
.why-media img { aspect-ratio: auto; min-height: 320px; }
}
/* --- Testimonials ----------------------------------------------------------
Head, stats bar, quote carousel and CTA card. Only testimonials.html uses
these. The reference's orange is not in this site's palette; the accent
roles it fills are taken by the brand pale blue (--cta).
That blue is very light: on white it is 1.6:1, so the eyebrow, the light
card's quote mark and the stat icons read as tints rather than as marks.
Set at the client's direction — --cobalt would carry them at 5.9:1.
-------------------------------------------------------------------------- */
.tst-hero {
padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
text-align: center;
}
.tst-title {
font-size: clamp(1.9rem, 4.6vw, 3.2rem); font-weight: 700;
line-height: 1.1; letter-spacing: -.035em; color: var(--ink);
}
/* Both halves of the line in the brand light blue, per the client. At 1.6:1 on
white they read as tints and the two "Real"s carry the line. */
.tst-title span { color: var(--headline-hl); }
.tst-lead {
margin: 1rem auto 0; max-width: 62ch;
font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.65; color: var(--slate);
}
/* --- Stats bar ----------------------------------------------------------- */
.tst-stats {
list-style: none; margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
background: var(--paper); border: 1px solid var(--line);
border-radius: 20px; padding: clamp(1rem, 2vw, 1.5rem);
box-shadow: 0 1px 2px rgba(11, 39, 64, .04), 0 20px 40px -30px rgba(11, 39, 64, .35);
display: grid; gap: clamp(.9rem, 2vw, 1.25rem);
grid-template-columns: minmax(0, 1fr);
text-align: left;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tst-stats:hover {
transform: translateY(-4px);
box-shadow: 0 1px 2px rgba(11, 39, 64, .04), 0 24px 50px -15px rgba(11, 39, 64, .18);
}
/* Decoration only — the bar is not a link and nothing depends on the movement. */
@media (prefers-reduced-motion: reduce) {
.tst-stats { transition: none; }
.tst-stats:hover { transform: none; }
}
@media (min-width: 620px) { .tst-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tst-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.tst-stats li { display: flex; align-items: center; gap: .85rem; min-width: 0; }
@media (min-width: 1000px) {
.tst-stats li { padding-inline: clamp(.75rem, 1.6vw, 1.4rem); border-left: 1px solid var(--line); }
.tst-stats li:first-child { border-left: 0; }
}
.tst-stat__ico {
flex: none; display: grid; place-items: center;
width: 48px; height: 48px; border-radius: 50%;
background: var(--sky); color: var(--cta); /* 1.4:1 on the tile — see note */
}
.tst-stat__ico svg { width: 23px; height: 23px; }
.tst-stat__body { min-width: 0; display: flex; flex-direction: column; }
.tst-stat__body b {
font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 700;
line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.tst-stat__body span { font-size: .82rem; line-height: 1.3; color: var(--slate); margin-top: .15rem; }
/* --- Carousel ------------------------------------------------------------ */
.tst-car { position: relative; display: flex; align-items: center; gap: .5rem; }
.tst-car__viewport { flex: 1; min-width: 0; overflow: hidden; padding: .35rem; margin: -.35rem; }
.tst-car__track {
list-style: none; display: flex;
gap: clamp(.9rem, 1.8vw, 1.35rem);
transition: transform .55s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .tst-car__track { transition: none; } }
.tst-card {
flex: 0 0 100%; min-width: 0;
display: flex; flex-direction: column;
border-radius: 20px; padding: clamp(1.5rem, 2.6vw, 2rem);
background: var(--ink); color: #fff;
border-bottom: 3px solid var(--cta);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tst-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px -15px rgba(11, 39, 64, .35);
}
/* Decoration only — the cards are not links and nothing depends on the
movement. The carousel translates the track, not the card, so the two
transforms do not compete. */
@media (prefers-reduced-motion: reduce) {
.tst-card { transition: none; }
.tst-card:hover { transform: none; }
}
@media (min-width: 700px) { .tst-card { flex-basis: calc((100% - 1.35rem) / 2); } }
@media (min-width: 1060px) { .tst-card { flex-basis: calc((100% - 2.7rem) / 3); } }
/* Every other card inverts, so the row reads as three distinct panels rather
than one long dark block. */
.tst-card--light {
background: var(--paper); color: var(--ink);
border: 1px solid var(--line); border-bottom: 3px solid var(--cta);
}
.tst-card__mark {
font-family: var(--display); font-size: 3rem; line-height: .7;
color: var(--cta); /* 6.9:1 on the ink card */
}
.tst-card--light .tst-card__mark { color: var(--cta); } /* 1.6:1 on white — decorative quote mark */
.tst-card__head {
margin-top: .7rem;
font-size: clamp(1rem, 1.35vw, 1.12rem); font-weight: 700;
line-height: 1.35; letter-spacing: -.015em; color: #fff;
}
.tst-card--light .tst-card__head { color: var(--ink); }
.tst-card__quote {
margin-top: .7rem;
font-size: .9rem; line-height: 1.65; color: #D7E4EF;
}
.tst-card--light .tst-card__quote { color: var(--slate); }
.tst-card__by { margin-top: auto; padding-top: 1.5rem; }
.tst-card__who { min-width: 0; display: flex; flex-direction: column; }
.tst-card__who b { font-size: .98rem; font-weight: 700; color: #fff; }
.tst-card--light .tst-card__who b { color: var(--ink); }
.tst-card__who span { font-size: .82rem; color: #A9C6DD; margin-top: .1rem; }
.tst-card--light .tst-card__who span { color: var(--slate); }
.tst-car__nav {
flex: none; width: 42px; height: 42px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: var(--paper); border: 1px solid var(--line); color: var(--ink);
transition: border-color .2s var(--ease), color .2s var(--ease);
}
.tst-car__nav svg { width: 19px; height: 19px; }
.tst-car__nav:hover { border-color: var(--ink); }
.tst-car__nav[disabled] { opacity: .35; cursor: default; }
@media (max-width: 699px) { .tst-car__nav { display: none; } }
.tst-car__dots { display: flex; justify-content: center; gap: .4rem; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.tst-dot {
width: 22px; height: 5px; border-radius: 999px; border: 0; padding: 0;
background: var(--line); cursor: pointer;
transition: background .3s var(--ease), width .3s var(--ease);
}
.tst-dot.is-on { width: 34px; background: var(--cta); }
/* --- CTA card ------------------------------------------------------------ */
@media (min-width: 900px) {
.tst-cta { grid-template-columns: auto minmax(0, 1fr) auto; text-align: left; justify-items: start; }
}
/* --- Blog ------------------------------------------------------------------
The reference's own palette, kept as supplied. The orange is split by job:
at #F26522 it carries white at only 3.15:1, so buttons and small orange text
take deeper steps of the same hue. On the dark bands the bright orange is
fine (5.5:1) and is used directly.
-------------------------------------------------------------------------- */
.bl {
/* The reference's orange and green are both replaced by the brand pale blue
at the client's direction, so these are named by job rather than by hue.
It carries on the navy band (6.9:1) but is only 1.6:1 on white and 1.5:1
on the cream, so the eyebrows, kickers, "read more" links and card badges
read as tints rather than as marks. */
--bl-mark: #9BD4E4; /* fills and marks on dark: 6.9:1 */
--bl-btn-bg: #9BD4E4; /* button ground; takes an ink label, not white */
--bl-mark-text: #9BD4E4; /* small marks on white/cream: 1.6:1 */
--bl-navy: #0E1B2A;
--bl-cream: #FBF6F1;
--bl-accent: #9BD4E4; /* the second accent role */
--bl-ink: #101828;
--bl-body: #5A6472;
--bl-line: #E7E3DE;
}
.bl-eyebrow {
font-size: .76rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--bl-mark-text);
}
.bl-eyebrow--on-dark { color: var(--bl-mark); }
.bl-btn {
display: inline-flex; align-items: center; gap: .55rem;
/* White on the pale blue is 1.6:1, so the button takes the ink label every
other pale-blue button on the site uses — 9.4:1. */
background: var(--bl-btn-bg); color: var(--cta-ink);
font-size: .88rem; font-weight: 600;
padding: .85rem 1.4rem; border-radius: 8px; border: 1px solid transparent;
transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.bl-btn svg { width: 16px; height: 16px; flex: none; }
.bl-btn:hover { background: var(--cta-deep); color: var(--cta-ink); transform: translateY(-1px); }
.bl-btn--ghost { background: #fff; color: var(--bl-ink); border-color: var(--bl-line); }
.bl-btn--ghost:hover { background: #fff; color: var(--bl-ink); border-color: var(--bl-ink); }
.bl-btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.bl-btn--ghost-dark:hover { background: rgba(255,255,255,.08); color: #fff; }
.bl-hero { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.bl-hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .bl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }
.bl-hero__copy { min-width: 0; }
.bl-hero__title {
margin-top: 1rem;
font-size: clamp(2rem, 4.4vw, 3.15rem); font-weight: 700;
line-height: 1.1; letter-spacing: -.035em; color: var(--bl-ink);
}
.bl-hero__title span { color: var(--headline-hl); }
.bl-hero__lead {
margin-top: 1rem; max-width: 46ch;
font-size: .98rem; line-height: 1.65; color: var(--bl-body);
}
.bl-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.bl-hero__topics-label {
margin-top: 2rem;
font-size: .7rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--bl-ink);
}
.bl-topics {
list-style: none; margin-top: .9rem;
display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
}
.bl-topics li { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--bl-body); }
.bl-topics__ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--bl-accent); }
.bl-topics__ico svg { width: 19px; height: 19px; }
.bl-hero__media { position: relative; min-width: 0; }
.bl-hero__img {
display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
object-fit: cover;
/* The reference crops its hero into a soft blob rather than a rectangle. */
border-radius: 46% 54% 50% 50% / 58% 44% 56% 42%;
background: var(--sky);
}
.bl-hero__pills { list-style: none; position: absolute; inset: 0; pointer-events: none; }
.bl-pill {
position: absolute; display: inline-flex; align-items: center; gap: .4rem;
background: #fff; border: 1px solid var(--bl-line); border-radius: 999px;
padding: .4rem .75rem;
font-size: .66rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--bl-ink);
box-shadow: 0 6px 18px -10px rgba(16, 24, 40, .5);
white-space: nowrap;
}
.bl-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--bl-mark); }
.bl-pill--1 { top: 6%; right: 2%; }
.bl-pill--2 { top: 22%; right: 12%; }
.bl-pill--3 { top: 38%; right: 0; }
.bl-pill--4 { top: 55%; right: 14%; }
.bl-pill--5 { top: 71%; right: 1%; }
.bl-pill--2 span, .bl-pill--4 span { background: var(--bl-accent); }
@media (max-width: 639px) { .bl-hero__pills { display: none; } }
/* --- Featured ------------------------------------------------------------ */
.bl-featured {
background: var(--paper); border: 1px solid var(--bl-line); border-radius: 18px;
padding: clamp(1.4rem, 2.6vw, 2.1rem);
display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); align-items: center;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bl-featured:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px -15px rgba(11, 39, 64, .18);
}
/* Decoration only — the panel is not itself a link, and its "Read Article"
link keeps working whether the movement runs or not. */
@media (prefers-reduced-motion: reduce) {
.bl-featured { transition: none; }
.bl-featured:hover { transform: none; }
}
@media (min-width: 860px) { .bl-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.bl-featured__copy { min-width: 0; }
.bl-featured__title {
margin-top: .8rem;
font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 700;
line-height: 1.25; letter-spacing: -.025em; color: var(--bl-ink);
}
.bl-featured__lead { margin-top: .8rem; font-size: .9rem; line-height: 1.65; color: var(--bl-body); max-width: 48ch; }
.bl-featured__meta {
display: flex; align-items: center; gap: .45rem; margin-top: 1.1rem;
font-size: .78rem; color: var(--bl-body);
}
.bl-featured__meta em { font-style: normal; }
.bl-featured__meta em::before { content: "\2022"; margin: 0 .5rem; color: var(--bl-line); }
.bl-chip-ico { display: grid; place-items: center; width: 20px; height: 20px; color: var(--bl-ink); }
.bl-chip-ico svg { width: 15px; height: 15px; }
.bl-more {
display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.2rem;
font-size: .85rem; font-weight: 700; color: var(--bl-mark-text);
}
.bl-more svg { width: 15px; height: 15px; }
.bl-more:hover { color: var(--cta-deep); }
.bl-featured__media img, .bl-card__media img {
display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Banner artwork in a card box. cover keeps the 16/10 grid rhythm; anchoring
left keeps the headline rather than centring on the middle of the image. */
.bl-card__media img.bl-img--left { object-position: left center; }
.bl-card__media--strip img.bl-img--left { object-position: left center; }
.bl-featured__media { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sky); }
/* Post 01's banner is 2.93:1 and carries its own headline, so the 16/10 box
above would object-fit away the title on the left and the diagram on the
right. Matching the artwork's ratio crops nothing; .bl-featured already
centres its grid items, so the shorter media block sits level with the copy. */
.bl-featured__media--wide { aspect-ratio: auto; }
.bl-featured__media--wide img { height: auto; }
/* --- Filters ------------------------------------------------------------- */
.bl-filters {
list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.bl-filter {
border: 0; cursor: pointer;
background: transparent; color: var(--bl-body);
font-size: .84rem; font-weight: 500;
padding: .55rem 1rem; border-radius: 8px;
transition: background-color .2s var(--ease), color .2s var(--ease);
}
.bl-filter:hover { color: var(--bl-ink); background: var(--bl-cream); }
.bl-filter.is-on { background: var(--bl-ink); color: #fff; font-weight: 600; }
/* --- Article grid -------------------------------------------------------- */
.bl-grid { display: grid; gap: clamp(1rem, 1.8vw, 1.35rem); }
@media (min-width: 760px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-card {
min-width: 0; display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--bl-line); border-radius: 14px;
overflow: hidden;
transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.bl-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -24px rgba(16, 24, 40, .45); }
/* min-height: 0 is load-bearing. .bl-card is a column flex container, so this
box gets min-height: auto and content can push it past its aspect-ratio. A
banner is shorter than the 16/10 box at card width so it never showed, but a
portrait-ish figure is taller — the box grew to the image ratio and each card
in the row ended up a different height. */
.bl-card__media { position: relative; aspect-ratio: 16 / 10; min-height: 0; background: var(--sky); }
.bl-card__badge {
position: absolute; top: .8rem; left: .8rem;
display: grid; place-items: center; width: 34px; height: 34px;
border-radius: 9px; background: #fff; color: var(--bl-accent);
box-shadow: 0 4px 12px -6px rgba(16, 24, 40, .5);
}
.bl-card__badge svg { width: 18px; height: 18px; }
.bl-card__badge--inline { position: static; box-shadow: none; background: var(--bl-cream); }
.bl-card__body { padding: clamp(1rem, 1.8vw, 1.35rem); display: flex; flex-direction: column; flex: 1; }
.bl-cat {
display: flex; align-items: center; gap: .5rem;
font-size: .68rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--bl-accent);
}
.bl-card h3 {
margin-top: .55rem;
font-size: clamp(1rem, 1.35vw, 1.12rem); font-weight: 700;
line-height: 1.32; letter-spacing: -.02em; color: var(--bl-ink);
}
.bl-card h3 a { color: inherit; }
.bl-card h3 a:hover { color: var(--bl-mark-text); }
.bl-card__desc { margin-top: .55rem; font-size: .83rem; line-height: 1.6; color: var(--bl-body); }
.bl-meta {
display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1.1rem;
font-size: .76rem; color: var(--bl-body);
}
.bl-meta a {
display: inline-flex; align-items: center; gap: .35rem;
font-weight: 700; color: var(--bl-mark-text);
}
.bl-meta a svg { width: 13px; height: 13px; }
.bl-meta a::before { content: "\2022"; margin-right: .4rem; color: var(--bl-line); }
/* The two small cards share one column. */
.bl-stack { display: grid; gap: clamp(1rem, 1.8vw, 1.35rem); align-content: start; min-width: 0; }
.bl-card--small { padding: clamp(1rem, 1.8vw, 1.35rem); }
.bl-card--small .bl-card__badge--inline { margin-bottom: .8rem; }
@media (min-width: 1100px) {
.bl-card--wide { grid-column: span 3; flex-direction: row; }
.bl-card--wide .bl-card__media { flex: 0 0 34%; aspect-ratio: auto; }
.bl-card--wide .bl-card__body { flex: 1; }
}
@media (min-width: 760px) and (max-width: 1099px) {
.bl-card--wide { grid-column: span 2; flex-direction: row; }
.bl-card--wide .bl-card__media { flex: 0 0 34%; aspect-ratio: auto; }
}
.bl-viewall { text-align: center; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
/* --- What's shaping ------------------------------------------------------ */
.bl-rule-head {
display: flex; align-items: center; gap: 1.25rem;
font-size: .82rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--bl-ink);
text-align: center;
}
.bl-rule-head::before, .bl-rule-head::after {
content: ""; flex: 1; height: 1px; background: var(--bl-line);
}
.bl-shaping {
list-style: none; margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 620px) { .bl-shaping { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .bl-shaping { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bl-shaping li { min-width: 0; }
.bl-shaping__top { display: flex; align-items: center; gap: .9rem; }
.bl-shaping__n {
font-size: clamp(1.7rem, 2.8vw, 2.1rem); font-weight: 400;
line-height: 1; color: var(--bl-accent);
}
.bl-shaping__ico { display: grid; place-items: center; width: 34px; height: 34px; color: var(--bl-accent); }
.bl-shaping__ico svg { width: 26px; height: 26px; }
.bl-shaping h3 { margin-top: 1rem; font-size: .98rem; font-weight: 700; letter-spacing: -.015em; color: var(--bl-ink); }
.bl-shaping p { margin-top: .5rem; font-size: .82rem; line-height: 1.6; color: var(--bl-body); }
/* --- Playbook ------------------------------------------------------------ */
/* --- Newsletter ---------------------------------------------------------- */
.bl-news {
background: var(--bl-cream); border-radius: 16px;
padding: clamp(1.5rem, 3vw, 2.25rem);
display: grid; gap: clamp(1.1rem, 2.4vw, 2rem); align-items: center;
}
@media (min-width: 900px) { .bl-news { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); } }
.bl-news__ico {
display: grid; place-items: center; width: 62px; height: 62px;
color: var(--bl-mark-text);
}
.bl-news__ico svg { width: 40px; height: 40px; }
.bl-news__copy { min-width: 0; }
.bl-news__copy h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--bl-ink); }
.bl-news__copy p { margin-top: .5rem; font-size: .85rem; line-height: 1.55; color: var(--bl-body); }
.bl-news__form { display: flex; flex-wrap: wrap; gap: .6rem; min-width: 0; }
.bl-news__form input {
flex: 1 1 12rem; min-width: 0;
padding: .85rem 1rem; border-radius: 8px;
border: 1px solid var(--bl-line); background: #fff;
font: inherit; font-size: .88rem; color: var(--bl-ink);
}
.bl-news__form input::placeholder { color: #8A93A0; } /* 3.5:1, placeholder only */
.bl-news__form input:focus-visible { outline: 2px solid var(--bl-btn-bg); outline-offset: 2px; }
.bl-news__notice { flex: 1 0 100%; font-size: .82rem; margin-top: .2rem; }
/* --- Closing CTA --------------------------------------------------------- */
/* --- Consultation page -----------------------------------------------------
The reference's palette: warm orange, deep green, navy, cream, with the
headings set in the serif. The reference's orange and green have both been
replaced by the brand pale blue — see the token block below.
-------------------------------------------------------------------------- */
.ct {
/* The reference's orange and green are both replaced by the brand pale blue
at the client's direction. The names follow the job now rather than the
hue, since every one of them is the same blue.
It carries well on the navy band (6.9:1) but is only 1.6:1 on white and
1.5:1 on the cream, so the eyebrows, the italic in the hero, the small
icons and the float arrow read as tints rather than as marks. */
--ct-mark-text: #9BD4E4; /* small marks on white/cream: 1.6:1 */
--ct-accent: #9BD4E4; /* the second accent role */
--ct-accent-soft: #E3F1FB; /* the soft tile behind an icon */
--ct-tint: #E3F1FB; /* was the warm tile; now the same blue tint */
--ct-navy: #0E2033;
--ct-cream: #FAF8F5;
--ct-ink: #14202F;
--ct-body: #55606E;
--ct-line: #E6E3DE;
}
.ct-rule { display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--ct-accent); margin: 1.4rem 0; }
/* --- What you'll gain ---------------------------------------------------- */
.ct-gains { background: var(--ct-cream); padding-block: clamp(2.5rem, 5vw, 4rem); }
.ct-gains__title {
font-family: var(--display); font-weight: 500;
font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.3;
color: var(--ct-ink); text-align: center;
}
/* Two words in the brand light blue, per the client. On the cream ground this
is 1.5:1, so they read as tints and the ink words carry the line. */
.ct-gains__title span { color: var(--headline-hl); }
.ct-gains__list {
list-style: none; margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
display: grid; gap: clamp(1.5rem, 3vw, 2rem); text-align: center;
}
@media (min-width: 620px) { .ct-gains__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ct-gains__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.ct-gains__list li { min-width: 0; }
@media (min-width: 1000px) {
.ct-gains__list li { padding-inline: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--ct-line); }
.ct-gains__list li:first-child { border-left: 0; }
}
.ct-gains__ico {
display: grid; place-items: center; margin-inline: auto;
width: 62px; height: 62px; border-radius: 50%;
}
.ct-gains__ico svg { width: 28px; height: 28px; }
.ct-gains__ico--warm { background: var(--ct-tint); color: var(--ct-mark-text); }
.ct-gains__ico--cool { background: var(--ct-accent-soft); color: var(--ct-accent); }
.ct-gains__list h3 { margin-top: 1rem; font-size: 1rem; font-weight: 700; color: var(--ct-ink); }
.ct-gains__list p { margin-top: .55rem; font-size: .85rem; line-height: 1.6; color: var(--ct-body); }
/* --- Booking ------------------------------------------------------------- */
/* Head above the form rather than beside it, so the card can take the full
width and hold three fields to a row. */
.ct-book { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
.ct-book__head { min-width: 0; max-width: 46rem; }
/* Was 96px of section padding plus this margin — 110px between the header and
the heading, on a page that now opens with it. */
.ct .section--tight { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.ct-book__title {
margin-top: 0;
font-family: var(--display); font-weight: 500;
font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15;
letter-spacing: -.02em; color: var(--ct-ink);
}
/* 1.5:1 on the cream ground, so the word reads as a tint and "Book your"
carries the line. */
.ct-book__title span { color: var(--headline-hl); }
.ct-book__lead { font-size: .95rem; line-height: 1.7; color: var(--ct-body); max-width: 62ch; }
.ct-contact {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 1.25rem; justify-items: center;
}
.ct-contact li { display: flex; align-items: flex-start; gap: .9rem; min-width: 0; }
.ct-contact__ico {
flex: none; display: grid; place-items: center;
width: 42px; height: 42px; border-radius: 50%;
background: var(--ct-tint); color: var(--ct-mark-text);
}
.ct-contact__ico svg { width: 20px; height: 20px; }
.ct-contact b { font-size: .86rem; font-weight: 700; color: var(--ct-ink); }
.ct-contact p { margin-top: .2rem; font-size: .85rem; color: var(--ct-body); }
.ct-contact a { color: var(--ct-body); }
.ct-contact a:hover { color: var(--ct-mark-text); }
/* --- Form card ----------------------------------------------------------- */
.ct-card {
min-width: 0;
background: #fff; border: 1px solid var(--ct-line); border-radius: 18px;
padding: clamp(1.15rem, 2vw, 1.6rem);
box-shadow: 0 1px 2px rgba(14, 32, 51, .04), 0 26px 50px -38px rgba(14, 32, 51, .45);
}
.ct-card__title {
font-family: var(--display); font-weight: 500;
font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ct-ink);
margin-bottom: .85rem;
}
/* The shared .form caps at 34rem, which is right for a form in a column but
left ~700px of the card empty once this one went full width. */
.ct-form { max-width: none; }
.ct-form__grid { display: grid; gap: .65rem; }
@media (min-width: 620px) { .ct-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ct-form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-field { min-width: 0; margin-bottom: .65rem; }
.ct-form__grid .ct-field { margin-bottom: 0; }
/* The reference shows the label inside the control as its resting state, so
the real