/* ==========================================================================
   K1 Nova components
   ========================================================================== */

/* --------------------------------------------------------------
   Header
   -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding-block: 0.9rem;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(7, 11, 20, 0.9);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
  padding-block: 0.6rem;
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; }
.brand__icon { width: 38px; height: 38px; border-radius: 11px; }
.brand__wordmark { width: 118px; height: auto; }
.brand:hover .brand__icon { filter: brightness(1.12); }
.brand__icon, .brand__wordmark { transition: filter 0.3s var(--ease); }

.nav { margin-inline: auto; }
.nav__list {
  display: flex; align-items: center; gap: 0.15rem;
  list-style: none; padding: 0.3rem; margin: 0;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
  background: none; border: 0; cursor: pointer;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.nav__link.is-current { color: var(--white); background: rgba(59, 130, 246, 0.16); }
.nav__chev { width: 9px; height: 6px; transition: transform 0.3s var(--ease); opacity: 0.75; }
[aria-expanded='true'] .nav__chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 0.7rem); left: 50%;
  transform: translateX(-50%);
  width: min(30rem, 84vw);
  z-index: 40;
}
.nav__menu[hidden] { display: none; }
.nav__menu-inner {
  display: grid; gap: 0.35rem; padding: 0.55rem;
  background: rgba(13, 20, 36, 0.96);
  backdrop-filter: blur(22px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  animation: menu-in 0.28s var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.nav__menu-link {
  display: grid; gap: 0.15rem; padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  transition: background-color 0.25s var(--ease);
}
.nav__menu-link:hover, .nav__menu-link:focus-visible { background: rgba(59, 130, 246, 0.14); }
.nav__menu-link.is-current { background: rgba(59, 130, 246, 0.1); }
.nav__menu-title { font-weight: 600; font-size: var(--fs-sm); }
.nav__menu-blurb { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

.site-header__actions { display: flex; align-items: center; gap: 0.8rem; flex: none; }
.site-header__phone {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding-inline: 0.35rem;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
  transition: color 0.25s var(--ease);
}
.site-header__phone:hover { color: var(--white); }

.burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  border-radius: 13px; cursor: pointer;
}
.burger span {
  display: block; width: 17px; height: 1.6px; background: var(--white);
  border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.burger[aria-expanded='true'] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(7, 11, 20, 0.97);
  backdrop-filter: blur(24px);
  padding: 6.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
  animation: fade-in 0.3s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }
.mobile-menu__inner { display: flex; flex-direction: column; min-height: 100%; gap: 1.5rem; }
.mobile-menu__list { list-style: none; padding: 0; margin: 0; display: grid; }
.mobile-menu__list a {
  display: block; padding: 1.05rem 0;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 500;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__list a:hover { color: var(--blue-light); }
.mobile-menu__foot { margin-top: auto; display: grid; gap: 1rem; padding-top: 1.5rem; }
.mobile-menu__phone { text-align: center; color: var(--muted); font-weight: 500; }
body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------
   Hero
   -------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(5rem, 9vw, 8.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__glow-a {
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  top: -22%; right: -14%;
}
.hero__glow-b {
  width: 40vw; height: 40vw; max-width: 620px; max-height: 620px;
  bottom: -18%; left: -12%;
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero__heading {
  /* A shade smaller than .display, because this heading carries the full
     promise rather than three short lines, and at the display size it ran to
     five lines and pushed the buttons off the first screen. */
  font-size: clamp(2.2rem, 1.2rem + 3.5vw, 3.7rem);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.02;
  margin-bottom: 1.6rem;
  max-width: 16ch;
}
.hero__lead { max-width: 46ch; margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2.6rem; }

.hero__recent {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.9rem;
  font-size: var(--fs-xs); color: var(--muted-dim);
}
.hero__recent-label {
  text-transform: uppercase; letter-spacing: 0.13em; font-weight: 600;
  color: var(--muted-dim);
}
.hero__recent-item {
  position: relative; padding-left: 0.95rem;
  color: var(--muted); font-weight: 500; letter-spacing: 0.01em;
}
.hero__recent-item::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--blue); opacity: 0.8;
}

.hero__media { position: relative; }
.hero__video { width: 100%; height: auto; background: var(--ink-900); }
.hero__video--desktop {
  /* The clip has its own near black background, so a soft radial mask lets it
     dissolve into the page instead of sitting inside an obvious card. */
  -webkit-mask-image: radial-gradient(ellipse 62% 50% at 54% 50%, #000 24%, rgba(0, 0, 0, 0.55) 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 50% at 54% 50%, #000 24%, rgba(0, 0, 0, 0.55) 56%, transparent 100%);
}
.hero__video--mobile { display: none; }
.hero__scrim { display: none; }

@media (max-width: 899px) {
  .hero {
    min-height: 88svh;
    display: flex; align-items: flex-end;
    padding-top: clamp(3rem, 14vw, 6rem);
    padding-bottom: clamp(5.5rem, 14vw, 8rem);
  }
  .hero__media { display: none; }
  .hero__video--mobile {
    display: block; position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.85;
  }
  .hero__scrim {
    display: block; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg, rgba(7, 11, 20, 0.94) 0%, rgba(7, 11, 20, 0.55) 34%,
      rgba(7, 11, 20, 0.72) 62%, var(--ink-900) 97%);
  }
  .hero__glow-a { width: 100vw; height: 70vw; top: -10%; right: -30%; opacity: 0.7; }
  .hero__heading { letter-spacing: -0.032em; }
  .hero__lead { font-size: 1.02rem; max-width: 34ch; }
  .hero__actions { margin-bottom: 1.9rem; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; min-width: 13rem; }
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__media { position: relative; }
  .hero__video--desktop { width: 132%; max-width: none; margin-left: -12%; margin-block: -8%; }
}
@media (min-width: 1400px) {
  .hero__video--desktop { width: 142%; margin-left: -14%; }
}

/* --------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------- */
.trust { padding-bottom: 0; }
.trust__panel { padding: clamp(1.75rem, 3.4vw, 2.75rem); }
.trust__panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.75) 30%, rgba(124, 58, 237, 0.55) 68%, transparent);
}
.trust__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
  padding-bottom: 1.6rem;
}
.trust__sub { font-size: var(--fs-sm); }
.trust__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}
.trust__item { position: relative; }
.trust__index {
  display: block; font-family: var(--font-display); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0.14em; color: var(--blue);
  margin-bottom: 0.7rem;
}
.trust__title { font-family: var(--font-display); font-size: 1.06rem; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 0.35rem; }
.trust__body { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

@media (min-width: 560px) {
  .trust__list { grid-template-columns: 1fr 1fr; gap: 1.5rem clamp(1.5rem, 4vw, 2.5rem); }
}
@media (min-width: 940px) {
  .trust__list { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .trust__item { padding-inline: clamp(1rem, 2vw, 1.9rem); }
  .trust__item:first-child { padding-left: 0; }
  .trust__item:last-child { padding-right: 0; }
  .trust__item + .trust__item { border-left: 1px solid var(--line); }
}

/* --------------------------------------------------------------
   Section heads
   -------------------------------------------------------------- */
.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head .lead { margin-top: 1.2rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }

/* --------------------------------------------------------------
   Problems
   -------------------------------------------------------------- */
.problems { background: var(--ink-800); }
.problems__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
.problems__aside .eyebrow { margin-bottom: 1.1rem; }
.problems__heading { margin-bottom: 1.3rem; }
.problems__link { margin-top: 1.6rem; }
.problems__list { list-style: none; margin: 0; padding: 0; }
.problems__item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding: 1.35rem 0.25rem 1.35rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease);
}
.problems__item:first-child { border-top: 1px solid var(--line); }
.problems__item:hover { padding-left: 0.65rem; }
.problems__num {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 500;
  color: var(--blue); letter-spacing: 0.1em; padding-top: 0.42rem;
  transition: color 0.3s var(--ease);
}
.problems__item:hover .problems__num { color: var(--blue-light); }
.problems__title { margin-bottom: 0.3rem; }
.problems__body { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; max-width: 52ch; }

