/* =========================================================================
   UPSHIFT OUTREACH — Design System
   Palette: Ink #080808 · Paper #F5F5F5 · Slate #A5A5A5 · Seam #242424 · Signal #FFB800
   Type: Manrope (display) + Inter (body)
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --ink:           #080808;
  --ink-raised:    #0E0E0E;
  --ink-raised-2:  #131313;
  --seam:          #242424;
  --seam-strong:   #333333;
  --paper:         #F5F5F5;
  --slate:         #A5A5A5;
  --slate-dim:     #808080;
  --signal:        #FFB800;
  --signal-ink:    #0A0800;
  --signal-08:     rgba(255,184,0,0.08);
  --signal-14:     rgba(255,184,0,0.14);
  --signal-30:      rgba(255,184,0,0.30);
  --good:          #B9D9A0;   /* used sparingly, text-only, not a UI accent */

  /* Type */
  --f-head: 'Manrope', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid scale */
  --fs-eyebrow:  0.8125rem;
  --fs-small:    0.875rem;
  --fs-body:     1.0625rem;
  --fs-lead:     clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  --fs-h3:       clamp(1.25rem, 1vw + 1rem, 1.625rem);
  --fs-h2:       clamp(1.875rem, 2.2vw + 1rem, 2.75rem);
  --fs-h1:       clamp(2.5rem, 4vw + 1rem, 4.25rem);
  --fs-statement: clamp(1.5rem, 2.4vw + 1rem, 2.5rem);

  /* Space */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.5rem;
  --sp-7: 5rem;
  --sp-8: 7rem;
  --sp-9: 9rem;

  /* Layout */
  --container: 1240px;
  --container-narrow: 860px;
  --pad: clamp(20px, 5vw, 64px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --nav-h: 78px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
html, body { background: var(--ink); }
body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; color: var(--paper); }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }

p { color: var(--slate); }
p.lead { font-size: var(--fs-lead); color: var(--paper); }
strong { color: var(--paper); font-weight: 600; }

.text-muted { color: var(--slate); }
.text-faint { color: var(--slate-dim); }
.text-accent { color: var(--signal); }
.text-small { font-size: var(--fs-small); }
.nowrap { white-space: nowrap; }

::selection { background: var(--signal); color: var(--signal-ink); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--signal);
  color: var(--signal-ink);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-small);
  z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.container-narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--pad);
}
main { display: block; }
[id] { scroll-margin-top: calc(var(--nav-h) + 14px); }

.section { padding-block: var(--sp-8); border-top: 1px solid var(--seam); }
.section--tight { padding-block: var(--sp-6); }
.section--hero { padding-block: 0; border-top: none; }
.section--flush-top { border-top: none; }
.section--raised { background: var(--ink-raised); }
.section--center { text-align: center; }

.section-head { max-width: 660px; margin-bottom: var(--sp-6); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--sp-3); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--signal);
  flex: none;
}
.eyebrow.is-muted { color: var(--slate); }
.eyebrow.is-muted::before { background: var(--slate-dim); }
.eyebrow.center { justify-content: center; }

.statement {
  font-family: var(--f-head);
  font-size: var(--fs-statement);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.24;
  color: var(--paper);
}

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.divider { height: 1px; background: var(--seam); border: none; }

/* ---------- Reveal-on-scroll ----------
   Hidden-by-default only applies once .js is on <html> (set synchronously by
   the inline script in <head>, before first paint). If JavaScript never runs
   -- blocked, fails, or a crawler that doesn't execute it -- .no-js stays on
   <html> instead, none of these opacity:0 rules match, and every reveal
   element is simply visible, exactly as main.js's own header comment
   promises ("fully readable/navigable with this file absent"). */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-group.is-visible .reveal-child { opacity: 1; transform: none; }
.js .reveal-child { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal-group.is-visible .reveal-child:nth-child(1) { transition-delay: 0ms; }
.reveal-group.is-visible .reveal-child:nth-child(2) { transition-delay: 70ms; }
.reveal-group.is-visible .reveal-child:nth-child(3) { transition-delay: 140ms; }
.reveal-group.is-visible .reveal-child:nth-child(4) { transition-delay: 210ms; }
.reveal-group.is-visible .reveal-child:nth-child(5) { transition-delay: 280ms; }
.reveal-group.is-visible .reveal-child:nth-child(6) { transition-delay: 350ms; }
.reveal-group.is-visible .reveal-child:nth-child(7) { transition-delay: 420ms; }
.reveal-group.is-visible .reveal-child:nth-child(8) { transition-delay: 490ms; }
.reveal-group.is-visible .reveal-child:nth-child(9) { transition-delay: 560ms; }
@media (prefers-reduced-motion: reduce) {
  /* !important: this must win over .js .reveal even if main.js errors out
     partway through and never gets to add .is-visible itself. */
  .reveal, .reveal-child { opacity: 1 !important; transform: none !important; }
}

/* ---------- Buttons & Links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--ease); }

.btn-primary {
  /* --tx/--ty: set from main.js on pointer:fine devices for a light
     magnetic pull toward the cursor. Composed into transform below rather
     than set directly, so it never fights the hover/active transforms. */
  --tx: 0px; --ty: 0px;
  background: var(--signal); color: var(--signal-ink);
  transform: translate(var(--tx), var(--ty));
}
.btn-primary:hover { transform: translate(var(--tx), var(--ty)) translateY(-2px); background: #ffc633; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary:active { transform: translate(var(--tx), var(--ty)) scale(0.97); background: #ffc633; }

.btn-secondary { background: transparent; color: var(--paper); border-color: var(--seam-strong); }
.btn-secondary:hover { border-color: var(--signal); color: var(--signal); transform: translateY(-2px); }
.btn-secondary:active { transform: scale(0.97); border-color: var(--signal); color: var(--signal); }

.btn-ghost { padding: 0; color: var(--paper); border-bottom: 1px solid var(--seam-strong); border-radius: 0; padding-bottom: 2px; }
.btn-ghost:hover { color: var(--signal); border-color: var(--signal); }

.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--paper);
  border-bottom: 1px solid var(--seam-strong);
  padding-bottom: 3px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.link-arrow:hover { color: var(--signal); border-color: var(--signal); }
