/* Q4 Workspace: shared site styles */
:root {
  --bg: #000;
  --text: #f2f5f5;
  --muted: #9aa3a3;
  --teal: #2a6b66;
  --teal-deep: #174744;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #6fb8ae;
  --brand: #2a6b66;
  --brand-hover: #337c76;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

html, body { background: var(--bg); color: var(--text); }
html {
  color-scheme: dark;
  scroll-padding-top: 96px;        /* anchors and focused elements clear the fixed header */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(111, 184, 174, 0.15);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus-visible { transform: none; outline: 2px solid var(--accent); outline-offset: 2px; }

body {
  font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
main { flex: 1; display: flex; flex-direction: column; }

/* Flat and full-width at the top; on scroll only the links remain, in a floating glass pill */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 16px;
  transition: padding .45s cubic-bezier(.2, .8, .2, 1);
}

.header__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transition: padding .45s cubic-bezier(.2, .8, .2, 1);
}
/* mobile glass bar; lives on a pseudo-element so the fixed overlay menu isn't trapped by backdrop-filter */
.header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  background: rgba(18, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity .35s ease;
}

.header.is-scrolled { padding-top: 12px; }
.header.is-scrolled .header__inner { padding: 0; }

/* logo and CTA step aside, leaving only the options */
.logo, .header-cta {
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility .3s;
}
.header.is-scrolled .logo,
.header.is-scrolled .header-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.header.is-scrolled .logo { transform: translateX(-12px); }
.header.is-scrolled .header-cta { transform: translateX(12px); }

.logo {
  justify-self: start;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: #fff; }

/* ---------- Nav links ---------- */
.nav { justify-self: center; }

.nav ul {
  position: relative;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  transition: padding .45s cubic-bezier(.2, .8, .2, 1);
}
.nav ul::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: rgba(18, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.header.is-scrolled .nav ul { padding: 6px 8px; }
.header.is-scrolled .nav ul::before { opacity: 1; transform: none; }

.nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, background .2s, padding .45s cubic-bezier(.2, .8, .2, 1);
}
.nav a .underline {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: width .2s;
}
.nav a:hover { color: #fff; }
.nav a:hover .underline { width: 30%; }
.nav a.is-active { color: #fff; }
.nav a.is-active .underline { width: 60%; }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav .mobile-cta { display: none; }

/* ---------- Hamburger ---------- */
.nav-toggle {
  position: relative;
  z-index: 30;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  justify-self: end;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform .25s, opacity .25s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- CTA pill ---------- */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.3);
  transition:
    background .25s ease,
    box-shadow .35s ease,
    transform .35s cubic-bezier(.2, .8, .2, 1);
}
/* light sweep across the pill on hover */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.cta:hover {
  background: var(--brand-hover);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 8px 24px rgba(42, 107, 102, 0.5),
    0 0 0 4px rgba(42, 107, 102, 0.18);
}
.cta:hover::after { transform: translateX(120%); }
.cta:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  flex: 1;
  min-height: max(620px, 100svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 120px 16px 78px;
  overflow: hidden;
}

/* orb stays put; it reacts to the cursor with a flare and "voice" noise (JS) */
.hero__headline { position: relative; }

.orb-stage {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 430px;
  height: 400px;
  margin: -200px 0 0 -215px;
  pointer-events: none;
}

/* grows and brightens when an interactive element is hovered */
.orb-breath {
  position: absolute;
  inset: 0;
  transition:
    transform 1.1s cubic-bezier(.2, .8, .2, 1),
    filter .9s ease;
  will-change: transform, filter;
}
.orb-pulse { position: absolute; inset: 0; }

body[data-orb="strong"] .orb-breath {
  transform: scale(1.16);
  filter: brightness(1.6) saturate(1.3);
}
/* keeps "breathing" while hovered */
body[data-orb="strong"] .orb-pulse { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.orb-wrap {
  position: absolute;
  inset: 0;
  animation: float 9s ease-in-out infinite;
}

.orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    transparent 0deg,
    rgba(38,96,91,0.55) 30deg,
    rgba(34,90,86,0.95) 75deg,
    rgba(30,80,76,0.6) 120deg,
    transparent 155deg,
    transparent 195deg,
    rgba(38,96,91,0.5) 215deg,
    rgba(34,90,86,0.9) 260deg,
    rgba(30,80,76,0.55) 310deg,
    transparent 345deg);
  -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 62%, #000 80%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 38%, #000 62%, #000 80%, transparent 100%);
  filter: blur(34px);
  opacity: 0.9;
  animation: spin 24s linear infinite;
}

.orb-core {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,60,57,0.28), transparent 70%);
  filter: blur(24px);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -18px, 0); }
}

/* content centres in the free space; the trust strip sits at the bottom of the hero */
.hero__content { position: relative; z-index: 1; margin: auto 0; }

.hero__title {
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  /* neutral, position-independent gradient so it never fights the moving orb */
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #c3d0ce 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
}

