/* sitekit base styles. Colours and fonts come from theme.css (written per site by `sitekit build`).
   Direction B, "product-grade": main-colour bands (the hero, work, the form, the footer) with a soft
   accent glow; light sections in between, holding white cards. The accent colour fills buttons and
   decorates; it is never used for text on a light background.
   Motion follows Emil Kowalski's rules: strong ease-out curves, under 300 ms for anything the visitor
   triggers, only transform and opacity animated, hover effects only on devices with a mouse, and
   nothing hidden or moving for visitors who ask for reduced motion. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --on-main: var(--colour-background);
  --on-main-soft: color-mix(in srgb, var(--colour-background) 74%, var(--colour-main));
  --muted-light: color-mix(in srgb, var(--colour-text) 78%, var(--colour-background));
  --muted: var(--muted-light);
  --surface: color-mix(in srgb, var(--colour-background) 25%, #fff); /* a warm white for cards */
  --field: color-mix(in srgb, var(--colour-background) 50%, #fff);
  --tint: color-mix(in srgb, var(--colour-main) 6%, var(--colour-background));
  --deep: color-mix(in srgb, var(--colour-main) 78%, #000); /* the footer */
  --line: color-mix(in srgb, var(--colour-main) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--colour-main) 24%, transparent);
  --line-on-main: color-mix(in srgb, var(--colour-background) 14%, transparent);
  --glow: color-mix(in srgb, var(--colour-accent) 30%, transparent);
  --shadow-card:
    0 0 0 1px var(--line),
    0 1px 2px color-mix(in srgb, var(--colour-main) 6%, transparent);
  --shadow-float: 0 30px 70px -24px rgb(0 0 0 / 0.55);
  --colour-error: #b3261e; /* 6.2:1 on the light background */
  --colour-ok: #1f6f4a;

  --radius-card: 1.125rem;
  --radius-inner: 0.75rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --section: clamp(4.5rem, 9vw, 7rem);
  --top-bar: 4.25rem;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-bar) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--colour-background);
  color: var(--colour-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* long addresses wrap instead of pushing the page sideways */
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-headings);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--colour-main);
  text-wrap: balance;
}
h1 { font-size: clamp(2.625rem, 6.5vw + 0.5rem, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 3vw + 1rem, 2.875rem); line-height: 1.06; }
h3 { font-size: 1.3125rem; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--colour-main); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
:focus-visible { outline: 3px solid var(--colour-main); outline-offset: 3px; border-radius: 0.25rem; }
::selection { background: var(--colour-main); color: var(--colour-background); }

/* The main-colour areas: light text, accent focus rings and selection */
:is(.top-bar, .hero, .work, .post-select, .book__words, .footer, .problem__answer, .strip, .package--featured, .our-work, .latest-work__card, .refer) {
  --muted: var(--on-main-soft);
  color: var(--on-main-soft);
}
:is(.top-bar, .hero, .work, .post-select, .book__words, .footer, .problem__answer, .package--featured, .our-work, .latest-work__card, .refer) :is(h1, h2, h3) { color: var(--on-main); }
:is(.top-bar, .hero, .work, .post-select, .book__words, .footer, .problem__answer, .package--featured, .cookies, .our-work, .latest-work__card, .refer) :focus-visible { outline-color: var(--colour-accent); }
:is(.top-bar, .hero, .work, .post-select, .book, .footer, .problem__answer, .package--featured, .cookies, .our-work, .latest-work__card, .refer) ::selection { background: var(--colour-accent); color: var(--colour-main); }

.wrap { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; }
/* One-column grids never grow wider than the page, even with text enlarged to 200% */
:is(.section-head, .hero__inner, .cards, .features__list, .problem__inner, .work__grid, .packages__list,
  .steps, .result, .about__inner, .faq__inner, .book__inner, .enquiry, .footer__inner,
  .box__list, .price__inner, .own__inner, .proof-site__inner, .refer) {
  grid-template-columns: minmax(0, 1fr);
}
main > section { padding-block: var(--section); }
/* Two light sections in a row share one gap rather than two */
main > section:not(.hero, .work, .post-select, .book, .our-work) + section:not(.hero, .work, .post-select, .book, .our-work) { padding-top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 40;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  background: var(--colour-accent);
  color: var(--colour-on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%); /* shown at once on Tab: keyboard actions are never animated */
}
.skip-link:focus-visible { transform: none; }

.eyebrow {
  margin: 0 0 0.75rem;
  font: 600 0.9375rem/1.3 var(--font-body);
  color: var(--muted);
}
:is(.hero, .work, .book__words, .problem__answer, .our-work, .latest-work__card, .refer) .eyebrow { color: var(--colour-accent); }
/* White cards inside the main-colour areas go back to the light-background text colours */
:is(.screen, .phones__stat, .devices__stat, .flow__step) { --muted: var(--muted-light); }

.section-head { display: grid; gap: 0.875rem 3rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head h2 { margin: 0; }
.section-head__intro { margin: 0; max-width: 40ch; color: var(--muted); font-size: 1.0625rem; }
@media (min-width: 56rem) {
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; }
}

/* Buttons: pills with a little light on top, that press in slightly. Each ends with the logo's full stop, a dot in the
   text colour; under the mouse the button lifts and the dot grows into a circle with an arrow cut through it. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.875rem;
  padding: 0.75rem 1rem 0.75rem 1.375rem;
  border: 0;
  border-radius: 999px;
  background: var(--colour-accent) linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0) 65%);
  color: var(--colour-on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 10px 22px -12px rgb(0 0 0 / 0.5);
  font: 600 0.9375rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms ease,
    box-shadow 200ms ease,
    color 160ms ease;
}
.button::after {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 -0.125rem 0 -0.375rem;
  border-radius: 50%;
  background: currentColor;
  /* the arrow is a hole through the dot, so it shows the button's own colour whatever the button */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9M10.5 6l4 4-4 4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0% no-repeat exclude, linear-gradient(#000 0 0);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9M10.5 6l4 4-4 4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0% no-repeat exclude, linear-gradient(#000 0 0);
  transform: scale(0.2);
  transform-origin: 0% 74.8%; /* small, it sits on the baseline beside the last letter, like a full stop (bottom = 74.8% + 0.2 × 25.2% ≈ 80% of the box) */
  transition: transform 260ms var(--ease-out), -webkit-mask-size 260ms var(--ease-out), mask-size 260ms var(--ease-out);
}
.button:active { transform: scale(0.97); }
.button:disabled { opacity: 0.6; cursor: progress; transform: none; }
.button--large { min-height: 3.25rem; padding: 0.875rem 1.25rem 0.875rem 1.625rem; font-size: 1rem; }
.button--small { min-height: 2.5rem; padding: 0.5rem 0.75rem 0.5rem 1.05rem; font-size: 0.875rem; }
.button--small::after { width: 1.125rem; height: 1.125rem; }
.button--block { width: 100%; }
.button--ghost { background: color-mix(in srgb, var(--on-main) 6%, transparent); color: var(--on-main); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-main) 32%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.button--outline { background: transparent; color: var(--colour-main); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.cookies__button { padding-inline: 1.05rem; }
.cookies__button::after { display: none; } /* Accept and Reject stay plain and the same */
@media (hover: hover) and (pointer: fine) {
  .button:hover { text-decoration: none; background-color: color-mix(in srgb, var(--colour-accent) 86%, #fff); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 16px 28px -14px rgb(0 0 0 / 0.55); }
  .button:hover::after { transform: translateX(0.3125rem); -webkit-mask-size: 70%, auto; mask-size: 70%, auto; }
  .button:active { transform: scale(0.97); }
  .button--ghost:hover { background-color: color-mix(in srgb, var(--on-main) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-main) 60%, transparent); }
  .button--outline:hover { background-color: var(--colour-main); color: var(--on-main); box-shadow: inset 0 0 0 1.5px var(--colour-main), 0 16px 28px -14px rgb(0 0 0 / 0.45); }
}

/* Logo */

.wordmark {
  margin: 0;
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--on-main);
  text-decoration: none;
}
.wordmark__dot { color: var(--colour-accent); }
/* The logo is a picture, so it keeps its size when visitors enlarge the text */
.wordmark--logo img { display: block; width: auto; height: 38px; }
.footer .wordmark--logo img { height: 44px; }

/* Top bar: at the top of the page it is part of the navy hero; once the page scrolls (site.js sets data-lifted)
   it lifts off into a floating navy pill. The logo's sky full stop marks the page you're on and follows the mouse
   along the links. On phones the links open from a Menu button. Without JavaScript (or if site.js can't load, which
   removes the `js` class) they sit in a row under the logo instead, and the header button always shows. */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--colour-main);
  transition: background-color 200ms ease, padding 300ms var(--ease-out);
}
.top-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--top-bar);
  padding-block: 0.5rem;
  border-radius: 0;
  transition: width 300ms var(--ease-out), min-height 300ms var(--ease-out), padding 300ms var(--ease-out),
    border-radius 300ms var(--ease-out), box-shadow 300ms ease;
}
/* shorter, inside a gap that keeps the same total height, so the page under it doesn't jump */
.top-bar[data-lifted] { padding-block: 0.5rem; background: transparent; }
.top-bar[data-lifted] .top-bar__inner {
  width: min(100% - 1.25rem, 64rem);
  min-height: calc(var(--top-bar) - 1rem);
  padding: 0.3125rem 0.375rem 0.3125rem 1.125rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--colour-main) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: inset 0 0 0 1px var(--line-on-main), 0 14px 32px -14px rgb(0 0 0 / 0.5);
}
.top-bar .wordmark { flex: none; margin-right: auto; }
.top-bar__nav ul { margin: 0; padding: 0; list-style: none; }
.top-bar__nav a:not(.button) { color: var(--on-main-soft); font-weight: 600; text-decoration: none; transition: color 160ms ease; }
.top-bar__nav a[aria-current="page"] { color: var(--on-main); }
@media (hover: hover) and (pointer: fine) { .top-bar__nav a:not(.button):hover { color: var(--on-main); } }
.top-bar__button { display: none; flex: none; }
.top-bar__menu {
  display: none;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-main) 10%, transparent);
  color: var(--on-main);
  font: 600 0.9375rem/1 var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.top-bar__menu:active { transform: scale(0.97); }
.top-bar__menu-icon { position: relative; width: 1rem; height: 0.625rem; }
.top-bar__menu-icon::before,
.top-bar__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 200ms var(--ease-out);
}
.top-bar__menu-icon::before { top: 0; }
.top-bar__menu-icon::after { bottom: 0; }
.top-bar__menu[aria-expanded="true"] .top-bar__menu-icon::before { transform: translateY(4px) rotate(45deg); }
.top-bar__menu[aria-expanded="true"] .top-bar__menu-icon::after { transform: translateY(-4px) rotate(-45deg); }

@media (min-width: 30rem) { .top-bar__button { display: inline-flex; } }
/* No Menu button to share the bar with: no links, or no JavaScript */
.top-bar--plain .top-bar__button,
html:not(.js) .top-bar__button { display: inline-flex; }
@media (max-width: 63.99rem) {
  html:not(.js) .top-bar__inner { flex-wrap: wrap; }
  html:not(.js) .top-bar__nav { order: 3; width: 100%; overflow-x: auto; }
  html:not(.js) .top-bar__nav ul { display: flex; gap: 1.25rem; padding-bottom: 0.5rem; white-space: nowrap; }
  html:not(.js) .top-bar__nav-button { display: none; }

  html.js .top-bar__menu { display: inline-flex; }
  html.js .top-bar__nav {
    position: absolute;
    inset: 100% 0 auto;
    padding: 0.75rem var(--gutter) 1.5rem;
    border-radius: 0 0 1.5rem 1.5rem;
    background: var(--colour-main);
    box-shadow: inset 0 1px 0 var(--line-on-main), 0 30px 60px -24px rgb(0 0 0 / 0.6);
    /* never taller than the screen under the bar, so the last link stays reachable with large text */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-0.5rem);
    visibility: hidden;
    /* closing is quicker than opening */
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s linear 150ms;
  }
  html.js .top-bar[data-lifted] .top-bar__nav { inset: calc(100% - 0.125rem) 0.625rem auto; padding-inline: 1.25rem; border-radius: 1.5rem; box-shadow: inset 0 0 0 1px var(--line-on-main), 0 30px 60px -24px rgb(0 0 0 / 0.6); }
  /* the page behind dims while the menu is open (a tap on it closes the menu: site.js) */
  html.js .top-bar::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgb(8 12 24 / 0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
  html.js .top-bar[data-open]::before { opacity: 1; visibility: visible; transition: opacity 250ms ease, visibility 0s; }
  html.js .top-bar[data-open] .top-bar__nav {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
  }
  html.js .top-bar__nav > ul > li:not(.top-bar__nav-button) > a {
    display: block;
    padding: 0.375rem 0;
    font-family: var(--font-headings);
    font-size: clamp(1.875rem, 8vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--on-main);
  }
  /* the page you're on ends with the logo's full stop */
  html.js .top-bar__nav > ul > li > a[aria-current="page"]::after { content: ""; display: inline-block; width: 0.17em; height: 0.17em; margin-left: 0.06em; border-radius: 50%; background: var(--colour-accent); }
  html.js .top-bar__nav-button { margin-top: 1.5rem; }
  html.js .top-bar__nav-button .button { width: 100%; }
  /* the links rise in one after another as the menu opens (closing is plain and quick) */
  html.js .top-bar__nav > ul > li { opacity: 0; transform: translateY(0.5rem); transition: opacity 120ms ease, transform 120ms var(--ease-out); }
  html.js .top-bar[data-open] .top-bar__nav > ul > li { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); }
  html.js .top-bar[data-open] .top-bar__nav > ul > li:nth-child(2) { transition-delay: 35ms; }
  html.js .top-bar[data-open] .top-bar__nav > ul > li:nth-child(3) { transition-delay: 70ms; }
  html.js .top-bar[data-open] .top-bar__nav > ul > li:nth-child(4) { transition-delay: 105ms; }
  html.js .top-bar[data-open] .top-bar__nav > ul > li:nth-child(5) { transition-delay: 140ms; }
  html.js .top-bar[data-open] .top-bar__nav > ul > li:nth-child(6) { transition-delay: 175ms; }
  html.js .top-bar[data-open] .top-bar__nav > ul > li:nth-child(n + 7) { transition-delay: 210ms; }
}
@media (min-width: 64rem) {
  .top-bar__inner { gap: 1.5rem; }
  .top-bar__nav ul { display: flex; align-items: center; gap: 1.75rem; }
  .top-bar__nav > ul { position: relative; }
  .top-bar__nav a:not(.button) { position: relative; font-size: 0.9375rem; }
  .top-bar__nav a[aria-current="page"]::after,
  .top-bar__dot {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.625rem;
    width: 0.375rem;
    height: 0.375rem;
    margin-left: -0.1875rem;
    border-radius: 50%;
    background: var(--colour-accent);
  }
  /* with site.js one dot does the job, and glides to whichever link the mouse is on */
  .top-bar__nav[data-dot] a[aria-current="page"]::after { display: none; }
  .top-bar__dot { left: 0; margin: 0; opacity: 0; pointer-events: none; transition: transform 380ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 150ms ease; }
  .top-bar__dot[data-on] { opacity: 1; }
  .top-bar__nav-button { display: none; }
}

