for document structure, but sits back
visually in the same indigo as the eyebrows. */
.section-subheading.is-label {
font-size: var(--fs-h3);
color: var(--emray-indigo);
}
/* === HERO - FULL VIEWPORT === */
.hero {
min-height: 100svh;
display: flex;
align-items: center;
padding: calc(68px + var(--space-20)) var(--container-pad) var(--space-20);
}
/* Matches .container: the section supplies one gutter, the inner wrapper the
second, so hero content lines up with the body sections below it. */
.hero-inner {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--container-pad);
}
.hero-headline {
font-family: var(--font-sans);
font-weight: var(--weight-extrabold);
/* The lockup is two lines by design (the ), but --fs-display grew to 120px
against a 900px box, so "Technology Enabled." broke again and orphaned
"Enabled." on a third line at every width above ~1150px. The line needs
about 10.5x the font size; capping at 96px against a 1120px box keeps it
whole from 1920px down. */
font-size: clamp(40px, 6.4vw, 96px);
line-height: var(--lh-tight);
letter-spacing: -0.03em;
color: var(--fg-on-dark);
max-width: 1120px;
margin-bottom: var(--space-8);
text-wrap: balance;
}
.hero-body {
font-weight: var(--weight-body);
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
color: rgba(246, 246, 248, 0.7);
max-width: 540px;
margin-bottom: var(--space-10);
}
.hero-cta-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
align-items: center;
}
/* === PAGE HERO (inner pages, shorter) === */
.page-hero {
padding: calc(68px + var(--space-16)) var(--container-pad) var(--space-16);
}
.page-hero-inner {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--container-pad);
}
/* === SECTIONS === */
.section-lg {
padding: var(--space-32) var(--container-pad);
}
/* Why Emray is a credibility strip rather than a full content section, so it
runs at roughly half the vertical rhythm of .section-lg. */
.section-compact {
padding: var(--space-20) var(--container-pad);
}
/* === SERVICE GRID === */
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-12);
}
.service-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-card-light);
position: relative;
overflow: hidden;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(90,83,203,0.12);
}
.service-card-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, var(--emray-lilac), var(--emray-indigo));
margin-bottom: var(--space-6);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(90,83,203,0.25);
}
.service-card-icon.indigo-night {
background: linear-gradient(135deg, var(--emray-indigo), var(--emray-night));
}
.service-card-icon.night-lilac {
background: linear-gradient(135deg, var(--emray-night), var(--emray-lilac));
}
.service-card-title {
font-weight: var(--weight-bold);
font-size: var(--fs-h3);
color: var(--fg);
margin-bottom: var(--space-3);
}
.service-card-body {
font-weight: var(--weight-body);
font-size: var(--fs-body-sm);
line-height: 1.6;
color: var(--fg-muted);
margin-bottom: var(--space-6);
}
.learn-more {
display: inline-block;
padding-block: 8px;
font-weight: var(--weight-medium);
font-size: var(--fs-body-sm);
color: var(--emray-indigo);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--dur-base) var(--ease-out);
}
.learn-more:hover { color: var(--emray-indigo-deep); }
/* === VALUE CARD GLASSMORPHISM === */
.shard-bg.dark .value-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-left: 3px solid var(--emray-lilac);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-card-dark);
transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.shard-bg.dark .value-card:hover {
background: rgba(246,246,248,0.08);
transform: translateY(-2px);
}
/* === CTA BANNER === */
.cta-banner {
padding: var(--space-24) var(--container-pad);
text-align: center;
position: relative;
overflow: hidden;
}
.cta-banner.dot-grid::before {
content: "";
position: absolute;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse, rgba(90,83,203,0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.cta-banner-inner {
max-width: 680px;
margin: 0 auto;
padding-inline: var(--container-pad);
position: relative;
z-index: 1;
}
.cta-banner .section-heading { margin-bottom: var(--space-4); }
/* Body copy only. Without the :not(), this outranks .eyebrow on specificity and
repaints the eyebrow as 20px muted grey — which on the dark banner leaves it
at about 1.6:1 against the background. */
.cta-banner p:not(.eyebrow) { font-weight: var(--weight-body); font-size: var(--fs-body-lg); color: var(--fg-muted); margin-bottom: var(--space-8); }
/* === ABOUT PAGE === */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
max-width: var(--container-max);
margin: var(--space-12) auto 0;
}
.value-card {
border-left: 3px solid var(--emray-indigo);
padding-left: var(--space-6);
}
.value-card h3 {
font-weight: var(--weight-bold);
font-size: var(--fs-h3);
margin-bottom: var(--space-3);
}
.value-card p {
font-weight: var(--weight-body);
font-size: var(--fs-body);
color: var(--fg-muted);
line-height: var(--lh-relaxed);
}
/* --- Professional credentials --- */
.credentials {
max-width: var(--container-max);
margin: var(--space-16) auto 0;
padding-top: var(--space-10);
border-top: 1px solid var(--border);
}
.credentials-heading {
font-weight: var(--weight-semibold);
font-size: var(--fs-eyebrow);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-subtle);
margin-bottom: var(--space-6);
}
.credentials-list {
display: grid;
/* Four short items sit on one row on desktop and reflow on their own as the
column gets narrower, so no extra breakpoint is needed for the tablet range. */
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-6);
list-style: none;
margin: 0;
padding: 0;
}
.credentials-list li {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: var(--space-4);
border-left: 2px solid var(--emray-indigo-24);
}
.credential-name {
font-weight: var(--weight-semibold);
font-size: var(--fs-body);
color: var(--fg);
line-height: 1.4;
}
/* The registered marks are part of the official certification names, so they
stay, but at full size they crowd the line. */
.credential-name sup {
font-size: 0.6em;
vertical-align: super;
line-height: 0;
}
.credential-detail {
font-weight: var(--weight-body);
font-size: var(--fs-body-sm);
color: var(--fg-muted);
line-height: var(--lh-relaxed);
}
/* === SERVICES PAGE === */
.services-list {
max-width: var(--container-max);
margin: 0 auto;
/* No .container inside this page, so the doubled gutter is applied here to
match every other page's body inset. */
padding: var(--space-8) calc(var(--container-pad) * 2) var(--space-20);
}
.service-detail {
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--space-8);
padding: var(--space-16) 0;
border-bottom: 1px solid var(--border);
}
.service-detail:last-child { border-bottom: 0; }
.service-number {
font-family: var(--font-sans);
font-weight: var(--weight-extrabold);
font-size: clamp(56px, 5vw, 80px);
line-height: 1;
/* Own gradient, indigo-leaning: it sits on the light paper background, where the
lilac end of --gradient-primary drops under contrast. Light-background
counterpart to .step-number. Indigo end 5.50:1, light end 3.66:1. */
background: linear-gradient(135deg, var(--emray-indigo) 0%, #7A73DC 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
align-self: flex-start;
padding-top: var(--space-3);
}
.service-detail-content h2 {
font-weight: var(--weight-semibold);
font-size: var(--fs-h2);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-5);
}
.service-detail-content > p {
font-weight: var(--weight-body);
font-size: var(--fs-body-lg);
color: var(--fg-muted);
line-height: var(--lh-relaxed);
max-width: 680px;
margin-bottom: var(--space-8);
}
.service-bullets {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.service-bullets li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-weight: var(--weight-body);
font-size: var(--fs-body);
color: var(--fg-muted);
}
.service-bullets li::before {
content: "";
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--emray-indigo);
margin-top: 8px;
}
/* === CONTACT PAGE === */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: start;
}
/* Grid items default to min-width:auto, so a nowrap button or an unbreakable
URL sets a floor the track cannot shrink below. */
.contact-grid > * { min-width: 0; }
.contact-channels {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.contact-channel {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
font-weight: var(--weight-medium);
font-size: var(--fs-body);
color: var(--fg);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.contact-channel:hover {
box-shadow: var(--shadow-card-light), inset 0 0 0 1px rgba(90,83,203,0.15);
transform: translateX(4px);
background: var(--bg-elevated);
}
.contact-channel img { width: 20px; height: 20px; }
/* === STEP NUMBER (Contact page "What to Expect") === */
.step-number {
font-family: var(--font-sans);
font-weight: var(--weight-extrabold);
font-size: clamp(36px, 3vw, 48px);
line-height: 1;
margin-bottom: var(--space-4);
/* Own gradient, lilac-leaning (rather than --gradient-primary): it sits on the
dark --emray-night section here, so it needs to stay lighter to clear contrast.
Dark end 6.14:1, lilac end 9.03:1. */
background: linear-gradient(135deg, #8B87E4 0%, var(--emray-lilac) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* === FOOTER === */
.site-footer {
background: var(--emray-ink);
color: var(--fg-on-dark);
padding: var(--space-20) var(--container-pad) var(--space-10);
background-image: var(--footer-grid);
background-size: 40px 40px;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
top: -100px;
left: -100px;
width: 500px;
height: 400px;
background: radial-gradient(ellipse, rgba(90,83,203,0.12) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.footer-inner {
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--container-pad);
position: relative;
z-index: 1;
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: var(--space-10);
border-bottom: 1px solid var(--border-on-dark);
gap: var(--space-8);
}
.footer-brand a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer-brand img {
height: 30px;
width: auto;
}
.footer-tagline {
margin-top: var(--space-5);
font-weight: var(--weight-semibold);
font-size: var(--fs-body);
color: var(--emray-lilac);
letter-spacing: var(--tracking-tight);
}
.footer-nav {
display: flex;
gap: var(--space-16);
}
/* Level varies by page so the document outline never skips: h3 where the page
body has h2s, h2 on 404.html whose body has only the h1. Same styling either way. */
.footer-nav-col h2,
.footer-nav-col h3 {
font-weight: var(--weight-semibold);
font-size: var(--fs-body-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: var(--space-5);
color: rgba(246, 246, 248, 0.5);
}
.footer-nav-col li + li { margin-top: var(--space-2); }
.footer-nav-col a {
font-weight: var(--weight-body);
font-size: var(--fs-body-sm);
color: rgba(246, 246, 248, 0.7);
transition: color var(--dur-base) var(--ease-out);
/* 17px of text is an awkward tap. The padding adds height and the reduced
li gap above gives most of it back. */
display: inline-block;
padding-block: 5px;
}
.footer-nav-col a:hover { color: var(--emray-paper); }
.footer-nav-col h2 a,
.footer-nav-col h3 a {
color: inherit;
text-decoration: none;
transition: color var(--dur-base) var(--ease-out);
}
.footer-nav-col h2 a:hover,
.footer-nav-col h3 a:hover { color: var(--emray-paper); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-8);
gap: var(--space-6);
}
.footer-legal {
font-weight: var(--weight-body);
font-size: var(--fs-body-sm);
color: rgba(246, 246, 248, 0.5); /* 4.98:1 on --emray-ink footer */
}
.footer-social {
display: flex;
align-items: center;
gap: var(--space-4);
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-on-dark);
transition: background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.footer-social a:hover {
background: rgba(90,83,203,0.15);
border-color: rgba(90,83,203,0.4);
box-shadow: 0 0 12px rgba(90,83,203,0.2);
}
.footer-social img { width: 16px; height: 16px; filter: invert(1); opacity: 0.7; }
/* === SCROLL ANIMATIONS === */
.fade-up {
opacity: 0;
transform: translateY(16px);
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
/* let long emails / URLs wrap instead of overflowing the channel cards */
.contact-channel > div { min-width: 0; overflow-wrap: anywhere; }
/* === RESPONSIVE === */
@media (max-width: 1024px) {
.service-grid { grid-template-columns: repeat(2, 1fr); }
.service-detail { grid-template-columns: 80px 1fr; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.nav-hamburger { display: flex; }
/* Same constraint on phones: 9vw with a 40px floor broke the second line on
every common handset width. 8vw with a 28px floor keeps it whole down to
360px. */
.hero-headline { font-size: clamp(24px, 7.5vw, 72px); }
.orb-1 { width: 200px; height: 200px; opacity: 0.12; }
.orb-2 { width: 160px; height: 160px; opacity: 0.10; }
.service-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr; gap: var(--space-8); }
.credentials { margin-top: var(--space-12); padding-top: var(--space-8); }
.credentials-list { gap: var(--space-5); }
.contact-grid { grid-template-columns: 1fr; }
.steps-grid { grid-template-columns: 1fr; }
.footer-top { flex-direction: column; }
.footer-nav { flex-direction: column; gap: var(--space-8); }
.footer-bottom { flex-direction: column; text-align: center; }
.service-detail { grid-template-columns: 1fr; }
.service-number { font-size: 40px; }
.service-bullets { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.eyebrow { font-size: 11px; }
.hero-cta-group { flex-direction: column; align-items: flex-start; }
.hero-cta-group .btn { width: 100%; justify-content: center; }
}
/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.orb { animation: none; }
.shard-bg.dark::before { transition: none; }
/* Disable the entry transition, but force the end state so content isn't left
invisible for users who never see the transition play out. */
.fade-up {
transition: none;
opacity: 1;
transform: none;
}
}
/* =========================================================
HOMEPAGE COMPONENTS (v2 content brief)
========================================================= */
/* --- Hero lead line (subheading between headline and body) --- */
.hero-lead {
font-weight: var(--weight-medium);
font-size: clamp(20px, 2.2vw, 26px);
line-height: var(--lh-snug);
color: var(--emray-lilac-soft);
max-width: 640px;
margin-bottom: var(--space-6);
letter-spacing: var(--tracking-tight);
}
/* --- Generic section header block (eyebrow + heading + intro) --- */
.section-head { max-width: 720px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* privacy.html puts body copy directly after a section head; grids elsewhere
supply their own top margin, so scope this to the paragraph case only. */
.section-head + p {
margin-top: var(--space-5);
}
.section-intro {
font-weight: var(--weight-body);
font-size: var(--fs-body-lg);
color: var(--fg-muted);
line-height: var(--lh-relaxed);
margin-top: var(--space-4);
}
.shard-bg.dark .section-intro { color: rgba(246, 246, 248, 0.6); }
/* --- Client logo band (Organisations We've Supported) --- */
/* A single scroll container three logos deep: the whole block travels as one
piece, so scrolling or dragging anywhere moves all three rows together.
main.js handles the seamless wrap and resumes the drift once the user
goes idle. */
.logo-band {
margin: var(--space-12) auto 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
cursor: grab;
/* Fade the logos out at both edges instead of cutting them off hard. */
-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.logo-band::-webkit-scrollbar { display: none; }
.logo-band.is-dragging { cursor: grabbing; }
.logo-band.is-dragging .logo-item { pointer-events: none; }
/* Three independent rows. main.js deals the logos out by width and sets each
row's column-gap so all three repeat over exactly the same length — nothing
here assumes a shared column grid, which is what stops the logos lining up
into rigid columns. */
.logo-track {
display: flex;
flex-direction: column;
/* Must not stretch: main.js measures each logo's natural width in here
before dealing them into rows, and stretched children all measure the
same. */
align-items: flex-start;
row-gap: var(--space-8);
width: max-content;
padding: var(--space-2) 0;
}
.logo-row {
display: flex;
align-items: center;
width: max-content;
}
.logo-row > * { flex: none; }
.logo-item {
height: 54px;
width: auto;
max-width: 200px;
object-fit: contain;
transition: transform var(--dur-base) var(--ease-out);
-webkit-user-drag: none;
user-select: none;
}
.logo-item:hover { transform: translateY(-2px); }
/* Leams and the three schools it runs, side by side in one ordinary cell —
staying on a single row keeps every logo in the band at the same scale. */
.logo-group {
display: flex;
align-items: center;
gap: clamp(14px, 1.4vw, 20px);
user-select: none;
}
.logo-group img {
width: auto;
object-fit: contain;
-webkit-user-drag: none;
}
/* Deliberately smaller than the crests: the parent mark labels the group, the
schools are the substance. */
.logo-group-parent { height: 28px; }
.logo-group-schools {
display: flex;
align-items: center;
gap: clamp(12px, 1.2vw, 18px);
/* Hairline tying the schools back to the parent mark beside them. */
padding-left: clamp(14px, 1.4vw, 20px);
border-left: 1px solid var(--border);
}
.logo-group-crest { height: 48px; }
/* Square school crests read as visually smaller than wordmarks at equal height. */
.logo-item-crest { height: 68px; }
/* The opposite problem: logos that are one big word edge to edge, with no mark
and no descender, optically outweigh everything else at the shared height. */
.logo-item-compact { height: 42px; max-width: 168px; }
/* A mark with fine internal detail loses it at the shared height and reads as
a smudge, so it gets a little more room. */
.logo-item-lg { height: 72px; max-width: 250px; }
/* Stand-in for clients whose artwork we don't hold yet; set as type so it sits
comfortably beside the real marks. Swap for an as files arrive. */
.logo-wordmark {
display: inline-flex;
align-items: center;
height: 54px;
/* Wrapped rather than nowrap: a long name like "Belhoul Investment Group"
would otherwise stretch its whole grid column and leave the two logos
above and below it stranded in white space. */
max-width: 190px;
text-align: center;
line-height: 1.25;
font-size: 19px;
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tight);
color: var(--fg-muted);
}
@media (max-width: 900px) {
.logo-item, .logo-wordmark { height: 40px; }
.logo-item-crest { height: 52px; }
.logo-item-lg { height: 54px; max-width: 200px; }
.logo-wordmark { font-size: 16px; }
.logo-track { row-gap: var(--space-6); }
.logo-group { gap: 12px; }
.logo-group-parent { height: 22px; }
.logo-group-schools { padding-left: 12px; gap: 10px; }
.logo-group-crest { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
/* No automatic drift — the band stays hand-scrollable. */
.logo-item { transition: none; }
}
/* --- Business Challenges --- */
.challenge-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
max-width: 900px;
margin: var(--space-12) auto 0;
}
.challenge-item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-6);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
font-weight: var(--weight-medium);
font-size: var(--fs-body-lg);
color: var(--fg);
box-shadow: var(--shadow-xs);
}
.challenge-item .challenge-mark {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
background: var(--emray-indigo-12);
color: var(--emray-indigo);
}
/* --- Why Emray (compact credibility strip) --- */
/* Each sentence is a block, so the heading is three lines at every viewport.
Sized down from --fs-h1 because three stacked lines at the full heading size
would undo the compact strip this section is meant to be. */
.heading-line { display: block; }
.why-heading {
font-size: clamp(22px, 2vw, 30px);
}
.why-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
max-width: var(--container-max);
margin: var(--space-8) auto 0;
}
/* A rule rather than a card: the divider keeps the four points legible as one
horizontal band without the vertical bulk of the old glass cards. */
.why-item {
padding-top: var(--space-5);
border-top: 2px solid rgba(167, 171, 248, 0.45);
}
.why-item h3 {
font-weight: var(--weight-bold);
font-size: var(--fs-body);
color: var(--fg-on-dark);
margin-bottom: var(--space-2);
line-height: 1.35;
}
.why-item p {
font-weight: var(--weight-body);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
color: rgba(246, 246, 248, 0.72);
}
/* --- Approach flow (merged into the independence section) --- */
.approach-flow {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-3);
list-style: none;
max-width: var(--container-max);
margin: var(--space-16) auto 0;
padding: 0;
}
.approach-node {
position: relative;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-pill);
font-weight: var(--weight-semibold);
font-size: var(--fs-body-sm);
color: var(--fg-on-dark);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
white-space: nowrap;
}
.approach-node.is-final {
background: var(--gradient-cta);
border-color: transparent;
box-shadow: var(--shadow-glow-primary);
}
/* Chevron between steps. Drawn on the list item rather than as markup so the
arrows stay out of the accessibility tree and out of the reading order.
Absolutely positioned into the gap: as an inline-block it rendered inside the
pill, so every step read "> Processes" instead of the arrow sitting between
the two pills. */
.approach-node + .approach-node::before {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-top: 2px solid var(--emray-lilac);
border-right: 2px solid var(--emray-lilac);
opacity: 0.75;
left: calc(-1 * var(--space-3) / 2);
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
/* --- Meet the founder --- */
.founder {
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--space-16);
align-items: center;
max-width: var(--container-max);
margin: 0 auto;
}
.founder-photo {
aspect-ratio: 4 / 5;
border-radius: var(--radius-2xl);
background:
radial-gradient(ellipse 80% 60% at 30% 20%, rgba(167, 171, 248, 0.5), transparent 70%),
var(--gradient-hero);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.founder-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.founder-body .eyebrow { margin-bottom: var(--space-4); }
.founder-body h2 { margin-bottom: var(--space-3); }
.founder-role {
font-weight: var(--weight-semibold);
font-size: var(--fs-body);
color: var(--emray-indigo);
margin-bottom: var(--space-6);
}
.founder-body p {
font-weight: var(--weight-body);
font-size: var(--fs-body-lg);
color: var(--fg-muted);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-8);
max-width: 620px;
}
/* --- Homepage component responsive --- */
@media (max-width: 1024px) {
.why-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-8); }
}
@media (max-width: 768px) {
.challenge-grid { grid-template-columns: 1fr; }
.founder { grid-template-columns: 1fr; gap: var(--space-10); }
.founder-photo { max-width: 260px; margin: 0 auto; }
}
/* =========================================================
INQUIRY PAGE (form served by the static site)
========================================================= */
/* Solid nav — the inquiry form top is part-dark/part-light, so the
translucent dark nav needs an opaque backing here. */
.site-nav.dark-nav.nav-solid {
background: var(--emray-night);
border-bottom: 1px solid var(--border-on-dark);
}
/* Sidebar and form stack vertically at every width. --inquiry-measure keeps
both bands' content on the same centred column so the stack reads as one
page rather than two full-bleed slabs. */
/* The page used to start below the fixed nav (margin-top: 68px), which left the
strip behind the nav showing the light body background. That is why the nav
was pinned solid here while every other page lets its hero show through a
transparent nav. Instead the sidebar now runs up under the nav and pads its
content clear, so the gradient is continuous behind the header and the nav
behaves the same as everywhere else: transparent at rest, blurred on scroll. */
.inquiry-page {
--inquiry-measure: 720px;
display: block;
min-height: 100vh;
}
/* Sidebar.
This used to carry its own two glows at 0.3 and 0.15 opacity, pushed into the
corners. Against the hero's four-layer stack it read as flat, which was very
visible behind the transparent nav: gradient on every other page, near-solid
here. It now takes the shared .shard-bg.dark treatment from the markup, so
the header area matches the rest of the site and there is one glow to
maintain rather than two. */
.inquiry-sidebar {
padding: calc(68px + var(--space-12)) var(--container-pad) var(--space-12);
color: rgba(246, 246, 248, 0.9);
}
.sidebar-content {
position: relative;
z-index: 1;
max-width: var(--inquiry-measure);
margin: 0 auto;
}
.sidebar-eyebrow {
font-weight: var(--weight-bold);
font-size: 11px;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--emray-lilac);
margin-bottom: var(--space-4);
}
.inquiry-sidebar h1 {
font-weight: var(--weight-bold);
font-size: clamp(24px, 2.5vw, 32px);
line-height: var(--lh-snug);
margin-bottom: var(--space-5);
color: rgba(246, 246, 248, 0.95);
}
.inquiry-sidebar > .sidebar-content > p {
font-weight: var(--weight-body);
font-size: var(--fs-body-sm);
line-height: 1.7;
color: rgba(246, 246, 248, 0.6);
margin-bottom: var(--space-8);
/* The sidebar column is wide enough that this 14px paragraph ran past 100
characters a line on a large screen. The heading above it can keep the
full width; the running text should not. */
max-width: 46ch;
}
/* Form panel */
.form-panel { padding: var(--space-12) var(--container-pad); background: var(--emray-paper); }
.form-panel > * { max-width: var(--inquiry-measure); margin-left: auto; margin-right: auto; }
.form-panel h2 { font-weight: var(--weight-semibold); font-size: var(--fs-h3); margin-bottom: var(--space-6); }
.form-panel > p { font-weight: var(--weight-body); font-size: var(--fs-body-sm); color: var(--fg-muted); margin-bottom: var(--space-10); }
.inquiry-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.inquiry-form label { font-weight: var(--weight-semibold); font-size: 13px; color: var(--emray-ink); }
/* Required-ness is carried by the `required` attribute (which assistive tech
announces on its own). The asterisk and message are purely a visual nudge
after a rule is actually broken, so they stay hidden until then. */
.inquiry-form label .req {
display: none;
color: var(--emray-indigo-deep);
margin-left: 2px;
}
.field.is-invalid label .req { display: inline; }
.field-error {
display: none;
font-size: 12px;
font-weight: var(--weight-medium);
color: var(--emray-indigo-deep);
}
.field.is-invalid .field-error { display: block; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
border-color: var(--emray-indigo);
box-shadow: 0 0 0 3px var(--emray-indigo-12);
}
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
font-family: inherit;
/* Must stay at 16px or larger: iOS Safari zooms the page on focus below that. */
font-size: 16px;
font-weight: var(--weight-body);
padding: 12px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--border-strong);
background: #fff;
color: var(--emray-ink);
outline: none;
transition: border-color 200ms, box-shadow 200ms;
width: 100%;
}
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: var(--fg-subtle); }
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
border-color: var(--emray-indigo);
box-shadow: 0 0 0 3px var(--emray-indigo-24);
}
.inquiry-form select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2356565E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
}
.inquiry-form textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.submit-btn {
font-family: inherit;
font-weight: var(--weight-medium);
font-size: var(--fs-body);
background: var(--emray-indigo);
color: var(--emray-paper);
border: 0;
border-radius: var(--radius-pill);
padding: 15px 32px;
cursor: pointer;
width: 100%;
transition: background 200ms, box-shadow 200ms, transform 80ms;
margin-top: 4px;
}
.submit-btn:hover { background: var(--emray-indigo-deep); box-shadow: var(--shadow-indigo); }
.submit-btn:active { transform: scale(0.98); }
.form-note {
/* 12px was below comfortable reading size on a phone, and it also squeezed the
inline Privacy Policy link to a 15px-tall target. 13px keeps it clearly
subordinate to the form labels while staying legible unzoomed. */
font-size: 13px;
line-height: 1.55;
font-weight: var(--weight-body);
color: var(--fg-muted);
text-align: center;
max-width: 52ch;
margin-inline: auto;
}
/* Spam honeypot: off-screen rather than display:none, so naive bots still fill it. */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
@media (max-width: 900px) {
.inquiry-sidebar { padding: calc(68px + var(--space-10)) var(--space-6) var(--space-10); }
.inquiry-sidebar::before, .inquiry-sidebar::after { display: none; }
.form-panel { padding: var(--space-10) var(--space-6); }
.form-row { grid-template-columns: 1fr; }
}
/* =========================================================
HOMEPAGE COMPONENTS (v3 content brief)
========================================================= */
/* --- Hero secondary line (sits under .hero-body) --- */
/* Same left-aligned measure as .hero-body, a step down in size and one more
step back in contrast so the two lines read as lead then detail. */
.hero-sub {
font-weight: var(--weight-body);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: rgba(246, 246, 248, 0.6);
max-width: 640px;
/* .hero-body carries the space down to the CTA group, so this line only needs
to close the gap back up to it. */
margin-top: calc(var(--space-6) - var(--space-10));
margin-bottom: var(--space-10);
}
/* --- Lead paragraph under a section heading --- */
.section-lead {
font-weight: var(--weight-body);
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
color: var(--fg-muted);
max-width: 680px;
margin-top: var(--space-4);
}
.section-head.center .section-lead { margin-left: auto; margin-right: auto; }
.section-lead-on-dark { color: rgba(246, 246, 248, 0.65); }
/* --- Problem / outcome card grid (shared by both 6-up sections) --- */
.problem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
max-width: var(--container-max);
margin: var(--space-12) auto 0;
}
.problem-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.problem-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(90, 83, 203, 0.12);
}
/* Same indigo icon chip as the old .challenge-mark. */
.problem-mark {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
margin-bottom: var(--space-5);
border-radius: var(--radius-md);
background: var(--emray-indigo-12);
color: var(--emray-indigo);
}
.problem-card h3 {
font-weight: var(--weight-semibold);
font-size: var(--fs-h3);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
color: var(--fg);
margin-bottom: var(--space-3);
}
.problem-card p {
font-weight: var(--weight-body);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--fg-muted);
}
/* Card and tile headings are short enough that an unbalanced wrap strands a
single word on the last line ("Too much manual / work"). Balancing them
evens the lines out without touching font size or box width. */
.problem-card h3,
.service-card-title,
.value-card h3,
.why-item h3,
.service-detail-content h2,
.footer-nav-col h3,
.credentials-heading { text-wrap: balance; }
/* --- Emphasised closing statement under a section --- */
.statement {
font-weight: var(--weight-bold);
/* Each sentence is its own line now, so the type has to be sized to the
longest one ("Technology is only part of the solution.", which measures
19.5x its font size) or that line wraps and the effect is lost. A 22px
floor overflowed between 481 and ~525px; 19px clears every width. */
font-size: clamp(19px, 2vw, 32px);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
text-align: center;
text-wrap: balance;
max-width: 760px;
margin: var(--space-12) auto 0;
}
/* Same clip-the-gradient-to-the-glyphs technique as .gradient-text. */
.statement-accent {
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* The accent is always the second sentence, and it always starts its own line
at every viewport. width:fit-content rather than a plain block so the
gradient box still hugs the text -- a full-width box would sample the
gradient across the whole container and wash the colours out. */
display: block;
width: fit-content;
max-width: 100%;
}
/* .statement is centred, so the shrink-to-fit accent needs auto margins to stay
centred with it. .independence-close is left-aligned and keeps margin 0. */
.statement .statement-accent { margin-inline: auto; }
.statement-on-dark { color: var(--fg-on-dark); }
/* --- Independence section (dark, two columns) ---
Heading and closing line hold the left column, the argument runs down the
right. Left aligned rather than centred: the body copy here is long enough
that a centred ragged edge slows it down, and the sections either side of it
are already centred. */
.independence {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(var(--space-10), 6vw, var(--space-24));
align-items: start;
}
.independence-sub {
/* Reads as the second half of the heading, so it is sized against --fs-h2 and
tinted lilac rather than left at body contrast. */
font-weight: var(--weight-semibold);
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
color: var(--emray-lilac);
margin-top: var(--space-4);
}
/* The closing line sits under the heading, not under the argument, so the left
column opens and closes the section and the right column stays pure prose.
The rule gives it separation without another block of space. */
.independence-close {
font-weight: var(--weight-bold);
font-size: clamp(20px, 1.6vw, 26px);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
color: var(--fg-on-dark);
margin-top: var(--space-10);
padding-top: var(--space-10);
border-top: 1px solid var(--border-on-dark);
}
.independence-body p {
font-weight: var(--weight-body);
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
color: rgba(246, 246, 248, 0.65);
}
.independence-body p + p { margin-top: var(--space-6); }
@media (max-width: 900px) {
.independence { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
/* Stacked, the rule would read as a divider between the two columns rather
than as part of the closing line, so it comes off. */
.independence-close {
margin-top: var(--space-8);
padding-top: 0;
border-top: 0;
}
}
/* --- Service card capability pills --- */
.service-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
list-style: none;
margin: 0 0 var(--space-4);
}
.service-tags li {
font-weight: var(--weight-medium);
font-size: 13px;
line-height: 1.4;
padding: 4px 12px;
border-radius: var(--radius-pill);
background: var(--emray-indigo-12);
color: var(--emray-indigo-deep);
}
/* --- Founder closing line --- */
/* .founder-body p already carries space-8 below, so this only adds a small extra
beat before the closing line. */
.founder-philosophy { margin-top: var(--space-2); }
.founder-philosophy strong {
font-weight: var(--weight-semibold);
color: var(--fg);
}
/* --- CTA banner footnote --- */
/* Matches the specificity of `.cta-banner p:not(.eyebrow)` and comes later, so
the footnote keeps its own smaller, dimmer treatment. */
.cta-banner p.cta-note {
font-size: var(--fs-body-sm);
color: rgba(246, 246, 248, 0.5);
/* Ran to ~97 characters a line on a wide screen. */
max-width: 62ch;
margin: var(--space-4) auto 0;
}
/* The banner's body paragraphs each carry space-8 below by default, which is far
too much between two consecutive lines of the same block of copy. */
.cta-banner-inner > p:not(.eyebrow):not(.cta-note) { margin-bottom: var(--space-5); }
.cta-banner-inner > p:not(.eyebrow):not(.cta-note) + .hero-cta-group { margin-top: var(--space-8); }
@media (max-width: 1024px) {
.problem-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
MOBILE DENSITY
A phone reader will not scroll as far as a desktop reader, so the homepage
has to reach the important sections sooner. Measured on a 390px viewport the
page was 15,988px, about 19 phone screens, against 6.5 screens on a desktop.
Most of that came from 128px of padding on the top and bottom of every
section, a hero pinned to the full viewport height, and cards whose boxes
were far larger than the text inside them.
Two columns of tiles were tried on phones and reverted: at 390px each column
leaves only 108px for text, so the paragraphs ran to six ragged lines and the
tiles ended up taller than they were at full width. The height comes from
tightening each tile, not from splitting the column.
Nothing below changes the desktop layout or removes any content.
========================================================================== */
@media (max-width: 1024px) {
/* Tablets have the width for two columns; phones are handled below. */
.problem-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
/* 128px top and bottom across eleven sections was 2,816px of empty space,
more than three phone screens spent on padding alone. */
.section-lg { padding: var(--space-16) var(--container-pad); }
.cta-banner { padding-block: var(--space-16); }
.problem-grid,
.why-strip,
.service-grid,
.challenge-grid { margin-top: var(--space-8); }
/* Tiles: the box tightens, the measure stays readable. */
.problem-grid { gap: var(--space-3); }
.problem-card { padding: var(--space-5); border-radius: var(--radius-lg); }
.problem-mark {
width: 32px;
height: 32px;
margin-bottom: var(--space-3);
border-radius: var(--radius-sm);
}
.problem-mark svg { width: 17px; height: 17px; }
.problem-card h3 { font-size: 16px; margin-bottom: var(--space-2); }
.problem-card p { font-size: 14px; line-height: 1.5; }
.why-strip { gap: var(--space-5) var(--space-6); }
.why-item { padding-top: var(--space-4); }
.why-item h3 { font-size: 15px; }
.why-item p { font-size: 14px; line-height: 1.5; }
/* Five pills of uneven width wrapped 3/1/1 on a phone, which reads as three
ragged rows rather than one sequence. Stacked, it reads top to bottom as
the ordered list it actually is, and the chevron turns to match. */
.approach-flow {
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
gap: var(--space-6);
margin-top: var(--space-10);
}
.approach-node {
width: 100%;
max-width: 260px;
padding: var(--space-3) var(--space-4);
font-size: 14px;
text-align: center;
white-space: normal;
}
.approach-node + .approach-node::before {
left: 50%;
top: calc(-1 * var(--space-6) / 2);
transform: translate(-50%, -50%) rotate(135deg);
}
/* The longest section on the page. The capability pills were 187px of a
608px card, so they shrink hardest; the body copy is left alone. */
.service-card { padding: var(--space-6); }
.service-card-icon { width: 44px; height: 44px; margin-bottom: var(--space-4); }
.service-card-title { font-size: 19px; }
/* The pill treatment is kept on phones, just tightened. It used to collapse
into a running middot list to save height when there were six labels; with
four the pills fit comfortably and each label stays its own object. */
.service-tags {
gap: 6px;
margin-bottom: var(--space-5);
}
.service-tags li {
font-size: 12px;
line-height: 1.35;
padding: 4px 10px;
}
.learn-more { padding-block: 6px; }
/* A hero pinned to 100svh cost a whole screen before a word of the argument.
It still leads the first view, but the next section now shows at the bottom
edge, which tells the reader there is more below. */
.hero {
min-height: 68svh;
padding: calc(68px + var(--space-10)) var(--container-pad) var(--space-12);
}
.hero-body {
font-size: 17px;
margin-bottom: var(--space-5);
}
.hero-sub { font-size: 14px; }
/* Sized to the longest sentence in each block, so one sentence really does
occupy one line. The multiplier is the measured width of that sentence per
pixel of font size: 19.5x here, 13.2x for .why-heading, 14x for
.independence-close. */
.statement { margin-top: var(--space-8); font-size: clamp(13px, 3.75vw, 19px); }
.section-head { margin-bottom: 0; }
/* --fs-h1 bottoms out at 36px, so every section heading stayed at its desktop
size on a phone. "Independent advice. Practical thinking. Better business
outcomes." ran to five lines, about 205px before a word of the section. */
.section-heading { font-size: clamp(27px, 7.4vw, 36px); }
/* Must come after .section-heading: same specificity, so order decides. */
.why-heading { font-size: clamp(16px, 5.2vw, 22px); }
.independence-close { font-size: clamp(15px, 4.9vw, 20px); }
.section-title { font-size: clamp(32px, 9vw, 44px); }
}
@media (max-width: 640px) {
/* One column below this. Two columns here leaves ~108px for text, which is
roughly fifteen characters a line: the tiles get taller, not smaller. */
.problem-grid { grid-template-columns: 1fr; }
}
/* At one column the icon sat on its own row above the text and the tile was
mostly empty to the right of it. Moving it alongside recovers that row
without touching the measure. Not below 380px, where giving up the icon's
column would cut the text to about 134px. */
@media (min-width: 380px) and (max-width: 640px) {
.problem-card {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
grid-template-areas:
"mark title"
"mark body";
column-gap: var(--space-4);
align-items: start;
}
.problem-mark {
grid-area: mark;
align-self: start;
margin-bottom: 0;
}
.problem-card h3 { grid-area: title; }
.problem-card p { grid-area: body; }
}
@media (max-width: 480px) {
.section-lg { padding: var(--space-12) var(--container-pad); }
.cta-banner { padding-block: var(--space-12); }
.section-compact { padding: var(--space-12) var(--container-pad); }
.why-strip { grid-template-columns: 1fr; }
}
/* On a 320px viewport the section's padding plus the container's padding leaves
224px of content, but "Schedule a Discovery Call" measures 283px and .btn is
nowrap, so it pushed the contact page into horizontal scroll. Below 380px the
label is allowed to wrap; the button stays full-width and easily tappable. */
@media (max-width: 380px) {
.btn { white-space: normal; text-align: center; }
/* At 320px the inset group leaves 192px of label space and "Schedule a
Discovery Call" needs 219px at 17px, so it wrapped to two lines and the
pill grew to 86px. Trimming the type and the side padding keeps it on one
line at a normal button height. */
.btn-lg { font-size: 15px; padding: 14px 20px; }
}
/* Sections and .container each apply --container-pad, so a 320px phone spent
96px (30% of the screen) on gutters. That left 224px, too narrow for
"Technology is only part of the solution." to hold its own line at a legible
size. 16px gutters are still comfortable at this width and buy back 64px. */
@media (max-width: 480px) {
:root { --container-pad: 16px; }
}
/* Body copy, site-wide: text-wrap:pretty stops the last line of a paragraph
being a single stranded word ("...easier to scale." / "...the full picture."
/ "...not just recommendations on paper."). It only changes where lines
break, never the wording or the type size. balance is wrong here -- that is
for short headings and gives up past a few lines. */
p,
li {
text-wrap: pretty;
}
/* ==========================================================================
MOBILE TYPE SCALE
Sizes had drifted apart: body copy rendered at 14px inside the cards but 20px
in the independence, leadership and CTA blocks, and .statement came out at
14.6px -- smaller than the body text either side of it -- because it had been
sized purely to keep its long sentence on one line. Section headings sat at
28.9px, which made "Not sure what needs to change?" the loudest thing on the
page after the hero.
One scale, applied last so it wins over the per-component rules above:
31px hero headline (unchanged; it is the hero)
24px section heading
20px section sub-line, logo-band label
18px emphasis statement
17px hero lead, service card title
16px card and tile heading
15px body copy
14px small print, flow nodes
11px eyebrow (unchanged)
Two blocks stay fluid rather than flat, because their sentences must each
hold one line and the strings are fixed: .why-heading needs 13.2x its font
size, .statement 19.5x. Both reach the scale value once the viewport is wide
enough and step down below that instead of wrapping.
========================================================================== */
@media (max-width: 768px) {
.section-heading { font-size: clamp(20px, 6.1vw, 24px); }
.independence-sub { font-size: 20px; }
.section-subheading.is-label { font-size: 20px; }
.why-heading { font-size: clamp(18px, 6vw, 24px); }
.statement { font-size: clamp(13px, 4vw, 18px); }
.independence-close { font-size: 18px; }
.service-card-title { font-size: 17px; }
.hero-body { font-size: 17px; }
.problem-card h3,
.why-item h3 { font-size: 16px; }
.hero-sub,
.problem-card p,
.why-item p,
.service-card-body,
.independence-body p,
.founder-body p,
.founder-role,
.cta-banner p:not(.eyebrow):not(.cta-note) { font-size: 15px; line-height: 1.55; }
}
/* Full-width CTA buttons sat hard against the 16px section gutter, so on a
phone they ran almost edge to edge. The narrow gutter is there to give the
long one-line sentences room; the buttons do not need it, so the stacked
groups get their own inset and the pills breathe at the screen edge. */
/* ==========================================================================
INSIGHTS (WordPress-only components)
The static site has no blog, so these are the one set of styles with no
counterpart there. They are built from the same tokens as everything else
-- same measure, same muted greys, same indigo link treatment -- so a post
reads as part of the site rather than as a bolted-on blog.
========================================================================== */
.post-list { display: grid; gap: var(--space-6); max-width: 780px; margin: 0 auto; }
.post-card {
padding: var(--space-8);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.post-card:hover { box-shadow: var(--shadow-card-light); transform: translateY(-2px); }
.post-meta {
font-weight: var(--weight-semibold);
font-size: var(--fs-eyebrow);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-subtle);
margin-bottom: var(--space-3);
}
.post-card-title {
font-weight: var(--weight-semibold);
font-size: var(--fs-h3);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
margin-bottom: var(--space-3);
}
.post-card-title a { color: var(--fg); text-decoration: none; }
.post-card-title a:hover { color: var(--emray-indigo-deep); }
.post-card-excerpt {
font-weight: var(--weight-body);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--fg-muted);
margin-bottom: var(--space-5);
}
/* Post body: the one place on the site with long-form prose, so it gets a
narrower measure than the marketing pages and a little more leading. */
.post-body { font-weight: var(--weight-body); font-size: var(--fs-body-lg); line-height: 1.75; color: var(--fg-muted); }
.post-body > * + * { margin-top: var(--space-6); }
.post-body h2 {
font-weight: var(--weight-semibold);
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
color: var(--fg);
margin-top: var(--space-12);
}
.post-body h3 { font-weight: var(--weight-bold); font-size: var(--fs-h3); color: var(--fg); margin-top: var(--space-10); }
.post-body a { color: var(--emray-indigo-deep); }
.post-body ul, .post-body ol { padding-left: var(--space-6); }
.post-body li + li { margin-top: var(--space-2); }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.post-body blockquote {
border-left: 3px solid var(--emray-indigo);
padding-left: var(--space-6);
font-weight: var(--weight-semibold);
color: var(--fg);
}
.post-body code {
font-size: 0.9em;
padding: 2px 6px;
border-radius: var(--radius-sm);
background: var(--emray-indigo-12);
color: var(--emray-indigo-deep);
}
.post-pagination { margin-top: var(--space-12); text-align: center; }
.post-pagination .page-numbers {
display: inline-block;
padding: 8px 14px;
margin: 0 2px;
border-radius: var(--radius-sm);
font-weight: var(--weight-semibold);
font-size: var(--fs-body-sm);
color: var(--fg-muted);
text-decoration: none;
}
.post-pagination .page-numbers:hover { background: var(--emray-indigo-12); color: var(--emray-indigo-deep); }
.post-pagination .page-numbers.current { background: var(--emray-indigo); color: var(--emray-paper); }
.post-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 768px) {
.post-card { padding: var(--space-6); }
.post-card-title { font-size: 18px; }
.post-card-excerpt { font-size: 15px; }
.post-body { font-size: 16px; line-height: 1.7; }
}
/* Validation bounce message on the inquiry page. Uses the same indigo-tinted
surface as the capability pills so it reads as part of the form, not as a
browser-style alert. */
.form-error {
margin-bottom: var(--space-6);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
border-left: 3px solid var(--emray-indigo);
background: var(--emray-indigo-12);
color: var(--emray-indigo-deep);
font-weight: var(--weight-semibold);
font-size: var(--fs-body-sm);
line-height: var(--lh-relaxed);
max-width: var(--inquiry-measure);
margin-inline: auto;
}