/* emphasised line gets its own gradient: pure white easing into the orb's teal */
.hero__title strong {
  font-weight: 700;
  letter-spacing: -0.05em;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 45%, #a6d8d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  max-width: 640px;
  margin: 26px auto 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: #b4bdbc;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.hero__actions .cta { height: 48px; padding: 0 26px; font-size: 16px; }

/* secondary ghost pill */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.btn-ghost svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}
.btn-ghost:hover svg { transform: translateX(3px); }
.btn-ghost:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .header__inner { grid-template-columns: 1fr auto; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }

  /* full-screen frosted overlay menu */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 20;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    background: rgba(8, 8, 8, 0.62);
    backdrop-filter: blur(34px) saturate(140%);
    -webkit-backdrop-filter: blur(34px) saturate(140%);
  }
  .nav::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  .nav.open { opacity: 1; visibility: visible; }
  .nav { overscroll-behavior: contain; }

  .nav ul { flex-direction: column; gap: 26px; }
  .header.is-scrolled .nav a { padding: 8px 20px; }
  /* mobile keeps logo + hamburger in a glass bar on scroll (options live in the menu) */
  .header.is-scrolled .header__inner { padding: 6px 6px 6px 16px; }
  .header.is-scrolled .header__inner::before { opacity: 1; }
  .header.is-scrolled .logo { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav ul::before { display: none; }
  .header.is-scrolled .nav ul { padding: 0; }
  .nav a { font-size: 22px; }
  .nav .mobile-cta { display: block; margin-top: 10px; }
  .nav .mobile-cta .cta { color: #fff; font-weight: 700; font-size: 17px; height: 46px; padding: 0 22px; }

  .orb-stage { width: 330px; height: 310px; margin: -155px 0 0 -165px; }
}

body.nav-locked { overflow: hidden; }

/* ---------- Trust strip ---------- */
.trust { position: relative; z-index: 1; padding-top: 48px; }
.trust__label {
  font-size: 14px;
  color: #7d8786;
}
.trust__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 0;
  margin-top: 14px;
}
/* names set as wordmarks: Satoshi bold, tight tracking */
.trust__list li {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #fff;
  opacity: 0.55;
  padding: 0 26px;
  transition: opacity .25s ease;
}
.trust__list li:hover { opacity: 0.95; }
.trust__list li + li { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.trust__list--clone { display: none; }

/* names glide right-to-left as a seamless marquee (six clients no longer fit on one line) */
@media all {
  .trust { width: 100%; }
  .trust__viewport {
    overflow: hidden;
    max-width: 1000px;
    margin: 14px auto 0;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  .trust__track {
    display: flex;
    width: max-content;
    animation: trust-marquee 32s linear infinite;
  }
  .trust:hover .trust__track,
  .trust.is-paused .trust__track { animation-play-state: paused; }
  .trust__list,
  .trust__list--clone {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 0;
    gap: 0;
  }
  .trust__list li {
    white-space: nowrap;
    padding: 0 28px;
  }
  .trust__list li + li { border-left: none; }
  .trust__list li { border-right: 1px solid rgba(255, 255, 255, 0.14); }
}
@keyframes trust-marquee {
  to { transform: translateX(-50%); }
}

@media (max-width: 480px) {
  .trust { padding-top: 40px; }
}

@media (max-width: 480px) {
  /* mobile hero mirrors the original: oversized orb, big headline, first screen holds only the message + CTAs.
     A thin, small trust strip stays visible at the bottom of the first screen. */
  .hero { padding: 0 16px 22px; }
  .hero__content {
    margin: 0;
    min-height: calc(100svh - 84px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 72px;
  }
  .hero__title { font-size: 44px; line-height: 1; text-wrap: balance; }
  .orb-stage { width: 470px; height: 440px; margin: -220px 0 0 -235px; }
  .trust { padding-top: 0; }
  .trust__viewport { margin: 8px -16px 0; }

  /* lighter mobile hero: supporting copy, one compact row of buttons, quieter trust strip */
  .hero__sub {
    max-width: 330px;
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.5;
    color: #a3acab;
  }
  .hero__actions { flex-wrap: nowrap; gap: 8px; margin-top: 30px; }
  .hero__actions .cta,
  .hero__actions .btn-ghost { height: 44px; padding: 0 17px; font-size: 15px; }
  .hero__actions .btn-ghost { gap: 6px; }
  .hero__actions .btn-ghost svg { width: 14px; height: 14px; }

  .trust__label { font-size: 11px; }
  .trust__list li { font-size: 13px; padding: 0 16px; }
}

@media (max-width: 360px) {
  .hero__actions .cta,
  .hero__actions .btn-ghost { padding: 0 13px; font-size: 14px; }
}

/* ---------- About (scroll-revealed statement) ---------- */
.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 140px 16px 150px;
  text-align: center;
}
/* faint teal glow behind the statement, carrying the orb's light down from the hero */
.about::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 42%;
  left: 50%;
  width: min(980px, 140vw);
  height: 560px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 107, 102, 0.22), rgba(42, 107, 102, 0.08) 55%, transparent);
  filter: blur(40px);
  pointer-events: none;
}
/* faint gradient rule closing the section */
.about::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1200px, calc(100% - 32px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.12) 70%, transparent);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #e6ecec;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.badge__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4f9a92, var(--brand) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #eaf6f4;
}

