/* ==========================================================================
   BoltX design system
   Values are lifted verbatim from the BoltX UI template so the rendered
   pages match the source design pixel for pixel.
   ========================================================================== */

:root {
  --ink: #101828;
  --ink-deep: #0b1120;
  --ink-line: #344054;
  --orange: #ff7a1a;
  --orange-dark: #e2660d;
  --orange-soft: #ffe3cc;
  --orange-tint: #fff4ec;
  --body: #475467;
  --muted: #667085;
  --muted-light: #98a2b3;
  --line-dark: #d0d5dd;
  --line: #e4e7ec;
  --surface: #f6f7f9;
  --white: #ffffff;
  --ok-bg: #ecfdf3;
  --ok-line: #17b26a;
  --ok-text: #067647;
  --warn: #fdb022;
  --good: #75e0a7;
  --danger: #d92d20;
  --danger-bg: #fef3f2;
  --sora: 'Sora', sans-serif;
  --sans: 'Public Sans', sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--orange); }
::selection { background: var(--orange-soft); }

img { max-width: 100%; display: block; }
input, textarea, select, button { font-family: var(--sans); }

h1, h2, h3, h4, h5 { font-family: var(--sora); color: var(--ink); }

/* ---------- Layout primitives ---------------------------------------- */

.wrap { max-width: 1200px; margin: 0 auto; }
.wrap-narrow { max-width: 820px; margin: 0 auto; }

.section { padding: clamp(56px, 8vw, 100px) clamp(20px, 4vw, 32px); }
.section-top { padding: clamp(56px, 8vw, 100px) clamp(20px, 4vw, 32px) 0; }
.section-bottom { padding: 0 clamp(20px, 4vw, 32px) clamp(56px, 8vw, 100px); }
.section-tight { padding: clamp(44px, 6vw, 64px) clamp(20px, 4vw, 32px); }
.section-surface { background: var(--surface); }
.section-dark { background: var(--ink); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
.split-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
.split-380 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.grid-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.grid-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.grid-290 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 24px; align-items: stretch; }
.grid-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px; }
.grid-230 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px; }
.grid-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; }
.grid-340 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 56px); align-items: start; }

/* ---------- Typography ------------------------------------------------ */

.eyebrow {
  color: var(--orange);
  font-family: var(--sora);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.eyebrow-icon { display: inline-flex; align-items: center; gap: 8px; }

.h-hero {
  font-family: var(--sora);
  color: var(--white);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.h-page {
  font-family: var(--sora);
  color: var(--white);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  margin: 0 0 14px;
}
.h-section {
  font-family: var(--sora);
  color: var(--ink);
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.25;
  font-weight: 700;
  margin: 0;
  text-wrap: pretty;
}
.h-section.on-dark { color: var(--white); }
.h-cta {
  font-family: var(--sora);
  color: var(--ink);
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 700;
  margin: 0 0 10px;
}
.h-card { font-family: var(--sora); color: var(--ink); font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.h-card-lg { font-family: var(--sora); color: var(--ink); font-size: 19px; font-weight: 600; margin: 0 0 10px; }

.lede { font-size: clamp(15px, 2vw, 17px); line-height: 1.7; color: var(--line-dark); margin: 0 0 32px; max-width: 520px; }
.body-lg { font-size: 16px; line-height: 1.7; margin: 0 0 24px; }
.body-md { font-size: 15px; line-height: 1.7; margin: 0; }
.body-sm { font-size: 14px; line-height: 1.65; margin: 0; }

.center-head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 6vw, 64px); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.link-more { color: var(--orange); font-family: var(--sora); font-weight: 600; font-size: 15px; white-space: nowrap; }
.link-more:hover { color: var(--ink); }
.link-sm { color: var(--orange); font-weight: 600; font-size: 14px; }
.link-sm:hover { color: var(--ink); }

/* ---------- Buttons --------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sora);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--orange); color: var(--ink); }
.btn-primary:hover { background: var(--orange-dark); color: var(--ink); }
.btn-ghost-light { border: 1px solid rgba(255,255,255,0.3); color: var(--white); background: transparent; }
.btn-ghost-light:hover { border-color: var(--orange); color: var(--orange); }
.btn-dark { background: var(--ink); color: var(--white); font-size: 16px; padding: 16px 32px; border-radius: 10px; white-space: nowrap; }
.btn-dark:hover { background: var(--ink-deep); color: var(--white); }
.btn-outline { border: 1px solid var(--ink); color: var(--ink); background: transparent; padding: 14px 24px; }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-sm { font-size: 14px; padding: 11px 22px; }
.btn-block { display: block; width: 100%; }

/* ---------- Header ---------------------------------------------------- */

.topbar { background: var(--ink); color: var(--muted-light); font-size: 13px; }
.topbar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 10px clamp(20px, 4vw, 32px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 24px; flex-wrap: wrap;
}
.topbar-contacts { display: flex; gap: 8px 28px; align-items: center; flex-wrap: wrap; }
.topbar-contacts a { color: var(--white); font-weight: 600; }
.topbar-contacts a:hover { color: var(--orange); }
.topbar-social { display: flex; gap: 18px; }
.topbar-social a { color: var(--muted-light); font-size: 12px; letter-spacing: 0.04em; }
.topbar-social a:hover { color: var(--orange); }

/* Floating header: sticks to the top of the viewport once the top bar has
   scrolled away, and gains a shadow so it separates from the page beneath. */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.site-header.is-stuck {
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.10);
  border-bottom-color: transparent;
}
.site-header-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 16px clamp(20px, 4vw, 32px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 32px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--orange); display: grid; place-items: center; flex-shrink: 0; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.brand-name { font-family: var(--sora); font-weight: 700; font-size: 22px; color: var(--ink); }
.brand-name span { color: var(--orange); }

.site-nav { display: flex; gap: 10px clamp(16px, 2.5vw, 30px); align-items: center; font-size: 15px; font-weight: 500; flex-wrap: wrap; }
.site-nav a { color: var(--ink); border-bottom: 2px solid transparent; padding-bottom: 4px; }
.site-nav a:hover { color: var(--orange); }
.site-nav a.is-active { color: var(--orange); border-bottom-color: var(--orange); }

.header-cta {
  background: var(--orange); color: var(--ink);
  font-family: var(--sora); font-weight: 600; font-size: 15px;
  padding: 12px 24px; border-radius: 8px; white-space: nowrap;
}
.header-cta:hover { background: var(--ink); color: var(--white); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 8px; width: 42px; height: 42px; cursor: pointer;
  place-items: center; flex-shrink: 0; padding: 0;
  transition: border-color .15s ease, background .15s ease;
}
.nav-toggle:hover { border-color: var(--orange); background: var(--orange-tint); }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] { border-color: var(--orange); background: var(--orange-tint); }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

