@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/saira-condensed-normal-500-latin-ext.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/saira-condensed-normal-500-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/saira-condensed-normal-600-latin-ext.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/saira-condensed-normal-600-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/saira-condensed-normal-700-latin-ext.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/saira-condensed-normal-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/saira-condensed-normal-800-latin-ext.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/saira-condensed-normal-800-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/saira-normal-400-600-latin-ext.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/saira-normal-400-600-latin.woff2') format('woff2');
}

:root {
  --accent: #f2c14e;
  --accent-hover: #f4cc6e;
  --accent-ink: #000000;
  --paper: #0a0b0d;
  --paper-soft: #131419;
  --ink: #ffffff;
  --ink-soft: #a9aaaa;
  --line: #313234;
  --measure: 62ch;
  --gap: 1rem;
  --gap-wide: 2rem;
  --radius: 0;
  --button-radius: 0;
  --shadow: 0 0 0 1px var(--line);
  --texture: none;
  --heading-weight: 700;
  --heading-case: uppercase;
  --scale: 1.333;
  --type-heading: "Saira Condensed", "Arial Narrow", "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --type: Saira, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  --shell: 72rem;
  --narrow: 46rem;
  --gutter: max(var(--gap-wide), calc((100% - var(--shell)) / 2));
  --step: calc(var(--gap) * 0.5);
  --run: clamp(2.5rem, 5vw, 4rem);
  --hairline: color-mix(in srgb, var(--line) 70%, transparent);
  --sunken: color-mix(in srgb, var(--paper-soft) 60%, var(--paper));
  --raised: color-mix(in srgb, var(--paper) 92%, var(--ink));
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--paper));
  --accent-line: color-mix(in srgb, var(--accent) 32%, var(--paper));
  --accent-quiet: color-mix(in srgb, var(--accent) 8%, var(--paper));
  --band-ink-soft: color-mix(in srgb, var(--accent-ink) 82%, var(--accent));
  --star-on: var(--accent);
  --star-off: color-mix(in srgb, var(--ink) 20%, var(--paper));
  --star-size: 1.05rem;
  --star-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>");
  --night: color-mix(in srgb, var(--ink) 90%, var(--accent));
  --callbar: 0rem;
  --h1-size: clamp(2.25rem, 1.2rem + 4.5vw, 4rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 0 var(--callbar);
  background-color: var(--paper);
  background-image: var(--texture);
  color: var(--ink);
  font-family: var(--type);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--ink);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

h1,
h2,
h3 {
  font-family: var(--type-heading);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-case);
  letter-spacing: -0.021em;
  text-wrap: balance;
}

h1 {
  font-size: var(--h1-size);
  line-height: 1.05;
  margin: 0 0 var(--gap);
}

h2 {
  font-size: clamp(
    calc(1rem * pow(var(--scale), 2.4)),
    3vw,
    calc(1rem * pow(var(--scale), 3.9))
  );
  line-height: 1.14;
  margin: 0 0 var(--gap);
}

h3 {
  font-size: calc(1rem * pow(var(--scale), 0.8));
  line-height: 1.32;
  margin: 0 0 var(--step);
}

p {
  margin: 0 0 var(--gap);
  max-width: var(--measure);
}

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

.lede {
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42ch;
  text-wrap: pretty;
}

.eyebrow {
  margin: 0 0 var(--gap);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
}

/* Stars carry a rating the markup also states in words */

.stars {
  --rating: 5;
  display: inline-block;
  flex: none;
  inline-size: calc(var(--star-size) * 5);
  block-size: var(--star-size);
  vertical-align: -0.16em;
  background: linear-gradient(
    to right,
    var(--star-on) 0 calc(var(--rating) / 5 * 100%),
    var(--star-off) calc(var(--rating) / 5 * 100%) 100%
  );
  -webkit-mask: var(--star-mask) repeat-x;
  mask: var(--star-mask) repeat-x;
  -webkit-mask-size: var(--star-size) var(--star-size);
  mask-size: var(--star-size) var(--star-size);
}

.stars--lg {
  --star-size: 1.35rem;
}

/* Navigation */

nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: calc(var(--gap) * 0.7) var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