@media (min-width: 960px) {
  .problems__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; }
  .problems__aside { position: sticky; top: 8rem; }
}

/* --------------------------------------------------------------
   Feature (alternating service blocks)
   -------------------------------------------------------------- */
.feature { overflow: hidden; isolation: isolate; padding-block: clamp(4rem, 7.5vw, 7.5rem); }
.feature__glow {
  width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
  top: 8%; right: -16%; opacity: 0.75;
}
.feature--flip .feature__glow { right: auto; left: -16%; }
.feature__grid { position: relative; z-index: 2; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.feature__heading { margin: 1.2rem 0 1.4rem; }
.feature__body + .feature__body { margin-top: 1rem; }
.feature__cta { margin-top: 2rem; }
.feature__media { min-width: 0; }

@media (min-width: 980px) {
  .feature__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .feature--flip .feature__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
  .feature--flip .feature__copy { order: 2; }
  .feature--flip .feature__media { order: 1; }
  .feature__copy { max-width: 34rem; }
  .feature:not(.feature--flip) .feature__copy { margin-left: auto; margin-right: 0; }
}

.checklist { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.75rem 1.6rem; }
.checklist li {
  position: relative; padding-left: 1.7rem;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
}
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 0.34em;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: rgba(59, 130, 246, 0.16);
  border: 1px solid rgba(59, 130, 246, 0.4);
}
.checklist li::after {
  content: ''; position: absolute; left: 0.32rem; top: 0.66em;
  width: 0.4rem; height: 0.22rem;
  border-left: 1.6px solid var(--blue-light);
  border-bottom: 1.6px solid var(--blue-light);
  transform: rotate(-45deg);
}
.checklist--tight { margin-top: 0; gap: 0.6rem; }
@media (min-width: 640px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist--single { grid-template-columns: 1fr !important; }

/* --------------------------------------------------------------
   Device frames
   -------------------------------------------------------------- */
.frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-700); }
.frame--browser {
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lift);
  border-radius: clamp(12px, 1.6vw, 20px);
}
.frame__bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.62rem 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-bottom: 1px solid var(--line);
}
.frame__dots { display: inline-flex; gap: 0.36rem; }
.frame__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.frame__url {
  flex: 1; text-align: center; font-size: 0.68rem; color: var(--muted-dim);
  letter-spacing: 0.02em;
}
.frame__screen { position: relative; background: #fff; }
.frame__screen img { width: 100%; }

.frame--phone {
  border-radius: 22px; padding: 5px;
  background: linear-gradient(160deg, #2b3550, #10182a);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.95);
}
.frame--phone .frame__screen { border-radius: 17px; overflow: hidden; }

.showcase, .project__media { position: relative; }
.showcase__phone, .project__phone {
  position: absolute; z-index: 3;
  bottom: -12%;
  /* Overhang is tied to the page gutter so the phone never leaves the viewport. */
  left: max(-7%, calc(var(--gutter) * -0.55));
  width: clamp(96px, 21%, 190px);
}
.seo-visual img {
  width: 100%; border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}

/* --------------------------------------------------------------
   Services: the three things we do
   -------------------------------------------------------------- */
.services { overflow: hidden; isolation: isolate; }
.services__glow {
  width: 70vw; height: 40vw; max-width: 900px;
  top: -8%; left: 50%; transform: translateX(-50%); opacity: 0.55;
}
/* Three large horizontal cards stacked vertically, each revealing on its own
   as it scrolls into view. */
.services__stack {
  position: relative; z-index: 2;
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
}

.svc {
  position: relative; overflow: hidden;
  display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: center;
  padding: clamp(1.6rem, 3.2vw, 3rem);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease),
    transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.svc::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.65) 35%, rgba(124, 58, 237, 0.45) 72%, transparent);
}
.svc:hover {
  border-color: rgba(59, 130, 246, 0.34);
  background: var(--ink-700);
  transform: translateY(-3px);
  box-shadow: 0 40px 90px -50px rgba(59, 130, 246, 0.5);
}

.svc__copy { min-width: 0; }
.svc__num {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.16em;
  color: var(--blue); margin-bottom: 0.9rem;
}
.svc__title { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem); margin-bottom: 0.7rem; }
.svc__lede {
  font-size: var(--fs-lead); color: var(--white); line-height: 1.45;
  letter-spacing: -0.012em; margin-bottom: 1.5rem; max-width: 34ch;
}
.svc__points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.65rem; }
.svc__points li {
  position: relative; padding-left: 1.35rem;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
}
.svc__points li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}

/* Media column. Nothing in here is allowed to size the card. */
.svc__media { min-width: 0; }
.svc__media > * { max-width: 100%; }
.svc__media img { width: 100%; height: auto; max-width: 100%; display: block; }
.svc__media .frame--browser { box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9); }
.seo-visual--card img { border-radius: var(--r-lg); }

.svc__store { position: relative; }

/* Scroll spacer used only by the deck layout below. */
.svc-gap { display: none; }

/* Platform badges. Small, fixed, and explicitly constrained so a large source
   file can never blow up the layout. */
.platforms {
  list-style: none; margin: 0.9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.platform {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted); white-space: nowrap;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.platform__mark {
  width: 20px; height: 20px;
  max-width: 24px; max-height: 24px;
  min-width: 20px;
  flex: none; object-fit: contain;
  color: var(--muted-dim);
  transition: color 0.35s var(--ease);
}
.svc:hover .platform { color: var(--white); border-color: var(--line-3); }
.svc:hover .platform__mark { color: var(--blue-light); }

@media (min-width: 900px) {
  .svc { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  /* Alternate the media side so the stack does not read as three identical rows.
     Column widths swap along with the order, so the media always keeps the
     wider column and every card's visual is the same size. */
  .svc:nth-child(even) { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
  .svc:nth-child(even) .svc__copy { order: 2; }
  .svc:nth-child(even) .svc__media { order: 1; }
}

/* --------------------------------------------------------------
   Service cards as a scrolled deck.
   Each card pins to the middle of the screen and the next one rides up
   over it, so one card is in view at a time. The card underneath scales
   back a little so it reads as a stack rather than a jump cut.

   Sticky positioning does the work; the classes only add the depth. If
   the script never runs, or the viewport is short, or the visitor asked
   for reduced motion, this degrades to three cards stacked down the page.
   -------------------------------------------------------------- */
/* Whether the deck runs is decided in the script, not here, because it depends
   on the tallest card actually fitting the viewport under the header. A media
   query cannot measure that, and it varies with phone size and font settings.
   Everything below only applies once the script adds .is-deck. */
@media (prefers-reduced-motion: no-preference) {
  /* Sticky does not work inside a clipping ancestor, so the section drops its
     overflow while the deck is on. The ambient glow is still contained by the
     overflow-x on body. */
  .services:has(.is-deck) { overflow: visible; }

  .services__stack.is-deck {
    display: block;
    /* Cards pin against this box, so they stay pinned once stuck and the next
       card rides up over the one before it. */
    position: relative;
  }

  /* The scroll distance between cards has to be a sibling rather than a margin
     on the card. A sticky element stops sticking when its MARGIN box reaches the
     bottom of the containing block, so a margin here would cut each card's pin
     short. Padding on the stack does not help either: Chrome constrains sticky
     to the content box, not the padding box. A real empty sibling is content, so
     it extends the travel without shortening it. */
  .is-deck .svc-gap { display: block; height: 58vh; }

  .is-deck .svc {
    position: sticky;
    /* Clears the sticky header, then centres the tallest card. */
    top: max(5.5rem, calc((100svh - var(--deck-card-h, 30rem)) / 2));
    /* scale and opacity rather than transform, so the entrance animation on
       [data-reveal] keeps its own transform and the two do not fight. */
    transition:
      scale 0.5s var(--ease-out),
      opacity 0.5s var(--ease-out),
      filter 0.5s var(--ease-out),
      border-color 0.4s var(--ease),
      background-color 0.4s var(--ease);
    will-change: scale, opacity;
  }

  /* The card that has been scrolled past, now sitting under the incoming one. */
  .is-deck .svc.is-behind {
    scale: 0.945;
    opacity: 0.4;
    filter: saturate(0.7);
  }
  .is-deck .svc.is-behind:hover { transform: none; }
}

/* --------------------------------------------------------------
   Why K1 Nova
   -------------------------------------------------------------- */
.why { background: var(--ink-800); }
.why__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.why__aside .eyebrow { margin-bottom: 1.1rem; }
.why__heading { margin-bottom: 1.2rem; }
.why__cta { margin-top: 1.8rem; }
.why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.why__item {
  padding: 1.3rem 0;
  border-top: 1px solid var(--line);
}
.why__item:last-child { border-bottom: 1px solid var(--line); }
.why__title {
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 500;
  letter-spacing: -0.015em; margin-bottom: 0.3rem;
}
.why__body { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; max-width: 54ch; }

@media (min-width: 900px) {
  .why__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  .why__aside { position: sticky; top: 8rem; }
  .why__list { grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 4vw, 3rem); }
  .why__item:nth-child(2) { border-top: 1px solid var(--line); }
  .why__item:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

.feature__note {
  margin-top: 1.4rem; font-size: var(--fs-xs); color: var(--muted-dim);
  line-height: 1.6; max-width: 48ch;
}

/* --------------------------------------------------------------
   Before / after comparison
   -------------------------------------------------------------- */
.compare { overflow: hidden; isolation: isolate; background: var(--ink-800); }
.compare__glow { width: 60vw; height: 40vw; max-width: 900px; top: 6%; left: 50%; transform: translateX(-50%); opacity: 0.6; }
.compare__head { position: relative; z-index: 2; max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.compare__head .eyebrow { margin-bottom: 1.1rem; }
.compare__head .lead { margin-top: 1.2rem; }

.compare__stage { position: relative; z-index: 2; max-width: 1100px; margin-inline: auto; }
.compare__viewer {
  position: relative;
  aspect-ratio: var(--compare-ratio, 1440 / 1010);
  border-radius: clamp(14px, 1.8vw, 22px);
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lift);
  background: #fff;
  touch-action: pan-y;
  cursor: ew-resize;
  --pos: 50%;
}
/* Nested inside a browser frame: the frame already supplies the chrome, the
   rounding and the clipping, so the viewer drops its own and fills the screen. */
.frame__screen .compare__viewer {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
}
.frame--compare .frame__screen { overflow: hidden; }

.compare__img { position: absolute; inset: 0; }
.compare__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.compare__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.compare__tag {
  position: absolute; top: 0.9rem; z-index: 4;
  padding: 0.3rem 0.75rem; border-radius: var(--r-pill);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(7, 11, 20, 0.9); color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.compare__tag--before { left: 0.9rem; }
.compare__tag--after { right: 0.9rem; background: rgba(29, 78, 216, 0.94); border-color: rgba(255, 255, 255, 0.35); }

.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; z-index: 5;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), #fff 22%, #fff 78%, rgba(255, 255, 255, 0.5));
  pointer-events: none;
}
.compare__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(7, 11, 20, 0.9); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}
.compare__grip svg { width: 20px; height: 12px; }

.compare__range {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%; margin: 0; opacity: 0;
  cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none;
}
.compare__range:focus-visible { opacity: 1; outline: 3px solid var(--blue-light); outline-offset: 4px; }
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.compare__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; }

