/* becomeanexpert.ai
   Values follow the Claude Design handoff (design/handoff/README.md), with two exceptions:
   - --accent, --accent-hover, --orange and --subtle are slightly darker, so small text meets WCAG AA (4.5:1).
   - Type sizes are smaller, matching the earlier Lovable site, so the whole hero fits on a laptop screen. */

/* Fonts: self-hosted latin subsets */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Local fallbacks sized to match, so text doesn't jump when the web fonts load */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.19%;
  ascent-override: 103.31%;
  descent-override: 29.07%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 99.98%;
  ascent-override: 102.02%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  --ink: #1b2a33;
  --ink-2: #3c4a54;
  --muted: #4d5b65;
  --subtle: #6a757f;
  --on-dark: #c9d1d6;
  --on-dark-strong: #dbe2e6;
  --on-dark-muted: #9aa7b0;
  --bg: #fafafa;
  --surface: #fff;
  --border: #eceef0;
  --rule: #dfe3e6;
  --accent: #176bf4;
  --accent-hover: #0a58d8;
  --teal: #1a7f6e;
  --teal-on-dark: #3fc2a8;
  --orange: #cb4e16;
  --error: #b42318;
  --line: rgba(27, 42, 51, .035);

  --font-sans: "Manrope", "Manrope Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;

  --container: 1320px;
  --gutter: clamp(20px, 5vw, 64px);

  color-scheme: light;
}

@view-transition {
  navigation: auto;
}

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

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

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 140px 140px;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ol, ul {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
}

h1, h2, h3 {
  overflow-wrap: break-word;
}

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

a:hover {
  color: var(--accent);
}

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

/* Focused by the skip link and after sending the form, not by tabbing */
main:focus,
.thanks:focus {
  outline: none;
}

input,
select,
textarea,
button {
  font-family: var(--font-sans);
}

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

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

/* Layout */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  scroll-margin-top: 80px;
}

.section--dark {
  background: var(--ink);
  color: #fff;
}

/* Type */
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}

.section--dark .label {
  color: var(--on-dark-muted);
}

.title {
  margin-top: 20px;
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.lead {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* Buttons and links */
.btn {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--accent-hover);
  color: #fff;
}

.btn--block {
  display: flex;
  width: 100%;
  gap: 16px;
  padding: 13px 22px 13px 24px;
}

.btn[aria-disabled="true"] {
  opacity: .7;
  cursor: progress;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(27, 42, 51, .06);
  background: rgba(250, 250, 250, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-block: 14px;
}

.wordmark {
  margin-right: auto;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--ink);
}

.wordmark span {
  color: var(--accent);
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  font-size: 15px;
  white-space: nowrap;
}

.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent);
}

.site-header .btn {
  gap: 12px;
  padding: 11px 20px;
  white-space: nowrap;
}

/* The handoff hides the nav below 1000px, but logo + nav + button only fit from about 1010px; 1080px leaves some room */
@media (max-width: 1079px) {
  .site-nav {
    display: none;
  }
}

/* Phones: keep the logo and button on one line */
@media (max-width: 599px) {
  .site-header__inner {
    gap: 12px;
  }

  .wordmark {
    font-size: clamp(17px, 5.4vw, 24px);
  }

  .site-header .btn {
    gap: 10px;
    padding: 10px 16px;
  }

  .btn__extra {
    display: none;
  }
}

@media (max-width: 339px) {
  .site-header .btn .icon {
    display: none;
  }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__hatch {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 38%;
  background: repeating-linear-gradient(135deg, transparent 0 22px, var(--line) 22px 23px);
  pointer-events: none;
}

/* Centred in most of the first screen, so the marquee shows near the bottom (72px is the header) */
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(92vh - 72px);
  min-height: calc(92svh - 72px);
  padding-block: clamp(48px, 5vw, 64px);
  padding-block: clamp(32px, 6svh, 64px);
}

/* Sized by width, but short screens (most laptops) scale it down by height so more of the hero fits */
.hero__title {
  margin: 24px 0 0 -.06em;
  font-size: clamp(48px, 8vw, 120px);
  font-size: clamp(48px, min(8vw, 13svh), 120px);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.035em;
}

.hero__title span {
  color: var(--accent);
}

