/* beyondedge.si. One stylesheet: tokens, base, layout, components, pages, then Lira.
   Braces { } mean one thing on this site: the work the AI takes on. Keep them for that. */

:root {
  --ink: #15102a;
  --plum: #533d89; /* BeyondEdge purple */
  --plum-deep: #2b1f4f;
  --lilac: #eeeaf6;
  --lilac-soft: #f7f5fb;
  --paper: #ffffff;
  --amber: #f2a93b; /* scarce: Lira's light and the AI's status dots */
  --muted: #5d5772;
  --line: #e2ddee;
  --field: #cfc8e0;
  --ok: #1f7a4d;
  --err: #a12a2a;
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 128px);
  --radius: 16px;
  --shadow: 0 18px 48px rgba(21, 16, 42, 0.16), 0 2px 6px rgba(21, 16, 42, 0.08);
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--plum);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--plum-deep);
}
:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
  border-radius: 6px;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  -webkit-tap-highlight-color: transparent;
}
.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;
}
.skip {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
}
.skip:focus {
  top: 12px;
}

/* ---------- layout ---------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.wrap.narrow {
  max-width: 820px;
}
.section {
  padding: var(--section) 0;
}
.band {
  background: var(--lilac-soft);
}
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 24px 64px;
  align-items: start;
}

/* ---------- type ---------- */
h1 {
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  font-stretch: 116%;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-stretch: 112%;
  letter-spacing: -0.025em;
}
h3,
.h3 {
  font-size: 1.3rem;
  font-stretch: 104%;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.h-sm {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
}
.label {
  margin-bottom: 18px;
  color: var(--plum);
  font-size: 0.9375rem;
  font-weight: 650;
  font-stretch: 92%;
  letter-spacing: 0.01em;
}
.lede {
  max-width: 38ch;
  font-size: clamp(1.125rem, 1.6vw, 1.35rem);
  line-height: 1.5;
}
.section-lede {
  max-width: 52ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.15rem;
}
.big-p {
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.55;
}
.fine {
  color: var(--muted);
  font-size: 0.875rem;
}
.mini {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: 0.02em;
}
.more {
  font-weight: 650;
  text-decoration: none;
}
.more::after {
  content: " →";
}
.more:hover {
  text-decoration: underline;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 2px solid var(--plum);
  border-radius: 999px;
  background: var(--plum);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.btn:hover {
  border-color: var(--plum-deep);
  background: var(--plum-deep);
  color: #fff;
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.btn-sm {
  min-height: 42px;
  padding: 8px 18px;
  font-size: 0.9375rem;
}
.btn-ghost {
  background: transparent;
  color: var(--plum);
}
.btn-ghost:hover {
  border-color: var(--plum);
  background: var(--lilac);
  color: var(--plum-deep);
}
.btn-light {
  border-color: #fff;
  background: #fff;
  color: var(--plum-deep);
}
.btn-light:hover {
  border-color: var(--lilac);
  background: var(--lilac);
  color: var(--plum-deep);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 30px;
}

/* "Ask Lira" buttons placed through the pages */
.ask {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 7px 16px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ask:hover {
  border-color: var(--plum);
  background: var(--lilac-soft);
}
.actions .ask {
  margin-top: 0;
}
.ask-quiet {
  border-color: transparent;
  background: transparent;
}

/* Lira's face: braces around a small amber light */
.lira-face {
  --s: 44px;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  font-size: calc(var(--s) * 0.5);
  font-weight: 300;
  font-stretch: 75%;
  line-height: 1;
}
.lira-face i {
  font-style: normal;
  transform: translateY(-0.07em);
  transition: transform 0.3s ease;
}
.lira-face b {
  width: calc(var(--s) * 0.17);
  height: calc(var(--s) * 0.17);
  margin: 0 calc(var(--s) * 0.06);
  border-radius: 50%;
  background: var(--amber);
}
.lira-face.sm {
  --s: 30px;
}

/* The AI's work, framed in braces */
.ai-task {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  column-gap: 7px;
  max-width: 100%;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.32;
}
.ai-task .b {
  color: var(--plum);
  font-size: 2.5em;
  font-weight: 200;
  font-stretch: 62%;
  line-height: 0.8;
}
.ai-task .tx {
  min-width: 0;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  transition: border-color 0.2s;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.logo:hover {
  color: var(--ink);
}
.logo .mark {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.logo .mark i {
  color: var(--plum);
  font-style: normal;
  font-weight: 300;
}
.logo .word {
  font-size: 1.05rem;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.01em;
}
.logo .word b {
  color: var(--plum);
  font-weight: 800;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-nav ul {
  display: flex;
  gap: 26px;
}
.site-nav a:not(.btn) {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 550;
  text-decoration: none;
}
.site-nav a:not(.btn):hover {
  border-bottom-color: var(--line);
}
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--plum);
}
.menu-btn {
  display: none;
}
.menu-icon {
  position: relative;
  width: 16px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

/* ---------- hero ---------- */
.hero {
  padding: 0 0 clamp(40px, 5vw, 64px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* The headline says what we do, so it is set as a statement, not a slogan: two lines on a laptop. */
.hero h1 {
  max-width: 20ch;
  font-size: clamp(2.125rem, 3.4vw, 3.25rem);
  font-weight: 750;
  font-stretch: 104%;
  line-height: 1.05;
  letter-spacing: -0.022em;
}
.hero .label {
  color: var(--muted);
}
.hero-copy .lede {
  max-width: 34ch;
  margin-top: 26px;
}
.hero-copy .actions {
  margin-top: 30px;
}
/* Recent work */
.work {
  margin: 22px 0 26px;
}
.work-list {
  display: grid;
  gap: 10px;
}
.work-list li {
  padding-left: 16px;
  border-left: 3px solid var(--plum);
}
.actions .cta-note {
  flex-basis: 100%;
  margin: 0;
}
/* The call, where it has earned its reason: after the three steps and their prices */
.own-cta .actions {
  margin-top: 0;
}
.own-cta .cta-note {
  margin: 12px 0 0;
}
/* Phones only: the approval moment shown inside the example-day card (see the 960px block) */
.day-wait {
  display: none;
}
.backed {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* The hero card: an example rollout, floating over the photo */
.hero-visual {
  position: relative;
  align-self: end;
  justify-self: end;
  margin: 0;
}
.today {
  position: relative;
  width: min(340px, 100%);
  padding: 16px 16px 14px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.today-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
}
.today-top b {
  font-size: 1rem;
  font-weight: 750;
  font-stretch: 106%;
}
.today-top span {
  color: var(--muted);
}
.today-done li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.today-done .tb {
  color: var(--plum);
  font-size: 1.35rem;
  font-weight: 200;
  font-stretch: 62%;
  line-height: 1;
}
.today-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--plum-deep);
  font-size: 0.6875rem;
  font-weight: 650;
}
.today-wait {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--lilac-soft);
  border: 1px solid var(--line);
}
.today-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
}
.today-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}
.today-item {
  margin: 0 0 10px;
  font-size: 0.875rem;
  font-weight: 600;
}
.today-actions {
  display: flex;
  gap: 8px;
  margin: 0;
}
.pill {
  padding: 5px 12px;
  border: 1px solid var(--field);
  border-radius: 999px;
  color: var(--plum-deep);
  font-size: 0.75rem;
  font-weight: 650;
}
.pill-go {
  border-color: var(--plum);
  background: var(--plum);
  color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .today {
    animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
  }
  .today-done li {
    animation: rise 0.45s ease-out both;
  }
  .today-done li:nth-child(1) {
    animation-delay: 0.6s;
  }
  .today-done li:nth-child(2) {
    animation-delay: 0.9s;
  }
  .today-done li:nth-child(3) {
    animation-delay: 1.2s;
  }
  .today-wait {
    animation: rise 0.45s ease-out 1.7s both;
  }
}

/* The example day: a working day, with the AI's jobs in braces */
.day {
  margin-top: clamp(40px, 4.5vw, 60px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
/* The lead-in above the example day. On phones the card's own title does this job, so it is hidden there. */
.day-intro {
  max-width: 62ch;
  margin: 0 0 22px;
}
.day-intro h2 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-stretch: 108%;
  letter-spacing: -0.02em;
}
.day-intro p {
  margin: 0;
  color: var(--muted);
}
.day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.day-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
}
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--lilac);
}
.tabs [role="tab"] {
  min-height: 38px;
  padding: 6px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--plum-deep);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.tabs [role="tab"][aria-selected="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(21, 16, 42, 0.14);
}
.legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 0.875rem;
}
.legend-b {
  color: var(--plum);
  font-size: 1.6rem;
  font-weight: 200;
  font-stretch: 62%;
  line-height: 1;
}
.ruler {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
}
.ruler::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--line);
  transform-origin: left center;
}
.slot {
  position: relative;
}
.slot::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid #c9c2dc;
  border-radius: 50%;
  background: var(--paper);
}
.slot.ai::before {
  border-color: var(--plum);
  background: var(--plum);
}
.slot time {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 650;
  font-stretch: 92%;
  font-variant-numeric: tabular-nums;
}
.slot .human {
  display: block;
  padding-top: 6px;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.35;
}
.slot .ai-task {
  font-size: 1.0625rem;
}
.slot .ai-task .b {
  font-size: 3em;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--plum-deep);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.3;
}
.status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}
.day-note {
  margin-top: 30px;
  color: var(--muted);
  font-size: 0.875rem;
}