nav ul {
  display: flex;
  gap: calc(var(--gap) * 1.25);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

nav a {
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

nav a:hover,
nav a[aria-current="page"] {
  color: var(--ink);
}

nav .action {
  display: none;
}

/* The page list is a popover the phone opens from its menu button, and plain links on wider screens */

nav ul[popover] {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  overflow: visible;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
}

.menu {
  display: none;
  margin-left: auto;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

/* Services carries a list of the service pages. A wider screen opens it under the link on hover or
   keyboard focus, and the phone menu shows it indented under Services. An empty list shows nothing. */

.subnav {
  position: relative;
}

.subnav ul {
  display: none;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .subnav ul {
    position: absolute;
    top: 100%;
    left: calc(var(--gap) * -1);
    z-index: 21;
    min-width: 15rem;
    padding: calc(var(--gap) * 0.5) 0;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: var(--shadow);
  }

  .subnav:hover ul:not(:empty),
  .subnav:focus-within ul:not(:empty) {
    display: grid;
  }

  .subnav ul a {
    display: block;
    padding: calc(var(--gap) * 0.5) var(--gap);
  }
}

@media (max-width: 47.99rem) {
  .subnav ul:not(:empty) {
    display: grid;
    padding-left: var(--gap);
  }
}

.wordmark {
  font-family: var(--type-heading);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

/* Actions */

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.85rem 1.65rem;
  border: 1px solid var(--accent);
  border-radius: var(--button-radius);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-family: var(--type-heading);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow);
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.action:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.action--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}

.action--quiet:hover {
  background: var(--sunken);
  border-color: var(--ink-soft);
  color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: center;
  margin: var(--gap-wide) 0 0;
}

.reassure {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: var(--gap) 0 0;
}

/* The call bar sits in the thumb zone on a phone */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  align-items: center;
  gap: var(--gap);
  padding: calc(var(--gap) * 0.6) var(--gap);
  padding-bottom: calc(var(--gap) * 0.6 + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}

.callbar .action {
  flex: 1;
  min-height: 50px;
}

.callbar__note {
  flex: none;
  margin: 0;
  max-width: 11ch;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--ink-soft);
}

/* Section rhythm */

main > section {
  padding: var(--run) var(--gutter);
}

main > section > * {
  margin-inline: 0;
}

.section-head {
  max-width: var(--narrow);
  margin-inline: 0;
  margin-bottom: calc(var(--gap-wide) * 1.5);
}

.section-head p {
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center p {
  margin-inline: auto;
}

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--run) * 0.85);
  padding-bottom: calc(var(--run) * 0.85);
}

.hero__grid {
  display: grid;
  gap: var(--gap-wide);
  align-items: center;
}

.hero h1 {
  max-width: 17ch;
}

.hero__figure {
  margin: 0;
  border-radius: calc(var(--radius) * 2.5);
  overflow: hidden;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}

.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Proof sits against the button, where it changes a decision */

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--gap) * 0.5) var(--gap);
  margin: var(--gap-wide) 0 0;
  padding-top: var(--gap);
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.hero__proof strong {
  color: var(--ink);
  font-weight: 700;
}

.hero__proof .divider {
  width: 1px;
  height: 1.1rem;
  background: var(--line);
}

/* Trust strip */

.trust {
  display: grid;
  gap: var(--gap) calc(var(--gap-wide) * 1.25);
  margin: calc(var(--gap-wide) * 1.5) 0 0;
  padding: var(--gap-wide) 0 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.trust li {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 30ch;
}

.trust strong {
  display: block;
  font-family: var(--type-heading);
  font-size: 1.6rem;
  font-weight: 750;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* The review strip runs under the hero and stands still. A phone swipes it, with the next card
   showing at the edge, and a wider screen shows all three at once */

.strip {
  padding: var(--gap-wide) var(--gutter);
  background: var(--sunken);
  border-block: 1px solid var(--hairline);
}

.strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--gap) * 0.6);
  max-width: none;
  margin: 0 0 var(--gap-wide);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.strip__head strong {
  color: var(--ink);
  font-family: var(--type-heading);
  font-size: 1.25rem;
  font-weight: 750;
}

.strip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(21rem, 84%);
  gap: var(--gap);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--step);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
}

.strip__track:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.strip__card {
  scroll-snap-align: start;
  padding: calc(var(--gap) * 1.15) calc(var(--gap) * 1.35);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow);
}