/* On phones, once the hero has scrolled away, "Book your free audit" waits at the foot of the screen (site.js shows it;
   it steps aside while the form or the cookie banner is on screen, or the menu is open) */
.cta-dock { display: none; }
@media (max-width: 47.99rem) {
  html.js .cta-dock {
    display: inline-flex;
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 15;
    translate: -50% 0;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 18px 36px -12px rgb(0 0 0 / 0.6);
    opacity: 0;
    transform: translateY(1.5rem);
    visibility: hidden;
    transition: opacity 150ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  html.js .cta-dock[data-shown] { opacity: 1; transform: none; visibility: visible; transition: opacity 250ms ease, transform 400ms var(--ease-out), visibility 0s; }
  html.js .cta-dock[data-shown]:active { transform: scale(0.97); }
}

/* A drop-down under a top bar link (NavLink.links): on laptops it opens on hover (where there is a mouse) or focus,
   growing from the link, in the bar's navy, each page marked by an empty sky ring that fills on the page you're on or
   under the mouse; on a touch screen that wide, its links sit in the bar like any other; in the phone menu they sit
   under their parent as sky pills. No JavaScript. The breakpoints are the top bar's (64rem). */
.top-bar__caret { width: 10px; height: 10px; margin-left: 0.3125rem; vertical-align: -1px; opacity: 0.7; transition: transform 160ms var(--ease-out), opacity 160ms ease; }
.top-bar__nav .top-bar__sub { margin: 0; padding: 0; list-style: none; }
@media (min-width: 64rem) {
  .top-bar__group { position: relative; }
  .top-bar__nav .top-bar__sub { /* .top-bar__nav ul lays its items in a row and zeroes margins and padding, so this needs the same weight */
    position: absolute;
    top: 100%;
    left: -0.875rem;
    z-index: 5;
    display: block;
    min-width: 12rem;
    margin-top: 1.125rem;
    padding: 0.4375rem;
    border-radius: 1.125rem;
    background: var(--colour-main);
    box-shadow: inset 0 0 0 1px var(--line-on-main), 0 22px 44px -18px rgb(0 0 0 / 0.6);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: 1.5rem top;
    pointer-events: none;
    transition: opacity 150ms ease, transform 200ms var(--ease-out);
  }
  .top-bar__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1.125rem; height: 1.125rem; } /* keeps the mouse's path open */
  .top-bar__group:focus-within .top-bar__sub { opacity: 1; transform: none; pointer-events: auto; }
  .top-bar__group:focus-within .top-bar__caret { transform: rotate(180deg); opacity: 1; }
  .top-bar__sub a:not(.button) { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem 0.625rem 0.875rem; border-radius: 0.75rem; color: var(--on-main); font-size: 0.9375rem; white-space: nowrap; transition: background-color 150ms ease; }
  .top-bar__sub a:not(.button)::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--colour-accent); transition: background-color 150ms ease; }
  .top-bar__sub a[aria-current="page"]::before { background: var(--colour-accent); }
  .top-bar__sub a[aria-current="page"]::after { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .top-bar__group:hover .top-bar__sub { opacity: 1; transform: none; pointer-events: auto; }
    .top-bar__group:hover .top-bar__caret { transform: rotate(180deg); opacity: 1; }
    .top-bar__sub a:hover { background: color-mix(in srgb, var(--colour-accent) 14%, transparent); }
    .top-bar__sub a:hover::before { background: var(--colour-accent); }
  }
  @media (hover: none) { /* a touch screen: no panel, the links take their place in the bar */
    .top-bar__group, .top-bar__nav .top-bar__sub { display: contents; }
    .top-bar__caret { display: none; }
    .top-bar__sub a:not(.button) { padding: 0; font-size: 0.9375rem; }
    .top-bar__sub a[aria-current="page"]::after { display: block; }
  }
}
@media (max-width: 63.99rem) {
  .top-bar__caret { display: none; }
  html.js .top-bar__nav .top-bar__sub { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.625rem; }
  html.js .top-bar__nav .top-bar__sub a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem 0.5rem 0.8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--colour-accent) 45%, transparent); color: var(--colour-accent); font-size: 1rem; }
  html.js .top-bar__nav .top-bar__sub a::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--colour-accent); }
  html.js .top-bar__nav .top-bar__sub a[aria-current="page"] { background: color-mix(in srgb, var(--colour-accent) 16%, transparent); }
  html.js .top-bar__nav .top-bar__sub a[aria-current="page"]::before { background: var(--colour-accent); }
  html:not(.js) .top-bar__group, html:not(.js) .top-bar__nav .top-bar__sub { display: contents; } /* in the row of links, like any other */
}

/* Hero: the main colour and a soft accent glow */

main > .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--colour-main); }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -16rem 8% auto;
  height: 38rem;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.chip {
  display: inline-block;
  margin: 0 0 1.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--colour-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--colour-accent) 28%, transparent);
  color: var(--colour-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.hero__title { margin: 0; }
/* The chip names what the page offers, inside the main heading but in the body font */
.hero__title .chip { display: block; width: fit-content; font-family: var(--font-body); letter-spacing: normal; }
.hero__headline { display: block; max-width: 13ch; margin-bottom: 0; }
/* Beside phones, devices or a photo the headline has its own column: a little smaller, in two even lines */
:is(.hero--phones, .hero--devices, .hero--photo, .hero--posting) .hero__headline { max-width: none; font-size: clamp(2.625rem, 4.5vw + 0.5rem, 3.875rem); }
.hero__subline { max-width: 44ch; margin: 1.25rem 0 0; font-size: clamp(1.0625rem, 1vw + 0.875rem, 1.25rem); line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.hero__small { margin: 1rem 0 0; font-size: 0.875rem; }

.hero--screens, .hero--plain, .hero--flow { text-align: center; }
:is(.hero--screens, .hero--plain, .hero--flow) :is(.hero__headline, .hero__subline, .chip) { margin-inline: auto; }
:is(.hero--screens, .hero--plain, .hero--flow) .hero__actions { justify-content: center; }
main > .hero--screens { padding-bottom: 0; }
.hero--flow .hero__headline { max-width: 18ch; }
.hero__word { display: inline-block; } /* so each word can rise on its own */

/* One automation running, as a row of small cards (a column on phones) */
.flow { display: grid; gap: 1.25rem; max-width: 62rem; margin: 3.25rem auto 0; padding: 0; list-style: none; text-align: left; }
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* the dot, then the words (and the tick under them) */
  align-content: center;
  align-items: center;
  gap: 0.375rem 0.625rem;
  min-height: 4.25rem;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  background: var(--surface);
  color: var(--colour-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 8%, transparent), 0 18px 40px -16px rgb(0 0 0 / 0.5);
}
.flow__step::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--colour-accent); }
.flow__done { grid-column: 2; display: inline-flex; align-items: center; gap: 0.375rem; color: var(--colour-ok); font-size: 0.75rem; }
.flow__done::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
/* the line on to the next step: down on phones, across on laptops */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 1.25rem;
  width: 2px;
  height: 1.25rem;
  background: var(--colour-accent);
  transform-origin: top;
}
@media (min-width: 48rem) {
  .flow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .flow__step:not(:last-child)::after { top: 50%; left: 100%; width: 1.25rem; height: 2px; transform-origin: left; }
}

.hero--phones .hero__inner,
.hero--devices .hero__inner,
.hero--posting .hero__inner,
.hero--photo .hero__inner { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 56rem) {
  .hero--phones .hero__inner,
  .hero--devices .hero__inner,
  .hero--posting .hero__inner,
  .hero--photo .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.hero__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }

/* The three little screens under a centred hero: a swipeable row on phones */
.screens {
  display: flex;
  gap: 1rem;
  margin: 3.25rem calc(-1 * var(--gutter)) 0;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: end;
  text-align: left;
}
.screens::-webkit-scrollbar { display: none; }
.screen {
  flex: 0 0 min(80%, 18rem);
  scroll-snap-align: center;
  padding: 1.125rem 1.125rem 1.375rem;
  border-radius: 1rem 1rem 0 0;
  background: var(--surface);
  color: var(--colour-text);
  font-size: 0.8125rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 8%, transparent), 0 -20px 60px -10px rgb(0 0 0 / 0.4);
}
.screen--tasks { order: -1; } /* on phones the jobs come first */
.screen__label { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.tasks { margin: 0; padding: 0; list-style: none; }
.tasks li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5625rem 0; border-top: 1px solid var(--line); }
.tasks__done { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--colour-ok); font-size: 0.75rem; font-weight: 600; }
.tasks__done::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.browser { overflow: hidden; border-radius: 0.625rem; box-shadow: 0 0 0 1px var(--line); }
.browser__bar { display: flex; gap: 0.25rem; align-items: center; height: 1.25rem; padding-inline: 0.5rem; background: var(--tint); }
.browser__bar i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--line-strong); }
.browser__page { display: grid; gap: 0.4375rem; align-content: start; height: 5.25rem; padding: 0.75rem; background: var(--colour-background); }
.browser__page b, .mini-page b { display: block; width: 62%; height: 0.625rem; border-radius: 3px; background: var(--colour-main); }
.browser__page u, .mini-page u { display: block; width: 44%; height: 0.375rem; border-radius: 3px; background: var(--line-strong); }
.browser__page s, .mini-page s { display: block; width: 32%; height: 1rem; margin-top: 0.25rem; border-radius: 999px; background: var(--colour-accent); }
.screen .mini-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.375rem; }
.screen .mini-posts i { width: auto; transform: none; }
/* Real work in the little pictures: the newest website we've built */
.browser__shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.mini-phone { align-self: end; width: 6.75rem; margin-top: 1.5rem; padding: 0.25rem 0.25rem 0; border-radius: 1.125rem 1.125rem 0 0; background: var(--colour-main); }
.mini-phone__shot { display: block; width: 100%; aspect-ratio: 9 / 13; object-fit: cover; object-position: top; border-radius: 0.875rem 0.875rem 0 0; }
@media (min-width: 48rem) {
  .screens {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 1.125rem;
    max-width: 60rem;
    margin: 3.75rem auto 0;
    padding-inline: 1.5rem;
    overflow: visible;
  }
  .screen--tasks { order: 0; padding-bottom: 2.25rem; }
}

/* One or two tilted phones and a stat card, beside the words */
.phones { position: relative; width: 100%; max-width: 28rem; height: clamp(20rem, 70vw, 25rem); margin-inline: auto; }
.phone {
  padding: 0.375rem;
  border-radius: 1.75rem;
  background: color-mix(in srgb, var(--colour-main) 60%, #000);
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 12%, transparent), 0 30px 60px -14px rgb(0 0 0 / 0.55);
}
.phones__phone { position: absolute; width: 44%; }
.phones__phone:nth-child(1) { left: 4%; top: 7%; rotate: -5deg; }
.phones__phone:nth-child(2) { left: 46%; top: 0; rotate: 4deg; }
.phones--1 .phones__phone { left: 28%; top: 2%; rotate: -3deg; }
.phone__screen { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 1.375rem; }
:is(.phones__stat, .devices__stat) {
  position: absolute;
  right: 0;
  bottom: 3%;
  max-width: 13rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  box-shadow: var(--shadow-float);
}
:is(.phones__stat, .devices__stat) b { display: block; font-family: var(--font-headings); font-size: 1.875rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--colour-main); font-variant-numeric: lining-nums; }

/* The social page's hero: the posting phone (parts/posting.html). One tilted phone with a drawn placeholder app,
   floating on a sky glow, and three glass chips that change in step with it (setUpPosting) */