@media (prefers-reduced-motion: no-preference) {
  .is-playing .ruler::before {
    animation: draw 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) both;
  }
  .is-playing .slot {
    animation: rise 0.5s ease-out both;
    animation-delay: calc(var(--i, 0) * 140ms + 150ms);
  }
  .is-playing .ai-task .b:first-child {
    animation: close-left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 140ms + 450ms);
  }
  .is-playing .ai-task .b:last-child {
    animation: close-right 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 140ms + 450ms);
  }
  .is-playing .status {
    animation: pop 0.35s ease-out both;
    animation-delay: calc(var(--i, 0) * 140ms + 950ms);
  }
  .slot:nth-child(2) { --i: 1; }
  .slot:nth-child(3) { --i: 2; }
  .slot:nth-child(4) { --i: 3; }
  .slot:nth-child(5) { --i: 4; }
}
@keyframes draw {
  from { transform: scaleX(0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes close-left {
  from { opacity: 0; transform: translateX(-14px); }
}
@keyframes close-right {
  from { opacity: 0; transform: translateX(14px); }
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.85); }
}

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

.builds {
  display: grid;
  gap: 16px;
  margin-bottom: 26px;
}
.builds .ai-task {
  font-size: 1rem;
}
.builds .ai-task .b {
  font-size: 2.3em;
}

.hero + .section {
  padding-top: clamp(48px, 6vw, 96px);
}
.cta-note {
  max-width: 44ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}
.worries h2 {
  max-width: 16ch;
}
.worry-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 40px 0 0;
}
.worry {
  padding-top: 20px;
  border-top: 2px solid var(--plum);
}
.worry dt {
  font-size: 1.3rem;
  font-weight: 750;
  font-stretch: 106%;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.worry dd {
  margin: 12px 0 0;
  color: var(--muted);
}
.own-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.own {
  max-width: 58ch;
  margin: 0;
  font-weight: 600;
}
.avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--lilac);
}
.own-box {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 16px 64px;
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--line);
}
.own-box .ticks {
  margin-bottom: 0;
}
.also {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.also li {
  padding: 14px 18px;
  border-left: 3px solid var(--plum);
  background: var(--lilac-soft);
}

.step-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 56px;
  padding-top: 38px;
}
.step-track::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--line);
}
.step {
  position: relative;
}
.step::before {
  content: "";
  position: absolute;
  top: -38px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--plum);
  box-shadow: 0 0 0 6px var(--paper);
}
.step-n {
  margin: 0 0 8px;
  color: var(--plum);
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 92%;
}
.step h3 {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-stretch: 110%;
}
.step-meta {
  margin: 10px 0 14px;
  font-weight: 650;
}
.step-text {
  color: var(--muted);
}