.compare__notes {
  position: relative; z-index: 2;
  max-width: 1100px; margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.compare__notes-title { margin-bottom: 1.1rem; }
.compare__changes {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: grid; gap: 0.7rem 2rem;
  font-size: var(--fs-sm); color: var(--muted);
}
.compare__changes li { position: relative; padding-left: 1.35rem; line-height: 1.55; }
.compare__changes li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}
.compare__disclaimer { font-size: var(--fs-xs); color: var(--muted-dim); margin-bottom: 1.2rem; max-width: 60ch; }
@media (min-width: 760px) { .compare__changes { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------
   Work / project blocks
   -------------------------------------------------------------- */
.work__list { display: grid; gap: clamp(4rem, 9vw, 8rem); }
.project { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.project__index {
  display: block; font-family: var(--font-display); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0.16em; color: var(--blue); margin-bottom: 0.9rem;
}
.project__name { margin-bottom: 0.5rem; font-size: clamp(1.85rem, 1.25rem + 2vw, 2.8rem); }
.project__meta {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--muted-dim); margin-bottom: 1.2rem;
}
.project__summary { margin-bottom: 1.5rem; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.6rem; padding: 0; }
.tags li {
  padding: 0.32rem 0.75rem; border-radius: var(--r-pill);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--muted); background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
}

@media (min-width: 980px) {
  .project { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(3rem, 5vw, 5rem); }
  .project__copy { max-width: 30rem; }
  .project--flip .project__media { order: 2; }
  .project--flip .project__copy { order: 1; }
  .project--flip .project__phone { left: auto; right: max(-7%, calc(var(--gutter) * -0.55)); }
}

/* --------------------------------------------------------------
   Process
   -------------------------------------------------------------- */
.process { background: var(--ink-800); }
.process__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; counter-reset: step; }
.process__step { position: relative; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.process__step::after {
  content: ''; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
}
.process__num {
  display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 500;
  letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  margin-bottom: 0.8rem; line-height: 1;
}
.process__title { margin-bottom: 0.5rem; }
.process__body { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
@media (min-width: 860px) { .process__list { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* --------------------------------------------------------------
   Pricing
   -------------------------------------------------------------- */
.pricing { position: relative; overflow: hidden; isolation: isolate; }
.pricing__glow { width: 56vw; height: 40vw; max-width: 820px; top: 4%; left: 50%; transform: translateX(-50%); opacity: 0.7; }
.pricing__grid { position: relative; z-index: 2; display: grid; gap: 1.25rem; align-items: stretch; }

.price {
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  position: relative;
}
.price--featured {
  background: linear-gradient(178deg, rgba(59, 130, 246, 0.13), rgba(124, 58, 237, 0.07) 55%, transparent 88%), var(--ink-700);
  border-color: rgba(59, 130, 246, 0.42);
  box-shadow: 0 40px 90px -40px rgba(59, 130, 246, 0.55);
}
.price__flag {
  position: absolute; top: -0.75rem; left: clamp(1.6rem, 2.6vw, 2.25rem);
  padding: 0.28rem 0.8rem; border-radius: var(--r-pill);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--blue-solid), #6D28D9); color: #fff;
}
.price__name { margin-bottom: 0.5rem; }
.price__tagline { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.4rem; min-height: 2.9em; line-height: 1.5; }
.price__amount { display: flex; flex-direction: column; gap: 0.15rem; }
.price__from { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted-dim); }
.price__amount strong {
  font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 2.7rem);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.05;
}
/* Offer price with the regular price struck through beside it. */
.price__figures { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.price__was {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 500; letter-spacing: -0.02em;
  color: var(--muted-dim);
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(170, 180, 200, 0.75);
}
.price__offer-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.3rem; }
.price__flag--offer { background: linear-gradient(100deg, #C2410C, #DC2626); }
.price__rule { margin: 1.4rem 0; }
.price .checklist { grid-template-columns: 1fr; }
.price__best {
  font-size: var(--fs-xs); color: var(--muted-dim); line-height: 1.55;
  margin: 1.4rem 0 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.price__cta { margin-top: auto; }
@media (min-width: 900px) { .pricing__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.pricing__note {
  position: relative; z-index: 2;
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.4rem clamp(1.4rem, 2.5vw, 2rem);
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pricing__note p { color: var(--muted); font-size: var(--fs-sm); }
.pricing__note strong { color: var(--white); }

/* --------------------------------------------------------------
   Management
   -------------------------------------------------------------- */
.management__panel { display: grid; gap: 2rem; padding: clamp(1.75rem, 3.4vw, 2.75rem); }
.management__copy .eyebrow { margin-bottom: 1rem; }
.management__copy h2 { margin-bottom: 0.9rem; }
.management__body { font-size: var(--fs-sm); line-height: 1.65; max-width: 52ch; }
.management__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; align-content: center; }
.management__points li {
  position: relative; padding-left: 1.4rem; font-size: var(--fs-sm); color: var(--muted);
}
.management__points li::before {
  content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px;
  border-radius: 50%; background: linear-gradient(120deg, var(--blue), var(--violet));
}
@media (min-width: 860px) { .management__panel { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; } }

/* --------------------------------------------------------------
   FAQ
   -------------------------------------------------------------- */
.faq__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.faq__aside .eyebrow { margin-bottom: 1.1rem; }
.faq__aside h2 { margin-bottom: 1.2rem; }
.faq__aside .link-arrow { margin-top: 1.5rem; }
.faq__list { display: grid; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.3rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500;
  letter-spacing: -0.012em; line-height: 1.4;
  transition: color 0.25s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--blue-light); }
.faq__icon {
  position: relative; flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem;
}
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--blue-light);
  transform: translate(-50%, -50%); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq__icon::before { width: 1.1rem; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 1.1rem; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a { padding-bottom: 1.4rem; }
.faq__a p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.68; max-width: 66ch; }
.faq__item[open] .faq__a { animation: faq-in 0.35s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .faq__aside { position: sticky; top: 8rem; }
}

/* --------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------- */
.cta-panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-3xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(59, 130, 246, 0.22), transparent 58%),
    radial-gradient(90% 120% at 96% 100%, rgba(124, 58, 237, 0.2), transparent 62%),
    var(--ink-800);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
}
.cta-panel__glow { width: 70%; height: 120%; top: -40%; left: 15%; opacity: 0.5; }
.cta-panel__content { position: relative; z-index: 2; max-width: 46rem; margin-inline: auto; }
.cta-panel__heading { margin-bottom: 1.2rem; }
.cta-panel__body { margin-inline: auto; margin-bottom: 2.2rem; }
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* --------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.page-hero__glow { width: 62vw; height: 46vw; max-width: 900px; top: -28%; right: -12%; }
.page-hero__grid { position: relative; z-index: 2; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.page-hero__heading { margin: 1.2rem 0 1.4rem; }
.page-hero__lead { max-width: 52ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
@media (min-width: 980px) {
  .page-hero__grid--split { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
}

.crumbs { position: relative; z-index: 2; margin-bottom: 1.75rem; }
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-xs); color: var(--muted-dim);
}
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue-light); }

