/* Speed to Lead, direction A "Timetable" (Vignelli / Swiss).
   One family, hierarchy by size. Ink, ground, one accent. Radius 0, no shadow, no motion.
   Bar grammar: red bar = what the service does; black bar = its limits. */
:root {
  --ground: #ffffff;
  --ink: #000000;
  --red: #e2231a;      /* the one accent: 4.7:1 with white; bars, the line, hover */
  --grey: #6b6b6b;     /* secondary on white, 5.3:1 */
  --grey-on-ink: #a0a0a0; /* secondary on black, 8:1 */
  --rule: #d0d0d0;     /* hairlines only */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* 8 px baseline ladder */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s6: 3rem; --s8: 4rem; --s12: 6rem;
  /* content frame: 58rem of content, 16 px minimum gutter */
  --gutter: max(1rem, calc((100% - 58rem) / 2));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.625rem var(--sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  border-top: 0.5rem solid var(--red);
}

p, h1, h2, h3, ul, ol, dl, dd { margin: 0; }
b { font-weight: 700; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { color: var(--red); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Masthead: the business name set in type is the mark */
.masthead { padding: var(--s3) var(--gutter) 0; }
.mark {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.where { font-size: 0.8125rem; line-height: 1.25rem; color: var(--grey); }

/* Hero */
.hero { padding: var(--s6) var(--gutter) var(--s6); }
.product { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 500; margin-bottom: var(--s1); }
h1 {
  max-width: 11em;
  font-size: clamp(2.75rem, 1.6rem + 5vw, 4.5rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede {
  max-width: 34rem;
  margin-top: var(--s3);
  text-wrap: pretty;
}
.cta { margin-top: var(--s4); }
.send {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  min-height: 3.5rem;
  padding: var(--s2) var(--s3);
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  text-decoration: none;
}
.send:hover { background: var(--red); color: var(--ground); }
.send:focus-visible { outline-color: var(--ink); }
.arrow { font-size: 1.25rem; }

/* Proof: a full-width black panel, the sentence verbatim */
.proof {
  padding: var(--s6) var(--gutter);
  background: var(--ink);
  color: var(--ground);
}
.proof h2 {
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: var(--grey-on-ink);
}
.stat {
  max-width: 44rem;
  margin-top: var(--s2);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
  line-height: 1.3;
  text-wrap: pretty;
}
.hedge {
  max-width: 36rem;
  margin-top: var(--s3);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--grey-on-ink);
}

/* Section bars carry the headings in white type */
.bar {
  padding: 0.75rem var(--gutter);
  background: var(--red);
  color: var(--ground);
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 700;
}
.bar.limit { background: var(--ink); }

.body { padding: var(--s4) var(--gutter) var(--s8); }
.body > p, .lead { max-width: 36rem; text-wrap: pretty; }

/* The signature: How it works as a transit line, five stops */
.line {
  list-style: none;
  padding: var(--s4) var(--gutter) var(--s8);
}
.line li {
  position: relative;
  max-width: 34rem;
  padding: 0 0 var(--s4) 3rem;
  text-wrap: pretty;
}
.line li:last-child { padding-bottom: 0; }
.line li::before {           /* the stop */
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.375rem solid var(--red);
  border-radius: 50%;
  background: var(--ground);
}
.line li::after {            /* the track to the next stop */
  content: "";
  position: absolute;
  left: 0.5625rem;
  top: 0;
  bottom: 0;
  width: 0.375rem;
  background: var(--red);
}
.line li:first-child::after { top: 0.75rem; }
.line li:last-child::after { display: none; }

.word {
  display: inline-block;
  padding: 0 0.4em;
  background: var(--ink);
  color: var(--ground);
  font-size: 0.875em;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* Packages: oversized numeral, name, what the customer gets */
.packages { list-style: none; padding: 0; counter-reset: pkg; }
.packages li {
  counter-increment: pkg;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--s2);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}
.packages li:first-child { border-top: 0; padding-top: 0; }
.packages li::before {
  content: counter(pkg);
  grid-row: 1 / span 2;
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.packages h3 { font-size: 1.25rem; line-height: 1.5rem; font-weight: 700; padding-top: 0.25rem; }
.packages p { margin-top: var(--s1); max-width: 30rem; }
.note { margin-top: var(--s3); color: var(--grey); }

/* Who it is for: the trades as a destination board */
.trades {
  list-style: none;
  padding: 0;
  margin-top: var(--s3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s2);
  max-width: 36rem;
  font-weight: 700;
}
.trades li { padding: 0.75rem 0; border-top: 1px solid var(--ink); }

/* Plain rows with hairlines */
.rows { list-style: none; padding: 0; max-width: 36rem; }
.rows li { padding: 0.75rem 0; border-top: 1px solid var(--rule); }
.rows li:first-child { border-top: 1px solid var(--ink); }

/* Timeline: a timetable */
.table { max-width: 36rem; }
.table div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  column-gap: var(--s2);
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}
.table div:first-child { border-top: 1px solid var(--ink); }
.table dt { font-weight: 700; }

/* Never promise */
.never {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Contact */
.address {
  margin-top: var(--s2);
  font-size: clamp(1.375rem, 0.75rem + 3.2vw, 3rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* Footer */
.site-footer {
  padding: var(--s4) var(--gutter) var(--s6);
  border-top: 1px solid var(--ink);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--grey);
  overflow-wrap: anywhere;
}
.site-footer p + p { margin-top: var(--s2); }

/* Laptop and up */
@media (min-width: 48rem) {
  .hero { padding-top: var(--s12); padding-bottom: var(--s12); }
  .send { display: inline-flex; min-width: 22rem; }
  .proof { padding-top: var(--s8); padding-bottom: var(--s8); }
  .bar { font-size: 1.5rem; line-height: 2rem; padding-top: var(--s2); padding-bottom: var(--s2); }

  /* the line runs left to right across five columns */
  .line {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--s3);
    padding-top: var(--s6);
  }
  .line li { padding: 3rem 0 0; }
  .line li::after {
    left: 0;
    right: calc(-1 * var(--s3));
    top: 0.5625rem;
    bottom: auto;
    width: auto;
    height: 0.375rem;
  }
  .line li:first-child::after { top: 0.5625rem; left: 0.75rem; }
  .line li:last-child::after { display: none; }

  .packages li { grid-template-columns: 5rem 14rem 1fr; padding: var(--s4) 0; }
  .packages li::before { grid-row: 1; font-size: 4.5rem; line-height: 4rem; }
  .packages p { margin-top: 0; padding-top: 0.25rem; }
  .packages li:first-child { padding-top: 0; }

  .trades { grid-template-columns: repeat(3, 1fr); max-width: 44rem; }
  .never { font-size: 2rem; line-height: 2.5rem; max-width: 40rem; }
}

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

@media print {
  body { border-top: 0; }
  .bar, .bar.limit, .proof, .send, .word { background: none; color: #000; }
  .bar { border-top: 3px solid #000; }
  .proof h2, .hedge { color: #333; }
}