.quote {
  max-width: 1000px;
  margin: 0;
}
.quote blockquote {
  margin: 0;
}
.quote p {
  font-size: clamp(1.55rem, 3.1vw, 2.55rem);
  font-weight: 650;
  font-stretch: 106%;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  color: var(--muted);
}
.quote figcaption b {
  color: var(--ink);
}
.initials {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--lilac);
  color: var(--plum-deep);
  font-weight: 800;
  font-stretch: 110%;
}

.closing {
  padding: var(--section) 0;
  background: var(--plum-deep);
  color: #fff;
}
.closing h2 {
  max-width: 14ch;
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
}
.closing p {
  max-width: 46ch;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.15rem;
}

/* ---------- footer ---------- */
.site-footer {
  padding: 64px 0 32px;
  color: var(--muted);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-brand p {
  margin-top: 16px;
  max-width: 34ch;
}
.footer-top ul {
  display: grid;
  gap: 10px;
}
.footer-top nav a {
  color: var(--ink);
  text-decoration: none;
}
.footer-top nav a:hover {
  text-decoration: underline;
}
.footer-label {
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 700;
}
.footer-contact p {
  margin-bottom: 10px;
}
.footer-base {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

/* ---------- inner pages ---------- */
.page-hero {
  padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px);
}
.page-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.4rem, 5.6vw, 5rem);
}
.page-hero .lede {
  max-width: 48ch;
  margin-top: 26px;
  color: var(--muted);
}

.offers {
  padding-bottom: var(--section);
}
.offer {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 24px 64px;
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--line);
}
.offer h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
}
.offer-price {
  margin: 18px 0 4px;
  color: var(--plum);
  font-size: 1.35rem;
  font-weight: 750;
  font-stretch: 106%;
}
.offer-duration {
  color: var(--muted);
  font-weight: 600;
}
.offer-summary {
  margin-bottom: 28px;
  font-size: 1.25rem;
  line-height: 1.5;
}
.ticks {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.ticks li {
  position: relative;
  padding-left: 30px;
}
.ticks li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 2px;
  width: 14px;
  height: 8px;
  border-bottom: 2.5px solid var(--plum);
  border-left: 2.5px solid var(--plum);
  transform: rotate(-45deg);
}
.bigger {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 16px 64px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--lilac-soft);
}

.faq h2 {
  margin-bottom: 32px;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 1.15rem;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  color: var(--plum);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  max-width: 64ch;
  padding-bottom: 24px;
  color: var(--muted);
}

.builds.big .ai-task {
  font-size: 1.2rem;
}
.day.static {
  margin-top: 64px;
}

.settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.setting {
  position: relative;
  padding: 84px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.setting::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 28px;
  width: 76px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--lilac);
}
.setting::after {
  content: "";
  position: absolute;
  top: 33px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.setting-0::after {
  left: 77px;
  background: var(--plum);
}
.setting-1::after {
  left: 55px;
  background: var(--amber);
}
.setting-2::after {
  left: 33px;
  background: #b5aecb;
}
.setting p {
  margin-top: 10px;
  color: var(--muted);
}
.example {
  max-width: 64ch;
  margin-top: 28px;
  color: var(--muted);
}

.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 36px;
}
.values h3 {
  font-size: 1.45rem;
  font-stretch: 108%;
}
.values p {
  margin-top: 10px;
  color: var(--muted);
}
.people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.person {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.person .initials {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  font-size: 1.15rem;
}
.person .avatar {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 14px;
}
.person .role {
  margin: 4px 0 12px;
  color: var(--plum);
  font-size: 0.9375rem;
  font-weight: 650;
}
.person p:last-child {
  color: var(--muted);
  font-size: 0.9375rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 40px 64px;
  padding-bottom: var(--section);
}
.contact-form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.field {
  display: grid;
  gap: 8px;
}
.field label {
  font-size: 0.9375rem;
  font-weight: 650;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--field);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.field textarea {
  min-height: 132px;
  resize: vertical;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.form-status {
  margin: 0;
  font-weight: 600;
}
.form-status.ok {
  color: var(--ok);
}
.form-status.err {
  color: var(--err);
}
.contact-side .h3 {
  margin-bottom: 12px;
}
.side-lira {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--lilac-soft);
}
.side-lira p {
  margin: 0;
}
.side-lira .ask {
  margin-top: 4px;
}

.prose {
  padding-bottom: var(--section);
}
.prose h2 {
  margin: 40px 0 12px;
  font-size: 1.5rem;
  font-stretch: 106%;
}
.prose p {
  max-width: 68ch;
  color: var(--muted);
}
.link-list {
  display: grid;
  gap: 12px;
  font-size: 1.15rem;
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  /* Phones: picture first. The first screen is the label, the headline, the photo with the "Today" card
     on it, and the button. The paragraph follows, then the example day as its own card. The copy block
     becomes display: contents so its children and the figure can be ordered as one column. */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-copy {
    display: contents;
  }
  .hero-copy .label {
    order: 1;
  }
  .hero h1 {
    order: 2;
    max-width: none;
  }
  .hero-copy .actions {
    order: 3;
    margin-top: 22px;
  }
  .hero-copy .lede {
    order: 4;
    margin-top: 22px;
  }
  .hero-visual {
    order: 5;
    justify-self: stretch;
    margin-top: 26px;
  }
  .hero-copy .backed {
    order: 6;
    margin-top: 14px;
  }
  .hero-copy .btn {
    order: 1;
  }
  .hero-copy .cta-note {
    order: 2;
  }
  .hero-copy .ask {
    order: 3;
    margin-left: -7px;
  }
  .hero .today {
    width: 100%;
    padding: 12px 12px 10px;
    border-radius: 16px;
  }
  .hero .today-top {
    margin-bottom: 4px;
    padding-bottom: 6px;
    font-size: 0.75rem;
  }
  .hero .today-done li {
    padding: 4px 0;
    font-size: 0.8125rem;
  }
  .hero .today-wait {
    margin-top: 6px;
    padding: 9px 10px;
  }
  .hero .today-item {
    margin-bottom: 7px;
    font-size: 0.8125rem;
  }
  .hero .day-intro {
    margin: 0 0 14px;
  }
  .hero .day-intro h2 {
    font-size: 1.2rem;
  }
  .hero .day-intro p {
    font-size: 0.9375rem;
  }
  .hero .day {
    position: relative;
    z-index: 1;
    margin: 24px 0 0;
    padding: 16px 16px 14px;
    border-top: 0;
    border-radius: 22px;
    background: var(--paper);
    box-shadow: var(--shadow);
  }
  .hero .day-head {
    gap: 8px;
  }
  .hero .day-title {
    width: 100%;
    font-size: 1rem;
  }
  .hero .tabs {
    gap: 6px;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .hero .tabs [role="tab"] {
    min-height: 36px;
    padding: 6px 12px;
    background: var(--lilac);
    font-size: 0.875rem;
  }
  .hero .tabs [role="tab"][aria-selected="true"] {
    background: var(--paper);
    box-shadow: inset 0 0 0 1.5px var(--plum);
  }
  .hero .legend {
    font-size: 0.8125rem;
  }
  .hero .legend-b {
    font-size: 1.3rem;
  }
  .hero .ruler {
    gap: 12px;
    margin-top: 12px;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
  }
  .hero .ruler::before,
  .hero .slot::before {
    display: none;
  }
  .hero .slot {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
  }
  .hero .slot time {
    grid-row: span 2;
    margin: 2px 0 0;
    font-size: 0.75rem;
  }
  .hero .slot .human {
    padding-top: 0;
    font-size: 0.9375rem;
  }
  .hero .slot .ai-task {
    justify-self: start;
    font-size: 0.9375rem;
  }
  .hero .slot .ai-task .b {
    font-size: 1.7em;
  }
  .hero .status {
    grid-column: 2;
    justify-self: start;
    margin-top: 6px;
    padding: 2px 9px 2px 7px;
    font-size: 0.75rem;
  }
  .hero .day-wait {
    display: none;
  }
  .hero .day-note {
    margin-top: 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
  }
  /* The hero has its own "Ask Lira" link, so the floating button waits until the hero scrolls away */
  .lira.is-held:not(.is-open) .lira-launcher {
    visibility: hidden;
    opacity: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .lira.is-held:not(.is-open) .lira-launcher {
      transform: translateY(12px);
    }
    .lira-launcher {
      transition: transform 0.2s, opacity 0.2s, visibility 0.2s;
    }
  }
  .legend {
    margin-left: 0;
  }
  .ruler {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 28px;
    padding-top: 0;
    padding-left: 34px;
  }
  .ruler::before {
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
    height: auto;
    transform-origin: center top;
  }
  .slot::before {
    top: 2px;
    left: -34px;
  }
  .slot .ai-task .b {
    font-size: 2.4em;
  }
  @media (prefers-reduced-motion: no-preference) {
    .is-playing .ruler::before {
      animation-name: draw-down;
    }
  }
}
@keyframes draw-down {
  from { transform: scaleY(0); }
}
@media (max-width: 860px) {
  .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .site-nav {
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 16px 24px rgba(21, 16, 42, 0.08);
  }
  .menu-open .site-nav {
    display: flex;
  }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
  }
  .site-nav a:not(.btn) {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.125rem;
  }
  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--line);
    color: var(--plum);
  }
  .site-nav .btn {
    margin-top: 18px;
  }
  .two-col,
  .offer,
  .bigger,
  .own-box,
  .contact-grid,
  .worry-list,
  .settings,
  .values {
    grid-template-columns: 1fr;
  }
  .step-track {
    grid-template-columns: 1fr;
    padding-top: 0;
    padding-left: 38px;
  }
  .step-track::before {
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
    height: auto;
  }
  .step::before {
    top: 4px;
    left: -38px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  .lira-launcher {
    padding: 6px;
  }
  .lira-launch-label {
    display: none;
  }
  .people,
  .field-row {
    grid-template-columns: 1fr;
  }
  .actions .btn {
    width: 100%;
  }
  .logo .word {
    font-size: 1rem;
  }
}

