/* SRS site styles: shared by the homepage and the sector pages */
:root {
  --blue: #163883;      /* SRS blue, from the logo */
  --blue-deep: #102c6c;
  --ink: #0a1838;
  --sign: #1b48a3;      /* motorway-sign blue for the sector tiles */
  --pink: #e40180;      /* the pin in the logo */
  --white: #f7f8fc;
  --muted: rgba(247, 248, 252, .74);
  --line: rgba(247, 248, 252, .16);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --nav: 68px;
  --r: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav); }
body {
  margin: 0; background: var(--blue); color: var(--white);
  font: 400 17px/1.6 "Archivo", system-ui, sans-serif; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { margin: 0; font-weight: 800; font-stretch: 115%; letter-spacing: -.02em; line-height: 1.02; }
h2 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 30; background: var(--white); color: var(--ink); padding: 8px 14px; border-radius: 99px; }
.skip:focus { left: 8px; }

/* Buttons: pills everywhere; panels and images use --r */
.btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 14px 26px; border-radius: 99px; font-weight: 700; font-size: 16px; text-decoration: none;
  transition: transform .2s, background-color .2s, border-color .2s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-pink { background: var(--pink); color: #fff; }
.btn-pink:hover { background: #c9006f; }
.btn-line { border: 2px solid rgba(247, 248, 252, .5); padding: 12px 24px; }
.btn-line:hover { border-color: var(--white); }
.btn i { font-size: 18px; transition: transform .2s; }
.btn:hover i { transform: translateX(3px); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--nav); background: var(--blue); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.nav.is-down { border-color: var(--line); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 32px; }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; gap: 28px; margin-left: auto; list-style: none; padding: 0; }
.nav__links a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); }
.nav__links a:hover { color: var(--white); }
.nav .btn { padding: 9px 18px; font-size: 15px; }
@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
}

/* Hero: an aerial drive through the countryside. The page scrolls through .drive while .stage stays pinned, and the
   aerial footage (assets/drive/layers: 60 frames, stacked) plays with the scroll, so the lorry drives on as you scroll
   down and backs up as you scroll up. The overlay is laid out on a 1280x800 stage scaled to fit
   (--s), mirrored about the road, which runs down the middle; portrait screens reflow it into a grid further down. */