@media (max-width: 1100px) {
  .nav-toggle { display: grid; }

  /* Brand on the left, toggle on the right, menu on its own full-width row. */
  .site-header-inner { flex-wrap: wrap; row-gap: 0; column-gap: 16px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .header-cta { display: none; }

  .site-nav {
    order: 3;
    flex: 1 0 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 12px;
    padding-bottom: 16px;
    border-top: 1px solid var(--line);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open { display: flex; animation: nav-drop .18s ease-out; }

  @keyframes nav-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .site-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
    border-top: none;
    font-family: var(--sora);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
  }
  .site-nav a:last-of-type { border-bottom: none; }
  .site-nav a:active { background: var(--orange-tint); }

  /* Active item: an orange rail on the left instead of the desktop underline. */
  .site-nav a.is-active {
    color: var(--orange);
    font-weight: 600;
    border-bottom-color: var(--line);
    box-shadow: inset 3px 0 0 var(--orange);
    padding-left: 14px;
  }

  .site-nav .nav-cta {
    display: block;
    background: var(--orange);
    color: var(--ink);
    font-family: var(--sora);
    font-weight: 600;
    font-size: 16px;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 16px;
    text-align: center;
    border-bottom: none;
  }
  .site-nav .nav-cta:hover { background: var(--orange-dark); color: var(--ink); }

  /* Compact the top bar so the sticky header sits higher on small screens. */
  .topbar-inner { padding: 8px clamp(20px, 4vw, 32px); gap: 4px 20px; }
  .topbar-social { gap: 14px; }
}

@media (min-width: 1101px) { .site-nav .nav-cta { display: none; } }

@media (max-width: 480px) {
  .topbar { font-size: 12px; }
  .topbar-social a { font-size: 11px; }
  .site-header-inner { padding: 12px clamp(20px, 4vw, 32px); }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 20px; }
}

/* ---------- Hero ------------------------------------------------------ */

.hero {
  background: var(--ink);
  background-image:
    radial-gradient(700px 380px at 80% 15%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 70%),
    radial-gradient(500px 300px at 5% 100%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 70%);
  padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 32px);
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats { display: flex; gap: 16px clamp(24px, 4vw, 48px); flex-wrap: wrap; }
.hero-stats .v { font-family: var(--sora); color: var(--white); font-size: 24px; font-weight: 700; }
.hero-stats .k { font-size: 13px; color: var(--body); }

.media-frame { position: relative; }
.media {
  width: 100%; background: var(--surface);
  border: 1px dashed var(--line); border-radius: 16px;
  object-fit: cover; display: block;
}
.media-rounded { border-radius: 16px; }
.media-rect { border-radius: 0; }
.media-circle { border-radius: 50%; }
.media-placeholder {
  display: grid; place-items: center; text-align: center;
  color: var(--muted-light); font-size: 13px; padding: 16px;
  background: var(--surface); border: 1px dashed var(--line);
}
.hero-media { height: clamp(320px, 42vw, 500px); }

.badge-float {
  position: absolute; right: 20px; bottom: 20px;
  background: var(--orange); color: var(--ink); border-radius: 12px;
  padding: 16px 20px; box-shadow: 0 12px 32px rgba(16,24,40,0.3); pointer-events: none;
}
.badge-float.left { left: 16px; right: auto; bottom: 20px; padding: 18px 22px; box-shadow: 0 12px 32px rgba(16,24,40,0.18); }
.badge-float .n { font-family: var(--sora); font-size: 26px; font-weight: 700; }
.badge-float.left .n { font-size: 28px; }
.badge-float .l { font-weight: 600; font-size: 13px; }
.badge-float.left .l { font-size: 14px; }

/* ---------- Page header ----------------------------------------------- */

.page-head {
  background: var(--ink);
  background-image:
    radial-gradient(600px 300px at 85% 20%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 70%),
    radial-gradient(400px 250px at 10% 90%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 70%);
  padding: clamp(56px, 7vw, 88px) clamp(20px, 4vw, 32px);
}
/* Photo banner variant: the uploaded image sits under a dark ink overlay
   (heavier on the left, where the H1 and breadcrumbs live) so the white
   text keeps AA contrast on any photo. The orange radial accents stay in
   the stack, above the photo. Without .has-banner nothing changes. */
.page-head.has-banner {
  background-image:
    radial-gradient(600px 300px at 85% 20%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 70%),
    radial-gradient(400px 250px at 10% 90%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 70%),
    linear-gradient(95deg, rgba(11,17,32,0.82) 0%, rgba(11,17,32,0.78) 55%, rgba(16,24,40,0.72) 100%),
    var(--banner-img);
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}
.crumbs { display: flex; gap: 10px; align-items: center; color: var(--muted-light); font-size: 15px; flex-wrap: wrap; }
.crumbs a { color: var(--orange); font-weight: 500; }
.crumbs a:hover { color: var(--white); }

/* ---------- Cards ----------------------------------------------------- */

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card:hover { border-color: var(--orange); box-shadow: 0 8px 24px rgba(16,24,40,0.08); }
.card-lg { padding: 32px; }
.card-row { display: flex; gap: 18px; align-items: flex-start; }
.card-flat { border: 1px solid var(--line); border-radius: 14px; padding: 28px; background: var(--white); }

.icon-pill {
  width: 48px; height: 48px; border-radius: 12px; background: var(--orange-soft);
  display: grid; place-items: center; flex-shrink: 0;
}
.icon-pill-lg { width: 52px; height: 52px; margin-bottom: 20px; }
.icon-tick {
  width: 24px; height: 24px; border-radius: 50%; background: var(--orange-soft);
  display: grid; place-items: center; flex-shrink: 0;
}

.tick-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.tick-list li { display: flex; gap: 12px; align-items: center; color: var(--ink); font-weight: 500; }