/* ---------- Lira ---------- */
.lira {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--font);
}
.lira-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.2s;
}
.lira-launcher:hover {
  transform: translateY(-1px);
}
.lira-bubble {
  position: relative;
  width: min(340px, calc(100vw - 32px));
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 6px 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.lira-bubble-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.lira-bubble .lira-face {
  --s: 30px;
}
.lira-bubble-text {
  margin: 4px 26px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.lira-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.lira-x:hover {
  background: var(--lilac);
  color: var(--ink);
}
.lira-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.lira-bubble .lira-chips {
  padding-left: 40px;
}
.lira-chips:empty {
  display: none;
}
.lira-chip {
  padding: 7px 12px;
  border: 1px solid var(--field);
  border-radius: 999px;
  background: var(--paper);
  color: var(--plum-deep);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.lira-chip:hover {
  border-color: var(--plum);
  background: var(--lilac-soft);
}
.lira-panel {
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 104px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.lira-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  background: var(--plum-deep);
  color: #fff;
}
.lira-head .lira-face {
  --s: 40px;
}
.lira-name {
  font-size: 1.05rem;
  font-weight: 750;
  font-stretch: 108%;
  line-height: 1.2;
  letter-spacing: 0;
}
.lira-role {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
}
.lira-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.lira-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.lira-close:focus-visible,
.lira-head :focus-visible {
  outline-color: #fff;
}
.lira-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lira-msg {
  max-width: 92%;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.lira-msg p {
  margin: 0 0 0.6em;
}
.lira-msg p:last-child {
  margin: 0;
}
.lira-msg ul,
.lira-msg ol {
  margin: 0.2em 0 0.6em;
  padding-left: 1.2em;
  list-style: disc;
}
.lira-msg ol {
  list-style: decimal;
}
.lira-msg ul:last-child,
.lira-msg ol:last-child {
  margin-bottom: 0;
}
.lira-msg li {
  margin: 0.2em 0;
}
.from-lira {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-self: flex-start;
}
.from-lira .lira-face {
  --s: 28px;
}
.lira-text {
  padding-top: 3px;
}
.from-you {
  align-self: flex-end;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--plum);
  color: #fff;
  white-space: pre-wrap;
}
.lira-typing {
  display: inline-flex;
  gap: 4px;
  padding: 8px 0;
}
.lira-typing > span:not(.sr-only) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b5aecb;
}
.lira-panel-chips {
  margin: 0 0 10px;
  padding: 0 16px 0 54px;
}
.lira-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 12px 8px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--field);
  border-radius: 16px;
}
.lira-form:focus-within {
  border-color: var(--plum);
  box-shadow: 0 0 0 3px rgba(83, 61, 137, 0.16);
}
.lira-form textarea {
  flex: 1;
  min-height: 24px;
  max-height: 120px;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  resize: none;
}
.lira-form textarea:focus-visible {
  outline: none;
}
.lira-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--plum);
  color: #fff;
  cursor: pointer;
}
.lira-send:disabled {
  opacity: 0.45;
  cursor: default;
}
.lira-foot {
  margin: 0;
  padding: 0 16px 12px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}
