/* PARKJA website styles. Plain CSS, no build step.
   Tokens come from the Figma file "PARKJA Website" (Colors / Fonts / Number). */

/* ── Font ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/SchibstedGrotesk.woff2") format("woff2");
}
/* Metric-matched fallback so text does not jump when the web font arrives. */
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --ink: #151515;
  --paper: #ffffff;
  --paper-2: #f4f4f3;
  --subtle: #ebebea;

  --t1: #151515;
  --t2: #4f4e4a;
  --t3: #6b6a66;
  --ti: #f4f4f3;
  --tim: #c4c4c1;

  /* Brand blue. --brand on surfaces with white text, --brand-ink as text on light, --brand-light as text and icons on ink */
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-ink: #1d4ed8;
  --brand-light: #3b82f6;
  --brand-subtle: #eff6ff;

  --bd: #dcdcda;
  --bd-strong: #151515;
  --bd-inv: #383734;
  --ink-hover: #1c1c1b;

  --font: "Schibsted Grotesk", "Schibsted Fallback", Arial, sans-serif;

  /* 80px at 1440, 20px at 375 */
  --pad: clamp(20px, 5.5556vw, 80px);
  /* Side padding of full-bleed rows: same as --pad, but centres content past 1440px */
  --gutter: max(var(--pad), calc(50% - 640px));
  /* Vertical rhythm: 160px sections on desktop, 80px on phones */
  --sec: clamp(80px, 11.1vw, 160px);
  --gap-head: clamp(40px, 5.5556vw, 80px);

  /* Type scale (375px → 1440px) */
  --fs-display: clamp(48px, 36.7px + 3vw, 80px);
  --fs-h1: clamp(36px, 29px + 1.88vw, 56px);
  --fs-h2: clamp(32px, 29.2px + 0.75vw, 40px);
  --fs-h3: clamp(24px, 21.2px + 0.75vw, 32px);
  --fs-h4: clamp(22px, 21.3px + 0.19vw, 24px);
  --fs-h5: 20px;
  --fs-l: clamp(20px, 19.3px + 0.19vw, 22px);
  --fs-m: 18px;
  --fs-s: 15px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 30px;
  color: var(--t1);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
}
img {
  max-width: 100%;
  height: auto;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--ti);
  border-radius: 999px;
}
.skip:focus {
  top: 16px;
}