.media-card {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: block;
  background: var(--white); transition: box-shadow .15s ease;
}
.media-card:hover { box-shadow: 0 12px 32px rgba(16,24,40,0.1); }
.media-card .thumb { width: 100%; height: 220px; object-fit: cover; display: block; }
.media-card .thumb-tall { height: 240px; }
.media-card .thumb-team { height: 320px; }
.media-card .meta { padding: 22px 24px; }
.card-kicker {
  color: var(--orange); font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px;
}
.card-title { font-family: var(--sora); color: var(--ink); font-weight: 600; font-size: 18px; }

.tag-float {
  position: absolute; top: 14px; left: 14px;
  background: var(--orange); color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 99px; pointer-events: none;
}

/* ---------- Stats band ------------------------------------------------ */

.stats-band { background: var(--orange); padding: clamp(44px, 6vw, 64px) clamp(20px, 4vw, 32px); }
.stats-band .grid-200 { text-align: center; }
.stats-band .v { font-family: var(--sora); color: var(--ink); font-size: clamp(38px, 5vw, 52px); font-weight: 700; }
.stats-band .v small { font-size: 0.55em; }
.stats-band .k { color: var(--ink); font-weight: 600; font-size: 16px; opacity: 0.75; }

/* ---------- Progress bars --------------------------------------------- */

.bars { display: grid; gap: 26px; }
.bar-head { display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: 600; color: var(--ink); font-size: 15px; }
.bar-track { height: 8px; background: var(--line); border-radius: 99px; }
.bar-fill { height: 8px; background: var(--orange); border-radius: 99px; }

/* ---------- Testimonials ---------------------------------------------- */

.testimonial-dark {
  background: var(--ink);
  background-image: radial-gradient(700px 350px at 85% 100%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 70%);
  padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 32px);
}
.testimonial-dark.top-glow {
  background-image: radial-gradient(700px 350px at 15% 0%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 70%);
  padding: clamp(56px, 8vw, 100px) clamp(20px, 4vw, 32px);
}
.stars { color: var(--orange); letter-spacing: 4px; font-size: 18px; margin-bottom: 24px; }
.stars-sm { color: var(--orange); letter-spacing: 3px; font-size: 16px; margin-bottom: 18px; }
.pull-quote {
  margin: 0 0 28px; color: var(--white); font-family: var(--sora);
  font-size: clamp(19px, 2.6vw, 26px); line-height: 1.5; font-weight: 500; text-wrap: pretty;
}
.byline { display: flex; gap: 14px; align-items: center; }
.byline .n { font-family: var(--sora); color: var(--white); font-weight: 600; font-size: 15px; }
.byline .r { color: var(--muted-light); font-size: 13px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.08); }
.avatar-lg { width: 56px; height: 56px; }

.quote-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 32px; margin: 0;
}
.quote-card blockquote { margin: 0 0 24px; color: var(--line-dark); font-size: 15px; line-height: 1.7; }

/* ---------- CTA banner ------------------------------------------------ */

.cta-banner {
  max-width: 1200px; margin: 0 auto; background: var(--orange);
  border-radius: 20px; padding: clamp(36px, 6vw, 64px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 28px; flex-wrap: wrap;
}
.cta-banner p { color: var(--ink); opacity: 0.8; font-size: 16px; margin: 0; max-width: 520px; }
.cta-banner-dark {
  background: var(--ink);
  background-image: radial-gradient(500px 250px at 90% 0%, color-mix(in srgb, var(--orange) 20%, transparent), transparent 70%);
}
.cta-banner-dark .h-cta { color: var(--white); }
.cta-banner-dark p { color: var(--muted-light); opacity: 1; }

/* ---------- Staff verification --------------------------------------- */

.staff-verify-callout {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  max-width: 1200px; margin: 0 auto; padding: clamp(28px, 5vw, 52px);
  border-radius: 20px; background: var(--ink);
  background-image: radial-gradient(460px 260px at 94% 4%, color-mix(in srgb, var(--orange) 24%, transparent), transparent 70%);
}
.staff-verify-callout::after {
  content: ''; position: absolute; right: -120px; bottom: -170px; width: 360px; aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
  box-shadow: 0 0 0 38px color-mix(in srgb, var(--orange) 4.5%, transparent), 0 0 0 90px color-mix(in srgb, var(--orange) 2.5%, transparent);
  pointer-events: none;
}
.staff-verify-callout > * { position: relative; z-index: 1; min-width: 0; }
.staff-verify-callout .eyebrow { margin-bottom: 12px; }
.staff-verify-callout .h-section { margin-bottom: 14px; }
.staff-verify-callout .body-md { color: var(--line-dark); margin: 0; max-width: 620px; }
.staff-verify-form {
  display: grid; gap: 12px; padding: 22px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 14px;
  background: rgba(255,255,255,.055);
}
.staff-verify-form .field { color: var(--white); }
.staff-verify-fields { display: flex; gap: 10px; align-items: center; }
.staff-verify-fields .input { flex: 1 1 190px; min-width: 0; }
.staff-verify-fields .btn { flex: 0 0 auto; }
.staff-verify-form .hint { margin: 0; color: var(--line-dark); font-size: 13px; line-height: 1.55; }
.staff-verify-link { color: var(--orange); font-family: var(--sora); font-size: 14px; font-weight: 600; }
.staff-verify-link:hover { color: var(--white); }
.staff-verification-result { border-color: rgba(23,178,106,.34); }
.staff-verification-id {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 20px; font-size: 15px;
}

@media (max-width: 680px) {
  .staff-verify-callout { grid-template-columns: 1fr; gap: 24px; }
  .staff-verify-fields { flex-wrap: wrap; }
  .staff-verify-fields .btn { flex: 1 1 100%; }
}

/* ---------- Forms ----------------------------------------------------- */

.field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.input, .textarea, .select {
  border: 1px solid var(--line-dark); border-radius: 8px;
  padding: 13px 16px; font-size: 15px; font-family: var(--sans);
  color: var(--ink); outline: none; width: 100%; background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 12%, transparent); }
.textarea { resize: vertical; line-height: 1.6; }
.form-stack { display: grid; gap: 18px; }