.posting { position: relative; display: grid; justify-items: center; width: 100%; }
.posting__stage { position: relative; display: grid; place-items: center; width: 100%; max-width: 36rem; height: clamp(34rem, 52vw, 40rem); }
.posting__tilt { --pw: clamp(14.5rem, 23vw, 18rem); position: relative; transform: perspective(1400px) rotateY(-14deg) rotateX(5deg) rotateZ(2deg); will-change: transform; }
@media (max-width: 61.24rem) { .posting__tilt { transform: perspective(1400px) rotateY(-8deg) rotateX(3deg) rotateZ(1.5deg); } }
.posting__float { animation: row-float 5.2s ease-in-out infinite; --w: calc(var(--pw) * 1.6); }
.posting__floor { position: absolute; z-index: -1; left: 50%; bottom: calc(var(--pw) * -0.12); width: 170%; height: 5.5rem; translate: -50% 0; pointer-events: none; }
.posting__floor::before { content: ""; position: absolute; inset: -60% -10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--colour-accent) 34%, transparent), transparent); filter: blur(22px); }
.posting__floor::after {
  content: "";
  position: absolute;
  inset: 20% 16%;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--colour-accent) 75%, #fff);
  box-shadow: 0 0 22px color-mix(in srgb, var(--colour-accent) 70%, transparent), inset 0 0 16px color-mix(in srgb, var(--colour-accent) 50%, transparent);
  animation: row-breathe 5.2s ease-in-out infinite;
}
.posting__phone {
  position: relative;
  width: var(--pw);
  aspect-ratio: 9 / 19;
  padding: calc(var(--pw) * 0.03);
  border-radius: calc(var(--pw) * 0.16);
  background: linear-gradient(150deg, color-mix(in srgb, var(--colour-main) 80%, #fff 6%), #0a0e18 38%, #0a0e18 70%, color-mix(in srgb, var(--colour-main) 90%, #fff 4%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 0 0 calc(var(--pw) * 0.012) #070a12, 0 60px 90px -45px rgb(0 0 0 / 0.9), 0 22px 34px -24px rgb(0 0 0 / 0.7);
}
.posting__island { position: absolute; z-index: 3; top: calc(var(--pw) * 0.045); left: 50%; width: 31%; height: calc(var(--pw) * 0.085); translate: -50% 0; border-radius: 99px; background: #000; }
.posting__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--pw) * 0.13);
  background: color-mix(in srgb, var(--colour-background) 40%, #fff);
  color: var(--colour-main);
  font-size: calc(var(--pw) * 0.045);
  line-height: 1.3;
}
.posting__status { display: flex; flex: none; justify-content: space-between; align-items: end; height: 12%; padding: 0 9% 2.5%; font-weight: 600; font-size: 0.78em; }
.posting__status svg { width: auto; height: 0.9em; }
.posting__top { display: flex; flex: none; justify-content: space-between; align-items: center; padding: 1% 5% 2%; }
.posting__top b { font-family: var(--font-headings); font-weight: 600; font-size: 1.05em; }
.posting__top > span { display: flex; gap: 0.7em; }
.posting__top svg, .posting__tabs svg { width: 1.2em; height: 1.2em; }
.posting__stories { display: flex; flex: none; gap: 3.5%; padding: 2% 5% 4%; border-bottom: 1px solid var(--line); }
.posting__story { width: 16%; aspect-ratio: 1; padding: 2px; border-radius: 50%; background: color-mix(in srgb, var(--colour-main) 16%, transparent); }
.posting__story::after { content: ""; display: block; width: 100%; height: 100%; border: 2px solid color-mix(in srgb, var(--colour-background) 40%, #fff); border-radius: 50%; background: color-mix(in srgb, var(--colour-accent) 45%, #fff); }
.posting__story:nth-child(2)::after { background: var(--colour-main); }
.posting__story:nth-child(3)::after { background: color-mix(in srgb, var(--colour-background) 60%, #c9a86a); }
.posting__story.is-fresh { background: conic-gradient(from 200deg, var(--colour-accent), var(--colour-main), var(--colour-accent)); }
.posting__story.is-pop { animation: story-pop 600ms var(--ease-out); }
.posting__feed { position: relative; flex: 1; overflow: hidden; padding: 4% 4% 0; }
.posting__track { display: grid; gap: 0.8em; }
.posting__card {
  position: relative;
  display: grid;
  gap: 0.45em;
  padding: 0.5em;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--colour-main) 5%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--colour-main) 35%, transparent);
  transition: box-shadow 300ms ease;
}
.posting__card.is-fresh { box-shadow: 0 0 0 1.5px var(--colour-accent), 0 14px 26px -14px color-mix(in srgb, var(--colour-main) 45%, transparent); }
.posting__just {
  position: absolute;
  z-index: 2;
  top: 1em;
  right: 1em;
  padding: 0.55em 0.8em;
  border-radius: 99px;
  background: var(--colour-main);
  color: var(--colour-background);
  font-size: 0.62em;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.posting__card.is-fresh .posting__just { opacity: 1; transform: none; }
.posting__row { display: flex; align-items: center; gap: 0.45em; }
.posting__avatar { width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--colour-accent); }
.posting__card--reel .posting__avatar { background: var(--colour-main); }
.posting__bar { display: block; width: 55%; height: 0.42em; border-radius: 99px; background: color-mix(in srgb, var(--colour-main) 13%, transparent); }
.posting__bar--long { width: 84%; }
.posting__bar--short { width: 52%; opacity: 0.6; }
.posting__media { position: relative; display: block; aspect-ratio: 4 / 4.4; overflow: hidden; border-radius: 8px; background: linear-gradient(160deg, color-mix(in srgb, var(--colour-accent) 45%, #fff), var(--colour-accent)); color: var(--colour-main); }
.posting__card--alt .posting__media { background: linear-gradient(160deg, color-mix(in srgb, var(--colour-background) 30%, #e8c98f), var(--colour-accent)); }
.posting__card--reel .posting__media { aspect-ratio: 4 / 4.8; background: linear-gradient(160deg, color-mix(in srgb, var(--colour-main) 75%, #fff 10%), var(--colour-main)); }
.posting__card--reel.posting__card--alt .posting__media { background: linear-gradient(160deg, var(--colour-accent), color-mix(in srgb, var(--colour-main) 80%, #fff 6%)); }
.posting__card--tip .posting__media { background: linear-gradient(160deg, color-mix(in srgb, var(--colour-background) 70%, #fff), color-mix(in srgb, var(--colour-background) 60%, #e8c98f)); }
.posting__art { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; }
.posting__dots { position: absolute; left: 50%; bottom: 6%; display: flex; gap: 3px; translate: -50% 0; }
.posting__dots i { width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / 0.55); }
.posting__dots i:first-child { background: #fff; }
.posting__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgb(255 255 255 / 0.22); }
.posting__play svg { width: 40%; }
.posting__tip { position: absolute; inset: 0; display: grid; place-content: center; padding: 12%; text-align: center; font-family: var(--font-headings); font-weight: 600; font-size: 1.2em; line-height: 1.15; }
.posting__tip small { display: block; margin-bottom: 0.7em; font-family: var(--font-body); font-size: 0.5em; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }
.posting__acts { display: flex; gap: 0.6em; color: color-mix(in srgb, var(--colour-main) 60%, transparent); }
.posting__acts svg { width: 1.05em; height: 1.05em; }
.posting__tabs { position: relative; z-index: 2; display: flex; flex: none; justify-content: space-around; align-items: center; height: 10.5%; padding-bottom: 2%; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--colour-background) 40%, #fff); }
.posting__me { width: 1.3em; height: 1.3em; border-radius: 50%; background: conic-gradient(var(--colour-accent), var(--colour-main), var(--colour-accent)); }

/* the chips: glass on the main colour, changing in step with the phone */
.posting__chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.9375rem 0.625rem 0.625rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--colour-main) 72%, #fff 6%);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 26px 40px -26px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.08);
  color: var(--on-main);
  font-size: 0.85rem;
  line-height: 1.3;
  white-space: nowrap;
}
.posting__chip[data-chip="scheduled"] { left: 0; top: 20%; }
.posting__chip[data-chip="story"] { right: 0; top: 47%; }
.posting__chip[data-chip="report"] { left: 5%; bottom: 13%; }
@media (max-width: 61.24rem) {
  .posting__chip[data-chip="scheduled"] { left: 2%; top: 8%; }
  .posting__chip[data-chip="story"] { right: 2%; top: 46%; }
  .posting__chip[data-chip="report"] { left: 3%; bottom: 8%; }
}
.posting__chip.is-nudged { animation: chip-nudge 600ms var(--ease-out); }
.posting__icon { position: relative; display: grid; flex: none; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--colour-accent); color: var(--colour-main); transition: background-color 300ms ease; }
.posting__icon svg { position: absolute; width: 0.9375rem; height: 0.9375rem; transition: opacity 200ms ease, transform 300ms var(--ease-out), filter 200ms ease; }
.posting__icon .posting__done-icon { opacity: 0; transform: scale(0.6); filter: blur(2px); }
.posting__chip.is-done .posting__icon { background: color-mix(in srgb, var(--colour-accent) 30%, #7be0a0); }
.posting__chip.is-done .posting__icon svg:not(.posting__done-icon) { opacity: 0; transform: scale(0.6); filter: blur(2px); }
.posting__chip.is-done .posting__done-icon { opacity: 1; transform: none; filter: none; }
.posting__text { display: grid; }
.posting__text > * { grid-area: 1 / 1; transition: opacity 220ms ease, filter 220ms ease, transform 300ms var(--ease-out); }
.posting__text small { display: block; color: var(--on-main-soft); font-size: 0.73rem; }
.posting__now { opacity: 0; filter: blur(3px); transform: translateY(4px); }
.posting__chip.is-done .posting__was { opacity: 0; filter: blur(3px); transform: translateY(-4px); }
.posting__chip.is-done .posting__now { opacity: 1; filter: none; transform: none; }

/* the Pause button under the phone, like the tour's */
.posting__pause {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -0.5rem;
  border: 1px solid color-mix(in srgb, var(--on-main) 22%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #fff 5%, transparent);
  color: var(--on-main);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.posting__pause:active { transform: scale(0.93); }
.posting__pause svg { width: 1rem; height: 1rem; }
.posting__play-icon, .posting.is-paused .posting__pause-icon { display: none; }
.posting.is-paused .posting__play-icon { display: block; }
html:not(.js) .posting__pause { display: none; }
@media (hover: hover) and (pointer: fine) { .posting__pause:hover { background: color-mix(in srgb, #fff 10%, transparent); } }
.posting.is-paused .posting__float, .posting.is-paused .posting__floor::after { animation-play-state: paused; }
.hero__proof { display: flex; align-items: center; gap: 0.75rem; margin: 1.75rem 0 0; color: var(--on-main-soft); font-size: 0.92rem; }
.hero__proof b { color: var(--on-main); font-family: var(--font-headings); font-size: 1.55rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.hero__proof i { width: 1px; height: 1.625rem; background: color-mix(in srgb, var(--on-main) 20%, transparent); }
@keyframes story-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes chip-nudge { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* This website on a laptop, with a phone in front of its corner and a stat card below, beside the words */
.devices { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 10 / 7.4; margin-inline: auto; }
.devices__laptop { position: absolute; left: 4%; top: 4%; width: 82%; }
.laptop__screen {
  padding: 0.375rem 0.375rem 0.5rem;
  border-radius: 0.875rem 0.875rem 0.25rem 0.25rem;
  background: color-mix(in srgb, var(--colour-main) 60%, #000);
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 12%, transparent), 0 30px 60px -14px rgb(0 0 0 / 0.55);
}
.laptop__shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 0.375rem; }
.laptop__base { /* a touch wider than the screen, like a laptop's keyboard half seen from the front */
  width: 110%;
  height: 0.625rem;
  margin-left: -5%;
  border-radius: 0.125rem 0.125rem 0.75rem 0.75rem;
  background: color-mix(in srgb, var(--colour-main) 40%, #6b7489);
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 12%, transparent), 0 18px 30px -12px rgb(0 0 0 / 0.5);
}
.devices__phone { position: absolute; right: 0; bottom: 0; width: 27%; padding: 0.3rem; border-radius: 1.25rem; }
.devices__phone .phone__screen { border-radius: 0.95rem; }
.devices__stat { right: auto; left: 0; bottom: 0; }

/* Little pictures on cards and screens */
.mini-page {
  display: grid;
  gap: 0.4375rem;
  align-content: start;
  align-self: end;
  width: 70%;
  height: 6rem;
  margin-top: 2.25rem;
  padding: 0.75rem;
  border-radius: 0.625rem 0.625rem 0 0;
  background: var(--surface);
  box-shadow: 0 1px 2px var(--line-strong);
}
.mini-posts { display: flex; gap: 0.5rem; }
.mini-posts i {
  width: 2.875rem;
  aspect-ratio: 4 / 5;
  border-radius: 0.5rem;
  background: linear-gradient(160deg, var(--colour-accent), var(--colour-main));
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--colour-main) 50%, transparent);
}
.mini-posts i:nth-child(2) { transform: translateY(-0.5rem); background: linear-gradient(160deg, var(--colour-background), var(--colour-accent)); }
.mini-posts i:nth-child(3) { background: linear-gradient(160deg, color-mix(in srgb, var(--colour-main) 75%, #fff), var(--colour-main)); }
.toggles { display: grid; gap: 0.4375rem; width: min(82%, 15rem); margin: 0; padding: 0; list-style: none; }
.toggles li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.5625rem;
  background: var(--surface);
  color: var(--colour-main);
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 1px 2px var(--line-strong);
}
.toggles__switch { position: relative; flex: none; width: 1.625rem; height: 1rem; border-radius: 999px; background: var(--colour-main); }
.toggles__switch::after { content: ""; position: absolute; top: 0.1875rem; right: 0.1875rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--colour-accent); }

/* Cards (services) */

.cards, .features__list, .packages__list, .people, .reels, .steps { margin: 0; padding: 0; list-style: none; }
.cards { display: grid; gap: 1rem; }
.card { display: flex; flex-direction: column; padding: 0.625rem; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.card__picture { display: grid; place-items: center; height: 8.25rem; overflow: hidden; border-radius: var(--radius-inner); background: var(--tint); }
.card__body { display: flex; flex: 1; flex-direction: column; padding: 1.125rem 0.875rem 0.75rem; }
.card__title { margin-bottom: 0.375rem; font-size: 1.375rem; }
.card__text { margin: 0 0 1.25rem; color: var(--muted); }
.card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin: auto 0 0; padding-top: 0.875rem; border-top: 1px solid var(--line); }
.card__price { font-weight: 600; color: var(--colour-main); font-variant-numeric: lining-nums tabular-nums; }
.card__link { align-self: flex-start; margin: -0.5rem 0 1.25rem; font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.card__link span { display: inline-block; margin-left: 0.25em; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card__link:hover { text-decoration: underline; }
  .card__link:hover span { transform: translateX(2px); }
}
@media (min-width: 48rem) {
  .cards--2, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.strip {
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-inner);
  background: var(--colour-main);
  color: var(--on-main);
  font-weight: 600;
  line-height: 1.45;
}
.strip:has(.strip__note) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; }
.strip b { color: var(--colour-accent); } /* the accent is allowed as text here: the strip is the main colour */
.strip__note { color: var(--on-main-soft); }

/* What's included */

.features__list { display: grid; gap: 1rem; }
.feature { padding: 1.5rem; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.feature__title { margin-bottom: 0.375rem; font-size: 1.25rem; }
.feature__text { margin: 0; color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 48rem) { .features__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .features__list--3,
  .features__list--5,
  .features__list--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The problem: the worries, each marked with an empty sky ring, beside the answer */

.problem__inner { display: grid; gap: 2rem; }
.problem__points { margin: 0; padding: 0; list-style: none; }
.problem__point {
  display: flex;
  gap: 0.875rem;
  align-items: baseline;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-headings);
  font-size: clamp(1.25rem, 1.25vw + 0.875rem, 1.625rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--colour-main);
}
/* the ring is a sweep cut down to a 2px circle, so it can draw itself round when the list comes into view */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.problem__point::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: conic-gradient(var(--colour-accent) var(--ring), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  translate: 0 0.05em;
}
/* "Sound familiar?" is the section's heading: set as one, not as a small label */
.problem__heading.eyebrow { margin-bottom: 0.5rem; font: 600 clamp(1.75rem, 2vw + 1rem, 2.25rem)/1.1 var(--font-headings); letter-spacing: -0.02em; color: var(--colour-main); }
.problem__answer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 16rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: 1.25rem;
  background: var(--colour-main);
}
.problem__answer .eyebrow { margin-bottom: auto; padding-bottom: 2rem; }
.problem__answer-heading { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); }
.problem__answer p:last-child { margin: 0; }
@media (min-width: 56rem) { .problem__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } }

/* Real work: phone-shaped videos and the results panel, on the main colour */

main > .work { background: var(--colour-main); }
.work__grid { display: grid; gap: 2.5rem; }
.reels {
  display: flex;
  gap: 1.25rem;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }
.reel { flex: 0 0 min(68%, 15rem); scroll-snap-align: start; }
.reel__phone { position: relative; }
.reel__video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 1.375rem; background: var(--deep); }
.reel__play {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--colour-accent);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), opacity 150ms var(--ease-out);
}
.reel__play::after { content: ""; margin-left: 0.25rem; border-block: 0.625rem solid transparent; border-left: 1rem solid var(--colour-on-accent); }
.reel__play:active { transform: scale(0.95); }
.is-ready .reel__play { display: grid; }
.is-playing .reel__play { opacity: 0; transform: scale(0.9); pointer-events: none; }
.reel__play[hidden] { display: none; }
.reel__title { margin: 1rem 0 0.25rem; font-size: 1.125rem; }
.reel__text { margin: 0; font-size: 0.875rem; }
.results {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--on-main) 5%, var(--colour-main));
  box-shadow: inset 0 0 0 1px var(--line-on-main);
}
.results__lead { margin: 0; font-size: 0.9375rem; }
.results__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); /* two across; one when text is enlarged */
  gap: 1.5rem 1rem;
  max-width: 24rem;
  margin: 1.75rem 0 1.5rem;
}
.results__figure { display: flex; flex-direction: column-reverse; }
.results__figure dd {
  margin: 0;
  font-family: var(--font-headings);
  font-size: clamp(2rem, 2vw + 1.25rem, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-main);
  font-variant-numeric: lining-nums;
}
.results__figure dt { margin-top: 0.375rem; font-size: 0.8125rem; }
.results__footnote { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line-on-main); font-size: 0.875rem; }
@media (min-width: 48rem) {
  .reels { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .reel { flex: 0 1 15rem; }
}
@media (min-width: 64rem) {
  /* fixed shares, never sized from the videos (Safari counted their full 640px and squeezed the results) */
  .work__grid--results { grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 1fr); align-items: stretch; }
}

/* Our work: the websites we've built, a page at a time on a laptop and a phone (the our_work section), on the
   main colour. site.js adds the client and page buttons, the Before page and the tour that moves on by itself;
   without it, the newest client's first page shows. */

main > .our-work { position: relative; isolation: isolate; overflow-x: clip; background: var(--colour-main); }
.our-work .section-head .eyebrow { margin-bottom: 0.625rem; }
.clients { display: none; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.js .clients { display: flex; }
.client {
  display: inline-flex;
  gap: 0.375rem; /* the "next" pill's arrow: a space at the start of its span would be dropped in a flex box */
  align-items: center;
  min-height: 2.5rem;
  padding: 0.375rem 1rem;
  border: 1px solid var(--line-on-main);
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-main) 6%, transparent);
  color: var(--on-main);
  font: 600 0.875rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.client:active { transform: scale(0.97); }
.client[aria-pressed="true"] { border-color: transparent; background: var(--on-main); color: var(--colour-main); }
.client--next { border-style: dashed; border-color: color-mix(in srgb, var(--on-main) 40%, transparent); background: transparent; color: var(--on-main-soft); }
@media (hover: hover) and (pointer: fine) {
  .client[aria-pressed="false"]:hover { background: color-mix(in srgb, var(--on-main) 12%, transparent); }
  .client--next:hover { border-color: var(--colour-accent); color: var(--on-main); }
}

.client-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.client-panel[hidden] { display: none; }

/* The page buttons in a track, and the pause/play button */
.tour__bar { display: none; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.js .tour__bar { display: flex; }
.tour__tabs {
  display: flex;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.25rem;
  overflow-x: auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-main) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-on-main);
  scrollbar-width: none;
}
.tour__tabs::-webkit-scrollbar { display: none; }
.tour__tab {
  position: relative;
  isolation: isolate;
  flex: none;
  padding: 0.5rem 0.95rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-main-soft);
  font: 600 0.8125rem/1.2 var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}
.tour__tab:active { transform: scale(0.97); }
.tour__tab[aria-selected="true"] { background: var(--on-main); color: var(--colour-main); }
@media (hover: hover) and (pointer: fine) { .tour__tab[aria-selected="false"]:hover { color: var(--on-main); } }
/* The time left on a page fills its button, like a story; when it's full, site.js moves on */
.tour__tab::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: color-mix(in srgb, var(--colour-accent) 55%, var(--on-main));
  transform: scaleX(0);
  transform-origin: left;
}
/* (not the animation shorthand: it would set the play state back to running, over the pauses below) */
.our-work.is-playing .tour__tab[aria-selected="true"]::before {
  animation-name: tour-fill;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.our-work.is-playing .tour__tab--before[aria-selected="true"]::before { animation-duration: 7s; } /* time for the sweep */
/* It waits while the tour is off screen, the browser tab is hidden, or someone is reading or using it: the
   keyboard on a page button or the line. (Not any focus inside: Chrome leaves focus on a clicked button, so Play
   would never restart.) */
.our-work.is-held .tour__tab::before,
.tour:has(.tour__tab:focus-visible, .compare__range:focus-visible) .tour__tab::before { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .tour:has(.tour__devices:hover) .tour__tab::before { animation-play-state: paused; } }
.tour__play {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-main) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-on-main);
  color: var(--on-main);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.tour__play:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .tour__play:hover { background: color-mix(in srgb, var(--on-main) 14%, transparent); } }
.tour__play span { width: 0; height: 0; margin-left: 0.2rem; border-block: 0.4rem solid transparent; border-left: 0.65rem solid currentColor; } /* play */
.our-work.is-playing .tour__play span { width: 0.625rem; height: 0.75rem; margin: 0; border: solid currentColor; border-width: 0 3px; } /* pause */

/* The screens: a browser window with a phone over its corner (on phones, the phone alone) */
.tour__devices { position: relative; isolation: isolate; --pos: 50%; }
.tour__devices::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15% -10%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.tour__browser { overflow: hidden; border-radius: 0.875rem; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, #fff 12%, transparent), var(--shadow-float); }
.tour__address { display: flex; align-items: center; gap: 0.75rem; height: 2.25rem; padding-inline: 0.875rem; background: color-mix(in srgb, var(--colour-main) 7%, #fff); }
.tour__dots { display: flex; gap: 0.35rem; }
.tour__dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: color-mix(in srgb, var(--colour-main) 18%, #fff); }
.tour__url {
  flex: 1;
  min-width: 0;
  max-width: 24rem;
  margin-inline: auto;
  padding: 0.2rem 0.75rem;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted-light);
  font-size: 0.75rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tour__url [data-tour-path] { color: var(--colour-main); }
.tour__screens { display: grid; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.tour__screens--phone { aspect-ratio: 9 / 16; border-radius: 1.2rem; }
.tour__phone { position: absolute; right: -1rem; bottom: -2.25rem; width: 22%; padding: 0.3rem; border-radius: 1.5rem; }
.tour__shot { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: top; visibility: hidden; opacity: 0; }
.tour__shot.is-current { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* leaving: quick and blurred, so the two pages never read as two things at once; arriving: a little slower */
  .tour__shot {
    filter: blur(6px);
    transform: scale(1.02);
    transition: opacity 180ms ease-out, filter 180ms ease-out, transform 0s linear 180ms, visibility 0s linear 180ms;
  }
  .tour__shot.is-current {
    filter: none;
    transform: none;
    transition: opacity 320ms ease-out, filter 320ms ease-out, transform 520ms var(--ease-out), visibility 0s;
  }
  .tour__screens--phone .tour__shot.is-current { transition-delay: 70ms, 70ms, 70ms, 0s; } /* the phone a beat later */
}
/* For visitors who ask for less motion, the site's rule (at the end of this file) makes every change instant, and
   nothing moves by itself: there's no tour to play */
@media (prefers-reduced-motion: reduce) { .tour__play { display: none; } }
.our-work.is-instant :is(.tour__shot, .tour__caption) { transition: none; } /* chosen with the keyboard */
@media (min-width: 48rem) { .tour { padding-bottom: 2.25rem; } } /* room for the phone below the window */
@media (max-width: 47.99rem) {
  .tour__bar { justify-content: center; }
  .tour__browser { display: none; }
  .tour__phone { position: static; width: min(68vw, 16rem); margin-inline: auto; }
}

/* The Before page: the old site, the new one drawn over it from the line, and the line to drag */
.compare { position: relative; overflow: hidden; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.compare__new img { clip-path: inset(0 0 0 var(--pos)); }
.compare__tag {
  position: absolute;
  bottom: 0.75rem;
  z-index: 1;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #fff;
  color: var(--colour-main);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
}
.compare__tag--before { left: 0.75rem; } /* at the bottom: the new site's own opening may have labels at the top */
.compare__tag--after { right: 0.75rem; background: var(--colour-accent); color: var(--colour-on-accent); }
.tour__screens--phone .compare__tag { bottom: 0.5rem; padding: 0.2rem 0.5rem; font-size: 0.6875rem; }
.tour__screens--phone .compare__tag--before { left: 0.5rem; }
.tour__screens--phone .compare__tag--after { right: 0.5rem; }
.compare__range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
/* The line spans the screen and is moved by translate, never left, so its sweep and drag need no layout: a
   translate in % is of its own width (the screen's), so var(--pos) brings its left edge to the line. Its bar and
   its knob are drawn there. */
.compare__line { position: absolute; inset: 0; z-index: 1; translate: var(--pos) 0; pointer-events: none; }
.compare__line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--colour-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--colour-main) 18%, transparent);
}
.compare__knob {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--colour-accent);
  color: var(--colour-on-accent);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
  translate: -50% -50%;
  transition: scale 160ms var(--ease-out);
}
.tour__screens--phone .compare__knob { width: 2rem; height: 2rem; }
.compare__range:active ~ .compare__line .compare__knob { scale: 0.94; }
.compare__range:focus-visible ~ .compare__line .compare__knob { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--colour-main); }
@media (prefers-reduced-motion: no-preference) {
  /* the first time the Before page is seen, the line sweeps once, so people know it moves */
  .tour__devices.is-hinting { animation: compare-hint 1700ms cubic-bezier(0.65, 0, 0.35, 1) 400ms both; }
}

/* The words beside the screens (below them on phones) */
.client-panel__name { margin-bottom: 0.25rem; font-size: 1.5rem; }
.client-panel__meta { margin: 0 0 1.5rem; font-size: 0.9375rem; }
.tour__captions { display: grid; min-height: 5.25rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-on-main); }
.tour__caption { grid-area: 1 / 1; margin: 0; color: var(--on-main); opacity: 0; }
.tour__caption.is-current { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tour__caption { transform: translateY(0.25rem); transition: opacity 180ms ease-out, transform 180ms var(--ease-out); }
  .tour__caption.is-current { transform: none; transition-duration: 260ms; transition-delay: 60ms; }
}
.client-panel__built { display: grid; gap: 0.625rem; margin: 0 0 1.75rem; padding: 0; list-style: none; font-size: 0.9375rem; }
.client-panel__built li { display: flex; gap: 0.75rem; align-items: baseline; }
.client-panel__built li::before { /* a small tick */
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.6875rem;
  border: solid var(--colour-accent);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  translate: 0 -0.125rem;
}
@media (min-width: 56rem) {
  .client-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(3rem, 6vw, 5rem); align-items: center; }
}

/* The home page's websites: the select row on the main colour */
.latest-work__card {
  position: relative;
  isolation: isolate;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--colour-main);
}
.latest-work__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -35%;
  width: 90%;
  height: 90%;
  translate: -50% 0;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.latest-work__head { padding: 0 1.5rem; text-align: center; }
.our-work .select-row { display: none; margin-bottom: 1rem; } /* the tour's client picker needs site.js, like its old buttons */
.js .our-work .select-row { display: block; }
/* above the tour the row is a picker, smaller, so the tour itself stays in view */
.js .our-work .select-row--laptop .select-row__stage { height: calc(min(28cqw, 16rem) * 0.69 + 4.5rem); }
.js .our-work .select-row__item { --w: min(28cqw, 16rem); bottom: 3rem; }
.our-work .select-row__controls { margin-top: 0; }
.latest-work__head h2 { margin: 0.5rem 0 0; font-size: clamp(1.875rem, 2.5vw + 1.25rem, 2.75rem); }
.latest-work__intro { margin: 0.5rem 0 0; }
/* on the home page the row is tighter, so the card is about one screen tall: on a phone the laptop keeps its size
   (it's small already) and only the space round it shrinks; from a tablet up the laptop is smaller too */
.js .latest-work .select-row--laptop .select-row__stage { height: calc(min(52cqw, 36rem) * 0.69 + 5rem); }
.js .latest-work .select-row__item { bottom: 3.25rem; }
.latest-work .select-row__actions { margin-top: 1rem; }
@media (min-width: 40rem) {
  .js .latest-work .select-row--laptop .select-row__stage { height: calc(min(40cqw, 26rem) * 0.69 + 5rem); }
  .js .latest-work .select-row__item { --w: min(40cqw, 26rem); }
}
/* wide screens: the laptops on the left and the words beside them (like the old section), so it stays short.
   A container can't be a subgrid, so here the card and the stage are the containers instead of the row: the
   stage's height is a share of the card, the laptops' sizes are shares of the stage. */
@media (min-width: 64rem) {
  .js .latest-work__card {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    padding-inline: 0 clamp(2.5rem, 5vw, 4.5rem);
    container-type: inline-size;
  }
  .js .latest-work__card::before { left: 32%; top: -20%; width: 70%; height: 110%; }
  .js .latest-work__head { grid-column: 2; grid-row: 2; padding: 0; text-align: left; }
  .js .latest-work .select-row { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; margin: 0; container-type: normal; }
  .js .latest-work .select-row--laptop .select-row__stage { grid-column: 1; grid-row: 1 / -1; align-self: center; container-type: inline-size; height: calc(min(33cqw, 26rem) * 0.69 + 5rem); }
  .js .latest-work .select-row__item { --w: min(62cqw, 26rem); }
  .js .latest-work .select-row__caption { grid-column: 2; grid-row: 3; margin-top: 1.5rem; padding: 0; text-align: left; }
  .js .latest-work .select-row__summary { margin-inline: 0; }
  .js .latest-work .select-row__actions { justify-content: flex-start; }
  .js .latest-work .select-row__controls { grid-column: 2; grid-row: 4; justify-content: flex-start; margin-top: 1.5rem; }
}

/* The select row (spec §5): the chosen item floats in front on a glow in its own colour (--c), the others wait
   either side. site.js moves them by setting data-offset; without JavaScript the first item and its words show. */
.select-row { position: relative; container-type: inline-size; margin-top: 1rem; }
.select-row__track > :not(:first-child) { display: none; }
.select-row__item {
  --w: min(100%, 36rem);
  display: block;
  position: relative;
  width: var(--w);
  margin: 2rem auto 4.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}
.js .select-row--laptop .select-row__stage { height: calc(min(52cqw, 36rem) * 0.69 + 7rem); }
.js .select-row__stage { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.js .select-row__stage img { -webkit-user-drag: none; }
.js .select-row__track { position: absolute; inset: 0; transition: transform 450ms var(--ease-out); }
.js .select-row.is-dragging .select-row__track { transition: none; }
.js .select-row__track > :not(:first-child) { display: block; }
.js .select-row__item {
  --w: min(52cqw, 36rem);
  position: absolute;
  left: 50%;
  bottom: 4.5rem;
  margin: 0 0 0 calc(var(--w) / -2);
  transform-origin: 50% 100%;
  transform: translateX(var(--x, 0)) scale(var(--s, 1));
  opacity: var(--o, 0);
  filter: brightness(var(--b, 1)) saturate(var(--sat, 1)) blur(var(--blur, 0));
  transition: transform 750ms var(--ease-in-out), opacity 500ms ease, filter 600ms ease;
}
.js .select-row__item.is-instant { transition: none; }
.select-row--laptop [data-offset="0"] { --x: 0cqw; --s: 1; --o: 1; --b: 1; z-index: 5; cursor: default; }
.select-row--laptop [data-offset="1"] { --x: 33cqw; --s: 0.56; --o: 0.6; --b: 0.55; z-index: 4; }
.select-row--laptop [data-offset="-1"] { --x: -33cqw; --s: 0.56; --o: 0.6; --b: 0.55; z-index: 4; }
.select-row--laptop :is([data-offset="2"], [data-offset="3"], [data-offset="4"]) { --x: 58cqw; --s: 0.4; --o: 0; --b: 0.4; z-index: 3; }
.select-row--laptop :is([data-offset="-2"], [data-offset="-3"], [data-offset="-4"]) { --x: -58cqw; --s: 0.4; --o: 0; --b: 0.4; z-index: 3; }
.select-row :is([data-offset="2"], [data-offset="3"], [data-offset="4"], [data-offset="-2"], [data-offset="-3"], [data-offset="-4"]) { pointer-events: none; }
.select-row__item:focus-visible { outline: none; }
.select-row__item:focus-visible :is(.select-row__screen, .select-row__phone) { outline: 2px solid var(--colour-accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .js .select-row__item:not([data-offset="0"]):hover { --b: 0.8; }
}
.select-row__lift, .select-row__float { display: block; }
.select-row__float { animation: row-float 5.2s ease-in-out infinite; }
.select-row__item:nth-child(2) .select-row__float { animation-delay: -1.3s; }
.select-row__item:nth-child(3) .select-row__float { animation-delay: -2.6s; }
.select-row__item:nth-child(4) .select-row__float { animation-delay: -3.9s; }
.select-row__lift.is-popping { animation: row-pop 800ms var(--ease-out) both; }
/* only the chosen item floats and glows (the others wait, still); Pause stops it */
.js .select-row__item:not([data-offset="0"]) .select-row__float,
.js .select-row__item:not([data-offset="0"]) .select-row__pad::after,
.js .select-row__item:not([data-offset="0"]) .select-row__pad i { animation: none; }
.select-row.is-paused .select-row__float,
.select-row.is-paused .select-row__pad::after,
.select-row.is-paused .select-row__pad i { animation-play-state: paused; }

/* the glow under the chosen item: a soft pool in its colour and a bright ring on the floor */
.select-row__pad {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: calc(var(--w) * -0.11);
  width: 118%;
  height: calc(var(--w) * 0.24);
  translate: -50% 0;
  opacity: 0;
  scale: 0.4;
  pointer-events: none;
  transition: opacity 450ms ease, scale 900ms var(--ease-out);
}
.select-row__pad::before {
  content: "";
  position: absolute;
  inset: -70% -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 38%, transparent), transparent);
  filter: blur(calc(var(--w) * 0.04));
}
.select-row__pad::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  filter: blur(calc(var(--w) * 0.028));
  animation: row-breathe 5.2s ease-in-out infinite;
}
.select-row__pad i {
  position: absolute;
  inset: 22% 9%;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--c) 80%, #fff);
  box-shadow: 0 0 20px color-mix(in srgb, var(--c) 75%, transparent), inset 0 0 16px color-mix(in srgb, var(--c) 60%, transparent);
  animation: row-breathe 5.2s ease-in-out infinite;
}
.select-row__track > :first-child .select-row__pad, .js [data-offset="0"] .select-row__pad { opacity: 1; scale: 1; transition-delay: 160ms; }
.js .select-row__track > :first-child:not([data-offset="0"]) .select-row__pad { opacity: 0; scale: 0.4; transition-delay: 0s; }

/* a laptop around a client's home page, or an empty dashed one for the next */
.select-row__laptop, .select-row__screen, .select-row__base { display: block; }
.select-row__screen {
  padding: 0.375rem 0.375rem 0.5rem;
  border-radius: 0.875rem 0.875rem 0.25rem 0.25rem;
  background: color-mix(in srgb, var(--colour-main) 60%, #000);
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 12%, transparent), 0 30px 60px -28px rgb(0 0 0 / 0.75);
}
.select-row__shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 0.375rem; }
.select-row__base {
  width: 113%;
  height: max(0.5rem, calc(var(--w) * 0.032));
  margin-left: -6.5%;
  border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
  background: linear-gradient(#e7eaf0, #b9c0cc 55%, #8a93a4);
  box-shadow: 0 calc(var(--w) * 0.03) calc(var(--w) * 0.06) -14px color-mix(in srgb, var(--c) 55%, transparent);
}
.select-row__ghost {
  display: grid;
  place-content: center;
  gap: 0.25rem;
  aspect-ratio: 16 / 10;
  min-height: 0; /* its words never stretch the screen: they shrink with the laptop instead */
  overflow: hidden;
  padding: calc(var(--w) * 0.04);
  border: 1.5px dashed color-mix(in srgb, var(--colour-accent) 55%, transparent);
  border-radius: 0.375rem;
  text-align: center;
  color: var(--colour-accent);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--colour-accent) 6%, transparent) 0 10px, transparent 10px 20px);
}
.select-row__ghost b { font-family: var(--font-headings); font-size: min(1.5rem, calc(var(--w) * 0.058)); font-weight: 600; line-height: 1.15; color: var(--on-main); }
.select-row__ghost small { font-size: min(0.9375rem, calc(var(--w) * 0.036)); }
.select-row__item--next .select-row__screen { background: color-mix(in srgb, var(--colour-accent) 5%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--colour-accent) 30%, transparent); }