.link-arrow:hover svg { transform: translateX(4px); }

.tel-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ---------- Chip / Pill ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--seam);
  border-radius: 999px;
  font-size: var(--fs-small);
  color: var(--paper);
  background: var(--ink-raised);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pill:hover { border-color: var(--signal-30); transform: translateY(-2px); }
.pill:active { transform: scale(0.96); border-color: var(--signal-30); }
.pill-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- Cards ---------- */
.card {
  /* --mx/--my: set from main.js on pointer:fine devices, drive the
     cursor-follow highlight below. Deliberately NOT combined with a
     mousemove-driven tilt/rotate -- that would have to fight the existing
     :hover translateY(-4px) below on the same `transform` property. */
  --mx: 50%; --my: 50%;
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--seam);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--signal-14), transparent 70%);
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: var(--seam-strong); transform: translateY(-4px); background: var(--ink-raised-2); }
.card:active { transform: translateY(-1px) scale(0.99); }

.icon-tile {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--signal-08);
  color: var(--signal);
  margin-bottom: var(--sp-3);
}
.icon-tile svg { width: 22px; height: 22px; }

/* =========================================================================
   SCROLL PROGRESS
   ========================================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 110;
  background: transparent;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--signal);
  transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* =========================================================================
   NAVIGATION
   ========================================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(8,8,8,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.navbar.is-scrolled { border-color: var(--seam); background: rgba(8,8,8,0.92); }

.navbar__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 42px; width: auto; display: block; }
.brand:hover { opacity: 0.9; }

.navbar__links { display: flex; align-items: center; gap: 1.6rem; }
.navbar__link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate);
  padding-block: 6px;
  transition: color 0.2s var(--ease);
}
.navbar__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.navbar__link:hover { color: var(--paper); }
.navbar__link:hover::after { transform: scaleX(1); }
.navbar__link[aria-current="page"] { color: var(--paper); }
.navbar__link[aria-current="page"]::after { transform: scaleX(1); }

.navbar__actions { display: flex; align-items: center; gap: var(--sp-4); }
.navbar__cta { flex: none; }

.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex: none;
}
.navbar__toggle span { display: block; width: 22px; height: 2px; background: var(--paper); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); margin-inline: auto; }
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  padding: calc(var(--nav-h) + 20px) var(--pad) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu__links { display: flex; flex-direction: column; gap: var(--sp-2); }
.mobile-menu__link {
  font-family: var(--f-head);
  font-size: 1.75rem;
  font-weight: 700;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--seam);
  color: var(--paper);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.13s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.23s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 0.28s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(6) { transition-delay: 0.33s; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__link { opacity: 1; transform: none; }
}
.mobile-menu__link[aria-current="page"] { color: var(--signal); }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); }

body.menu-open { overflow: hidden; }

@media (max-width: 1020px) {
  .navbar__links { display: none; }
  .navbar__toggle { display: flex; }
}
@media (max-width: 560px) {
  .navbar__actions .navbar__cta.is-desktop-only { display: none; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--sp-8));
  padding-bottom: var(--sp-7);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("../assets/noise.png");
  background-size: 96px 96px;
}
.hero__glow {
  position: absolute;
  top: -16%;
  left: 50%;
  width: 132%;
  height: 132%;
  translate: -50% 0;
  /* High-resolution pre-rendered asset (2560x1680, dithered so there's no
     banding on 8-bit panels). This replaced a stack of CSS radial-gradients
     under `filter: blur()`: blurring an element that large every frame is
     expensive enough that desktop GPUs stall on it, which is why the
     animation could appear to not run at all. Nothing here animates a
     paint property now -- only transform and opacity, both GPU-composited. */
  background-image: image-set(url("../assets/glow-2560.webp") type("image/webp"),
                              url("../assets/glow-2560.png") type("image/png"));
  background-image: -webkit-image-set(url("../assets/glow-2560.webp") type("image/webp"),
                                      url("../assets/glow-2560.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.85;
  will-change: transform, opacity;
  animation: hero-drift 24s ease-in-out infinite alternate,
             hero-pulse 5.5s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 0.68; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__glow { animation: none; opacity: 0.85; }
}
@keyframes hero-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__glow { animation: none; }
}
.hero__mark {
  position: absolute;
  top: 8%;
  right: -60px;
  width: 320px;
  opacity: 0.05;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 840px;
  margin-inline: auto;
  text-align: center;
}
.hero__eyebrow { justify-content: center; margin-bottom: var(--sp-4); }
.hero__title { margin-bottom: var(--sp-4); }
.hero__lead { max-width: 620px; margin-inline: auto; margin-bottom: var(--sp-5); }
.hero__actions { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }

/* Entrance sequence: each hero element starts hidden and steps in on load.
   Scoped to .js for the same reason as the reveal-on-scroll rules above --
   .no-js (JS absent) means none of this hidden state ever applies. */
.js .hero .hero__eyebrow, .js .hero .hero__title, .js .hero .hero__lead, .js .hero .hero__actions, .js .hero .hero__note, .js .hero .quick-jump {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.hero.is-loaded .hero__eyebrow  { opacity: 1; transform: none; transition-delay: 0.05s; }
.hero.is-loaded .hero__title    { opacity: 1; transform: none; transition-delay: 0.16s; }
.hero.is-loaded .hero__lead     { opacity: 1; transform: none; transition-delay: 0.28s; }
.hero.is-loaded .hero__actions  { opacity: 1; transform: none; transition-delay: 0.40s; }
.hero.is-loaded .hero__note     { opacity: 1; transform: none; transition-delay: 0.46s; }
.hero.is-loaded .quick-jump     { opacity: 1; transform: none; transition-delay: 0.52s; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero__eyebrow, .hero .hero__title, .hero .hero__lead, .hero .hero__actions, .hero .hero__note, .hero .quick-jump { opacity: 1 !important; transform: none !important; }
}

.hero__actions .btn-primary { animation: cta-pulse 2.8s ease-in-out infinite; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--signal-30); }
  50% { box-shadow: 0 0 0 9px rgba(255,184,0,0); }
}

.quick-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin-top: var(--sp-5);
}
.quick-jump__label { font-size: var(--fs-small); color: var(--slate-dim); margin-right: 4px; }
.quick-jump__link {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--slate);
  padding: 7px 14px;
  border: 1px solid var(--seam);
  border-radius: 999px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.quick-jump__link:hover { color: var(--paper); border-color: var(--signal-30); transform: translateY(-1px); }
.quick-jump__link:active { transform: scale(0.96); }

@media (max-width: 640px) {
  .quick-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .quick-jump::-webkit-scrollbar { display: none; }
  .quick-jump__label { display: none; }
  .quick-jump__link { flex: none; }
}

@media (max-width: 640px) {
  .hero { padding-top: calc(var(--nav-h) + var(--sp-6)); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Proof strip ---------- */
.stats-strip { border-top: 1px solid var(--seam); }
.stats-strip__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.stat {
  flex: 1 1 200px;
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  border-left: 1px solid var(--seam);
}
.stat:first-child { border-left: none; }
.stat__value {
  display: block;
  font-family: var(--f-head);
  font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  font-weight: 800;
  color: var(--signal);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--slate);
}
.stats-strip__note {
  text-align: center;
  font-size: 0.875rem;
  color: var(--slate);
  font-style: normal;
  padding-bottom: var(--sp-4);
}

@media (max-width: 920px) {
  .stat { flex: 1 1 45%; border-left: none; border-top: 1px solid var(--seam); }
  .stat:nth-child(odd) { border-right: 1px solid var(--seam); }
}

/* =========================================================================
   PROBLEM / SPLIT
   ========================================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
.split__highlight {
  font-family: var(--f-head);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.18;
  margin-block: var(--sp-4);
  color: var(--paper);
}
.split__highlight em {
  font-style: normal;
  color: var(--signal);
  position: relative;
}
.problem-list { display: flex; flex-direction: column; }
.problem-item {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--seam);
}
.problem-item:last-child { border-bottom: 1px solid var(--seam); }
.problem-item__num {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--slate-dim);
  font-size: 0.9375rem;
  flex: none;
  padding-top: 2px;
}
.problem-item p { color: var(--paper); margin: 0; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* How We Work's five steps: the lead + body paragraph had no margin between
   them (the sitewide reset zeroes p margins; .about-copy and .prose both
   reintroduce it, this page's markup just hadn't). And on mobile, where
   .split collapses to a single stacked column, the default var(--sp-6) gap
   made the number/heading feel disconnected from its own paragraph -- tightened
   just for this component rather than changing .split generally, since the
   homepage's problem section also uses .split with a different rhythm. */
.split--process p { margin-bottom: var(--sp-3); }
.split--process p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .split--process { gap: var(--sp-4); }
}

/* Sticky "problem" narrative: pinned header + rail on the left, spotlighted
   points scrolling past on the right. Desktop/wide only; below 860px this
   falls back to the plain stacked list the .split media query above already
   produces, so mobile is untouched. */
@media (min-width: 861px) {
  .split--sticky .problem-pin { position: sticky; top: 110px; display: flex; gap: 22px; align-items: flex-start; }
  .problem-list[data-problem-track] { padding-block: 6vh 35vh; }
  .problem-list[data-problem-track] .problem-item {
    padding-block: 100px;
    transform: scale(0.95);
    opacity: 0.42;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), color 0.3s var(--ease);
  }
  .problem-list[data-problem-track] .problem-item.is-active { transform: scale(1.02); opacity: 1; }
  .problem-list[data-problem-track] .problem-item.is-active p { color: var(--signal); }
  .problem-list[data-problem-track] .problem-item.is-active .problem-item__num { color: var(--signal); }
}
.problem-rail { display: flex; flex-direction: column; align-items: center; padding-top: 8px; flex-shrink: 0; }
.problem-rail__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--seam-strong); flex-shrink: 0;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.problem-rail__dot.is-active { background: var(--signal); transform: scale(1.4); box-shadow: 0 0 12px rgba(255,184,0,0.55); }
.problem-rail__line { width: 2px; flex: 1; min-height: 30px; background: var(--seam-strong); position: relative; overflow: hidden; }
.problem-rail__line::after {
  content: ''; position: absolute; inset: auto 0 0 0; width: 100%; background: var(--signal);
  height: var(--fill, 0%); transition: height 0.25s linear;
}
@media (max-width: 860px) {
  .problem-rail { display: none; }
}