/* ── Type ─────────────────────────────────────────────────────────────── */
.display {
  font-size: var(--fs-display);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.h4 {
  font-size: var(--fs-h4);
  line-height: 1.33;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.h5 {
  font-size: var(--fs-h5);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.lead {
  font-size: var(--fs-l);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.body {
  font-size: var(--fs-m);
  line-height: 30px;
}
.small {
  font-size: var(--fs-s);
  line-height: 24px;
}
.muted {
  color: var(--t2);
}
.faint {
  color: var(--t3);
}
.label {
  font-size: var(--fs-s);
  line-height: 24px;
  color: var(--brand-ink);
}
.on-dark {
  background: var(--ink);
  color: var(--ti);
}
.on-dark .muted {
  color: var(--tim);
}
.on-dark .faint {
  color: var(--tim);
}
.on-dark .label {
  color: var(--brand-light);
}
.nowrap {
  white-space: nowrap;
}
.bg-subtle {
  background: var(--subtle);
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.wrap {
  box-sizing: content-box;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.bleed {
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--sec);
}
.rel {
  position: relative;
}
.clip {
  overflow: hidden;
}

/* Section head: title left, one-paragraph intro right (max 410px) */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 40px;
  margin-bottom: var(--gap-head);
}
.sec-head--top {
  align-items: flex-start;
}
.sec-head > p,
.sec-head__aside {
  max-width: 410px;
}
.sec-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
@media (max-width: 899px) {
  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--ink);
  color: var(--ti);
  transition:
    gap 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}
.btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.btn:hover {
  gap: 12px;
  background: #2b2b29;
}
.btn--sm {
  padding: 8px 16px;
  font-size: 13px;
  line-height: 18px;
}
.btn--lg {
  padding: 16px 24px;
  font-size: 16px;
  line-height: 24px;
  width: 100%;
}
.btn--lg svg {
  width: 20px;
  height: 20px;
}
.btn--brand {
  background: var(--brand);
  color: #fff;
}
.btn--brand:hover {
  background: var(--brand-hover);
}
.btn--link {
  padding: 2px 0;
  background: none;
  color: var(--t1);
  border-radius: 0;
}
.btn--link:hover {
  background: none;
  color: var(--brand-ink);
}
.on-dark .btn--link {
  color: var(--ti);
}
.on-dark .btn--link:hover {
  color: var(--brand-light);
}

/* ── Tags ─────────────────────────────────────────────────────────────── */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  font-size: 15px;
  line-height: 24px;
  white-space: nowrap;
}
.tag--strong {
  border-color: var(--bd-strong);
}
.on-dark .tag {
  border-color: var(--bd-inv);
  color: var(--ti);
}

/* ── Eyebrow (orange dot + text) ──────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-s);
  line-height: 24px;
  color: var(--t2);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

/* ── Globe decoration (animated canvas, js/globe.js) ────────────────── */
.globe {
  position: absolute;
  display: block;
  width: clamp(560px, 69.4vw, 1000px);
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  background: var(--paper);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}
.logo {
  font-size: 28px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0.14em;
  white-space: nowrap;
  padding: 10px 0;
  margin: -10px 0;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  font-size: 15px;
  line-height: 24px;
}
.nav__label {
  display: block;
  padding-top: 6px;
}
.nav__label::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  background: var(--brand);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav__link:hover .nav__label::after {
  opacity: 1;
}
.nav__links .btn {
  margin-left: 8px;
}
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 899px) {
  .nav__in {
    height: 76px;
  }
  .nav__links {
    display: none;
  }
  .nav__burger {
    display: inline-flex;
  }
}

/* ── Mobile menu ──────────────────────────────────────────────────────── */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow: hidden auto;
  background: var(--ink);
  color: var(--ti);
}
.menu.is-open {
  display: flex;
}
body.menu-open {
  overflow: hidden;
}
.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding-inline: var(--pad);
  flex: none;
}
.menu__close {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu__items li {
  border-top: 1px solid var(--bd-inv);
}
.menu__items li:last-child {
  border-bottom: 1px solid var(--bd-inv);
}
.menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px var(--pad);
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.015em;
}
.menu__item svg {
  flex: none;
  color: var(--brand-light);
}
.menu__item:active,
.menu__item:hover {
  color: var(--brand-light);
}
.menu__bottom {
  position: relative;
  margin-top: auto;
  padding: 48px var(--pad) 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}
.menu__bottom .globe {
  left: 50%;
  bottom: -62%;
  width: 150vw;
  transform: translateX(-50%);
}
.menu__contact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 18px;
  line-height: 30px;
}
.menu__contact a:last-child {
  color: var(--tim);
}
.menu__bottom .btn {
  position: relative;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(64px, 8.9vw, 128px);
}
.hero--short {
  padding-bottom: clamp(56px, 6.7vw, 96px);
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 845px) 302px;
  justify-content: space-between;
  align-items: end;
  gap: 32px 40px;
}
.hero__headline {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 8px;
}
@media (max-width: 899px) {
  .hero__in {
    grid-template-columns: 1fr;
  }
  .hero__headline {
    gap: 24px;
  }
}