.hero__sub {
  max-width: 28ch;
  margin-top: 28px;
  font-size: clamp(20px, 2.35vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.hero .lead {
  max-width: 62ch;
  margin-top: 20px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 32px;
}

.hero__note {
  margin-top: 16px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 500;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
  margin-top: 32px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stats li {
  padding: 16px 16px 16px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.stats li:nth-child(even) {
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}

.stats li:nth-child(n + 3) {
  border-top: 1px solid var(--rule);
}

@media (min-width: 800px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats li + li {
    padding-left: 16px;
    border-left: 1px solid var(--rule);
  }

  .stats li:nth-child(n + 3) {
    border-top: 0;
  }
}

.hero__disclaimer {
  max-width: 520px;
  margin-top: 24px;
  color: var(--subtle);
  font-size: 13px;
  line-height: 1.5;
}

/* Marquee */
.marquee {
  overflow: hidden;
  padding: 16px 0;
  background: var(--ink);
  color: var(--on-dark);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__item::after {
  content: "•";
  opacity: .6;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Tick lists */
.ticks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ticks li {
  display: flex;
  gap: 14px;
}

.ticks .icon {
  width: 1em;
  height: 1em;
  margin-top: .2em;
  color: var(--teal);
  stroke-width: 3;
}

.section--dark .ticks .icon {
  color: var(--teal-on-dark);
}

/* Cards */
.card {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
}

.card--lg {
  border-radius: 28px;
}

.card__title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.card__text {
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* 01 The gap */
.gap {
  padding-block: clamp(72px, 9vw, 128px) 0;
}

/* The label sits above both columns, so the text on the right starts level with the heading */
.gap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  margin-top: 20px;
}

.gap__grid .title {
  margin-top: 0;
}

/* Lines up the tops of the letters, which sit lower in the heading's taller line */
.gap__body {
  padding-top: 4px;
}

.gap__lead {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.5;
}

.gap__heading {
  margin: 28px 0 14px;
  font-size: 17px;
  font-weight: 600;
}

.gap .ticks {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
}

/* 02 Trainers */
.trainers {
  padding-block: clamp(96px, 12vw, 180px) 0;
}

.trainers .title {
  max-width: 820px;
}

.trainers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 24px;
  margin-top: 48px;
}

.trainer {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: clamp(24px, 2.6vw, 36px);
}

.trainer__photo {
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
}

.trainer__body {
  flex: 1 1 260px;
  min-width: 0;
}

.trainer__role {
  font-size: 12px;
}

.trainer__name {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.015em;
}

.trainer__bio {
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.trainer__bio + .trainer__bio {
  margin-top: 12px;
}

/* 03 Programme */
.programme {
  padding-block: clamp(96px, 12vw, 180px) 0;
}

.programme__sub {
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 18px);
}

.weeks {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}

.weeks li {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

.weeks__label {
  flex: 0 0 140px;
  padding-top: 4px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.weeks__title {
  flex: 1 1 280px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.weeks__text {
  flex: 1.6 1 340px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* 04 What makes it different */
.different {
  padding-block: clamp(96px, 12vw, 180px) clamp(96px, 10vw, 160px);
}

.different .title {
  max-width: 900px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin-top: 48px;
}

.feature {
  padding: 32px;
}

.feature__number {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 12px;
}

.feature .card__title {
  margin-top: 20px;
}

/* 05 What it returns */
.returns__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: center;
  gap: 48px;
  padding-block: clamp(80px, 10vw, 150px);
}

.returns .ticks {
  gap: 18px;
  color: var(--on-dark-strong);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.45;
}

.returns .ticks li {
  gap: 16px;
}

/* 06 What's included */
.included {
  padding-block: clamp(96px, 12vw, 160px) 0;
}

.included .title {
  max-width: 760px;
}

.inclusion {
  padding: 28px;
}

.inclusion .icon {
  width: 20px;
  height: 20px;
  color: var(--teal);
  stroke-width: 3;
}

.inclusion .card__title {
  margin-top: 16px;
  font-size: 18px;
  letter-spacing: 0;
}

.inclusion .card__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
}

.included__more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 20px;
  margin-top: 20px;
}

.panel {
  padding: clamp(28px, 2.6vw, 36px);
}

.panel__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.panel__text {
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.panel__text + .panel__text {
  margin-top: 12px;
}

.panel .ticks {
  gap: 12px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
}

.panel__note {
  margin-top: 18px;
  color: var(--subtle);
  font-size: 14px;
  line-height: 1.5;
}

/* Single column: the panels stack under the inclusion cards, so match their padding and type */
@media (max-width: 699px) {
  .panel {
    padding: 28px;
  }

  .panel__title {
    font-size: 18px;
    letter-spacing: 0;
  }

  .panel__text {
    margin-top: 8px;
    font-size: 15px;
  }

  .panel .ticks {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* 07 Pricing */
.pricing {
  padding-block: clamp(96px, 12vw, 160px) clamp(96px, 10vw, 140px);
}

.pricing__intro {
  max-width: 860px;
  margin-top: 20px;
  color: var(--ink-2);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
  text-wrap: pretty;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
  margin-top: 48px;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.6vw, 36px);
}

.plan--featured {
  border: 2px solid var(--accent);
}

.plan__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.plan__head h3 {
  font-size: inherit;
  font-weight: 400;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.plan__price {
  margin-top: 24px;
  font-size: clamp(40px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}

.plan__unit {
  margin-top: 6px;
  color: var(--subtle);
  font-size: 14px;
}

.plan__summary {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.5;
}

.plan__text {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.plan__note {
  margin-top: 16px;
  color: var(--subtle);
  font-size: 14px;
  font-style: italic;
}

.plan__spacer {
  flex: 1;
  min-height: 28px;
}

/* Cohort call to action */
.cohort {
  text-align: center;
}

.cohort__inner {
  max-width: 1100px;
  padding-block: clamp(64px, 7vw, 104px);
}

.cohort__title {
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.cohort__text {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--on-dark);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
  text-wrap: pretty;
}

.cohort .btn {
  margin-top: 32px;
  padding: 13px 26px;
}

.cohort__note {
  margin-top: 20px;
  color: var(--on-dark-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* 08 Questions */
.questions {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-block: clamp(96px, 12vw, 160px) 0;
}

.questions__intro {
  flex: 1 1 320px;
  max-width: 480px;
}

.faq {
  flex: 2 1 560px;
  min-width: 0;
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent);
}

.faq__icon {
  flex: none;
  font-size: 20px;
  font-weight: 400;
  transform: rotate(45deg);
  transition: transform .2s;
}

.faq details[open] .faq__icon {
  transform: rotate(0deg);
}

.faq__answer {
  margin-top: -8px;
  padding: 0 32px 20px 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* 09 Get in touch */
.enquire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: start;
  gap: 48px;
  padding-block: clamp(96px, 12vw, 160px);
}

.enquire__text {
  max-width: 560px;
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
}

.form-card {
  padding: clamp(24px, 3vw, 36px);
}

.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 24px 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.field--wide,
.form__checks,
.form__footer,
.form__error {
  grid-column: 1 / -1;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
}

.field select {
  height: 50px;
}

.field textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}

.field [aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  color: var(--error);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}

.field__error:empty {
  display: none;
}

.form__checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}

.form__promise {
  color: var(--subtle);
  font-size: 14px;
}

.form .btn {
  padding: 13px 26px;
}

.form__error {
  color: var(--error);
  font-size: 15px;
  line-height: 1.5;
}

.form__error:empty {
  display: none;
}

.form__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.thanks {
  display: none;
  padding: 40px 0;
}

.thanks__label {
  color: var(--teal);
}

.thanks__title {
  margin-top: 14px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.thanks__text {
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.thanks__reset {
  display: inline-block;
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.thanks__reset:hover {
  color: var(--accent);
}

/* Shown after a successful send: by site.js, or by the #enquiry-sent fragment when JavaScript is off */
.form-card.is-sent .thanks,
.thanks:target {
  display: block;
}

.form-card.is-sent .form,
.form-card:has(.thanks:target) .form {
  display: none;
}

/* Footer */
.site-footer {
  padding-block: 40px 56px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 28px;
  font-size: 16px;
}

.site-footer__links button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.site-footer__links button:hover {
  color: var(--accent);
}

.site-footer__contact {
  min-width: 240px;
}

.site-footer__heading {
  font-size: 16px;
  font-weight: 600;
}

.site-footer__email {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  text-decoration: none;
}

.site-footer__legal {
  margin-top: 28px;
  color: var(--subtle);
  font-size: 13px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Legal pages */
.legal {
  max-width: 880px;
  padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 112px);
}

.legal__updated {
  margin-top: 16px;
  color: var(--subtle);
  font-size: 15px;
}

.legal__body {
  margin-top: 48px;
  padding: clamp(24px, 3.5vw, 48px);
}

.legal__body h2 {
  margin-top: 40px;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -.015em;
}

.legal__body > :first-child {
  margin-top: 0;
}

.legal__body h3 {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 600;
}

.legal__body p,
.legal__body ul {
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.legal__body ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 1.2em;
  list-style: disc;
}

.legal__body strong {
  color: var(--ink);
  font-weight: 600;
}

.legal__body code {
  font-family: var(--font-mono);
  font-size: .9em;
}

/* Error page */
.not-found {
  padding-block: clamp(80px, 10vw, 144px);
}

.not-found .lead {
  max-width: 640px;
  margin-top: 20px;
}

.not-found .btn {
  margin-top: 32px;
}

/* Cookie consent: only rendered when an analytics ID is set in consent.js */
.consent-banner {
  position: fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  left: clamp(12px, 3vw, 24px);
  z-index: 50;
  padding: 22px 26px;
  border-radius: 24px;
  background: var(--ink);
  color: var(--on-dark-strong);
  font-size: 15px;
  line-height: 1.55;
}

.consent-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.consent-banner p {
  flex: 1 1 380px;
}

.consent-banner a {
  color: #fff;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consent-btn {
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.consent-btn--primary {
  background: var(--accent);
  color: #fff;
}

.consent-btn--primary:hover {
  background: var(--accent-hover);
}

.consent-btn--ghost {
  border-color: rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
}

.consent-btn--ghost:hover {
  border-color: rgba(255, 255, 255, .7);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee__track {
    animation: none;
  }

  .faq__icon {
    transition: none;
  }

  @view-transition {
    navigation: none;
  }
}