.strip__card blockquote {
  margin: var(--step) 0 var(--gap);
  font-size: 0.9375rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.strip__card blockquote p {
  margin: 0;
  max-width: none;
}

.strip__card .attribution {
  font-size: 0.875rem;
}

/* Problem and the cost of waiting */

.problem {
  background: var(--sunken);
}

.problem__body {
  display: grid;
  gap: var(--gap-wide);
}

.pains {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pains li {
  position: relative;
  padding-left: calc(var(--gap) * 1.9);
  color: var(--ink-soft);
  max-width: 46ch;
}

.pains li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 2px;
  background: var(--accent);
}

/* How it works */

.steps {
  display: grid;
  gap: var(--gap-wide);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  padding-top: var(--gap);
  border-top: 2px solid var(--accent-line);
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--gap);
  border-radius: var(--button-radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--type-heading);
  font-size: 0.9375rem;
  font-weight: 700;
}

.steps p {
  color: var(--ink-soft);
  max-width: 40ch;
}

/* The pinned how: the photograph holds on desktop while the steps scroll past it */

[data-process="pinned"] .how {
  display: grid;
  gap: var(--gap-wide);
}

.how__media {
  margin: 0;
  border-radius: calc(var(--radius) * 2.5);
  overflow: hidden;
  background: var(--sunken);
}

.how__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

[data-process="pinned"] .how .steps {
  grid-template-columns: 1fr;
  gap: calc(var(--gap-wide) * 1.5);
}

/* One real job, before and after, under a slider a keyboard can move */

.compare {
  margin: 0;
}

.compare__frame {
  position: relative;
  display: grid;
  gap: var(--gap);
}

.compare__frame img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--radius) * 2);
}

.compare__range {
  display: none;
}

.compare[data-live] .compare__frame {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius) * 2);
}

.compare[data-live] .compare__frame img {
  border-radius: 0;
}

.compare[data-live] .compare__before {
  position: absolute;
  inset: 0;
  height: 100%;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.compare[data-live] .compare__frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--paper);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
  pointer-events: none;
}

.compare[data-live] .compare__range {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.compare[data-live]:has(.compare__range:focus-visible) .compare__frame {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.compare figcaption {
  margin-top: var(--gap);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* Card grids */

.cards {
  display: grid;
  gap: var(--gap-wide);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--step);
  padding: calc(var(--gap) * 1.5);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }
}

.card:focus-within {
  box-shadow: var(--shadow);
}

.card__media {
  display: none;
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--step);
}

.card p {
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: none;
}

.card a {
  margin-top: auto;
  padding-top: var(--gap);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--accent);
}

/* Proof */

.proof__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--gap) * 0.5) var(--gap);
  margin-top: var(--gap);
}

.aggregate {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.proof__rating a {
  font-weight: 600;
  color: var(--accent);
}

.quotes {
  display: grid;
  gap: calc(var(--gap-wide) * 1.25);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--step);
  padding-left: calc(var(--gap) * 1.25);
  border-left: 3px solid var(--accent);
}

.quote__lead {
  margin: 0;
  font-family: var(--type-heading);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.quote blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.quote blockquote p {
  max-width: none;
}

.attribution {
  display: block;
  margin: auto 0 0;
  max-width: none;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.attribution .who {
  display: block;
  font-weight: 650;
  color: var(--ink);
}

.attribution .hired {
  display: block;
  font-weight: 400;
}

.attribution .where,
.attribution .when {
  font-weight: 400;
}

.attribution .where + .when::before {
  content: ", ";
}

/* A full-bleed photograph carrying one statement or figure */

main > section.statement {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(22rem, 60vh, 36rem);
  padding-block: var(--run);
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: var(--paper);
}

.statement__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--night) 82%, transparent) 0%,
    color-mix(in srgb, var(--night) 35%, transparent) 45%,
    transparent 80%
  );
}

.statement__body p {
  max-width: 38ch;
  color: color-mix(in srgb, var(--paper) 86%, transparent);
  font-size: 1.125rem;
}

.statement__body .statement__figure {
  margin-bottom: var(--step);
  max-width: 18ch;
  font-family: var(--type-heading);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
  text-wrap: balance;
}

/* Any section can take the night surface, so the page moves between more than two backgrounds */

main > section.night {
  background: var(--night);
  color: var(--paper);
}

.night h2,
.night h3 {
  color: var(--paper);
}

.night p,
.night li {
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* Tables carry hours and pricing */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--gap);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
}