/* ── How we work ──────────────────────────────────────────────────────── */
.how {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(96px, 14.6vw, 210px);
}
.how .globe--top {
  left: 50%;
  top: 0;
  transform: translate(-50%, -84%);
}
.how .globe--bottom {
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 84%);
}
.how__in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.statement {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  max-width: 1000px;
  margin-inline: auto;
}
.statement > span {
  white-space: nowrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(72px, 7.8vw, 112px);
  height: clamp(40px, 4.2vw, 60px);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.pill--brand {
  background: var(--brand);
  color: #fff;
  transition: background-color 0.2s ease;
}
.pill--brand:hover {
  background: var(--brand-hover);
}
.pill--brand svg {
  width: clamp(24px, 2.2vw, 32px);
  height: auto;
}

/* ── Work index ───────────────────────────────────────────────────────── */
.index {
  border-bottom: 1px solid var(--bd-strong);
}
.index__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 410px;
  gap: 8px 24px;
  align-items: start;
  padding: 32px var(--gutter);
  border-top: 1px solid var(--bd-strong);
  transition: background-color 0.2s ease;
}
.index__row .label {
  padding-top: 7px;
}
.index__title {
  transition: color 0.2s ease;
}
.index__sector {
  text-align: right;
  padding-top: 7px;
}
.index__desc {
  grid-column: 2;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.index__desc > p {
  overflow: hidden;
  max-width: 628px;
}
@media (hover: hover) {
  .index__row:hover {
    background: var(--brand-subtle);
  }
  .index__row:hover .index__title {
    color: var(--brand-ink);
  }
  .index__row:hover .index__desc {
    grid-template-rows: 1fr;
  }
}
.on-dark .index {
  border-color: var(--bd-inv);
}
.on-dark .index__row {
  border-color: var(--bd-inv);
  padding-block: 24px;
}
@media (hover: hover) {
  .on-dark .index__row:hover {
    background: var(--ink-hover);
  }
  .on-dark .index__row:hover .index__title {
    color: var(--brand-light);
  }
}
@media (max-width: 899px) {
  .index__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-block: 24px;
  }
  .index__row .label,
  .index__sector {
    padding-top: 0;
  }
  .index__sector {
    text-align: left;
  }
  .index__desc {
    grid-column: 1;
  }
}

/* Own product teaser under the index */
.teaser {
  display: grid;
  grid-template-columns: minmax(0, 628px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: var(--gap-head);
}
.teaser__img {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 628 / 418;
}
.teaser__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teaser__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-left: 80px;
}
/* Second teaser: image on the right, so the two alternate */
.teaser--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 628px);
}
.teaser--flip .teaser__img {
  order: 2;
}
.teaser--flip .teaser__text {
  padding-left: 0;
  padding-right: 80px;
}
@media (max-width: 899px) {
  .teaser,
  .teaser--flip {
    grid-template-columns: 1fr;
  }
  .teaser--flip .teaser__img {
    order: 0;
  }
  .teaser__text,
  .teaser--flip .teaser__text {
    padding-left: 0;
    padding-right: 0;
    gap: 16px;
  }
}

