/* Riot With Us — riotwithus.co.nz
 *
 * Reskinned 9 October 2026 from the artboard at
 * design/Riot With Us Reskin 2026-10-09.dc.html. This replaced the warm
 * off-white "Option B" build of 24 September; that version is in git
 * history, one `git checkout` away, as is the dark Bebas build before it.
 *
 * SINGLE THEME ON PURPOSE. There is no prefers-color-scheme block and there
 * must never be one. This is a brand page: it has to look the same on every
 * viewer's machine, whatever they have their OS set to.
 *
 * Mobile first. One breakpoint that matters, 1024px. Display sizes use
 * clamp() rather than a hard swap at the breakpoint, so copy edits do not
 * need the layout re-tuned by hand afterwards.
 *
 * CONTRAST, checked rather than assumed (WCAG AA needs 4.5:1 for body text):
 *   --accent    #0E6F6A on --bg   5.80:1
 *   --ink-2     #45455A on --bg   9.03:1
 *   --mist-ink  #7FE0DA on --ink 11.64:1
 *   --dk-body   #D2D2DC on --dk-card 9.85:1
 * The old palette's rule — "no accent base under 24px" — existed because
 * that accent failed small. This one passes, so the eyebrow labels use it.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* ground and ink */
  --bg:        #FBFBFD;
  --ink:       #16161D;  /* headings, buttons, nav */
  --ink-2:     #45455A;  /* body copy */
  --ink-3:     #5A5A6E;  /* footer, fine print */
  --line:      #E4E4EC;

  /* teal */
  --accent:      #0E6F6A;  /* eyebrow labels, links */
  --accent-btn:  #0E7C77;  /* primary button */
  --accent-deep: #0A4F4B;  /* link hover */
  --mist:        #E8F7F6;  /* "what we do" ground */
  --mist-2:      #F3FBFA;  /* teal placeholder fill */
  --mist-line:   #2BB8B0;  /* teal placeholder border */
  --mist-ink:    #7FE0DA;  /* teal on dark */

  /* lilac */
  --lilac:       #EDE8FB;  /* contact block, secondary button */
  --lilac-2:     #F4F1FD;  /* lilac placeholder fill */
  --lilac-3:     #F7F4FE;
  --lilac-line:  #B9A7F0;  /* lilac placeholder border */
  --lilac-line2: #8F7BD6;
  --lilac-ink:   #2E2257;  /* on lilac */
  --lilac-ink2:  #3A3060;
  --lilac-ink3:  #1E1640;
  --lilac-deep:  #4B3F7A;  /* placeholder caption */
  --lilac-soft:  #C9BBF6;  /* lilac on dark */

  /* dark section */
  --dk:       #16161D;
  --dk-card:  #26263A;
  --dk-body:  #D2D2DC;

  /* type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;

  /* shape */
  --r-hero:  28px;
  --r-block: 36px;
  --r-card:  24px;
  --r-item:  16px;
  --r-pill:  999px;

  /* layout */
  --pad-x:   16px;
  --maxw:    1240px;
  --sec-gap: 64px;
}

@media (min-width: 1024px) {
  :root {
    --pad-x:   40px;
    --sec-gap: 96px;
  }
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

/* The [hidden] attribute is only a UA rule, so ANY author `display` beats it.
 * `.pill { display: inline-flex }` meant Back and Send both rendered on step 1
 * of the enquiry wizard while their .hidden property was correctly true —
 * the DOM said hidden, the pixels said visible. Found 9 October 2026 by
 * looking at the render after a scripted check had already passed. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.58;
  overflow-x: hidden;
}

@media (min-width: 1024px) { body { font-size: 19px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

img {
  max-width: 100%;
  /* Every <img> carries width/height attributes for layout stability. Those
   * map to presentational hints, so without this the height attribute wins
   * wherever the CSS sets a width and no height. */
  height: auto;
  display: block;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--lilac); color: var(--ink); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  margin: 0; padding: 12px 18px;
  clip: auto;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--r-pill);
  z-index: 100;
}