.about__statement {
  max-width: 1000px;
  margin: 32px auto 0;
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
/* port of the Framer "Text_Color_Letters" effect: every character goes #666666 → #FFFFFF as the section scrolls.
   Words are equal slices of the scroll range; characters are equal slices of their word. */
.about__statement .word { white-space: nowrap; }
.about__statement .ch {
  color: #666666;
  transition: color .3s ease-in-out;
}

/* service pills: internal links to each service page */
.services-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
  margin: 40px auto 0;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #cfd6d5;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pill svg { color: var(--accent); flex: none; }
.pill:hover {
  color: #fff;
  background: rgba(111, 184, 174, 0.08);
  border-color: rgba(111, 184, 174, 0.4);
  transform: translateY(-2px);
}
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.about__hook { margin-top: 40px; font-size: 15px; color: #8f9998; }
.about .about__hook + .cta { margin-top: 14px; }
.about .cta { margin-top: 44px; height: 46px; padding: 0 22px 0 24px; }
.cta--arrow { gap: 8px; }
.cta--arrow svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.cta--arrow:hover svg { transform: translateX(3px); }

@media (max-width: 860px) {
  .about { padding: 96px 16px 104px; }
  .about__statement { margin-top: 26px; line-height: 1.25; }
  .about .cta { margin-top: 34px; }
  .services-pills { margin-top: 30px; gap: 8px; }
  .pill { height: 38px; padding: 0 14px 0 11px; font-size: 14px; gap: 7px; }
}

/* ---------- Operations: sticky image + stacked service cards ---------- */
.ops {
  position: relative;
  isolation: isolate;
  overflow-x: clip;   /* contain the photo glow without breaking position: sticky */
  padding: 130px 16px 150px;
}
/* faint dot grid that fades out toward the edges */
.ops::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask: radial-gradient(ellipse 70% 60% at 60% 45%, #000 20%, transparent 75%);
  mask: radial-gradient(ellipse 70% 60% at 60% 45%, #000 20%, transparent 75%);
  pointer-events: none;
}
.ops::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1200px, calc(100% - 32px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.1) 70%, transparent);
}
.ops__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 88px;
  align-items: start;
}

.ops__title {
  text-wrap: balance;
  margin-top: 0;
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: #fff;
}
.ops__title span { display: block; color: #8b9594; }
.ops__lead {
  max-width: 580px;
  margin-top: 26px;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: #a3acab;
}

.ops__cards {
  list-style: none;
  display: grid;
  gap: 22px;
  margin-top: 56px;
}

/* double frame: faint outer ring + tinted inner card */
.frame {
  padding: 8px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.svc {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 19px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(58, 120, 114, 0.22), transparent 60%),
    linear-gradient(180deg, #1c2b2b 0%, #172322 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.svc {
  transition: opacity .5s ease, border-color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ops.is-focus .svc { opacity: .45; }
.ops.is-focus .ops__card.is-active .svc {
  opacity: 1;
  border-color: rgba(111, 184, 174, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(111, 184, 174, 0.08),
    0 18px 50px -12px rgba(42, 107, 102, 0.45);
  transform: translateX(6px);
}

.svc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.svc__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(160deg, #4a9a91 0%, #2a6b66 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.svc__tag {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #d9e0df;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.svc__title {
  margin-top: 26px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.svc__rule {
  width: 220px;
  height: 1px;
  margin: 18px 0 20px;
  background: linear-gradient(90deg, rgba(160, 215, 206, 0.45), transparent);
}
.svc__text {
  font-size: 16px;
  line-height: 1.65;
  color: #9aa5a4;
}
.svc__keys {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
}
.svc__keys span { margin: 0 6px; opacity: .6; }

/* sticky framed photo */
.ops__media {
  position: sticky;
  top: 110px;
}
.ops__media .frame { position: relative; background: rgba(0, 0, 0, 0.35); }
/* soft teal glow behind the photo */
.ops__media::before {
  content: "";
  position: absolute;
  inset: -18% -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 107, 102, 0.4), rgba(42, 107, 102, 0.14) 60%, transparent 80%);
  filter: blur(36px);
  pointer-events: none;
}
/* the halo "breathes" once each time the active card changes */
.ops__media.is-pulsing::before { animation: halo-pulse 1.1s cubic-bezier(.2, .8, .2, 1); }
@keyframes halo-pulse {
  0%   { transform: scale(1);    filter: blur(36px) brightness(1); }
  35%  { transform: scale(1.08); filter: blur(36px) brightness(1.8); }
  100% { transform: scale(1);    filter: blur(36px) brightness(1); }
}
.ops__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 19px;
}
/* teal light line along the bottom edge of the frame */
.ops__media .frame::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 184, 174, 0.8), transparent);
}