.lira-card {
  display: grid;
  gap: 10px;
  margin-left: 38px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--lilac-soft);
  font-size: 0.9rem;
}
.lira-card-title {
  margin: 0;
  font-weight: 600;
}
.lira-lead {
  display: grid;
  gap: 10px;
}
.lira-lead label {
  display: grid;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 650;
}
.lira-lead label small {
  color: var(--muted);
  font-size: inherit;
  font-weight: 500;
}
.lira-lead input {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--field);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}
.lira-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--plum);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.lira-btn:hover {
  background: var(--plum-deep);
  color: #fff;
}
.lira-btn:disabled {
  opacity: 0.6;
}
.lira-card-status {
  margin: 0;
  font-size: 0.8125rem;
}
.lira-card-status:empty {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .lira-bubble:not([hidden]),
  .lira-panel:not([hidden]) {
    animation: lira-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .is-thinking .lira-face b {
    animation: lira-pulse 1s ease-in-out infinite;
  }
  .is-thinking .lira-head .lira-face i:first-child {
    transform: translate(-2px, -0.07em);
  }
  .is-thinking .lira-head .lira-face i:last-child {
    transform: translate(2px, -0.07em);
  }
  .lira-typing > span:not(.sr-only) {
    animation: lira-dot 1.2s ease-in-out infinite;
  }
  .lira-typing > span:nth-child(2) {
    animation-delay: 0.15s;
  }
  .lira-typing > span:nth-child(3) {
    animation-delay: 0.3s;
  }
}
@keyframes lira-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes lira-pulse {
  50% { opacity: 0.6; transform: scale(0.55); }
}
@keyframes lira-dot {
  40% { opacity: 1; transform: translateY(-3px); }
  0%, 80%, 100% { opacity: 0.5; }
}

@media (max-width: 560px) {
  .lira.is-open {
    inset: 0;
    gap: 0;
  }
  .lira.is-open .lira-panel {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .lira.is-open .lira-launcher {
    display: none;
  }
  html.lira-open,
  html.lira-open body {
    overflow: hidden;
  }
  .lira-launcher {
    padding-right: 16px;
  }
  /* On a phone the hello stays short: the chips wait inside the chat */
  .lira-bubble .lira-chips {
    display: none;
  }
  .lira-bubble-row {
    cursor: pointer;
  }
  /* 16px stops iOS zooming into the field */
  .lira-form textarea,
  .lira-lead input {
    font-size: 16px;
  }
}

@media print {
  .lira,
  .site-header,
  .closing {
    display: none;
  }
}


/* Narrow phones: the hero headline scales with the screen so it stays on four lines (3 Oct, after "optimize" was added). */
@media (max-width: 480px) {
  .hero h1 {
    font-size: min(2.125rem, 8.2vw);
  }
}

/* Home: the Group's record over a montage of the cities our people work from (Adrian, 3 Oct). Five slices,
   one per city, each labelled underneath. The text sits in the dark top half; the skylines show in the bottom half. */
.company {
  position: relative;
  overflow: hidden;
  background: var(--plum-deep);
  color: #fff;
}
.company-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}
.company-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.company-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 10, 28, 0.94) 0%,
    rgba(14, 10, 28, 0.8) 40%,
    rgba(14, 10, 28, 0.12) 68%,
    rgba(14, 10, 28, 0.2) 86%,
    rgba(14, 10, 28, 0.75) 100%
  );
}
.company-inner {
  position: relative;
  padding-top: clamp(80px, 9vw, 128px);
  padding-bottom: clamp(220px, 26vw, 380px);
}
.company h2 {
  max-width: 19ch;
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  line-height: 1;
}
.company .big-p {
  max-width: 44ch;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.86);
}
.cities {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0 0 26px;
  list-style: none;
}
.cities li {
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* Home: recent work, on its own with room to read */
.work-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 36px 0 22px;
  padding: 0;
  list-style: none;
}
.work-cards li {
  padding: clamp(26px, 3.2vw, 44px);
  border: 1px solid var(--line);
  border-top: 4px solid var(--plum);
  border-radius: var(--radius);
  background: var(--paper);
}
.work-cards h3 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: -0.015em;
}
.work-cards p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
}

/* Home: Daniel's note, with a large portrait */
.leader-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.leader-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.leader-quote {
  margin: 0;
}
.leader-quote blockquote {
  margin: 0;
}
.leader-quote blockquote p {
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.55rem);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.leader-quote figcaption {
  display: grid;
  gap: 4px;
  margin-top: 32px;
  color: var(--muted);
}
.leader-quote figcaption b {
  color: var(--ink);
  font-size: 1.125rem;
}

@media (max-width: 760px) {
  .company-inner {
    padding-bottom: 200px;
  }
  .cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 0 var(--gutter) 32px;
  }
  .cities li {
    padding: 0;
    text-align: left;
  }
  .work-cards,
  .leader-grid {
    grid-template-columns: 1fr;
  }
  .leader-photo {
    max-width: 380px;
  }
}

/* The hero stage (Adrian, 3 Oct, of the city band: "this hero is well done"). The photo fills the width and
   the words sit large and white on its darker left. On phones the tall photo shows above the words. */