/* --------------------------------------------------------------
   Footer
   -------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--line);
  background: var(--ink-850);
}
.site-footer::before {
  content: ''; position: absolute; inset: -1px 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5) 25%, rgba(124, 58, 237, 0.4) 70%, transparent);
}
.site-footer__top { display: grid; gap: 3rem; padding-bottom: 3rem; }
.site-footer__brand img { width: 230px; height: auto; }
.site-footer__blurb { margin: 1.5rem 0; font-size: var(--fs-sm); color: var(--muted); max-width: 40ch; line-height: 1.65; }
.site-footer__contact { display: grid; gap: 0.35rem; font-size: var(--fs-sm); }
.site-footer__contact a { color: var(--muted); transition: color 0.25s var(--ease); }
.site-footer__contact a:hover { color: var(--blue-light); }

.site-footer__nav { display: grid; gap: 2.25rem; }
.site-footer__heading {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--white);
  margin-bottom: 1rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
/* Footer links carry a comfortable tap area rather than sitting at text height. */
.site-footer__col a {
  display: inline-flex; align-items: center; min-height: 2.5rem;
  font-size: var(--fs-sm); color: var(--muted); transition: color 0.25s var(--ease);
}
.site-footer__col a:hover { color: var(--white); }
.site-footer__contact a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.site-footer__area { margin-top: 1rem; font-size: var(--fs-xs); color: var(--muted-dim); line-height: 1.6; max-width: 30ch; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  padding-top: 2rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--muted-dim);
}
.site-footer__legal { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-footer__legal a { transition: color 0.25s var(--ease); }
.site-footer__legal a:hover { color: var(--white); }

@media (min-width: 760px) { .site-footer__nav { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 4rem; } }

/* --------------------------------------------------------------
   Responsive header
   -------------------------------------------------------------- */
@media (max-width: 1079px) {
  .nav, .site-header__phone { display: none; }
  .burger { display: flex; }
  .site-header__inner { justify-content: space-between; }
}
@media (max-width: 479px) {
  .site-header__cta { display: none; }
  .brand__wordmark { width: 100px; }
}

/* --------------------------------------------------------------
   Forms
   -------------------------------------------------------------- */
.quote-form { display: grid; gap: 1.5rem; }
.honeypot { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.quote-form__grid { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .quote-form__grid { grid-template-columns: 1fr 1fr; } }

/* align-content keeps a field's rows packed at the top. Without it a field
   sitting beside one that carries a hint line gets stretched to match the row,
   which made the email input taller than the website input next to it. */
.field { display: grid; gap: 0.45rem; min-width: 0; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field__label {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--white);
}
.field__req { color: var(--blue-light); }
.field__opt { font-size: 0.7rem; font-weight: 500; color: var(--muted-dim); letter-spacing: 0.03em; }
.field__input {
  width: 100%; padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--white); font-size: var(--fs-sm);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field__input::placeholder { color: rgba(170, 180, 200, 0.5); }
.field__input:hover { border-color: var(--line-3); }
.field__input:focus {
  outline: none; border-color: var(--blue);
  background: rgba(59, 130, 246, 0.07);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}
.field__input[aria-invalid='true'] { border-color: #F87171; }
.field__textarea { resize: vertical; min-height: 9rem; line-height: 1.6; font-family: inherit; }
.field__select { position: relative; }
.field__select select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }
.field__select option { background: var(--ink-700); color: var(--white); }
.field__select svg {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 10px; height: 6px; color: var(--muted); pointer-events: none;
}
.field__hint { font-size: var(--fs-xs); color: var(--muted-dim); }
.field__error { font-size: var(--fs-xs); color: #F87171; min-height: 0; }
.field__error:empty { display: none; }

.quote-form__foot { display: grid; gap: 0.9rem; justify-items: start; }
.quote-form__note { font-size: var(--fs-xs); color: var(--muted-dim); max-width: 42ch; }

.form__status { font-size: var(--fs-sm); padding: 0.85rem 1.1rem; border-radius: var(--r-md); }
.form__status:empty { display: none; }
.form__status.is-success { background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.35); color: #A7F3D0; }
.form__status.is-error { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.32); color: #FCA5A5; }
.form__status.is-pending { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.32); color: var(--blue-light); }

/* --------------------------------------------------------------
   Prose (privacy, terms, case study body copy)
   -------------------------------------------------------------- */
.prose { max-width: 46rem; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-size: var(--fs-h3); margin-top: 2.75rem; margin-bottom: 0.4rem;
  padding-top: 2rem; border-top: 1px solid var(--line);
}
.prose h3 { font-size: var(--fs-h4); margin-top: 1.9rem; margin-bottom: 0.2rem; }
.prose p, .prose li { color: var(--muted); line-height: 1.75; }
.prose strong { color: var(--white); font-weight: 600; }
.prose a { color: var(--blue-light); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #8DBBFF; }
.prose ul, .prose ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.prose li::marker { color: var(--blue); }
.prose .note {
  padding: 1.1rem 1.3rem; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------
   Split layout (heading left, body right)
   -------------------------------------------------------------- */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
.split__side .eyebrow { margin-bottom: 1rem; }
.split__note { font-size: var(--fs-sm); margin-top: 1rem; max-width: 34ch; }
.split__body > * + * { margin-top: 1.1rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}

/* --------------------------------------------------------------
   Numbered grid list
   -------------------------------------------------------------- */
.grid-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.grid-list__item { padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--ink-850); }
.grid-list__num {
  display: block; font-family: var(--font-display); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0.14em; color: var(--blue); margin-bottom: 0.9rem;
}
.grid-list__item h3 { margin-bottom: 0.45rem; }
.grid-list__item p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
@media (min-width: 700px) { .grid-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .grid-list { grid-template-columns: repeat(4, 1fr); } }

.page-hero__visual { width: 100%; border-radius: var(--r-xl); border: 1px solid var(--line); }

/* --------------------------------------------------------------
   Pricing teaser
   -------------------------------------------------------------- */
.pricing-teaser__panel {
  display: grid; gap: 1.75rem; align-items: center;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  background:
    radial-gradient(110% 140% at 8% 0%, rgba(59, 130, 246, 0.14), transparent 62%),
    var(--ink-800);
}
.pricing-teaser__panel h2 { margin: 0.9rem 0 0.7rem; }
.pricing-teaser__body { font-size: var(--fs-sm); max-width: 52ch; line-height: 1.65; }
.pricing-teaser__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 900px) {
  .pricing-teaser__panel { grid-template-columns: 1.4fr auto; gap: 3rem; }
}

/* --------------------------------------------------------------
   Three column explainer
   -------------------------------------------------------------- */
.cols-3 { display: grid; gap: 1.25rem; }
.col-card {
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  position: relative;
}
.col-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
}
.col-card__title { margin-bottom: 0.8rem; }
.col-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; }
@media (min-width: 860px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .cols-3--four { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .cols-3--four { grid-template-columns: repeat(4, 1fr); } }

.source-note { margin-top: 1.5rem; font-size: var(--fs-xs); color: var(--muted-dim); }
/* On a light band --muted-dim is too pale to clear AA at this size. */
.section--light .source-note { color: var(--muted-on-light); font-size: var(--fs-sm); }

/* --------------------------------------------------------------
   Expectations panel
   -------------------------------------------------------------- */
.expectations__panel {
  display: grid; gap: 2rem;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(124, 58, 237, 0.13), transparent 60%),
    var(--ink-800);
}
.expectations__copy h2 { margin: 0.9rem 0 0.8rem; }
.expectations__body { font-size: var(--fs-sm); line-height: 1.65; max-width: 44ch; }
.expectations__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.expectations__list li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
}
.expectations__list li::before {
  content: ''; position: absolute; left: 0; top: 0.52em;
  width: 0.6rem; height: 0.6rem; border-radius: 2px;
  border: 1.5px solid rgba(124, 58, 237, 0.7);
  transform: rotate(45deg);
}
@media (min-width: 900px) { .expectations__panel { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; } }