/* Mobile version of the same spotlight the desktop sticky-pin gets. main.js
   already computes .is-active at every viewport width (it tracks whichever
   problem-item is closest to center as you scroll) -- this was simply never
   given a mobile appearance, so the class was doing nothing below 861px.
   No scale/opacity here (that trick depends on the desktop sticky-pin
   layout); a left accent + color shift reads better against a plain
   stacked list, and stays a response to genuine scroll position rather
   than a blanket per-section entrance animation. */
@media (max-width: 860px) {
  .problem-item {
    border-left: 3px solid transparent;
    padding-left: var(--sp-3);
    margin-left: calc(-1 * var(--sp-3));
    background: transparent;
    transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
  }
  .problem-item.is-active {
    border-left-color: var(--signal);
    background: var(--signal-08);
  }
  .problem-item.is-active p { color: var(--signal); transition: color 0.3s var(--ease); }
  .problem-item.is-active .problem-item__num { color: var(--signal); transition: color 0.3s var(--ease); }
}

/* ---------- Callout ---------- */
.callout {
  border-left: 3px solid var(--signal);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink-raised);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-top: var(--sp-5);
}
.callout p { font-family: var(--f-head); font-size: var(--fs-h3); font-weight: 700; color: var(--paper); line-height: 1.35; }

.disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--seam);
  background: var(--ink-raised);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-top: var(--sp-5);
}
.disclaimer svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--slate); }
.disclaimer p { font-size: var(--fs-small); color: var(--slate); margin: 0; line-height: 1.6; }

/* =========================================================================
   PROCESS / STEPS  (signature flowing connector)
   ========================================================================= */
.steps { position: relative; }
.steps__track {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  gap: var(--sp-4);
  position: relative;
}
.steps__track::before {
  content: '';
  position: absolute;
  top: 27px;
  left: calc(100% / var(--n, 5) / 2);
  right: calc(100% / var(--n, 5) / 2);
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--signal) 0 7px, transparent 7px 17px);
  background-size: 34px 100%;
  animation: flow 1.6s linear infinite;
  opacity: 0.75;
}
@keyframes flow { to { background-position: -34px 0; } }

.step { position: relative; text-align: left; padding-top: 68px; }
.step__num {
  position: absolute;
  top: 0; left: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--seam-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--paper);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.step:hover .step__num { border-color: var(--signal); color: var(--signal); }
.step h3 { margin-bottom: 8px; font-size: 1.125rem; }
.step p { font-size: 0.9375rem; margin: 0; }

.process-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--seam);
}
.process-flow__item {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.process-flow__arrow { color: var(--signal); width: 16px; height: 16px; }

@media (max-width: 860px) {
  /* Vertical timeline. Each step reserves a fixed 64px gutter (44px circle
     + 20px gap) so the circle can never overlap the heading, and each step
     draws its own connector from the bottom of its circle to the top of the
     next one -- so the dashed line is centred on the circles and stops at
     the last step instead of running on past it. */
  .steps__track { grid-template-columns: 1fr; gap: var(--sp-6); padding-left: 0; }
  .steps__track::before { display: none; }
  .step { padding-top: 0; padding-left: 64px; margin-left: 0; min-height: 44px; }
  .step__num { width: 44px; height: 44px; font-size: 0.9375rem; top: 0; left: 0; }
  .step h3 { min-height: 44px; display: flex; align-items: center; margin-bottom: 6px; line-height: 1.2; }
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 21px;
    top: 52px;
    bottom: calc(-1 * var(--sp-6) + 8px);
    width: 2px;
    background-image: repeating-linear-gradient(180deg, var(--signal) 0 7px, transparent 7px 17px);
    background-size: 100% 34px;
    opacity: 0.75;
    animation: flow-v 1.6s linear infinite;
  }
  @keyframes flow-v { to { background-position: 0 -34px; } }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .step:not(:last-child)::after { animation: none; }
}

/* =========================================================================
   SERVICES
   ========================================================================= */
.service-card h3 { font-size: 1.125rem; margin-bottom: 8px; }
.service-card p { font-size: 0.9375rem; margin: 0; }
.services-note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--slate-dim); text-align: center; }

/* =========================================================================
   AI SECTION
   ========================================================================= */