.page { position: relative; overflow: hidden; isolation: isolate; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ------------------------------------------------------------------- nav */

.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

@media (min-width: 1024px) { .nav { padding-top: 28px; padding-bottom: 28px; } }

/* The lettering wordmark, 9 October 2026, replacing the placard lockup that
 * had been up since earlier the same day.
 *
 * Lisa supplied a drawn set with a light-ground and a dark-ground version of
 * each piece, so NOTHING is recoloured any more — the script that recoloured
 * the placard lockup's cream lettering to --ink is gone, and so is the risk
 * that came with it. riot-wordmark.svg is her light-ground artwork, used as
 * drawn; riot-wordmark-dark.svg is the cream one, here for whenever a dark
 * surface needs it.
 *
 * They are SVG, so one file is sharp at every size and the nav no longer ships
 * a 1236px raster to render at 34px. The serving copies have their Adobe C2PA
 * <metadata> block stripped — 67% of the wordmark and 94% of the favicon was
 * provenance blob, on a file that loads on every page. The untouched originals
 * are the record and stay in design/logo/lettering-2026-10-09/. */
.wordmark { display: inline-flex; align-items: center; }

.wordmark img {
  height: 30px;
  width: auto;
  display: block;
}

@media (min-width: 1024px) { .wordmark img { height: 34px; } }

.nav__links { display: none; }

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
  }
  .nav__links a {
    color: var(--ink);
    font-size: 15px;
  }
  .nav__links a:hover { color: var(--accent-deep); }
  .nav__links .pill { color: #FFFFFF; }
}

.nav__toggle {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.nav__toggle svg { fill: currentColor; }

@media (min-width: 1024px) { .nav__toggle { display: none; } }

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  padding: 20px var(--pad-x) 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.menu[hidden] { display: none; }

.menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.menu a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.menu a.pill {
  border-bottom: 0;
  margin-top: 20px;
  align-self: flex-start;
  font-size: 16px;
}

/* ----------------------------------------------------------------- pills */

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  background: var(--lilac);
  color: var(--lilac-ink);
}