/* the chosen item's words, then the arrows and dots */
.select-row__caption {
  margin: 0;
  padding: 0 1.5rem;
  list-style: none;
  text-align: center;
  transition: opacity 300ms var(--ease-out), filter 300ms var(--ease-out), transform 350ms var(--ease-out);
}
.select-row__caption.is-out { opacity: 0; filter: blur(4px); transform: translateY(4px); transition-duration: 140ms; }
/* every item's words share one cell, so the box is as tall as the longest and the arrows never jump */
.js .select-row__caption { display: grid; }
.js .select-row__words { grid-area: 1 / 1; }
.js .select-row__words[hidden] { display: block; visibility: hidden; }
.select-row__words h3 { margin: 0; font-size: clamp(1.4rem, 3cqw, 2rem); }
.select-row__meta { margin: 0.35rem 0 0; font-size: 0.9375rem; }
.select-row__summary { max-width: 34rem; margin: 0.5rem auto 0; }
.select-row__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1.25rem; margin: 1.25rem 0 0; }
.select-row__visit { color: var(--on-main); font-size: 0.9375rem; font-weight: 600; }
.select-row__controls { display: none; }
/* on a narrow phone the counter and Pause go onto a line of their own, and the arrows never squash */
.js .select-row__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.125rem; margin-top: 1rem; }
.select-row__extra { display: flex; align-items: center; gap: 1.125rem; }
.js .select-row.is-single .select-row__controls { display: none; }
.select-row__arrow {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid color-mix(in srgb, var(--on-main) 20%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #fff 4%, transparent);
  color: var(--on-main);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.select-row__arrow:active { transform: scale(0.93); }
.select-row__arrow svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .select-row__arrow:hover { background: color-mix(in srgb, #fff 9%, transparent); } }
.select-row__dots { display: flex; gap: 1rem; }
.select-row__dots button {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--on-main) 25%, transparent);
  cursor: pointer;
  transition: width 500ms var(--ease-out), background-color 400ms ease;
}
.select-row__dots button[aria-current="true"] { width: 1.75rem; background: var(--c); }
.select-row__dots button::before { content: ""; position: absolute; inset: -0.5rem; } /* a 24px target round each small dot */
@keyframes row-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--w) * -0.022); } }
@keyframes row-breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(0.85); opacity: 0.55; } }
@keyframes row-pop { 0% { transform: translateY(calc(var(--w) * 0.05)); } 55% { transform: translateY(calc(var(--w) * -0.012)); } 100% { transform: none; } }