.drive { position: relative; height: 280vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #2b3320; }
.aerial { position: absolute; inset: 0; overflow: hidden; }
/* The footage's frame: every frame is a layer in it, and the script fades each into the next and slides it so the land
   lines up. The script sizes it to the footage's own pixels and scales it up to cover the screen (2% over, so sliding
   a frame never shows an edge): Safari then paints each layer at 1280px, not screen size (six times less memory, which
   it was running out of, painting layers in strips). Frames are backgrounds, not <img>s: Safari drew <img> layers at
   their raw size in the corner. */
.scene {
  --ar: 1280 / 713;
  position: absolute; left: 50%; top: 50%; width: calc(max(100%, 100svh * (var(--ar))) * 1.02); aspect-ratio: var(--ar);
  transform: translate(-50%, -50%);
}
.scene.m { --ar: 540 / 960; }
.scene i { position: absolute; inset: 0; background: center / 100% 100% no-repeat; opacity: 0; }
.scene i:first-child { opacity: 1; }
/* SRS-navy shading, heavier top and bottom where the type sits, so white text holds up over bright wheat */
.aerial-tint {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(22, 56, 131, 0) 72%, var(--blue) 100%), /* melts into the page's blue below */
    linear-gradient(to bottom, rgba(8, 18, 44, .7) 0%, rgba(8, 18, 44, .42) 24%, rgba(8, 18, 44, .14) 46%,
    rgba(8, 18, 44, .2) 60%, rgba(8, 18, 44, .58) 78%, rgba(8, 18, 44, .8) 100%);
}
/* As the hero scrolls away the whole scene tints over to the page's blue (the script sets the opacity) */
.hero-fade { position: absolute; inset: 0; background: var(--blue); opacity: 0; pointer-events: none; }
.hero {
  --s: tan(atan2(min(100svh / 800, 100vw / 716), 1px)); /* a length over 1px, turned into the number scale() needs */
  position: absolute; left: 50%; top: 50%; width: 1280px; height: 800px; margin: -400px 0 0 -640px;
  transform: scale(var(--s)); transform-origin: 50% 50%; color: var(--white);
}
.hero__copy { position: absolute; inset: 0; will-change: transform; }
.eyebrow {
  position: absolute; left: 0; right: 0; top: 76px; margin: 0; text-align: center;
  font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.hl {
  position: absolute; left: 0; right: 0; top: 98px; margin: 0; text-align: center;
  font-weight: 800; font-stretch: 62%; font-size: 104px; line-height: .86; letter-spacing: -.01em; text-transform: uppercase;
  text-shadow: 0 15px 36px rgba(0, 0, 0, .5);
}
.hl span { display: block; }
.hl em { font-style: normal; color: var(--pink); }
.mark { position: absolute; left: 553px; top: 482px; width: 44px; height: auto; }
.feature { position: absolute; top: 0; bottom: 0; margin: 0; }
.f-left { right: 748.5px; text-align: right; }
.f-right { left: 748.5px; text-align: left; }
.feature .icon { position: absolute; }
.f-left .icon { right: -4.5px; top: 549.5px; width: 35px; height: 34px; }
.f-right .icon { left: -3px; top: 547.5px; width: 35px; height: 38px; }
.feature h2 {
  position: absolute; top: 612px; margin: 0;
  font-weight: 700; font-stretch: 75%; font-size: 23px; line-height: 1.02; letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.feature h2 span { display: block; white-space: nowrap; }
.feature p {
  position: absolute; top: 678px; margin: 0; width: 260px;
  font-stretch: 87%; font-size: 14px; line-height: 1.42; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.f-left h2 { right: 0; }
.f-right h2 { left: 0; }
.f-left p { right: 12px; }
.f-right p { left: 12px; }

/* One entrance when the page opens; after that only the scroll moves things */
@media (prefers-reduced-motion: no-preference) {
  .eyebrow { animation: riseIn .55s cubic-bezier(.33, .9, .35, 1) .15s both; }
  .hl span { animation: lineIn .9s cubic-bezier(.16, 1, .3, 1) both; }
  .hl span:nth-child(1) { animation-delay: .28s; }
  .hl span:nth-child(2) { animation-delay: .37s; }
  .hl span:nth-child(3) { animation-delay: .46s; }
  .mark { animation: markIn .7s cubic-bezier(.2, .9, .25, 1) .72s both; }
  .f-left { animation: blockInL .75s cubic-bezier(.16, 1, .3, 1) .82s both; }
  .f-right { animation: blockInR .75s cubic-bezier(.16, 1, .3, 1) .9s both; }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lineIn {
  0% { opacity: 0; transform: translateY(.26em); clip-path: inset(100% -30% 0% -30%); }
  35% { opacity: 1; }
  90% { clip-path: inset(0% -30% -100% -30%); }
  100% { opacity: 1; transform: none; clip-path: inset(-80% -30% -100% -30%); }
}
@keyframes markIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes blockInL { from { opacity: 0; transform: translate(-12px, 8px); } to { opacity: 1; transform: none; } }
@keyframes blockInR { from { opacity: 0; transform: translate(12px, 8px); } to { opacity: 1; transform: none; } }

/* Portrait tablets and phones: the overlay becomes a grid down the screen, the two features still mirrored about the
   road (side by side on tablets, stacked on phones, each keeping its own side) */
@media (max-width: 609px), (min-width: 610px) and (max-aspect-ratio: 1/1) {
  .drive { height: 230vh; }
  .hero {
    left: 0; top: 0; width: auto; height: auto; inset: 0; margin: 0; transform: none; display: grid;
    padding: calc(var(--nav) + 4vh) var(--gutter) max(28px, env(safe-area-inset-bottom));
  }
  .hero__copy, .eyebrow, .hl, .feature, .feature h2, .feature p, .feature .icon { position: static; }
  .hero__copy { grid-area: 1 / 1 / 2 / -1; }
  .eyebrow { margin-bottom: 14px; }
  .mark { position: relative; left: auto; top: auto; justify-self: center; right: 24%; } /* on the verge, clear of the lorry */
  .feature .icon { display: block; }
  .f-left .icon { margin-left: auto; }
  .f-right .icon { margin-right: auto; }
  .feature h2 span { white-space: normal; }
  .feature p { width: auto; }
  .f-left p { margin-left: auto; }
  .f-right p { margin-right: auto; }
}
@media (min-width: 610px) and (max-aspect-ratio: 1/1) {
  .hero { grid-template-columns: 1fr 26vw 1fr; grid-template-rows: auto 1fr auto auto minmax(0, .3fr); }
  .eyebrow { font-size: 13px; }
  .hl { font-size: 15vw; }
  .mark { grid-area: 3 / 1 / 4 / -1; width: 56px; margin-bottom: 16px; }
  .f-left { grid-area: 4 / 1 / 5 / 2; }
  .f-right { grid-area: 4 / 3 / 5 / 4; }
  .feature .icon { width: 42px; height: 44px; margin-bottom: 14px; }
  .feature h2 { font-size: 26px; margin-bottom: 12px; }
  .feature p { font-size: 16px; max-width: 300px; }
}
@media (max-width: 609px) {
  .hero { grid-template-columns: 100%; grid-template-rows: auto 1fr auto auto auto; }
  .eyebrow { font-size: 10px; }
  .hl { font-size: clamp(56px, 21vw, 96px); }
  .mark { grid-row: 3; width: 40px; margin-bottom: 18px; }
  .f-left { grid-row: 4; margin-bottom: 24px; }
  .f-right { grid-row: 5; }
  .feature .icon { width: 32px; height: 34px; margin-bottom: 10px; }
  .feature h2 { font-size: 19px; margin-bottom: 8px; }
  .feature p { font-size: 14px; max-width: 290px; }
}

/* Reduced motion: no pinning; the drive shows a single frame */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drive { height: auto; }
  .stage { position: relative; min-height: 100svh; height: auto; }
}

/* Over the hero the nav sits on the footage; once past it, the solid navy bar comes back */
.nav.over-hero { background: transparent; border-color: transparent; }

/* The road and lorry (contact section): a keyed photo (assets/lorry.webp, 2075x516, tyres touch y 510) with the SRS
   livery laid on the trailer */
.road { position: absolute; left: 0; right: 0; top: var(--road); height: 2px; background: rgba(247, 248, 252, .22); }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 4px; background: repeating-linear-gradient(90deg, rgba(247, 248, 252, .2) 0 60px, transparent 60px 120px); }
.truck { --iw: 2075; --ih: 516; position: absolute; left: 0; width: var(--tw, 900px); top: calc(var(--road) - var(--tw, 900px) * 510 / 2075); will-change: transform; container-type: inline-size; }
.truck::after { content: ""; position: absolute; z-index: -1; left: 1%; right: 1%; bottom: -2.2%; height: 9%; background: radial-gradient(closest-side, rgba(4, 12, 36, .6), rgba(4, 12, 36, 0)); }
.lorry__body { width: 100%; height: auto; }
/* A spinning rim on the lorry: a circular window onto the lorry's own image (--img, --iw x --ih
   pixels) over the rim centred at --cx, --cy with radius --r, which the script rotates */
.rim {
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  left: calc((var(--cx) - var(--r)) / var(--iw) * 100%); top: calc((var(--cy) - var(--r)) / var(--ih) * 100%); width: calc(var(--r) * 2 / var(--iw) * 100%);
  background: var(--img) no-repeat;
  background-size: calc(var(--iw) / (var(--r) * 2) * 100%) auto;
  background-position: calc((var(--cx) - var(--r)) / (var(--iw) - var(--r) * 2) * 100%) calc((var(--cy) - var(--r)) / (var(--ih) - var(--r) * 2) * 100%);
}
.lorry__livery { position: absolute; left: 1.06%; width: 79.86%; top: 3.49%; height: 62.6%; display: flex; align-items: center; justify-content: space-between; padding: 0 7% 3.2cqw; }
.lorry__livery img { height: 6.6cqw; width: auto; }
.lorry__livery span { font-weight: 700; font-stretch: 110%; font-size: 2.3cqw; color: var(--blue); }
/* A magenta sweep with a navy pinstripe, kept off the bottom edge so it never reads as a gap in the trailer */
.lorry__livery::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9%; height: 17%; background: linear-gradient(var(--pink) 0 56%, transparent 56% 72%, var(--blue) 72%); transform: skewY(-1.4deg); }
/* Exhaust smoke: soft puffs the script spawns from behind the cab and lets drift, grow and fade */
.smoke { position: absolute; inset: 0; pointer-events: none; }
.puff {
  position: absolute; left: 0; top: 0; width: 90px; height: 90px; margin: -45px 0 0 -45px; opacity: 0;
  background: url(assets/smoke/0.webp) center / contain no-repeat; /* wispy sprites, made by noise; the script picks one */
  will-change: transform, opacity;
}
section { position: relative; }
.pad { padding: clamp(80px, 12vw, 160px) 0; }
.pad + .pad { padding-top: 0; }

/* Clients */
.clients { padding: 56px 0; border-bottom: 1px solid var(--line); }
.clients .wrap { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; }
.clients p { color: var(--muted); font-weight: 600; font-size: 15px; }
.clients ul { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.clients img { height: 30px; width: auto; opacity: .9; }
.clients img.tall { height: 40px; }

/* Two ways in: hiring, or looking for work */
.paths .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
.panel { position: relative; border-radius: var(--r); padding: clamp(28px, 4vw, 56px); display: grid; gap: 22px; align-content: start; overflow: hidden; scroll-margin-top: calc(var(--nav) + 20px); }
.panel h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.panel p { color: var(--muted); max-width: 46ch; font-size: 18px; }
.panel--hire { background: var(--blue-deep); }
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 8px 0 12px; }
.services h3 { font-size: 15px; font-stretch: 100%; letter-spacing: 0; color: var(--white); margin-bottom: 12px; }
.services ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.services li { border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-size: 14px; color: var(--muted); }
.panel--work { min-height: 560px; align-content: end; background: var(--ink); }
/* The photo fills the top of the panel and fades into solid ink, so the copy below always sits on a plain background */
.panel--work { padding-top: min(52vw, 360px); }
.panel--work img { position: absolute; inset: 0 0 auto; width: 100%; height: min(62vw, 440px); object-fit: cover; object-position: 50% 35%; }
.panel--work::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 24, 56, 0) 0, rgba(10, 24, 56, 0) min(30vw, 220px), var(--ink) min(60vw, 430px)); }
.panel--work > :not(img) { position: relative; }
.panel--work p { color: rgba(247, 248, 252, .86); }
.panel .btn { justify-self: start; }
@media (max-width: 900px) {
  .paths .wrap { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
}

/* Sectors, styled after UK motorway signs */
.sectors h2 { margin-bottom: clamp(32px, 5vw, 56px); max-width: 16ch; }
.signs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.signs li:nth-child(1), .signs li:nth-child(6) { grid-column: span 2; }
.sign {
  display: grid; gap: 14px; height: 100%; padding: 26px 26px 28px; text-decoration: none;
  background: var(--sign); border-radius: var(--r); box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 7px var(--sign);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
a.sign:hover { transform: translateY(-4px); }
.sign h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); display: flex; justify-content: space-between; gap: 12px; }
.sign h3 i { font-size: 1.1em; transition: transform .25s; }
a.sign:hover h3 i { transform: translate(3px, -3px); }
.sign p { color: var(--muted); font-size: 15px; line-height: 1.7; }
@media (max-width: 960px) { .signs { grid-template-columns: 1fr 1fr; } .signs li:nth-child(1), .signs li:nth-child(6) { grid-column: span 2; } }
@media (max-width: 560px) { .signs { grid-template-columns: 1fr; } .signs li:nth-child(1), .signs li:nth-child(6) { grid-column: auto; } }