.ai-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); align-items: center; }
.ai-layout .pill-group { margin-top: var(--sp-4); }
.ai-closing { margin-top: var(--sp-7); text-align: center; }
.ai-closing p { max-width: 640px; margin-inline: auto; }
@media (max-width: 860px) { .ai-layout { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* =========================================================================
   WHO WE HELP
   ========================================================================= */
.industry-card { text-align: left; }
.industry-card h3 { font-size: 1rem; margin-bottom: 6px; }
.industry-card p { font-size: 0.875rem; margin: 0; }

/* =========================================================================
   CASE STUDY
   ========================================================================= */
/* =========================================================================
   CASE STUDY (long-form narrative rhythm)
   ========================================================================= */
.case-narrative h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.case-narrative h2:first-child { margin-top: 0; }
.case-narrative > p { margin-bottom: var(--sp-3); }
.case-narrative .check-list { margin-top: var(--sp-4); }

.case-stats { margin-top: var(--sp-6); }
.stat-card { text-align: center; padding: var(--sp-4); }
.stat-card .stat__value { font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); }
.case-scope { margin-top: var(--sp-6); }
.check-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.check-list li, .x-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; }
.check-list svg { flex: none; width: 18px; height: 18px; color: var(--signal); margin-top: 3px; }
.x-list svg { flex: none; width: 18px; height: 18px; color: var(--slate-dim); margin-top: 3px; }
.check-list li span, .x-list li span { color: var(--paper); }
.x-list li span { color: var(--slate); }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-copy p { margin-bottom: var(--sp-3); }
.about-copy p.lead { margin-bottom: var(--sp-4); }

/* =========================================================================
   COMPARISON (Why Upshift)
   ========================================================================= */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-6); }
.compare__col { border: 1px solid var(--seam); border-radius: var(--r-md); padding: var(--sp-5); }
.compare__col--them { color: var(--slate); }
.compare__col--us { border-color: var(--signal-30); background: var(--ink-raised); }
.compare__head { font-family: var(--f-head); font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-4); }
.compare__col--them .compare__head { color: var(--slate); }
.compare__col--us .compare__head { color: var(--signal); }
.compare__col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.compare__col li { font-size: 0.9375rem; padding-block: 8px; border-top: 1px solid var(--seam); }
.compare__col li:first-child { border-top: none; }
.compare__col--them li { color: var(--slate-dim); }
.compare__col--us li { color: var(--paper); }
.compare-close { margin-top: var(--sp-6); text-align: center; }
.compare-close p { max-width: 620px; margin-inline: auto; }

@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }

/* =========================================================================
   CLIENT FIT
   ========================================================================= */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.fit-col { border: 1px solid var(--seam); border-radius: var(--r-md); padding: var(--sp-5); }
.fit-col--yes { border-color: var(--signal-30); }
.fit-col h3 { font-size: 1.0625rem; margin-bottom: var(--sp-4); }
.fit-col--yes h3 { color: var(--signal); }
.fit-col--no h3 { color: var(--slate); }
.fit-close { text-align: center; margin-top: var(--sp-6); }

@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   RESULTS PHILOSOPHY
   ========================================================================= */
.philosophy { text-align: center; }
.philosophy__no {
  font-family: var(--f-head);
  font-size: clamp(1.75rem, 3.2vw + 1rem, 3rem);
  font-weight: 800;
  color: var(--paper);
  max-width: 780px;
  margin-inline: auto;
  line-height: 1.22;
}
.philosophy__yes {
  font-family: var(--f-head);
  font-size: clamp(1.5rem, 2.4vw + 1rem, 2.25rem);
  font-weight: 700;
  color: var(--signal);
  max-width: 780px;
  margin-inline: auto;
  margin-top: var(--sp-4);
  line-height: 1.3;
}
.philosophy__note { max-width: 560px; margin: var(--sp-5) auto 0; font-size: var(--fs-small); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid var(--seam);
  padding-block: var(--sp-3);
}
.faq-item:last-child { border-bottom: 1px solid var(--seam); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--paper);
  padding-block: 6px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q-icon { flex: none; width: 22px; height: 22px; position: relative; }
.faq-item summary .q-icon::before, .faq-item summary .q-icon::after {
  content: '';
  position: absolute;
  background: var(--signal);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq-item summary .q-icon::before { left: 4px; right: 4px; top: 50%; height: 2px; transform: translateY(-50%); }
.faq-item summary .q-icon::after { top: 4px; bottom: 4px; left: 50%; width: 2px; transform: translateX(-50%); }
.faq-item[open] summary .q-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
/* Grid-rows trick: animates a 0fr -> 1fr track instead of height/max-height,
   so it works without knowing the answer's height up front. Padding lives on
   the inner <p> rather than .faq-a itself, so the collapsed state is a true
   0 rather than "0 plus leftover padding". Pure CSS -- if a browser doesn't
   support animating grid-template-rows, this just falls back to the same
   instant open/close as before; nothing about <details>'s native, no-JS
   keyboard/screen-reader behavior changes either way. */
.faq-item .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  max-width: 780px;
  transition: grid-template-rows 0.35s var(--ease), padding-top 0.35s var(--ease);
}
.faq-item[open] .faq-a { grid-template-rows: 1fr; padding-top: var(--sp-2); }
.faq-item .faq-a > * {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding-right: 40px;
}
/* Longer answers wrap several paragraphs in .faq-a__inner so the grid still
   has exactly one row to collapse. */
.faq-a__inner p { margin: 0; }
.faq-a__inner p + p { margin-top: var(--sp-2); }
.faq-a__inner strong { color: var(--paper); }
.faq-cta { margin-top: var(--sp-6); text-align: center; }

/* =========================================================================
   CONSULTANCY MODEL
   ========================================================================= */