.hero-stage {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(40px, 5vw, 64px);
  background: var(--plum-deep);
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: 0;
}
.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 45%;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 10, 28, 0.9) 0%, rgba(14, 10, 28, 0.74) 36%, rgba(14, 10, 28, 0.2) 66%, rgba(14, 10, 28, 0.04) 100%),
    linear-gradient(0deg, rgba(14, 10, 28, 0.5) 0%, rgba(14, 10, 28, 0) 32%);
}
.hero-stage .hero-grid {
  position: relative;
  min-height: min(84vh, 800px);
  padding-top: clamp(72px, 8vw, 120px);
  padding-bottom: clamp(48px, 5vw, 80px);
  align-items: end;
}
.hero-stage .label {
  color: #d9cff5;
}
.hero-stage h1 {
  color: #fff;
}
.hero-stage .lede {
  color: rgba(255, 255, 255, 0.88);
}
.hero-stage .backed {
  color: rgba(255, 255, 255, 0.72);
}
.hero-stage .backed a,
.hero-stage .ask {
  color: #fff;
}
.hero-stage .today {
  color: var(--ink); /* the card is white, so it keeps dark text inside the white stage text */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
@media (min-width: 961px) {
  .hero-stage .hero-visual {
    justify-self: start; /* between the words and the two people, so the card does not cover them */
  }
  .hero-stage h1 {
    max-width: 17ch;
    font-size: clamp(2.5rem, 4vw, 3.9rem);
  }
}
@media (max-width: 960px) {
  .hero-bg {
    bottom: auto;
    height: 62vh;
  }
  .hero-bg img {
    object-position: 50% 12%;
  }
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(14, 10, 28, 0.05) 0%, rgba(14, 10, 28, 0.18) 34%, rgba(14, 10, 28, 0.86) 62%, var(--plum-deep) 100%);
  }
  .hero-stage .hero-grid {
    min-height: 0;
    padding-top: 30vh;
    padding-bottom: 34px;
  }
}

/* How we work (3 Oct): a full-width photo hero for an inner page, in the home page's style */
.page-stage {
  position: relative;
  overflow: hidden;
  background: var(--plum-deep);
  color: #fff;
}
.page-stage-bg {
  position: absolute;
  inset: 0;
}
.page-stage-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
.page-stage-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 10, 28, 0.9) 0%, rgba(14, 10, 28, 0.72) 38%, rgba(14, 10, 28, 0.18) 70%, rgba(14, 10, 28, 0.05) 100%),
    linear-gradient(0deg, rgba(14, 10, 28, 0.45) 0%, rgba(14, 10, 28, 0) 30%);
}
.page-stage-inner {
  position: relative;
  padding-top: clamp(96px, 12vw, 176px);
  padding-bottom: clamp(96px, 11vw, 160px);
}
.page-stage .label {
  color: #d9cff5;
}
.page-stage h1 {
  max-width: 15ch;
  color: #fff;
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  line-height: 1.02;
}
.page-stage .lede {
  max-width: 44ch;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
}

/* Lines we do not cross: the reassurance, in a dark band with big type */
.lines-band {
  padding: var(--section) 0;
  background: var(--plum-deep);
  color: #fff;
}
.lines-big {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.lines-big li {
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: clamp(1.35rem, 2.5vw, 2.2rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.lines-big li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Your data stays yours: three promises, then your industry's rules */
.promise-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 36px 0 48px;
  padding: 0;
  list-style: none;
}
.promise-cards li {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-top: 4px solid var(--plum);
  border-radius: var(--radius);
  background: var(--paper);
}
.promise-cards h3 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}
.promise-cards p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.rule-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.rule-tiles li {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--lilac-soft);
}
.rule-tiles b {
  display: block;
  margin-bottom: 6px;
  color: var(--plum-deep);
}
.rule-tiles p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* How a project runs: a real sequence, so the steps are numbered */
.run-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.run-steps li {
  position: relative;
  padding-top: 58px;
  counter-increment: step;
}
.run-steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  font-weight: 750;
}
.run-steps li::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 52px;
  right: -12px;
  height: 2px;
  background: var(--field);
}
.run-steps li:last-child::after {
  display: none;
}
.run-steps h3 {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
}
.run-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
@media (max-width: 860px) {
  .promise-cards,
  .rule-tiles,
  .run-steps {
    grid-template-columns: 1fr;
  }
  .run-steps {
    gap: 28px;
  }
  .run-steps li {
    padding: 0 0 0 58px;
  }
  .run-steps li::after {
    top: 48px;
    bottom: -22px;
    left: 19px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .page-stage-bg img {
    object-position: 80% 50%;
  }
  .page-stage-bg::after {
    background: linear-gradient(180deg, rgba(14, 10, 28, 0.25) 0%, rgba(14, 10, 28, 0.7) 42%, rgba(14, 10, 28, 0.92) 100%);
  }
  .page-stage-inner {
    padding-top: 34vh;
    padding-bottom: 56px;
  }
}

/* Industries overview (3 Oct): five cards, each opening its industry's own page */
.ind-cards-sec {
  padding-top: 0;
}
.ind-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ind-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.ind-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.ind-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.ind-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}
.ind-card h2 {
  margin: 0;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}
.ind-card-line {
  color: var(--muted);
  line-height: 1.5;
}
.ind-card .more {
  margin-top: auto;
  color: var(--plum);
  font-weight: 650;
}
@media (prefers-reduced-motion: reduce) {
  .ind-card {
    transition: none;
  }
  .ind-card:hover {
    transform: none;
  }
}

/* Industry pages: the photo hero, the pain beside what we would build, the rules, an example day */
/* The industry headlines are longer (a number, then the help), so this hero is set tighter than How we work:
   the call button stays on the first screen of a 1280 x 720 laptop and a phone. */