/* progressive blur at the top and bottom viewport edges while the cards scroll (only over this section) */
.edge-blur {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 45;
  height: 130px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.edge-blur--top { top: 0; height: 110px; }
.edge-blur--bottom { bottom: 0; }
.edge-blur i { position: absolute; inset: 0; }
.edge-blur i:nth-child(1) { backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.edge-blur i:nth-child(2) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.edge-blur i:nth-child(3) { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.edge-blur--bottom i:nth-child(1) { -webkit-mask: linear-gradient(to bottom, transparent, #000 45%); mask: linear-gradient(to bottom, transparent, #000 45%); }
.edge-blur--bottom i:nth-child(2) { -webkit-mask: linear-gradient(to bottom, transparent 35%, #000 75%); mask: linear-gradient(to bottom, transparent 35%, #000 75%); }
.edge-blur--bottom i:nth-child(3) { -webkit-mask: linear-gradient(to bottom, transparent 65%, #000); mask: linear-gradient(to bottom, transparent 65%, #000); }
.edge-blur--top i:nth-child(1) { -webkit-mask: linear-gradient(to top, transparent, #000 45%); mask: linear-gradient(to top, transparent, #000 45%); }
.edge-blur--top i:nth-child(2) { -webkit-mask: linear-gradient(to top, transparent 35%, #000 75%); mask: linear-gradient(to top, transparent 35%, #000 75%); }
.edge-blur--top i:nth-child(3) { -webkit-mask: linear-gradient(to top, transparent 65%, #000); mask: linear-gradient(to top, transparent 65%, #000); }
body.edge-blur-on .edge-blur { opacity: 1; }

@media (max-width: 960px) {
  .ops { padding: 96px 16px 110px; }
  .ops__inner { grid-template-columns: 1fr; gap: 0; }
  .ops__content { display: contents; }
  .ops__head { order: 1; }
  .ops__media { position: relative; top: auto; order: 2; margin-top: 40px; }
  .ops.is-focus .ops__card.is-active .svc { transform: none; }
  .ops__cards { order: 3; margin-top: 22px; }
  .ops__media img { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .svc { padding: 24px 22px; }
  .svc__icon { width: 46px; height: 46px; }
  .svc__title { font-size: 18px; margin-top: 22px; }
  .svc__rule { width: 160px; }
  .svc__text { font-size: 15px; }
  .svc__tag { font-size: 14px; }
  .svc__keys { font-size: 13px; }
  .edge-blur { height: 90px; }
  .edge-blur--top { height: 80px; }
}

/* ---------- Pricing: lit panel, service cards, service marquee ---------- */
.pricing { padding: 120px 16px 0; }
.pricing__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1240px;
  margin: 0 auto;
  padding: 110px 32px 72px;
  border-radius: 36px;
  background: #070808;
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
}
/* teal light pouring in from the top */
.pricing__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60px;
  left: 50%;
  width: 1300px;
  height: 760px;
  transform: translateX(-50%);
  background:
    conic-gradient(from 0deg at 50% 0%,
      transparent 142deg,
      rgba(80, 170, 158, 0.55) 148deg, transparent 153deg,
      rgba(80, 170, 158, 0.40) 158deg, transparent 162deg,
      rgba(80, 170, 158, 0.62) 167deg, transparent 172deg,
      rgba(80, 170, 158, 0.48) 177deg, transparent 181deg,
      rgba(80, 170, 158, 0.60) 186deg, transparent 191deg,
      rgba(80, 170, 158, 0.38) 196deg, transparent 201deg,
      rgba(80, 170, 158, 0.52) 206deg, transparent 211deg,
      rgba(80, 170, 158, 0.34) 214deg, transparent 218deg),
    radial-gradient(ellipse 50% 42% at 50% 0%, rgba(70, 150, 140, 0.65), rgba(42, 107, 102, 0.2) 55%, transparent 80%);
  filter: blur(10px);
  -webkit-mask: linear-gradient(#000 25%, transparent 72%);
  mask: linear-gradient(#000 25%, transparent 72%);
  pointer-events: none;
  animation: rays-breathe 9s ease-in-out infinite;
}
@keyframes rays-breathe {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}
/* dot texture across the panel */
.pricing__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask: linear-gradient(transparent, #000 25%, #000 70%, transparent);
  mask: linear-gradient(transparent, #000 25%, #000 70%, transparent);
  pointer-events: none;
}

.pricing__title {
  text-wrap: balance;
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
}
.pricing__title span { display: block; color: #8b9594; }
.pricing__lead {
  max-width: 520px;
  margin: 22px auto 0;
  font-size: 17px;
  line-height: 1.55;
  color: #a3acab;
  text-wrap: balance;
}
.pricing__cta { margin-top: 30px; }
.pricing .cta { height: 46px; padding: 0 22px 0 24px; }
.pricing__cta-note { margin-top: 12px; font-size: 13px; color: #7d8786; }

.plans {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 18px;
  margin-top: 64px;
  text-align: left;
}
/* subgrid: each content row (icon, name, tagline, rule, text, image, price) is shared
   across all cards, so images and prices line up even when one card has an extra note */
.plans > li {
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin-bottom: 18px;
}
.plan {
  position: relative;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: 24px 22px 22px;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px) 0 0 / 16px 16px,
    linear-gradient(180deg, #0d0f0f, #090a0a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
/* teal highlight on the top edge */
.plan::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 184, 174, 0.7), transparent);
}
.plan:hover {
  border-color: rgba(111, 184, 174, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -20px rgba(42, 107, 102, 0.5);
}
.plan:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.plan--featured {
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px) 0 0 / 16px 16px,
    radial-gradient(120% 70% at 50% 0%, rgba(58, 130, 122, 0.22), transparent 70%),
    linear-gradient(180deg, #0f1414, #090a0a);
  border-color: rgba(111, 184, 174, 0.32);
  box-shadow: 0 24px 60px -24px rgba(42, 107, 102, 0.55);
}
.plan--featured::before { left: 8%; right: 8%; background: linear-gradient(90deg, transparent, rgba(160, 225, 214, 0.95), transparent); }
.plan__badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #eaf6f4;
  background: linear-gradient(160deg, #3f8d85, var(--brand));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(42, 107, 102, 0.45);
}
.plan__top { display: flex; align-items: flex-start; justify-content: space-between; }
.plan__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #eaf6f4;
  background: radial-gradient(circle at 35% 30%, #4f9a92, var(--brand) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 4px rgba(42, 107, 102, 0.15);
}
.plan__name {
  margin-top: 22px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.plan__tagline { margin-top: 4px; font-size: 15px; color: #9aa5a4; }
.plan__rule {
  height: 1px;
  margin: 20px 0 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 80%);
}
/* same reserved height (4 lines) in every card so images and prices line up */
.plan__text {
  min-height: calc(1.6em * 4);
  font-size: 15px;
  line-height: 1.6;
  color: #8f9998;
  text-wrap: pretty;
}
@media (max-width: 640px) { .plan__text { min-height: 0; } }
.plan__media { position: relative; padding-top: 20px; align-self: end; }
/* common grade so stock photos and the site screenshot read as one family in the site palette */
.plan__media::after {
  content: "";
  position: absolute;
  inset: 20px 0 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(42, 107, 102, 0.16), rgba(6, 18, 18, 0.34));
  pointer-events: none;
  transition: opacity .35s ease;
}
.plan:hover .plan__media::after { opacity: .55; }
.plan__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  filter: brightness(.86) saturate(.7) contrast(1.04);
  transition: filter .35s ease;
}
.plan:hover .plan__media img { filter: brightness(.96) saturate(.85) contrast(1.04); }

/* price footer: aligned across all cards */
.plan__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.plan__price { display: flex; flex-direction: column; gap: 4px; }
.plan__from {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d8786;
}
.plan__amount {
  display: inline-flex;
  align-items: flex-start;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
/* currency symbol and cents set small and raised, so the main figure leads */
.plan__cur,
.plan__cents {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: #cfd6d5;
}
.plan__cur { margin-right: 2px; }
.plan__cents { margin-left: 1px; }
.plan__per {
  align-self: flex-end;
  white-space: nowrap;
  margin-left: 5px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: #8f9998;
}
.plan__mark { margin-left: 1px; font-size: 11px; color: var(--accent); vertical-align: super; line-height: 0; }
.plans__footnote {
  margin-top: 22px;
  font-size: 13px;
  text-align: center;
  color: #7d8786;
}
.plans__footnote span { color: var(--accent); }
.plans__footnote--tight { margin-top: 6px; }
.plan__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 3px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: #aeb7b6;
  transition: color .3s ease;
}
.plan__action svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.plan:hover .plan__action { color: var(--accent); }
.plan:hover .plan__action svg { transform: translateX(3px); }

.plans__also {
  margin-top: 14px;
  font-size: 14px;
  text-align: center;
  color: #8f9998;
}
.plans__also a { color: var(--accent); text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(111, 184, 174, 0.35); }
.plans__also a:hover { border-bottom-color: var(--accent); }

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pricing { padding-top: 90px; }
  .pricing__panel { padding: 80px 18px 52px; border-radius: 28px; }
  .pricing__panel::before { width: 820px; height: 560px; }
  .plans { grid-template-columns: 1fr; margin-top: 48px; }
}

/* ---------- Process: scroll-filled timeline ---------- */
.process {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 150px 16px 40px;
  text-align: center;
}
/* teal glow behind the heading */
.process::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 40px;
  left: 50%;
  width: min(900px, 150vw);
  height: 460px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 107, 102, 0.42), rgba(42, 107, 102, 0.12) 55%, transparent);
  filter: blur(30px);
  pointer-events: none;
}
.process__title {
  text-wrap: balance;
  margin-top: 26px;
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
}
.process__title span { display: block; color: #8b9594; }
.process__lead {
  max-width: 540px;
  margin: 22px auto 0;
  font-size: 17px;
  line-height: 1.55;
  color: #a3acab;
  text-wrap: balance;
}

.steps {
  --gap: 56px;
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  max-width: 1100px;
  margin: 90px auto 0;
  text-align: left;
}
/* connecting line between first and last node; geometry set from JS (--x1/--y1/--x2/--y2) */
.steps__line {
  position: absolute;
  left: var(--x1, 0);
  top: var(--y1, 0);
  width: calc(var(--x2, 0px) - var(--x1, 0px));
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  display: none;
}
.steps.is-ready .steps__line { display: block; }
.steps.is-vertical .steps__line {
  width: 2px;
  height: calc(var(--y2, 0px) - var(--y1, 0px));
  margin: 0 0 0 -1px;
}
.steps__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2a6b66, #6fb8ae);
  box-shadow: 0 0 14px rgba(111, 184, 174, 0.55);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
}
.steps.is-vertical .steps__fill {
  background: linear-gradient(180deg, #2a6b66, #6fb8ae);
  transform: scaleY(var(--progress, 0));
  transform-origin: center top;
}

.step { position: relative; }
.step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #7f8a89;
  background: #0e1716;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 6px #000;   /* masks the line behind the node */
  transition: color .5s ease, background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.step.is-active .step__node {
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #4f9a92, var(--brand) 72%);
  border-color: rgba(160, 225, 214, 0.45);
  box-shadow: 0 0 0 6px #000, 0 0 0 7px rgba(111, 184, 174, 0.25), 0 10px 30px rgba(42, 107, 102, 0.6);
}
.step__num {
  display: block;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #5f6a69;
  transition: color .5s ease;
}
.step.is-active .step__num { color: var(--accent); }
.step__title {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.step__text {
  max-width: 320px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #9aa5a4;
}
/* before JS runs (or without it) everything stays fully visible */
.steps.is-ready .step:not(.is-active) .step__title,
.steps.is-ready .step:not(.is-active) .step__text { opacity: .55; }
.step__title, .step__text { transition: opacity .5s ease; }

@media (max-width: 860px) {
  .process { padding: 110px 16px 20px; }
  .steps {
    grid-template-columns: 1fr;
    gap: 44px;
    max-width: 520px;
    margin-top: 64px;
  }
  .step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 22px;
  }
  .step__node { grid-row: 1 / span 3; }
  .step__num { margin-top: 2px; }
  .step__title { font-size: 21px; }
  .step__text { max-width: none; font-size: 15px; }
}

/* ---------- Comparison: Q4 vs hiring separately ---------- */
.compare {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 150px 16px 40px;
  text-align: center;
}
.compare::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 45%;
  left: 62%;
  width: min(720px, 120vw);
  height: 520px;
  transform: translate(-50%, -30%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 107, 102, 0.26), transparent 75%);
  filter: blur(40px);
  pointer-events: none;
}
.compare__title {
  text-wrap: balance;
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
}
.compare__title span { display: block; color: #8b9594; }
.compare__lead {
  max-width: 560px;
  margin: 22px auto 0;
  font-size: 17px;
  line-height: 1.55;
  color: #a3acab;
  text-wrap: balance;
}

.cmp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.15fr);
  max-width: 1000px;
  margin: 64px auto 0;
  text-align: left;
}
.cmp__row { display: contents; }
/* elevated highlight behind the Q4 column (absolutely positioned grid child: takes no cells) */
.cmp__hl {
  position: absolute;
  grid-column: 3;
  grid-row: 1 / 8;   /* header + 6 rows (implicit rows, so -1 would not reach them) */
  inset: -8px 0;
  border-radius: 22px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(58, 130, 122, 0.25), transparent 70%),
    linear-gradient(180deg, #101818, #0b0f0f);
  border: 1px solid rgba(111, 184, 174, 0.3);
  box-shadow: 0 30px 70px -30px rgba(42, 107, 102, 0.6);
}
.cmp__hl::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160, 225, 214, 0.9), transparent);
}
.cmp__cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 16px 24px;
  font-size: 16px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cmp__row:last-child .cmp__cell { border-bottom: none; }
.cmp__row--head .cmp__cell { min-height: 64px; border-bottom-color: rgba(255, 255, 255, 0.1); }
.cmp__crit { padding-left: 0; font-weight: 500; color: #c9d1d0; }
.cmp__rest { color: #7f8988; }
.cmp__q4 { color: #fff; font-weight: 500; border-bottom-color: rgba(111, 184, 174, 0.14); }
.cmp__head-rest { font-size: 15px; font-weight: 500; color: #7f8988; }
.cmp__head-q4 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.cmp__head-q4 b { color: var(--accent); font-weight: 700; }
.cmp__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.cmp__rest .cmp__icon { color: #6b7473; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.cmp__q4 .cmp__icon { color: #eaf6f4; background: radial-gradient(circle at 35% 30%, #4f9a92, var(--brand) 72%); box-shadow: 0 0 12px rgba(111, 184, 174, 0.35); }
.cmp__label { display: none; }

@media (max-width: 760px) {
  .compare { padding: 110px 16px 20px; }
  .cmp { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 44px; }
  .cmp__hl, .cmp .cmp__row.cmp__row--head { display: none; }
  .cmp__row {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 18px;
    background: #0b0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .cmp__cell { min-height: 0; padding: 0; border: none !important; font-size: 15px; }
  .cmp__crit { font-size: 13px; color: #8f9998; }
  .cmp__q4 {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(42, 107, 102, 0.16);
    border: 1px solid rgba(111, 184, 174, 0.25) !important;
  }
  .cmp__rest { padding: 0 14px; }
  .cmp__label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7473;
  }
  .cmp__q4 .cmp__label { color: var(--accent); }
  .cmp__txt { display: flex; flex-direction: column; gap: 2px; }
}

/* ---------- Testimonials: one featured quote + two supporting ---------- */
.voices {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 150px 16px 40px;
  text-align: center;
}
.voices::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 60%, #000 15%, transparent 75%);
  mask: radial-gradient(ellipse 60% 55% at 50% 60%, #000 15%, transparent 75%);
  pointer-events: none;
}
.voices::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 55%;
  left: 35%;
  width: min(760px, 130vw);
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 107, 102, 0.24), transparent 75%);
  filter: blur(40px);
  pointer-events: none;
}
.voices__title {
  margin-top: 26px;
  text-wrap: balance;
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
}
.voices__title span { display: block; color: #8b9594; }
.voices__lead {
  max-width: 520px;
  margin: 22px auto 0;
  font-size: 17px;
  line-height: 1.55;
  color: #a3acab;
  text-wrap: balance;
}

.quotes {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
  max-width: 1100px;
  margin: 64px auto 0;
  text-align: left;
}
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, #0d0f0f, #090a0a);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.quote--featured {
  grid-row: 1 / span 2;
  padding: 40px;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(58, 130, 122, 0.22), transparent 65%),
    linear-gradient(180deg, #0f1414, #090a0a);
  border-color: rgba(111, 184, 174, 0.25);
  box-shadow: 0 30px 70px -30px rgba(42, 107, 102, 0.55);
}
.quote--featured::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160, 225, 214, 0.9), transparent);
}
.quote__service {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}
.quote__service::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(111, 184, 174, 0.8);
}
.quote__mark { margin-top: 26px; color: var(--brand); }
.quote__text {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: #8f9998;
  text-wrap: pretty;
}
.quote--featured .quote__text {
  margin-top: 18px;
  font-size: clamp(22px, 2.7vw, 35px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.025em;
}
.quote__text strong { font-weight: inherit; color: #fff; }
.quote__who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
}
.quote--featured .quote__who { padding-top: 40px; }
.quote__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #eaf6f4;
  background: radial-gradient(circle at 35% 30%, #4f9a92, var(--brand) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 4px rgba(42, 107, 102, 0.15);
}
.quote--featured .quote__avatar { width: 52px; height: 52px; font-size: 17px; }
/* bottom row under the featured quote: Linda's card spans the wide column */
.quote--wide { grid-column: 1; }
/* closing card spans both columns */
.quote--full { grid-column: 1 / -1; }
.quote--full .quote__text { max-width: 820px; }
/* single rating summary under the heading (replaces per-card stars) */
.voices__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: #cfd6d5;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.voices__stars { display: inline-flex; gap: 2px; color: #f2c14e; }
a.voices__rating { text-decoration: none; transition: border-color .25s ease, background .25s ease; }
a.voices__rating:hover { border-color: rgba(111, 184, 174, 0.4); background: rgba(111, 184, 174, 0.08); }
a.voices__rating:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.voices__read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--accent);
  font-weight: 500;
}
.voices__read svg { transition: transform .3s ease; }
a.voices__rating:hover .voices__read svg { transform: translateX(3px); }
/* supporting quotes: plain grid cells on desktop */
.quotes__rest { display: contents; }
/* carousel dots (mobile only) */
.quotes__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.quotes__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.quotes__dot[aria-current="true"] { width: 22px; background: var(--accent); }
.quotes__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.quotes__toggle {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -7px 0 0 6px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #cfd6d5;
  cursor: pointer;
}
.quotes__toggle:hover { border-color: var(--accent); color: #fff; }
.quotes__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quote__name { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.quote__role { display: block; margin-top: 2px; font-size: 14px; color: #8f9998; }

@media (max-width: 860px) {
  .voices { padding: 110px 16px 20px; }
  .quotes { grid-template-columns: 1fr; margin-top: 44px; }
  .quote--featured { grid-row: auto; padding: 28px; }
  .quote--wide, .quote--full { grid-column: auto; }
  /* supporting quotes become a horizontal swipe carousel */
  .quotes__rest {
    display: flex;
    gap: 24px;               /* neighbours sit fully outside the visible area */
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .quotes__rest::-webkit-scrollbar { display: none; }
  .quotes__rest .quote {
    flex: 0 0 100%;
    scroll-snap-align: center;
    justify-content: center;   /* spare height is split above/below instead of a gap inside */
  }
  .quotes__rest .quote__who { margin-top: 0; padding-top: 24px; }
  .quotes__dots { display: flex; }
  .quote--featured .quote__who { padding-top: 28px; }
  .quote { padding: 24px; }
  .quote__text { font-size: 16px; }
}

/* ---------- FAQ: sticky heading + exclusive accordion ---------- */
.faq {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 150px 16px 150px;
}
.faq::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 40%;
  left: 22%;
  width: min(760px, 130vw);
  height: 620px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 107, 102, 0.22), transparent 75%);
  filter: blur(40px);
  pointer-events: none;
}
.faq__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 72px;
  align-items: start;
}
.faq__head { position: sticky; top: 120px; }
.faq__title {
  text-wrap: balance;
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
}
.faq__title span { display: block; color: #8b9594; }
.faq__lead {
  max-width: 380px;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.55;
  color: #a3acab;
}
.faq__lead a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(111, 184, 174, 0.4); }
.faq__lead a:hover { border-bottom-color: var(--accent); }

.faq__list { display: grid; gap: 12px; }
.faq__item {
  border-radius: 18px;
  background: #0b0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color .3s ease, background .3s ease;
}
.faq__item[open] {
  background: linear-gradient(180deg, #0f1414, #0b0d0d);
  border-color: rgba(111, 184, 174, 0.28);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 18px; }
/* plus that turns into a minus */
.faq__icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background .3s ease, border-color .3s ease;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.6px;
  border-radius: 2px;
  background: #cfd6d5;
  transform: translate(-50%, -50%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s ease;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--brand); border-color: transparent; }
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after { background: #fff; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__body { overflow: hidden; }
.faq__a {
  padding: 0 24px 22px;
  font-size: 16px;
  line-height: 1.65;
  color: #9aa5a4;
}

@media (max-width: 860px) {
  .faq { padding: 110px 16px 110px; }
  .faq__inner { grid-template-columns: 1fr; gap: 36px; }
  .faq__head { position: static; }
  .faq__q { padding: 18px 18px; font-size: 16px; }
  .faq__a { padding: 0 18px 18px; font-size: 15px; }
}

/* ---------- Closing CTA (#contact): the hero orb returns ---------- */
.closing {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 170px 16px 180px;
  text-align: center;
}
.closing__headline { position: relative; }
.closing .orb-stage { z-index: -1; }
.closing__title {
  text-wrap: balance;
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #fff;
}
.closing__title strong {
  display: block;
  font-weight: 700;
  letter-spacing: -0.05em;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 45%, #a6d8d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.closing__lead {
  max-width: 520px;
  margin: 26px auto 0;
  font-size: 18px;
  line-height: 1.55;
  color: #b4bdbc;
  text-wrap: balance;
}
.closing__actions { margin-top: 34px; }
.closing .cta { height: 50px; padding: 0 26px 0 28px; font-size: 16px; }
.closing__alt { margin-top: 16px; font-size: 14px; color: #7d8786; }
.closing__alt a { color: #cfd6d5; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.closing__alt a:hover { color: #fff; border-bottom-color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 16px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -160px;
  left: 50%;
  width: 700px;
  height: 320px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 107, 102, 0.14), transparent 75%);
  filter: blur(30px);
  pointer-events: none;
}
.site-footer__inner { max-width: 1168px; margin: 0 auto; }
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.7fr));
  gap: 40px;
}
.site-footer .logo { font-size: 22px; }
.site-footer__tagline { margin-top: 16px; font-size: 16px; font-weight: 500; color: #cfd6d5; }
.site-footer__desc { max-width: 340px; margin-top: 10px; font-size: 15px; line-height: 1.6; color: #7d8786; }
.site-footer__col h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}
.site-footer__col ul { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #8f9998;
  text-decoration: none;
  transition: color .2s ease;
}
.site-footer__col a:hover { color: #fff; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 14px;
  color: #6b7473;
}
.site-footer__legal { display: flex; gap: 22px; }
.site-footer__legal a { color: #8f9998; text-decoration: none; }
.site-footer__legal a:hover { color: #fff; }

@media (max-width: 860px) {
  .closing { padding: 120px 16px 130px; }
  .closing__lead { font-size: 16px; }
  .site-footer { padding: 56px 16px 28px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb, .orb-wrap, .orb-pulse { animation: none !important; }
  .trust__track { animation: none !important; width: auto; }
  .pricing__panel::before { animation: none; }
  .trust__list { flex-wrap: wrap; justify-content: center; gap: 8px 0; }
  .trust__list--clone { display: none !important; }
  .trust__viewport { -webkit-mask: none; mask: none; }
  .about__statement .ch { color: #fff !important; }
  .ops.is-focus .svc { opacity: 1; transform: none !important; }

  .step__node, .step__title, .step__text, .step__num { transition: none; }
}

/* ---------- Services dropdown ---------- */
.nav__has-menu { position: relative; }
.nav__drop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px 15px;   /* matches the links' reserved underline space so the labels line up */
  border: none;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, padding .45s cubic-bezier(.2, .8, .2, 1);
}
.header.is-scrolled .nav__drop { padding: 8px 14px 15px; }
.nav__drop svg { transition: transform .25s ease; }
.nav__drop:hover,
.nav__has-menu.is-open .nav__drop,
.nav__has-menu:has(a[aria-current="page"]) .nav__drop { color: #fff; }
.nav__has-menu.is-open .nav__drop svg { transform: rotate(180deg); }
.nav__drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav .nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 60;
  display: grid;
  gap: 2px;
  width: 300px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(12, 15, 15, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility .2s;
}
/* invisible bridge so the menu stays open while the pointer travels down to it */
.nav .nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__has-menu.is-open .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.header.is-scrolled .nav ul.nav__menu { padding: 8px; }
.nav .nav__menu a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 14px;
  border-radius: 12px;
  white-space: normal;
  transition: background .2s ease;
}
.nav .nav__menu a:hover,
.nav .nav__menu a:focus-visible { background: rgba(111, 184, 174, 0.1); outline: none; }
.nav .nav__menu a[aria-current="page"] { background: rgba(111, 184, 174, 0.12); }
.nav__menu-name { font-size: 15px; font-weight: 700; color: #fff; }
.nav__menu-desc { font-size: 13px; font-weight: 400; color: #8f9998; }

/* mobile overlay: services listed under their label */
@media (max-width: 860px) {
  .nav__has-menu { display: flex; flex-direction: column; align-items: center; }
  .nav__drop { font-size: 22px; padding: 8px 20px 15px; }
  .nav__drop svg { width: 12px; height: 12px; }
  .nav .nav__menu,
  .header.is-scrolled .nav ul.nav__menu {
    position: static;
    display: grid;
    width: auto;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: max-height .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, margin-top .35s ease, visibility .35s;
  }
  /* collapsed by default on mobile; tap "Services" to reveal the four services */
  .nav__has-menu.is-open .nav__menu,
  .header.is-scrolled .nav__has-menu.is-open ul.nav__menu {
    max-height: 240px;
    margin-top: 6px;
    opacity: 1;
    visibility: visible;
    transform: none;   /* the desktop open state centres with translateX(-50%); not wanted in the overlay */
  }
  .nav .nav__menu::before { display: none; }
  .nav .nav__menu a { align-items: center; padding: 6px 12px; }
  .nav__menu-name { font-size: 16px; font-weight: 500; color: #cfd6d5; }
  .nav__menu-desc { display: none; }
}

.site-footer__address { margin-top: 14px; font-style: normal; font-size: 14px; line-height: 1.5; }
.site-footer__address a { color: #8f9998; text-decoration: none; transition: color .2s ease; }
.site-footer__address a:hover { color: #fff; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(760px, calc(100% - 32px));
  padding: 16px 18px 16px 22px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: rgba(12, 16, 16, 0.94);
  border: 1px solid rgba(111, 184, 174, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  animation: cookie-in .45s cubic-bezier(.2, .8, .2, 1);
}
.cookie-banner__text { flex: 1; font-size: 14px; line-height: 1.5; color: #b4bdbc; }
.cookie-banner__text strong { color: #fff; font-weight: 700; }
.cookie-banner__text a { color: var(--accent); }
.cookie-banner__actions { display: flex; gap: 10px; flex: none; }
.cookie-banner .cta, .cookie-banner .btn-ghost { height: 42px; min-width: 104px; justify-content: center; padding: 0 20px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.cookie-banner .cta { border: none; }
@keyframes cookie-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; bottom: 12px; padding: 18px; }
  .cookie-banner__actions > * { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } }
.site-footer__legal button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.site-footer__legal button:hover { color: #fff; }