/* ── Services ─────────────────────────────────────────────────────────── */
.services {
  position: relative;
  overflow: hidden;
}
.services .globe--tl {
  left: 0;
  top: 0;
  transform: translate(-56%, -54%);
}
.services .globe--br {
  right: 0;
  bottom: 0;
  transform: translate(56%, 61%);
}
.services__in {
  position: relative;
}
.svc {
  display: grid;
  grid-template-columns: minmax(0, 628px) minmax(0, 519px);
  justify-content: space-between;
  gap: 24px 40px;
  padding: 32px 0 64px;
  border-top: 1px solid var(--bd-inv);
}
.svc__title {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.svc__title .num {
  color: var(--brand-light);
  flex: none;
}
.svc__detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.svc__detail p {
  color: var(--tim);
}
@media (max-width: 899px) {
  .svc {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 0 48px;
  }
  .svc__title {
    gap: 12px;
  }
}

.engage {
  margin-top: var(--gap-head);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.model {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--bd-inv);
}
.model p {
  color: var(--tim);
}
@media (max-width: 899px) {
  .models {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── Cell grid (Delivery standard, How it runs, Agroist modules) ──────── */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--bd-strong);
  border-top: 1px solid var(--bd-strong);
}
.cell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 300px;
  padding: 32px;
  background: var(--paper);
  border-right: 1px solid var(--bd-strong);
  border-bottom: 1px solid var(--bd-strong);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.cell--short {
  min-height: 260px;
}
.cell > * {
  position: relative;
}
.cell__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cell__text p {
  color: var(--t2);
  transition: color 0.2s ease;
}
.cell .globe {
  position: absolute;
  width: 560px;
  right: 0;
  top: 0;
  transform: translate(38%, -40%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cell__icon {
  width: 32px;
  height: 32px;
  color: var(--t1);
  transition: color 0.2s ease;
}
@media (hover: hover) {
  .cell:not(.cell--brand):hover {
    background: var(--ink);
    color: var(--ti);
  }
  .cell:not(.cell--brand):hover .cell__text p {
    color: var(--tim);
  }
  .cell:not(.cell--brand):hover .label {
    color: var(--brand-light);
  }
  .cell:not(.cell--brand):hover .cell__icon {
    color: var(--brand-light);
  }
  .cell:not(.cell--brand):hover .globe {
    opacity: 1;
  }
}
.cell--brand {
  background: var(--brand);
  color: #fff;
}
.cell--brand .cell__text {
  gap: 8px;
}
.cell--brand .cell__text p {
  color: #fff;
}
.cell--brand .cell__text p + p {
  opacity: 0.85;
}
.cell--brand .display {
  font-size: clamp(48px, 2.4vw + 46px, 80px);
}
@media (max-width: 899px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .cell {
    min-height: 0;
    gap: 16px;
    padding: 24px;
  }
  .cell--brand .cell__text {
    gap: 4px;
  }
}

/* ── Team ─────────────────────────────────────────────────────────────── */
/* ── Team: one card on the left, the text on the right ──────────────── */
.team {
  display: grid;
  grid-template-columns: 302px minmax(0, 740px);
  justify-content: space-between;
  align-items: start;
  gap: 40px;
}
.member {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.member__photo {
  aspect-ratio: 302 / 378;
  border-radius: 8px;
  overflow: hidden;
  background: var(--subtle);
}
.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.3s ease;
}
.member__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.member__name {
  font-size: var(--fs-h5);
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.person-link {
  align-self: flex-start;
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.member__text .person-link {
  margin-top: 6px;
}
.member__bench {
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}
@media (hover: hover) {
  .member:hover .member__photo img {
    filter: none;
  }
  .member:hover .member__name {
    color: var(--brand-ink);
  }
}
.team__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.team__bio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.team__practice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
/* These chips are sentences, so let them wrap on narrow screens instead of overflowing */
.team__practice .tag {
  white-space: normal;
  border-radius: 20px;
}
@media (max-width: 899px) {
  .team {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .team__text {
    order: -1;
    gap: 16px;
  }
  .member {
    max-width: 302px;
  }
  .member__name {
    font-size: 18px;
    line-height: 26px;
  }
}

/* ── Showcase (product page) ──────────────────────────────────────────── */
.showcase {
  padding-bottom: clamp(64px, 8.9vw, 128px);
}
/* Showcase between two sections (e-QR) needs the same space above */
.showcase--mid {
  padding-top: clamp(64px, 8.9vw, 128px);
}
.showcase__img {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.showcase__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.integrations {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 40px;
  flex-wrap: wrap;
  margin-top: var(--gap-head);
}
.integrations__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.proof svg {
  flex: none;
  color: var(--brand-ink);
}
.proof a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.proof a:hover {
  color: var(--brand-ink);
}

/* ── Pricing (agencies page) ──────────────────────────────────────────── */
.pricing {
  display: grid;
  grid-template-columns: 193px minmax(0, 954px);
  justify-content: space-between;
  gap: 24px 40px;
}
.pricing__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 899px) {
  .pricing {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Contact + footer ─────────────────────────────────────────────────── */
.contact {
  position: relative;
  overflow: hidden;
  padding-top: var(--sec);
}
.contact .globe {
  right: 0;
  top: 0;
  transform: translate(31%, 0);
  width: clamp(560px, 69.4vw, 975px);
}
.contact__in {
  position: relative;
}
.contact__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 40px;
}
.contact__head > div {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 845px;
}
.contact__head > p {
  max-width: 410px;
  padding-bottom: 8px;
}
.channels {
  margin-top: var(--gap-head);
  border-bottom: 1px solid var(--bd-inv);
}
.channel {
  display: grid;
  grid-template-columns: 193px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--bd-inv);
  transition: background-color 0.2s ease;
}
.channel__value {
  transition: color 0.2s ease;
}
.channel svg {
  color: var(--brand-light);
}
.channel:hover {
  background: var(--ink-hover);
  box-shadow: -16px 0 0 var(--ink-hover), 16px 0 0 var(--ink-hover);
}
.channel:hover .channel__value {
  color: var(--brand-light);
}
.footer {
  padding-top: clamp(80px, 8.9vw, 128px);
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5.5vw, 80px);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  font-size: 15px;
  line-height: 24px;
}
.footer__links a {
  display: inline-block;
  padding: 4px 0;
  margin: -4px 0;
  transition: color 0.2s ease;
}
.footer__links a:hover {
  color: var(--brand-light);
}
.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 8px 40px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--bd-inv);
  color: var(--tim);
}
@media (max-width: 899px) {
  .contact__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .contact__head > div {
    gap: 16px;
  }
  .contact__head > p {
    padding-bottom: 0;
  }
  .contact .globe {
    width: 560px;
    transform: translate(28%, -8%);
  }
  .channel {
    grid-template-columns: 68px minmax(0, 1fr) 24px;
    gap: 12px;
  }
  .channel:hover {
    box-shadow: none;
  }
  .channel svg {
    width: 24px;
    height: 24px;
  }
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__links {
    gap: 12px 20px;
  }
}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.notfound {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 845px;
}

/* ── Landing page: WordPress rebuild (/wordpress-rebuild/) ───────────── */
/* Scoped to body.lp-page so the main site keeps its own rhythm. */
.lp-page {
  --sec: clamp(64px, 6.7vw, 96px);
  --gap-head: clamp(32px, 3.9vw, 56px);
  --t2: #3b3a37;
}
.lp-page .small {
  font-size: 16px;
  line-height: 26px;
}
.lp-page .body {
  font-size: 18px;
  line-height: 28px;
}
.lp-page .label {
  font-size: 15px;
}
.lp-page .cell__icon {
  width: 64px;
  height: 64px;
}
.lp-page .cell--short {
  min-height: 0;
  justify-content: flex-start;
  gap: 32px;
}
.lp-page .cell--brand {
  justify-content: space-between;
}

/* Top bar */
.lp-top__in {
  height: 82px;
  gap: 24px;
}
.lp-top__nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
  margin-right: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.lp-top__nav a {
  color: var(--t2);
  transition: color 0.2s ease;
}
.lp-top__nav a:hover {
  color: var(--brand-ink);
}

/* Hero: copy left, audit mockup right */
.lp-hero {
  padding-top: clamp(40px, 5.5vw, 80px);
  padding-bottom: clamp(56px, 6.7vw, 96px);
}
.lp-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 560px);
  justify-content: space-between;
  align-items: center;
  gap: 40px 56px;
}
.lp-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.lp-hero__copy .h1 {
  letter-spacing: -0.03em;
}
.lp-cta {
  width: auto;
}
.lp-hero__proof {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 32px;
  font-size: 17px;
  line-height: 24px;
}
.lp-hero__proof li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-hero__proof svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--brand-ink);
}
.lp-check {
  border: 1px solid var(--bd-inv);
  border-radius: 10px;
  background: #242321;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.lp-check__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--bd-inv);
}
.lp-check__head > span:first-child {
  white-space: nowrap;
}
.lp-check__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #c9301a;
  color: #fff;
  white-space: nowrap;
}
.lp-check__status svg {
  width: 22px;
  height: 22px;
}
.lp-check__list {
  list-style: none;
}
.lp-check__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--bd-inv);
}
.lp-check__list li:last-child {
  border-bottom: 0;
}
.lp-check__list .lead {
  font-size: 19px;
  line-height: 27px;
}
.lp-num {
  flex: none;
  width: 24px;
  font-variant-numeric: tabular-nums;
}