.model-note { margin-top: var(--sp-6); text-align: center; font-size: var(--fs-small); }

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.final-cta {
  position: relative;
  text-align: center;
  padding-block: var(--sp-9);
  overflow: hidden;
}
.final-cta__glow {
  position: absolute;
  bottom: -260px; left: 50%; translate: -50% 0;
  width: 900px; height: 560px;
  background: radial-gradient(circle, var(--signal-14) 0%, transparent 70%);
}
.final-cta__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
.final-cta h2 { margin-bottom: var(--sp-3); }
.final-cta p.lead { margin-bottom: var(--sp-5); }
.final-cta__note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--slate-dim); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { border-top: 1px solid var(--seam); padding-block: var(--sp-7) var(--sp-5); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-7); }
.footer__brand img { height: 34px; width: auto; display: block; margin-bottom: var(--sp-3); }
.footer__brand p { max-width: 320px; font-size: 0.9375rem; }
.footer__social { display: flex; gap: 10px; margin-top: var(--sp-4); }
.footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--seam);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  color: var(--slate);
}
.footer__social a:hover { border-color: var(--signal); color: var(--signal); }
.footer__social svg { width: 17px; height: 17px; }
.footer__heading { font-family: var(--f-head); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-dim); margin-bottom: var(--sp-3); }
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: 0.9375rem; color: var(--slate); transition: color 0.2s var(--ease); }
.footer__links a:hover { color: var(--paper); }
.footer__contact p { font-size: 0.9375rem; margin-bottom: 4px; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding-top: var(--sp-5); border-top: 1px solid var(--seam);
  font-size: 0.8125rem; color: var(--slate-dim);
}
.footer__legal { display: flex; gap: var(--sp-4); }
.footer__legal a { color: var(--slate-dim); }
.footer__legal a:hover { color: var(--paper); }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   FORM (Contact)
   ========================================================================= */
.form-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--paper); }
.field .req { color: var(--signal); }
.field input, .field select, .field textarea {
  background: var(--ink-raised);
  border: 1px solid var(--seam);
  border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
  color: var(--paper);
  font-size: 0.9375rem;
  transition: border-color 0.25s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--signal); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-dim); }
.form-submit { grid-column: 1 / -1; margin-top: var(--sp-2); }
.form-note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--slate-dim); margin-top: -8px; }

.form-honeypot { display: none; }

.form-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.form-progress__bar { flex: 1; height: 3px; border-radius: 2px; background: var(--seam); overflow: hidden; }
.form-progress__fill { display: block; height: 100%; width: 50%; background: var(--signal); transition: width 0.4s var(--ease); }
.form-progress__label { font-size: var(--fs-small); color: var(--slate-dim); white-space: nowrap; }

.form-step { display: contents; }
.js .form-step:not(.is-active) { display: none; }
.no-js .form-step__next, .no-js .form-step__back { display: none; }

.form-step__actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); }
.form-step__actions .btn-primary { flex: 1; }
@media (max-width: 420px) {
  .form-step__actions { flex-wrap: wrap; }
  .form-step__actions .btn-primary { width: 100%; }
}

.form-success {
  display: none;
  border: 1px solid var(--signal-30);
  background: var(--ink-raised);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  text-align: center;
}
.form-success.is-visible { display: block; }
.form-success .icon-tile { margin-inline: auto; }
.form-success h3 { margin-bottom: var(--sp-2); }

.contact-side .card { margin-bottom: var(--sp-4); }
.contact-side h3 { font-size: 1rem; margin-bottom: 6px; }
.contact-side p { font-size: 0.9375rem; margin: 0; }

@media (max-width: 860px) {
  .form-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
}

/* =========================================================================
   BREADCRUMB
   ========================================================================= */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; color: var(--slate-dim);
  margin-bottom: var(--sp-4);
}
.breadcrumb a { color: var(--slate-dim); }
.breadcrumb a:hover { color: var(--paper); }
.breadcrumb svg { width: 12px; height: 12px; }

.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--sp-7));
  padding-bottom: var(--sp-6);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero__glow {
  position: absolute;
  top: -200px;
  right: -160px;
  width: 700px;
  height: 560px;
  background:
    radial-gradient(circle, rgba(255,184,0,0.20) 0%, transparent 68%),
    radial-gradient(ellipse 260px 220px at 30% 70%, rgba(255,164,0,0.10) 0%, transparent 75%);
  filter: blur(20px);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero__eyebrow { margin-bottom: var(--sp-4); }
.page-hero h1 { max-width: 760px; }
.page-hero p.lead { max-width: 620px; margin-top: var(--sp-4); }

/* =========================================================================
   PROSE (Privacy / Terms)
   ========================================================================= */
.prose h2 { font-size: 1.375rem; margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--sp-3); max-width: 720px; }
.prose ul { margin-bottom: var(--sp-3); padding-left: 1.2rem; list-style: disc; max-width: 720px; }
.prose li { margin-bottom: 6px; color: var(--slate); }
.notice-banner {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--signal-30);
  background: var(--signal-08);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-7);
  max-width: 720px;
}
.notice-banner svg { flex: none; width: 20px; height: 20px; color: var(--signal); margin-top: 2px; }
.notice-banner p { margin: 0; font-size: 0.9375rem; color: var(--paper); }

/* =========================================================================
   UTILITIES
   ========================================================================= */