.alert { border-radius: 10px; padding: 16px 20px; font-weight: 500; margin-bottom: 24px; font-size: 15px; }
.alert-ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-text); }
.alert-err { background: var(--danger-bg); border: 1px solid var(--danger); color: #912018; }
.alert ul { margin: 8px 0 0; padding-left: 18px; }

.field-error { color: var(--danger); font-size: 13px; font-weight: 500; }

/* ---------- Contact info card ----------------------------------------- */

.info-card {
  background: var(--ink);
  background-image: radial-gradient(400px 200px at 90% 0%, color-mix(in srgb, var(--orange) 18%, transparent), transparent 70%);
  border-radius: 16px; padding: clamp(28px, 4vw, 40px);
}
.info-card h3 { font-family: var(--sora); color: var(--white); font-size: 20px; font-weight: 600; margin: 0 0 24px; }
.info-list { display: grid; gap: 20px; font-size: 15px; color: var(--line-dark); }
.info-row { display: flex; gap: 14px; align-items: center; }
.info-ico {
  width: 42px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--orange) 15%, transparent);
  display: grid; place-items: center; flex-shrink: 0;
}
.info-row .k { font-size: 12px; color: var(--muted-light); margin-bottom: 2px; }
.info-row .v, .info-row a { color: var(--white); font-weight: 600; }
.info-row a:hover { color: var(--orange); }

/* ---------- Pricing --------------------------------------------------- */