.pill:hover { background: #E3DCF8; color: var(--lilac-ink3); }

.pill--solid { background: var(--ink); color: #FFFFFF; }
.pill--solid:hover { background: #000000; color: #FFFFFF; }

.pill--accent { background: var(--accent-btn); color: #FFFFFF; }
.pill--accent:hover { background: var(--accent-deep); color: #FFFFFF; }

/* --------------------------------------------------------------- eyebrow */

.eyebrow {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--dk { color: var(--mist-ink); }

/* ----------------------------------------------------------------- grids */

.two, .three {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 1024px) {
  .two   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
  .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.two--top { align-items: start; }

/* ----------------------------------------------------- photos and plates */
/* A plate is a labelled empty box. The repo rule is real photographs only —
 * a slot with no photograph stays a plate saying what belongs in it, and
 * never gets an illustration or a stock image to fill the hole. */

.shot {
  border-radius: var(--r-hero);
  overflow: hidden;
  background: var(--lilac-2);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The hero photograph is a wide shot and the two of them sit left of centre.
 * At phone width the full frame shrinks them to nothing, so it crops to 4:3
 * and holds the subjects rather than the empty wall to their right. */
.shot--hero { aspect-ratio: 3 / 4; margin-top: 40px; }
.shot--tall { aspect-ratio: 3 / 4; }
.shot--sq   { aspect-ratio: 1 / 1; }
.shot--wide { aspect-ratio: 4 / 3; }

@media (min-width: 1024px) {
  .shot--hero { margin-top: 0; }
}

.plate {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  border-radius: var(--r-hero);
  border: 2px dashed var(--lilac-line);
  background: var(--lilac-2);
  color: var(--lilac-deep);
  font-size: 15px;
}

.plate--teal {
  border-color: var(--mist-line);
  background: var(--mist-2);
  color: var(--accent-deep);
}

.plate--deep { border-color: var(--lilac-line2); background: var(--lilac-3); color: var(--lilac-ink2); }

/* ------------------------------------------------------------------ hero */

.hero { padding: 48px 0 0; }

@media (min-width: 1024px) { .hero { padding-top: 72px; } }

/* The hero photograph is a PORTRAIT (Lisa's pick, 9 October). A portrait
 * cannot fill a full-width landscape band without cropping their heads or
 * their feet off, so the hero is a split instead: the statement on the
 * left, the photograph standing beside it. The photo column is the narrower
 * of the two because the source is only 660px wide and stretching it across
 * half of a 1240px container would show. */
@media (min-width: 1024px) {
  .hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 56px;
    align-items: center;
  }
  .hero--split .shot { margin-top: 0; }
}

.hero h1 {
  font-size: clamp(44px, 7.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 16ch;
}

.hero__sub {
  margin: 28px 0 0;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
}

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* -------------------------------------------------------------- sections */

.sec { padding: var(--sec-gap) 0; }

.sec h2 {
  font-size: clamp(32px, 5.2vw, 52px);
}

.sec__lede {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.65;
  color: var(--ink-2);
}

/* "AI is a tool" — heading left, copy right, no eyebrow */
.stance h2 { max-width: 14ch; }

/* what we do — mist ground, full bleed */
.band {
  background: var(--mist);
  padding: var(--sec-gap) 0;
}

.band h2 { margin-bottom: 20px; }
.band .sec__lede { color: #2F3A3A; margin-bottom: 28px; }

.offer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offer li {
  background: #FFFFFF;
  border-radius: var(--r-item);
  padding: 18px 22px;
  font-size: 17px;
  color: var(--ink-2);
  list-style: none;
}

.offer { margin: 0; padding: 0; }

/* credentials */
.creds h2 { margin-bottom: 24px; max-width: 18ch; }
.creds .last { font-weight: 700; color: var(--ink); }

/* Two up at every width. Stacking them on desktop ran the right column to
 * about a thousand pixels against a short left column, which left a hole
 * down the left of the whole section. */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 1024px) { .people { gap: 24px; } }

.person figcaption {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

.person .role {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* who we work with — dark band */
.dark {
  background: var(--dk);
  color: #FFFFFF;
  padding: var(--sec-gap) 0;
}

.dark h2 {
  color: #FFFFFF;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.02;
  max-width: 16ch;
  margin-bottom: 20px;
}

.dark__lede {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.6;
  color: var(--dk-body);
  max-width: 72ch;
  margin-bottom: 40px;
}

@media (min-width: 1024px) { .dark__lede { margin-bottom: 56px; } }

.trait {
  border-radius: var(--r-card);
  background: var(--dk-card);
  padding: 28px;
}

.trait h3 {
  font-size: 26px;
  margin-bottom: 10px;
  color: var(--mist-ink);
}

.trait:nth-child(2) h3 { color: var(--lilac-soft); }

.trait p { font-size: 17px; line-height: 1.55; color: var(--dk-body); }

/* ------------------------------------------------------------- projects */
/* Ported from the pre-reskin home page, 9 October 2026, when the ventures
 * section got its own page. Same copy and the same real screenshots — the
 * numbers in them ($1,500/mo, 1,000-plus reviews) are the proof this site
 * exists to carry, so they were moved rather than rewritten. */

.projects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 700px)  { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.project {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.project > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--line);
}

.project__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }

.label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.project h3 { font-size: 24px; margin-bottom: 10px; }
.project p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}

.cta:hover { color: var(--accent-deep); }

/* the "yours next" card has no screenshot and is deliberately the odd one */
.project--next {
  background: var(--lilac);
  border-color: transparent;
  justify-content: space-between;
}

.project--next .label { color: var(--lilac-ink); }
.project--next h3 { color: var(--lilac-ink3); }
.project--next .cta { color: var(--lilac-ink); }
.project--next .cta:hover { color: var(--lilac-ink3); }

/* software rows — image beside the words */
.rows { display: flex; flex-direction: column; gap: 24px; }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  background: #FFFFFF;
  border-radius: var(--r-card);
  padding: 20px;
}

@media (min-width: 700px) {
  .row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: 24px; }
}

.row img { width: 100%; border-radius: var(--r-item); aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.row h3 { font-size: 22px; margin-bottom: 4px; }
.row .tag { display: block; font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.row p { font-size: 16px; line-height: 1.55; }

/* ---------------------------------------------------- who we are · rules */

.rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 700px)  { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rule-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px 22px;
}

.rule-card .n {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 14px;
}

.rule-card h3 { font-size: 21px; margin-bottom: 8px; }
.rule-card p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* the name, set as the one big statement on the page */
.why { background: var(--dk); color: #FFFFFF; padding: var(--sec-gap) 0; }

.why h2 {
  color: #FFFFFF;
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.04;
  max-width: 20ch;
  margin-bottom: 32px;
}

.why .contact__actions { margin-top: 0; }
.why .contact__email { color: var(--mist-ink); }
.why .contact__email:hover { color: #FFFFFF; }

/* a plain page header, for the pages that are not the home page */
.phead { padding: 32px 0 var(--sec-gap); }
.phead h1 { font-size: clamp(38px, 6.4vw, 64px); max-width: 18ch; }
.phead .sec__lede { margin-top: 24px; max-width: 64ch; }

/* ------------------------------------------------- work with us · form */
/* Ported 9 October 2026 from design/Riot With Us Work With Us 2026-10-09
 * .dc.html — a five-step wizard replacing the one long scroll. The
 * artboard's own tokens were mapped onto this file's rather than carried
 * over, so there is still one stylesheet and one palette. */

:root {
  --field-line: #DCDCE6;  /* a touch darker than --line; inputs need the edge */
  --field-bg:   #FAFAFC;
  --bad:        #B42318;
}

.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 32px 0;
}

@media (min-width: 900px) {
  .head {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
    padding: 56px 0 48px;
  }
}

.head h1 { font-size: clamp(42px, 6.6vw, 76px); line-height: 0.98; }
.head .lede { margin: 24px 0 0; font-size: clamp(18px, 2.2vw, 20px); color: var(--ink-2); max-width: 560px; }

.facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

.facts span {
  background: var(--mist);
  color: var(--accent-deep);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-pill);
}

.next { background: var(--lilac); border-radius: var(--r-card); padding: 28px; }
.next h2 { margin: 0 0 16px; font-size: 20px; color: var(--lilac-ink); letter-spacing: -0.01em; }
.next ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.next li { display: flex; gap: 14px; align-items: flex-start; color: var(--lilac-ink2); font-size: 16px; }

.next b {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--lilac-ink);
  display: grid; place-items: center;
  font-size: 14px;
}

/* the two-column shell: step rail beside the card */
.formwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding-bottom: var(--sec-gap);
}

@media (min-width: 900px) {
  .formwrap { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
}

.steps {
  display: flex;
  gap: 4px;
  margin: 0; padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
}

@media (min-width: 900px) {
  .steps { position: sticky; top: 24px; flex-direction: column; gap: 6px; overflow: visible; padding-bottom: 0; }
}

.steps button {
  width: 100%;
  display: flex; gap: 12px; align-items: center;
  text-align: left;
  background: none; border: 0;
  padding: 10px;
  border-radius: 14px;
  font: inherit; font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}

@media (min-width: 900px) { .steps button { padding: 12px 14px; } }

.steps button:hover { background: #F1F1F6; }

.steps .dot {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--field-line);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  background: #FFFFFF;
}

.steps [aria-current="step"] {
  background: #FFFFFF;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--field-line);
}

.steps [aria-current="step"] .dot { background: var(--accent-btn); border-color: var(--accent-btn); color: #FFFFFF; }
.steps .done .dot { background: var(--mist); border-color: var(--mist); color: var(--accent-deep); }

/* the label hides on a narrow rail so five steps fit across a phone */
.steps .lbl { display: none; }
.steps [aria-current="step"] .lbl { display: inline; }
@media (min-width: 900px) { .steps .lbl { display: inline; } }

.bar { height: 6px; background: #E9E9F0; border-radius: var(--r-pill); overflow: hidden; margin: 0 0 28px; }
.bar i { display: block; height: 100%; width: 20%; background: var(--accent-btn); border-radius: var(--r-pill); transition: width 0.3s; }

.card {
  background: #FFFFFF;
  border: 1px solid var(--field-line);
  border-radius: 22px;
  padding: 24px 20px;
}

@media (min-width: 900px) { .card { border-radius: var(--r-hero); padding: 44px; } }

/* ------------------------------------------------------------ the form */

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin: 0 0 8px; width: 100%; }

.step-of {
  display: block;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.step-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hint { margin: 10px 0 32px; color: var(--ink-2); }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 22px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; } }

.field { margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.grid .field { margin: 0; }

label, .field__label { font-weight: 600; font-size: 16px; color: var(--ink); }
.opt { font-weight: 400; color: var(--ink-2); }
.req { color: var(--accent); }
.ex  { font-weight: 400; color: var(--ink-2); font-size: 14px; }

input[type=text], input[type=email], input[type=tel], textarea {
  width: 100%;
  font: inherit; font-size: 16px;
  color: var(--ink);
  background: var(--field-bg);
  border: 1.5px solid var(--field-line);
  border-radius: 14px;
  padding: 13px 16px;
  min-height: 50px;
}

textarea { resize: vertical; min-height: 110px; }

input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-btn);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px var(--mist);
}

input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--bad); }

.choices { display: flex; gap: 10px; flex-wrap: wrap; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }

.choice span {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-pill);
  font-weight: 500;
  cursor: pointer;
  background: #FFFFFF;
}

.choice input:checked + span { background: var(--accent-btn); border-color: var(--accent-btn); color: #FFFFFF; }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--mist); }

/* the honeypot. Off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; }

.actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--line);
}

.actions .right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-left: auto; }

.pill--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--field-line); }
.pill--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.skip {
  background: none; border: 0;
  font: inherit; font-size: 15px;
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px; padding: 0 8px;
}

.status { margin: 16px 0 0; font-weight: 500; }
.status[data-state=bad] { color: var(--bad); }
.status[data-state=ok]  { color: var(--accent-deep); }

.fallback { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }

.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent);
  text-decoration: underline; cursor: pointer;
}

.thanks { text-align: center; padding: 56px 20px; }
.thanks h2 { font-size: clamp(34px, 6vw, 48px); margin: 0 0 12px; }
.thanks p { color: var(--ink-2); font-size: 19px; max-width: 520px; margin: 0 auto; }

/* contact */
.contact { padding: var(--sec-gap) 0; }

.contact__block {
  border-radius: var(--r-block);
  background: var(--lilac);
  padding: 40px 24px;
}

@media (min-width: 1024px) { .contact__block { padding: 72px 56px; } }

.contact h2 {
  color: var(--lilac-ink3);
  font-size: clamp(32px, 5.6vw, 56px);
  line-height: 1.03;
  margin-bottom: 24px;
}

.contact p { font-size: clamp(17px, 2vw, 19px); line-height: 1.65; color: var(--lilac-ink2); }

.contact__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
}

.contact__email { color: var(--lilac-ink); font-weight: 500; }
.contact__email:hover { color: var(--lilac-ink3); }

/* ---------------------------------------------------------------- footer */

.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--pad-x) 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-3);
}