.mt-0 { margin-top: 0; }
.center-col { max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================================
   Mobile/tablet smoke (homepage hero only, scoped to body.page-home) and the
   right-side vertical menu drawer with hover glow (sitewide, all pages).

   The smoke itself is CSS-only: three radial gradients warped through an SVG
   feDisplacementMap (#smokeWarp, defined once in index.html) and drifted
   with a slow transform animation -- the same radial-gradient + blur + drift
   idea as .hero__glow above, just tuned to read as a plume instead of a
   blob. This replaced a 46 MB, 240-frame animated smoke-gold.webp that also
   carried a visible third-party watermark baked into every frame; the new
   version is a few hundred bytes of CSS, has no source resolution to run
   out of, and needs no image request at all.
   ========================================================================= */
.hero__smoke { display: none; }

@keyframes smoke-drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-4%, 3%) scale(1.12) rotate(3deg); }
  100% { transform: translate(3%, -4%) scale(0.95) rotate(-3deg); }
}

@media (max-width: 1020px) {
  .page-home .hero {
    background: radial-gradient(ellipse 110% 85% at 50% 32%, #0c0c0c 0%, #000000 72%);
  }
  .page-home .hero__glow { opacity: 0.12; }
  .page-home .hero__smoke {
    display: block;
    position: absolute;
    inset: -6% -10%;
    background:
      radial-gradient(ellipse 42% 30% at 32% 60%, rgba(255,184,0,0.55) 0%, transparent 70%),
      radial-gradient(ellipse 34% 24% at 62% 42%, rgba(255,164,0,0.40) 0%, transparent 72%),
      radial-gradient(ellipse 28% 20% at 48% 78%, rgba(255,184,0,0.30) 0%, transparent 75%);
    filter: url(#smokeWarp) blur(26px);
    opacity: 0.8;
    animation: smoke-drift 16s ease-in-out infinite alternate;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .hero__smoke { display: none; }
}

/* Right-side vertical drawer (sitewide) */
.mobile-menu {
  inset: 0 0 0 auto;
  width: min(82vw, 340px);
  padding: calc(var(--nav-h) + 24px) 20px 28px;
  gap: var(--sp-5);
  background: linear-gradient(180deg, #101010 0%, var(--ink) 100%);
  border-left: 1px solid var(--seam);
  box-shadow: none;
  visibility: hidden;
  transform: translateX(calc(100% + 40px));
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), visibility 0s linear 0.45s;
}
.mobile-menu::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255,184,0,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: -24px 0 60px rgba(0,0,0,0.6);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), visibility 0s;
}
.mobile-menu__links { gap: 6px; position: relative; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.2rem;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 12px;
  transform: translateX(18px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
              color 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              text-shadow 0.25s var(--ease);
}
.mobile-menu__link::after {
  content: '\203A';
  font-size: 1.4rem;
  color: var(--slate-dim);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible,
.mobile-menu__link:active {
  color: var(--signal);
  background: linear-gradient(90deg, rgba(255,184,0,0.10), rgba(255,184,0,0.02));
  border-color: rgba(255,184,0,0.22);
  box-shadow: 0 0 22px rgba(255,184,0,0.14);
  text-shadow: 0 0 14px rgba(255,184,0,0.45);
}
.mobile-menu.is-open .mobile-menu__link:hover,
.mobile-menu.is-open .mobile-menu__link:focus-visible,
.mobile-menu.is-open .mobile-menu__link:active { transition-delay: 0s; }
.mobile-menu__link:hover::after,
.mobile-menu__link:active::after { color: var(--signal); transform: translateX(3px); }

.menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }

/* Mild glow on the desktop nav links too (homepage) */
.navbar__link { transition: color 0.2s var(--ease), text-shadow 0.25s var(--ease); }
.navbar__link:hover { color: var(--paper); text-shadow: 0 0 12px rgba(255,184,0,0.45); }

/* =========================================================================
   Business-review fixes
   ========================================================================= */
.hero__note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--slate); }

/* Why Upshift: the promise sits in a framed card under the section heading */
.philosophy__box {
  max-width: 860px; margin: var(--sp-6) auto 0; padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--seam); border-radius: var(--r-lg); background: var(--ink);
}
.philosophy__box .philosophy__no { font-size: clamp(1.375rem, 2vw + 0.75rem, 2rem); }
.philosophy__box .philosophy__yes { font-size: clamp(1.125rem, 1.4vw + 0.75rem, 1.5rem); }

/* Thumb-friendly tap targets on phones (about 44px), without changing the look */
@media (max-width: 760px) {
  .footer__links { gap: 0; }
  .footer__links a, .footer__legal a, .footer__contact a, .breadcrumb a { display: inline-block; padding-block: 11px; }
  .quick-jump__link { min-height: 44px; display: inline-flex; align-items: center; }
  .link-arrow { position: relative; }
  .link-arrow::before { content: ''; position: absolute; inset: -12px -6px; }
  .footer__social a { width: 44px; height: 44px; }
}

/* Laptops/desktops: the gold smoke as a right-hand accent, same CSS-only
   technique as the mobile version above -- no fixed source resolution, so
   it stays sharp at any viewport width instead of being sized to protect
   a 500px source clip. */