@media (min-width: 700px) { .cols-3--six { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cols-3--six { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------
   About panel
   -------------------------------------------------------------- */
.about-panel {
  padding: clamp(2rem, 4.5vw, 3.5rem);
  background:
    radial-gradient(110% 150% at 100% 0%, rgba(59, 130, 246, 0.16), transparent 62%),
    var(--ink-800);
  isolation: isolate;
}
.about-panel__glow { width: 60%; height: 140%; top: -30%; right: -10%; opacity: 0.5; }
.about-panel__content { position: relative; z-index: 2; max-width: 50rem; }
.about-panel__content h2 { margin: 0.9rem 0 1rem; }
.about-panel__body { margin-bottom: 2rem; }
.about-panel__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.about-panel__details { display: grid; gap: 0.2rem; font-size: var(--fs-sm); }
.about-panel__details a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--muted); }
.about-panel__details a:hover { color: var(--blue-light); }

/* --------------------------------------------------------------
   Contact
   -------------------------------------------------------------- */
.page-hero--contact { padding-bottom: clamp(3rem, 6vw, 5rem); }
.contact__glow-b { width: 40vw; height: 40vw; max-width: 620px; bottom: -10%; left: -14%; }
.contact__grid { position: relative; z-index: 2; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact__heading { margin: 1.2rem 0 1.3rem; }
.contact__intro .lead { max-width: 44ch; }

.contact__direct { display: grid; gap: 0.75rem; margin: 2.25rem 0; }
.contact__card {
  display: grid; gap: 0.15rem;
  padding: 0.95rem 1.2rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.3s var(--ease);
}
a.contact__card:hover { border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.08); transform: translateY(-2px); }
.contact__card-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted-dim); font-weight: 600; }
.contact__card-value { font-weight: 600; font-size: var(--fs-sm); }
@media (min-width: 520px) { .contact__direct { grid-template-columns: 1fr 1fr; } }

.contact__steps { padding-top: 1.75rem; border-top: 1px solid var(--line); }
.contact__steps-title { margin-bottom: 1.1rem; }
.contact__steps-list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.8rem; }
.contact__steps-list li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.55;
}
.contact__steps-list span {
  flex: none; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: rgba(59, 130, 246, 0.16); border: 1px solid rgba(59, 130, 246, 0.4);
  color: var(--blue-light); font-size: 0.72rem; font-weight: 700;
}
.contact__reassure { font-size: var(--fs-xs); color: var(--muted-dim); max-width: 46ch; }

.contact__form-panel { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-xl); }
.contact__form-title { margin-bottom: 0.4rem; }
.contact__form-sub { font-size: var(--fs-xs); color: var(--muted-dim); margin-bottom: 1.75rem; }

@media (min-width: 1000px) {
  .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .contact__form-wrap { position: sticky; top: 7rem; }
}

/* --------------------------------------------------------------
   Case study
   -------------------------------------------------------------- */
.case-hero__grid { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; }
.case-hero__heading { margin: 1.1rem 0 1.3rem; }
.case-hero__lead { max-width: 52ch; }
.case-hero__tags { margin-top: 1.6rem; margin-bottom: 0; }

.case-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.case-facts__row { display: grid; gap: 0.2rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
.case-facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted-dim); font-weight: 600; }
.case-facts dd { margin: 0; font-size: var(--fs-sm); color: var(--white); line-height: 1.5; }
@media (min-width: 980px) { .case-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }

.case-shot { max-width: 1200px; margin-inline: auto; }

.case-approach { display: grid; gap: 2rem; }
.case-approach__item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; }
.case-approach__num {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.14em; color: var(--blue); padding-top: 0.35rem;
}
.case-approach__item h3 { margin-bottom: 0.4rem; }
.case-approach__item p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.68; max-width: 60ch; }

.case-screens { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.case-screens__phone { max-width: 260px; margin-inline: auto; }
@media (min-width: 900px) {
  .case-screens { grid-template-columns: minmax(0, 1fr) auto; }
  .case-screens--solo { grid-template-columns: minmax(0, 1fr); }
  .case-screens__phone { margin-inline: 0; }
}

.case-full__scroller {
  max-width: 900px; margin-inline: auto;
  max-height: min(80vh, 760px); overflow-y: auto;
  border-radius: var(--r-lg); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lift);
  background: #fff;
  scrollbar-width: thin;
}
.case-full__scroller img { width: 100%; }

.case-more { display: grid; gap: 1.5rem; }
.case-more__card {
  display: grid; gap: 0.9rem;
  padding: 1rem; border-radius: var(--r-xl);
  border: 1px solid var(--line); background: var(--ink-800);
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease), background-color 0.3s var(--ease);
}
.case-more__card:hover { border-color: rgba(59, 130, 246, 0.4); transform: translateY(-3px); background: var(--ink-700); }
.case-more__card picture img { border-radius: var(--r-md); width: 100%; }
.case-more__meta { display: grid; gap: 0.15rem; padding-inline: 0.4rem; }
.case-more__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; letter-spacing: -0.015em; }
.case-more__industry { font-size: var(--fs-xs); color: var(--muted-dim); }
.case-more__card .link-arrow { padding-inline: 0.4rem; padding-bottom: 0.4rem; }
@media (min-width: 760px) { .case-more { grid-template-columns: 1fr 1fr; } }

.showcase--phones { display: flex; gap: clamp(0.75rem, 2vw, 1.5rem); align-items: flex-start; justify-content: center; }
.showcase--phones .frame--phone { flex: 1 1 0; max-width: 250px; }
.showcase__phone-b { margin-top: clamp(1.5rem, 4vw, 3.5rem); }

.local-proof-links { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 1.75rem; justify-content: center; }

