/* 313 Talent: site styles. Plain CSS, no build step. */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Brand colours (brand/README.md). Lime is only ever used on ink. */
:root {
  --ink: #0B0F14;
  --lime: #C8F031;
  --forest: #4D7C0F;
  --white: #FFFFFF;

  --ink-2: #141A21;          /* raised surface on ink */
  --tint: #F5F7F2;           /* light section background; forest on it is 4.6:1 */
  --text-2: #4A5560;         /* secondary text on light: 7.6:1 on white */
  --muted: #B3BAC2;          /* secondary text on ink: 9.8:1 */
  --line: #D9DED3;           /* rules on light */
  --line-strong: #C3CABB;
  --line-dark: rgba(255, 255, 255, 0.14);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 78rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --card-pad: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  --radius: 1rem;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.3, 1.55, 0.5, 1);   /* overshoots a little, then settles */
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  overflow-x: clip;   /* safety net: nothing decorative may cause sideways scrolling */
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

[hidden] { display: none !important; }

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;   /* a word too long for the line breaks rather than being cut off */
}

p, dl, dd { margin: 0; }
p, dd, li { text-wrap: pretty; }

a { color: inherit; }

.nowrap { white-space: nowrap; }

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

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

/* Focus: ink ring on light, lime ring on ink */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.site-header :focus-visible,
.hero :focus-visible,
.section-ink :focus-visible,
.panel-ink :focus-visible,
.site-footer :focus-visible,
.cta-bar :focus-visible,
.not-found :focus-visible {
  outline-color: var(--lime);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 10;
  padding: 0.75rem 1.1rem;
  border-radius: 0.5rem;
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.skip-link:focus-visible { outline-color: var(--white); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Viewfinder corners, after the logo's frame. They're drawn on a layer of their own
   (a pseudo-element), so they can move without touching the content.
   Colour, thickness and arm length are set per use. */
.vf {
  --vf-c: var(--forest);
  --vf-t: 3px;
  --vf-l: 1.75rem;
  position: relative;
}
.vf::before,
.hero-frame::after,
.door::after,
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c)),
    linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c)),
    linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c)),
    linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c));
  background-size:
    var(--vf-l) var(--vf-t), var(--vf-t) var(--vf-l),
    var(--vf-l) var(--vf-t), var(--vf-t) var(--vf-l),
    var(--vf-l) var(--vf-t), var(--vf-t) var(--vf-l),
    var(--vf-l) var(--vf-t), var(--vf-t) var(--vf-l);
  background-position:
    0 0, 0 0,
    100% 0, 100% 0,
    0 100%, 0 100%,
    100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Small label above headings, with one viewfinder corner */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  color: var(--forest);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
}
.hero .kicker,
.section-ink .kicker,
.not-found .kicker { color: var(--lime); }

/* Buttons */
.btn {
  --vf-c: var(--lime);
  --vf-t: 2px;
  --vf-l: 0.75rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--forest); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--white); color: var(--ink); }
.btn-sm { padding: 0.65rem 1.15rem; font-size: 0.9375rem; }
/* Second button beside a lime one, on ink only */
.btn-outline { border-color: rgba(255, 255, 255, 0.45); background: transparent; color: var(--white); }
.btn-outline:hover { border-color: var(--lime); background: transparent; color: var(--lime); }

/* Header. On wider screens it stays at the top while the page scrolls, so
   "Get in touch" is always in reach. Phones get the contact bar instead.
   On short screens, such as a zoomed-in window, it scrolls away to leave room for the page. */
.site-header { background: var(--ink); color: var(--white); }

@media (min-width: 56rem) and (min-height: 30rem) {
  html { scroll-padding-top: 6.5rem; }   /* anchor jumps and keyboard focus land below the header */
  .site-header { position: sticky; top: 0; z-index: 5; }
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 2.5rem;
  padding-block: 1rem;
}

.brand { display: block; border-radius: 0.25rem; }
.brand img { width: 11rem; }

.nav ul {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: inline-block;
  padding-block: 0.5rem;   /* a bigger target for fingers; the spacing around the nav allows for it */
  color: var(--white);
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 2px;
}
.nav a:hover { color: var(--lime); text-decoration-line: underline; }