@media (min-width: 1021px) {
  .page-home .hero__smoke {
    display: block; position: absolute; inset: auto;
    right: -9%; bottom: 4%;
    width: min(50vw, 760px); aspect-ratio: 500 / 333;
    background:
      radial-gradient(ellipse 42% 30% at 32% 60%, rgba(255,184,0,0.55) 0%, transparent 70%),
      radial-gradient(ellipse 34% 24% at 62% 42%, rgba(255,164,0,0.40) 0%, transparent 72%),
      radial-gradient(ellipse 28% 20% at 48% 78%, rgba(255,184,0,0.30) 0%, transparent 75%);
    filter: url(#smokeWarp) blur(20px);
    opacity: 0.55;
    animation: smoke-drift 18s ease-in-out infinite alternate;
    /* feather every edge so the container's rectangle never shows as a hard line */
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
  }
}
@media (min-width: 1021px) and (prefers-reduced-motion: reduce) {
  .page-home .hero__smoke { display: none; }
}

/* =========================================================================
   SCROLL EXPERIENCE (Nixtio-inspired)
   1. Floating pill navbar
   2. Stacking panels -- each section slides up over the previous one
   3. Scroll-linked word-by-word headline reveal
   (4. Desktop-only gliding scroll lives entirely in main.js)
   Every effect is scoped to .js, so with JavaScript off the site renders as
   a normal, fully visible page; 2 and 3 are also off under reduced motion.
   ========================================================================= */

/* ---------- 1. Floating pill navbar ----------
   The header is taken out of the page flow and fixed to the viewport. The
   heroes already reserve var(--nav-h) of top padding, so nothing shifts.
   (Previously .navbar was sticky *inside* a header of its own height, which
   meant it actually scrolled away after the first 78px.) */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 12px var(--pad) 0;
  pointer-events: none;
}
.navbar {
  position: relative;
  top: auto;
  pointer-events: auto;
  max-width: var(--container);
  height: 64px;
  margin-inline: auto;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(14,14,14,0.62);
  box-shadow: 0 10px 34px rgba(0,0,0,0.35);
}
.navbar.is-scrolled { border-color: rgba(255,255,255,0.1); background: rgba(14,14,14,0.88); }
.navbar__inner { padding-inline: 22px 8px; }
.navbar .brand img { height: 36px; }
.navbar .navbar__cta { border-radius: 999px; padding-block: 0.72rem; }
@media (max-width: 1020px) {
  header { padding: 10px 12px 0; }
  .navbar { height: 58px; }
  .navbar__inner { padding-inline: 18px 10px; }
  .navbar .brand img { height: 32px; }
}
footer { position: relative; z-index: 1; }

/* ---------- 2. Stacking panels ----------
   Sections become sticky "cards". --stick-top is set per section by main.js
   to min(0, viewportHeight - sectionHeight): a section taller than the
   screen scrolls normally until its *bottom* reaches the bottom of the
   viewport, and only then holds still -- so no content is ever hidden --
   while the next section slides up over it with rounded corners and a
   shadow. Later sections paint above earlier ones because they come later
   in the DOM and are all positioned. */
@media (prefers-reduced-motion: no-preference) {
  .js main > section { position: relative; background-color: var(--ink); }
  .js main > section.section--raised { background-color: var(--ink-raised); }
  .js main > section.stack-panel { position: sticky; top: var(--stick-top, 0px); }
  .js main > section.stack-panel + section {
    border-top: 1px solid rgba(255,255,255,0.07);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -30px 60px rgba(0,0,0,0.55);
  }
  @media (max-width: 860px) {
    .js main > section.stack-panel + section { border-radius: 22px 22px 0 0; }
  }
}

/* ---------- 3. Word-by-word headline reveal ----------
   main.js wraps each word in .w with --i (its index) and sets --p (0 -> 1)
   on the heading as it travels up the screen. Each word fades from dim to
   full over one step of --p, in reading order, so the heading "fills in"
   line by line -- and un-fills if you scroll back up. */
.js .word-reveal .w {
  opacity: clamp(0.18, calc(var(--p, 1) * (var(--n) + 1.5) - var(--i)), 1);
  transition: opacity 0.12s linear;
}
@media (prefers-reduced-motion: reduce) {
  .js .word-reveal .w { opacity: 1 !important; }
}

/* The closing CTA sits over a stuck panel; promoting it to its own layer
   stops mobile browsers repainting that overlap as you scroll into it. */
.final-cta { transform: translateZ(0); }

/* Phones/tablets: the homepage hero already carries the gold smoke layer, so
   the glow sits back rather than doubling up on it (the old fixed-size glow
   was dimmed to 0.12 here for the same reason). Sized from vw instead of
   vmax, since on a tall phone vmax is the height and blows the glow up. */
@media (max-width: 1020px) {
  .page-home .hero__glow {
    top: -10%; width: 160%; height: 118%;
    background-image: image-set(url("../assets/glow-1280.webp") type("image/webp"),
                                url("../assets/glow-1280.png") type("image/png"));
    background-image: -webkit-image-set(url("../assets/glow-1280.webp") type("image/webp"),
                                        url("../assets/glow-1280.png") type("image/png"));
    animation: hero-drift 24s ease-in-out infinite alternate,
               hero-pulse-sm 5.5s ease-in-out infinite;
  }
}
@keyframes hero-pulse-sm {
  0%, 100% { opacity: 0.20; }
  50%      { opacity: 0.38; }
}
@media (max-width: 1020px) and (prefers-reduced-motion: reduce) {
  .page-home .hero__glow { animation: none; opacity: 0.2; }
}

/* Callouts on phones: the desktop padding (28px/40px) and h3-sized text are
   too heavy at 390px wide, where the box is nearly full width. */
@media (max-width: 640px) {
  .callout { padding: var(--sp-3) var(--sp-4); border-radius: 0 10px 10px 0; margin-top: var(--sp-4); }
  .callout p { font-size: 1.0625rem; line-height: 1.45; }
  /* the pricing section is text-heavy; close the gap under its heading a little */
  #pricing .section-head { margin-bottom: var(--sp-4); }
}