caption {
  text-align: left;
  padding-bottom: calc(var(--gap) * 0.75);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

th,
td {
  text-align: left;
  padding: calc(var(--gap) * 0.85) calc(var(--gap) * 1.15);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

thead th {
  background: var(--sunken);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ink-soft);
}

tbody th {
  font-weight: 650;
}

/* Where the business works */

.places {
  display: grid;
  gap: var(--step) var(--gap);
  margin: 0 0 var(--gap-wide);
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.places li {
  padding: calc(var(--gap) * 0.6) var(--gap);
  background: var(--accent-quiet);
  border: 1px solid var(--accent-line);
  border-radius: var(--button-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
}

/* Questions */

.answers {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  background: var(--paper);
}

.answers > div {
  padding: calc(var(--gap) * 1.25) calc(var(--gap) * 1.5);
  border-bottom: 1px solid var(--hairline);
}

.answers > div:last-child {
  border-bottom: 0;
}

.answers h3 {
  margin-bottom: calc(var(--step) * 0.75);
}

.answers p {
  margin: 0;
  color: var(--ink-soft);
  max-width: none;
}

/* Inner pages */

.intro {
  padding-top: calc(var(--run) * 0.8);
  padding-bottom: calc(var(--run) * 0.5);
}

.intro h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  max-width: 20ch;
}

.intro p {
  font-size: clamp(1.1rem, 1.7vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 52ch;
}

main > section.service {
  padding-top: calc(var(--run) * 0.6);
  padding-bottom: calc(var(--run) * 0.6);
  border-bottom: 1px solid var(--hairline);
}

.service h2 {
  max-width: 22ch;
}

.service > p,
.service ul {
  color: var(--ink-soft);
}

.service ul {
  max-width: var(--measure);
  padding-left: calc(var(--gap) * 1.1);
}

.service li {
  margin-bottom: calc(var(--step) * 0.6);
}

.service h3 {
  margin-top: var(--gap-wide);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--accent);
}

/* Closing band */

.band,
main > section.next {
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
}

.band h2,
.next h2 {
  color: var(--accent-ink);
}

.band p,
.next p {
  margin-inline: auto;
  max-width: 46ch;
  color: var(--band-ink-soft);
}

.band .actions,
.next .actions {
  justify-content: center;
}

.band .action,
.next .action {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.band .action:hover,
.next .action:hover {
  background: var(--paper-soft);
  border-color: var(--paper-soft);
  color: var(--ink);
}

/* Footer */

footer {
  padding: var(--run) var(--gutter) var(--gap-wide);
  background: var(--sunken);
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

footer > * {
  margin-inline: 0;
}

.footer-grid {
  display: grid;
  gap: var(--gap-wide);
  padding-bottom: var(--gap-wide);
  border-bottom: 1px solid var(--hairline);
}

.footer-grid h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: var(--gap);
}

.footer-grid ul {
  display: grid;
  gap: calc(var(--gap) * 0.5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-grid a {
  color: var(--ink-soft);
}

.footer-grid a:hover {
  color: var(--ink);
}

.nap {
  color: var(--ink);
  font-style: normal;
}

.nap strong {
  display: block;
  font-family: var(--type-heading);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--step);
}

.nap a {
  color: var(--ink);
  font-weight: 650;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) * 0.5) var(--gap-wide);
  margin: var(--gap-wide) auto 0;
  font-size: 0.875rem;
}

.consent-ask,
.tracking-disclosure {
  margin: var(--gap-wide) auto 0;
  padding: var(--gap);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.consent-ask button,
.tracking-disclosure button {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* Layout variants. design.md names one per homepage section, and the dashboard writes each onto
   the html element when the project is made */

[data-hero="full-bleed"] .hero {
  --star-on: var(--paper);
  --star-off: color-mix(in srgb, var(--paper) 35%, transparent);
  display: grid;
  align-content: end;
  min-height: clamp(30rem, 80vh, 46rem);
  color: var(--paper);
}

[data-hero="full-bleed"] .hero__grid {
  grid-template-columns: 1fr;
}

[data-hero="full-bleed"] .hero__figure {
  position: absolute;
  inset: 0;
  z-index: -2;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

[data-hero="full-bleed"] .hero__figure img {
  height: 100%;
  aspect-ratio: auto;
}

/* The scrim belongs to the photograph, so a signature drawn on the hero never replaces it. It
   darkens the whole frame evenly, because the words run the full width on a phone and the trust
   row runs the full width on a desktop */

[data-hero="full-bleed"] .hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--night) 78%, transparent);
}

[data-hero="full-bleed"] .hero :is(h1, .eyebrow, .hero__proof strong, .trust strong) {
  color: var(--paper);
}

[data-hero="full-bleed"] .hero :is(.lede, .reassure, .hero__proof, .trust li) {
  color: color-mix(in srgb, var(--paper) 86%, transparent);
}

[data-hero="full-bleed"] .hero .action--quiet {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
}

[data-hero="type-led"] .hero__figure {
  display: none;
}

[data-hero="type-led"] .hero__grid {
  grid-template-columns: 1fr;
}

[data-hero="type-led"] .hero h1 {
  max-width: 20ch;
  font-size: calc(var(--h1-size) * var(--scale));
}

[data-services="list"] .cards {
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: service;
}

[data-services="list"] .card {
  flex-direction: row;
  gap: var(--gap-wide);
  padding: var(--gap-wide) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  counter-increment: service;
}

[data-services="list"] .card::before {
  content: counter(service, decimal-leading-zero);
  min-width: 3ch;
  font-family: var(--type-heading);
  font-size: calc(1rem * pow(var(--scale), 2));
  font-weight: var(--heading-weight);
  line-height: 1;
  color: var(--accent);
}

[data-services="list"] .card:hover {
  transform: none;
}

[data-services="rows"] .cards {
  grid-template-columns: 1fr;
  gap: calc(var(--gap-wide) * 1.5);
}

[data-services="rows"] .card {
  display: grid;
  gap: var(--gap-wide);
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

[data-services="rows"] .card:hover {
  transform: none;
}

[data-services="rows"] .card__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow);
}

[data-proof="wall"] .quotes {
  display: block;
  columns: 17rem 3;
  column-gap: var(--gap-wide);
}

[data-proof="wall"] .quote {
  break-inside: avoid;
  margin-bottom: var(--gap-wide);
}

[data-proof="single"] .quotes {
  grid-template-columns: 1fr;
}

[data-proof="single"] .quote:not(:first-child) {
  display: none;
}

[data-proof="single"] .quote {
  max-width: 48rem;
  padding-left: 0;
  border-left: 0;
}

[data-proof="single"] .quote__lead {
  font-size: clamp(
    calc(1rem * pow(var(--scale), 3)),
    4vw,
    calc(1rem * pow(var(--scale), 4.5))
  );
}

[data-proof="single"] .quote blockquote {
  font-size: 1.1875rem;
}

.step__when {
  display: none;
}

[data-process="timeline"] .how__media,
[data-process="row"] .how__media {
  display: none;
}

[data-process="timeline"] .steps {
  grid-template-columns: 1fr;
  max-width: var(--narrow);
  padding-left: calc(var(--gap-wide) * 1.25);
  border-left: 2px solid var(--accent-line);
}

[data-process="timeline"] .steps li {
  position: relative;
  padding-top: 0;
  border-top: 0;
}

[data-process="timeline"] .steps li::before {
  position: absolute;
  top: 0;
  left: calc(var(--gap-wide) * -1.25 - 1rem - 1px);
  margin: 0;
}

[data-process="timeline"] .step__when {
  display: block;
  margin: 0 0 var(--step);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
}

[data-texture="pattern"] body {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--line) 35%, transparent) 0 1px,
    transparent 1px 14px
  );
}