/* Why SRS: a route with a stop for each reason, filled in as you scroll */
.why .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.why h2 { position: sticky; top: calc(var(--nav) + 48px); max-width: 11ch; }
.route { position: relative; padding-left: 52px; }
.route ol { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 6vw, 72px); }
.route::before, .route-fill { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--line); }
.route-fill { background: var(--pink); transform-origin: top; transform: scaleY(0); }
.route li { position: relative; }
.route li::before { content: ""; position: absolute; left: -52px; top: 4px; width: 25px; height: 25px; border-radius: 50%; background: var(--blue); box-shadow: inset 0 0 0 3px var(--line); transition: box-shadow .4s; }
.route li.lit::before { box-shadow: inset 0 0 0 7px var(--pink); }
.route h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 10px; }
.route p { color: var(--muted); max-width: 46ch; }
@media (max-width: 900px) { .why .wrap { grid-template-columns: 1fr; } .why h2 { position: static; } }


/* Contact: the truck pulls in and parks as you reach the bottom */
.contact { padding-top: clamp(80px, 12vw, 160px); overflow: clip; /* clip, not hidden: hidden would make it a scroll container and stall the lorry's scroll animation */ --road: calc(100% - 40px); }
.contact h2 { font-size: clamp(2.8rem, 8vw, 7.5rem); font-stretch: 125%; letter-spacing: -.035em; max-width: 12ch; margin-bottom: clamp(36px, 5vw, 64px); }
.contact h2 em { font-style: normal; color: var(--pink); }
.reach { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 20px clamp(32px, 6vw, 96px); }
.reach a, .reach address { display: grid; gap: 4px; text-decoration: none; font-style: normal; }
.reach small { color: var(--muted); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.reach b { font-size: clamp(1.25rem, 2.2vw, 1.9rem); font-weight: 700; font-stretch: 110%; line-height: 1.3; }
.reach a:hover b { color: var(--white); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 6px; }
.social { display: flex; gap: 10px; margin-top: 36px; }
.social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); font-size: 20px; text-decoration: none; }
.social a:hover { border-color: var(--white); }
/* the parked lorry stands on the footer's top line */
.lot { position: relative; height: calc(var(--tw, 600px) * 516 / 2075 + 60px); margin-top: 40px; }
.lot .truck { top: auto; bottom: calc(0px - var(--tw) * 6 / 2075); }
@media (max-width: 900px) { .reach { grid-template-columns: 1fr; } }

footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; }

/* Fade content up as it arrives */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s, transform .8s cubic-bezier(.16, 1, .3, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Sector pages (built by tools/build-sectors.py): a big sector sign, then the enquiry form beside the roles */
.sector-top { padding: calc(var(--nav) + clamp(32px, 5vw, 64px)) 0 clamp(32px, 4vw, 48px); }
.sign--big { padding: clamp(28px, 4vw, 52px); gap: 18px; }
.sign--big h1 { font-size: clamp(2.6rem, 6.5vw, 6rem); font-stretch: 125%; letter-spacing: -.03em; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sign--big h1 i { font-size: .8em; flex: none; }
.sign--big p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--white); max-width: 58ch; line-height: 1.55; }
.sector-body { padding-bottom: clamp(64px, 9vw, 120px); }
.sector-body .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .sector-body .wrap { grid-template-columns: 1fr; } }

/* Enquiry form. Buttons are pills, panels 14px, inputs 10px. */
.enquiry { background: var(--blue-deep); gap: 20px; scroll-margin-top: calc(var(--nav) + 16px); }
.enquiry h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.enquiry fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.enquiry legend, .field label { font-size: 14px; font-weight: 600; color: rgba(247, 248, 252, .88); padding: 0; margin-bottom: 8px; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-block; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(247, 248, 252, .4); font-weight: 600; font-size: 15px; transition: background-color .2s, border-color .2s; }
.choice input:checked + span { background: var(--pink); border-color: var(--pink); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 3px; }
.field { display: grid; gap: 0; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--white); background: rgba(247, 248, 252, .06);
  border: 1px solid rgba(247, 248, 252, .4); border-radius: 10px; padding: 12px 14px; min-height: 48px;
}
.field select option { color: var(--ink); }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--white); outline-offset: 1px; border-color: var(--white); }
.field small { color: var(--muted); font-size: 13px; margin-top: 6px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }
.enquiry.is-work .hire-only { display: none; }
.enquiry .btn { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.enquiry .form-note { color: var(--muted); font-size: 14px; }
.enquiry .form-note a { color: var(--white); }
.enquiry .form-sent { background: rgba(247, 248, 252, .08); border-radius: 10px; padding: 14px 16px; font-size: 15px; }
.enquiry .form-sent[hidden] { display: none; }

.roles h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 18px; }
.roles ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.roles li { border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-size: 14px; color: var(--muted); }
.roles p { color: var(--muted); max-width: 46ch; }
.roles .reach { grid-template-columns: 1fr; margin-top: 28px; gap: 18px; }
.roles .reach b { font-size: clamp(1.15rem, 1.8vw, 1.45rem); }

.others { border-top: 1px solid var(--line); }
.others h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 28px; }
.signs--small { grid-template-columns: repeat(5, 1fr); }
.signs--small li:nth-child(n) { grid-column: auto; } /* undo the wide first and last tiles on the homepage */
.signs--small .sign { padding: 20px 20px 22px; }
.signs--small .sign h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
@media (max-width: 960px) { .signs--small { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .signs--small { grid-template-columns: 1fr; } }

/* Privacy policy */
.legal { padding: calc(var(--nav) + clamp(48px, 8vw, 96px)) 0 clamp(64px, 10vw, 120px); }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(2.6rem, 7vw, 5rem); font-stretch: 125%; letter-spacing: -.035em; }
.legal h2 { font-size: 1.5rem; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 68ch; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; display: grid; gap: 8px; }
.legal a { color: inherit; text-decoration: underline; }
.legal__date { margin-top: 12px; }