/* --------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------- */
.page-hero--legal { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.legal__heading { margin: 1.1rem 0 0.6rem; }
.legal__updated { font-size: var(--fs-sm); }

/* --------------------------------------------------------------
   404
   -------------------------------------------------------------- */
.notfound {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 76svh; display: flex; align-items: center;
  padding-block: clamp(4rem, 10vw, 8rem);
}
.notfound__glow { width: 70vw; height: 60vw; max-width: 900px; top: -25%; left: 50%; transform: translateX(-50%); }
.notfound__inner { position: relative; z-index: 2; max-width: 46rem; }
.notfound__heading { margin: 1.2rem 0 1.4rem; }
.notfound__lead { margin-bottom: 2.2rem; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2.75rem; }
.notfound__links {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line);
}
.notfound__links a {
  display: inline-flex; align-items: center; min-height: 2.5rem;
  padding: 0.42rem 0.95rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035);
  font-size: var(--fs-xs); font-weight: 500; color: var(--muted);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.notfound__links a:hover { color: var(--white); border-color: var(--line-3); background: rgba(255, 255, 255, 0.07); }
.notfound__contact { margin-top: 1.75rem; font-size: var(--fs-sm); color: var(--muted); }
.notfound__contact a { color: var(--blue-light); }

/* --------------------------------------------------------------
   Section rhythm: lighter bands read as large rounded panels
   stacked on the page, and the closing CTA overlaps the footer.
   -------------------------------------------------------------- */
.surface-alt, .problems, .process, .compare {
  border-radius: clamp(26px, 3vw, 54px);
  position: relative;
  z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Two lighter bands in a row should read as one, not two stacked cards. */
.surface-alt + .surface-alt,
.problems + .surface-alt { margin-top: calc(clamp(26px, 3vw, 54px) * -1); }

.cta-section { padding-bottom: 0; position: relative; z-index: 3; }
.cta-panel { margin-bottom: clamp(-4.5rem, -4vw, -2.5rem); }
.site-footer { padding-top: clamp(6.5rem, 11vw, 9.5rem); }

/* ==========================================================================
   The entry film
   --------------------------------------------------------------------------
   The homepage opens on a film of a camera pushing in across a desk towards a
   monitor, ending with the screen filling the frame, which then dissolves into
   the hero underneath.

   The film is scrubbed rather than played: the script writes the visitor's
   scroll position into --p, and everything below is a function of it. At --p 0
   the film sits on its first frame and nothing has moved.

   Written so that none of it applies without the script. The extra height, the
   pinning and the film itself all hang off `.is-intro-active`, which only the
   script sets, so with no JavaScript, with reduced motion asked for, or with a
   video the browser will not decode, the hero stands on its own at its natural
   height and there is no scroll to pay for it.
   ========================================================================== */
.enter { position: relative; }

.enter__stage { position: relative; }

/* With the film running the section grows by the run of scroll the push in is
   spread over, and the stage pins for the length of it. The length is set here
   rather than measured and written by the script, so the page is the right
   height on the first paint and nothing reflows once the script arrives. */
.is-intro-active .enter { height: calc(100svh + 150vh); }
@media (max-width: 759px) {
  .is-intro-active .enter { height: calc(100svh + 120vh); }
}
.is-intro-active .enter__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
}

.enter__hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* The film ends with its copy sitting low in the frame, because by then the
     camera has pushed in past the edges of the page. Weighting the hero the
     same way is what stops the words shifting as the film fades off them. */
  padding-block: clamp(2.5rem, 15svh, 9rem) 0;
  padding-inline: 6vw;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(36, 107, 253, 0.16), transparent 62%),
    var(--ink-900);
}

/* Inside the pinned stage the hero fills it rather than setting its height. */
.is-intro-active .enter__hero {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.enter__hero-glow {
  width: 70%;
  height: 70%;
  top: -18%;
  left: 15%;
  opacity: 0.5;
}

.enter__hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 68rem;
}

.enter__eyebrow {
  font-size: clamp(0.7rem, 0.55rem + 0.44vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #C3D2EE;
  margin-bottom: clamp(0.8rem, 2.4svh, 1.7rem);
}

.enter__heading {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 0.7rem + 4.05vw, 4.5rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: #EDEFF4;
  margin-bottom: clamp(0.9rem, 3svh, 2.1rem);
}

.enter__sub {
  font-size: clamp(0.98rem, 0.8rem + 0.62vw, 1.36rem);
  line-height: 1.5;
  color: #AEB8CA;
  max-width: 34ch;
  margin: 0 auto clamp(1.5rem, 6.4svh, 4.4rem);
}

.enter__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

/* ---------- The film ---------------------------------------------------- */

/* Hidden until the script says otherwise, so the page is never sitting behind
   a video that is not going to play. */
.enter__film { display: none; }

.is-intro-active .enter__film {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  /* The film is scaled inside this box, on a narrow frame at rest and on a wide
     one as it lands, so the box has to be the thing that clips it. */
  overflow: hidden;
  /* The same ground as the hero, so anything the film's own frame does not
     cover reads as the page rather than as a gap. */
  background: var(--ink-900);
  /* No transition: --fade is a function of where the visitor has scrolled to,
     so easing it would only put the film behind their finger. */
  opacity: calc(1 - var(--fade, 0));
}

.enter__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  /* Likewise the landing transform, which the script recomputes per frame from
     the same scroll position. */
  will-change: transform, opacity;
}

/* Shallower than 5:4 and a cover fit would crop the sides off the heading, so
   the whole frame is shown instead and the ground behind it carries the rest.

   Shown whole on a phone the film is a thin band across the middle, which is a
   poor way to arrive anywhere, so it is scaled up until it is worth looking at.
   1.4 is as far as it goes, and the limit is the last frame rather than the
   first: the heading in it runs from 16.2% to 85.1% of the frame's width, and
   at 1.4 the crop leaves 14.3% to 85.7% showing. Any tighter and the film ends
   on a headline with its ends cut off. */
@media (max-aspect-ratio: 5/4) {
  .enter__video { object-fit: contain; transform: scale(1.4); }
}

/* ---------- Registering the hero on the film ----------------------------
   Wherever the film is cropped to fill the frame, the script scales it as a
   whole until its heading is the hero's heading. That only lands the rest of
   the copy as well if the hero's own proportions are the film's, so here the
   hero is laid out in one unit, --t, and every part of it is a fixed multiple
   of that unit. The multiples come from measuring the film's own last frame:
   against a heading 882 wide, its eyebrow is 490, its body 780, and the three
   blocks sit -0.135, +0.193 and +0.368 of that heading width from its centre.

   --t follows the same max(width, height) rule the cover fit does, so the ratio
   between hero and film stays put at every shape of screen rather than drifting
   as one scales and the other does not. */
@media (min-aspect-ratio: 5/4) {
  .enter__hero-inner {
    --t: clamp(2.6rem, max(5.43vw, 9.65vh), 7.5rem);
    /* Wide enough for the heading to stay on the two lines its own break gives
       it. A fixed cap here silently rewraps it on big screens, and a rewrapped
       heading is a different width, which takes the whole registration with it. */
    max-width: calc(var(--t) * 12);
  }

  .enter__eyebrow {
    font-size: calc(var(--t) * 0.296);
    margin-bottom: calc(var(--t) * 0.1445);
  }
  .enter__heading {
    font-size: var(--t);
    margin-bottom: calc(var(--t) * 0.1962);
  }
  .enter__sub {
    font-size: calc(var(--t) * 0.393);
    /* Wide enough to break into the same three lines the film does. */
    max-width: calc(var(--t) * 10.25);
    margin-bottom: calc(var(--t) * 0.5132);
  }

  /* The buttons have to grow with the type too. Left at a fixed size their row
     keeps its height while everything above it grows, and the bottom of the
     hero drifts off the bottom of the film. The multipliers are the button's
     own rem values over --t, so at the size this was measured at nothing moves
     and everywhere else it scales in step. */
  .enter__actions { gap: calc(var(--t) * 0.2685); }
  .enter__actions .btn {
    gap: calc(var(--t) * 0.2088);
    font-size: calc(var(--t) * 0.2983);
    padding: calc(var(--t) * 0.3222) calc(var(--t) * 0.5669);
  }
  .enter__actions .btn__arrow {
    width: calc(var(--t) * 0.4475);
    height: calc(var(--t) * 0.4475);
  }
  .enter__actions .btn__arrow svg {
    width: calc(var(--t) * 0.2088);
    height: calc(var(--t) * 0.2088);
  }

  /* Nothing behind the film to see through to but the hero itself, so as the
     film eases back into register the page arrives around its edges rather than
     a band of flat colour. */
  .is-intro-active .enter__film { background: transparent; }
}