/* Built to grow: the platform is a base, four next steps with a timeframe */
.lp-grow__in {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 640px);
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.lp-grow__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.lp-grow__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.lp-grow__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: 8px;
  background: #242321;
  border: 1px solid var(--bd-inv);
}
.lp-grow__time {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: #60a5fa; /* lighter than --brand-light: the card is lighter than the section, 4.5:1 needs this */
}

/* What you get */
.lp-get__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: var(--gap-head);
}
.lp-get__head p {
  max-width: 410px;
  text-align: right;
}
.lp-get .cell--brand {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  min-height: 0;
  padding: 32px;
}
.lp-get .cell--brand .h4 {
  max-width: 520px;
}
.lp-cell-link {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}
.lp-cell-link:hover {
  color: #fff;
}
.lp-cell-link svg {
  width: 20px;
  height: 20px;
}

/* Objections and migration: three equal cards */
.lp-stage-sec {
  padding-top: 0;
}
.lp-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.lp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--bd);
}
.lp-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-reasons {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-reasons li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-reasons svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--brand-ink);
}
.lp-moved .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lp-moved svg {
  width: 16px;
  height: 16px;
  color: var(--brand-ink);
}
.lp-redirect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--subtle);
  font-variant-ligatures: none;
}
.lp-redirect svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand-ink);
}