/* Real work, real results: real posts on floating phones (the select row's phone skin, post_select) */
@property --c { syntax: "<color>"; inherits: true; initial-value: #8fc1e3; } /* registered, so the glow can fade between colours */
.post-select { position: relative; overflow: hidden; background: var(--colour-main); transition: --c 900ms ease; }
.post-select::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 16rem;
  width: min(60rem, 140%);
  height: 38rem;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c, var(--colour-accent)) 12%, transparent), transparent);
  pointer-events: none;
}
.post-select .wrap { position: relative; }
.select-row--phone .select-row__track { display: flex; gap: 1rem; overflow-x: auto; padding: 1rem 0; scroll-snap-type: x mandatory; }
.select-row--phone .select-row__track > * { display: block; flex: none; scroll-snap-align: center; }
.select-row--phone .select-row__item { --w: 13rem; width: var(--w); margin: 0 0 3rem; }
.js .select-row--phone .select-row__track { display: block; overflow: visible; padding: 0; }
.js .select-row--phone .select-row__stage {
  height: calc(clamp(11.875rem, 21cqw, 15.625rem) * 2.11 + 8rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.js .select-row--phone .select-row__item { --w: clamp(11.875rem, 21cqw, 15.625rem); bottom: 5rem; margin: 0 0 0 calc(var(--w) / -2); }
.select-row--phone [data-offset="0"] { --x: 0cqw; --s: 1; --o: 1; --b: 1; --sat: 1; --blur: 0px; z-index: 6; cursor: default; }
.select-row--phone [data-offset="1"] { --x: 30cqw; --s: 0.74; --o: 0.85; --b: 0.55; --sat: 0.75; --blur: 0px; z-index: 5; }
.select-row--phone [data-offset="-1"] { --x: -30cqw; --s: 0.74; --o: 0.85; --b: 0.55; --sat: 0.75; --blur: 0px; z-index: 5; }
.select-row--phone [data-offset="2"] { --x: 52cqw; --s: 0.57; --o: 0.45; --b: 0.42; --sat: 0.6; --blur: 1.5px; z-index: 4; }
.select-row--phone [data-offset="-2"] { --x: -52cqw; --s: 0.57; --o: 0.45; --b: 0.42; --sat: 0.6; --blur: 1.5px; z-index: 4; }
.select-row--phone :is([data-offset="3"], [data-offset="4"]) { --x: 70cqw; --s: 0.46; --o: 0; --b: 0.35; --blur: 2px; z-index: 3; }
.select-row--phone :is([data-offset="-3"], [data-offset="-4"]) { --x: -70cqw; --s: 0.46; --o: 0; --b: 0.35; --blur: 2px; z-index: 3; }
.select-row--phone .select-row__pad { bottom: calc(var(--w) * -0.13); width: 160%; height: calc(var(--w) * 0.34); }
.select-row__phone {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19;
  padding: calc(var(--w) * 0.03);
  border-radius: calc(var(--w) * 0.16);
  background: linear-gradient(150deg, color-mix(in srgb, var(--colour-main) 80%, #fff 6%), #0a0e18 38%, #0a0e18 70%, color-mix(in srgb, var(--colour-main) 90%, #fff 4%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 0 0 calc(var(--w) * 0.012) #070a12, 0 60px 90px -45px rgb(0 0 0 / 0.9), 0 22px 34px -24px rgb(0 0 0 / 0.7);
}
.select-row__island { position: absolute; z-index: 3; top: calc(var(--w) * 0.045); left: 50%; width: 31%; height: calc(var(--w) * 0.085); translate: -50% 0; border-radius: 99px; background: #000; }
.select-row__display { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * 0.13); background: #000; font-size: calc(var(--w) * 0.045); line-height: 1.3; }
.post__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__reel { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.45em; padding: 34% 7% 9%; background: linear-gradient(transparent, rgb(0 0 0 / 0.6)); color: #fff; font-weight: 600; }
.post__avatar { flex: none; width: 1.7em; height: 1.7em; border: 1.5px solid #fff; border-radius: 50%; background: var(--c); }
.post__progress { position: absolute; z-index: 3; left: 7%; right: 7%; bottom: 4.5%; height: 2px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 0.3); }
.post__progress i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.post__feed { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 22%; background: #fff; color: #111; }
.post__top { display: flex; align-items: center; gap: 0.45em; padding: 0 5% 4%; font-weight: 600; }
.post__top .post__avatar { border-color: #fff; box-shadow: 0 0 0 1.5px var(--c); }
.post__picture { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.post__acts { display: flex; gap: 7%; padding: 4% 5% 2%; }
.post__acts svg { width: 1.35em; height: 1.35em; }
.post__caption { display: -webkit-box; padding: 0 5%; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.select-row__item:not([data-offset="0"]) .post__progress { opacity: 0; }
html:not(.js) .post__progress { display: none; }
.select-row__sound {
  position: absolute;
  z-index: 8;
  left: calc(50% + clamp(11.875rem, 21cqw, 15.625rem) / 2 - 3.5rem);
  bottom: 7.5rem;
  display: none;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 0;
  border-radius: 50%;
  background: rgb(9 13 24 / 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 250ms ease;
}
.js .select-row__sound { display: grid; }
.select-row__sound:active { transform: scale(0.92); }
.select-row__sound svg { width: 1.0625rem; height: 1.0625rem; }
.select-row__loud, .select-row.has-sound .select-row__muted { display: none; }
.select-row.has-sound .select-row__loud { display: block; }
.select-row[data-active-kind="post"] .select-row__sound { visibility: hidden; opacity: 0; } /* gone, not just see-through: not a tab stop */
.post__said { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.625rem; padding: 0.4375rem 0.6875rem; border: 1px solid color-mix(in srgb, var(--on-main) 12%, transparent); border-radius: 99px; background: color-mix(in srgb, #fff 5%, transparent); font-size: 0.76rem; font-weight: 600; }
.post__said::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.select-row__ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); rotate: -90deg; pointer-events: none; }
.select-row__ring circle { fill: none; stroke: var(--c, var(--colour-accent)); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; }
.select-row__count { min-width: 3.5rem; white-space: nowrap; color: var(--on-main-soft); font-size: 0.85rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; text-align: center; }
.select-row__count b { color: var(--on-main); font-weight: 600; }
.select-row__pause { padding: 0.625rem 1rem; border: 1px solid color-mix(in srgb, var(--on-main) 20%, transparent); border-radius: 99px; background: none; color: var(--on-main); font: 600 0.8125rem/1 var(--font-body); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.select-row__pause:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .select-row__pause:hover { background: color-mix(in srgb, #fff 8%, transparent); } }
.post-select .results { margin-top: 3.5rem; }

/* Packages */

.packages__list { display: grid; gap: 1rem; align-items: stretch; }
.package { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1.25rem; background: var(--surface); box-shadow: var(--shadow-card); }
.package--featured { background: var(--colour-main); box-shadow: 0 24px 50px -18px color-mix(in srgb, var(--colour-main) 70%, transparent); }
.package--outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.package__tag {
  align-self: flex-start;
  margin: 0 0 0.875rem;
  padding: 0.25rem 0.625rem;
  line-height: 1rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--colour-main);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.package--featured .package__tag { background: var(--colour-accent); color: var(--colour-on-accent); }
.package__name { margin: 0; font-size: 1.5rem; }
/* a monthly package's week: posts as little squares, stories as rings, quiet days as a dash */
.package__week { margin: 1rem 0 0; padding: 0.875rem 0.75rem 0.75rem; border-radius: 1rem; background: color-mix(in srgb, var(--colour-main) 5%, transparent); }
.package--featured .package__week { background: color-mix(in srgb, #fff 6%, transparent); }
.package__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.package__days li { display: grid; justify-items: center; align-content: start; gap: 0.375rem; min-height: 4rem; }
.package__days span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); }
.package__post { width: 1.125rem; height: 1.375rem; border-radius: 0.3rem; background: var(--colour-main); }
.package--featured .package__post { background: var(--colour-accent); }
.package__story { width: 1rem; height: 1rem; border-radius: 50%; border: 2.5px solid var(--colour-accent); }
.package__rest { width: 0.625rem; height: 2px; margin-top: 0.625rem; border-radius: 2px; background: var(--line-strong); }
.package--featured .package__rest { background: var(--line-on-main); }
.package__week-key { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; margin: 0.625rem 0 0; color: var(--muted); font-size: 0.75rem; }
.package__key { display: inline-flex; align-items: center; gap: 0.375rem; }
.package__key::before { content: ""; }
.package__key--post::before { width: 0.5625rem; height: 0.6875rem; border-radius: 0.1875rem; background: var(--colour-main); }
.package--featured .package__key--post::before { background: var(--colour-accent); }
.package__key--story::before { width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 2px solid var(--colour-accent); }
.package__for { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.875rem; }
.package__price {
  margin: 1rem 0 0;
  font-family: var(--font-headings);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--colour-main);
  font-variant-numeric: lining-nums;
}
.package__price-note { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.package--featured .package__price { color: var(--on-main); }
.package__features { display: grid; gap: 0.625rem; margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; font-size: 0.9375rem; }
.package__features li { display: flex; gap: 0.625rem; }
.package__features li::before { content: "\2713"; flex: none; font-weight: 600; color: var(--colour-main); }
.package--featured .package__features li::before { color: var(--colour-accent); }
.package__button { margin-top: auto; }
.package--featured .button--outline { color: var(--on-main); }
@media (min-width: 48rem) { .packages__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .packages__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .packages__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .package--featured { translate: 0 -0.625rem; } /* `translate`, so it never fights the reveal's transform */
}

/* How it works: joined numbered steps (down the page on phones, across on laptops) */

.steps { display: grid; gap: 1.75rem; counter-reset: step; }
.step { position: relative; padding-left: 3.5rem; counter-increment: step; }
.step::before {
  content: counter(step);
  position: absolute;
  top: -0.125rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--colour-main);
  color: var(--colour-accent);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  box-shadow: inset 0 0 0 1.5px var(--colour-main); /* the ring a number shows before it fills in (scroll-linked steps) */
}
.step::after { content: ""; position: absolute; top: 2.5rem; bottom: -1.5rem; left: 1.125rem; border-left: 1px dashed var(--line-strong); }
.step:last-child::after { display: none; }
/* The solid line drawn over the dashed path to the next step */
.step__line { position: absolute; top: 2.5rem; bottom: -1.5rem; left: calc(1.125rem - 0.5px); width: 2px; background: var(--colour-main); transform-origin: top; }
.step__title { margin-bottom: 0.375rem; font-size: 1.25rem; }
.step__text { max-width: 32ch; margin: 0; color: var(--muted); }
@media (min-width: 56rem) {
  .steps { gap: 1.5rem; }
  .steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .step { padding: 3.5rem 0 0; }
  .step::before { top: 0; }
  .step::after { top: 1.125rem; bottom: auto; left: 3rem; right: -1.25rem; border-left: 0; border-top: 1px dashed var(--line-strong); }
  .step__line { top: calc(1.125rem - 0.5px); bottom: auto; left: 3rem; right: -1.25rem; width: auto; height: 2px; transform-origin: left; }
}

/* The result: a big number beside the quote */

.result {
  display: grid;
  gap: 1.25rem 2.5rem;
  align-items: center;
  margin: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.result__figure { display: grid; margin: 0; }
.result__number {
  font-family: var(--font-headings);
  font-size: clamp(4rem, 8vw, 5.5rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--colour-main);
  font-variant-numeric: lining-nums;
}
.result__label { margin-top: 0.625rem; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.result__quote { margin: 0; }
.result__quote p {
  max-width: 40ch;
  margin: 0;
  font-family: var(--font-headings);
  font-size: clamp(1.25rem, 1.5vw + 0.9rem, 1.625rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--colour-main);
  text-indent: -0.42em; /* hang the opening quotation mark */
}
.result__quote p::before { content: "\201C"; }
.result__quote p::after { content: "\201D"; }
@media (min-width: 48rem) { .result--figure { grid-template-columns: auto minmax(0, 1fr); } }

/* About */

.about__inner { display: grid; gap: 2rem 4rem; }
.about__words p { max-width: 46ch; color: var(--muted); font-size: 1.125rem; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-self: start; }
/* No photos yet: the two people are the logo's two rings, navy and sky, overlapping, with their initials */
.people:not(:has(.person__photo)) { display: flex; justify-content: center; align-self: center; gap: 0; }
.person:has(.person__initial) { flex: 0 0 min(46%, 13rem); padding: 0; background: none; box-shadow: none; text-align: center; }
.person:has(.person__initial) + .person:has(.person__initial) { margin-left: max(-8%, -3.5rem); }
.person:has(.person__initial) .person__initial {
  aspect-ratio: 1;
  border-radius: 50%;
  background: none;
  box-shadow: inset 0 0 0 clamp(0.875rem, 2.2vw, 1.25rem) var(--colour-main);
  color: var(--colour-main);
  font-size: clamp(2.75rem, 6vw, 4rem);
}
.person:has(.person__initial) + .person:has(.person__initial) .person__initial { box-shadow: inset 0 0 0 clamp(0.875rem, 2.2vw, 1.25rem) var(--colour-accent); }
.person { padding: 0.625rem; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.person__photo, .person__initial { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-inner); }
.person__initial {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--tint), color-mix(in srgb, var(--colour-main) 12%, var(--colour-background)));
  font-family: var(--font-headings);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: color-mix(in srgb, var(--colour-main) 62%, var(--colour-background)); /* 3:1 or more, as large text */
}
.person__name { margin: 0.875rem 0.375rem 0; font-weight: 600; color: var(--colour-main); }
.person__role { margin: 0.125rem 0.375rem 0.375rem; color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
@media (min-width: 56rem) {
  .about__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* no photos: the heading on the left and the words on the right, like the other sections */
  .about__inner--text { align-items: start; }
  .about__inner--text .about__words { display: contents; }
  .about__inner--text .about__words :is(h2, p) { margin-top: 0; }
}

/* FAQ: opens smoothly where the browser can animate <details>, instantly elsewhere */

.faq__inner { display: grid; gap: 1.5rem 4rem; }
.faq__inner > h2 { margin: 0; }
.question { border-bottom: 1px solid var(--line-strong); }
.question:first-child { border-top: 1px solid var(--line-strong); }
.question__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 0;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--colour-main);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.question__summary::-webkit-details-marker { display: none; }
.question__icon {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform 200ms var(--ease-out), background-color 200ms ease;
}
.question__icon::before,
.question__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0.625rem;
  height: 1.5px;
  margin: auto;
  border-radius: 1px;
  background: var(--colour-main);
  transition: background-color 200ms ease;
}
.question__icon::after { transform: rotate(90deg); }
.question[open] .question__icon { transform: rotate(45deg); background: var(--colour-main); }
.question[open] .question__icon::before,
.question[open] .question__icon::after { background: var(--colour-accent); }
.question__answer p { max-width: 60ch; margin: 0 0 1.25rem; color: var(--muted); }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .question::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete;
    }
    .question[open]::details-content { block-size: auto; }
  }
}
@media (min-width: 56rem) {
  .faq__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .faq__inner > h2 { position: sticky; top: calc(var(--top-bar) + 2rem); align-self: start; }
}

/* The form, on the main colour */

main > .book { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--colour-main); } /* clip: the rings can't be scrolled to, so nothing scrolls inside the section */
.book::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: -18rem;
  width: 40rem;
  height: 34rem;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.book__inner { display: grid; gap: 2.5rem 4rem; }
.book__words h2 { font-size: clamp(2.25rem, 3.5vw + 1rem, 3rem); }
.book__text { max-width: 36ch; font-size: 1.125rem; }
.book__points { display: grid; gap: 0.875rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.book__points li { display: flex; gap: 0.75rem; }
.book__points li::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; border-radius: 50%; background: var(--colour-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23141D33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
/* the logo's two rings, faint, under the words beside the form */
@media (min-width: 56rem) {
  main > .book::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -7rem;
    bottom: -9rem;
    width: 36rem;
    height: 24rem;
    background:
      radial-gradient(circle at 12rem 12rem, transparent 9.9rem, color-mix(in srgb, var(--on-main) 7%, transparent) 10rem 11.4rem, transparent 11.5rem),
      radial-gradient(circle at 23.5rem 12rem, transparent 9.9rem, color-mix(in srgb, var(--colour-accent) 13%, transparent) 10rem 11.4rem, transparent 11.5rem);
    pointer-events: none;
  }
}
.book__call { margin: 1.5rem 0 0; }
.book__call a { color: var(--on-main); font-weight: 600; }
@media (min-width: 56rem) { .book__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); align-items: center; } }
/* the two-step form changes height between steps, so its words stay put at the top rather than re-centring */
@media (min-width: 56rem) { .book--two-step .book__inner { align-items: start; } }

.enquiry {
  display: grid;
  column-gap: 1rem;
  /* the inline padding keeps Turnstile's 300px-wide check inside the card on a 360px phone */
  padding: clamp(1.25rem, 4vw, 2rem) clamp(0.75rem, 3.5vw, 2rem);
  border-radius: 1.25rem;
  background: var(--surface);
  color: var(--colour-text);
  box-shadow: var(--shadow-float);
}
.enquiry > * { grid-column: 1 / -1; }
@media (min-width: 36rem) {
  .enquiry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enquiry > .field--half { grid-column: auto; }
}
.enquiry__heading { margin-bottom: 1.25rem; font-size: 1.375rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: 0.375rem; color: var(--colour-main); font-size: 0.875rem; font-weight: 600; }
.field input,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 0;
  border-radius: 0.625rem;
  background: var(--field);
  /* a field edge needs 3:1 against the card */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--colour-main) 60%, var(--field));
  color: var(--colour-text);
  caret-color: var(--colour-main);
  font: inherit;
  font-size: 1rem; /* 16px or more, so phones don't zoom in */
  transition: box-shadow 150ms ease;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid transparent; /* still visible in Windows high-contrast mode */
  box-shadow: inset 0 0 0 2px var(--colour-main), 0 0 0 4px color-mix(in srgb, var(--colour-accent) 55%, transparent);
}
.field textarea[data-filled] {
  box-shadow: inset 0 0 0 2px var(--colour-main), 0 0 0 5px color-mix(in srgb, var(--colour-accent) 70%, transparent);
}
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--colour-error); }
.field__error { margin: 0.375rem 0 0; color: var(--colour-error); font-size: 0.875rem; font-weight: 600; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* The form in two short steps (form.two_step): what eats their time, then who they are. Without JavaScript both steps
   show and the form works as one; site.js sets data-step and shows one at a time. */
.form-bar { display: none; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.form-bar__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--colour-accent); transition: background-color 250ms ease; }
.form-bar__dot:first-child, [data-step="2"] .form-bar__dot { background: var(--colour-accent); }
.form-bar__line { position: relative; width: 2.5rem; height: 2px; border-radius: 1px; background: var(--line-strong); overflow: hidden; }
.form-bar__line::after { content: ""; position: absolute; inset: 0; background: var(--colour-accent); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out); }
[data-step="2"] .form-bar__line::after { transform: none; }
.form-bar__text { margin-left: 0.375rem; color: var(--muted-light); font-size: 0.8125rem; font-weight: 600; }
.form-step { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1rem; min-width: 0; }
@media (min-width: 36rem) {
  [data-form-step="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-form-step="2"] > :not(.field--half) { grid-column: 1 / -1; }
}
.form-step__next { margin-bottom: 0.25rem; }
html.js .enquiry--two-step .form-bar { display: flex; }
html.js .enquiry--two-step:not([data-step="2"]) [data-form-step="2"],
html.js .enquiry--two-step[data-step="2"] [data-form-step="1"] { display: none; }
html:not(.js) .form-step__next { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .enquiry--two-step .form-step.is-entering { animation: form-step-in 320ms var(--ease-out) both; }
}
@keyframes form-step-in { from { opacity: 0; transform: translateX(1rem); } }
.picks { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.picks__question { margin-bottom: 0.875rem; padding: 0; color: var(--colour-main); font-size: 1.0625rem; font-weight: 600; }
.picks__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pick { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border-radius: 999px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--colour-main) 30%, var(--field));
  color: var(--colour-main);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}
/* each choice starts as an empty sky ring and fills, with a tick, once it's picked */
.pick span::before { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--colour-accent); transition: background-color 160ms ease; }
.pick input:checked + span { background: color-mix(in srgb, var(--colour-accent) 30%, var(--field)); box-shadow: inset 0 0 0 1.5px var(--colour-main); }
.pick input:checked + span::before { background: var(--colour-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.2 2.2L11.4 5.8' fill='none' stroke='%238FC1E3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: none; }
.pick input:focus-visible + span { outline: 3px solid var(--colour-main); outline-offset: 2px; }
.pick:active span { transform: scale(0.97); }
.form-step__picked { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--colour-accent) 18%, var(--field)); color: var(--colour-main); font-size: 0.9375rem; font-weight: 600; }
.form-step__picked[hidden] { display: none; }
.form-step__summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.form-step__change { padding: 0; border: 0; background: none; color: var(--colour-main); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.field__optional { color: var(--muted-light); font-weight: 400; }
/* What happens next, along the foot of the form */
.next-steps { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.next-steps__label { margin: 0 0 0.75rem; color: var(--muted-light); font-size: 0.8125rem; font-weight: 600; }
.next-steps__list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; counter-reset: next; }
.next-steps__list li { counter-increment: next; display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.9375rem; }
.next-steps__list li::before { content: counter(next); flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--colour-accent); color: var(--colour-main); font: 600 0.75rem/1 var(--font-body); translate: 0 -0.1em; }
@media (min-width: 40rem) { .next-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .next-steps__list li { flex-direction: column; gap: 0.5rem; } }