/* ---------- Scroll cue -------------------------------------------------- */

/* Sits on the bottom of the entry, over the film and then over the hero, and
   goes as soon as the visitor takes it up. Absolute rather than fixed so that
   with no script it simply scrolls away with the hero instead of following the
   visitor down the page. */
.enter__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3.2svh, 2.4rem);
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 600ms var(--ease-out);
}

/* It is an instruction, so it goes as soon as it has been taken up: gone by a
   fifth of the way in, which is a short scroll. Opacity clamps on its own, so
   no clamp() is needed around it. */
.is-intro-active .enter__cue {
  opacity: calc(1 - var(--p, 0) * 5);
  transition: none;
}

.enter__cue-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(233, 238, 248, 0.5);
}

.enter__cue-line {
  width: 1px;
  height: clamp(26px, 4.6svh, 44px);
  background: linear-gradient(180deg, rgba(233, 238, 248, 0.42), rgba(233, 238, 248, 0));
}

/* A single drop travelling down the line, so the cue reads as an instruction
   rather than as a stray rule. */
.enter__cue-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 38%;
  margin-left: -0.5px;
  background: linear-gradient(180deg, rgba(169, 196, 255, 0), rgba(169, 196, 255, 0.85));
  animation: cue-drop 2.4s var(--ease-out) infinite;
}
.enter__cue-line { position: relative; overflow: hidden; }

@keyframes cue-drop {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .enter__cue-line::after { animation: none; opacity: 0.6; }
  .enter__video { transition: none; }
  .is-intro-active .enter__film { transition: none; }
}

/* The header is held back while the film is still running and arrives once the
   visitor is inside. `is-intro-active` is only ever set by the script, so with
   no JavaScript the header is simply always there. */
.is-intro-active .site-header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.is-intro-active.is-entered .site-header {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}


/* ==========================================================================
   Homepage sections
   ========================================================================== */

/* ---------- Choose your path ---------- */
.paths__kicker { color: var(--muted-on-light); letter-spacing: 0.16em; }
.paths__grid { display: grid; gap: 1.25rem; }
.path-card {
  position: relative;
  display: grid;
  gap: 0.55rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper-2);
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-xl);
  color: var(--ink-text);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.path-card:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 107, 253, 0.32);
  box-shadow: 0 30px 60px -34px rgba(8, 16, 32, 0.4);
}
.path-card__top { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.4rem; }
.path-card__icon { width: 28px; height: 28px; color: var(--blue); flex: none; }
.path-card__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue-ink);
}
.path-card__q {
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.2;
}
.path-card__body { font-size: var(--fs-sm); color: var(--muted-on-light); line-height: 1.6; max-width: 34ch; }
.path-card__go {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(36, 107, 253, 0.1); color: var(--blue-ink);
  margin-top: 0.6rem;
  transition: transform 0.35s var(--ease), background-color 0.3s var(--ease);
}
.path-card__go svg { width: 0.8rem; height: 0.8rem; }
.path-card:hover .path-card__go { transform: translateX(3px); background: rgba(36, 107, 253, 0.18); }
@media (min-width: 880px) { .paths__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* ---------- Detailed services ---------- */
.services-detail { overflow: hidden; isolation: isolate; background: var(--ink-900); }
.services-detail__glow { width: 60vw; height: 40vw; max-width: 900px; top: 0; right: -18%; opacity: 0.5; }
.svc-blocks { position: relative; z-index: 2; display: grid; gap: clamp(3rem, 6vw, 5.5rem); }
.svc-block {
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.svc-block__n {
  display: block; font-family: var(--font-display); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0.18em; color: var(--blue); margin-bottom: 0.9rem;
}
.svc-block__kicker {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-dim); margin-bottom: 0.9rem;
}
.svc-block__heading { margin-bottom: 0.9rem; max-width: 20ch; }
.svc-block__body { font-size: var(--fs-lead); color: var(--muted); line-height: 1.62; max-width: 48ch; margin-bottom: 1.5rem; }
.svc-block__note {
  font-size: var(--fs-xs); color: var(--muted-dim); line-height: 1.6;
  max-width: 46ch; margin-bottom: 1.2rem;
}
.svc-block__cols { display: grid; gap: 1.75rem; align-content: start; }
.svc-block__col-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  letter-spacing: -0.012em; margin-bottom: 0.45rem;
}
.svc-block__col-note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin-bottom: 0.8rem; max-width: 40ch; }
.svc-block__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.svc-block__list li {
  position: relative; padding-left: 1.2rem;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
}
.svc-block__list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
@media (min-width: 900px) {
  .svc-block { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .svc-block__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .svc-block__cols:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

/* ---------- Automation flow ---------- */
.flow__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  counter-reset: flow;
}
.flow__step { position: relative; padding: 0 0 2.25rem 2.5rem; }
.flow__step:last-child { padding-bottom: 0; }
/* The connector between steps, drawn as it scrolls in. */
.flow__step::before {
  content: ''; position: absolute; left: 0.47rem; top: 1.5rem; bottom: 0;
  width: 2px; background: linear-gradient(180deg, var(--blue), rgba(36, 107, 253, 0.15));
  transform-origin: top; transform: scaleY(0);
  transition: transform 0.7s var(--ease-out) 0.15s;
}
.flow__step:last-child::before { display: none; }
.flow__step.is-visible::before { transform: scaleY(1); }
.flow__dot {
  position: absolute; left: 0; top: 0.25rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 2px solid var(--blue); background: var(--paper);
  display: grid; place-items: center;
}
.flow__dot i {
  width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--blue);
  transform: scale(0); transition: transform 0.45s var(--ease-out) 0.1s;
}
.flow__step.is-visible .flow__dot i { transform: scale(1); }
.flow__n {
  display: block; font-family: var(--font-display); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0.16em; color: var(--blue-ink); margin-bottom: 0.3rem;
}
.flow__title {
  font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.3rem;
}
.flow__body { font-size: var(--fs-sm); color: var(--muted-on-light); line-height: 1.6; max-width: 46ch; }
@media (min-width: 940px) {
  .flow__steps { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .flow__step { padding: 3rem 1.25rem 0 0; }
  .flow__step::before {
    left: 1.05rem; right: 0; top: 0.5rem; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--blue), rgba(36, 107, 253, 0.15));
    transform-origin: left; transform: scaleX(0);
    transition: transform 0.7s var(--ease-out) 0.15s;
  }
  .flow__step.is-visible::before { transform: scaleX(1); }
  .flow__dot { top: 0; left: 0; }
}