.ind-stage h1 {
  max-width: 19ch;
  font-size: clamp(2.2rem, 3.5vw, 3.3rem);
}
.ind-stage .page-stage-inner {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
}
.ind-stage .lede {
  margin-top: 18px;
}
.page-stage .actions {
  margin-top: 30px;
}
.page-stage .ask {
  color: #fff;
}
.stage-who {
  max-width: 52ch;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9375rem;
}
.ind-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 72px;
  align-items: start;
}
.ind-split .big-p {
  margin-top: 18px;
}
.ind-split .builds {
  margin-top: 18px;
}
.ind-day .day.static {
  margin-top: 0;
}
.ind-others {
  padding: 0 0 var(--section);
}
.other-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.other-links a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.other-links a:hover {
  border-color: var(--plum);
}
/* Seven industries plus "Not on this list?": four across on a laptop, two on a tablet */
@media (min-width: 1100px) {
  .ind-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 861px) and (max-width: 1099px) {
  .ind-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ind-card-more {
  justify-content: center;
  border-style: dashed;
  border-color: var(--field);
  background: var(--lilac-soft);
}
@media (max-width: 860px) {
  .ind-cards,
  .ind-split {
    grid-template-columns: 1fr;
  }
  .ind-stage h1 {
    font-size: min(2.1rem, 7.6vw);
  }
  .ind-stage .page-stage-inner {
    padding-top: 22vh;
    padding-bottom: 40px;
  }
}

/* ---------- Industries menu (4 Oct): opens on hover, and from the small arrow for keyboards and touch ---------- */
/* Every top-level menu item is built the same way (a flex row), so the four links sit on one line. Industries
   used to be taller than the rest because only it was a flex row, which put its text about 4px lower. */
.site-nav > ul {
  align-items: center;
}
.site-nav > ul > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}
.sub-toggle {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.sub-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform 0.15s;
}
.has-sub.open .sub-toggle::after {
  transform: translate(-50%, -30%) rotate(225deg);
}
.sub-toggle:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 1px;
}
.subnav {
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 50;
  display: none;
  padding-top: 26px; /* a bridge under the link, so the pointer can move down into the menu without it closing */
}
.has-sub.open > .subnav,
html:not(.js) .has-sub:focus-within > .subnav {
  display: block;
}
@media (min-width: 861px) and (hover: hover) {
  .has-sub:hover > .subnav {
    display: block;
  }
  .has-sub:hover .sub-toggle::after {
    transform: translate(-50%, -30%) rotate(225deg);
  }
}
.subnav-card {
  width: 330px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}
.subnav-label {
  margin: 4px 12px 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-nav .subnav ul {
  display: grid;
  gap: 2px;
}
.site-nav .subnav a:not(.btn) {
  display: block;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  font-size: 0.97rem;
  font-weight: 550;
}
.site-nav .subnav a:not(.btn):hover,
.site-nav .subnav a:not(.btn):focus-visible {
  background: var(--lilac);
}
.site-nav .subnav a[aria-current="page"] {
  background: var(--lilac-soft);
  color: var(--plum-deep);
  font-weight: 750;
}
.site-nav .subnav .subnav-all:not(.btn) {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  color: var(--plum);
  font-weight: 700;
}
@media (max-width: 860px) {
  .site-nav > ul {
    align-items: stretch; /* the rows span the full width of the phone menu */
  }
  .site-nav > ul > li {
    flex-wrap: wrap;
    gap: 0;
  }
  .site-nav > ul > li > a:not(.btn) {
    flex: 1;
  }
  .sub-toggle {
    width: 48px;
    height: 48px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .sub-toggle::after {
    width: 8px;
    height: 8px;
  }
  .subnav {
    position: static;
    width: 100%;
    padding: 0;
  }
  .subnav-card {
    width: auto;
    padding: 4px 0 8px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .subnav-label {
    display: none;
  }
  .site-nav .subnav a:not(.btn) {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1.0625rem;
  }
  .site-nav .subnav .subnav-all:not(.btn) {
    margin-top: 0;
    padding-top: 12px;
    border-top: 0;
  }
}

/* ---------- Contact form: phone, and the searchable country and state boxes (4 Oct) ---------- */
.field[hidden],
.combo-list[hidden] {
  display: none;
}
.field label .opt {
  color: var(--muted);
  font-weight: 450;
}
.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
}
.combo {
  position: relative;
}
.combo-input {
  padding-right: 46px;
}
.combo-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  width: 46px;
  padding: 0;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.combo.has-options .combo-toggle {
  display: block;
}
.combo.has-options .combo-input {
  cursor: pointer;
}
.combo-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -70%) rotate(45deg);
}
.combo-input[aria-expanded="true"] ~ .combo-toggle::after {
  transform: translate(-50%, -30%) rotate(225deg);
}
.combo-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--field);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  list-style: none;
}
.combo-list li {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.combo-list li.is-active {
  background: var(--lilac);
}
.combo-list li[aria-selected="true"] {
  color: var(--plum-deep);
  font-weight: 700;
}
.combo-list li.rest-start {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  padding-top: 14px;
}
.combo-list .combo-empty {
  color: var(--muted);
  cursor: default;
}

/* On a laptop the Industries menu opens over Lira's chat window if it is open. On a phone the chat fills the screen and stays on top. */
@media (min-width: 861px) {
  .site-header {
    z-index: 65;
  }
}