/* The audit pictured beside the form: one page, a row per area with its top fix (form.two_step.report) */
.report { position: relative; max-width: 25rem; margin: 2rem 0; padding: 1.25rem 1.25rem 1rem; border-radius: 1rem; background: var(--surface); color: var(--colour-main); box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.65); }
.report__head { display: grid; grid-template-columns: auto 1fr; gap: 0 0.75rem; align-items: center; padding-bottom: 0.875rem; border-bottom: 1px solid var(--line-strong); }
.report__title { font: 600 1.25rem/1.1 var(--font-headings); letter-spacing: -0.015em; }
.report__sub { grid-column: 2; color: var(--muted-light); font-size: 0.8125rem; }
.report__mark { position: relative; grid-row: span 2; width: 2.6rem; height: 1.75rem; }
.report__mark i { position: absolute; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; box-shadow: inset 0 0 0 0.3rem var(--colour-main); }
.report__mark i + i { left: 0.85rem; box-shadow: inset 0 0 0 0.3rem var(--colour-accent); }
.report__rows { margin: 0; padding: 0; list-style: none; }
.report__rows li { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.875rem 0; border-bottom: 1px solid var(--line); }
.report__rows b { font: 600 1rem/1.3 var(--font-headings); }
.report__fix { display: grid; gap: 0.4rem; }
.report__fix em { justify-self: start; padding: 0.125rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--colour-accent) 30%, transparent); font: 600 0.6875rem/1.4 var(--font-body); font-style: normal; }
.report__fix i { display: block; height: 0.4375rem; border-radius: 999px; background: color-mix(in srgb, var(--colour-main) 14%, transparent); transform-origin: left; }
.report__fix i + i { width: 68%; }
.report__foot { margin: 0.875rem 0 0; font-size: 0.8125rem; font-weight: 600; }
/* on phones: the heading, the form straight away, then what you'll get and the ticks */
@media (max-width: 55.99rem) {
  .book--two-step .book__words { display: contents; }
  .book--two-step .book__words > :is(h1, h2) { order: 1; }
  .book--two-step .enquiry { order: 2; }
  .book--two-step .report { order: 3; margin: 1rem auto 0.5rem; }
  .book--two-step .book__words > :not(:is(h1, h2), .report) { order: 4; }
}

