/* =============================================================================
HALO — the friendly concept.
Cream paper, soft coral and a deep teal. Everything is rounded, nothing is
sharp, and the motion has a little bounce in it. Aimed at an owner-run
business rather than a procurement department: the tone should feel like a
good colleague, not a platform.
============================================================================= */
:root{
--cream:#FFFBF5;
--cream-2:#FFF3E6;
--ink:#16232B;
--coral:#FF6B4A;
--coral-soft:#FFE3DA;
--teal:#0E9B8E;
--teal-soft:#D8F2EF;
--lilac:#EFE9FF;
--muted:#5F7078;
--disp:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
--sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--gut:clamp(1.25rem,5vw,5rem);
--pop:cubic-bezier(.34,1.56,.64,1);
--ease:cubic-bezier(.22,.61,.36,1);
--r:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--cream); color:var(--ink);
font:400 clamp(1rem,.95rem + .3vw,1.125rem)/1.7 var(--sans);
overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--coral)}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ── reveal, with a bit of spring ─────────────────────────────────────── */
[data-rv]{opacity:0;transform:translateY(26px) scale(.985);
transition:opacity .7s var(--ease), transform .7s var(--pop)}
[data-rv].rv-in{opacity:1;transform:none}
.ln{display:block}
.wd{display:inline-block;opacity:0;transform:translateY(.55em) rotate(-2deg);
transition:opacity .6s var(--ease), transform .6s var(--pop);
transition-delay:calc(var(--i) * 60ms)}
.rv-in .wd{opacity:1;transform:none}
/* ── decorative floating shapes ───────────────────────────────────────── */
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none;z-index:0}
.blob--a{width:340px;height:340px;background:var(--coral-soft);top:-60px;right:-40px;animation:float 14s ease-in-out infinite}
.blob--b{width:280px;height:280px;background:var(--teal-soft);bottom:-80px;left:-60px;animation:float 18s ease-in-out infinite reverse}
.blob--c{width:220px;height:220px;background:var(--lilac);top:38%;left:44%;animation:float 22s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,-22px) scale(1.06)}66%{transform:translate(-20px,18px) scale(.96)}}
/* ── type ────────────────────────────────────────────────────────────── */
.eyebrow{
display:inline-block;margin:0 0 1.25rem;padding:.45rem 1rem;
background:var(--coral-soft);color:#C1391B;border-radius:999px;
font:600 .8125rem/1 var(--sans);letter-spacing:.02em;
}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.025em;line-height:1.04;font-weight:600}
h1{margin:0 0 1.25rem;font-size:clamp(2.7rem,6.2vw,5rem)}
h2{margin:0 0 1.25rem;font-size:clamp(2.1rem,4.6vw,3.6rem)}
h3{margin:0 0 .6rem;font-size:clamp(1.2rem,1.5vw,1.45rem);font-weight:600}
h1 em,h2 em{font-style:normal;color:var(--coral)}
p{margin:0 0 1.15rem}
.lede{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--muted);line-height:1.6}
.btn{
display:inline-flex;align-items:center;gap:.6rem;min-height:52px;
padding:.95rem 1.9rem;background:var(--coral);color:#fff;
font:600 1rem/1 var(--sans);border:none;border-radius:999px;cursor:pointer;
box-shadow:0 8px 20px rgba(255,107,74,.28);
transition:transform .3s var(--pop),box-shadow .3s var(--ease),background .3s var(--ease);
}
.btn:hover{color:#fff;transform:translateY(-3px) scale(1.02);box-shadow:0 14px 28px rgba(255,107,74,.36)}
.btn--alt{background:var(--ink);box-shadow:0 8px 20px rgba(22,35,43,.22)}
.btn--alt:hover{box-shadow:0 14px 28px rgba(22,35,43,.3)}
.btn--plain{background:transparent;color:var(--ink);box-shadow:none;border:2px solid rgba(22,35,43,.15)}
.btn--plain:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:.85rem .85rem auto;z-index:50;display:flex;align-items:center;
justify-content:space-between;gap:1rem;padding:.7rem .7rem .7rem 1.4rem;
background:rgba(255,251,245,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(22,35,43,.07);border-radius:999px;
transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.nav.stuck{background:rgba(255,251,245,.95);box-shadow:0 8px 28px rgba(22,35,43,.08)}
.brand{font:600 1.35rem/1 var(--disp);color:var(--ink);letter-spacing:-.03em}
.brand i{font-style:normal;color:var(--coral)}
.nav nav{display:flex;align-items:center;gap:clamp(.6rem,2vw,1.8rem)}
.nav nav a{color:var(--muted);font:500 .9375rem/1 var(--sans)}
.nav nav a:hover{color:var(--ink)}
/* `.nav nav a` (0,2,1) outranks `.btn` (0,1,0) and was repainting the call
to action in the muted nav-link grey — dark slate on coral, which failed
contrast and looked like a disabled button. The CTA is white, always. */
.nav nav a.btn,.nav nav a.btn:hover{color:#fff}
.nav .btn{min-height:44px;padding:.65rem 1.35rem;font-size:.9375rem}
@media (max-width:880px){.nav nav a:not(.btn){display:none}}
/* ── hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(7.5rem,13vw,10rem) var(--gut) clamp(3rem,6vw,5rem);overflow:hidden}
.hero__grid{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:1.1fr .9fr}}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.portrait{position:relative}
/* Six portraits, one still frame.
THE FRAME DOES NOT MOVE. The blob shape and the shadow belong to the
container, which is a fixed size and never animates; the pictures sit
inside it and are clipped to it. Previously the shape was on each and
ran a 16s morph animation, so the outline was permanently writhing, and a
scale on the image changed the silhouette as well. Now only the content
inside the frame changes.
aspect-ratio, because every picture is absolutely positioned: without it
the container has nothing to take its height from and collapses, dropping
the status pills pinned to its corners. */
.portrait__stack{
position:relative;
aspect-ratio:675 / 900;
border-radius:48% 52% 44% 56% / 55% 45% 55% 45%;
overflow:hidden;
box-shadow:0 30px 60px rgba(22,35,43,.13);
/* --bleed keeps the picture a little larger than the frame, so the parallax
drift inside it can never pull an edge into view. */
--bleed:1.09;
}
.portrait__stack img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border-radius:0;box-shadow:none;animation:none;
/* The dissolve. No change of scale beyond a hair, because the frame is
fixed and the point is that the face changes, not the shape.
--s and --b are custom properties, not a bare transform and filter,
because the parallax writes --par on these same elements and a transform
that replaced the translate would cancel it. */
--s:1; --b:10px;
transform:translateY(var(--par,0)) scale(calc(var(--bleed) * var(--s)));
filter:blur(var(--b));
opacity:0;
transition:opacity 1.25s var(--ease), filter 1.25s var(--ease),
transform 1.25s var(--ease);
}
.portrait__stack img.is-on{--s:1; --b:0px; opacity:1}
/* The one going dissolves out through a blur, a touch closer to the lens. */
.portrait__stack img.is-leaving{--s:1.03; --b:12px; opacity:0}
.portrait__stack img.is-on,
.portrait__stack img.is-leaving{will-change:opacity,filter,transform}
@media (prefers-reduced-motion:reduce){
.portrait__stack img{transition:none;--s:1;--b:0px}
.portrait__stack img:not(:first-child){display:none}
.portrait__stack img:first-child{opacity:1}
}
.pill{
position:absolute;padding:.65rem 1.1rem;background:#fff;border-radius:999px;
box-shadow:0 10px 26px rgba(22,35,43,.12);font:600 .875rem/1 var(--sans);
display:flex;align-items:center;gap:.5rem;white-space:nowrap;
}
.pill i{width:.5rem;height:.5rem;border-radius:50%;background:var(--teal);font-style:normal;
animation:beat 2s var(--ease) infinite}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
/* Each box holds a stack of facts and shows one at a time. The pills are
absolutely positioned on top of one another so the swap is a cross-fade
rather than a jump, and the box itself does the floating. */
.pillbox{position:absolute;z-index:2}
.pillbox--1{top:8%;left:-4%;animation:bob 6s ease-in-out infinite}
.pillbox--2{bottom:16%;right:-6%;animation:bob 7.5s ease-in-out infinite reverse}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pillbox .pill{
position:absolute;top:0;opacity:0;transform:translateY(8px) scale(.94);
transition:opacity .55s var(--ease),transform .55s var(--pop);
pointer-events:none;
}
.pillbox--1 .pill{left:0}
.pillbox--2 .pill{right:0}
.pillbox .pill.on{opacity:1;transform:none}
@media (max-width:640px){
.pillbox--1{left:0}
.pillbox--2{right:0}
.pillbox .pill{font-size:.8125rem;padding:.55rem .9rem}
}
@media (prefers-reduced-motion:reduce){.pillbox{animation:none}}
/* ── sections ────────────────────────────────────────────────────────── */
.sec{position:relative;padding:clamp(4rem,8vw,7rem) var(--gut);overflow:hidden}
.sec--tint{background:var(--cream-2)}
.sec__head{margin-bottom:clamp(2.5rem,5vw,3.5rem);position:relative;z-index:1}
.sec__head .lede{max-width:56ch}
.tiles{display:grid;gap:1.15rem;position:relative;z-index:1}
@media (min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{
background:#fff;border-radius:var(--r);padding:clamp(1.6rem,2.6vw,2.1rem);
border:1px solid rgba(22,35,43,.06);
transition:transform .4s var(--pop),box-shadow .4s var(--ease);
}
.tile:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 22px 44px rgba(22,35,43,.1)}
/* ALL the card icons in the brand orange, as on hirefriday.uk.
They used to cycle teal / coral / lilac by position, which made a set of
cards look like three different kinds of thing.
The tinted chip has gone with it, which is deliberate: --coral on
--coral-soft measures 1.6:1 and the glyph would all but disappear. On
hirefriday the icons sit straight on the white card in --coral, so this is
the same treatment rather than an approximation of it. Decorative, so the
contrast floor for meaningful graphics does not apply. */
.tile__ic{
width:auto;height:auto;border-radius:0;display:grid;place-items:center;
margin-bottom:0;background:none;color:var(--coral);
}
.tile__ic svg{width:26px;height:26px;stroke-width:1.7}
.tile p{margin:0;color:var(--muted);font-size:.9375rem}
/* ── the little conversation ─────────────────────────────────────────── */
.convo{
/* Kept deliberately narrower than the page container — about two thirds of it.
A chat transcript stretched to full width puts the two sides so far apart
that it stops reading as a conversation. */
max-width:820px;margin-inline:auto;background:#fff;border-radius:var(--r);
border:1px solid rgba(22,35,43,.07);box-shadow:0 24px 50px rgba(22,35,43,.1);
overflow:hidden;position:relative;z-index:1;
}
.convo__top{display:flex;align-items:center;gap:.6rem;padding:1rem 1.25rem;
border-bottom:1px solid rgba(22,35,43,.06);font:600 .8125rem/1 var(--sans);color:var(--muted)}
.convo__top i{width:.5rem;height:.5rem;border-radius:50%;background:var(--teal);font-style:normal;
animation:beat 2s var(--ease) infinite}
.convo__body{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;min-height:clamp(320px,42vh,400px);justify-content:flex-end}
/* Each bubble is driven by scroll position, not a timer — so scrolling back up
takes them away again in the order they arrived. No delays here on purpose:
a transition-delay would fight the scrub on the way back. */
.bub{
max-width:80%;padding:.8rem 1.1rem;border-radius:20px;font-size:.9375rem;line-height:1.55;
opacity:0;transform:translateY(14px) scale(.95);
transition:opacity .4s var(--ease),transform .45s var(--pop);
}
.bub.on{opacity:1;transform:none}
.bub--them{align-self:flex-start;background:var(--cream-2);color:var(--ink);border-bottom-left-radius:6px}
.bub--her{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:6px}
/* ── steps ───────────────────────────────────────────────────────────── */
.steps{display:grid;gap:1.15rem;counter-reset:s;position:relative;z-index:1}
@media (min-width:880px){.steps{grid-template-columns:repeat(3,1fr)}}
/* Number and title share a line, the copy sits under both. */
.step{background:#fff;border-radius:var(--r);padding:clamp(1.7rem,3vw,2.3rem);
border:1px solid rgba(22,35,43,.06);position:relative;
display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .9rem;align-items:center}
.step__n{grid-column:1;grid-row:1;display:grid;place-items:center;
width:44px;height:44px;border-radius:50%;
background:var(--coral);color:#fff;font:600 1.1rem/1 var(--disp);margin:0}
.step h3{grid-column:2;grid-row:1;margin:0}
.step p{grid-column:1 / -1;grid-row:2;margin:1rem 0 0;color:var(--muted);font-size:.9375rem}
.note{
position:relative;z-index:1;margin:clamp(2.5rem,5vw,3.5rem) 0 0;
padding:clamp(1.5rem,3vw,2rem);background:var(--lilac);border-radius:var(--r);
color:#3F3168;font-size:.9375rem;line-height:1.7;
}
.note strong{display:block;margin-bottom:.4rem;color:#2A2050;font-size:1rem}
/* ── close ───────────────────────────────────────────────────────────── */
.close{position:relative;padding:clamp(4.5rem,9vw,7.5rem) var(--gut);text-align:center;overflow:hidden}
.close__in{position:relative;z-index:1;max-width:720px;margin:0 auto}
.close .hero__cta{justify-content:center}
.foot{padding:2.25rem var(--gut);color:var(--muted);font-size:.875rem;
border-top:1px solid rgba(22,35,43,.07);display:flex;flex-wrap:wrap;gap:.75rem 2rem;
justify-content:space-between;align-items:center}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
[data-rv],.wd,.bub{opacity:1!important;transform:none!important}
}
/* Icon and heading share a line; the paragraph sits under both. Scoped with
:has() so the tiles that carry no icon keep ordinary block flow instead of
leaving an empty first column. */
.tile:has(.tile__ic){
display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .9rem;align-items:center;
}
.tile:has(.tile__ic) .tile__ic{grid-column:1;grid-row:1;margin:0}
.tile:has(.tile__ic) h3{grid-column:2;grid-row:1;margin:0}
.tile:has(.tile__ic) p{grid-column:1 / -1;grid-row:2;margin:1rem 0 0}
/* ROWS THAT LINE UP ACROSS THE CARDS, not just inside each one.
"A signed pass from the page" wraps to two lines while "Tell me who you
are" does not, so each card sized its own title row and every paragraph
started at a different height. A card that sizes its own rows is a card
that was built on its own.
subgrid is the only thing that does this honestly: the row heights are
owned by .tiles and each card borrows them, so the tallest title in a row
sets the height for all of them. Behind @supports because without subgrid
the cards simply keep their current behaviour, which is untidy rather than
broken. */
@supports (grid-template-rows: subgrid){
@media (min-width:640px){
.tiles{grid-auto-rows:auto}
.tile:has(.tile__ic){
grid-row:span 2;
grid-template-rows:subgrid;
align-content:start;
}
/* The paragraph takes the leftover height so the cards stay equal depth
and the text still starts on the same line. */
.tile:has(.tile__ic) p{align-self:start}
}
}
/* ── job families ─────────────────────────────────────────────────────
These four cards are the page's real answer to "what can she do?", so they
carry more than a .tile: a labelled family, a one-line summary, five
concrete examples and a "good first job if" line. Two columns rather than
three — five bullets per card need the width to stay one line each, and a
third column would force them to wrap into mush.
Each card picks up an accent from one set of custom properties, so the tag,
the bullet dots, the top strip and the hover shadow all agree without four
separate rules each. The cycle is the same coral / teal / lilac rotation
.tile__ic already uses, so the two sections feel related.
--------------------------------------------------------------------- */
.jobs{display:grid;gap:1.15rem;position:relative;z-index:1}
@media (min-width:820px){.jobs{grid-template-columns:repeat(2,1fr)}}
.job{
--pad:clamp(1.6rem,2.6vw,2.1rem);
--acc:var(--teal);--acc-soft:var(--teal-soft);--acc-ink:#0B7A70;
--acc-glow:rgba(14,155,142,.16);
position:relative;overflow:hidden;
display:flex;flex-direction:column;
background:#fff;border-radius:var(--r);padding:var(--pad);
border:1px solid rgba(22,35,43,.06);box-shadow:0 2px 10px rgba(22,35,43,.04);
transition:transform .4s var(--pop),box-shadow .4s var(--ease);
}
.job:nth-child(3n+2){--acc:var(--coral);--acc-soft:var(--coral-soft);--acc-ink:#C1391B;
--acc-glow:rgba(255,107,74,.18)}
.job:nth-child(3n+3){--acc:#E8833A;--acc-soft:#FFEBD6;--acc-ink:#A8541A;
--acc-glow:rgba(232,131,58,.18)}
/* A strip that fades out rather than a full rule — it flags the accent without
drawing a hard line across the top of every card. */
.job::before{
content:"";position:absolute;inset:0 0 auto;height:5px;
background:linear-gradient(90deg,var(--acc),transparent 78%);
}
.job:hover{transform:translateY(-6px);box-shadow:0 26px 52px var(--acc-glow)}
.job__tag{
display:inline-block;padding:.3rem .7rem;margin-bottom:.85rem;
background:var(--acc-soft);color:var(--acc-ink);border-radius:999px;
font:700 .6875rem/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;
}
.job header h3{margin:0 0 .3rem}
.job__sum{margin:0;color:var(--ink);font-weight:500;font-size:.9375rem;line-height:1.5}
/* Custom dot marker: a list-style disc sits too tight to the text at this
line height, and can't take the accent colour. */
.job ul{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.6rem}
.job li{position:relative;padding-left:1.5rem;color:var(--muted);font-size:.9375rem;line-height:1.65}
.job li::before{
content:"";position:absolute;left:.15rem;top:.62em;
width:.45rem;height:.45rem;border-radius:50%;background:var(--acc);
}
.job li em{font-style:normal;font-weight:600;color:var(--ink)}
/* Pushed to the bottom so the footers line up across a row, and bled out to
the card edges as a tinted strip — it's a different kind of statement from
the examples above it and shouldn't read as a sixth bullet. */
.job__fit{
margin:1.4rem calc(var(--pad) * -1) calc(var(--pad) * -1);margin-top:auto;
padding:.95rem var(--pad);background:var(--acc-soft);
border-top:1px solid rgba(22,35,43,.06);
color:var(--muted);font-size:.875rem;line-height:1.55;
}
.job__fit strong{color:var(--ink)}
/* ── the four layers ──────────────────────────────────────────────────
Same shape as .step on purpose: number and heading share the first line,
the explanation runs the full width underneath. The copy here is longer
than a step's, so two columns rather than three. The wrapping
is
display:contents so the h3 and p become grid items of .layer itself and can
be placed exactly as .step places them.
--------------------------------------------------------------------- */
.layers{
list-style:none;margin:0;padding:0;
display:grid;gap:1.15rem;position:relative;z-index:1;
}
@media (min-width:880px){.layers{grid-template-columns:repeat(2,1fr)}}
.layer{
background:#fff;border-radius:var(--r);padding:clamp(1.7rem,3vw,2.3rem);
border:1px solid rgba(22,35,43,.06);box-shadow:0 2px 10px rgba(22,35,43,.04);
display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .9rem;align-items:center;
}
.layer > div{display:contents}
.layer__n{
grid-column:1;grid-row:1;display:grid;place-items:center;
width:44px;height:44px;border-radius:50%;margin:0;
background:linear-gradient(135deg,var(--coral),#FF9A3C);color:#fff;
box-shadow:0 8px 18px rgba(255,107,74,.3);
font:600 1rem/1 var(--disp);letter-spacing:-.02em;
}
.layer h3{grid-column:2;grid-row:1;margin:0}
.layer p{grid-column:1 / -1;grid-row:2;margin:1rem 0 0;color:var(--muted);font-size:.9375rem}
/* ── the autonomy ladder ──────────────────────────────────────────────
Five rungs, deliberately reading as a scale rather than a set of options:
numbered, evenly weighted, each with the sentence a client would actually
say. The example line is the part that makes it land — an abstract
permission level means nothing until you see the request that sits at it.
--------------------------------------------------------------------- */
.rungs{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;position:relative;z-index:1}
@media (min-width:760px){.rungs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.rungs{grid-template-columns:repeat(5,1fr)}}
/* Each card carries three bands — number+title, the quoted example, the
explanation — and they have to line up ACROSS the five cards, not just
within each one. A card that sizes its own rows puts "Approve" a few pixels
below "Ask" and starts each green box at a different height, which reads as
five cards that were built separately.
Subgrid is the only thing that does this honestly: the row heights are owned
by the list, every card adopts them, so the tallest title sets the title row
for all five and the longest quote sets the quote row for all five.
`grid-auto-rows` (not template) so it also works at the two-column
breakpoint, where the pattern repeats every three implicit rows. */
@media (min-width:760px){
@supports (grid-template-rows: subgrid){
.rungs{grid-auto-rows:auto auto 1fr}
.rung{
grid-row:span 3;
grid-template-rows:subgrid;
align-items:start; /* rows are shared; don't centre the band */
}
.rung__n,.rung h3{align-self:center} /* ...except the number against its title */
.rung__eg{align-self:stretch} /* green box fills the shared row */
}
}
.rung{
background:#fff;border-radius:var(--r);padding:clamp(1.4rem,2.4vw,1.75rem);
border:1px solid rgba(22,35,43,.06);box-shadow:0 2px 10px rgba(22,35,43,.04);
display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .8rem;align-items:center;
transition:transform .4s var(--pop),box-shadow .4s var(--ease);
}
.rung:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(255,107,74,.14)}
.rung__n{
grid-column:1;grid-row:1;display:grid;place-items:center;width:38px;height:38px;
border-radius:50%;color:#fff;font:600 1rem/1 var(--disp);
background:linear-gradient(135deg,var(--coral),#FF9A3C);
box-shadow:0 6px 14px rgba(255,107,74,.28);
}
.rung h3{grid-column:2;grid-row:1;margin:0}
.rung__eg{
grid-column:1 / -1;grid-row:2;margin:.9rem 0 .6rem;padding:.6rem .8rem;
background:var(--teal-soft);border-radius:12px;color:#0A6B62;
font-size:.8125rem;line-height:1.45;font-style:italic;
}
.rung>div>p:last-child{grid-column:1 / -1;grid-row:3;margin:0;color:var(--muted);font-size:.875rem;line-height:1.6}
.rung>div{display:contents}
/* ── the compounding illustration ─────────────────────────────────────
The percentages were true and meant nothing to a reader: "76% becomes 27%
across eight steps" is a sentence you have to stop and decode. This shows
the same arithmetic as a set of shrinking bars with "x in 10" labels, which
needs no decoding at all.
--------------------------------------------------------------------- */
.decay{
background:#fff;border-radius:var(--r);border:1px solid rgba(22,35,43,.06);
padding:clamp(1.6rem,3.2vw,2.4rem);box-shadow:0 2px 10px rgba(22,35,43,.04);
margin-top:clamp(2rem,4vw,3rem);position:relative;z-index:1;
}
.decay h3{margin:0 0 .8rem;text-align:center}
.decay__lead{margin:0 auto 1.6rem;max-width:62ch;text-align:center;color:var(--muted)}
.decay__lead strong,.decay__out strong{color:var(--ink);font-weight:600}
.decay__steps{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.6rem}
.decay__steps li{display:grid;grid-template-columns:4.5rem 1fr auto;gap:.9rem;align-items:center}
.decay__k{font:600 .8125rem/1 var(--sans);color:var(--muted)}
.decay__bar{
height:14px;border-radius:999px;background:var(--teal);
width:var(--w);min-width:2rem;
}
.decay__bar--bad{background:var(--coral)}
.decay__v{font:600 .8125rem/1 var(--sans);color:var(--ink);white-space:nowrap}
.decay__out{margin:0;text-align:center;color:var(--muted);max-width:66ch;margin-inline:auto}
.figs__src{
margin:clamp(2rem,4vw,2.5rem) auto 0;max-width:72ch;text-align:center;
color:var(--muted);font-size:.8125rem;line-height:1.7;position:relative;z-index:1;
}
.fig__n em{font-style:normal;font-size:.44em;color:var(--muted);font-weight:400}
/* ── centred measure ──────────────────────────────────────────────────
Dom's call: the content sits in a centred column rather than running edge
to edge. It suits this concept — a contained page reads friendlier and less
corporate than a full-bleed one. Headings and intros are centre-aligned;
body copy inside cards stays left, because centred paragraphs are hard to
read once they run past a couple of lines.
--------------------------------------------------------------------- */
:root{--maxw:1180px}
.hero__grid,.sec__head,.tiles,.steps,.figs,.decay,.figs__src,.note,.split-soft,.rungs,.jobs,.layers,
.close__in,.foot,.nav{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.nav{max-width:calc(var(--maxw) + 1.4rem)}
.sec__head{text-align:center}
.sec__head h2{max-width:none} /* run the full container, never a narrow column */
.sec__head .lede{max-width:62ch;margin-left:auto;margin-right:auto}
.sec__head .eyebrow{margin-left:auto;margin-right:auto}
.note{text-align:center}
.note strong{font-size:1.05rem}
/* ── the numbers ─────────────────────────────────────────────────────── */
.figs{display:grid;gap:1.15rem;position:relative;z-index:1}
@media (min-width:640px){.figs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.figs{grid-template-columns:repeat(4,1fr)}}
.fig{
background:#fff;border-radius:var(--r);padding:clamp(1.5rem,2.6vw,2rem);
border:1px solid rgba(22,35,43,.06);text-align:center;
transition:transform .4s var(--pop),box-shadow .4s var(--ease);
}
.fig:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(255,107,74,.16)}
.fig__n{
display:block;margin-bottom:.7rem;
font:600 clamp(2.2rem,4.4vw,3.1rem)/1 var(--disp);letter-spacing:-.04em;
color:var(--coral);
}
.fig__n em{font-style:normal;opacity:.5}
.fig p{margin:0;color:var(--muted);font-size:.875rem;line-height:1.6}
/* ── what I'm not ────────────────────────────────────────────────────── */
.split-soft{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;position:relative;z-index:1}
@media (min-width:900px){.split-soft{grid-template-columns:1.25fr .75fr}}
.split-soft p{max-width:none}
/* ── the three "what I'm not" facts ───────────────────────────────────
These were three thin bars with a number and a fragment of a sentence
baseline-aligned beside it, which read as a table rather than as anything
designed. Each is now a proper card: an icon in its own tinted well, the
figure beside it, and a full sentence underneath.
--------------------------------------------------------------------- */
.facts{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.facts li{
--f:var(--coral); --f-soft:var(--coral-soft);
background:#fff;border-radius:var(--r);padding:1.3rem 1.4rem;
border:1px solid rgba(22,35,43,.06);box-shadow:0 2px 10px rgba(22,35,43,.04);
display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .95rem;
align-items:center;
transition:transform .4s var(--pop),box-shadow .4s var(--ease);
}
.facts li:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(22,35,43,.09)}
.facts li:nth-child(2){--f:var(--teal);--f-soft:var(--teal-soft)}
.facts li:nth-child(3){--f:#5B43B8;--f-soft:var(--lilac)}
.facts__ic{
grid-column:1;grid-row:1 / span 2;
width:auto;height:auto;border-radius:0;display:grid;place-items:center;
background:none;color:var(--coral);
}
.facts__ic svg{width:22px;height:22px}
.facts__n{
grid-column:2;grid-row:1;
font:600 clamp(1.5rem,2.6vw,1.9rem)/1.1 var(--disp);letter-spacing:-.04em;
color:var(--f);
}
.facts__l{grid-column:2;grid-row:2;font-size:.9rem;line-height:1.55;color:var(--muted)}
/* ── pop ─────────────────────────────────────────────────────────────────
Dom liked the style and asked for more of it. More colour in the emphasis,
a warm wash behind the page, deeper shadows under the cards, and a slow
drift on the gradient so the accent is never quite static.
--------------------------------------------------------------------- */
body{
background:
radial-gradient(1200px 620px at 78% -8%, rgba(255,107,74,.13), transparent 62%),
radial-gradient(1000px 560px at -6% 42%, rgba(14,155,142,.10), transparent 60%),
radial-gradient(900px 500px at 92% 88%, rgba(124,92,255,.09), transparent 60%),
var(--cream);
background-attachment:fixed;
}
/* One flat colour. The gradient version faded a headline from coral through
amber into teal, which made the last word of a sentence a different colour
from the first — read as a rendering fault rather than a flourish. */
h1 em,h2 em{color:var(--coral);background:none;-webkit-text-fill-color:currentColor}
.eyebrow{
background:linear-gradient(100deg,var(--coral-soft),#FFEFD9);
box-shadow:0 4px 14px rgba(255,107,74,.16);
}
.tile{box-shadow:0 2px 10px rgba(22,35,43,.04)}
.tile:hover{box-shadow:0 26px 52px rgba(255,107,74,.16)}
.step{box-shadow:0 2px 10px rgba(22,35,43,.04)}
.step__n{
background:linear-gradient(135deg,var(--coral),#FF9A3C);
box-shadow:0 8px 18px rgba(255,107,74,.3);
}
.convo{box-shadow:0 30px 64px rgba(22,35,43,.14)}
.portrait img{box-shadow:0 36px 72px rgba(255,107,74,.2)}
.btn{background:linear-gradient(120deg,var(--coral),#FF8A55)}
.btn--plain{background:#fff}
.note{
background:linear-gradient(135deg,var(--lilac),#F6F0FF);
box-shadow:0 10px 30px rgba(124,92,255,.12);
}
/* ── phones ──────────────────────────────────────────────────────────────
From a real measurement pass at 375px: the wordmark was a 20–23px tap
target, and several label styles rendered between 10.5px and 11.5px. Both
are fine on a desktop and neither is on a phone.
------------------------------------------------------------------------ */
@media (hover:none), (max-width:760px){
.brand{display:inline-flex;align-items:center;min-height:44px}
.nav .btn{min-height:44px}
.nav{padding-block:.6rem}
.eyebrow{font-size:.8125rem}
.tile p,.step p,.note{font-size:.9375rem}
.foot,.convo__top{font-size:.8125rem}
/* The job tag is 11px on a desktop, which is the exact fault the pass above
found. The "good first job if" line is 14px, which is legible but tight
next to 15px bullets on a small screen — level them up. */
.job__tag{font-size:.75rem;letter-spacing:.1em}
.job__fit{font-size:.9375rem}
.job{--pad:1.45rem}
.layer p{font-size:.9375rem}
}
/* ── image bands ──────────────────────────────────────────────────────
The page had exactly one photograph on it, which made a product about a
digital member of staff read as an essay. These are full-bleed, so they
break the rhythm of card-card-card and give the thing a face doing the job
rather than posing for a wardrobe plate.
Every photograph used here is checked for invented brand marks first: the
original "business" set carries CREATE's logo on the jumper and a CREATE
wall behind her, which cannot appear on a standalone Friday site.
--------------------------------------------------------------------- */
.band{
/* FLUSH, not floated in whitespace. The bands used to carry 88px of vertical
margin, which put a strip of body background between the tinted section
above and the photograph — read as an unexplained bar across the page
rather than as spacing. A full-bleed image butted straight against the
section either side has no seam to explain. */
position:relative;margin:0;padding:0;
width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
overflow:hidden;isolation:isolate;
}
.band picture{display:block}
.band img{
display:block;width:100%;height:clamp(420px,64vh,680px);object-fit:cover;
object-position:center 40%;
}
.band figcaption{
position:absolute;inset:auto 0 0 0;
padding:clamp(4rem,9vw,6.5rem) clamp(1.25rem,5vw,3rem) clamp(2rem,4vw,3rem);
/* Deeper and taller than before. Over a bright dusk frame the old wash left
white type on a pale sky, which is unreadable however elegant. */
background:linear-gradient(to top,
rgba(8,13,17,.94) 0%, rgba(8,13,17,.82) 26%,
rgba(8,13,17,.42) 62%, transparent 100%);
color:#fff;
}
.band figcaption>*{max-width:var(--maxw);margin-inline:auto}
.band__k{
display:block;max-width:min(var(--maxw),52ch);margin-inline:auto;font:600 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
color:#FFB99E;margin-bottom:.55rem;
}
.band figcaption p{
/* A caption set to the full page measure reads as a paragraph of body copy
laid over a picture. Held to a headline measure it reads as a caption. */
margin:0 auto;max-width:min(var(--maxw),52ch);
font:400 clamp(1.15rem,2.3vw,1.6rem)/1.45 var(--disp);color:#fff;
text-shadow:0 1px 18px rgba(0,0,0,.45);
}
/* The morning frame is bright and blows out a dark gradient, so it gets a
lighter scrim and dark type instead of the same treatment applied blindly. */
.band--light figcaption{
background:linear-gradient(to top,
rgba(255,252,248,.97) 0%, rgba(255,252,248,.88) 26%,
rgba(255,252,248,.5) 62%, transparent 100%);
color:var(--ink);
}
.band--light .band__k{color:#B8451F}
.band--light figcaption p{color:var(--ink);text-shadow:none}
@media (max-width:640px){
.band img{height:clamp(360px,70vh,520px)}
.band figcaption{padding-bottom:1.3rem}
}
/* ── FAQ ──────────────────────────────────────────────────────────────
rather than a JS accordion: it is open to a crawler and to
Ctrl-F whether or not the script runs, which is the whole point of
putting answers on the page.
--------------------------------------------------------------------- */
.faq{max-width:860px;margin-inline:auto;position:relative;z-index:1;display:grid;gap:.75rem}
.faq__q{
background:#fff;border:1px solid rgba(22,35,43,.06);border-radius:var(--r);
box-shadow:0 2px 10px rgba(22,35,43,.04);overflow:hidden;
transition:box-shadow .35s var(--ease);
}
.faq__q[open]{box-shadow:0 18px 38px rgba(22,35,43,.08)}
.faq__q summary{
list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:flex-start;
padding:1.15rem clamp(1.1rem,2.4vw,1.6rem);
}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary h3{margin:0;font-size:clamp(1rem,1.9vw,1.1rem);flex:1}
.faq__q summary::after{
content:"";flex:0 0 auto;width:12px;height:12px;margin-top:.42rem;
border-right:2px solid var(--coral);border-bottom:2px solid var(--coral);
transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq__q[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 clamp(1.1rem,2.4vw,1.6rem) 1.3rem}
.faq__a p{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.7}
.faq__a strong{color:var(--ink);font-weight:600}
/* ── footer ───────────────────────────────────────────────────────────
The CREATE mark used to be a badge fixed over the bottom-right corner of
every screen. On a page people are meant to buy from, a permanent overlay
reads as a third-party widget rather than a signature — so it sits here,
once, at the end, in this site's ink rather than CREATE's green.
--------------------------------------------------------------------- */
.foot{
border-top:1px solid rgba(22,35,43,.08);margin-top:clamp(3rem,6vw,5rem);
padding:clamp(2.5rem,5vw,4rem) clamp(1.25rem,5vw,3rem) clamp(1.5rem,3vw,2rem);
background:rgba(255,255,255,.55);
}
.foot__in{
max-width:var(--maxw);margin-inline:auto;display:grid;gap:2.5rem;
align-items:start;
}
/* The brand block, then the links. 1.3fr/1fr left the link column narrow
with a single list running ten items deep and a band of empty page beside
it. Even columns, with the list itself splitting in two, fills the width
and halves the depth. */
@media (min-width:820px){.foot__in{grid-template-columns:1fr 1.25fr}}
.foot__name{
display:block;font:600 1.5rem/1 var(--disp);letter-spacing:-.03em;color:var(--ink);
margin-bottom:.8rem;
}
.foot__name i{font-style:normal;color:var(--coral)}
.foot__brand p{margin:0;max-width:46ch;color:var(--muted);font-size:.9375rem;line-height:1.7}
/* 700, matching hirefriday. Inter 700 is now in this page's font request —
it was 400;500;600 only, so a 700 here would have been a browser-faked
bold rather than the real cut. */
.foot__nav h2{
margin:0 0 .9rem;font:700 .72rem/1 var(--sans);letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);
}
.foot__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot__nav a{color:var(--ink);text-decoration:none;font-size:.9rem;opacity:.8}
.foot__nav a:hover{opacity:1;color:var(--coral)}
.foot__mark{
max-width:var(--maxw);margin:clamp(2rem,4vw,3rem) auto 0;
padding-top:1.4rem;border-top:1px solid rgba(22,35,43,.07);
display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;align-items:center;
justify-content:space-between;
}
/* "Built by [mark] CREATE", matching hirefriday.uk, in this site's main
accent. --coral on Dom's instruction (2026-10-05), having flagged that it
measures 2.73:1 on cream and clears neither the 4.5:1 text floor nor the
3:1 large-text one. The word CREATE appears in full-contrast ink elsewhere
in the same footer, so nothing here is the only route to it. */
.createmark{
/* BASELINE, not center. The mark is a replaced element, so its baseline
is its bottom edge: baseline alignment is what puts the foot of the
logo on the same line as the foot of the C in CREATE. Centring left it
sitting 3px low, which is exactly what it looked like. */
display:inline-flex;align-items:baseline;gap:.5rem;
color:var(--muted);font-size:.8125rem;letter-spacing:.01em;
}
.createmark a{
display:inline-flex;align-items:baseline;gap:.45rem;
color:var(--coral);text-decoration:none;
padding-block:.4rem;
transition:opacity .3s var(--ease);
}
.createmark a:hover{opacity:.72}
.createmark .create-mark{height:22px;width:auto;flex:none;color:inherit}
.createmark b{
font:600 1.05rem/1 var(--disp);
letter-spacing:.12em;text-transform:uppercase;color:inherit;
}
.foot__legal{
display:grid;gap:.3rem;color:var(--muted);font-size:.8125rem;line-height:1.6;max-width:62ch;
}
.foot__legal-main{color:var(--ink)}
.foot__legal-sub{font-size:.75rem;opacity:.85}
/* copyright leads, credit sits right — the DOM keeps the credit first. */
.foot__mark .createmark{order:2}
.foot__mark .foot__legal{order:1}
@media (prefers-reduced-motion:reduce){
.faq__q,.faq__q summary::after,.createmark a{transition:none}
}
@supports not (grid-template-rows: subgrid){
@media (min-width:760px){
.rung__eg{min-height:4.6rem;display:flex;align-items:center}
}
}
/* ── the job-family photograph ────────────────────────────────────────
Four cards of nothing but text read as a specification. Each one now opens
with Friday actually doing that job — behind the desk, at the paperwork,
watching the screens, drawing the lines between systems.
Bled to the card edges and pulled up under the accent strip, so it reads as
the top of the card rather than a picture dropped inside it.
--------------------------------------------------------------------- */
.job__shot{
margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 1.4rem;
overflow:hidden;position:relative;
border-radius:var(--r) var(--r) 0 0;
}
.job__shot picture{display:block}
.job__shot img{
/* Taller, and cropped from the middle rather than the top. These are wide
establishing shots now — the whole reception counter, the whole desk, the
bank of screens — and a short window cropped high threw all of that away
and left a headshot, which told the reader nothing about the job. */
display:block;width:100%;height:clamp(210px,29vw,320px);
object-fit:cover;object-position:center center;
transition:transform .6s var(--ease);
}
.job:hover .job__shot img{transform:scale(1.035)}
/* A wash in the card's own accent, so the four photographs sit in the same
family as the four colour-coded cards rather than fighting them. */
.job__shot::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,var(--acc-glow),transparent 46%);
mix-blend-mode:multiply;opacity:.55;
}
@media (prefers-reduced-motion:reduce){
.job__shot img,.job:hover .job__shot img{transition:none;transform:none}
}
/* A nav label must never break mid-phrase — "What she / does" reads as two
separate menu items rather than one. */
.nav nav a{white-space:nowrap}
/* ── what she connects to ─────────────────────────────────────────────
A marquee and a grid of system names, set in our own type.
Deliberately NOT third-party logos. A wall of brand marks on a page that is
selling something is somebody else's trademark doing our advertising, and
more importantly it implies a finished, tested integration with every one of
them. This page's entire argument is that we are the ones who do not
oversell — a logo wall is the cheapest possible way to throw that away.
Names in our own typography say "we build against these" without either
problem, and look more designed than a row of mismatched PNGs.
--------------------------------------------------------------------- */
.mq{
position:relative;z-index:1;margin:clamp(2rem,4vw,3rem) 0;
width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
display:grid;gap:1rem;
/* CLIP, don't just mask. A mask hides the overflowing row visually and does
nothing about LAYOUT — the row is 3,882px wide and was giving the whole
document horizontal scroll while looking perfectly tidy. The same bug was
found and fixed on hirefriday.uk; this page never got it.
Measured, not guessed. */
overflow:hidden;
/* Fade the ends so names enter and leave rather than being chopped off at
the viewport edge. */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
/* Re-timed for the bigger pills. The duration is a time to travel the row's
OWN width, so scaling the contents speeds the strip up unless the numbers
move with it. These hold roughly the original 26 and 18 px/sec. If the brand
list changes, re-measure — they are tied to the row width, not to a feel. */
.mq__row{display:flex;width:max-content;animation:mq-left 93s linear infinite}
.mq__row--back{animation:mq-right 120s linear infinite}
.mq__set{display:flex;gap:.7rem;padding-right:.7rem;flex:0 0 auto}
@keyframes mq-left {from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.mq:hover .mq__row{animation-play-state:paused}
.tick{
flex:0 0 auto;display:inline-flex;align-items:center;gap:.8rem;
padding:1rem 1.7rem 1rem 1.3rem;border-radius:999px;white-space:nowrap;
background:#fff;border:1px solid rgba(22,35,43,.07);
box-shadow:0 3px 12px rgba(22,35,43,.06);
font:500 1.125rem/1 var(--sans);color:var(--ink);letter-spacing:.01em;
}
/* THE GLYPH BOX IS FIXED, THE ARTWORK IS NOT.
Every brand draws its mark to a different aspect — Slack fills a square,
WordPress is a circle, Stripe is a tall S. Sizing by height alone makes the
wide ones look enormous beside the narrow ones, which is the ransom-note
effect logos are supposed to avoid. Identical box, contained artwork. */
.tick__i{
flex:0 0 auto;width:2.2rem;height:2.2rem;display:block;
fill:currentColor;color:var(--muted);
}
/* The sprite must not occupy layout. `display:none` on the