[data-depth="offset"] .action:hover {
  transform: translate(-2px, -2px);
}

/* Pieces a build opts into, each chosen for what this business can show. The homepage skill says
   when each one fits. None of them moves */

/* A heading in two tones: a quiet lead-in line, then the statement */

.lead-in {
  display: block;
  color: var(--ink-soft);
}

:is(.night, .statement, .band, [data-hero="full-bleed"] .hero) .lead-in {
  color: color-mix(in srgb, currentColor 72%, transparent);
}

/* One display moment a page, set larger than the h1 */

.display {
  max-width: 16ch;
  margin-bottom: var(--gap-wide);
  font-size: calc(var(--h1-size) * 1.15);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Figures the business has earned, set large and standing still */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--gap-wide);
  margin: var(--gap-wide) 0 0;
  padding: 0;
  list-style: none;
}

.stats li {
  padding-top: var(--gap);
  border-top: 2px solid var(--accent);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.stats strong {
  display: block;
  margin-bottom: var(--step);
  font-family: var(--type-heading);
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  font-weight: var(--heading-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Credential marks the business holds, each named in words beside its logo */

.marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap) var(--gap-wide);
  margin: 0;
  padding: 0;
  list-style: none;
}

.marks li {
  display: flex;
  align-items: center;
  gap: var(--step);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.marks img {
  width: auto;
  height: 3rem;
  object-fit: contain;
}

/* The owner, photographed, saying one sentence in their own voice */

.portrait {
  display: grid;
  gap: var(--gap-wide);
  align-items: center;
}

.portrait__photo {
  margin: 0;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  background: var(--sunken);
}

.portrait__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.portrait blockquote {
  margin: 0;
  font-family: var(--type-heading);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: var(--heading-weight);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.portrait blockquote p {
  max-width: 24ch;
}

.portrait__who {
  margin-top: var(--gap);
  color: var(--ink-soft);
}

/* The business's own jobs in a grid, each caption on its photograph over a scrim */

.gallery {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery figure {
  position: relative;
  height: 100%;
  margin: 0;
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  background: var(--night);
}

.gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: calc(var(--gap) * 2.5) var(--gap) var(--gap);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--night) 88%, transparent) 45%,
    transparent
  );
  color: var(--paper);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* A row lifted across the bottom edge of the section above, which tells the reader the page goes
   on. It is the first thing in its section, so it rises into empty padding rather than over words,
   and it carries its own surface, such as cards */

.lifted {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--run) * -1.6);
}