@media (max-width: 55.99rem) {
  .header-inner {
    grid-template-columns: 1fr auto;
    row-gap: 1.1rem;
    padding-block: 1.25rem 0.5rem;   /* the nav links' own padding adds the rest, above and below */
  }
  .brand img { width: 10rem; }
  .nav { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line-dark); padding-top: 0.4rem; }
  .nav ul { justify-content: flex-start; flex-wrap: wrap; gap: 0 1.4rem; }
}

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(4.5rem, 3rem + 6vw, 8.5rem);
}
.hero > .wrap { position: relative; z-index: 1; }

/* A faint focusing grid, fading out towards the edges */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 40%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 75% at 50% 40%, #000 15%, transparent 75%);
}


.hero-frame {
  --vf-c: var(--lime);
  --vf-t: 4px;
  --vf-l: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
  --vf-x: clamp(0.5rem, 2vw, 2.5rem);
  width: fit-content;
  max-width: calc(100% + 2 * var(--vf-x));
  margin-inline: calc(-1 * var(--vf-x));
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 3rem) var(--vf-x);
}
.hero-frame::after {
  --vf-c: rgba(255, 255, 255, 0.85);
  --vf-t: 3px;
  opacity: 0;
}

h1 {
  font-size: clamp(2.5rem, 1.1rem + 5.4vw, 5.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
h1 .h1-line { display: block; }
h1 .hl { display: block; color: var(--lime); }

.hero-foot {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

.lead {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.55;
}

@media (min-width: 80rem) {
  .hero-foot {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: end;
    gap: 4rem;
  }
}

/* Audience cards, used in the hero and the contact section */
.doors {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.door {
  --vf-c: var(--lime);
  --vf-t: 2px;
  --vf-l: 1rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  column-gap: 1.25rem;
  row-gap: 0.6rem;
  height: 100%;
  padding: 1.5rem 1.6rem 1.6rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: var(--white);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.door:hover { border-color: rgba(255, 255, 255, 0.28); background: #19212A; }

.door-label {
  color: var(--lime);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.door-text {
  grid-column: 1;
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.door-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  color: var(--lime);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.2s ease;
}
.door:hover .door-arrow { transform: translateX(0.25rem); }

/* Sections */
.section { padding-block: var(--section); }
.section-tint { background: var(--tint); }
.section-ink { background: var(--ink); color: var(--white); }

.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.section-head .kicker { margin-bottom: 0; }

@media (min-width: 72rem) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 5rem;
    row-gap: 1.25rem;
    align-items: end;
  }
  .section-head .kicker { grid-column: 1 / -1; }
}

h2 {
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h3 { font-size: 1.25rem; letter-spacing: -0.015em; }

.intro {
  max-width: 36rem;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 500;
}
.section-ink .intro { color: var(--muted); }

.intro a,
.faq a {
  text-decoration-color: var(--forest);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.intro a:hover { color: var(--forest); }

/* The email address is one long word, so let it break rather than spill out
   on a narrow screen or with wider text spacing */
.intro a,
.addr,
.contact-address a,
.not-found .actions a:not(.btn) { overflow-wrap: anywhere; }

/* Creators: the three terms */
.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 clamp(3.5rem, 2rem + 5vw, 6rem);
  padding: 0;
  border-block: 1px solid var(--line);
  list-style: none;
}
.figures li {
  padding: clamp(1.75rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 3vw, 2.75rem);
  border-left: 1px solid var(--line);
}
.figures li:first-child { padding-left: 0; border-left: 0; }

.figure {
  display: block;
  font-size: clamp(3rem, 1.5rem + 4.5vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-variant-numeric: lining-nums;
}
.count { display: inline-block; }   /* motion.js fixes its width while it counts */
.figure-text {
  display: block;
  max-width: 21rem;
  margin-top: 1rem;
  color: var(--text-2);
}

@media (max-width: 47.99rem) {
  .figures { grid-template-columns: 1fr; }
  .figures li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
    padding: 1.5rem 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .figures li:first-child { border-top: 0; }
  .figure { font-size: 2.5rem; }
  .figure-text { margin-top: 0; }
}

.split {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  /* Drop the list by the card's padding, so the two headings and their first rules line up */
  .terms { padding-top: var(--card-pad); }
}

.spec {
  container-type: inline-size;
  padding: var(--card-pad);
  background-color: var(--tint);
}
.spec h3 { margin-bottom: 1.25rem; }
.spec dl > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 3fr);
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line-strong);
}
.spec dt { color: var(--text-2); font-weight: 500; }
.spec dd { font-weight: 700; }

@container (max-width: 24rem) {
  .spec dl > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .spec dt { font-size: 0.9375rem; }
}

.terms h3 { margin-bottom: 1.25rem; }

.ticks {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding: 1rem 0 1rem 2rem;
  border-top: 1px solid var(--line);
  color: var(--text-2);
}
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 2px solid var(--forest);
  border-left: 2px solid var(--forest);
}
.ticks strong { color: var(--ink); font-weight: 700; }

/* Panels */
.panel {
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.panel h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.panel p { margin-top: 0.75rem; color: var(--text-2); }

.panel-ink {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}
.panel-ink p { color: var(--muted); }

.promise {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.promise h3 { max-width: 34ch; }
.panel-action { display: grid; justify-items: start; gap: 0.75rem; }
.panel .hint { margin-top: 0; font-size: 0.9375rem; }
/* The email address beside a button: one click selects all of it, for copying */
.addr { color: var(--white); font-weight: 600; -webkit-user-select: all; user-select: all; }

@media (min-width: 60rem) {
  .promise {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: center;
    gap: 3rem;
  }
  .promise .panel-action { justify-items: center; text-align: center; }
}

/* Brands */
.points {
  display: grid;
  gap: 0 clamp(2rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .points { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.points li {
  padding: 1.5rem 0 2.25rem;
  border-top: 2px solid var(--ink);
}
.points h3 { margin-bottom: 0.65rem; }
.points p { color: var(--text-2); }

.brand-foot {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
@media (min-width: 60rem) {
  .brand-foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Plain text, so nothing here looks like a button */
.exclusion-list {
  display: grid;
  gap: 0.4rem 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 30rem) and (max-width: 59.99rem) {
  .exclusion-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.exclusion-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}
.exclusion-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 2px;
  background: var(--line-strong);
}

.brand-cta { display: grid; align-content: start; }
.brand-cta .panel-action { margin-top: 1.75rem; }

/* How a deal works */
.steps {
  display: grid;
  gap: 0 clamp(1.5rem, 2.5vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.steps li {
  position: relative;
  padding: 1.75rem 0 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  counter-increment: step;
}
.steps li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--lime);
  transform-origin: left center;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  content: counter(step, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 1.25rem;
  color: var(--lime);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.steps h3 { margin-bottom: 0.6rem; }
.steps p { color: var(--muted); }

/* The ask under the five steps */
.how-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--ink-2);
}
.how-cta-title {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.how-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 39.99rem) {
  .steps li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    padding: 1.5rem 0 1.75rem;
  }
  .steps li::before {
    grid-row: 1 / span 2;
    margin: 0;
    font-size: 1.75rem;
  }
  .steps h3, .steps p { grid-column: 2; }
}

/* FAQ */
.faq-group + .faq-group { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.faq-group h3 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.faq {
  display: grid;
  column-gap: clamp(2rem, 3vw, 3rem);
}
@media (min-width: 40rem) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .faq { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.faq > div {
  padding-block: 1.4rem 2rem;
  border-top: 1px solid var(--line-strong);
}
.faq dt {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.faq dd {
  max-width: 40rem;
  margin-top: 0.5rem;
  color: var(--text-2);
}

/* Contact: two big buttons, the address, then what happens next */
.contact-actions {
  display: grid;
  gap: 1.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact-actions li { display: grid; gap: 0.75rem; }
.contact-actions .btn { padding-block: 1.15rem; font-size: 1.0625rem; }

.contact-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.75rem;
  color: var(--muted);
}
.contact-address a {
  color: var(--white);
  font-weight: 700;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.contact-address a:hover { color: var(--lime); }
.copy {
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.45);   /* 3:1 or more, so it reads as a button */
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.copy:hover { border-color: var(--lime); color: var(--lime); }
.copy:focus-visible { outline-color: var(--lime); }
.copy-status { color: var(--lime); font-size: 0.875rem; font-weight: 600; }

.next { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.next h3 { margin-bottom: 1.25rem; }
.next-steps {
  display: grid;
  gap: 0 clamp(1.5rem, 2.5vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: next;
}
@media (min-width: 56rem) {
  .next-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.next-steps li {
  position: relative;
  padding: 1.1rem 0 1.4rem 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--muted);
  counter-increment: next;
}
.next-steps li::before {
  content: counter(next);
  content: counter(next) / "";
  position: absolute;
  left: 0;
  top: 1rem;
  color: var(--lime);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
}
.next-steps strong { display: block; margin-bottom: 0.25rem; color: var(--white); font-weight: 700; }

/* Phones and tablets: contact buttons fixed to the bottom of the screen.
   motion.js hides the bar while the hero or the contact section is on screen,
   and adds .is-ready once it has, so the bar doesn't slide away on page load.
   Not on short screens (a phone turned sideways, a zoomed-in window), where it would cover too much. */
.cta-bar { display: none; }
@media (max-width: 55.99rem) and (min-height: 30rem) {
  /* Keyboard focus: the browser scrolls a focused link or button clear of the bar */
  html { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .cta-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line-dark);
    background: var(--ink);
  }
  .cta-bar .btn { padding: 0.7rem 0.6rem; font-size: 0.875rem; }
  @media (max-width: 24rem) {   /* narrow phones: keep each label on one line */
    .cta-bar { gap: 0.4rem; padding-inline: 0.75rem; }
    .cta-bar .btn { padding-inline: 0.4rem; font-size: 0.8125rem; letter-spacing: -0.01em; }
  }
  .cta-bar.is-hidden { visibility: hidden; transform: translateY(100%); }
  .cta-bar.is-ready { transition: transform 0.3s var(--ease-out), visibility 0s linear; }
  .cta-bar.is-ready.is-hidden { transition: transform 0.3s var(--ease-out), visibility 0s linear 0.3s; }
  /* Room under the footer, so the bar never covers it */
  .cta-bar ~ .site-footer { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: var(--muted);
  font-size: 0.9375rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line-dark);
}
.footer-logo { width: 10rem; }
.footer-text { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; margin-right: auto; }
.to-top {
  color: var(--white);
  font-weight: 500;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.to-top:hover { color: var(--lime); }

/* 404 page */
.page-404 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--ink);
}
.page-404 .not-found { flex: 1; }
.not-found {
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 6vw, 7rem);
  background: var(--ink);
  color: var(--white);
}
.not-found .hero-frame { max-width: 52rem; }
.not-found .lead { margin-top: 2rem; }
.not-found .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.5rem;
}
.not-found .actions a:not(.btn) {
  color: var(--white);
  text-decoration-color: var(--lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* Hover and focus: viewfinder corners snap around cards and buttons (lime, so only on ink) */
.door::after { top: -0.55rem; right: -0.55rem; bottom: -0.55rem; left: -0.55rem; }
.btn::after { top: -0.5rem; right: -0.5rem; bottom: -0.5rem; left: -0.5rem; }
.door::after,
.btn::after {
  opacity: 0;
  transform: scale(1.03);   /* small enough to stay inside the page gutters */
}
.door:hover::after,
.door:focus-visible::after,
.btn:hover::after,
.btn:focus-visible::after {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Motion. Everything below runs only when the visitor hasn't asked for
   reduced motion. The page's final state is its normal state, so if any of
   this doesn't run, everything is simply shown.
   - Hero: pure CSS. Runs once on load and is finished within 3 seconds.
   - Scroll reveals and counters: motion.js adds .reveal-wait to elements
     that start below the screen, then .is-in as each scrolls into view.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: the grid scans in, the headline rises line by line, and the
     viewfinder hunts (white), then locks onto it (lime). Done in about 2 seconds. */
  .hero::before { animation: scan-in 1.6s cubic-bezier(0.45, 0, 0.2, 1) 0.05s both; }
  .hero .kicker { animation: rise 0.7s var(--ease-out) 0.1s both; }
  /* "backwards", not "both": once it has run, the line keeps no clip-path that could cut text off */
  .h1-line { animation: line-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards; }
  .h1-line.hl { animation-delay: 0.42s; }
  .hero-frame::after { animation: af-hunt 1.2s cubic-bezier(0.3, 0.7, 0.3, 1) 0.2s both; }
  .hero-frame::before { animation: af-lock 1.2s cubic-bezier(0.3, 0.7, 0.3, 1) 0.2s both; }
  .hero .lead { animation: rise 0.9s var(--ease-out) 1.1s both; }
  .hero .doors > li { animation: rise 0.9s var(--ease-out) 1.2s both; }
  .hero .doors > li + li { animation-delay: 1.32s; }

  /* Scroll reveals */
  .reveal-wait {
    opacity: 0;
    transform: translateY(1.75rem);
  }
  .reveal-wait.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.8s var(--ease-out) var(--reveal-delay, 0ms),
      transform 1s var(--ease-out) var(--reveal-delay, 0ms);
  }

  /* The "Who we work with" card: its corners snap in after it arrives */
  .vf.reveal-wait::before {
    opacity: 0;
    transform: scale(1.08);
  }
  .vf.reveal-wait.is-in::before {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.3s ease calc(var(--reveal-delay, 0ms) + 350ms),
      transform 0.7s var(--ease-snap) calc(var(--reveal-delay, 0ms) + 350ms);
  }

  /* How a deal works: a progress line draws through the five steps in turn */
  .steps li.reveal-wait {
    opacity: 1;
    transform: none;
  }
  .steps li.reveal-wait::after { transform: scaleX(0); }
  .steps li.reveal-wait::before,
  .steps li.reveal-wait > * {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  .steps li.reveal-wait.is-in::after {
    transform: none;
    transition: transform 0.42s linear var(--reveal-delay, 0ms);
  }
  .steps li.reveal-wait.is-in::before,
  .steps li.reveal-wait.is-in > * {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.6s ease var(--reveal-delay, 0ms),
      transform 0.7s var(--ease-out) var(--reveal-delay, 0ms);
  }

  /* Hover and focus corners snap in */
  .door::after,
  .btn::after {
    transition: opacity 0.2s ease, transform 0.4s var(--ease-snap);
  }

  /* Anything that gets keyboard focus while it's still arriving jumps to its
     final state, so the focus ring is never faint. */
  .hero .doors > li:focus-within { animation: none; }
  .reveal-wait:focus-within {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1rem); }
}
@keyframes line-up {
  from { transform: translateY(105%); clip-path: inset(0 -0.3em 100% -0.3em); }
  to { transform: translateY(0); clip-path: inset(-0.2em -0.3em -0.35em -0.3em); }
}
@keyframes scan-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  30% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
/* The two corner layers share one path; only their opacity differs. */
@keyframes af-hunt {
  0% { opacity: 0; transform: scale(1.3); }
  12% { opacity: 1; }
  45% { transform: scale(0.96); }
  62% { transform: scale(1.03); }
  78% { opacity: 1; transform: scale(0.995); }
  88% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes af-lock {
  0% { opacity: 0; transform: scale(1.3); }
  45% { transform: scale(0.96); }
  62% { transform: scale(1.03); }
  78% { opacity: 0; transform: scale(0.995); }
  86% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* Reduced motion: nothing moves; everything is in its final state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .cta-bar { display: none !important; }
  .reveal-wait,
  .reveal-wait::before,
  .reveal-wait::after,
  .reveal-wait > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .vf::before,
  .hero-frame::after,
  .door::after,
  .btn::after { display: none; }
  .door, .panel { border: 1px solid CanvasText; }
  /* The logo is white and lime, drawn for a dark background, so keep one behind it */
  .brand img, .footer-logo { forced-color-adjust: none; background: var(--ink); }
}