/* Turnstile only shows itself when it needs the visitor to do something; otherwise it takes no room.
   It is 300px wide: clipped, not overflowing, with text at 200%. */
.cf-turnstile { max-width: 100%; overflow: hidden; }
.enquiry > .button { margin-top: 0.25rem; }
.enquiry__note { margin: 1rem 0 0; color: var(--muted); font-size: 0.875rem; }
.enquiry__status { display: flex; gap: 0.625rem; align-items: center; margin: 1rem 0 0; padding: 0.875rem 1rem; border-radius: 0.625rem; font-weight: 600; }
.enquiry__status[hidden] { display: none; }
.enquiry__tick { flex: none; }
.enquiry__tick circle { fill: currentColor; opacity: 0.14; }
.enquiry__tick path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.enquiry__status:not([data-kind="ok"]) .enquiry__tick { display: none; }
.enquiry__status:focus { outline: none; } /* focused only so screen readers announce it; it isn't a control */
.enquiry__status[data-kind="ok"] { background: var(--tint); color: var(--colour-main); }
.enquiry__status[data-kind="error"] { background: color-mix(in srgb, var(--colour-error) 10%, var(--surface)); color: var(--colour-error); }
.enquiry.is-sent .field,
.enquiry.is-sent .cf-turnstile,
.enquiry.is-sent .button,
.enquiry.is-sent .enquiry__note { display: none; }
.enquiry.is-sent .enquiry__status { margin-top: 0; }
.enquiry__noscript a { color: var(--on-main); }

/* Footer */

.footer { padding-block: 2.5rem; background: var(--deep); }
.footer__inner { display: grid; gap: 1.25rem; }
.footer__contact { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.footer__contact :is(a, button) { display: inline-block; padding-block: 0.4rem; color: var(--on-main-soft); text-decoration: none; overflow-wrap: anywhere; transition: color 160ms ease; } /* ~32px tap height */
.footer__button { padding-inline: 0; border: 0; background: none; font: inherit; line-height: inherit; cursor: pointer; } /* "Cookie settings": an action, dressed like the links beside it */
@media (hover: hover) and (pointer: fine) { .footer__contact :is(a, button):hover { color: var(--on-main); text-decoration: underline; } }
.footer__contact li[hidden] { display: none; }
/* While the cookie banner is up, nothing the keyboard moves to is hidden under it, and the footer makes room for it
   so its last lines can be scrolled into view */
:root:has(.cookies:not([hidden])) { scroll-padding-bottom: calc(var(--cookies-room, 0px) + 1.5rem); }
:root:has(.cookies:not([hidden])) .footer { padding-bottom: calc(2.5rem + var(--cookies-room, 0px) + 0.75rem); }
.footer__contact .footer__social { display: inline-flex; align-items: center; gap: 0.45rem; } /* a social page: its icon, then its name */
.footer__social .icon { width: 1.125rem; height: 1.125rem; flex: none; }
.footer__legal { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line-on-main); font-size: 0.8125rem; }
.footer__area { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line-on-main); font-size: 0.875rem; max-width: 70ch; }
.footer__area + .footer__legal { padding-top: 0; border-top: 0; }
.footer__areas { margin: 0; font-size: 0.875rem; max-width: 70ch; }
.footer__area-link { white-space: nowrap; } /* each comma stays with its town when the line wraps */
.footer__areas a { display: inline-block; padding-block: 0.4rem; color: var(--on-main-soft); transition: color 160ms ease; } /* ~32px tap height, like the contact links */
@media (hover: hover) and (pointer: fine) { .footer__areas a:hover { color: var(--on-main); } }
.footer__areas + .footer__legal { padding-top: 0; border-top: 0; }
.footer__credit { margin: 0; font-size: 0.8125rem; }
.footer__credit a { color: var(--on-main-soft); }
@media (min-width: 56rem) {
  .footer__inner { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .footer__contact { justify-content: flex-end; }
  :is(.footer__area, .footer__areas, .footer__legal, .footer__credit) { grid-column: 1 / -1; }
}

/* The page shown for an address that doesn't exist */

.not-found { padding-block: clamp(4rem, 10vw, 7rem); }
.not-found__inner { max-width: 40rem; }
.not-found h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }

/* The page the form goes to once an enquiry is sent */

.thanks { padding-block: clamp(4rem, 10vw, 7rem); }
.thanks__inner { max-width: 40rem; }
.thanks h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.thanks__text { font-size: 1.125rem; max-width: 50ch; }
.thanks__tick { display: block; margin-bottom: 1.25rem; }
.thanks__tick circle { fill: var(--colour-accent); }
.thanks__tick path { fill: none; stroke: var(--colour-on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The cookie banner: at the foot of the screen until the visitor chooses. Accept and Reject look the same */

.cookies {
  position: fixed;
  inset: auto 0.75rem 0.75rem;
  z-index: 30; /* over the page and the top bar; under the skip link */
  max-width: 46rem;
  margin-inline: auto;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  background: var(--colour-main);
  box-shadow: 0 1px 0 var(--line-on-main) inset, 0 18px 40px -16px rgb(0 0 0 / 0.45);
}
.cookies[hidden] { display: none; }
.cookies__inner { display: grid; gap: 0.875rem; }
.cookies__text { margin: 0; color: var(--on-main-soft); font-size: 0.9375rem; line-height: 1.5; }
.cookies__text a { color: var(--on-main); white-space: nowrap; }
.cookies__choices { display: flex; gap: 0.625rem; }
.cookies__button { flex: 1; }
@media (min-width: 40rem) {
  .cookies__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; }
  .cookies__button { flex: none; min-width: 6.5rem; }
}

/* Guides: the list at /guides/, each guide's page, and the guides listed on the page they relate to */

.guides { padding-block: clamp(3rem, 7vw, 5rem); }
.guides__head { max-width: 44rem; margin-bottom: 2.5rem; }
.guides h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.guides__intro { font-size: 1.125rem; }
.guide-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; } /* minmax(0, ...): a long word in a title wraps instead of widening the page */
@media (min-width: 56rem) { .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-card__link {
  display: grid;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--colour-main) 4%, var(--colour-background));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--colour-main) 12%, transparent);
  color: var(--colour-text);
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .guide-card__link:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--colour-main) 40%, transparent); transform: translateY(-2px); }
}
.guide-card__title { font-family: var(--font-headings); font-size: 1.3125rem; font-weight: 600; line-height: 1.25; color: var(--colour-main); }
.guide-card__date { font-size: 0.875rem; }
.related-guides { padding-block: clamp(2.5rem, 6vw, 4rem); }
.related-guides__heading { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); margin-bottom: 1.5rem; }
.guide { padding-block: clamp(3rem, 7vw, 5rem); }
.guide__inner { max-width: 44rem; }
.guide h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.guide__crumb { margin-bottom: 1.25rem; font-size: 0.9375rem; }
.guide__meta { margin-bottom: 2rem; font-size: 0.9375rem; }
.prose h2 { margin-top: 2.25rem; font-size: 1.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose li { max-width: 65ch; font-size: 1.0625rem; line-height: 1.65; }
.prose li { margin-bottom: 0.5rem; }
.prose .table-scroll { margin-top: 1.5rem; overflow-x: auto; border-radius: 0.75rem; background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.prose th, .prose td { padding: 0.75rem 0.875rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--font-headings); font-weight: 600; color: var(--colour-main); border-bottom-color: var(--line-strong); }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 600; }
.prose .sources { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-light); }
.guide__related { margin: 2.5rem 0 0; font-weight: 600; }
.guide__related a::after { content: " \2192"; }

/* The trades package page: the offer's job sheet, what's in the box, one price, you own everything, the referral
   card and a client's site as the proof. Motion: the sheet writes itself once on load (the animations block below). */

.hero--offer .hero__inner { display: grid; gap: 3rem; align-items: center; }
.hero--offer .hero__headline { max-width: none; font-size: clamp(2.625rem, 4.5vw + 0.5rem, 3.875rem); }
.hero__audience { max-width: 44ch; margin: 1.25rem 0 0; font-size: 0.9375rem; }
.hero__audience b { color: var(--on-main); font-weight: 600; }
@media (min-width: 56rem) { .hero--offer .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.sheet { position: relative; min-width: 0; max-width: 26rem; margin-inline: auto; padding: 1.5rem 1.5rem 1.375rem; border-radius: 1.25rem; background: var(--surface); color: var(--colour-text); box-shadow: var(--shadow-float); font-size: 0.9375rem; }
.sheet__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin: 0; padding-bottom: 0.875rem; border-bottom: 1px dashed var(--line-strong); }
.sheet__head b { font-family: var(--font-headings); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--colour-main); }
.sheet__head small { font-size: 0.75rem; color: var(--muted-light); text-align: right; }
.sheet__rows { margin: 0; padding: 0; list-style: none; }
.sheet__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.sheet__item b { display: block; font-weight: 600; line-height: 1.3; color: var(--colour-main); }
.sheet__item small { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--muted-light); }
.sheet__tag { font-style: normal; font-size: 0.8125rem; color: var(--muted-light); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet__tick { width: 1.375rem; height: 1.375rem; margin-top: 0.0625rem; border-radius: 50%; background: var(--colour-main); color: var(--colour-accent); }
.sheet__tick path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sheet__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin: 0; padding-top: 1rem; }
.sheet__total span { font-weight: 600; color: var(--colour-main); }
.sheet__total b { font-family: var(--font-headings); font-size: 2.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--colour-main); font-variant-numeric: lining-nums; }
.sheet__total small { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: var(--muted-light); }
.sheet__note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--muted-light); }
.sheet__stamp { position: absolute; right: 1.25rem; top: -0.875rem; padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--colour-accent); color: var(--colour-on-accent); font-size: 0.75rem; font-weight: 600; box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.5); }

.box__list { display: grid; gap: 0 3rem; margin: 0; padding: 0; list-style: none; }
.box__item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 1.5rem 0; border-top: 1px solid var(--line-strong); }
.box__item:first-child { border-top: 0; }
.box__title { margin: 0; grid-column: 2; font-size: 1.25rem; }
.box__text { margin: 0; grid-column: 2; max-width: 44ch; color: var(--muted); }
.box__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.875rem; background: var(--colour-main); color: var(--colour-accent); }
.box__icon svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 56rem) {
  .box__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box__item:nth-child(2) { border-top: 0; }
}

.price__inner { display: grid; gap: 1.5rem 4rem; }
.price__draft { display: inline-block; margin: 0 0 1rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--tint); color: var(--colour-main); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.price__line { margin: 0; font-family: var(--font-headings); font-weight: 600; font-size: clamp(1.75rem, 2.6vw + 1rem, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--colour-main); text-wrap: balance; }
.price__line b { font-size: 1.35em; font-weight: 600; font-variant-numeric: lining-nums; }
.price__line small { display: block; margin-top: 0.5rem; font-family: var(--font-body); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--muted); }
.price__pays { max-width: 40ch; margin: 0; font-size: 1.125rem; }
.price__pays b { color: var(--colour-main); }
@media (min-width: 56rem) { .price__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }

.own__inner { display: grid; gap: 1.5rem 4rem; }
.own__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; font-size: 1.0625rem; }
.own__list li { display: flex; gap: 0.75rem; align-items: baseline; }
.own__list li::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--colour-accent); box-shadow: 0 0 0 1.5px var(--colour-main); translate: 0 -0.1em; }
.own__list b { color: var(--colour-main); font-weight: 600; }
.own__note { max-width: 40ch; margin: 1.25rem 0 0; color: var(--muted); }
@media (min-width: 56rem) { .own__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } .own__inner h2 { margin: 0; } }

.refer { display: grid; gap: 1rem 2rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 1.25rem; background: var(--colour-main); box-shadow: 0 24px 50px -18px color-mix(in srgb, var(--colour-main) 70%, transparent); }
.refer h2 { margin: 0; font-size: clamp(1.5rem, 2vw + 0.75rem, 2.125rem); }
.refer p { margin: 0; max-width: 44ch; }
@media (min-width: 48rem) { .refer { grid-template-columns: minmax(0, 1fr) auto; } }

.proof-site__inner { display: grid; gap: 2rem 4rem; align-items: center; }
.proof-site__phone { width: min(60%, 13rem); margin-inline: auto; }
.proof-site__rating { display: flex; align-items: center; gap: 0.625rem; margin: 1.25rem 0 0.75rem; font-weight: 600; color: var(--colour-main); }
.proof-site__stars { flex: none; width: 5.5rem; height: 1rem; fill: #e8a317; } /* Google's star gold, decorative */
.proof-site__meta { margin: 0; color: var(--muted); }
.proof-site__links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 1.5rem 0 0; }
.proof-site__links a { font-weight: 600; }
@media (min-width: 56rem) { .proof-site__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* Privacy page */

.privacy { padding-block: clamp(3rem, 7vw, 5rem); }
.privacy__inner { max-width: 44rem; }
.privacy h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.privacy h2 { margin-top: 2.25rem; font-size: 1.5rem; }
.privacy p, .privacy li { max-width: 65ch; }
.privacy li { margin-bottom: 0.5rem; }

/* Reveals. site.js marks the sections still below the screen, then marks each once as it scrolls into view. The
   page's one entrance is the hero's headline; sections don't fade up on their own. The marks still start the
   admin card's switches and the steps' line below. Nothing is hidden without JavaScript, for visitors who ask for
   less motion, or when printing. */

@media screen and (prefers-reduced-motion: no-preference) {

}

/* The audit picture's lines write themselves in, row by row, as the form comes into view */
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal]:not(.is-visible) .report__fix i { transform: scaleX(0); }
  .reveal-ready [data-reveal].is-visible .report__fix i { transition: transform 600ms var(--ease-out) 350ms; }
  .reveal-ready [data-reveal].is-visible .report__fix i + i { transition-delay: 470ms; }
  .reveal-ready [data-reveal].is-visible .report__rows li:nth-child(2) .report__fix i { transition-delay: 600ms; }
  .reveal-ready [data-reveal].is-visible .report__rows li:nth-child(2) .report__fix i + i { transition-delay: 720ms; }
  .reveal-ready [data-reveal].is-visible .report__rows li:nth-child(3) .report__fix i { transition-delay: 850ms; }
  .reveal-ready [data-reveal].is-visible .report__rows li:nth-child(3) .report__fix i + i { transition-delay: 970ms; }
  .reveal-ready [data-reveal].is-visible .report__rows li:nth-child(4) .report__fix i { transition-delay: 1100ms; }
  .reveal-ready [data-reveal].is-visible .report__rows li:nth-child(4) .report__fix i + i { transition-delay: 1220ms; }
}

/* The worries' rings draw themselves round, one after another (the section's moment, like the strikes it replaced) */
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal]:not(.is-visible) .problem__point::before { --ring: 0deg; }
  .reveal-ready [data-reveal].is-visible .problem__point::before { transition: --ring 550ms var(--ease-in-out) 250ms; }
  .reveal-ready [data-reveal].is-visible .problem__point:nth-child(2)::before { transition-delay: 400ms; }
  .reveal-ready [data-reveal].is-visible .problem__point:nth-child(3)::before { transition-delay: 550ms; }
  .reveal-ready [data-reveal].is-visible .problem__point:nth-child(4)::before { transition-delay: 700ms; }
  .reveal-ready [data-reveal].is-visible .problem__point:nth-child(5)::before { transition-delay: 850ms; }
  .reveal-ready [data-reveal].is-visible .problem__point:nth-child(6)::before { transition-delay: 1000ms; }
  /* already on the first screen (a laptop): they draw once the page has opened */
  html.js .problem:not([data-reveal]) .problem__point::before { animation: ring-draw 550ms var(--ease-in-out) 700ms both; }
  html.js .problem:not([data-reveal]) .problem__point:nth-child(2)::before { animation-delay: 850ms; }
  html.js .problem:not([data-reveal]) .problem__point:nth-child(3)::before { animation-delay: 1000ms; }
  html.js .problem:not([data-reveal]) .problem__point:nth-child(4)::before { animation-delay: 1150ms; }
  html.js .problem:not([data-reveal]) .problem__point:nth-child(5)::before { animation-delay: 1300ms; }
  html.js .problem:not([data-reveal]) .problem__point:nth-child(6)::before { animation-delay: 1450ms; }
}
@keyframes ring-draw { from { --ring: 0deg; } }

/* Four moments that tell the story (seen once per visit, so they can take a little longer than a button).
   None of them runs for visitors who ask for less motion or when printing: everything is just shown. */
@media screen and (prefers-reduced-motion: no-preference) {
  /* 1. Home hero: today's jobs tick over to "Sent", one after another */
  .tasks__done { animation: tick-in 300ms var(--ease-out) both; }
  .tasks li:nth-child(1) .tasks__done { animation-delay: 500ms; }
  .tasks li:nth-child(2) .tasks__done { animation-delay: 800ms; }
  .tasks li:nth-child(3) .tasks__done { animation-delay: 1100ms; }
  .tasks li:nth-child(4) .tasks__done { animation-delay: 1400ms; }

  /* 2. Social hero: the phones rise and tip into their angles (moving, never fading: the posters are the
     page's main picture), then the stat card follows */
  .phones__phone { animation: phone-in 700ms var(--ease-out) both; }
  .phones__phone:nth-child(2) { animation-delay: 80ms; }
  .phones__stat { animation: stat-in 300ms var(--ease-out) 450ms both; }
  /* 2b. Websites hero: the laptop rises, then the phone in front of it (moving, never fading), then the stat card */
  .devices__laptop, .devices__phone { animation: device-in 700ms var(--ease-out) both; }
  .devices__phone { animation-delay: 120ms; }
  .devices__stat { animation: stat-in 300ms var(--ease-out) 450ms both; }

  /* 3. The thank-you message rises in and its tick draws itself; on the thank-you page, the tick pops in and draws */
  .enquiry.is-sent .enquiry__status { animation: status-in 300ms var(--ease-out) both; }
  .enquiry__status[data-kind="ok"] .enquiry__tick path { stroke-dasharray: 1; animation: tick-draw 400ms var(--ease-out) 150ms both; }
  .thanks__tick { animation: tick-in 300ms var(--ease-out) both; }
  .thanks__tick path { stroke-dasharray: 1; animation: tick-draw 450ms var(--ease-out) 200ms both; }

  /* 4. The admin card's switches flick on, one by one, as the card appears */
  .reveal-ready [data-reveal]:not(.is-visible) .toggles__switch { background: var(--line-strong); }
  .reveal-ready [data-reveal]:not(.is-visible) .toggles__switch::after { translate: -0.625rem 0; }
  .reveal-ready [data-reveal].is-visible .toggles__switch { transition: background-color 250ms ease; }
  .reveal-ready [data-reveal].is-visible .toggles__switch::after { transition: translate 250ms var(--ease-out); }
  .reveal-ready [data-reveal].is-visible .toggles li:nth-child(1) .toggles__switch,
  .reveal-ready [data-reveal].is-visible .toggles li:nth-child(1) .toggles__switch::after { transition-delay: 350ms; }
  .reveal-ready [data-reveal].is-visible .toggles li:nth-child(2) .toggles__switch,
  .reveal-ready [data-reveal].is-visible .toggles li:nth-child(2) .toggles__switch::after { transition-delay: 470ms; }
  .reveal-ready [data-reveal].is-visible .toggles li:nth-child(3) .toggles__switch,
  .reveal-ready [data-reveal].is-visible .toggles li:nth-child(3) .toggles__switch::after { transition-delay: 590ms; }
  .reveal-ready [data-reveal].is-visible .toggles li:nth-child(4) .toggles__switch,
  .reveal-ready [data-reveal].is-visible .toggles li:nth-child(4) .toggles__switch::after { transition-delay: 710ms; }
}
@keyframes tick-in { from { opacity: 0; transform: scale(0.95); } }
@keyframes phone-in { from { translate: 0 1.5rem; rotate: 0deg; } }
@keyframes device-in { from { translate: 0 1.5rem; } }
@keyframes stat-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes status-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes tick-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Added with the automation page: first impressions, moving between pages, and the order of the steps */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Headlines: the words rise into place one by one, the first straight away (under 0.8s in all) */
  .hero__word { animation: word-in 500ms var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }

  /* The automation flow plays once: each step rises in, then its line draws on to the next one */
  .flow__step { animation: flow-step 400ms var(--ease-out) both; animation-delay: calc(300ms + var(--i) * 650ms); }
  .flow__step:not(:last-child)::after { animation: flow-line-down 350ms var(--ease-in-out) both; animation-delay: calc(650ms + var(--i) * 650ms); }
  .flow__done { animation: tick-in 300ms var(--ease-out) both; animation-delay: calc(750ms + var(--i) * 650ms); }

  /* The offer's job sheet writes itself once: the card rises, each row fills in with its tick drawn just after it,
     then the total, the footnote and the stamp (under 1.7s in all). It reads like a quote being written up. */
  .sheet { animation: device-in 700ms var(--ease-out) both; }
  .sheet__row { animation: row-in 420ms var(--ease-out) both; animation-delay: calc(450ms + var(--i) * 110ms); }
  .sheet__tick path { stroke-dasharray: 1; animation: tick-draw 350ms var(--ease-out) both; animation-delay: calc(650ms + var(--i) * 110ms); }
  .sheet__total, .sheet__note { animation: stat-in 350ms var(--ease-out) both; animation-delay: 1150ms; }
  .sheet__stamp { animation: stamp-in 320ms var(--ease-out) both; animation-delay: 1350ms; }

  /* How it works, in browsers that can't tie animation to scrolling (Firefox for now): the numbers grow in
     and the lines draw on, in order, once the section is shown. The others get the scroll-linked steps below. */
  @supports not (animation-timeline: view()) {
    .reveal-ready [data-reveal]:not(.is-visible) .step::before { opacity: 0; transform: scale(0.9); }
    .reveal-ready [data-reveal]:not(.is-visible) .step__line { clip-path: inset(0 0 100% 0); }
    .reveal-ready [data-reveal].is-visible .step::before { transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
    .reveal-ready [data-reveal].is-visible .step__line { transition: clip-path 400ms var(--ease-in-out); }
    .reveal-ready [data-reveal].is-visible .step::before { transition-delay: calc(200ms + var(--i) * 250ms); }
    .reveal-ready [data-reveal].is-visible .step__line { transition-delay: calc(350ms + var(--i) * 250ms); }
  }

  /* How it works, tied to scrolling (Chrome, Edge, Safari 26+): as the steps pass a line three-quarters
     of the way down the screen, the solid line fills the dashed path and each number fills in as the line
     reaches it. Scrolling back up empties them again. Only colours and transforms change. */
  @supports (animation-timeline: view()) {
    .steps { view-timeline: --steps block; view-timeline-inset: 74% 25%; --d: var(--n); }
    .step::before {
      animation: step-number linear both;
      animation-timeline: --steps;
      animation-range: cover calc(var(--i) / var(--d) * 96%) cover calc(var(--i) / var(--d) * 96% + 3%);
    }
    .step__line {
      animation: step-line-down linear both;
      animation-timeline: --steps;
      animation-range: cover calc(var(--i) / var(--d) * 96% + 3%) cover calc((var(--i) + 1) / var(--d) * 96%);
    }
  }

  /* Moving between pages: the old page fades out, the new one fades up; the top bar stays still */
  .top-bar { view-transition-name: top-bar; }
  ::view-transition-old(root) { animation: page-out 180ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: page-in 260ms var(--ease-out) both; }
  ::view-transition-old(top-bar),
  ::view-transition-new(top-bar) { animation: none; }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
  .flow__step:not(:last-child)::after { animation-name: flow-line-across; }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 56rem) {
  @supports not (animation-timeline: view()) {
    .reveal-ready [data-reveal]:not(.is-visible) .step__line { clip-path: inset(0 100% 0 0); }
  }
  /* Steps side by side all pass the screen line at once, so they play in turn while the row rises from
     85% to about 45% of the way down, finishing before a visitor who jumped here from the menu arrives */
  @supports (animation-timeline: view()) {
    .steps { view-timeline-inset: 67.5% 15%; --d: calc(var(--n) - 1); }
    .step__line { animation-name: step-line-across; }
  }
}
/* The page-transition opt-in itself is in base.html's <head>: Chrome ignores it in an external stylesheet */
@keyframes word-in { from { opacity: 0; transform: translateY(0.25em); filter: blur(4px); } }
@keyframes flow-step { from { opacity: 0; transform: translateY(0.5rem); } }
@keyframes flow-line-down { from { transform: scaleY(0); } }
@keyframes flow-line-across { from { transform: scaleX(0); } }
@keyframes step-number { from { background-color: transparent; color: var(--colour-main); } }
@keyframes step-line-down { from { transform: scaleY(0); } }
@keyframes step-line-across { from { transform: scaleX(0); } }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  /* the select row stays still: no float, glow breathing or lift (items still switch) */
  .select-row__float, .select-row__pad::after, .select-row__pad i, .select-row__lift.is-popping { animation: none !important; }
  .select-row__caption.is-out { filter: none; transform: none; }
  /* the posting phone is a still picture */
  .posting__float, .posting__floor::after { animation: none !important; }
}

/* The our_work tour's line (registered, so the sweep can animate it) and its two animations */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@keyframes tour-fill { to { transform: scaleX(1); } }
@keyframes compare-hint { 0% { --pos: 50%; } 35% { --pos: 30%; } 72% { --pos: 66%; } 100% { --pos: 50%; } }
@keyframes row-in { from { opacity: 0; transform: translateY(0.375rem); } }
@keyframes stamp-in { from { opacity: 0; transform: scale(1.15) rotate(-4deg); } }