.plan { border: 1px solid var(--line); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; background: var(--white); }
.plan-featured {
  border: 2px solid var(--orange); position: relative;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--orange) 15%, transparent);
}
.plan-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: var(--ink); font-family: var(--sora);
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 99px; white-space: nowrap;
}
.plan h3 { font-family: var(--sora); color: var(--ink); font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.plan .blurb { font-size: 14px; margin: 0 0 22px; }
.plan .price { margin-bottom: 26px; }
.plan .price .amount { font-family: var(--sora); color: var(--ink); font-size: 44px; font-weight: 700; }
.plan .price .per { font-size: 15px; }
.plan-features { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.plan-features li { display: flex; gap: 10px; align-items: center; }
.plan .btn { margin-top: auto; }

/* ---------- FAQ / accordion ------------------------------------------- */

.faq-list { display: grid; gap: 14px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; background: none; border: none; padding: 20px 24px; cursor: pointer;
  text-align: left; font-family: var(--sora); font-size: 16px; font-weight: 600; color: var(--ink);
}
.faq-mark { color: var(--orange); font-size: 20px; flex-shrink: 0; }
.faq-a { padding: 0 24px 20px; font-size: 15px; line-height: 1.7; display: none; }
.faq-item.is-open .faq-a { display: block; }

/* ---------- Chips / filters ------------------------------------------- */

.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.chip {
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font-family: var(--sora); font-weight: 600; font-size: 14px;
  padding: 10px 20px; border-radius: 99px; cursor: pointer; display: inline-block;
}
.chip:hover { color: var(--ink); border-color: var(--orange); }
.chip.is-active { border-color: var(--orange); background: var(--orange); color: var(--ink); }

/* ---------- Process steps --------------------------------------------- */

.step { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.step .n { font-family: var(--sora); color: var(--orange); font-size: 34px; font-weight: 700; margin-bottom: 12px; }
.step h3 { font-family: var(--sora); color: var(--ink); font-size: 17px; font-weight: 600; margin: 0 0 8px; }

/* ---------- Careers / blog / events ----------------------------------- */

.list-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px;
  background: var(--white); display: block;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.list-card:hover { border-color: var(--orange); box-shadow: 0 8px 24px rgba(16,24,40,0.08); }
.pill {
  display: inline-block; background: var(--orange-soft); color: var(--orange-dark);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 99px;
}
.pill-line { background: transparent; border: 1px solid var(--line); color: var(--body); }
.pill-dark { background: var(--ink); color: var(--white); }
.pill-ok { background: var(--ok-bg); color: var(--ok-text); }
.pill-warn { background: #fffaeb; color: #b54708; }
.pill-danger { background: var(--danger-bg); color: #912018; }

.meta-row { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--body); }
.meta-row .dot { color: var(--line-dark); }

.prose { font-size: 16px; line-height: 1.8; color: var(--body); }
.prose h2 { font-size: 26px; margin: 36px 0 14px; }
.prose h3 { font-size: 20px; margin: 30px 0 12px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--orange); font-weight: 500; }
.prose blockquote {
  margin: 24px 0; padding: 16px 24px; border-left: 3px solid var(--orange);
  background: var(--surface); border-radius: 0 8px 8px 0; font-style: italic;
}
.prose img { border-radius: 12px; margin: 20px 0; }

.date-chip {
  background: var(--ink); color: var(--white); border-radius: 12px;
  padding: 14px 18px; text-align: center; flex-shrink: 0; min-width: 78px;
}
.date-chip .d { font-family: var(--sora); font-size: 24px; font-weight: 700; line-height: 1; }
.date-chip .m { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); margin-top: 4px; }

/* ---------- Footer ---------------------------------------------------- */

.site-footer { background: var(--ink-deep); color: var(--muted-light); }
.footer-news-bar {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(36px, 6vw, 56px) clamp(20px, 4vw, 32px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px 32px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-news-bar .t { font-family: var(--sora); color: var(--white); font-size: clamp(20px, 3vw, 24px); font-weight: 700; margin-bottom: 6px; }
.footer-news-bar .b { font-size: 15px; }
.newsletter-form { display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter-form input {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; color: var(--white); padding: 14px 18px; font-size: 15px;
  font-family: var(--sans); width: min(280px, 100%); outline: none;
}
.newsletter-form input::placeholder { color: var(--muted); }
.newsletter-form button {
  background: var(--orange); color: var(--ink); border: none; border-radius: 8px;
  font-family: var(--sora); font-weight: 600; font-size: 15px; padding: 14px 26px; cursor: pointer;
}
.newsletter-form button:hover { background: var(--orange-dark); }

.footer-cols {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(44px, 7vw, 64px) clamp(20px, 4vw, 32px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 40px 48px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.footer-brand .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--orange); display: grid; place-items: center; }
.footer-brand .mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.footer-brand .name { font-family: var(--sora); font-weight: 700; font-size: 20px; color: var(--white); }
.footer-brand .name span { color: var(--orange); }
.site-footer h4 { font-family: var(--sora); color: var(--white); font-size: 16px; font-weight: 600; margin: 0 0 20px; }
.footer-links { display: grid; gap: 12px; font-size: 14px; justify-items: start; }
.footer-links a { color: var(--muted-light); }
.footer-links a:hover { color: var(--orange); }
.footer-contact { display: grid; gap: 12px; font-size: 14px; line-height: 1.6; justify-items: start; }
.footer-contact a { color: var(--line-dark); font-weight: 500; }
.footer-contact a:hover { color: var(--orange); }
.footer-social { display: flex; gap: 16px; font-size: 12px; letter-spacing: 0.04em; }
.footer-social a { color: var(--muted-light); }
.footer-social a:hover { color: var(--orange); }
.footer-news { display: grid; gap: 18px; }
.footer-news a { display: flex; gap: 14px; align-items: center; }
.footer-news img, .footer-news .ph { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.06); }
.footer-news .d { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.footer-news .t { color: var(--line-dark); font-size: 14px; font-weight: 500; line-height: 1.5; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-bottom-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 32px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 24px; flex-wrap: wrap; font-size: 13px;
}
.footer-bottom-inner a { color: var(--muted-light); }
.footer-bottom-inner a:hover { color: var(--orange); }

/* ---------- Partners -------------------------------------------------- */

.partners { border-top: 1px solid var(--line); padding-top: 56px; }
.partners .t { text-align: center; font-family: var(--sora); color: var(--ink); font-weight: 600; font-size: 16px; margin-bottom: 36px; }
.partners .row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px 32px; flex-wrap: wrap; color: var(--muted-light);
  font-family: var(--sora); font-size: 20px;
}

/* ---------- Floating widgets ------------------------------------------ */

.widget-dock {
  position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 12px;
}
.widget-dock.pos-right { right: 22px; bottom: 22px; align-items: flex-end; }
.widget-dock.pos-left { left: 22px; bottom: 22px; align-items: flex-start; }
.widget-bubble {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(16,24,40,0.25);
  transition: transform .15s ease;
}
.widget-bubble:hover { transform: translateY(-2px); }

/* ---------- Pagination ------------------------------------------------ */

.pager { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 48px; align-items: center; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line); display: inline-grid; place-items: center;
  font-size: 14px; font-weight: 600; color: var(--ink); background: var(--white);
}
.pager a:hover { border-color: var(--orange); color: var(--orange); }
.pager .is-current { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.pager .is-disabled { color: var(--line-dark); background: var(--surface); }
.pager svg { width: 16px; height: 16px; }

/* ---------- Empty state ----------------------------------------------- */

.empty {
  border: 1px dashed var(--line-dark); border-radius: 14px;
  padding: 48px 28px; text-align: center; color: var(--muted); font-size: 15px;
}

/* ---------- Utilities ------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-14 { margin-bottom: 14px; }
.mb-18 { margin-bottom: 18px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mt-auto { margin-top: auto; }
.text-center { text-align: center; }
.text-ink { color: var(--ink); }
.text-orange { color: var(--orange); }
.text-muted { color: var(--muted); }
.fw-600 { font-weight: 600; }
.sora { font-family: var(--sora); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.stack-14 { display: grid; gap: 14px; }
.stack-18 { display: grid; gap: 18px; }
.stack-24 { display: grid; gap: 24px; }
.stack-40 { display: grid; gap: clamp(28px, 4vw, 40px); }
.divider-top { border-top: 1px solid var(--line); padding-top: 28px; }
.nowrap { white-space: nowrap; }
.relative { position: relative; }

/* ---------- Responsive safety net -------------------------------------
   Nothing on a page should ever be able to push the document sideways.
   These rules bound the usual culprits: long unbroken strings, wide media,
   and grid/flex children that refuse to shrink below their content width.
   ---------------------------------------------------------------------- */

/* `clip` rather than `hidden`: hidden turns the root into a scroll container,
   which silently breaks `position: sticky` on the header. `clip` bounds the
   page the same way without that side effect. */
html, body { max-width: 100%; overflow-x: clip; }

img, svg, video, iframe, canvas, table { max-width: 100%; }
iframe { border: 0; }

/* Grid and flex children default to min-content width, which is what forces
   a parent wider than the viewport. Let them shrink. */
.split > *, .split-wide > *, .split-380 > *,
.grid-200 > *, .grid-230 > *, .grid-250 > *,
.grid-280 > *, .grid-290 > *, .grid-300 > *, .grid-340 > * { min-width: 0; }

.hero > *, .section > *, .wrap, .wrap-narrow { min-width: 0; }

/* Long words, emails, URLs and IDs wrap instead of overflowing. */
p, li, td, th, dd, dt, blockquote,
.body-sm, .body-md, .body-lg, .lede,
.card-title, .h-card, .h-card-lg,
.meta-row, .info-row, .footer-contact, .footer-links { overflow-wrap: anywhere; }

h1, h2, h3, h4, .h-hero, .h-page, .h-section, .h-cta { overflow-wrap: break-word; }

.prose { overflow-wrap: anywhere; }
.prose pre { overflow-x: auto; padding: 16px; background: var(--surface); border-radius: 8px; }
.prose table { display: block; overflow-x: auto; }

/* Wide content scrolls inside its own container, never the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Buttons and inputs stay inside narrow columns. */
.btn { max-width: 100%; }
.input, .textarea, .select { max-width: 100%; }

@media (max-width: 560px) {
  /* Side-by-side CTA blocks stack rather than squeeze. */
  .cta-banner { flex-direction: column; align-items: flex-start; }
  .cta-banner .btn { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .section-head { align-items: flex-start; }
  .footer-news-bar { align-items: flex-start; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { flex: 1 1 100%; width: 100%; }
  .newsletter-form button { width: 100%; }
  .badge-float { right: 12px; bottom: 12px; padding: 12px 16px; }
  .badge-float.left { left: 12px; }
  .badge-float .n { font-size: 22px; }
  .topbar-inner { justify-content: flex-start; }
  .plan { padding: 28px 22px; }
  .card, .card-lg, .list-card { padding: 22px; }
  .quote-card { padding: 24px; }
  .info-card { padding: 24px 20px; }
  .partners .row { justify-content: flex-start; gap: 16px 24px; }
  .partners .row span { font-size: 17px; }
}

@media (max-width: 420px) {
  .hero-stats { gap: 14px 24px; }
  .crumbs { font-size: 14px; }
  .date-chip { min-width: 66px; padding: 12px 14px; }
}

/* ---------- Hero slider -------------------------------------------------
   An auto-advancing hero. Slides cross-fade; the copy inside each slide
   staggers in so the page feels alive without anything jumping around.
   ------------------------------------------------------------------------ */

.hero-slider {
  position: relative;
  background: var(--ink);
  background-image:
    radial-gradient(700px 380px at 80% 15%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 70%),
    radial-gradient(500px 300px at 5% 100%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 70%);
  overflow: hidden;
  isolation: isolate;
}

.hero-track { position: relative; display: grid; }

.hero-slide {
  grid-area: 1 / 1;
  padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 32px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 86svh, 880px);
}
/* Full-bleed photo banner: the slide image sits under an ink overlay that is
   heaviest where the headline lives, so the white text always stays readable. */
.hero-slide.has-img {
  background:
    linear-gradient(100deg, rgba(9, 13, 21, .88) 0%, rgba(9, 13, 21, .66) 46%, rgba(10, 15, 24, .34) 100%),
    linear-gradient(to top, rgba(9, 13, 21, .62), transparent 34%),
    var(--slide-img) center / cover no-repeat;
}
.hero-slide.is-active { opacity: 1; visibility: visible; position: relative; z-index: 1; }
/* Every slide occupies the same grid cell. The tallest one establishes the
   carousel height, which prevents a later mobile slide from spilling below it. */
.hero-slide:not(:first-child) { position: relative; }

.hero-slide-inner {
  max-width: 1200px; margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.hero-slide-inner > * { min-width: 0; }
.hero-copy { max-width: 780px; }

.hero-badge-chip {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-top: 26px; padding: 12px 18px;
  background: color-mix(in srgb, var(--orange) 16%, rgba(13, 19, 30, .55));
  border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
  border-radius: 12px; backdrop-filter: blur(4px);
}
.hero-badge-chip .n { font-family: var(--sora); font-weight: 700; font-size: 22px; color: var(--white); }
.hero-badge-chip .l { font-size: 14px; color: var(--muted-light); }

/* Staggered entrance for the active slide's contents. */
.hero-slide.is-active .anim { animation: hero-rise .65s cubic-bezier(.22,.61,.36,1) backwards; }
.hero-slide.is-active .anim-1 { animation-delay: .05s; }
.hero-slide.is-active .anim-2 { animation-delay: .14s; }
.hero-slide.is-active .anim-3 { animation-delay: .23s; }
.hero-slide.is-active .anim-4 { animation-delay: .32s; }
.hero-slide.is-active .anim-5 { animation-delay: .41s; }
.hero-slide.is-active .anim-media { animation: hero-zoom .9s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: .1s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-zoom {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Controls ---------------------------------------------------------- */

.hero-controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(18px, 3vw, 30px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  width: calc(100% - clamp(40px, 8vw, 64px));
  justify-content: flex-start;
}

.hero-dots { display: flex; gap: 9px; align-items: center; }
.hero-dot {
  width: 30px; height: 4px; border-radius: 99px; border: none; padding: 0;
  background: rgba(255,255,255,0.28); cursor: pointer;
  transition: background .25s ease, width .25s ease;
  position: relative; overflow: hidden;
}
.hero-dot:hover { background: rgba(255,255,255,0.5); }
.hero-dot.is-active { width: 46px; background: rgba(255,255,255,0.28); }
.hero-dot.is-active::after {
  content: ''; position: absolute; inset: 0; width: 0;
  background: var(--orange); border-radius: 99px;
  animation: hero-progress var(--hero-delay, 6500ms) linear forwards;
}
.hero-slider.is-paused .hero-dot.is-active::after { animation-play-state: paused; }

@keyframes hero-progress { from { width: 0; } to { width: 100%; } }

.hero-arrows { display: flex; gap: 8px; margin-left: auto; }
.hero-arrow {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.hero-arrow:hover { background: var(--orange); border-color: var(--orange); }
.hero-arrow:hover svg { stroke: #101828; }

/* Give the copy room so the controls never sit on top of the text. */
.hero-slider .hero-slide { padding-bottom: clamp(84px, 11vw, 118px); }

@media (max-width: 700px) {
  .hero-controls { justify-content: space-between; gap: 10px; }
  .hero-arrows { margin-left: 0; }
  .hero-arrow { width: 38px; height: 38px; }
  .hero-dot { width: 24px; }
  .hero-dot.is-active { width: 36px; }
  .hero-slide { min-height: clamp(460px, 76svh, 640px); }
  .hero-slide.has-img {
    background:
      linear-gradient(to top, rgba(9, 13, 21, .9) 12%, rgba(9, 13, 21, .58) 55%, rgba(10, 15, 24, .3) 100%),
      var(--slide-img) center / cover no-repeat;
  }
}

/* Respect a reduced-motion preference: no autoplay animation, no transforms. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-active .anim,
  .hero-slide.is-active .anim-media { animation: none; }
  .hero-dot.is-active::after { animation: none; width: 100%; }
}

/* ---------- Landing page motion ---------------------------------------
   Homepage motion is intentionally restrained: it creates a sense of energy
   and progression without becoming a distraction. Content remains visible
   without JavaScript; JavaScript only opts supported browsers into reveal
   states after the page has loaded.
   ------------------------------------------------------------------------ */

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.landing-page { overflow: clip; }

.landing-hero::before,
.landing-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.landing-hero::before {
  width: clamp(300px, 42vw, 660px);
  aspect-ratio: 1;
  top: -31%;
  right: -11%;
  background: radial-gradient(circle, color-mix(in srgb, var(--orange) 24%, transparent) 0%, color-mix(in srgb, var(--orange) 8%, transparent) 38%, transparent 70%);
}
.landing-hero::after {
  width: clamp(220px, 31vw, 460px);
  aspect-ratio: 1;
  bottom: -36%;
  left: 31%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 42px color-mix(in srgb, var(--orange) 3.5%, transparent), 0 0 0 92px color-mix(in srgb, var(--orange) 2%, transparent);
}
.landing-hero .hero-track { z-index: 1; }
.landing-hero .hero-controls { z-index: 3; }
.hero-pause { font-family: var(--sora); font-size: 16px; font-weight: 700; line-height: 1; }
.hero-arrows { flex-shrink: 0; }

.landing-stats,
.landing-testimonial,
.landing-cta { position: relative; overflow: hidden; isolation: isolate; }
.landing-stats {
  background: var(--orange); /* fallback for browsers without color-mix */
  background: linear-gradient(120deg, var(--orange) 0%, color-mix(in srgb, var(--orange) 88%, white) 52%, var(--orange) 100%);
}
.landing-stats::before {
  content: '';
  position: absolute;
  width: min(58vw, 720px);
  aspect-ratio: 1;
  top: -72%;
  right: -13%;
  border-radius: 50%;
  border: 1px solid rgba(16, 24, 40, 0.14);
  box-shadow: 0 0 0 42px rgba(16, 24, 40, 0.045), 0 0 0 100px rgba(16, 24, 40, 0.025);
  pointer-events: none;
}
.landing-stats .wrap,
.landing-testimonial .wrap-narrow,
.landing-cta > * { position: relative; z-index: 1; }
.landing-stats .stat-item { transition: transform .25s ease; }
.landing-stats .v span { display: inline-block; font-variant-numeric: tabular-nums; }

.landing-testimonial::before {
  content: '';
  position: absolute;
  width: clamp(300px, 43vw, 680px);
  aspect-ratio: 1;
  top: -55%;
  left: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--orange) 18%, transparent), transparent 68%);
  pointer-events: none;
}
.landing-cta::after {
  content: '';
  position: absolute;
  inset: -45% auto -45% -22%;
  width: 20%;
  transform: translateX(-175%) rotate(14deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
  transition: transform .75s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}

/* Shared scroll-in story beats. The runtime adds both root classes only after
   it has confirmed JavaScript, IntersectionObserver and a motion preference
   that allows animation; that leaves every public page legible by default. */
html.has-scroll-motion.has-motion-engine main.site-page [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.has-scroll-motion.has-motion-engine main.site-page [data-reveal][data-reveal-from="left"] { transform: translate3d(-26px, 0, 0); }
html.has-scroll-motion.has-motion-engine main.site-page [data-reveal][data-reveal-from="right"] { transform: translate3d(26px, 0, 0); }
html.has-scroll-motion.has-motion-engine main.site-page [data-reveal][data-reveal-from="scale"] { transform: scale(.975); }
html.has-scroll-motion.has-motion-engine main.site-page [data-reveal].is-revealed,
html.has-scroll-motion.has-motion-engine main.site-page [data-reveal]:focus-visible,
html.has-scroll-motion.has-motion-engine main.site-page [data-reveal]:focus,
html.has-scroll-motion.has-motion-engine main.site-page [data-reveal]:focus-within {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
html.has-scroll-motion.has-motion-engine main.site-page .landing-about [data-reveal] .tick-list li {
  opacity: 0;
  transform: translate3d(-12px, 0, 0);
}
html.has-scroll-motion.has-motion-engine main.site-page .landing-about [data-reveal].is-revealed .tick-list li {
  animation: landing-tick-in .42s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(180ms + var(--tick-delay, 0ms));
}

@keyframes landing-orbit {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .76; }
  50% { transform: translate3d(-28px, 22px, 0) scale(1.08); opacity: 1; }
}
@keyframes landing-ring-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(20px, -14px, 0) rotate(8deg); }
}
@keyframes landing-image-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -7px, 0) scale(1.012); }
}
@keyframes landing-badge-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
@keyframes landing-tick-in {
  from { opacity: 0; transform: translate3d(-12px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .landing-hero::before { animation: landing-orbit 15s ease-in-out infinite; }
  .landing-hero::after { animation: landing-ring-drift 18s ease-in-out infinite; }
  .landing-hero .hero-slide.is-active .hero-media { animation: landing-image-float 7s ease-in-out 1s infinite; }
  .landing-hero .hero-slide.is-active .badge-float { animation: landing-badge-bob 4.6s ease-in-out 1s infinite; }
  .landing-stats::before { animation: landing-ring-drift 17s ease-in-out infinite; }
  .landing-testimonial::before { animation: landing-orbit 16s ease-in-out infinite; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .landing-page .card,
  .landing-page .media-card,
  .landing-page .landing-about-visual .media {
    transition: transform .28s cubic-bezier(.22,.61,.36,1), border-color .2s ease, box-shadow .28s ease;
  }
  .landing-page .card:hover,
  .landing-page .media-card:hover,
  .landing-page .landing-about-visual:hover .media { transform: translate3d(0, -6px, 0); }
  .landing-page .card:hover { box-shadow: 0 16px 34px rgba(16,24,40,0.11); }
  .landing-page .media-card:hover { box-shadow: 0 18px 38px rgba(16,24,40,0.13); }
  .landing-page .media-card .thumb { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .landing-page .media-card:hover .thumb { transform: scale(1.045); }
  .landing-page .card .icon-pill { transition: transform .28s cubic-bezier(.22,.61,.36,1), background .28s ease; }
  .landing-page .card:hover .icon-pill { transform: rotate(-5deg) scale(1.08); background: var(--orange); }
  .landing-page .landing-stats .stat-item:hover { transform: translate3d(0, -4px, 0); }
  .landing-page .landing-cta:hover::after { transform: translateX(690%) rotate(14deg); }
  .landing-page .landing-cta .btn-dark { transition: transform .22s ease, background .15s ease, box-shadow .22s ease; }
  .landing-page .landing-cta .btn-dark:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 12px 22px rgba(16,24,40,.2); }
}

/* ---------- Public-site motion system ---------------------------------
   These refinements belong to the public page shell only. They use small,
   transform-first movements so the site feels considered on desktop without
   adding hover jitter or width pressure on touch devices. */

html.has-scroll-progress .site-header { isolation: isolate; }
html.has-scroll-progress .site-header::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), #ffad69);
  transform: scaleX(var(--page-scroll-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

main.site-page .page-head {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
main.site-page .page-head > .wrap { position: relative; z-index: 1; }
main.site-page .page-head::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(44rem, 72vw);
  aspect-ratio: 1;
  top: -29rem;
  right: -17rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px color-mix(in srgb, var(--orange) 3.5%, transparent), 0 0 0 104px color-mix(in srgb, var(--orange) 1.8%, transparent);
  pointer-events: none;
}

@keyframes public-page-head-entry {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes public-page-head-glow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
  50% { transform: translate3d(-16px, 12px, 0) scale(1.035); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  main.site-page .page-head > .wrap {
    animation: public-page-head-entry .68s cubic-bezier(.22,.61,.36,1) both;
  }
  main.site-page .page-head::after {
    animation: public-page-head-glow 15s ease-in-out .15s infinite;
  }

  main.site-page .field {
    transition: color .18s ease, transform .18s cubic-bezier(.22,.61,.36,1);
  }
  main.site-page .field:focus-within {
    color: var(--orange-dark);
    transform: translate3d(0, -1px, 0);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main.site-page :is(.card, .media-card, .list-card, .step, .plan, .info-card, .quote-card, .cta-banner, .staff-verify-callout) {
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
  }
  main.site-page :is(.card, .media-card, .list-card, .step, .plan, .info-card, .quote-card, .cta-banner, .staff-verify-callout):hover {
    transform: translate3d(0, -5px, 0);
  }
  html.has-scroll-motion.has-motion-engine main.site-page :is(.card, .media-card, .list-card, .step, .plan, .info-card, .quote-card, .cta-banner, .staff-verify-callout)[data-reveal].is-revealed:hover {
    transform: translate3d(0, -5px, 0);
  }
  main.site-page .media-card .thumb {
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
  }
  main.site-page .media-card:hover .thumb { transform: scale(1.045); }
  main.site-page .card .icon-pill {
    transition: transform .28s cubic-bezier(.22,.61,.36,1), background-color .2s ease;
  }
  main.site-page .card:hover .icon-pill {
    background: var(--orange);
    transform: translate3d(0, -1px, 0) rotate(-4deg) scale(1.05);
  }

  main.site-page :is(.btn, .link-more, .link-sm),
  .site-header :is(.header-cta, .nav-cta),
  .site-footer .newsletter-form button {
    transition: transform .2s cubic-bezier(.22,.61,.36,1), color .16s ease, background-color .16s ease, border-color .16s ease;
  }
  main.site-page :is(.btn, .link-more, .link-sm):hover,
  .site-header :is(.header-cta, .nav-cta):hover,
  .site-footer .newsletter-form button:hover {
    transform: translate3d(0, -2px, 0);
  }
  main.site-page :is(.btn, .link-more, .link-sm):active,
  .site-header :is(.header-cta, .nav-cta):active,
  .site-footer .newsletter-form button:active {
    transform: translate3d(0, 0, 0) scale(.98);
  }

}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (min-width: 1101px) {
  .site-header .site-nav > a:not(.nav-cta) {
    transition: color .16s ease, border-color .16s ease, transform .2s cubic-bezier(.22,.61,.36,1);
  }
  .site-header .site-nav > a:not(.nav-cta):hover { transform: translate3d(0, -1px, 0); }
}

/* The landing page already has a slightly bolder interaction language. */
html.has-scroll-motion.has-motion-engine main.site-page .landing-page :is(.card, .media-card)[data-reveal].is-revealed:hover {
  transform: translate3d(0, -6px, 0);
}
html.has-scroll-motion.has-motion-engine main.site-page .landing-page .card:hover .icon-pill {
  background: var(--orange);
  transform: rotate(-5deg) scale(1.08);
}

/* JavaScript adds the class after wiring the panels. The non-JavaScript
   fallback above remains unchanged: the first answer stays visible and the
   rest are hidden without exposing collapsed copy to assistive technology. */
html.has-faq-motion main.site-page .faq-a {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: max-height .28s ease, padding .28s ease, opacity .2s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
html.has-faq-motion main.site-page .faq-item.is-open .faq-a {
  max-height: 60rem;
  padding: 0 24px 20px;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
html.has-faq-motion main.site-page .faq-q {
  transition: color .18s ease, background-color .18s ease;
}
html.has-faq-motion main.site-page .faq-item.is-open .faq-q {
  color: var(--orange-dark);
  background: color-mix(in srgb, var(--orange) 4.5%, transparent);
}

html.has-filter-motion main.site-page [data-category] {
  transition: opacity .21s ease, transform .21s cubic-bezier(.22,.61,.36,1);
}
html.has-filter-motion.has-scroll-motion.has-motion-engine main.site-page [data-category].is-filtering-out,
html.has-filter-motion main.site-page [data-category].is-filtering-out {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition-delay: 0ms;
}
.site-motion-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 700px) {
  html.has-scroll-motion.has-motion-engine main.site-page [data-reveal] { transform: translate3d(0, 16px, 0); }
  html.has-scroll-motion.has-motion-engine main.site-page [data-reveal][data-reveal-from="left"] { transform: translate3d(-18px, 0, 0); }
  html.has-scroll-motion.has-motion-engine main.site-page [data-reveal][data-reveal-from="right"] { transform: translate3d(18px, 0, 0); }
  html.has-scroll-motion.has-motion-engine main.site-page [data-reveal][data-reveal-from="scale"] { transform: scale(.982); }
  main.site-page .page-head::after { width: 23rem; top: -15rem; right: -11rem; }
  .landing-hero .hero-controls { gap: 10px; }
  .landing-hero .hero-dots { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .landing-hero .hero-dots::-webkit-scrollbar { display: none; }
  .landing-hero .hero-arrows { gap: 6px; }
  .landing-hero .hero-arrow { width: 42px; height: 42px; flex: 0 0 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav.is-open { animation: none; }
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.has-scroll-motion.has-motion-engine main.site-page [data-reveal],
  html.has-scroll-motion.has-motion-engine main.site-page [data-reveal][data-reveal-from="left"],
  html.has-scroll-motion.has-motion-engine main.site-page [data-reveal][data-reveal-from="right"],
  html.has-scroll-motion.has-motion-engine main.site-page [data-reveal][data-reveal-from="scale"],
  html.has-scroll-motion.has-motion-engine main.site-page .landing-about [data-reveal] .tick-list li {
    opacity: 1 !important;
    transform: none !important;
  }
  main.site-page .page-head > .wrap,
  main.site-page .page-head::after { animation: none !important; }
  html.has-faq-motion main.site-page .faq-a,
  html.has-filter-motion main.site-page [data-category],
  html.has-scroll-progress .site-header::after {
    transition: none !important;
  }
  html.has-scroll-progress .site-header::after { opacity: 0; }
}

/* ---------- Full-width logo lockup --------------------------------------
   When "logo_display" is set to "full", the uploaded artwork replaces the
   orange tile and the wordmark entirely. The header uses the dark logo, the
   footer the light one, so a logo with its own colours reads on both.
   ------------------------------------------------------------------------ */

.brand-full { display: block; max-width: min(220px, 52vw); }
.brand-full img { width: 100%; height: auto; max-height: 46px; object-fit: contain; object-position: left center; }

.footer-brand-full { display: block; margin-bottom: 20px; max-width: min(200px, 60vw); }
.footer-brand-full img { width: 100%; height: auto; max-height: 42px; object-fit: contain; object-position: left center; }

@media (max-width: 480px) {
  .brand-full { max-width: min(170px, 50vw); }
  .brand-full img { max-height: 38px; }
}

/* Small muted annotation, shared with the shop's .price-note. */
.price-note { font-size: 13px; color: var(--muted); font-weight: 400; }