/* How it works */
.lp-how__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: var(--gap-head);
}
.lp-how__head p {
  max-width: 410px;
  text-align: right;
}
.lp-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.lp-steps li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--bd-inv);
}
.lp-steps .label {
  margin-bottom: 8px;
}
.lp-steps__time {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--brand-light);
}

/* Why us */
.lp-why {
  padding-bottom: 0;
}
.lp-why__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: var(--gap-head);
}
.lp-why__head .h2 {
  max-width: 900px;
}
.lp-proof {
  list-style: none;
  border-bottom: 1px solid var(--bd);
}
.lp-proof li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 24px var(--gutter);
  border-top: 1px solid var(--bd);
  transition: background-color 0.2s ease;
}
.lp-proof .h4 {
  max-width: 1000px;
}
.lp-proof strong {
  font-weight: 500;
}
@media (hover: hover) {
  .lp-proof li:hover {
    background: var(--brand-subtle);
  }
  .lp-proof li:hover strong {
    color: var(--brand-ink);
  }
}

/* The person */
.lp-person {
  padding-top: 64px;
  padding-bottom: 64px;
}
.lp-person__in {
  display: flex;
  align-items: center;
  gap: 40px;
}
.lp-person__photo {
  flex: none;
  width: 240px;
  background: var(--subtle);
}
.lp-person__photo img {
  filter: none;
}
.lp-person__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}

/* Pricing */
.lp-pricing__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: var(--gap-head);
}
.lp-pricing__aside {
  max-width: 520px;
  text-align: right;
}
.lp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.lp-plan {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 32px;
  border: 1px solid var(--bd);
  background: var(--paper);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.lp-plan--strong {
  border-color: var(--bd-strong);
}
.lp-plan--ink {
  background: var(--ink);
  color: var(--ti);
  border-color: var(--bd-strong);
}
.lp-plan__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lp-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lp-plan__tag {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  white-space: nowrap;
}
.lp-plan__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-plan__checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}
.lp-plan--ink .lp-plan__checks {
  border-color: var(--bd-inv);
}
.lp-plan__checks li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-plan__checks svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand-ink);
}
.lp-plan--ink .lp-plan__checks svg {
  color: var(--brand-light);
}
.lp-plan__btn {
  width: 100%;
}
@media (hover: hover) {
  .lp-plan:not(.lp-plan--ink):hover {
    background: var(--ink);
    color: var(--ti);
    border-color: var(--ink);
  }
  .lp-plan:not(.lp-plan--ink):hover .muted,
  .lp-plan:not(.lp-plan--ink):hover .faint {
    color: var(--tim);
  }
  .lp-plan:not(.lp-plan--ink):hover .lp-plan__checks {
    border-color: var(--bd-inv);
  }
  .lp-plan:not(.lp-plan--ink):hover .lp-plan__checks svg {
    color: var(--brand-light);
  }
  .lp-plan:not(.lp-plan--ink):hover .lp-plan__btn {
    background: var(--brand);
  }
}