/* ---------- Work, dark ---------- */
.work-dark { background: var(--ink-850); overflow: hidden; isolation: isolate; }
.work-dark__glow { width: 55vw; height: 40vw; max-width: 820px; top: 4%; left: -14%; opacity: 0.55; }
.work-dark__grid { position: relative; z-index: 2; display: grid; gap: 1.5rem; }
.wcard {
  display: grid; gap: 1.25rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1rem 1rem 1.6rem;
  transition: border-color 0.35s var(--ease), transform 0.4s var(--ease);
}
.wcard:hover { border-color: rgba(36, 107, 253, 0.34); transform: translateY(-3px); }
.wcard__media { display: block; border-radius: var(--r-md); overflow: hidden; background: #fff; }
.wcard__media img { width: 100%; display: block; }
/* Every card shows the same window on its project, whether that window holds a
   single screenshot or a comparison, so a row of three stays level. The source
   images have different proportions; the card decides, not the file. */
.wcard__media { position: relative; aspect-ratio: 16 / 10; }
.wcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.wcard__media--compare { background: var(--ink-900); }
.wcard__media--compare .compare__viewer {
  position: absolute; inset: 0;
  aspect-ratio: auto; width: 100%; height: 100%;
  border: 0; border-radius: inherit; box-shadow: none;
}
.wcard__media--compare .compare__tag { font-size: 0.66rem; padding: 0.24rem 0.55rem; }
.wcard__media--compare .compare__grip { width: 34px; height: 34px; }
.wcard__hint {
  position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%);
  z-index: 3; margin: 0; padding: 0.28rem 0.7rem;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #fff; background: rgba(8, 11, 16, 0.72);
  border-radius: 999px; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.wcard__media--compare:has(.is-used) .wcard__hint,
.compare__viewer.is-used ~ .wcard__hint { opacity: 0; }
.wcard__body { padding-inline: 0.5rem; }
.wcard__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.wcard__meta { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted-dim); margin-bottom: 0.9rem; }
.wcard__summary { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin-bottom: 1.1rem; }
@media (min-width: 1000px) { .work-dark__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Ongoing support ---------- */
.ongoing { background: var(--ink-900); }
.ongoing__grid { display: grid; gap: 1.25rem; }
.plan {
  padding: clamp(1.6rem, 2.8vw, 2.25rem);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  position: relative;
}
.plan--featured {
  background: linear-gradient(178deg, rgba(36, 107, 253, 0.14), transparent 70%), var(--ink-700);
  border-color: rgba(36, 107, 253, 0.4);
}
.plan__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.plan__line { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin-bottom: 1.4rem; min-height: 3em; }
.plan__list { list-style: none; margin: 0; padding: 1.3rem 0 0; display: grid; gap: 0.6rem; border-top: 1px solid var(--line); }
.plan__list li { position: relative; padding-left: 1.3rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.plan__list li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
.ongoing__note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
  font-size: var(--fs-sm); color: var(--muted);
}
@media (min-width: 900px) { .ongoing__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* ---------- Closing CTA over the horizon art ---------- */
.horizon { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-900); }
.horizon__art { position: absolute; inset: 0; z-index: 0; }
.horizon__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
/* The art is busy, so the copy gets its own ground rather than relying on luck. */
.horizon__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 11, 16, 0.92) 0%, rgba(8, 11, 16, 0.72) 45%, rgba(8, 11, 16, 0.9) 100%),
    radial-gradient(70% 60% at 50% 50%, rgba(8, 11, 16, 0.55), transparent 75%);
}
.horizon__inner { position: relative; z-index: 2; }
.horizon__content { max-width: 44rem; text-align: center; margin-inline: auto; }
.horizon__heading { margin-bottom: 1.2rem; }
.horizon__body { margin: 0 auto 2.2rem; }
.horizon__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* Five process steps rather than four. */
@media (min-width: 860px) { .process__list { grid-template-columns: repeat(5, 1fr); gap: 1.75rem; } }

/* On the intro page the header must not occupy layout space, or the sticky
   intro starts below a strip of page background. Fixed behaves the same as
   sticky once scrolling begins, and takes the strip away. */
.has-intro .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
}

/* A .glow is absolutely positioned with z-index 0. Inside a stacking context
   that puts it ABOVE static content, so any container holding text next to one
   has to be positioned too or the blur washes over the headings. */
.services-detail > .page,
.work-dark > .page-wide,
.paths > .page,
.ongoing > .page {
  position: relative;
  z-index: 2;
}

/* Keep the arrow on the baseline of every card regardless of how far the
   question wraps. */
.path-card { align-content: start; }
.path-card__go { margin-top: auto; }

.site-footer__tagline {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--white);
}
.site-footer__tagline + .site-footer__blurb { margin-top: 0.5rem; }

/* The supplied blue light art, kept very low so the hero copy stays the
   brightest thing on the screen. */
.enter__light { position: absolute; inset: 0; z-index: 0; }
.enter__light img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }

/* Workspace photograph behind the ongoing support section, heavily scrimmed so
   it reads as texture rather than as an image competing with the text. */
.ongoing { position: relative; overflow: hidden; isolation: isolate; }
.ongoing__art { position: absolute; inset: 0; z-index: 0; }
.ongoing__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0.22; }
.ongoing__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, var(--ink-900) 0%, rgba(8, 11, 16, 0.86) 35%, rgba(8, 11, 16, 0.94) 100%);
}

/* ---------- Services mega menu ---------- */
.nav__menu--mega { width: min(56rem, 92vw); }
.nav__mega {
  display: grid;
  gap: 1.75rem;
  padding: 1.6rem 1.75rem;
  background: rgba(17, 22, 29, 0.97);
  backdrop-filter: blur(22px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  animation: menu-in 0.28s var(--ease-out);
}
.nav__mega-title {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 0.35rem;
}
.nav__mega-blurb { font-size: var(--fs-xs); color: var(--muted-dim); line-height: 1.5; margin-bottom: 0.9rem; }
.nav__mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.nav__mega-link {
  display: block; padding: 0.5rem 0.6rem; margin-inline: -0.6rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__mega-link:hover, .nav__mega-link:focus-visible { background: rgba(36, 107, 253, 0.16); }
.nav__mega-link.is-current { color: var(--blue-light); }
@media (min-width: 880px) { .nav__mega { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; } }

/* Five footer columns rather than three. */
@media (min-width: 760px) { .site-footer__nav { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .site-footer__nav { grid-template-columns: repeat(5, 1fr); gap: 1.75rem; } }

/* ==========================================================================
   Shared page blocks
   ========================================================================== */

/* Titled groups of short points. Used across every service page. */
.pcols { display: grid; gap: 1.75rem; align-content: start; }
.pcol__title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  letter-spacing: -0.012em; margin-bottom: 0.45rem;
}
.pcol__note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin-bottom: 0.8rem; max-width: 42ch; }
.pcol__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pcol__list li {
  position: relative; padding-left: 1.2rem;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.55;
}
.pcol__list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
@media (min-width: 720px) { .pcols--2, .pcols--3, .pcols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .pcols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .pcols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

/* Numbered tier: one kind of website, one SEO stage, one automation group. */
.tiers { overflow: hidden; isolation: isolate; }
.tiers > .page, .tiers > .page-wide { position: relative; z-index: 2; }
.tiers__glow { width: 55vw; height: 40vw; max-width: 850px; top: 2%; right: -16%; opacity: 0.5; }
.tiers__list { display: grid; gap: clamp(2.75rem, 5vw, 4.5rem); }
.tier {
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.tier__n {
  display: block; font-family: var(--font-display); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0.18em; color: var(--blue-light); margin-bottom: 0.8rem;
}
.tier__kicker {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-dim); margin-bottom: 0.8rem;
}
.tier__heading { margin-bottom: 0.9rem; max-width: 22ch; }
/* Body copy is capped near 70 characters so it stays readable on a wide screen. */
.tier__body { font-size: var(--fs-lead); color: var(--muted); line-height: 1.68; max-width: 68ch; }
.tier__body + .tier__body { margin-top: 0.9rem; }
.tier__head > .link-arrow { margin-top: 1.2rem; }
.tier__note {
  margin-top: 1.1rem; font-size: var(--fs-xs); color: var(--muted-dim);
  line-height: 1.6; max-width: 56ch;
}
@media (min-width: 900px) { .tier { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }

/* Contextual closing band. Lighter than the full cinematic CTA, used to end
   interior pages with one clear next step. */
.cta-band { overflow: hidden; isolation: isolate; background: var(--ink-850); }
.cta-band__glow { width: 55vw; height: 38vw; max-width: 800px; top: -20%; left: 50%; transform: translateX(-50%); opacity: 0.55; }
.cta-band__inner {
  position: relative; z-index: 2;
  display: grid; gap: 1.75rem; align-items: center;
}
.cta-band__heading { max-width: 20ch; }
.cta-band__body { margin-top: 0.9rem; max-width: 60ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.25fr) auto; gap: 3rem; }
  .cta-band__actions { justify-content: flex-end; }
}

/* Frontend / backend explainer. Two plain-language cards, no icons. */
.explain { display: grid; gap: 1.25rem; }
.explain__item {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper-2);
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-xl);
}
.explain__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue-ink); margin-bottom: 0.7rem;
}
.explain__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.25;
  margin-bottom: 0.8rem;
}
.explain__body {
  font-size: var(--fs-body); color: var(--muted-on-light);
  line-height: 1.7; max-width: 62ch; margin-bottom: 1.5rem;
}
.explain .pcols { border-top: 1px solid var(--line-on-light); padding-top: 1.25rem; }
@media (min-width: 900px) { .explain { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.custom-note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
  font-size: var(--fs-sm); color: var(--muted);
}