.footer a { color: var(--ink-3); }
.footer a:hover { color: var(--accent-deep); }

/* ===================================================== the short enquiry form
 * Added 12 October 2026 with /work-with-us's rebuild. The five-step wizard it
 * replaced still uses everything above this block — it lives at /onboarding
 * now, so nothing here may change .steps, .bar or .form__set's hidden state.
 *
 * Phone first: designed at 390px, every target 44px, no horizontal scroll. */

/* No step rail on this one, so the 260px sidebar column goes. */
.formwrap--short { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
@media (min-width: 900px) { .formwrap--short { grid-template-columns: minmax(0, 1fr); } }

/* Every section is visible at once here, where the wizard showed one. */
.formwrap--short .form__set + .form__set {
  margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--line);
}
.formwrap--short .step-title { font-size: clamp(23px, 3.4vw, 30px); }
.formwrap--short .hint { margin: 10px 0 0; }

/* ------------------------------------------------------------- tick list */
.ticks { display: grid; gap: 10px; margin-top: 20px; }

.tick {
  display: block;
  border: 1.5px solid var(--line);
  border-radius: var(--r-item);
  background: #FFFFFF;
  cursor: pointer;
}
.tick__row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 16px; min-height: 56px;
}
.tick input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  margin: 0; flex: 0 0 auto;
  width: 22px; height: 22px; position: relative; top: 1px;
  border: 1.5px solid var(--field-line); border-radius: 6px;
  background: #FFFFFF; cursor: pointer;
}
.tick input[type=checkbox]:checked { background: var(--accent-btn); border-color: var(--accent-btn); }
.tick input[type=checkbox]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid #FFFFFF; border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}
.tick input[type=checkbox]:focus-visible { box-shadow: 0 0 0 4px var(--mist); }