/* FAQ */
.lp-faq {
  background: var(--brand-subtle);
  border-top: 1px solid var(--subtle);
}
.lp-faq__in {
  display: grid;
  grid-template-columns: 302px minmax(0, 954px);
  justify-content: space-between;
  gap: 40px;
}
.lp-qa {
  border-bottom: 1px solid var(--bd);
}
.lp-q {
  border-top: 1px solid var(--bd);
  padding: 24px 0;
}
.lp-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.lp-q summary::-webkit-details-marker {
  display: none;
}
.lp-q summary:hover {
  color: var(--brand-ink);
}
.lp-q summary svg {
  flex: none;
  width: 28px;
  height: 28px;
}
.lp-q[open] summary svg {
  color: var(--brand-ink);
}
.lp-q[open] .lp-q__v {
  display: none;
}
.lp-q > p {
  padding-top: 16px;
  max-width: 820px;
}

/* Final: form */
.lp-final {
  position: relative;
  overflow: hidden;
  padding-top: var(--sec);
  padding-bottom: 32px;
}
.lp-final .globe {
  right: 0;
  top: 0;
  transform: translate(38%, -8%);
}
.lp-final__in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 6.7vw, 96px);
}
.lp-final__top {
  display: grid;
  grid-template-columns: minmax(0, 737px) 410px;
  justify-content: space-between;
  align-items: start;
  gap: 40px;
}
.lp-final__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.lp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-field label {
  color: var(--tim);
}
.lp-field input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--bd-inv);
  border-radius: 8px;
  background: #242321;
  color: var(--ti);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.2s ease;
}
.lp-field input::placeholder {
  color: var(--tim);
  opacity: 0.6;
}
.lp-field input:hover {
  border-color: var(--tim);
}
.lp-field input:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 0;
  border-color: var(--brand-light);
}
.lp-form .btn {
  width: 100%;
  margin-top: 8px;
}
.lp-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Thank-you page */
.lp-thanks {
  min-height: calc(100vh - 82px - 120px);
}
.lp-thanks__in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 737px;
}
.lp-thanks__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 16px;
}
.lp-thanks__legal {
  padding: 32px 0;
  border-top: 1px solid var(--bd);
}
.lp-thanks__legal .footer__legal {
  padding-top: 0;
  border-top: 0;
  color: var(--t2);
}

@media (max-width: 1099px) {
  .lp-hero__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  }
  .lp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 899px) {
  .lp-hero__in,
  .lp-grow__in,
  .lp-grow__list,
  .lp-stage,
  .lp-faq__in,
  .lp-final__top,
  .lp-steps {
    grid-template-columns: 1fr;
  }
  .lp-top__nav {
    display: none;
  }
  .lp-hero {
    padding-top: 24px;
  }
  .lp-hero__in {
    gap: 40px;
  }
  .lp-hero__copy {
    gap: 24px;
  }
  .lp-hero__proof {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lp-check__head,
  .lp-check__list li {
    padding: 14px 20px;
  }
  .lp-check__list .lead {
    font-size: 17px;
    line-height: 25px;
  }
  .lp-grow__card {
    padding: 20px;
  }
  .lp-get__head,
  .lp-how__head,
  .lp-pricing__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp-get__head p,
  .lp-how__head p,
  .lp-pricing__aside {
    text-align: left;
  }
  .lp-get .cell--brand {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp-stage {
    gap: 16px;
  }
  .lp-steps {
    gap: 16px;
  }
  .lp-steps li {
    padding-top: 16px;
  }
  .lp-proof li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .lp-person {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .lp-person__in {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .lp-person__photo {
    width: 160px;
  }
  .lp-plans {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lp-plan {
    gap: 32px;
  }
  .lp-final {
    padding-bottom: 24px;
  }
}