/* Phones get the call bar and lose the nav button that duplicates it */

@media (max-width: 47.99rem) {
  html {
    scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }

  body {
    --callbar: 4.75rem;
    --gutter: var(--gap);
  }

  .callbar {
    display: flex;
  }

  nav ul {
    gap: var(--gap);
  }

  .menu {
    display: inline-flex;
    align-items: center;
  }

  nav ul[popover] {
    display: none;
  }

  nav ul[popover]:popover-open {
    display: grid;
    gap: 0;
    position: fixed;
    inset: 4.25rem var(--gap) auto var(--gap);
    margin: 0;
    padding: calc(var(--gap) * 0.5) 0;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: var(--shadow);
  }

  nav ul[popover] a {
    display: block;
    padding: calc(var(--gap) * 0.8) var(--gap);
    font-size: 1.0625rem;
    color: var(--ink);
  }
}

/* Wider screens */

@media (min-width: 48rem) {
  nav .action {
    display: inline-flex;
    min-height: 42px;
    margin-left: var(--gap);
    padding: 0.4rem 1.1rem;
    font-size: 0.9375rem;
  }

  .cards,
  .quotes {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }

  .strip__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .pains,
  .trust {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  [data-services="rows"] .card {
    grid-template-columns: 1fr 1fr;
  }

  .portrait {
    grid-template-columns: 0.8fr 1.2fr;
    gap: calc(var(--gap-wide) * 2);
  }

  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery li:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gallery li:first-child img {
    aspect-ratio: auto;
  }

  [data-services="rows"] .card:nth-child(even) .card__media {
    order: 2;
  }

  [data-process="row"] .steps {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .problem__body {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }

  [data-process="pinned"] .how {
    grid-template-columns: 0.95fr 1.05fr;
    gap: calc(var(--gap-wide) * 2);
    align-items: start;
  }

  [data-process="pinned"] .how__media {
    position: sticky;
    top: 6rem;
  }

  [data-process="pinned"] .how .steps li {
    min-height: 28vh;
  }

  .trust {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

/* Motion is an enhancement. Every element's resting state is its finished state, so a browser
   without scroll timelines, or a visitor asking for less motion, reads the same page standing still.
   Nothing runs on a timer, and the hero's headline and photograph never move */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  [data-motion="none"]::view-transition-group(*),
  [data-motion="none"]::view-transition-old(*),
  [data-motion="none"]::view-transition-new(*) {
    animation: none;
  }

  @supports (animation-timeline: view()) {
    html:not([data-motion="none"])
      :is(.cards > li, .quotes > li, .how .steps > li, .compare, .statement__body, .answers > div) {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

@keyframes reveal {
  from {
    opacity: 0.01;
    transform: translateY(1.5rem);
  }
}

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

  .action:hover,
  .card:hover {
    transform: none;
  }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--gap) var(--gap-wide);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 0 0 var(--radius) 0;
  z-index: 10;
}

.skip:focus {
  left: 0;
}

.lead {
  display: grid;
  gap: var(--step);
  max-width: var(--narrow);
  margin: var(--gap-wide) auto 0;
  text-align: left;
}

.lead label {
  font-weight: 600;
}

.lead input,
.lead textarea {
  width: 100%;
  padding: calc(var(--gap) * 0.7) var(--gap);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
}

.lead input:focus-visible,
.lead textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.lead button {
  justify-self: start;
  border: none;
  cursor: pointer;
}

.lead__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}