.tick__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; line-height: 1.3;
}
.tick__s {
  display: block; margin-top: 3px;
  font-family: var(--font-body); font-weight: 400;
  font-size: 14px; color: var(--ink-3);
}
.tick:has(input:checked) { border-color: var(--accent-btn); background: var(--mist-2); }

/* The reveal. CSS, not script — so it survives JS being off and never flashes
   the wrong state on load. :has() is in every browser this site supports; a
   browser without it shows the sub-options always, which is a readable form
   rather than a broken one. */
.sub {
  display: none;
  padding: 0 16px 18px 52px;
  border-top: 1px dashed var(--mist-line);
}
.tick:has(input:checked) .sub { display: block; }
.sub__l {
  display: block; margin: 14px 0 12px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 460px) { .sub { padding-left: 16px; } }

/* "Something else" sits in the chip row and has to look like a chip. */
.field--inline { display: inline-flex; margin: 0; }
.field--inline input[type=text] {
  min-height: 44px; width: 170px;
  padding: 10px 18px;
  border: 1.5px solid var(--field-line); border-radius: var(--r-pill);
  background: #FFFFFF; font: inherit; font-size: 16px;
  /* font:inherit picks up the surrounding label's weight, which rendered the
     placeholder bold and made an empty field look like a filled one. */
  font-weight: 400;
}

/* Readiness: one choice, stacked on a phone so a thumb cannot miss. */
.choices--block { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 620px) { .choices--block { grid-template-columns: 1fr 1fr; } }
.choices--block .choice span {
  display: flex; width: 100%; padding: 15px 18px;
  border-radius: var(--r-item);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}

/* One button, so nothing to space apart. */
.actions--one { justify-content: flex-start; }
.actions--one .form__submit { min-width: 240px; }
@media (max-width: 460px) { .actions--one .form__submit { width: 100%; } }

/* ------------------------------------- "this is what we already have"
 * On /more-info, when the link carries a lead token. Added 13 October 2026:
 * being asked your own business name by people you have already told is the
 * small thing that makes a form feel like paperwork. */
.known {
  background: var(--mist-2);
  border: 1px solid var(--mist-line);
  border-radius: var(--r-card);
  padding: 22px 20px;
  margin-bottom: 22px;
}
@media (min-width: 720px) { .known { padding: 26px 28px; } }
.known h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(19px, 2.6vw, 23px); line-height: 1.15; margin: 0;
}
.known > p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.known ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.known li {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  padding-top: 10px; border-top: 1px solid var(--mist-line);
}
.known li b {
  font-family: var(--font-body); font-weight: 500;
  font-size: 13px; color: var(--accent-deep);
}
.known li span { font-size: 15.5px; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 620px) {
  .known li { grid-template-columns: 210px 1fr; gap: 14px; align-items: baseline; }
}