/** Shopify CDN: Minification failed

Line 273:13 Unexpected "@keyframes"
Line 274:2 Unexpected "0%"
Line 275:2 Unexpected "50%"
Line 276:2 Unexpected "100%"
Line 1105:272 Unexpected "@keyframes"
Line 1106:4 Unexpected "0%"
Line 1107:4 Unexpected "50%"

**/



.sp-section *,  *::before,  *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body, .sp-section h1, .sp-section h2, .sp-section h3, .sp-section h4, .sp-section h5, .sp-section h6, .sp-section p, .sp-section ul, .sp-section ol, .sp-section dl, .sp-section dd, .sp-section figure, .sp-section blockquote { margin: 0; }.sp-section ul, .sp-section ol { padding: 0; list-style: none; }.sp-section img, .sp-section picture, .sp-section video, .sp-section svg { display: block; max-width: 100%; height: auto; }.sp-section a { color: inherit; text-decoration: none; }.sp-section button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }.sp-section input, .sp-section select, .sp-section textarea { font: inherit; color: inherit; }.sp-section hr { border: 0; border-top: 1px solid var(--border); margin: 0; }


body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" on, "cv11" on;
}

::selection { background: var(--copper); color: var(--bone); }.sp-section .progress-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--progress-h); z-index: var(--z-progress);
  background: transparent; pointer-events: none;
}.sp-section .progress-bar__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper-h) 100%);
  transform-origin: left;
  transition: width var(--t-fast) linear;
}.sp-section .display-xl, .sp-section .display-l, .sp-section .display-m, .sp-section .display-s {
  font-family: var(--serif);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  text-wrap: balance;
  font-feature-settings: "ss01" on, "ss02" on;
}.sp-section .display-xl {
  font-size: var(--t-display-xl);
  line-height: var(--lh-display-tight);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
}.sp-section .display-l { font-size: var(--t-display-l); font-variation-settings: "wght" 400, "opsz" 96; }.sp-section .display-m { font-size: var(--t-display-m); font-weight: 400; font-variation-settings: "wght" 400, "opsz" 56; letter-spacing: var(--tracking-h2); }.sp-section .display-s { font-size: var(--t-display-s); font-weight: 400; font-variation-settings: "wght" 400, "opsz" 48; letter-spacing: var(--tracking-h2); }.sp-section h1 { font-size: var(--t-h1); line-height: var(--lh-heading); font-family: var(--serif); font-weight: 400; letter-spacing: var(--tracking-h2); font-variation-settings: "wght" 400, "opsz" 56; color: var(--text); }.sp-section h2 { font-size: var(--t-h2); line-height: var(--lh-heading); font-family: var(--serif); font-weight: 400; letter-spacing: var(--tracking-h2); font-variation-settings: "wght" 400, "opsz" 56; color: var(--text); }.sp-section h3 { font-size: var(--t-h3); line-height: var(--lh-heading); font-family: var(--sans); font-weight: 600; letter-spacing: var(--tracking-h3); color: var(--text); }.sp-section h4 { font-size: var(--t-h4); line-height: var(--lh-heading); font-family: var(--sans); font-weight: 600; letter-spacing: 0; color: var(--text); }.sp-section .editorial {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--copper);
}.sp-section .section--dark .editorial { color: var(--copper-h); }.sp-section .dot-mark {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  background: var(--copper);
  border-radius: 50%;
  margin-left: 0.04em;
  vertical-align: baseline;
  transform: translateY(-0.06em);
}.sp-section p { max-width: 65ch; color: var(--text); text-wrap: pretty; }.sp-section p + p { margin-top: var(--sp-4); }.sp-section .lead { font-size: var(--t-body-lg); color: var(--text-mute); line-height: 1.55; max-width: 60ch; }.sp-section .eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--sans); font-weight: 600;
  font-size: var(--t-eyebrow); line-height: 1;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--copper);
}.sp-section .eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--copper); flex-shrink: 0;
}.sp-section .mono { font-family: var(--mono); letter-spacing: var(--tracking-mono); font-variant-numeric: tabular-nums; }.sp-section .text-mute { color: var(--text-mute); }.sp-section .text-soft { color: var(--text-soft); }.sp-section .text-accent { color: var(--accent); }.sp-section .italic { font-style: italic; }.sp-section .pull-quote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2.8vw, 36px); line-height: 1.35;
  color: var(--text);
  border-left: 2px solid var(--copper);
  padding-left: var(--sp-5);
  max-width: var(--max-w-prose);
  letter-spacing: -0.01em;
}.sp-section .pull-quote cite {
  display: block; margin-top: var(--sp-4);
  font-style: normal; font-family: var(--sans);
  font-size: var(--t-meta); color: var(--text-soft);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}.sp-section .container {
  width: 100%; max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}.sp-section .container--narrow { max-width: 920px; }.sp-section .container--prose { max-width: var(--max-w-prose); }.sp-section .section { padding-block: var(--section-py); position: relative; }.sp-section .section--tight { padding-block: var(--section-py-tight); }.sp-section .section--dark {
  background: var(--ink); color: var(--text-on-dark);
}.sp-section .section--dark .display-xl, .sp-section .section--dark .display-l, .sp-section .section--dark .display-m, .sp-section .section--dark .display-s, .sp-section .section--dark h1, .sp-section .section--dark h2, .sp-section .section--dark h3, .sp-section .section--dark h4 { color: var(--text-on-dark); }.sp-section .section--dark p { color: var(--text-on-ink); }.sp-section .section--dark .text-soft, .sp-section .section--dark .text-mute { color: var(--text-on-ink-soft); }.sp-section .section--alt { background: var(--bg-alt); }.sp-section .section--dark::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80vw; max-width: 1400px; height: 200px;
  background: radial-gradient(ellipse at top, var(--ink-glow) 0%, transparent 70%);
  pointer-events: none;
}.sp-section .stack > * + * { margin-top: var(--sp-5); }.sp-section .stack-lg > * + * { margin-top: var(--sp-7); }.sp-section .stack-sm > * + * { margin-top: var(--sp-3); }.sp-section .stack-xs > * + * { margin-top: var(--sp-2); }.sp-section .sp-grid { display: grid; gap: var(--sp-6); }.sp-section .sp-grid-2 { grid-template-columns: repeat(2, 1fr); }.sp-section .sp-grid-3 { grid-template-columns: repeat(3, 1fr); }.sp-section .sp-grid-4 { grid-template-columns: repeat(4, 1fr); }.sp-section .sp-grid-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

@media (max-width: 960px) {
.sp-section .sp-grid-4 { grid-template-columns: repeat(2, 1fr); }.sp-section .sp-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.sp-section .sp-grid-4, .sp-section .sp-grid-3, .sp-section .sp-grid-2 { grid-template-columns: 1fr; }
}.sp-section .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: center; }.sp-section .split--reverse > :first-child { order: 2; }
@media (max-width: 960px) {
.sp-section .split { grid-template-columns: 1fr; gap: var(--sp-7); }.sp-section .split--reverse > :first-child { order: 0; }
}.sp-section .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }.sp-section .center { text-align: center; }.sp-section .rule-h {
  width: 56px; height: 1px; background: var(--copper); margin-block: var(--sp-6);
}.sp-section .rule-h--full { width: 100%; }.sp-section .btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 14px 24px;
  font-family: var(--sans); font-weight: 600; font-size: var(--t-body-sm);
  letter-spacing: var(--tracking-button);
  border-radius: var(--r-sm);
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  will-change: transform;
}.sp-section .btn:hover { transform: translateY(-1px); }.sp-section .btn:active { transform: translateY(0); }.sp-section .btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }.sp-section .btn--primary {
  background: var(--copper); color: var(--bone);
  box-shadow: 0 1px 0 var(--patina), 0 8px 24px -10px rgba(184, 115, 51, 0.55);
}.sp-section .btn--primary:hover {
  background: var(--copper-h);
  box-shadow: 0 1px 0 var(--patina), 0 14px 32px -10px rgba(184, 115, 51, 0.70);
}.sp-section .btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
}.sp-section .btn--ghost:hover { background: var(--ink); color: var(--bone); }.sp-section .section--dark .btn--ghost, .sp-section .hero--full .btn--ghost { color: var(--bone); border-color: rgba(244, 241, 236, 0.40); }.sp-section .section--dark .btn--ghost:hover, .sp-section .hero--full .btn--ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }.sp-section .btn--link {
  padding: 0;
  background: transparent; color: var(--ink);
  border-bottom: 1.5px solid var(--copper);
  border-radius: 0;
  padding-bottom: 2px;
  font-weight: 500;
}.sp-section .btn--link:hover { color: var(--copper); transform: none; }.sp-section .section--dark .btn--link { color: var(--bone); }.sp-section .section--dark .btn--link:hover { color: var(--copper-h); }.sp-section .btn--lg { padding: 18px 32px; font-size: var(--t-body); }.sp-section .btn--sm { padding: 10px 18px; font-size: var(--t-meta); }.sp-section .cta-cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }.sp-section .nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(244, 241, 236, 0.0);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease-out),
              backdrop-filter var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}.sp-section .nav.is-scrolled {
  background: rgba(244, 241, 236, 0.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(14, 26, 36, 0.04);
}.sp-section .nav--on-dark:not(.is-scrolled) .brand, .sp-section .nav--on-dark:not(.is-scrolled) .nav__menu a { color: var(--bone); }.sp-section .nav--on-dark:not(.is-scrolled) .nav__lang { color: rgba(244, 241, 236, 0.60); border-color: rgba(244, 241, 236, 0.25); }.sp-section .nav--on-dark:not(.is-scrolled) .nav__burger span, .sp-section .nav--on-dark:not(.is-scrolled) .nav__burger span::before, .sp-section .nav--on-dark:not(.is-scrolled) .nav__burger span::after { background: var(--bone); }.sp-section .nav__inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
}
@media (max-width: 640px) {
.sp-section .nav__inner { height: var(--nav-h-mobile); }
}.sp-section .brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1;
  color: var(--ink); letter-spacing: -0.018em;
  font-variation-settings: "opsz" 36;
  transition: color var(--t-base);
}.sp-section .brand__mark {
  display: inline-block; width: 22px; height: 12px;
  position: relative; top: 1px;
}.sp-section .nav__menu {
  display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px);
  font-family: var(--sans); font-size: 15px; font-weight: 500;
}.sp-section .nav__menu a {
  color: var(--ink);
  padding: 8px 0;
  position: relative;
  transition: color var(--t-fast);
}.sp-section .nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1.5px; background: var(--copper); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}.sp-section .nav__menu a:hover::after, .sp-section .nav__menu a[aria-current="page"]::after { transform: scaleX(1); }.sp-section .nav__right { display: flex; align-items: center; gap: var(--sp-4); }.sp-section .nav__lang {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft);
  padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: color var(--t-base), border-color var(--t-base);
}.sp-section .nav__burger {
  display: none; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}.sp-section .nav__burger span {
  display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative;
  transition: background var(--t-base);
}.sp-section .nav__burger span::before, .sp-section .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink);
  transition: transform var(--t-base) var(--ease-out), background var(--t-base);
}.sp-section .nav__burger span::before { top: -7px; }.sp-section .nav__burger span::after { top: 7px; }

@media (max-width: 1100px) {
.sp-section .nav__menu, .sp-section .nav__right .btn { display: none; }.sp-section .nav__burger { display: inline-flex; }
}.sp-section .drawer {
  position: fixed; inset: 0 0 0 auto; width: min(380px, 86vw); z-index: var(--z-drawer);
  background: var(--bone); color: var(--ink);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-mech);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-6);
}.sp-section .drawer.is-open { transform: translateX(0); box-shadow: var(--shadow-deep); }.sp-section .drawer__close {
  align-self: flex-end; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--ink); line-height: 1;
}.sp-section .drawer__menu {
  display: flex; flex-direction: column; gap: var(--sp-3);
  font-family: var(--serif); font-size: 28px; line-height: 1.2;
  letter-spacing: var(--tracking-h2);
  font-variation-settings: "opsz" 36;
}.sp-section .drawer__menu a {
  padding: 10px 0; border-bottom: 1px solid var(--border);
  transition: color var(--t-fast);
}.sp-section .drawer__menu a:hover { color: var(--copper); }.sp-section .drawer__cta { margin-top: auto; }.sp-section .drawer-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(14, 26, 36, 0.50);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}.sp-section .drawer-overlay.is-open { opacity: 1; pointer-events: auto; }.sp-section .hero {
  position: relative;
  padding-block: clamp(80px, 12vw, 176px);
  overflow: hidden;
}.sp-section .hero--full {
  min-height: clamp(620px, 92vh, 920px);
  display: grid; align-items: center;
  color: var(--bone);
  background: var(--ink);
  
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
}
@media (max-width: 640px) {
.sp-section .hero--full {
    margin-top: calc(-1 * var(--nav-h-mobile));
    padding-top: var(--nav-h-mobile);
  }
}.sp-section .hero--full .editorial { color: var(--copper-h); }.sp-section .hero--full h1 { font-weight: 400; }.sp-section .hero__atmosphere {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 50% at 78% 22%, rgba(184, 115, 51, 0.24) 0%, transparent 60%),
    radial-gradient(50% 45% at 12% 80%, rgba(42, 57, 66, 0.45) 0%, transparent 65%),
    radial-gradient(45% 60% at 50% 110%, rgba(184, 115, 51, 0.10) 0%, transparent 70%);
  pointer-events: none;
  animation: drift var(--t-drift) ease-in-out infinite alternate;
}
/* Only show solid ink fallback when hero has NO video/iframe (placeholder scenario) */
.sp-section .hero--full:not(:has(video)):not(:has(iframe)):not(:has(img)) .hero__atmosphere {
  background-color: var(--ink);
}.sp-section .hero__atmosphere::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(244, 241, 236, 0.015) 2px, rgba(244, 241, 236, 0.015) 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}.sp-section .hero__atmosphere::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top, transparent 0%, rgba(14, 26, 36, 0.20) 65%, rgba(14, 26, 36, 0.45) 100%);
  pointer-events: none;
}.sp-section @keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1%, 0) scale(1.02); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.04); }
}

.hero--full .hero__content { position: relative; z-index: 1; }.sp-section .hero--full .display-xl, .sp-section .hero--full .display-l, .sp-section .hero--full h1, .sp-section .hero--full h2 { color: var(--bone); }.sp-section .hero--full .lead, .sp-section .hero--full p { color: var(--text-on-ink); }.sp-section .hero--full .lead { max-width: 640px; }.sp-section .hero__eyebrow { color: var(--copper); }.sp-section .hero__discreet {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-on-ink-faint);
  margin-top: var(--sp-7);
  text-transform: uppercase;
}.sp-section .hero--compact {
  padding-block: clamp(120px, 14vw, 192px) clamp(56px, 7vw, 112px);
  background: var(--bone);
  position: relative;
}.sp-section .hero--compact::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 200px;
  background: radial-gradient(50% 60% at 80% 100%, rgba(184, 115, 51, 0.06) 0%, transparent 70%);
  pointer-events: none;
}.sp-section .hero--compact h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--t-display-m);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  font-variation-settings: "opsz" 72;
}.sp-section .sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky-cta);
  background: rgba(14, 26, 36, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(184, 115, 51, 0.30);
  padding: var(--sp-4) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  transform: translateY(100%);
  transition: transform var(--t-base) var(--ease-out);
  color: var(--bone);
}.sp-section .sticky-cta.is-visible { transform: translateY(0); }.sp-section .sticky-cta__text {
  font-family: var(--sans); font-size: var(--t-body-sm); font-weight: 500;
  color: var(--bone);
}.sp-section .sticky-cta__text strong { color: var(--copper); font-weight: 600; }.sp-section .sticky-cta .btn { white-space: nowrap; }

@media (max-width: 640px) {
.sp-section .sticky-cta { padding: var(--sp-3) var(--sp-4); }.sp-section .sticky-cta__text { font-size: 13px; }.sp-section .sticky-cta__text--mobile-hide { display: none; }
}.sp-section .stats-bar {
  background: var(--ink); color: var(--bone);
  padding-block: var(--sp-10);
  position: relative;
  overflow: hidden;
}.sp-section .stats-bar::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 70% at 50% 0%, rgba(184, 115, 51, 0.10) 0%, transparent 60%);
  pointer-events: none;
}.sp-section .stats-bar__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-7);
  align-items: end;
  position: relative; z-index: 1;
}.sp-section .stats-bar .stat__num {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(64px, 9vw, 128px); line-height: 0.92;
  color: var(--bone);
  letter-spacing: -0.030em;
  font-variant-numeric: tabular-nums;
  /* font-variation-settings removed — let Fraunces use natural opsz */
  display: block;
}.sp-section .stats-bar .stat:nth-child(2) .stat__num { color: var(--copper); }.sp-section .stats-bar .stat__caption {
  font-family: var(--sans); font-size: var(--t-meta);
  color: var(--text-on-ink-soft);
  margin-top: var(--sp-3);
  max-width: 240px; line-height: 1.5;
}.sp-section .stats-bar .stat__caption em {
  font-style: normal;
  color: var(--copper);
  font-weight: 500;
}
@media (max-width: 960px) {
.sp-section .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}
@media (max-width: 480px) {
.sp-section .stats-bar__grid { grid-template-columns: 1fr; }
}.sp-section .card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  display: flex; flex-direction: column; gap: var(--sp-4);
  height: 100%;
  position: relative;
  overflow: hidden;
}.sp-section .card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 50% at 50% 0%, rgba(184, 115, 51, 0.0) 0%, transparent 70%);
  transition: background var(--t-base) var(--ease-out);
  pointer-events: none;
  border-radius: inherit;
}.sp-section .card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: var(--copper);
}.sp-section .card:hover::before {
  background: radial-gradient(80% 50% at 50% 0%, rgba(184, 115, 51, 0.08) 0%, transparent 70%);
}.sp-section .card__eyebrow {
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
}.sp-section .card__title {
  font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2;
  letter-spacing: var(--tracking-h3);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  color: var(--ink);
}.sp-section .card__body { font-size: var(--t-body-sm); color: var(--text-mute); line-height: 1.55; }.sp-section .card__tags { display: flex; flex-wrap: wrap; gap: 6px; }.sp-section .card__tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-soft);
  padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
}.sp-section .card__cta {
  margin-top: auto;
  font-weight: 600; font-size: var(--t-body-sm); color: var(--ink);
  border-bottom: 1.5px solid var(--copper); padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--t-fast), transform var(--t-fast);
}.sp-section .card:hover .card__cta { color: var(--copper); transform: translateX(2px); }.sp-section .card--recommended {
  border-color: var(--copper); border-width: 2px;
  position: relative;
}.sp-section .card--recommended::after {
  content: "Recommended"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--copper); color: var(--bone);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--r-pill);
  z-index: 2;
  font-weight: 500;
}.sp-section .tier {
  display: flex; flex-direction: column; gap: var(--sp-4);
}.sp-section .tier__price {
  font-family: var(--serif); font-size: clamp(44px, 5.2vw, 72px); line-height: 1;
  color: var(--copper); letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 96;
  font-weight: 300;
}.sp-section .tier__sub {
  font-family: var(--mono); font-size: var(--t-meta);
  color: var(--text-soft); letter-spacing: var(--tracking-mono);
}.sp-section .tier__includes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }.sp-section .tier__includes li {
  position: relative; padding-left: 22px;
  font-size: var(--t-body-sm); color: var(--text-mute);
  line-height: 1.5;
}.sp-section .tier__includes li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 1.5px;
  background: var(--copper);
}.sp-section .media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ink);
  display: block;
}.sp-section .media__el {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  
  filter: saturate(0.90) contrast(1.02) brightness(0.96);
}.sp-section .media--ratio-16-9 { aspect-ratio: 16 / 9; }.sp-section .media--ratio-21-9 { aspect-ratio: 21 / 9; }.sp-section .media--ratio-4-3 { aspect-ratio: 4 / 3; }.sp-section .media--ratio-4-5 { aspect-ratio: 4 / 5; }.sp-section .media--ratio-1-1 { aspect-ratio: 1 / 1; }.sp-section .media--ratio-3-2 { aspect-ratio: 3 / 2; }.sp-section .media--hero {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 0;
}.sp-section .media--hero .media__el { filter: saturate(0.80) contrast(1.05) brightness(0.70); }.sp-section .card .media__el { transition: transform var(--t-slow) var(--ease-out); }.sp-section .card:hover .media__el { transform: scale(1.04); }.sp-section .media__caption {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: rgba(244, 241, 236, 0.75); text-transform: uppercase;
  background: rgba(14, 26, 36, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 3px 8px; border-radius: var(--r-sm);
}.sp-section .media--diagram { background: var(--bone-2); }.sp-section .media--diagram .media__el { filter: none; mix-blend-mode: multiply; }.sp-section .placeholder {
  position: relative;
  border: 1.5px dashed var(--copper);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(184, 115, 51, 0.04) 14px 15px),
    var(--bone-2);
  color: var(--slate);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  overflow: hidden;
}.sp-section .placeholder__inner {
  text-align: center;
  font-family: var(--mono);
  font-size: var(--t-meta); letter-spacing: var(--tracking-mono);
  color: var(--slate);
  line-height: 1.5;
}.sp-section .placeholder__type {
  display: inline-block;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 500; font-size: 11px;
  color: var(--copper);
  padding: 4px 10px; border: 1px solid var(--copper); border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}.sp-section .placeholder__label { font-weight: 500; color: var(--ink); }.sp-section .placeholder__meta { color: var(--text-soft); font-size: 11px; margin-top: var(--sp-2); }.sp-section .placeholder--16-9 { aspect-ratio: 16 / 9; }.sp-section .placeholder--21-9 { aspect-ratio: 21 / 9; }.sp-section .placeholder--4-3 { aspect-ratio: 4 / 3; }.sp-section .placeholder--4-5 { aspect-ratio: 4 / 5; }.sp-section .placeholder--1-1 { aspect-ratio: 1 / 1; }.sp-section .placeholder--3-2 { aspect-ratio: 3 / 2; }.sp-section .placeholder--hero {
  position: absolute;
  bottom: var(--sp-6); right: var(--sp-6); z-index: 1;
  border-color: rgba(184, 115, 51, 0.40);
  border-radius: var(--r-sm);
  background: rgba(14, 26, 36, 0.40);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  align-items: flex-end; justify-content: flex-end;
  padding: var(--sp-3) var(--sp-4);
  max-width: 280px;
  font-size: 10px;
}.sp-section .placeholder--hero .placeholder__inner {
  color: rgba(244, 241, 236, 0.75);
  text-align: right;
  font-size: 10px;
}.sp-section .placeholder--hero .placeholder__type { color: var(--copper); border-color: var(--copper); font-size: 10px; }.sp-section .placeholder--hero .placeholder__label { color: rgba(244, 241, 236, 0.85); font-size: 11px; }.sp-section .placeholder--hero .placeholder__meta { color: rgba(244, 241, 236, 0.50); font-size: 10px; }

@media (max-width: 640px) {
.sp-section .placeholder--hero {
    bottom: var(--sp-4); right: var(--sp-4); max-width: 160px;
    padding: var(--sp-2) var(--sp-3);
  }.sp-section .placeholder--hero .placeholder__label, .sp-section .placeholder--hero .placeholder__meta { display: none; }
}.sp-section .placeholder--diagram { background: var(--bone-2); }.sp-section .placeholder--map { background: var(--bone-2); }.sp-section .process {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-5);
  position: relative;
}.sp-section .process::before {
  content: ""; position: absolute; top: 24px; left: 0; right: 0; height: 1px;
  background: var(--copper); opacity: 0.4;
}.sp-section .process__step { position: relative; padding-top: var(--sp-7); }.sp-section .process__step::before {
  content: ""; position: absolute; top: 18px; left: 0; width: 12px; height: 12px;
  border-radius: var(--r-pill); background: var(--copper);
  border: 3px solid var(--bone);
  box-shadow: 0 0 0 1px var(--copper);
}.sp-section .section--alt .process__step::before { border-color: var(--bone-2); }.sp-section .process__num {
  font-family: var(--serif); font-size: clamp(48px, 5vw, 64px); line-height: 1;
  font-weight: 300;
  color: var(--copper); display: block; margin-bottom: var(--sp-3);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: tabular-nums;
}.sp-section .process__name {
  font-family: var(--sans); font-weight: 600; font-size: 17px;
  display: block; margin-bottom: var(--sp-2); color: var(--ink);
}.sp-section .process__desc { font-size: var(--t-body-sm); color: var(--text-mute); line-height: 1.55; }.sp-section .process__meta { font-family: var(--mono); font-size: 11px; color: var(--text-soft); margin-top: var(--sp-2); }

@media (max-width: 960px) {
.sp-section .process { grid-template-columns: 1fr; gap: var(--sp-5); }.sp-section .process::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }.sp-section .process__step { padding-top: 0; padding-left: var(--sp-6); }.sp-section .process__step::before { left: 0; top: 6px; }
}.sp-section .faq { display: flex; flex-direction: column; gap: 0; }.sp-section .faq__item { border-bottom: 1px solid var(--border); }.sp-section .faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  font-family: var(--serif); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3;
  font-weight: 400;
  letter-spacing: var(--tracking-h3);
  color: var(--ink);
  transition: color var(--t-fast);
  font-variation-settings: "opsz" 36;
}.sp-section .faq__item summary::-webkit-details-marker { display: none; }.sp-section .faq__item summary::after {
  content: "+"; font-family: var(--sans); font-weight: 300; font-size: 28px; color: var(--copper);
  transition: transform var(--t-base) var(--ease-out);
  flex-shrink: 0;
}.sp-section .faq__item[open] summary { color: var(--copper); }.sp-section .faq__item[open] summary::after { transform: rotate(45deg); }.sp-section .faq__answer {
  padding: 0 0 var(--sp-6);
  max-width: var(--max-w-prose);
  color: var(--text-mute);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}.sp-section .form { display: flex; flex-direction: column; gap: var(--sp-5); }.sp-section .form__row { display: flex; flex-direction: column; gap: var(--sp-2); }.sp-section .form__label {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-meta);
  color: var(--ink); letter-spacing: 0.02em;
}.sp-section .form__hint { font-size: 12px; color: var(--text-soft); font-style: italic; }.sp-section .form__input, .sp-section .form__select, .sp-section .form__textarea {
  width: 100%; padding: 14px 16px;
  background: var(--bone);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-size: 16px; line-height: 1.4; color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: var(--sans);
}.sp-section .form__input:focus, .sp-section .form__select:focus, .sp-section .form__textarea:focus {
  outline: none; border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.15);
}.sp-section .form__textarea { min-height: 120px; resize: vertical; }.sp-section .form__radio-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }.sp-section .form__radio {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  font-size: var(--t-body-sm); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}.sp-section .form__radio:has(input:checked) { border-color: var(--copper); background: rgba(184, 115, 51, 0.06); }.sp-section .form__radio input { accent-color: var(--copper); }.sp-section .cmp-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: var(--t-body-sm);
}.sp-section .cmp-table th, .sp-section .cmp-table td {
  padding: var(--sp-4) var(--sp-3); text-align: left;
  border-bottom: 1px solid var(--border);
}.sp-section .cmp-table thead th {
  font-family: var(--serif); font-weight: 400; font-size: 20px;
  color: var(--ink); border-bottom: 2px solid var(--copper);
  letter-spacing: var(--tracking-h3);
  font-variation-settings: "opsz" 36;
}.sp-section .cmp-table tbody th { font-weight: 600; color: var(--text-mute); width: 32%; }.sp-section .cmp-table tbody td { text-align: center; color: var(--text-mute); }.sp-section .cmp-table tbody td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }.sp-section .cmp-table .accent { color: var(--copper); font-weight: 600; }

@media (max-width: 720px) {
.sp-section .cmp-table { font-size: var(--t-meta); }.sp-section .cmp-table th, .sp-section .cmp-table td { padding: var(--sp-3) var(--sp-2); }
}.sp-section .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }.sp-section .chip {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-mute);
  padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: transparent; cursor: pointer;
  transition: all var(--t-fast);
  font-weight: 500;
}.sp-section .chip:hover { border-color: var(--copper); color: var(--ink); }.sp-section .chip.is-active { background: var(--ink); color: var(--bone); border-color: var(--ink); }.sp-section .bundle {
  padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bone);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color var(--t-base), transform var(--t-base);
}.sp-section .bundle:hover { border-color: var(--copper); transform: translateY(-2px); }.sp-section .bundle__name { font-family: var(--mono); font-size: var(--t-meta); color: var(--copper); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 500; }.sp-section .bundle__title { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; font-weight: 400; }.sp-section .bundle__price { font-family: var(--mono); font-size: var(--t-body); color: var(--ink); font-variant-numeric: tabular-nums; }.sp-section .timeline { position: relative; padding-left: var(--sp-7); }.sp-section .timeline::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px;
  background: var(--copper); opacity: 0.4;
}.sp-section .timeline__item { position: relative; padding-bottom: var(--sp-6); }.sp-section .timeline__item::before {
  content: ""; position: absolute; left: -53px; top: 8px; width: 10px; height: 10px;
  border-radius: var(--r-pill); background: var(--copper);
  box-shadow: 0 0 0 4px var(--bone), 0 0 0 5px var(--copper);
}.sp-section .timeline__year {
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: var(--tracking-mono); color: var(--copper);
  text-transform: uppercase;
  font-weight: 500;
}.sp-section .timeline__title {
  font-family: var(--sans); font-weight: 600; font-size: 17px;
  margin-top: 4px; color: var(--ink);
}.sp-section .duo {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-5); align-items: stretch;
}.sp-section .duo__card {
  padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bone);
  display: flex; flex-direction: column; gap: var(--sp-3);
}.sp-section .duo__card .card__eyebrow { color: var(--copper); }.sp-section .duo__card h3 {
  font-family: var(--serif); font-size: var(--t-h2); font-weight: 400;
  letter-spacing: var(--tracking-h2);
  font-variation-settings: "opsz" 56;
}.sp-section .duo__bracket {
  display: flex; align-items: center; justify-content: center;
  position: relative; min-width: 80px;
}.sp-section .duo__bracket::before {
  content: ""; position: absolute; top: 20%; bottom: 20%; left: 50%; width: 1px;
  background: var(--copper);
}.sp-section .duo__bracket span {
  background: var(--bone); padding: 8px 12px; border: 1px solid var(--copper); border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--copper); letter-spacing: 0.08em;
  position: relative; z-index: 1;
  font-weight: 500;
}
@media (max-width: 720px) {
.sp-section .duo { grid-template-columns: 1fr; }.sp-section .duo__bracket { min-height: 60px; }.sp-section .duo__bracket::before { left: 50%; top: -10px; bottom: auto; height: 60%; }
}.sp-section .subnav {
  position: sticky; top: var(--nav-h); z-index: 50;
  background: rgba(244, 241, 236, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) 0;
}.sp-section .subnav__inner {
  display: flex; gap: var(--sp-6); justify-content: center;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  flex-wrap: wrap;
}.sp-section .subnav__inner a {
  color: var(--text-mute);
  padding: 6px 0;
  position: relative;
  transition: color var(--t-fast);
}.sp-section .subnav__inner a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--copper); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease-out);
}.sp-section .subnav__inner a:hover { color: var(--ink); }.sp-section .subnav__inner a:hover::after, .sp-section .subnav__inner a.is-active::after { transform: scaleX(1); }.sp-section .subnav__inner a.is-active { color: var(--ink); }
@media (max-width: 640px) {
.sp-section .subnav__inner { gap: var(--sp-4); font-size: 13px; }
}.sp-section .footer {
  background: var(--ink); color: var(--bone);
  padding-block: var(--sp-10) var(--sp-7);
  margin-top: var(--sp-11);
  position: relative;
  overflow: hidden;
}.sp-section .footer::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 90vw; max-width: 1400px; height: 220px;
  background: radial-gradient(ellipse at top, rgba(184, 115, 51, 0.14) 0%, transparent 70%);
  pointer-events: none;
}.sp-section .footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-7);
  position: relative;
}
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }.sp-section .footer__brand {
  font-family: var(--serif); font-size: 28px; color: var(--bone);
  font-weight: 400; letter-spacing: -0.018em;
  font-variation-settings: "opsz" 36;
}.sp-section .footer__tag {
  font-family: var(--serif); font-style: italic; font-size: 18px;
  color: var(--copper); margin-top: var(--sp-2);
  font-weight: 300;
}.sp-section .footer__addr { font-size: var(--t-body-sm); color: var(--text-on-ink); margin-top: var(--sp-4); line-height: 1.6; }.sp-section .footer__addr a { color: var(--text-on-ink); transition: color var(--t-fast); }.sp-section .footer__addr a:hover { color: var(--copper); }.sp-section .footer__col-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--copper);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}.sp-section .footer__list { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-body-sm); color: var(--text-on-ink); }.sp-section .footer__list a { transition: color var(--t-fast); }.sp-section .footer__list a:hover { color: var(--copper); }.sp-section .footer__newsletter {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-3); align-items: stretch;
}.sp-section .footer__newsletter input {
  flex: 1; background: rgba(244, 241, 236, 0.06);
  border: 1px solid rgba(244, 241, 236, 0.18); border-radius: var(--r-sm);
  padding: 10px 14px; color: var(--bone); font-size: var(--t-meta);
  font-family: var(--sans);
}.sp-section .footer__newsletter input::placeholder { color: rgba(244, 241, 236, 0.4); }.sp-section .footer__newsletter input:focus { border-color: var(--copper); outline: none; }.sp-section .footer__newsletter button {
  background: var(--copper); color: var(--bone); border-radius: var(--r-sm);
  padding: 0 16px; font-size: var(--t-meta); font-weight: 600;
  letter-spacing: var(--tracking-button);
  transition: background var(--t-fast);
}.sp-section .footer__newsletter button:hover { background: var(--copper-h); }.sp-section .footer__bottom {
  margin-top: var(--sp-9); padding-top: var(--sp-6);
  border-top: 1px solid rgba(184, 115, 51, 0.40);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4);
  font-size: 12px; color: var(--text-on-ink-soft);
  position: relative;
}.sp-section .footer__bottom a { color: var(--text-on-ink-soft); transition: color var(--t-fast); }.sp-section .footer__bottom a:hover { color: var(--copper); }.sp-section .footer__legal {
  margin-top: var(--sp-5);
  font-size: 11px; line-height: 1.7;
  color: var(--text-on-ink-faint);
  max-width: 880px;
  position: relative;
}.sp-section .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}.sp-section .reveal.is-visible { opacity: 1; transform: translateY(0); }.sp-section .reveal--stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}.sp-section .reveal--stagger.is-visible > * { opacity: 1; transform: translateY(0); }.sp-section .reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }.sp-section .reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }.sp-section .reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }.sp-section .reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }.sp-section .reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }.sp-section .reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }.sp-section .reveal--stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }.sp-section .reveal--stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }.sp-section .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}.sp-section .no-scroll { overflow: hidden; }.sp-section .muted-band {
  padding: var(--sp-4); background: var(--bone-2);
  border-left: 2px solid var(--copper);
  font-size: var(--t-meta); color: var(--text-mute); font-style: italic;
  line-height: 1.55;
}.sp-section .pricing-strip {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: var(--tracking-mono); color: var(--text-soft);
  padding-top: var(--sp-4); margin-top: var(--sp-2);
  border-top: 1px solid var(--copper);
}.sp-section .pricing-strip strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }.sp-section .trust-strip {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bone);
}.sp-section .trust-strip .container { text-align: center; }.sp-section .trust-strip__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--sp-5);
}.sp-section .trust-strip__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--sp-5);
}.sp-section .trust-strip .logo-slot {
  width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0.5;
  padding: 0 var(--sp-2);
  line-height: 1.2;
}.sp-section .trust-strip__caption {
  font-size: 12px;
  font-style: italic;
  margin-top: var(--sp-3);
  text-align: center;
  color: var(--text-soft);
}
@media (max-width: 720px) {
.sp-section .trust-strip__logos { gap: var(--sp-3); }.sp-section .trust-strip .logo-slot { width: 100px; height: 36px; font-size: 10px; }
}.sp-section .hero__sub-line {
  font-size: 14px;
  font-style: italic;
  color: var(--text-soft);
  margin-top: var(--sp-2);
  max-width: 720px;
}.sp-section .tier__price, .sp-section .cmp-table td.mono, .sp-section .pricing-strip strong, .sp-section .stats-bar .stat__num, .sp-section .stat__num, .sp-section .mono.tabular-nums, .sp-section .bundle__price {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}.sp-section .u-mt-2 { margin-top: var(--sp-2); }.sp-section .u-mt-3 { margin-top: var(--sp-3); }.sp-section .u-mt-4 { margin-top: var(--sp-4); }.sp-section .u-mt-5 { margin-top: var(--sp-5); }.sp-section .u-mt-6 { margin-top: var(--sp-6); }.sp-section .u-mt-7 { margin-top: var(--sp-7); }.sp-section .u-mt-9 { margin-top: var(--sp-9); }.sp-section .u-mb-3 { margin-bottom: var(--sp-3); }.sp-section .u-mb-4 { margin-bottom: var(--sp-4); }.sp-section .u-mb-5 { margin-bottom: var(--sp-5); }.sp-section .u-mb-7 { margin-bottom: var(--sp-7); }.sp-section .u-mb-9 { margin-bottom: var(--sp-9); }.sp-section .u-mx-auto { margin-inline: auto; }.sp-section .u-mw-560 { max-width: 560px; }.sp-section .u-mw-640 { max-width: 640px; }.sp-section .u-mw-720 { max-width: 720px; }.sp-section .u-mw-760 { max-width: 760px; }.sp-section .u-mw-800 { max-width: 800px; }.sp-section .u-mw-880 { max-width: 880px; }.sp-section .u-mw-1000 { max-width: 1000px; }.sp-section .u-fs-11 { font-size: 11px; }.sp-section .u-fs-12 { font-size: 12px; }.sp-section .u-fs-13 { font-size: 13px; }.sp-section .u-fs-15 { font-size: 15px; }.sp-section .u-italic { font-style: italic; }.sp-section .u-self-start { align-self: flex-start; }.sp-section .u-on-ink-soft { color: var(--text-on-ink-soft); }.sp-section .u-on-ink-faint { color: var(--text-on-ink-faint); }.sp-section .section--padded-sm {
  padding-block: var(--sp-7);
  border-bottom: 1px solid var(--border);
  background: var(--bone-2);
}.sp-section .cred-card {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}.sp-section .cred-card__eyebrow {
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--sp-2);
  font-weight: 600;
  font-family: var(--sans);
}.sp-section .cred-card__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--copper);
  margin-bottom: var(--sp-2);
  font-variation-settings: "opsz" 36;
  line-height: 1.1;
}.sp-section .cred-card__body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}.sp-section .cred-grid { gap: var(--sp-5); }.sp-section .footer__addr-meta {
  font-size: 11px;
  color: var(--text-on-ink-faint);
  font-style: italic;
}.sp-section .footer__legal strong, .sp-section .u-strong-on-ink {
  color: var(--text-on-ink);
  font-weight: 500;
}.sp-section .form-note {
  font-family: var(--mono);
  font-size: 12px;
  margin-top: var(--sp-3);
  color: var(--copper);
}


@media (max-width: 480px) {
.sp-section .stats-bar__grid { align-items: start; }
}.sp-section body.has-sticky-cta { padding-bottom: 84px; }
@media (max-width: 640px) {
.sp-section body.has-sticky-cta { padding-bottom: 76px; }
}.sp-section .drawer {
  overflow-y: auto;
  padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
}.sp-section .skip-link {
  position: absolute;
  top: -40px;
  left: var(--sp-4);
  background: var(--ink);
  color: var(--bone);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  z-index: 1000;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  transition: top var(--t-fast) var(--ease-out);
  text-decoration: none;
}.sp-section .skip-link:focus { top: var(--sp-3); outline: 2px solid var(--copper); outline-offset: 2px; }.sp-section .u-text-bone { color: var(--bone); }.sp-section .cta-cluster--center { justify-content: center; margin-top: var(--sp-5); }.sp-section .stage-card__row {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  flex-wrap: wrap;
}.sp-section .subnav--mono .subnav__scroll {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  padding-block: var(--sp-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}.sp-section .subnav--mono .subnav__scroll::-webkit-scrollbar { display: none; }.sp-section .subnav--mono .subnav__scroll a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 6px 0;
  white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}.sp-section .subnav--mono .subnav__scroll a:hover, .sp-section .subnav--mono .subnav__scroll a.is-active {
  color: var(--ink);
  border-bottom-color: var(--copper);
}.sp-section .u-mb-3-only { margin: 0 0 var(--sp-3); }.sp-section .u-fs-14 { font-size: 14px; }.sp-section .u-meta-copper { font-size: 12px; color: var(--copper); }.sp-section .u-mono-12 { font-size: 12px; font-family: var(--mono); }.sp-section .u-italic-12 { font-size: 12px; font-style: italic; }.sp-section .u-mt-7-mw-760 { margin-top: var(--sp-7); max-width: 760px; }.sp-section .u-mt-7-mw-720 { margin-top: var(--sp-7); max-width: 720px; }.sp-section .u-h2-style {
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 400;
  letter-spacing: var(--tracking-h2);
  font-variation-settings: "opsz" 56;
}.sp-section .u-no-top { margin-top: 0; border-top: 0; }.sp-section .u-link-copper {
  color: var(--copper);
  border-bottom: 1px solid var(--copper);
}.sp-section .tier__use-case {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  color: var(--copper);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 56;
  margin: 0;
  min-height: 2.5em;
  display: flex;
  align-items: flex-start;
}.sp-section .hero__deck {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: var(--tracking-h3);
  color: var(--copper-h);
  font-variation-settings: "opsz" 56;
  margin: var(--sp-2) 0 0;
  max-width: 720px;
  font-style: normal;
}.sp-section .hero--full .hero__deck { color: var(--copper-h); }.sp-section .qual-band {
  padding-block: var(--sp-5) var(--sp-4);
  background: var(--bone);
  border-bottom: 1px solid var(--border);
}.sp-section .qual-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}.sp-section .qual-band__primary {
  font-family: var(--sans);
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
  flex: 1 1 auto;
  min-width: 280px;
}.sp-section .qual-band__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  text-transform: uppercase;
  margin: 0;
  flex: 0 1 auto;
}
@media (max-width: 720px) {
.sp-section .qual-band { padding-block: var(--sp-4); }.sp-section .qual-band__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }.sp-section .qual-band__meta { font-size: 10px; }
}.sp-section .trust-strip--text .trust-strip__credits {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  color: var(--text);
  text-align: center;
  line-height: 1.45;
  letter-spacing: -0.005em;
  max-width: 900px;
  margin: 0 auto var(--sp-3);
  font-variation-settings: "opsz" 36;
}.sp-section .trust-strip--text .trust-strip__credits strong {
  font-weight: 500;
  color: var(--ink);
}.sp-section .trust-strip--text .trust-strip__caption {
  text-align: center;
  font-size: var(--t-meta);
  margin-top: var(--sp-5);
}.sp-section .trust-strip--text .trust-strip__caption a {
  color: var(--copper);
  border-bottom: 1px solid currentColor;
}.sp-section .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  @media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }.sp-section .credential-card { padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bone); display: flex; flex-direction: column; gap: var(--sp-3); }.sp-section .filter-bar { position: sticky; top: var(--nav-h); z-index: 50; background: rgba(244,241,236,0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding-block: var(--sp-4); }
  @media (max-width: 640px) { .filter-bar { top: var(--nav-h-mobile); } }.sp-section .filter-bar__inner { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; justify-content: space-between; }.sp-section .filter-bar__group { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }.sp-section .filter-bar__label { font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-soft); margin-right: var(--sp-2); }

  
  @media (max-width: 719px) {
.sp-section .filter-bar { padding-block: 10px; }.sp-section .filter-bar__inner {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      align-items: center;
      gap: 14px;
      justify-content: flex-start;
      
      mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 24px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 24px), transparent 100%);
      padding-block: 2px;
    }.sp-section .filter-bar__inner::-webkit-scrollbar { display: none; }.sp-section .filter-bar__group { flex-wrap: nowrap; flex-shrink: 0; gap: 6px; align-items: center; }.sp-section .filter-bar__group + .filter-bar__group {
      position: relative;
      padding-left: 14px;
    }.sp-section .filter-bar__group + .filter-bar__group::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 16px;
      background: var(--border, rgba(26,26,26,0.10));
    }.sp-section .filter-bar__label {
      font-size: 9px;
      letter-spacing: 0.10em;
      margin-right: 4px;
      flex-shrink: 0;
    }.sp-section .filter-bar .chips { display: flex; flex-wrap: nowrap; gap: 6px; }.sp-section .filter-bar .chip {
      padding: 5px 11px;
      font-size: 11.5px;
      flex-shrink: 0;
      white-space: nowrap;
    }
  }.sp-section .case-v2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
  @media (min-width: 720px) {
.sp-section .case-v2-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
  }
  @media (min-width: 1200px) {
.sp-section .case-v2-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
  }.sp-section .case-v2 {
    background: var(--bone, #F4F1EC);
    border: 1px solid var(--border, rgba(26,26,26,0.10));
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease, box-shadow 280ms ease;
  }.sp-section .case-v2:hover, .sp-section .case-v2:focus-within {
    transform: translateY(-3px);
    border-color: var(--copper, #B87333);
    box-shadow: 0 12px 32px -16px rgba(26,26,26,0.18), 0 4px 8px -4px rgba(184,115,51,0.10);
  }.sp-section .case-v2__media {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1A1A1A 0%, #2A2825 60%, #1A1A1A 100%);
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 720px) { .case-v2__media { aspect-ratio: 4/3; } }.sp-section .case-v2__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.90) contrast(1.02) brightness(0.96);
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }.sp-section .case-v2:hover .case-v2__media-img { transform: scale(1.04); }.sp-section .case-v2__media-img:not([src]), .sp-section .case-v2__media-img[src=""], .sp-section .case-v2__media-img.is-broken { opacity: 0; }.sp-section .case-v2__media-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-5);
    pointer-events: none;
    text-align: center;
  }.sp-section .case-v2__media-fallback::before {
    content: '';
    width: 28px; height: 28px;
    border: 1px solid rgba(184,115,51,0.5);
    border-radius: 50%;
    position: relative;
  }.sp-section .case-v2__media-fallback-type {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(184,115,51,0.85);
    padding: 3px 8px;
    border: 1px solid rgba(184,115,51,0.4);
    border-radius: 2px;
  }.sp-section .case-v2__media-fallback-label {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: rgba(244,241,236,0.55);
    max-width: 220px;
    line-height: 1.4;
  }.sp-section .case-v2__num {
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--copper, #B87333);
    color: var(--bone, #F4F1EC);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.05em;
    z-index: 2;
    box-shadow: 0 4px 8px -2px rgba(26,26,26,0.20);
  }.sp-section .case-v2__type-pill {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    background: rgba(26,26,26,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(244,241,236,0.95);
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 2px;
    z-index: 2;
  }.sp-section .case-v2__stage-flag {
    position: absolute;
    bottom: var(--sp-4);
    left: var(--sp-4);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(26,26,26,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(244,241,236,0.95);
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 2px;
    z-index: 2;
  }.sp-section .case-v2__stage-flag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--copper, #B87333); animation: pulse 2.4s infinite; }.sp-section .case-v2__stage-flag--concept .dot { background: rgba(244,241,236,0.55); animation: none; }.sp-section @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
  }

  
  .case-v2__body {
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    flex: 1;
  }
  @media (min-width: 720px) { .case-v2__body { padding: var(--sp-7); gap: var(--sp-5); } }.sp-section .case-v2__head { display: flex; flex-direction: column; gap: 6px; }.sp-section .case-v2__location {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-soft, rgba(26,26,26,0.55));
    display: flex; align-items: center; flex-wrap: wrap;
  }.sp-section .case-v2__location .sep { color: var(--copper, #B87333); padding: 0 6px; }.sp-section .case-v2__title {
    font-family: var(--font-display, 'Fraunces', serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.15;
    color: var(--ink, #1A1A1A);
    letter-spacing: -0.01em;
    margin: 0;
  }
  @media (min-width: 720px) { .case-v2__title { font-size: 28px; } }
  @media (min-width: 1200px) { .case-v2__title { font-size: 30px; } }.sp-section .case-v2__tech {
    border-top: 1px solid var(--border, rgba(26,26,26,0.10));
    border-bottom: 1px solid var(--border, rgba(26,26,26,0.10));
    margin-block: var(--sp-2);
  }.sp-section .case-v2__tech-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: baseline;
    padding-block: 12px;
    border-bottom: 1px solid rgba(26,26,26,0.06);
    gap: var(--sp-4);
  }.sp-section .case-v2__tech-row:last-child { border-bottom: 0; }
  @media (min-width: 720px) {
.sp-section .case-v2__tech-row { grid-template-columns: 120px 1fr; padding-block: 13px; }
  }.sp-section .case-v2__tech-label {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft, rgba(26,26,26,0.55));
  }.sp-section .case-v2__tech-value {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink, #1A1A1A);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
  }.sp-section .case-v2__tech-value--mute {
    color: var(--text-soft, rgba(26,26,26,0.55));
    font-style: italic;
    font-size: 13px;
  }.sp-section .case-v2__tech-value--copper { color: var(--copper, #B87333); font-weight: 500; }.sp-section .case-v2__desc {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(26,26,26,0.78);
    margin: 0;
  }
  @media (min-width: 720px) { .case-v2__desc { font-size: 15px; } }.sp-section .case-v2__cta {
    margin-top: auto;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink, #1A1A1A);
    border-bottom: 1px solid var(--copper, #B87333);
    padding-bottom: 6px;
    align-self: flex-start;
    transition: color 200ms, padding 200ms;
    text-decoration: none;
  }.sp-section .case-v2__cta:hover, .sp-section .case-v2__cta:focus-visible {
    color: var(--copper, #B87333);
    padding-bottom: 8px;
    outline: none;
  }.sp-section .case-v2__cta::after { content: ''; display: inline-block; margin-left: 6px; transition: transform 200ms; }.sp-section .case-v2__cta:hover::after { transform: translateX(3px); }.sp-section .case-v2-preamble {
    display: flex; flex-direction: column; gap: var(--sp-3);
    margin-bottom: var(--sp-7);
    max-width: 720px;
  }
  @media (min-width: 720px) { .case-v2-preamble { margin-bottom: var(--sp-8); } }.sp-section .case-v2-preamble__count {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--copper, #B87333);
  }.sp-section .case-v2-preamble__lead {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-soft, rgba(26,26,26,0.65));
    max-width: 640px;
  }.sp-section .case-card .card__eyebrow { color: var(--text-soft); }.sp-section .case-card .case-card__status { font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--copper); }.sp-section .contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-9); align-items: flex-start; }
  @media (max-width: 960px) { .contact-layout { grid-template-columns: 1fr; gap: var(--sp-7); } }.sp-section .sidebar { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); display: flex; flex-direction: column; gap: var(--sp-5); }
  @media (max-width: 960px) { .sidebar { position: static; } }.sp-section .sidebar__card { padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bone); }.sp-section .next-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
  @media (max-width: 960px) { .next-steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .next-steps { grid-template-columns: 1fr; } }.sp-section .next-step__num { font-family: var(--serif); font-size: 48px; line-height: 1; color: var(--copper); display: block; margin-bottom: var(--sp-2); }.sp-section .event-card { display: grid; grid-template-columns: 110px 260px 1fr; gap: var(--sp-5); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bone); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); position: relative; align-items: start; overflow: hidden; }
  @media (max-width: 960px) { .event-card { grid-template-columns: 100px 220px 1fr; gap: var(--sp-4); } }
  @media (max-width: 720px) { .event-card { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4); }.sp-section .event-card__media { order: -1; } }.sp-section .event-card:hover { transform: translateY(-4px); border-color: var(--copper); box-shadow: var(--shadow-lift); }.sp-section .event-card__media { aspect-ratio: 4 / 3; align-self: stretch; }.sp-section .event-card__media .placeholder { width: 100%; height: 100%; padding: var(--sp-3); border-radius: var(--r-md); }.sp-section .event-card__media .placeholder__inner { font-size: 10px; line-height: 1.4; }.sp-section .event-card__media .placeholder__type { font-size: 9px; padding: 3px 7px; margin-bottom: var(--sp-2); }.sp-section .event-card__media .placeholder__label { font-size: 11px; }.sp-section .event-card__media .placeholder__meta { font-size: 9px; margin-top: 4px; }.sp-section .event-card--featured { border-color: var(--copper); border-width: 2px; background: var(--bone); }.sp-section .event-card--past { opacity: 0.92; }.sp-section .event-card__date { font-family: var(--serif); font-weight: 300; line-height: 1; color: var(--copper); font-variation-settings: "opsz" 72; font-variant-numeric: tabular-nums; }.sp-section .event-card__date .month { display: block; font-size: 13px; font-family: var(--mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--copper); margin-bottom: 4px; font-weight: 500; }.sp-section .event-card__date .day { display: block; font-size: 48px; line-height: 1; letter-spacing: -0.02em; }.sp-section .event-card__date .year { display: block; font-size: 11px; font-family: var(--mono); letter-spacing: var(--tracking-mono); color: var(--text-soft); margin-top: 4px; }.sp-section .event-card__body { display: flex; flex-direction: column; gap: var(--sp-2); }.sp-section .event-card__type { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); display: flex; gap: var(--sp-3); align-items: center; }.sp-section .event-card__type .role { color: var(--copper); font-weight: 500; }.sp-section .event-card__type .own { padding: 3px 8px; border: 1px solid var(--copper); color: var(--copper); border-radius: var(--r-pill); font-size: 10px; }.sp-section .event-card__title { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); font-weight: 400; line-height: 1.25; letter-spacing: var(--tracking-h3); color: var(--ink); font-variation-settings: "opsz" 36; }.sp-section .event-card__venue { font-size: var(--t-body-sm); color: var(--text-mute); }.sp-section .event-card__desc { font-size: var(--t-body-sm); color: var(--text-mute); line-height: 1.55; margin-top: var(--sp-2); }.sp-section .event-card__cta { margin-top: var(--sp-3); display: flex; gap: var(--sp-4); align-items: center; }.sp-section .event-card__cta .link { font-weight: 600; font-size: var(--t-body-sm); color: var(--ink); border-bottom: 1.5px solid var(--copper); padding-bottom: 2px; transition: color var(--t-fast); }.sp-section .event-card__cta .link:hover { color: var(--copper); }.sp-section .event-card__cta .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }.sp-section .events-list { display: flex; flex-direction: column; gap: var(--sp-5); }.sp-section .calendar-tag { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper); padding: 6px 12px; border: 1px solid var(--copper); border-radius: var(--r-pill); }.sp-section .featured-event-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: stretch; }
  @media (max-width: 960px) { .featured-event-strip { grid-template-columns: 1fr; } }.sp-section .own-event { padding: var(--sp-6); border: 1px solid var(--copper); border-radius: var(--r-lg); background: var(--bone); display: flex; flex-direction: column; gap: var(--sp-3); overflow: hidden; }.sp-section .own-event__media { aspect-ratio: 21 / 9; margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-4); }.sp-section .own-event__media .placeholder { width: 100%; height: 100%; border-radius: 0; border: 0; border-bottom: 1.5px dashed var(--copper); }.sp-section .own-event__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--copper); font-weight: 500; }.sp-section .own-event__title { font-family: var(--serif); font-size: var(--t-h2); font-weight: 400; line-height: 1.2; letter-spacing: var(--tracking-h2); font-variation-settings: "opsz" 56; }.sp-section .own-event__when { font-family: var(--mono); font-size: var(--t-body-sm); color: var(--ink); font-variant-numeric: tabular-nums; }.sp-section .stage-card {
    padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bone);
    display: flex; flex-direction: column; gap: var(--sp-3); scroll-margin-top: 140px;
  }.sp-section .stage-card__num { font-family: var(--serif); font-size: 88px; line-height: 0.9; color: var(--copper); }.sp-section .stage-card__name { font-family: var(--serif); font-size: var(--t-h2); }.sp-section .stage-card__meta { font-family: var(--mono); font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: var(--tracking-mono); }.sp-section .stage-card__meta strong { color: var(--ink); font-weight: 500; }.sp-section .featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); align-items: center; }
  @media (max-width: 960px) { .featured { grid-template-columns: 1fr; } }.sp-section .article-card .article-card__date { font-family: var(--mono); font-size: 12px; color: var(--text-soft); letter-spacing: var(--tracking-mono); }.sp-section .lead-magnet { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); align-items: center; }
  @media (max-width: 960px) { .lead-magnet { grid-template-columns: 1fr; } }.sp-section .press-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bone); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); position: relative; height: 100%; }.sp-section .press-card:hover { transform: translateY(-4px); border-color: var(--copper); box-shadow: var(--shadow-lift); }.sp-section .press-card__meta { display: flex; gap: var(--sp-3); align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }.sp-section .press-card__outlet { color: var(--copper); font-weight: 500; }.sp-section .press-card__type { padding: 3px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); }.sp-section .press-card__title { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); font-weight: 400; line-height: 1.25; letter-spacing: var(--tracking-h3); color: var(--ink); font-variation-settings: "opsz" 36; }.sp-section .press-card__excerpt { font-size: var(--t-body-sm); color: var(--text-mute); line-height: 1.55; }.sp-section .press-card__link { margin-top: auto; font-weight: 600; font-size: var(--t-body-sm); color: var(--ink); border-bottom: 1.5px solid var(--copper); padding-bottom: 2px; align-self: flex-start; transition: color var(--t-fast); }.sp-section .press-card:hover .press-card__link { color: var(--copper); }.sp-section .press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-5); }.sp-section .speaker-item { display: grid; grid-template-columns: 140px 1fr auto; gap: var(--sp-5); padding: var(--sp-5) 0; border-bottom: 1px solid var(--border); align-items: baseline; }
  @media (max-width: 720px) { .speaker-item { grid-template-columns: 1fr; gap: var(--sp-2); } }.sp-section .speaker-item__date { font-family: var(--mono); font-size: 13px; letter-spacing: var(--tracking-mono); color: var(--copper); text-transform: uppercase; font-weight: 500; }.sp-section .speaker-item__title { font-family: var(--serif); font-size: var(--t-h3); font-weight: 400; line-height: 1.3; letter-spacing: var(--tracking-h3); font-variation-settings: "opsz" 36; }.sp-section .speaker-item__venue { font-size: var(--t-body-sm); color: var(--text-mute); margin-top: 4px; }.sp-section .speaker-item__topic { font-size: var(--t-meta); color: var(--text-soft); font-style: italic; margin-top: 4px; }.sp-section .speaker-item__status { font-family: var(--mono); font-size: 11px; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; align-self: start; }.sp-section .speaker-item__status--upcoming { color: var(--copper); border-color: var(--copper); }.sp-section .video-card { display: flex; flex-direction: column; gap: var(--sp-3); }.sp-section .video-card__title { font-family: var(--serif); font-size: var(--t-h4); font-weight: 400; line-height: 1.3; letter-spacing: var(--tracking-h3); color: var(--ink); font-variation-settings: "opsz" 36; }.sp-section .video-card__meta { font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking-mono); color: var(--text-soft); text-transform: uppercase; }.sp-section .video-card__meta span.platform { color: var(--copper); }.sp-section .outlet-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-4); padding: var(--sp-6) 0; border-top: 1px solid var(--copper); border-bottom: 1px solid var(--copper); align-items: center; justify-items: center; }.sp-section .outlet-strip__name { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--text-mute); letter-spacing: -0.005em; font-variation-settings: "opsz" 36; text-align: center; }.sp-section .subnav {
    position: sticky; top: var(--nav-h); z-index: 50;
    background: rgba(244, 241, 236, 0.95);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  @media (max-width: 640px) { .subnav { top: var(--nav-h-mobile); } }.sp-section .subnav__inner { display: flex; gap: var(--sp-5); overflow-x: auto; padding-block: var(--sp-3); }.sp-section .subnav a {
    font-family: var(--mono); font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--text-mute); padding: 6px 0; white-space: nowrap; border-bottom: 1.5px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
  }.sp-section .subnav a:hover { color: var(--ink); border-bottom-color: var(--copper); }.sp-section .solution-block { padding-block: var(--section-py); scroll-margin-top: 140px; }.sp-section .solution-block:nth-of-type(even) { background: var(--bone-2); }

/* SP overrides — Horizon section-wrapper color schemes that override our dark/alt bg */
.sp-section .section--dark,
.shopify-section.sp-section:has(.section--dark) { background: var(--ink) !important; color: var(--bone) !important; }
.sp-section .section--alt,
.shopify-section.sp-section:has(.section--alt) { background: var(--bone-2) !important; }
.sp-section:has(.section--dark) .section,
.sp-section:has(.section--alt)  .section { background: transparent !important; }

/* ============================================================
   SP — Visual refinements (post-debug 2026-05-26)
   ============================================================ */

/* Stats bar — increase caption contrast & breathing */
.sp-section .stats-bar .stat__caption {
  font-size: 15px;
  color: rgba(244, 241, 236, 0.85);
  line-height: 1.55;
  max-width: 280px;
  margin-top: var(--sp-5);
}
.sp-section .stats-bar .stat__caption em {
  color: var(--copper-h);
  font-weight: 500;
}
.sp-section .stats-bar .stat__num {
  font-size: clamp(56px, 7vw, 96px);
  margin-bottom: var(--sp-2);
}
.sp-section .stats-bar__grid {
  gap: var(--sp-6);
  align-items: start;
}
.sp-section .stats-bar {
  padding-block: var(--sp-9);
}

/* Trust strip — more refined eyebrow + larger credits */
.sp-section .trust-strip {
  padding-block: var(--sp-9);
}
.sp-section .trust-strip__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: var(--sp-4);
  color: var(--copper);
}
.sp-section .trust-strip__credits {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  max-width: 880px;
  margin-inline: auto;
  color: var(--text);
}
.sp-section .trust-strip__credits strong {
  font-weight: 500;
}
.sp-section .trust-strip .u-mt-5 {
  margin-top: var(--sp-7) !important;
}
.sp-section .trust-strip__caption {
  margin-top: var(--sp-5);
  font-size: 13px;
}

/* SP — force text colors inside dark sections (Horizon color scheme overrides children) */
.sp-section .stats-bar,
.sp-section .stats-bar * {
  --color-foreground: var(--bone);
}
.sp-section .stats-bar .stat__caption,
.sp-section .stats-bar .stat__caption p,
.sp-section .stats-bar .stat__caption span {
  color: rgba(244, 241, 236, 0.85) !important;
}
.sp-section .stats-bar .stat__caption em,
.sp-section .stats-bar .stat__caption strong {
  color: var(--copper-h) !important;
  font-style: normal;
  font-weight: 500;
}

/* Same defense for .section--dark generally */
.sp-section .section--dark,
.sp-section .section--dark * {
  --color-foreground: var(--bone);
}
.sp-section .section--dark p,
.sp-section .section--dark li,
.sp-section .section--dark span:not(.eyebrow):not(.editorial) {
  color: rgba(244, 241, 236, 0.86);
}
.sp-section .section--dark h1, .sp-section .section--dark h2,
.sp-section .section--dark h3, .sp-section .section--dark h4,
.sp-section .section--dark .display-xl, .sp-section .section--dark .display-l,
.sp-section .section--dark .display-m, .sp-section .section--dark .display-s {
  color: var(--bone) !important;
}

/* SP — Hero media (video/image background, fills section) */
.sp-section .hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--ink); }
.sp-section .hero__media .hero__video,
.sp-section .hero__media .hero__image,
.sp-section .hero__media video,
.sp-section .hero__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sp-section .hero__media iframe { width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sp-section .hero__atmosphere { z-index: 1; pointer-events: none; }
.sp-section .hero__content { position: relative; z-index: 2; }

/* SP — Stats bar more breathing */
.sp-section .stats-bar { padding-block: var(--sp-10); }
.sp-section .stats-bar__grid { row-gap: var(--sp-8); }

/* SP — Stats final polish: prototype proportions */
.sp-section .stats-bar { padding-block: var(--sp-8); }
.sp-section .stats-bar__grid { row-gap: var(--sp-7); align-items: end; }
.sp-section .stats-bar .stat__num {
  font-size: clamp(72px, 8vw, 128px);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.030em;
  line-height: 0.92;
}
.sp-section .stats-bar .stat__caption {
  max-width: 240px;
}

/* ============================================================
   SP — Final polish round 2 (per client feedback)
   ============================================================ */

/* Site-wide: 1600 max-width already in tokens; ensure container uses it */
.sp-section .container { max-width: var(--max-w); }

/* Trust strip — revert eyebrow to subtle gray (was too copper-heavy) */
.sp-section .trust-strip__label {
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-soft);
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
}
.sp-section .trust-strip {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sp-section .trust-strip .u-mt-5 {
  margin-top: var(--sp-6) !important;
}

/* Stats — baseline alignment so 10/D1/11/4 sit on same baseline */
.sp-section .stats-bar__grid {
  align-items: end;
  gap: var(--sp-7) var(--sp-6);
}
.sp-section .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sp-section .stat__num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(72px, 8vw, 128px);
  line-height: 1;
  color: var(--bone);
  letter-spacing: -0.030em;
  margin-bottom: var(--sp-4);
  display: block;
}

/* Solutions — 4 across on desktop (>=1200px), 2x2 medium, scroll mobile */
.sp-section .sp-solutions-row {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 1199px) {
  .sp-section .sp-solutions-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .sp-section .sp-solutions-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-5);
    padding-bottom: var(--sp-4);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .sp-section .sp-solution-card {
    flex: 0 0 80vw;
    scroll-snap-align: start;
  }
}

/* Tiers — keep 4-col longer on desktop (was 4 → 2 at 960; now 4 → 2 at 1100) */
@media (max-width: 1199px) and (min-width: 961px) {
  .sp-section .sp-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Process — ensure horizontal axis line + dots render cleanly */
.sp-section .process { position: relative; padding-top: var(--sp-3); }
.sp-section .process::before {
  content: ""; position: absolute; top: 24px; left: 0; right: 0; height: 1px;
  background: var(--copper); opacity: 0.4; z-index: 0;
}
.sp-section .process__step {
  position: relative; padding-top: var(--sp-7);
  background: transparent;
}
.sp-section .process__step::before {
  content: ""; position: absolute; top: 18px; left: 0; width: 12px; height: 12px;
  border-radius: 999px; background: var(--copper);
  border: 3px solid var(--bg);
  z-index: 1;
}
.sp-section:has(.section--alt) .process__step::before { border-color: var(--bone-2); }
.sp-section .process__num {
  font-family: var(--serif); font-size: clamp(48px, 5vw, 64px); line-height: 1;
  font-weight: 300; color: var(--copper); display: block; margin-bottom: var(--sp-3);
}
.sp-section .process__name { font-weight: 500; font-size: var(--t-h4); display: block; margin-bottom: var(--sp-2); }
.sp-section .process__desc { font-size: 14px; line-height: 1.55; color: var(--text-mute); }

/* SP — Process axis line stronger + alignment fix */
.sp-section .process { padding-top: 0; }
.sp-section .process::before {
  top: 24px; height: 2px;
  background: var(--copper);
  opacity: 0.5;
  z-index: 0;
}
.sp-section .process__step::before {
  background: var(--copper);
  border-width: 4px;
  width: 14px; height: 14px;
  top: 18px;
  z-index: 2;
}

/* Stats — fine-tune baseline alignment (D1 letters vs digits) */
.sp-section .stat__num { vertical-align: baseline; }
.sp-section .stats-bar__grid { align-items: end; }

/* SP — fix block-level centering in .center/.section--dark sections.
   Prototype .sp-section p {max-width: 65ch} caps line length, but without
   margin-inline:auto the block sticks to the left of its parent. */
.sp-section .center p,
.sp-section .center .lead,
.sp-section .center .deck,
.sp-section .center .cta-cluster,
.sp-section .center .stack > *,
.sp-section .section--dark p,
.sp-section .section--dark .cta-cluster,
.sp-section .section--dark .stack > * {
  margin-left: auto;
  margin-right: auto;
}
.sp-section .cta-cluster--center {
  justify-content: center;
  margin-inline: auto;
}

/* SP — fix cases muted-band footnote centering (same issue as CTA footnote) */
.sp-section .muted-band {
  margin-inline: auto;
  text-align: left;
  max-width: 720px;
}

/* SP — fix image rendering inside placeholders (cards, hero, founder) */
.sp-section .placeholder img,
.sp-section .placeholder video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.sp-section .placeholder:has(img),
.sp-section .placeholder:has(video) {
  background: var(--ink);
  border: none;
}
.sp-section .placeholder:has(img) .placeholder__inner,
.sp-section .placeholder:has(video) .placeholder__inner {
  display: none;
}
.sp-section .placeholder { position: relative; }

/* SP — clean media containers (replace placeholders when image is set, no :has needed) */
.sp-section .sp-card-media {
  position: relative;
  width: 100%;
  background: var(--bone-3);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sp-section .sp-card-media--16-9 { aspect-ratio: 16 / 9; }
.sp-section .sp-card-media--4-3  { aspect-ratio: 4 / 3; }
.sp-section .sp-card-media--4-5  { aspect-ratio: 4 / 5; }
.sp-section .sp-card-media--21-9 { aspect-ratio: 21 / 9; }
.sp-section .sp-card-media img,
.sp-section .sp-card-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* SP — pull card media flush to card edges (was leaving sp-6 padding around image) */
.sp-section .card > .sp-card-media:first-child,
.sp-section .card > .placeholder:first-child {
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-2) calc(-1 * var(--sp-6));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: auto;
}
.sp-section .card > .sp-card-media:first-child img {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* SP — Mobile-only polish */
@media (max-width: 960px) {
  /* Process: align dot vertically with number (was floating top:6, number ~50px below) */
  .sp-section .process { gap: var(--sp-7); }
  .sp-section .process__step { padding-top: var(--sp-2); padding-left: var(--sp-7); }
  .sp-section .process__step::before { top: 24px; left: 0; width: 12px; height: 12px; }
  .sp-section .process::before { left: 5px; top: 24px; bottom: var(--sp-3); }
  .sp-section .process__num { margin-bottom: var(--sp-2); margin-top: 0; }
}

/* Trust strip: ensure paragraphs center themselves even with max-width: 65ch */
.sp-section .trust-strip p,
.sp-section .trust-strip .trust-strip__label,
.sp-section .trust-strip .trust-strip__credits,
.sp-section .trust-strip .trust-strip__caption {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Section padding tighter on mobile */
@media (max-width: 640px) {
  .sp-section .section { padding-block: var(--sp-8); }
  .sp-section .stats-bar { padding-block: var(--sp-8); }
  .sp-section .card { padding: var(--sp-5); }
  .sp-section .card > .sp-card-media:first-child,
  .sp-section .card > .placeholder:first-child {
    margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-3) calc(-1 * var(--sp-5));
  }
  .sp-section .container { padding-inline: var(--sp-5); }
}

/* SP — Stats subgrid: align all numbers on same baseline + all captions on same row.
   Solves Fraunces glyph height variance (D vs 4 vs 11 each different visual height).
   At small viewports (max-width:480) stats are 1-col so subgrid is irrelevant. */
@media (min-width: 481px) {
  .sp-section .stats-bar__grid {
    grid-template-rows: auto auto;
    row-gap: var(--sp-4);
  }
  .sp-section .stat {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-items: end;
    gap: var(--sp-4);
  }
  .sp-section .stat__num {
    grid-row: 1;
    align-self: end;
    margin-bottom: 0;
  }
  .sp-section .stat__caption {
    grid-row: 2;
    align-self: start;
  }
}

/* SP — Tiers responsive: 4-col only on wide desktop (>=1100), else 2x2.
   Overrides earlier rule that forced 4-col at 961-1199. */
@media (max-width: 1199px) and (min-width: 961px) {
  .sp-section .sp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 1099px) and (min-width: 641px) {
  .sp-section .sp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .sp-section .sp-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   SP — Process (Editorial Ladder)
   Vertical numbered list with copper hairline dividers.
   Number column left (fixed-ish), content right (fluid).
   ============================================================ */
.sp-section .sp-process-section {
  padding-block: var(--sp-10);
  position: relative;
}
.sp-section .sp-process-ladder__intro {
  max-width: 720px;
  margin-bottom: var(--sp-9);
}
.sp-section .sp-process-ladder {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(184, 115, 51, 0.30);
}
.sp-section .sp-process-ladder__row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--sp-7);
  align-items: baseline;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid rgba(184, 115, 51, 0.30);
  position: relative;
  transition: background-color var(--t-base) var(--ease-out);
}
.sp-section .sp-process-ladder__row:hover {
  background-color: rgba(184, 115, 51, 0.03);
}
.sp-section .sp-process-ladder__num {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(56px, 5.5vw, 88px);
  line-height: 0.92;
  color: var(--copper);
  letter-spacing: -0.025em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  display: block;
}
.sp-section .sp-process-ladder__content {
  max-width: 56ch;
  padding-top: var(--sp-2);
}
.sp-section .sp-process-ladder__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.010em;
  color: var(--text);
  margin: 0 0 var(--sp-3) 0;
}
.sp-section .sp-process-ladder__desc {
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: var(--text-mute);
  margin: 0;
  max-width: none;
}
.sp-section .sp-process-ladder__footer {
  margin-top: var(--sp-8);
  text-align: center;
}

/* Mobile: stack number above content, smaller scale */
@media (max-width: 740px) {
  .sp-section .sp-process-ladder__row {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-6) 0;
  }
  .sp-section .sp-process-ladder__num {
    font-size: 44px;
    margin-bottom: var(--sp-1);
  }
  .sp-section .sp-process-ladder__content {
    padding-top: 0;
  }
  .sp-section .sp-process-ladder__intro {
    margin-bottom: var(--sp-7);
  }
}

/* ============================================================
   SP — Vertical Timeline (replaces editorial ladder)
   Copper circles connected by a vertical copper line.
   ============================================================ */
.sp-section .sp-timeline-section {
  padding-block: var(--sp-10);
}
.sp-section .sp-timeline__intro {
  max-width: 720px;
  margin-bottom: var(--sp-9);
}
.sp-section .sp-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--sp-7);
  position: relative;
  max-width: 880px;
}
.sp-section .sp-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--copper) 6%,
    var(--copper) 94%,
    transparent 100%
  );
  opacity: 0.35;
}
.sp-section .sp-timeline__step {
  position: relative;
  padding: var(--sp-6) 0 var(--sp-7) var(--sp-7);
  list-style: none;
}
.sp-section .sp-timeline__step:last-child { padding-bottom: var(--sp-3); }
.sp-section .sp-timeline__node {
  position: absolute;
  left: calc(-1 * var(--sp-7) + 0px);
  top: var(--sp-6);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--copper);
  box-shadow: 0 0 0 6px var(--bg);
  z-index: 1;
}
.sp-section .sp-timeline__node::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--copper);
  transition: transform var(--t-base) var(--ease-out);
}
.sp-section .sp-timeline__step:hover .sp-timeline__node::after {
  transform: scale(1.2);
}
.sp-section:has(.section--alt) .sp-timeline__node { background: var(--bone-2); box-shadow: 0 0 0 6px var(--bone-2); }
.sp-section .sp-timeline__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.sp-section .sp-timeline__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 3.6vw, 56px);
  color: var(--copper);
  line-height: 0.95;
  letter-spacing: -0.020em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.sp-section .sp-timeline__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.010em;
  color: var(--text);
  margin: 0;
}
.sp-section .sp-timeline__desc {
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: var(--text-mute);
  margin: 0;
  max-width: 60ch;
}
.sp-section .sp-timeline__footer {
  margin-top: var(--sp-8);
  padding-left: var(--sp-7);
}

@media (max-width: 640px) {
  .sp-section .sp-timeline__step { padding: var(--sp-5) 0 var(--sp-6) var(--sp-6); }
  .sp-section .sp-timeline { padding-left: var(--sp-6); }
  .sp-section .sp-timeline::before { left: 9px; top: 22px; bottom: 22px; }
  .sp-section .sp-timeline__node {
    left: calc(-1 * var(--sp-6));
    top: var(--sp-5);
    width: 18px; height: 18px;
  }
  .sp-section .sp-timeline__num { font-size: 32px; }
  .sp-section .sp-timeline__name { font-size: 20px; }
  .sp-section .sp-timeline__head { gap: var(--sp-3); }
  .sp-section .sp-timeline__footer { padding-left: var(--sp-6); }
}

/* SP — Timeline width: span full container like other sections (was max-width 880) */
.sp-section .sp-timeline {
  max-width: none;
  width: 100%;
}
.sp-section .sp-timeline__desc {
  max-width: 70ch;
}

/* SP — Timeline: center within container + expand intro to match */
.sp-section .sp-timeline {
  max-width: 980px;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
}
.sp-section .sp-timeline__intro {
  max-width: 980px;
  margin-inline: auto;
}
.sp-section .sp-timeline__footer {
  max-width: 980px;
  margin-inline: auto;
  padding-left: var(--sp-7);
}

/* ============================================================
   SP — Hero height + text position controls
   ============================================================ */
.sp-section .sp-hero--medium { min-height: 70vh; }
.sp-section .sp-hero--tall   { min-height: 90vh; }
.sp-section .sp-hero--full   { min-height: 100vh; }

.sp-section .hero--full {
  display: flex;
  position: relative;
}
.sp-section .sp-hero--align-top    .hero__content { align-self: flex-start;  padding-top: clamp(80px, 12vh, 160px); }
.sp-section .sp-hero--align-middle .hero__content { align-self: center; }
.sp-section .sp-hero--align-bottom .hero__content { align-self: flex-end; padding-bottom: clamp(80px, 12vh, 160px); }

.sp-section .hero__content {
  width: 100%;
  position: relative;
  z-index: 2;
}

/* ============================================================
   SP — Solutions grid: wider cards, tighter gap, scroll on overflow
   ============================================================ */
.sp-section .sp-solutions-row {
  gap: var(--sp-4);
}
.sp-section .sp-solution-card {
  min-width: 260px;
}
@media (min-width: 1100px) {
  .sp-section .sp-solutions-row {
    grid-template-columns: repeat(4, minmax(280px, 1fr));
    gap: var(--sp-4);
  }
  /* If 4 wide cards overflow the container, fall back to horizontal scroll */
  @supports (overflow-x: auto) {
    .sp-section .sp-solutions-row {
      overflow-x: visible;
    }
  }
}
@media (max-width: 1099px) and (min-width: 641px) {
  .sp-section .sp-solutions-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    scrollbar-width: thin;
    scroll-padding: var(--sp-4);
  }
  .sp-section .sp-solution-card {
    flex: 0 0 calc((100% - var(--sp-4) * 2) / 2.2);
    min-width: 280px;
    scroll-snap-align: start;
  }
}

/* SP — Solutions: unify scrollable behavior on mobile + tablet (override prior rules) */
@media (max-width: 1099px) {
  .sp-section .sp-solutions-row {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: var(--sp-4);
    padding-bottom: var(--sp-5);
    scrollbar-width: thin;
    grid-template-columns: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .sp-section .sp-solution-card {
    flex: 0 0 78vw !important;
    max-width: 360px !important;
    min-width: 260px;
    scroll-snap-align: start;
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .sp-section .sp-solution-card {
    flex: 0 0 calc((100% - var(--sp-4)) / 2.3) !important;
  }
}

/* ============================================================
   SP — Header (sticky, container-aligned)
   ============================================================ */
.sp-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bone);
  border-bottom: 1px solid var(--bone-3);
  font-family: var(--sans);
}
.sp-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  height: 72px;
}
.sp-brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  color: var(--ink); letter-spacing: -0.018em;
  text-decoration: none;
  flex-shrink: 0;
}
.sp-brand__name { line-height: 1; }
.sp-brand__mark svg { display: block; width: 22px; height: 12px; }

.sp-nav__menu {
  display: flex; align-items: center; gap: var(--sp-5);
  font-size: 14px; font-weight: 400;
}
.sp-nav__menu a {
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  padding: 4px 0;
  transition: color var(--t-fast) var(--ease-out);
}
.sp-nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--copper);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.sp-nav__menu a:hover { color: var(--copper); }
.sp-nav__menu a:hover::after { transform: scaleX(1); }

.sp-nav__right {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-shrink: 0;
}
.sp-nav__lang {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--text-soft);
  text-transform: uppercase;
}
.sp-nav__burger {
  display: none;
  width: 36px; height: 36px;
  border: 0; background: transparent; cursor: pointer;
  position: relative;
}
.sp-nav__burger span,
.sp-nav__burger::before,
.sp-nav__burger::after {
  content: ""; position: absolute; left: 8px; right: 8px;
  height: 1.5px; background: var(--ink);
  transition: transform var(--t-base) var(--ease-out);
}
.sp-nav__burger::before { top: 11px; }
.sp-nav__burger span    { top: 17px; }
.sp-nav__burger::after  { top: 23px; }
.sp-nav__burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.sp-nav__burger[aria-expanded="true"] span    { opacity: 0; }
.sp-nav__burger[aria-expanded="true"]::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .sp-nav__menu { display: none; }
  .sp-nav__right .btn { display: none; }
  .sp-nav__burger { display: inline-block; }
  .sp-nav__inner { height: 60px; }
}

/* Mobile drawer */
.sp-drawer-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(14, 26, 36, 0.65);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.sp-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.sp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(360px, 88vw);
  background: var(--bone);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out);
  overflow-y: auto;
}
.sp-drawer.is-open { transform: translateX(0); }
.sp-drawer__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 36px; height: 36px;
  border: 0; background: transparent; font-size: 28px;
  color: var(--ink); cursor: pointer; line-height: 1;
}
.sp-drawer__menu {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.sp-drawer__menu a {
  font-family: var(--serif); font-size: 24px;
  color: var(--ink); text-decoration: none;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--bone-3);
}
.sp-drawer__cta {
  margin-top: var(--sp-4);
  align-self: stretch;
  text-align: center;
}

/* ============================================================
   SP — Footer
   ============================================================ */
.sp-footer {
  background: var(--ink);
  color: var(--text-on-ink);
  padding: var(--sp-9) 0 var(--sp-6);
  font-family: var(--sans);
}
.sp-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--hairline-on-ink);
}
.sp-footer__brand {
  font-family: var(--serif); font-weight: 400;
  font-size: 28px; color: var(--bone);
  letter-spacing: -0.018em;
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-bottom: var(--sp-3);
}
.sp-footer__tag {
  font-size: 14px; color: var(--text-on-ink-soft);
  margin-bottom: var(--sp-5);
  max-width: 320px;
}
.sp-footer__addr {
  font-size: 13px; line-height: 1.7;
  color: var(--text-on-ink-soft);
}
.sp-footer__addr a {
  color: var(--copper-h); text-decoration: none;
  border-bottom: 1px solid rgba(184, 115, 51, 0.4);
}
.sp-footer__addr p { margin: 0 0 var(--sp-2) 0; max-width: none; }
.sp-footer__phone { margin-top: var(--sp-3); }

.sp-footer__col-title {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--copper); margin-bottom: var(--sp-4);
}
.sp-footer__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: 14px;
}
.sp-footer__list a {
  color: var(--text-on-ink); text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.sp-footer__list a:hover { color: var(--copper-h); }

.sp-footer__intro {
  font-size: 13px; line-height: 1.55;
  color: var(--text-on-ink-soft);
  margin: 0 0 var(--sp-4); max-width: none;
}
.sp-footer__newsletter {
  display: flex; gap: 0;
  margin-bottom: var(--sp-4);
}
.sp-footer__newsletter input {
  flex: 1 1 auto;
  background: transparent;
  border: 1px solid var(--hairline-on-ink);
  border-right: 0;
  padding: 12px 14px;
  color: var(--bone);
  font-size: 14px;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  outline: none;
}
.sp-footer__newsletter input::placeholder { color: var(--text-on-ink-faint); }
.sp-footer__newsletter input:focus { border-color: var(--copper); }
.sp-footer__newsletter button {
  background: var(--copper); color: var(--bone);
  border: 0; padding: 12px 18px;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; cursor: pointer;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: background var(--t-fast) var(--ease-out);
}
.sp-footer__newsletter button:hover { background: var(--copper-h); }

.sp-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  padding-top: var(--sp-5);
  font-size: 13px; color: var(--text-on-ink-soft);
}
.sp-footer__bottom a { color: var(--text-on-ink-soft); text-decoration: none; }
.sp-footer__bottom a:hover { color: var(--copper-h); }
.sp-footer__legal-nav p { margin: 0; max-width: none; }

.sp-footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline-on-ink);
  font-size: 12px; line-height: 1.65;
  color: var(--text-on-ink-faint);
}
.sp-footer__legal strong { color: var(--text-on-ink-soft); font-weight: 500; }
.sp-footer__legal p { margin: 0; max-width: none; }

@media (max-width: 960px) {
  .sp-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
  }
  .sp-footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sp-footer__grid { grid-template-columns: 1fr; }
  .sp-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ============================================================
   SP — Language switcher (flag + dropdown)
   ============================================================ */
.sp-nav__lang-form { position: relative; margin: 0; }
.sp-nav__lang,
.sp-nav__lang--toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--bone-3);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-soft); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.sp-nav__lang:hover,
.sp-nav__lang--toggle:hover { border-color: var(--copper); color: var(--copper); }
.sp-nav__lang-flag {
  font-size: 16px; line-height: 1;
  display: inline-block;
}
.sp-nav__lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bone); border: 1px solid var(--bone-3);
  border-radius: var(--r-md); padding: 6px;
  min-width: 160px;
  box-shadow: var(--shadow-soft);
  list-style: none; margin: 0;
  z-index: 110;
}
.sp-nav__lang-menu li { margin: 0; }
.sp-nav__lang-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 14px;
  color: var(--text); border-radius: var(--r-sm);
}
.sp-nav__lang-option:hover { background: var(--bone-2); }
.sp-nav__lang-option.is-active { color: var(--copper); font-weight: 500; }

/* Dropdown switcher — one round flag (bulina) opens a menu of other languages */
.sp-nav__langdd { position: relative; display: inline-flex; }
.sp-nav__langdd > summary { list-style: none; cursor: pointer; }
.sp-nav__langdd > summary::-webkit-details-marker { display: none; }
.sp-nav__langdd > summary::marker { content: ""; }
.sp-nav__langdd .sp-nav__lang-form { position: static; margin: 0; }
.sp-nav__langdd .sp-nav__lang-menu { top: calc(100% + 10px); right: 0; }
.sp-nav__langdd[open] > summary { box-shadow: 0 0 0 2px var(--copper) !important; }

/* Inline flag switcher — click one flag to switch to that language */
.sp-nav__lang-row { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.sp-nav__flag-btn {
  width: 32px; height: 32px; padding: 0; border: 0; background: transparent;
  border-radius: 50%; overflow: hidden; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(14,26,36,0.12);
  opacity: 0.45; filter: grayscale(35%);
  transition: opacity var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
.sp-nav__flag-btn:hover { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--copper); }
.sp-nav__flag-btn.is-current { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--copper); cursor: default; }
@media (max-width: 1024px) { .sp-nav__flag-btn { width: 24px; height: 24px; } .sp-nav__lang-row { gap: 6px; } }
@media (max-width: 480px)  { .sp-nav__flag-btn { width: 22px; height: 22px; } }

/* ============================================================
   SP — Footer brand: bigger logo + better spacing
   ============================================================ */
.sp-section .sp-footer__brand {
  font-size: clamp(36px, 3.2vw, 48px);
  letter-spacing: -0.022em;
  gap: 12px;
  margin-bottom: var(--sp-4);
}
.sp-section .sp-footer__brand .sp-brand__mark svg {
  width: 36px;
  height: 20px;
}

/* SP — language flag SVGs */
.sp-flag {
  width: 22px; height: 14px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(14, 26, 36, 0.08);
  overflow: hidden;
}
.sp-nav__lang-flag { display: inline-flex; align-items: center; }
.sp-nav__lang-option .sp-flag { width: 18px; height: 12px; }

/* SP — Header logo + lang pill: bigger + consistent button color */
.sp-brand {
  font-size: 28px;
  gap: 10px;
}
.sp-brand__mark svg {
  width: 28px;
  height: 15px;
}
.sp-nav__lang,
.sp-nav__lang--toggle {
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  gap: 10px;
  border-width: 1.5px;
}
.sp-nav__lang-flag .sp-flag,
.sp-nav__lang .sp-flag {
  width: 24px;
  height: 16px;
}
.sp-nav__inner { height: 80px; gap: var(--sp-4); }

/* Button consistency — header CTA matches hero (same orange, same hover) */
.sp-section .btn.btn--primary {
  background: var(--copper) !important;
  color: var(--bone) !important;
  border: 0;
}
.sp-section .btn.btn--primary:hover {
  background: var(--copper-h) !important;
  color: var(--bone) !important;
}
.sp-section .sp-nav__right .btn.btn--primary.btn--sm {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.015em;
  border-radius: var(--r-sm);
}

@media (max-width: 1100px) {
  .sp-nav__inner { height: 64px; }
  .sp-brand { font-size: 24px; }
  .sp-brand__mark svg { width: 24px; height: 13px; }
}

/* ============================================================
   SP — Footer refinements to match prototype
   ============================================================ */
.sp-section .sp-footer {
  padding: var(--sp-10) 0 var(--sp-6);
}
.sp-section .sp-footer__grid {
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-9);
}
.sp-section .sp-footer__brand {
  font-size: clamp(40px, 3.6vw, 56px);
  letter-spacing: -0.022em;
  gap: 14px;
  margin-bottom: var(--sp-4);
  line-height: 1;
}
.sp-section .sp-footer__brand .sp-brand__mark svg {
  width: 42px;
  height: 24px;
}

/* Tagline — italic copper serif */
.sp-section .sp-footer__tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--copper-h);
  line-height: 1.45;
  margin-bottom: var(--sp-5);
  max-width: 360px;
}

/* Address — multi-line with italic registered office line */
.sp-section .sp-footer__addr {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-on-ink);
  max-width: 360px;
}
.sp-section .sp-footer__addr em {
  font-style: italic;
  color: var(--text-on-ink-faint);
  font-size: 12px;
}
.sp-section .sp-footer__addr a {
  color: var(--copper-h);
  border-bottom: 1px solid rgba(184, 115, 51, 0.35);
}
.sp-section .sp-footer__addr a:hover { color: var(--copper); border-bottom-color: var(--copper); }
.sp-section .sp-footer__addr p { margin: 0; max-width: none; }

/* Link groups — more spacious */
.sp-section .sp-footer__col-title {
  font-size: 12px;
  margin-bottom: var(--sp-5);
}
.sp-section .sp-footer__list {
  font-size: 15px;
}
.sp-section .sp-footer__list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sp-section .sp-footer__list li { margin: 0; }
.sp-section .sp-footer__list a {
  color: var(--text-on-ink);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.sp-section .sp-footer__list a:hover { color: var(--copper-h); }

/* Stay close column */
.sp-section .sp-footer__intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-on-ink-soft);
  max-width: 320px;
}

/* Newsletter form — input pill + separated rounded Subscribe button */
.sp-section .sp-footer__newsletter {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-4);
  max-width: 380px;
}
.sp-section .sp-footer__newsletter input {
  flex: 1 1 auto;
  background: transparent;
  border: 1px solid rgba(244, 241, 236, 0.18);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  color: var(--bone);
  font-size: 14px;
  font-family: var(--sans);
  outline: none;
  transition: border-color var(--t-fast) var(--ease-out);
}
.sp-section .sp-footer__newsletter input::placeholder { color: var(--text-on-ink-faint); }
.sp-section .sp-footer__newsletter input:focus { border-color: var(--copper); }
.sp-section .sp-footer__newsletter button {
  background: var(--copper);
  color: var(--bone);
  border: 0;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.012em;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out);
  flex-shrink: 0;
}
.sp-section .sp-footer__newsletter button:hover { background: var(--copper-h); }

/* Bottom row + legal */
.sp-section .sp-footer__bottom {
  padding-top: var(--sp-5);
  font-size: 13.5px;
}
.sp-section .sp-footer__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  font-size: 12.5px;
  line-height: 1.7;
}
.sp-section .sp-footer__legal p { margin: 0; max-width: none; }

/* SP — Footer: force text colors (Horizon color scheme sets p color to ink = invisible) */
.sp-section .sp-footer,
.sp-section .sp-footer * {
  --color-foreground: var(--bone);
}
.sp-section .sp-footer p,
.sp-section .sp-footer li,
.sp-section .sp-footer span,
.sp-section .sp-footer div {
  color: inherit;
}
.sp-section .sp-footer__addr,
.sp-section .sp-footer__addr p,
.sp-section .sp-footer__addr span:not(.text-soft) {
  color: var(--text-on-ink) !important;
}
.sp-section .sp-footer__addr em {
  color: var(--text-on-ink-faint) !important;
}
.sp-section .sp-footer__addr a {
  color: var(--copper-h) !important;
}
.sp-section .sp-footer__intro,
.sp-section .sp-footer__intro p {
  color: var(--text-on-ink-soft) !important;
}
.sp-section .sp-footer__list a,
.sp-section .sp-footer__list li,
.sp-section .sp-footer__list p {
  color: var(--text-on-ink) !important;
}
.sp-section .sp-footer__list a:hover { color: var(--copper-h) !important; }
.sp-section .sp-footer__bottom,
.sp-section .sp-footer__bottom div,
.sp-section .sp-footer__bottom p,
.sp-section .sp-footer__bottom a {
  color: var(--text-on-ink-soft) !important;
}
.sp-section .sp-footer__bottom a:hover { color: var(--copper-h) !important; }
.sp-section .sp-footer__legal,
.sp-section .sp-footer__legal p {
  color: var(--text-on-ink-faint) !important;
}
.sp-section .sp-footer__legal strong { color: var(--text-on-ink-soft) !important; }

/* ============================================================
   SP — Page hero (compact, sub-pages)
   ============================================================ */
.sp-section .sp-page-hero {
  padding-block: clamp(80px, 12vw, 160px) clamp(60px, 8vw, 96px);
  background: var(--bg);
  position: relative;
}
.sp-section .sp-page-hero__inner {
  max-width: 1000px;
}
.sp-section .sp-page-hero__lead {
  max-width: 720px;
}

/* ============================================================
   SP — Product block (P1/P2/P3/P4 split sections on Solutions)
   ============================================================ */
.sp-section .sp-product-block {
  padding-block: var(--sp-9);
  border-top: 1px solid var(--bone-3);
}
.sp-section .sp-product-block .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: start;
}
.sp-section .sp-product-block .split--reverse > :first-child { order: 2; }
.sp-section .sp-product-block .display-s {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.020em;
  color: var(--text);
  margin: 0;
}
.sp-section .sp-product-block .lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; margin: 0; }
.sp-section .sp-product-block__body p { margin: 0 0 var(--sp-4); max-width: none; }
.sp-section .sp-product-block h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}
.sp-section .sp-product-block__list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sp-section .sp-product-block__list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mute);
}
.sp-section .sp-product-block__list li::before {
  content: "—";
  position: absolute;
  left: 0; top: 0;
  color: var(--copper);
}

/* Pricing strip — horizontal accent line with bold label + meta */
.sp-section .pricing-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--bone-3);
  font-size: 15px;
}
.sp-section .pricing-strip.u-no-top { border-top: 0; padding-top: 0; padding-bottom: var(--sp-3); }
.sp-section .pricing-strip strong { color: var(--copper); font-weight: 500; }
.sp-section .pricing-strip span:last-child { color: var(--text-mute); font-size: 14px; }

@media (max-width: 960px) {
  .sp-section .sp-product-block .split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .sp-section .sp-product-block .split--reverse > :first-child { order: 0; }
}

/* ============================================================
   SP — Bundles (3 cards with name + title + price + body + CTA)
   ============================================================ */
.sp-section .sp-bundles-section {
  padding-block: var(--sp-10);
}
.sp-section .sp-bundles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.sp-section .bundle {
  background: var(--bg);
  border: 1px solid var(--bone-3);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.sp-section .bundle:hover {
  border-color: var(--copper);
  transform: translateY(-2px);
}
.sp-section .bundle__name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
}
.sp-section .bundle__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.25;
  color: var(--text);
}
.sp-section .bundle__price {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--copper-h);
  border-top: 1px solid var(--bone-3);
  padding-top: var(--sp-3);
}
.sp-section .bundle .card__cta {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--copper);
  text-decoration: none;
  border-bottom: 1px solid var(--copper);
  padding-bottom: 2px;
  align-self: flex-start;
}
.sp-section .bundle .card__cta:hover { color: var(--copper-h); }
.sp-section .sp-bundles__footnote {
  margin-top: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bone-2);
  border-left: 3px solid var(--copper);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mute);
  max-width: 760px;
}
.sp-section .sp-bundles__footnote p { margin: 0; max-width: none; }

@media (max-width: 960px) {
  .sp-section .sp-bundles__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SP — Protocol grid (4-col with hairline + h4 + body)
   ============================================================ */
.sp-section .sp-protocol-section { padding-block: var(--sp-10); }
.sp-section .sp-protocol__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.sp-section .sp-protocol__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sp-section .sp-protocol__item .rule-h {
  width: 40px;
  height: 2px;
  background: var(--copper);
}
.sp-section .sp-protocol__item h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}

@media (max-width: 1099px) {
  .sp-section .sp-protocol__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
}
@media (max-width: 640px) {
  .sp-section .sp-protocol__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SP — Stages (detailed stage cards on How We Work)
   ============================================================ */
.sp-section .sp-stages-section { padding-block: var(--sp-9); }
.sp-section .sp-stages__intro { max-width: 720px; }
.sp-section .sp-stages__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  margin-top: var(--sp-7);
}
.sp-section .sp-stages__card {
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--bone-3);
}
.sp-section .sp-stages__card:last-child { border-bottom: 1px solid var(--bone-3); }
.sp-section .sp-stages__row {
  display: grid;
  grid-template-columns: minmax(80px, 120px) 1fr;
  gap: var(--sp-7);
  align-items: baseline;
}
.sp-section .sp-stages__num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 4vw, 64px);
  color: var(--copper);
  letter-spacing: -0.02em;
  line-height: 0.92;
}
.sp-section .sp-stages__content { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 800px; }
.sp-section .sp-stages__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.2;
  color: var(--text);
}
.sp-section .sp-stages__meta {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-mute);
  padding-bottom: var(--sp-2);
}
.sp-section .sp-stages__meta strong { color: var(--text); font-weight: 500; }
.sp-section .sp-stages__meta p { margin: 0; }
.sp-section .sp-stages__body p { margin: 0 0 var(--sp-3); }

@media (max-width: 740px) {
  .sp-section .sp-stages__row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .sp-section .sp-stages__num { font-size: 36px; }
}

/* ============================================================
   SP — FAQ (accordion)
   ============================================================ */
.sp-section .sp-faq-section { padding-block: var(--sp-10); }
.sp-section .sp-faq__intro { max-width: 720px; }
.sp-section .sp-faq {
  border-top: 1px solid var(--bone-3);
}
.sp-section .sp-faq__item {
  border-bottom: 1px solid var(--bone-3);
}
.sp-section .sp-faq__item summary {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.35;
  color: var(--text);
  padding: var(--sp-5) var(--sp-6) var(--sp-5) 0;
  cursor: pointer;
  position: relative;
  list-style: none;
  transition: color var(--t-fast) var(--ease-out);
}
.sp-section .sp-faq__item summary::-webkit-details-marker { display: none; }
.sp-section .sp-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 24px;
  color: var(--copper);
  transition: transform var(--t-base) var(--ease-out);
  font-weight: 300;
}
.sp-section .sp-faq__item[open] summary::after { content: "−"; }
.sp-section .sp-faq__item summary:hover { color: var(--copper); }
.sp-section .sp-faq__answer {
  padding: 0 var(--sp-6) var(--sp-5) 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-mute);
  max-width: 64ch;
}
.sp-section .sp-faq__answer p { margin: 0 0 var(--sp-3); max-width: none; }

/* ============================================================
   SP — Comparison table
   ============================================================ */
.sp-section .sp-cmp-section { padding-block: var(--sp-10); }
.sp-section .sp-cmp__scroll { overflow-x: auto; }
.sp-section .sp-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
  min-width: 720px;
}
.sp-section .sp-cmp-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bone-3);
}
.sp-section .sp-cmp-table thead th.accent { color: var(--copper); }
.sp-section .sp-cmp-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--text);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bone-3);
  background: var(--bone-2);
  width: 240px;
}
.sp-section .sp-cmp-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bone-3);
  color: var(--text-mute);
  vertical-align: top;
}
.sp-section .sp-cmp-table tbody td.mono { font-family: var(--mono); font-size: 13px; color: var(--text-soft); }
.sp-section .sp-cmp__footnote {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bone-2);
  border-left: 3px solid var(--copper);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mute);
  max-width: 760px;
}
.sp-section .sp-cmp__footnote p { margin: 0; max-width: none; }

/* ============================================================
   SP — Banner image (standalone 21:9 block)
   ============================================================ */
.sp-section .sp-banner-section { padding-block: var(--sp-7); }
.sp-section .sp-banner-section--full { padding-block: 0; }
.sp-section .sp-banner-section--full > * { padding-inline: 0; max-width: none; }
.sp-section .sp-banner {
  position: relative;
  width: 100%;
  background: var(--bone-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sp-section .sp-banner-section--full .sp-banner { border-radius: 0; }
.sp-section .sp-banner--21-9 { aspect-ratio: 21 / 9; }
.sp-section .sp-banner--16-9 { aspect-ratio: 16 / 9; }
.sp-section .sp-banner--4-3  { aspect-ratio: 4 / 3; }
.sp-section .sp-banner--1-1  { aspect-ratio: 1 / 1; }
.sp-section .sp-banner__video,
.sp-section .sp-banner__image,
.sp-section .sp-banner__placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
.sp-section .sp-banner__placeholder {
  border: 1.5px dashed var(--copper);
  background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(184, 115, 51, 0.04) 14px 15px), var(--bone-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
}
.sp-section .sp-banner__caption {
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
  text-align: center;
}
.sp-section .sp-banner__caption p { margin: 0; max-width: none; }

/* ============================================================
   SP — Page hero with optional bg media (full-bleed)
   ============================================================ */
.sp-section .sp-page-hero { position: relative; overflow: hidden; }
.sp-section .sp-page-hero--has-media {
  padding-block: clamp(120px, 16vw, 240px) clamp(80px, 10vw, 140px);
  background: var(--ink);
  color: var(--bone);
}
.sp-section .sp-page-hero--has-media .eyebrow { color: var(--copper-h); }
.sp-section .sp-page-hero--has-media h1,
.sp-section .sp-page-hero--has-media .display-l { color: var(--bone); }
.sp-section .sp-page-hero--has-media .sp-page-hero__lead { color: var(--text-on-ink); }
.sp-section .sp-page-hero__media {
  position: absolute; inset: 0; z-index: 0;
}
.sp-section .sp-page-hero__video,
.sp-section .sp-page-hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sp-section .sp-page-hero__overlay {
  position: absolute; inset: 0;
  z-index: 1;
}
.sp-section .sp-page-hero__inner {
  position: relative; z-index: 2;
}

/* ============================================================
   SP — CTA band with optional bg media
   ============================================================ */
.sp-section .sp-cta-band { position: relative; overflow: hidden; }
.sp-section .sp-cta-band__media { position: absolute; inset: 0; z-index: 0; }
.sp-section .sp-cta-band__video,
.sp-section .sp-cta-band__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sp-section .sp-cta-band__overlay { position: absolute; inset: 0; z-index: 1; }
.sp-section .sp-cta-band > .container { position: relative; z-index: 2; }

/* ============================================================
   SP — Bundle card with optional media (image on top)
   ============================================================ */
.sp-section .bundle__media {
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-3);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  position: relative;
}
.sp-section .bundle__media img,
.sp-section .bundle__media .placeholder__inner {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* ============================================================
   SP — Cases: width modifiers + improved responsive
   ============================================================ */
.sp-section .sp-cases--default > .container { max-width: var(--max-w); }
.sp-section .sp-cases--wide > .container    { max-width: 2000px; }
.sp-section .sp-cases--xwide > .container   { max-width: 95vw; }
.sp-section .sp-cases--full > .container    { max-width: none; padding-inline: var(--sp-5); }

/* Cases grid responsive (in addition to global sp-grid rules) */
@media (min-width: 1500px) {
  .sp-section .sp-cases-section .sp-grid-4 { gap: var(--sp-5); }
}
@media (max-width: 1099px) and (min-width: 901px) {
  .sp-section .sp-cases-section .sp-grid-4 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) and (min-width: 561px) {
  .sp-section .sp-cases-section .sp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .sp-section .sp-cases-section .sp-grid-4 { grid-template-columns: 1fr !important; gap: var(--sp-4); }
  .sp-section .sp-cases-section .card { padding: var(--sp-5); }
  .sp-section .sp-cases-section .card__title { font-size: clamp(20px, 5vw, 26px); }
}

/* SP — Override Horizon's --page-width constraint on cases (body.page-width-narrow limits to 1440) */
.sp-section .sp-cases--wide > .container,
.sp-section .sp-cases--xwide > .container,
.sp-section .sp-cases--full > .container {
  width: 100% !important;
  --page-width: none;
}
.sp-section .sp-cases--wide > .container  { max-width: 2000px !important; }
.sp-section .sp-cases--xwide > .container { max-width: 95vw !important; padding-inline: clamp(20px, 3vw, 60px) !important; }
.sp-section .sp-cases--full > .container  { max-width: none !important; padding-inline: clamp(20px, 3vw, 60px) !important; }

/* SP — Cases: override Horizon --page-width at section level (page-width-narrow constraint) */
.sp-section.sp-cases--wide,
.sp-section .sp-cases--wide,
.sp-cases--wide   { --page-width: 2000px; --page-margin: 40px; }
.sp-section.sp-cases--xwide,
.sp-section .sp-cases--xwide,
.sp-cases--xwide  { --page-width: 95vw; --page-margin: 24px; }
.sp-section.sp-cases--full,
.sp-section .sp-cases--full,
.sp-cases--full   { --page-width: 100vw; --page-margin: 16px; }

/* Force container width to use the page-width variable on these sections */
.sp-cases--wide > .container,
.sp-cases--xwide > .container,
.sp-cases--full > .container {
  width: var(--page-width) !important;
  max-width: var(--page-width) !important;
  margin-inline: auto;
}

/* SP — Footer: darker shade per client feedback */
.sp-section .sp-footer { background: var(--ink-deeper, #06101A) !important; }
.sp-section .sp-footer__grid { border-bottom-color: rgba(244, 241, 236, 0.06); }
.sp-section .sp-footer__legal { border-top-color: rgba(244, 241, 236, 0.06); }

/* SP — Fix Recommended badge clipping on tier cards */
.sp-section .card.card--recommended {
  overflow: visible !important;
  position: relative;
  border: 2px solid var(--copper);
  margin-top: 12px; /* room for badge that pokes above */
}
.sp-section .card.card--recommended::after {
  content: "Recommended";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--copper);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  z-index: 3;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(184, 115, 51, 0.25);
}
/* Compensate row top so badge has visual breathing room when grid is tight */
.sp-section .sp-tiers .sp-grid {
  padding-top: 14px;
}

/* SP — Tiers: width modifier + responsive (same pattern as cases) */
.sp-tiers--default { --page-width: 1600px; }
.sp-tiers--wide    { --page-width: 2000px; --page-margin: 40px; }
.sp-tiers--xwide   { --page-width: 95vw; --page-margin: 24px; }
.sp-tiers--wide > .container,
.sp-tiers--xwide > .container {
  width: var(--page-width) !important;
  max-width: var(--page-width) !important;
  margin-inline: auto;
}

/* Tiers responsive ladder */
@media (min-width: 1500px) {
  .sp-section .sp-tiers-section .sp-grid-4 { gap: var(--sp-5); }
  .sp-section .sp-tiers-section .card { padding: var(--sp-7); }
}
@media (max-width: 1199px) and (min-width: 901px) {
  .sp-section .sp-tiers-section .sp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: var(--sp-6); }
}
@media (max-width: 900px) and (min-width: 641px) {
  .sp-section .sp-tiers-section .sp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: var(--sp-5); }
}
@media (max-width: 640px) {
  /* DISABLED: replaced by sp-tiers--m-{layout} system (Round 13) */
  .sp-section .sp-tiers-section .card { padding: var(--sp-5); }
}

/* SP — Unify padding-inline between cases & tiers xwide so widths match exactly */
.sp-tiers--xwide > .container,
.sp-cases--xwide > .container {
  padding-inline: clamp(20px, 3vw, 60px) !important;
}
.sp-tiers--wide > .container,
.sp-cases--wide > .container {
  padding-inline: clamp(20px, 3vw, 60px) !important;
}

/* SP — Force exact identical container widths on tiers + cases xwide */
.sp-tiers--xwide,
.sp-cases--xwide { --page-margin: 0px; }
.sp-tiers--xwide > .container,
.sp-cases--xwide > .container {
  width: 95vw !important;
  max-width: 95vw !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* SP — Force same --page-margin specificity for both tiers + cases (override earlier 24px on cases) */
.sp-section.sp-tiers--xwide,
.sp-section .sp-tiers--xwide,
.sp-section.sp-cases--xwide,
.sp-section .sp-cases--xwide { --page-margin: 0px !important; }

/* SP — Solutions: width modifier (same pattern as tiers + cases) */
.sp-section.sp-solutions--wide,
.sp-section .sp-solutions--wide,
.sp-solutions--wide { --page-width: 2000px; --page-margin: 0px !important; }
.sp-section.sp-solutions--xwide,
.sp-section .sp-solutions--xwide,
.sp-solutions--xwide { --page-width: 95vw; --page-margin: 0px !important; }
.sp-solutions--wide > .container,
.sp-solutions--xwide > .container {
  width: var(--page-width) !important;
  max-width: var(--page-width) !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 3vw, 60px) !important;
  box-sizing: border-box;
}

/* Match desktop ladder so solutions cards behave like cases/tiers */
@media (min-width: 1500px) {
  .sp-section .sp-solutions-section .sp-solutions-row { gap: var(--sp-5); }
}

/* SP — Lighter heading weight (titles a touch thinner) */
.sp-section .display-xl,
.sp-section .display-l,
.sp-section .display-m,
.sp-section .display-s,
.sp-section h1.display-l,
.sp-section h2.display-m,
.sp-section h2.display-s,
.sp-section h2.display-l,
.sp-section h3 {
  font-weight: 300 !important;
  /* font-variation-settings removed — let Fraunces use natural opsz */
}
.sp-section .display-xl .editorial,
.sp-section .display-l .editorial,
.sp-section .display-m .editorial,
.sp-section .display-s .editorial {
  font-weight: 300 !important;
  font-style: italic;
}

/* ============================================================
   SP — Mobile responsive patch
   Fixes: horizontal scroll on width-modifier sections, footer
   stacking, grid collapse, newsletter overflow.
   ============================================================ */

/* Use overflow-x: clip instead of hidden — modern, doesn't break sticky positioning */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Cap width-modifier containers (sp-cases / sp-tiers / sp-solutions) — they force 2000px/95vw which overflows mobile */
@media (max-width: 1024px) {
  .sp-section .sp-cases--wide > .container,
  .sp-section .sp-cases--xwide > .container,
  .sp-section .sp-cases--full > .container,
  .sp-tiers--wide > .container,
  .sp-tiers--xwide > .container,
  .sp-solutions--wide > .container,
  .sp-solutions--xwide > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: clamp(16px, 4vw, 32px) !important;
  }
  .sp-cases--wide, .sp-cases--xwide, .sp-cases--full,
  .sp-tiers--wide, .sp-tiers--xwide,
  .sp-solutions--wide, .sp-solutions--xwide {
    --page-width: 100% !important;
    --page-margin: 16px !important;
  }
}

/* Defensive grid collapse for any sp-grid-N missing explicit mobile rule */
@media (max-width: 720px) {
  .sp-section .sp-grid-2,
  .sp-section .sp-grid-3,
  .sp-section .sp-grid-4 { grid-template-columns: 1fr !important; gap: var(--sp-4) !important; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .sp-section .sp-grid-3,
  .sp-section .sp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Tighten container padding + cap children on narrow viewports */
@media (max-width: 720px) {
  .sp-section .container,
  .sp-section .container--narrow,
  .sp-section .container--prose { max-width: 100% !important; padding-inline: clamp(16px, 4vw, 24px) !important; }
  .sp-section img,
  .sp-section video,
  .sp-section iframe,
  .sp-section svg { max-width: 100% !important; height: auto; }
  .sp-section table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* Footer — full stack + newsletter wrap on small screens */
@media (max-width: 560px) {
  .sp-footer { padding: var(--sp-7) 0 var(--sp-5); }
  .sp-footer__grid { gap: var(--sp-6); }
  .sp-footer__newsletter { flex-wrap: wrap; gap: var(--sp-2); }
  .sp-footer__newsletter input,
  .sp-footer__newsletter button {
    flex: 1 1 100%;
    border-radius: var(--r-sm) !important;
    border-right: 1px solid var(--hairline-on-ink) !important;
  }
  .sp-section .sp-footer__brand { font-size: 32px !important; }
  .sp-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* Smallest viewport — reduce padding further */
@media (max-width: 380px) {
  .sp-section .container { padding-inline: 14px !important; }
}

/* ============================================================
   SP — Batch A: HIGH severity mobile fixes
   sp-comparison-table, sp-footer, sp-protocol-grid, sp-tiers
   ============================================================ */

/* --- sp-comparison-table: sticky first col + tight typography on mobile --- */
@media (max-width: 720px) {
  .sp-section .sp-cmp__scroll {
    position: relative;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .sp-section .sp-cmp__scroll::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
    background: linear-gradient(to right, transparent, var(--bone, #f4f1ec));
    pointer-events: none; opacity: 0.9;
  }
  .sp-section .sp-cmp-table { font-size: 12px; min-width: 560px; }
  .sp-section .sp-cmp-table thead th,
  .sp-section .sp-cmp-table tbody th,
  .sp-section .sp-cmp-table tbody td { padding: 8px 10px !important; }
  .sp-section .sp-cmp-table tbody th {
    position: sticky; left: 0; z-index: 2;
    background: var(--bone, #f4f1ec);
    box-shadow: 1px 0 0 var(--hairline, rgba(0,0,0,0.08));
    width: auto; min-width: 120px;
  }
  .sp-section .sp-cmp-table thead th:first-child {
    position: sticky; left: 0; z-index: 3;
    background: var(--bone, #f4f1ec);
  }
}

/* --- sp-footer: brand clamp + tablet breakpoint @800px + legal readability --- */
.sp-section .sp-footer__brand { font-size: clamp(22px, 5.2vw, 48px) !important; }

@media (max-width: 800px) and (min-width: 561px) {
  .sp-footer__grid { grid-template-columns: 1fr 1fr !important; gap: var(--sp-6) !important; }
  .sp-footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sp-section .sp-footer__legal { font-size: 13px !important; line-height: 1.7 !important; }
  .sp-footer__addr { font-size: 14px; }
  .sp-footer__col-title { margin-bottom: var(--sp-3); }
}

/* --- sp-protocol-grid: rule-h clamp + tighter gaps on tablets + h4 clamp --- */
@media (max-width: 1099px) and (min-width: 641px) {
  .sp-section .sp-protocol__grid { gap: var(--sp-5) !important; }
}
@media (max-width: 640px) {
  .sp-section .sp-protocol__item { padding: 0; }
  .sp-section .sp-protocol__item .rule-h { width: clamp(24px, 8vw, 40px) !important; }
  .sp-section .sp-protocol__item h4 { font-size: clamp(16px, 4.5vw, 20px) !important; line-height: 1.3; }
  .sp-section .sp-protocol-section { padding-block: var(--sp-8); }
}

/* --- sp-tiers: typography clamps + recommended card mobile polish --- */
@media (max-width: 640px) {
  .sp-section .sp-tiers-section .card__eyebrow { font-size: 11px !important; letter-spacing: 0.08em; }
  .sp-section .sp-tiers-section .tier__use-case { font-size: clamp(14px, 4vw, 16px) !important; line-height: 1.45; }
  .sp-section .sp-tiers-section .tier__includes li { font-size: clamp(13px, 3.8vw, 15px) !important; line-height: 1.5; }
  .sp-section .sp-tiers-section .tier__price { font-size: clamp(20px, 6vw, 28px) !important; }
  .sp-section .sp-tiers-section .card.card--recommended { border-width: 1px; box-shadow: 0 2px 12px rgba(184, 115, 51, 0.18); }
  .sp-section .sp-tiers-section .card.card--recommended::after {
    font-size: 10px; padding: 4px 11px; top: -11px;
  }
  .sp-section .sp-tiers-section .card { padding: var(--sp-5) var(--sp-4) !important; }
}

/* ============================================================
   SP — Batch B: MED severity mobile fixes
   sp-bundles, sp-cta-band, sp-hero, sp-process, sp-product-block,
   sp-solutions-grid, sp-stages, sp-header (nav), sp-faq
   ============================================================ */

/* --- sp-bundles: title + price clamp + mobile padding --- */
@media (max-width: 640px) {
  .sp-section .bundle { padding: var(--sp-5) var(--sp-4) !important; }
  .sp-section .bundle__title { font-size: clamp(18px, 5vw, 24px) !important; line-height: 1.25; }
  .sp-section .bundle__price { font-size: clamp(15px, 4vw, 18px) !important; }
  .sp-section .bundle__name { font-size: 11px !important; letter-spacing: 0.08em; }
}

/* --- sp-cta-band: stack CTAs vertically + tighter padding --- */
@media (max-width: 560px) {
  .sp-section .sp-cta-band .cta-cluster,
  .sp-section .sp-cta-band .cta-cluster--center {
    flex-direction: column; align-items: stretch; gap: var(--sp-3);
  }
  .sp-section .sp-cta-band .cta-cluster .btn,
  .sp-section .sp-cta-band .cta-cluster--center .btn { width: 100%; justify-content: center; }
  .sp-section .sp-cta-band { padding-block: var(--sp-7) !important; }
}

/* --- sp-hero: tighter padding + lead/deck readability + mobile-safe heights --- */
@media (max-width: 640px) {
  .sp-section .sp-hero--medium { min-height: 60vh; }
  .sp-section .sp-hero--tall   { min-height: 75vh; }
  .sp-section .sp-hero--full   { min-height: 85vh; }
  .sp-section .sp-hero { padding-inline: 16px; }
  .sp-section .sp-hero .hero__content { padding-block: clamp(48px, 10vh, 96px) !important; }
  .sp-section .hero__lead { font-size: clamp(15px, 4vw, 18px); line-height: 1.55; }
  .sp-section .hero__deck { font-size: clamp(15px, 4vw, 18px); }
  .sp-section .hero__eyebrow { font-size: 11px; letter-spacing: 0.08em; }
  .sp-section .sp-hero .cta-cluster { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .sp-section .sp-hero .cta-cluster .btn { width: 100%; justify-content: center; }
}

/* --- sp-process (ladder): reduce numbering + tighter rows on mobile --- */
@media (max-width: 640px) {
  .sp-section .sp-process-ladder__row { padding: var(--sp-4) 0 !important; gap: var(--sp-3) !important; align-items: start; }
  .sp-section .sp-process-ladder__num { font-size: clamp(22px, 6vw, 32px) !important; min-width: 36px !important; }
  .sp-section .sp-process-ladder__name { font-size: clamp(16px, 4.5vw, 20px) !important; }
  .sp-section .sp-process-ladder__desc { font-size: clamp(14px, 4vw, 16px) !important; line-height: 1.55; }
  .sp-section .sp-process-ladder__intro { font-size: clamp(15px, 4vw, 18px) !important; }
}

/* Legacy sp-timeline ladder (if used elsewhere) */
@media (max-width: 640px) {
  .sp-section .sp-timeline { padding-left: var(--sp-5) !important; }
  .sp-section .sp-timeline__num { font-size: clamp(20px, 5.5vw, 28px) !important; }
  .sp-section .sp-timeline__name { font-size: clamp(15px, 4.5vw, 18px) !important; }
  .sp-section .sp-timeline__step { padding: var(--sp-4) 0 var(--sp-5) var(--sp-4) !important; }
}

/* --- sp-product-block: list + paragraph clamps on mobile --- */
@media (max-width: 640px) {
  .sp-section .sp-product-block { padding-block: var(--sp-7); }
  .sp-section .sp-product-block .display-s { font-size: clamp(26px, 7vw, 36px) !important; }
  .sp-section .sp-product-block .lead { font-size: clamp(15px, 4vw, 17px) !important; }
  .sp-section .sp-product-block__body p { font-size: clamp(15px, 4vw, 16px); margin: 0 0 var(--sp-3) !important; }
  .sp-section .sp-product-block__list li { font-size: clamp(14px, 4vw, 16px) !important; line-height: 1.5; }
  .sp-section .sp-product-block h4 { font-size: clamp(15px, 4vw, 17px) !important; }
}

/* --- sp-solutions-grid: card padding + title clamp on small screens --- */
@media (max-width: 560px) {
  .sp-section .sp-solutions-row .card,
  .sp-section .sp-solutions-section .card { padding: var(--sp-4) !important; }
  .sp-section .sp-solutions-row .card__title,
  .sp-section .sp-solutions-section .card__title { font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.25; }
  .sp-section .sp-solutions-row .card__tags,
  .sp-section .sp-solutions-section .card__tags { gap: 6px; }
}

/* --- sp-stages: stack number + content vertically on mobile --- */
@media (max-width: 640px) {
  .sp-section .sp-stages-section { padding-block: var(--sp-7); }
  .sp-section .sp-stages__card { padding: var(--sp-5) 0 !important; }
  .sp-section .sp-stages__row { grid-template-columns: 1fr !important; gap: var(--sp-3) !important; }
  .sp-section .sp-stages__num { font-size: clamp(28px, 8vw, 40px) !important; }
  .sp-section .sp-stages__name { font-size: clamp(18px, 5vw, 24px) !important; }
  .sp-section .sp-stages__meta { font-size: clamp(13px, 3.8vw, 15px) !important; }
  .sp-section .sp-stages__body p { font-size: clamp(15px, 4vw, 16px) !important; line-height: 1.55; }
}

/* --- sp-header / sp-nav: earlier burger transition + brand clamp --- */
@media (max-width: 1024px) {
  .sp-nav__inner { height: 64px !important; }
  .sp-section .sp-brand,
  .sp-brand { font-size: clamp(18px, 5vw, 22px) !important; }
  .sp-nav__menu { gap: var(--sp-4) !important; }
}

/* --- sp-faq: full-width intro on mobile + tighter padding --- */
@media (max-width: 640px) {
  .sp-section .sp-faq__intro { max-width: 100% !important; }
  .sp-section .sp-faq__item { padding: var(--sp-4) 0 !important; }
  .sp-section .sp-faq__question,
  .sp-section .sp-faq summary { font-size: clamp(16px, 4.5vw, 18px) !important; line-height: 1.35; }
  .sp-section .sp-faq__answer { font-size: clamp(14px, 4vw, 16px); line-height: 1.6; }
}

/* ============================================================
   SP — Batch C: Systemic mobile polish
   Vertical rhythm, typography clamps, spacing, buttons.
   Applies globally across all sections.
   ============================================================ */

/* Restore section vertical padding for sp-tiers/cases/solutions (had .section class removed) */
.sp-section .sp-tiers-section,
.sp-section .sp-solutions-section,
.sp-section .sp-cases-section { padding-block: var(--section-py); }

/* --- Section vertical rhythm: reduce sp-7/8/9/10 padding-block on mobile --- */
@media (max-width: 640px) {
  .sp-section .section { padding-block: var(--sp-7) !important; }
  .sp-section .section--tight { padding-block: var(--sp-6) !important; }
  .sp-section .section--padded-sm { padding-block: var(--sp-6) !important; }
}
@media (max-width: 480px) {
  .sp-section .section { padding-block: var(--sp-6) !important; }
  .sp-section .section--tight { padding-block: var(--sp-5) !important; }
}

/* --- Global typography clamps for any remaining fixed px > 16px --- */
@media (max-width: 640px) {
  .sp-section h3 { font-size: clamp(18px, 5vw, 24px) !important; line-height: 1.3; }
  .sp-section h4 { font-size: clamp(16px, 4.5vw, 20px) !important; }
  .sp-section .eyebrow { font-size: 11px !important; letter-spacing: 0.08em; }
  .sp-section .lead { font-size: clamp(15px, 4vw, 18px) !important; line-height: 1.55; }
  .sp-section p { font-size: clamp(15px, 4vw, 17px); line-height: 1.6; }
  .sp-section .display-xl { font-size: clamp(40px, 11vw, 72px) !important; line-height: 1.05 !important; }
  .sp-section .display-l { font-size: clamp(34px, 9vw, 56px) !important; line-height: 1.1 !important; }
}

/* --- Card padding base reduction (catches any card lacking explicit mobile rule) --- */
@media (max-width: 560px) {
  .sp-section .card { padding: var(--sp-5) var(--sp-4) !important; }
  .sp-section .card__title { font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.25; }
  .sp-section .card__body { font-size: clamp(14px, 4vw, 16px); line-height: 1.55; }
  .sp-section .card__eyebrow { font-size: 11px !important; letter-spacing: 0.08em; }
}

/* --- Button sizing on mobile: full-tap targets, no shrunk text --- */
@media (max-width: 560px) {
  .sp-section .btn {
    padding: 12px 18px !important;
    font-size: 14px !important;
    min-height: 44px;
    line-height: 1.2;
  }
  .sp-section .btn--large { padding: 14px 22px !important; font-size: 15px !important; }
}

/* --- Stack utility classes: tighter gaps on mobile --- */
@media (max-width: 640px) {
  .sp-section .stack-lg > * + * { margin-top: var(--sp-5) !important; }
  .sp-section .stack > * + * { margin-top: var(--sp-4) !important; }
}

/* --- Reveal opacity: disable transforms on mobile to prevent overflow on entrance animations --- */
@media (max-width: 640px) {
  .sp-section .reveal { transform: none !important; }
}

/* --- Word-break for long unbroken strings (URLs, tokens) --- */
@media (max-width: 640px) {
  .sp-section p,
  .sp-section li,
  .sp-section td,
  .sp-section .footer__addr,
  .sp-section .sp-footer__addr { overflow-wrap: anywhere; word-break: break-word; }
}

/* --- Section margin reset on consecutive sections to prevent double-padding --- */
@media (max-width: 640px) {
  .sp-section + .sp-section .section { padding-top: var(--sp-6) !important; }
}

/* --- Eyebrow + meta type: never shrink below 11px (a11y) --- */
@media (max-width: 380px) {
  .sp-section .eyebrow,
  .sp-section .card__eyebrow,
  .sp-section .bundle__name,
  .sp-section .sp-footer__col-title { font-size: 11px !important; }
}

/* ============================================================
   SP — Unified page gutter
   ONE consistent left/right margin from viewport edge,
   applied to every section regardless of container type or
   width modifier. Eliminates spacing inconsistency.
   ============================================================ */
:root {
  --sp-gutter: clamp(24px, 4vw, 56px);
}
@media (max-width: 1199px) { :root { --sp-gutter: clamp(20px, 3.5vw, 32px); } }
@media (max-width: 720px)  { :root { --sp-gutter: 20px; } }
@media (max-width: 480px)  { :root { --sp-gutter: 16px; } }
@media (max-width: 380px)  { :root { --sp-gutter: 14px; } }

/* Force every section container (regular + width-modifier variants) to the unified gutter */
body .sp-section .container,
body .sp-section .container--narrow,
body .sp-section .container--prose,
body .sp-section .sp-cases--default > .container,
body .sp-section .sp-cases--wide > .container,
body .sp-section .sp-cases--xwide > .container,
body .sp-section .sp-cases--full > .container,
body .sp-tiers--default > .container,
body .sp-tiers--wide > .container,
body .sp-tiers--xwide > .container,
body .sp-solutions--default > .container,
body .sp-solutions--wide > .container,
body .sp-solutions--xwide > .container {
  padding-inline: var(--sp-gutter) !important;
}

/* Sections that don't use a .container wrapper (hero, cta-band, banner) get the gutter directly */
body .sp-section .sp-hero,
body .sp-section .sp-cta-band {
  padding-inline: var(--sp-gutter) !important;
}

/* Full-bleed banners explicitly opt-out (image edge-to-edge) */
body .sp-section .sp-banner-section--full,
body .sp-section .sp-banner-section--full > * {
  padding-inline: 0 !important;
}

/* Kill Horizon's --page-margin contribution on ALL sp-* width-modifier sections
   so the only source of horizontal spacing is our unified --sp-gutter on .container */
.sp-section.sp-cases--default, .sp-section .sp-cases--default, .sp-cases--default,
.sp-section.sp-cases--wide, .sp-section .sp-cases--wide, .sp-cases--wide,
.sp-section.sp-cases--xwide, .sp-section .sp-cases--xwide, .sp-cases--xwide,
.sp-section.sp-cases--full, .sp-section .sp-cases--full, .sp-cases--full,
.sp-section.sp-tiers--default, .sp-section .sp-tiers--default, .sp-tiers--default,
.sp-section.sp-tiers--wide, .sp-section .sp-tiers--wide, .sp-tiers--wide,
.sp-section.sp-tiers--xwide, .sp-section .sp-tiers--xwide, .sp-tiers--xwide,
.sp-section.sp-solutions--default, .sp-section .sp-solutions--default, .sp-solutions--default,
.sp-section.sp-solutions--wide, .sp-section .sp-solutions--wide, .sp-solutions--wide,
.sp-section.sp-solutions--xwide, .sp-section .sp-solutions--xwide, .sp-solutions--xwide {
  --page-margin: 0 !important;
}

/* Unified content max-width for every section — single source of truth */
:root { --sp-content-max: 1600px; }

/* Force EVERY .container to be: centered, max-width = --sp-content-max, padded by --sp-gutter, border-box.
   Use place-self: center + grid-column: 1 / -1 because Horizon's .section is display:grid
   and margin-inline:auto alone does NOT center in grid layout. */
body .sp-section .container,
body .sp-section .sp-cases--default > .container,
body .sp-section .sp-cases--wide > .container,
body .sp-section .sp-cases--xwide > .container,
body .sp-section .sp-cases--full > .container,
body .sp-section .sp-tiers--default > .container,
body .sp-section .sp-tiers--wide > .container,
body .sp-section .sp-tiers--xwide > .container,
body .sp-section .sp-solutions--default > .container,
body .sp-section .sp-solutions--wide > .container,
body .sp-section .sp-solutions--xwide > .container {
  width: 100% !important;
  max-width: var(--sp-content-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--sp-gutter) !important;
  box-sizing: border-box !important;
  justify-self: center !important;
  grid-column: 1 / -1 !important;
}

/* Narrow and prose containers keep their tighter max-widths but use the same gutter */
body .sp-section .container--narrow { max-width: 1000px !important; }
body .sp-section .container--prose { max-width: 800px !important; }

/* ALL width modifiers (--wide, --xwide, --full) now collapse to --sp-content-max
   for consistent left/right alignment across every section.
   Width-modifier sections (cases/tiers/solutions) no longer get bigger max-widths. */

/* Also kill Horizon main's --page-width contribution so .container has full alignment control */
.sp-section.sp-cases--wide, .sp-section .sp-cases--wide, .sp-cases--wide,
.sp-section.sp-cases--xwide, .sp-section .sp-cases--xwide, .sp-cases--xwide,
.sp-section.sp-cases--full, .sp-section .sp-cases--full, .sp-cases--full,
.sp-section.sp-tiers--wide, .sp-section .sp-tiers--wide, .sp-tiers--wide,
.sp-section.sp-tiers--xwide, .sp-section .sp-tiers--xwide, .sp-tiers--xwide,
.sp-section.sp-solutions--wide, .sp-section .sp-solutions--wide, .sp-solutions--wide,
.sp-section.sp-solutions--xwide, .sp-section .sp-solutions--xwide, .sp-solutions--xwide {
  --page-width: var(--sp-content-max) !important;
}

/* Hero and CTA-band: they don't have .container — apply same gutter directly + center their inner content */
body .sp-section .sp-hero,
body .sp-section .sp-cta-band { padding-inline: var(--sp-gutter) !important; }
body .sp-section .sp-hero > *,
body .sp-section .sp-cta-band > * { max-width: var(--sp-content-max); margin-inline: auto; box-sizing: border-box; }
body .sp-section .sp-hero .hero__content,
body .sp-section .sp-cta-band > .container { max-width: var(--sp-content-max) !important; }

/* Banner full-bleed: explicit opt-out from gutter */
body .sp-section .sp-banner-section--full,
body .sp-section .sp-banner-section--full > * { padding-inline: 0 !important; max-width: none !important; }

/* (Old Mobile Patch carousel block — disabled via impossible @media to defer to Round 9 at end of file) */
@media (min-width: 99999px) {
  .sp-section .sp-tiers-section .sp-grid,
  .sp-section .sp-cases-section .sp-grid,
  .sp-section .sp-solutions-section .sp-grid,
  .sp-section .sp-solutions-row,
  .sp-section .sp-bundles__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sp-gutter);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: var(--sp-4) !important;
    /* Bleed slightly past container so cards align with gutter */
    margin-inline: calc(-1 * var(--sp-gutter)) !important;
    padding-inline: var(--sp-gutter) !important;
    padding-bottom: var(--sp-4);
    /* Hide scrollbar but keep functional */
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 115, 51, 0.3) transparent;
  }
  .sp-section .sp-tiers-section .sp-grid::-webkit-scrollbar,
  .sp-section .sp-cases-section .sp-grid::-webkit-scrollbar,
  .sp-section .sp-solutions-section .sp-grid::-webkit-scrollbar,
  .sp-section .sp-solutions-row::-webkit-scrollbar,
  .sp-section .sp-bundles__grid::-webkit-scrollbar { height: 4px; }
  .sp-section .sp-tiers-section .sp-grid::-webkit-scrollbar-thumb,
  .sp-section .sp-cases-section .sp-grid::-webkit-scrollbar-thumb,
  .sp-section .sp-solutions-section .sp-grid::-webkit-scrollbar-thumb,
  .sp-section .sp-solutions-row::-webkit-scrollbar-thumb,
  .sp-section .sp-bundles__grid::-webkit-scrollbar-thumb { background: rgba(184, 115, 51, 0.4); border-radius: 2px; }

  /* Cards inside carousel: viewport-proportional with clamp() — consistent
     across 320–720px viewports, never overflows, never tiny. */
  .sp-section .sp-tiers-section .sp-grid > *,
  .sp-section .sp-cases-section .sp-grid > *,
  .sp-section .sp-solutions-section .sp-grid > *,
  .sp-section .sp-solutions-row > *,
  .sp-section .sp-bundles__grid > * {
    flex: 0 0 clamp(260px, 78vw, 360px) !important;
    width: clamp(260px, 78vw, 360px) !important;
    max-width: none !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* Equal height cards in carousel — important so all align top */
    align-self: stretch;
    height: auto;
  }

  /* Carousels need overflow-x: visible on parent .container so cards aren't clipped */
  body .sp-section .sp-tiers-section .container,
  body .sp-section .sp-cases-section .container,
  body .sp-section .sp-solutions-section .container,
  body .sp-section .sp-bundles-section .container,
  body .sp-section .sp-protocol-section .container { overflow: visible !important; }

  /* Recommended card padding inside carousel: keep room for badge */
  .sp-section .sp-tiers-section .card.card--recommended { margin-top: 14px; }
}

/* ============================================================
   SP — Mobile additional polish (post-audit visual pass)
   ============================================================ */

/* Hero: ensure dark overlay on full-bleed hero for text contrast on mobile */
@media (max-width: 640px) {
  .sp-section .hero--full::before,
  .sp-section .sp-hero--full::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14, 26, 36, 0.35) 0%, rgba(14, 26, 36, 0.65) 100%);
    z-index: 0; pointer-events: none;
  }
  .sp-section .hero--full .hero__content,
  .sp-section .sp-hero--full .hero__content { position: relative; z-index: 1; }
}

/* Card media aspect-ratio: 4:5 too tall on mobile, use 4:3 for better fit */
@media (max-width: 640px) {
  .sp-section .sp-card-media--4-5 { aspect-ratio: 4 / 3 !important; }
  .sp-section .sp-card-media--16-9 { aspect-ratio: 16 / 10 !important; }
  .sp-section .sp-card-media--21-9 { aspect-ratio: 21 / 12 !important; }
}

/* Tier card recommended badge: smaller, no overflow on narrow */
@media (max-width: 480px) {
  .sp-section .card.card--recommended::after {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    padding: 3px 9px !important;
    top: -10px !important;
  }
}

/* Header drawer: full-height + proper z-index on mobile */
@media (max-width: 1024px) {
  .sp-drawer { width: min(360px, 90vw) !important; max-width: 90vw !important; }
  .sp-drawer__menu a { padding: 14px 0 !important; font-size: 16px !important; }
}

/* Section--dark text contrast on mobile (in case background mistakes) */
@media (max-width: 640px) {
  .sp-section .section--dark p,
  .sp-section .section--dark .lead,
  .sp-section .section--dark .hero__lead { color: var(--text-on-ink, #f4f1ec); }
  .sp-section .section--dark { background: var(--ink, #0E1A24); }
}

/* Sticky-CTA at bottom on mobile: don't overlap with content */
@media (max-width: 720px) {
  .sp-section .sticky-cta { padding: 10px 16px !important; gap: var(--sp-3); }
  .sp-section .sticky-cta__text { font-size: 13px !important; }
  .sp-section .sticky-cta .btn { padding: 10px 14px !important; font-size: 13px !important; min-height: 38px; }
  body.has-sticky-cta { padding-bottom: 70px; }
}

/* Subnav (page tabs): horizontal scroll friendly on mobile + clear scroll affordance */
@media (max-width: 720px) {
  .sp-section .subnav__inner { gap: var(--sp-4) !important; padding-inline: var(--sp-gutter); }
  .sp-section .subnav a { font-size: 13px; white-space: nowrap; }
}

/* Pricing-strip / stats-bar: full stack on narrow */
@media (max-width: 560px) {
  .sp-section .pricing-strip { flex-direction: column; align-items: stretch; text-align: center; gap: var(--sp-3) !important; }
  .sp-section .pricing-strip strong { font-size: clamp(20px, 6vw, 28px); }
}

/* Form input/textarea/select: full-width + readable size on mobile */
@media (max-width: 640px) {
  .sp-section input[type=text],
  .sp-section input[type=email],
  .sp-section input[type=tel],
  .sp-section textarea,
  .sp-section select { font-size: 16px !important; padding: 12px 14px !important; min-height: 44px; width: 100%; }
  .sp-section .form__radio { padding: 12px !important; }
  .sp-section .form__row { flex-direction: column !important; gap: var(--sp-3) !important; }
}

/* Split layouts: collapse media + content stack on mobile, image first */
@media (max-width: 720px) {
  .sp-section .split,
  .sp-section .split--reverse { grid-template-columns: 1fr !important; gap: var(--sp-5) !important; }
  .sp-section .split--reverse > :first-child { order: 0 !important; }
}

/* Decorative "rule" lines: don't dominate on narrow */
@media (max-width: 480px) {
  .sp-section .rule-h { width: clamp(20px, 6vw, 36px) !important; }
  .sp-section .rule-h--full { width: 100% !important; }
}

/* Footer "credentials" / partner logos band: tighter spacing + wrap */
@media (max-width: 560px) {
  .sp-section .cred-grid,
  .sp-section .partners-strip {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--sp-3) !important;
    text-align: center;
  }
  .sp-section .cred-grid > *,
  .sp-section .partners-strip > * { flex: 0 1 auto; }
}

/* Comparison table: stronger scroll affordance + min-width tighter on mobile */
@media (max-width: 480px) {
  .sp-section .sp-cmp-table { min-width: 460px !important; font-size: 11.5px !important; }
  .sp-section .sp-cmp-table thead th,
  .sp-section .sp-cmp-table tbody th,
  .sp-section .sp-cmp-table tbody td { padding: 6px 8px !important; }
}

/* ============================================================
   SP — Round 2 mobile fixes (post-carousel)
   ============================================================ */

/* Protocol-grid: also a horizontal swipe carousel on mobile (4 items) */
@media (max-width: 720px) {
  .sp-section .sp-protocol__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sp-gutter);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: var(--sp-4) !important;
    margin-inline: calc(-1 * var(--sp-gutter)) !important;
    padding-inline: var(--sp-gutter) !important;
    padding-bottom: var(--sp-3);
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 115, 51, 0.3) transparent;
  }
  .sp-section .sp-protocol__grid::-webkit-scrollbar { height: 4px; }
  .sp-section .sp-protocol__grid::-webkit-scrollbar-thumb { background: rgba(184, 115, 51, 0.4); border-radius: 2px; }
  .sp-section .sp-protocol__grid > * {
    flex: 0 0 75% !important;
    max-width: 320px !important;
    scroll-snap-align: start;
  }
  body .sp-section .sp-protocol-section .container { overflow: visible !important; }
}

/* Kill Horizon's .shopify-section wrapper padding (any inherited padding from theme groups) */
body .shopify-section.sp-section,
body .shopify-section-group-header-group.sp-section,
body .shopify-section-group-footer-group.sp-section { padding: 0 !important; margin: 0 !important; }

/* Defensive: any section ancestor with padding-inline → zero (we control padding via .container only) */
body main.content-for-layout,
body main.content-for-layout > .shopify-section { padding-inline: 0 !important; max-width: none !important; margin-inline: 0 !important; }

/* Hero media (video/image): ensure full-width inside section, never clipped by gutter */
@media (max-width: 720px) {
  .sp-section .hero__media,
  .sp-section .hero__media video,
  .sp-section .hero__media img,
  .sp-section .hero__media iframe {
    width: 100% !important; max-width: none !important; object-fit: cover;
  }
}

/* Sticky CTA: avoid covering input fields on contact page */
@media (max-width: 720px) {
  .sp-section input:focus,
  .sp-section textarea:focus {
    scroll-margin-bottom: 100px; /* Anchor field above sticky CTA when keyboard opens */
  }
}

/* Page-hero on sub-pages: tighter padding on small screens */
@media (max-width: 640px) {
  .sp-section .sp-page-hero { padding-block: clamp(48px, 10vw, 96px) !important; }
  .sp-section .sp-page-hero__lead { font-size: clamp(15px, 4vw, 18px) !important; }
}

/* Cluster (button groups, tag lists): always wrap on mobile */
@media (max-width: 560px) {
  .sp-section .cluster { flex-wrap: wrap !important; }
  .sp-section .cta-cluster { flex-wrap: wrap !important; }
}

/* Pull-quote (founder section blockquote): readable size on mobile */
@media (max-width: 640px) {
  .sp-section .pull-quote,
  .sp-section blockquote.pull-quote {
    font-size: clamp(17px, 4.5vw, 22px) !important;
    line-height: 1.4 !important;
    padding-left: 18px !important;
    padding-right: 0 !important;
  }
}

/* Long inline mono strings (CUI, ANRE, IBAN, prices) — wrap at any character */
@media (max-width: 480px) {
  .sp-section .mono,
  .sp-section code,
  .sp-section .sp-footer__legal { overflow-wrap: anywhere !important; word-break: break-word !important; }
}

/* Carousel hint: small "swipe →" indicator below first card section
   so user knows horizontal scroll is available */
@media (max-width: 720px) {
  .sp-section .sp-tiers-section .sp-grid,
  .sp-section .sp-cases-section .sp-grid,
  .sp-section .sp-solutions-section .sp-grid,
  .sp-section .sp-solutions-row,
  .sp-section .sp-bundles__grid,
  .sp-section .sp-protocol__grid {
    /* iOS momentum + smooth fluent on Android */
    scroll-behavior: smooth;
  }
}

/* clamp(260px, 78vw, 360px) in the main rule already handles tiny phones — no override needed */

/* Protocol-grid cards (smaller content) — DISABLED, see Round 9 at end */
@media (min-width: 99999px) {
  .sp-section .sp-protocol__grid > * {
    flex: 0 0 clamp(220px, 70vw, 300px) !important;
    width: clamp(220px, 70vw, 300px) !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: stretch;
  }
}

/* Equal heights — DISABLED, conflicting card .height:100% caused issues */
@media (min-width: 99999px) {
  .sp-section .sp-tiers-section .sp-grid > .card,
  .sp-section .sp-cases-section .sp-grid > .card,
  .sp-section .sp-solutions-section .sp-grid > .card,
  .sp-section .sp-solutions-row > .card,
  .sp-section .sp-bundles__grid > .bundle {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  /* Push CTA link to bottom of card so all CTAs align horizontally */
  .sp-section .sp-tiers-section .sp-grid > .card > :last-child,
  .sp-section .sp-cases-section .sp-grid > .card > :last-child,
  .sp-section .sp-solutions-section .sp-grid > .card > :last-child,
  .sp-section .sp-solutions-row > .card > :last-child { margin-top: auto !important; }
}

/* ============================================================
   SP — User-reported fixes (Round 3)
   1) Tiers only 2 cards visible (landscape phones)
   2) Service domains / Our Projects cards overflow
   3) How We Work timeline numbers too small
   4) Card text overflows card frame
   ============================================================ */

/* (1) DISABLED — Round 9 at end of file is the single source of truth for carousel */
@media (min-width: 99999px) {
  .sp-section .sp-tiers-section .sp-grid,
  .sp-section .sp-cases-section .sp-grid,
  .sp-section .sp-solutions-section .sp-grid,
  .sp-section .sp-solutions-row,
  .sp-section .sp-bundles__grid,
  .sp-section .sp-protocol__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sp-gutter);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: var(--sp-4) !important;
    margin-inline: calc(-1 * var(--sp-gutter)) !important;
    padding-inline: var(--sp-gutter) !important;
    padding-bottom: var(--sp-4);
  }
  .sp-section .sp-tiers-section .sp-grid > *,
  .sp-section .sp-cases-section .sp-grid > *,
  .sp-section .sp-solutions-section .sp-grid > *,
  .sp-section .sp-solutions-row > *,
  .sp-section .sp-bundles__grid > * {
    flex: 0 0 clamp(260px, 78vw, 360px) !important;
    width: clamp(260px, 78vw, 360px) !important;
    max-width: none !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
  .sp-section .sp-protocol__grid > * {
    flex: 0 0 clamp(220px, 70vw, 300px) !important;
    width: clamp(220px, 70vw, 300px) !important;
    max-width: none !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
  body .sp-section .sp-tiers-section .container,
  body .sp-section .sp-cases-section .container,
  body .sp-section .sp-solutions-section .container,
  body .sp-section .sp-bundles-section .container,
  body .sp-section .sp-protocol-section .container { overflow: visible !important; }
}

/* (2) (3) (4) Card text containment + bigger timeline numbers + safer text wrapping */
@media (max-width: 1024px) {
  /* Card titles + body wrap inside frame — no horizontal overflow */
  .sp-section .card,
  .sp-section .bundle {
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .sp-section .card__title,
  .sp-section .card__body,
  .sp-section .card__eyebrow,
  .sp-section .card__cta,
  .sp-section .bundle__title,
  .sp-section .bundle__price,
  .sp-section .tier__use-case,
  .sp-section .tier__includes li {
    overflow-wrap: normal !important;
    word-break: normal !important;
    max-width: 100% !important;
  }
  /* Card image / media never exceeds card */
  .sp-section .card .sp-card-media,
  .sp-section .card .placeholder,
  .sp-section .card img,
  .sp-section .bundle img { max-width: 100% !important; height: auto; }

  /* Card tags flex wrap so they don't push card wider */
  .sp-section .card__tags { flex-wrap: wrap !important; max-width: 100%; }
  .sp-section .card__tag { white-space: normal; }
}

/* (3) How We Work timeline — bigger numbers + better stack on mobile */
@media (max-width: 640px) {
  .sp-section .sp-timeline { padding-left: var(--sp-6) !important; }
  .sp-section .sp-timeline::before { left: 6px !important; }
  .sp-section .sp-timeline__node {
    width: 14px !important; height: 14px !important; left: -8px !important;
    border-width: 2px !important;
  }
  .sp-section .sp-timeline__step {
    padding: var(--sp-3) 0 var(--sp-6) var(--sp-4) !important;
  }
  .sp-section .sp-timeline__head {
    gap: var(--sp-3) !important;
    margin-bottom: var(--sp-2) !important;
    align-items: baseline !important;
  }
  .sp-section .sp-timeline__num {
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: 1 !important;
  }
  .sp-section .sp-timeline__name {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.25 !important;
  }
  .sp-section .sp-timeline__desc {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.55 !important;
  }
}

/* Optional sp-process-ladder (legacy) — same treatment */
@media (max-width: 640px) {
  .sp-section .sp-process-ladder__num { font-size: clamp(36px, 10vw, 52px) !important; min-width: 48px !important; }
  .sp-section .sp-process-ladder__name { font-size: clamp(18px, 5vw, 22px) !important; }
}

/* Section heading + lead never overflow on mobile (defensive) */
@media (max-width: 1024px) {
  .sp-section h1,
  .sp-section h2,
  .sp-section h3,
  .sp-section .display-l,
  .sp-section .display-m,
  .sp-section .display-s,
  .sp-section .lead,
  .sp-section p { overflow-wrap: normal; word-break: normal; max-width: 100%; }
}

/* Solutions card body specifically — common offender */
@media (max-width: 1024px) {
  .sp-section .sp-solution-card { overflow: hidden !important; }
  .sp-section .sp-solution-card .card__body,
  .sp-section .sp-solution-card .card__title { overflow-wrap: normal !important; word-break: normal !important; }
}

/* ============================================================
   SP — Round 4 fixes
   1) Language switcher: circular pill, flag only (hide EN/RO/TR/AR text)
   2) Brand/logo bigger on mobile
   3) Drawer menu: tighter spacing, all items visible
   4) Hero: bigger video on mobile + separate mobile text position
   ============================================================ */

/* (1) Language switcher → circular pill with flag only */
.sp-section .sp-nav__lang-code,
.sp-nav__lang-code { display: none !important; }

.sp-section .sp-nav__lang,
.sp-section .sp-nav__lang--toggle,
.sp-nav__lang,
.sp-nav__lang--toggle {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
/* Flag smaller on mobile so it doesn't dominate the logo */
@media (max-width: 1024px) {
  .sp-section .sp-nav__lang,
  .sp-section .sp-nav__lang--toggle,
  .sp-nav__lang,
  .sp-nav__lang--toggle { width: 24px !important; height: 24px !important; }
}
@media (max-width: 480px) {
  .sp-section .sp-nav__lang,
  .sp-section .sp-nav__lang--toggle,
  .sp-nav__lang,
  .sp-nav__lang--toggle { width: 22px !important; height: 22px !important; }
}
.sp-section .sp-nav__lang--toggle:hover,
.sp-nav__lang--toggle:hover { box-shadow: 0 0 0 2px var(--copper); border: 0 !important; }
.sp-section .sp-nav__lang-flag,
.sp-nav__lang-flag {
  width: 100% !important; height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.sp-section .sp-nav__lang-flag .sp-flag,
.sp-section .sp-nav__lang-flag svg,
.sp-nav__lang-flag .sp-flag,
.sp-nav__lang-flag svg {
  width: auto !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  border-radius: 0 !important;
  object-fit: cover;
  /* For 2:1 flags (UK), this makes SVG ~64×32 cropped to 32×32 circle.
     For 3:2 flags (RO,TR), SVG ~48×32 cropped. Solid (SA) fills perfectly. */
}

/* Lang dropdown menu still shows code/name beside flag */
.sp-section .sp-nav__lang-menu .sp-nav__lang-code,
.sp-nav__lang-menu .sp-nav__lang-code { display: inline-block !important; }

/* Dropdown OPTION flags must stay small (the 100% rule above is only for the round toggle) */
.sp-section .sp-nav__langdd .sp-nav__lang-menu .sp-nav__lang-flag,
.sp-nav__langdd .sp-nav__lang-menu .sp-nav__lang-flag {
  width: 24px !important; height: 16px !important;
  border-radius: 3px !important; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(14,26,36,0.12);
}
.sp-section .sp-nav__langdd .sp-nav__lang-menu .sp-nav__lang-flag .sp-flag,
.sp-section .sp-nav__langdd .sp-nav__lang-menu .sp-nav__lang-flag svg,
.sp-nav__langdd .sp-nav__lang-menu .sp-nav__lang-flag .sp-flag,
.sp-nav__langdd .sp-nav__lang-menu .sp-nav__lang-flag svg {
  width: 100% !important; height: 100% !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 3px !important; object-fit: cover;
}

/* (2) Brand/logo bigger on mobile */
@media (max-width: 1024px) {
  .sp-section .sp-brand,
  .sp-brand { font-size: clamp(20px, 6vw, 28px) !important; gap: 10px !important; }
  .sp-section .sp-brand__mark svg,
  .sp-brand__mark svg { width: 30px !important; height: 16px !important; }
}
@media (max-width: 480px) {
  .sp-section .sp-brand,
  .sp-brand { font-size: clamp(20px, 7vw, 26px) !important; }
  .sp-section .sp-brand__mark svg,
  .sp-brand__mark svg { width: 26px !important; height: 14px !important; }
}

/* (3) Drawer: tighter spacing, all items fit, scroll if overflow */
.sp-drawer {
  padding: var(--sp-5) var(--sp-5) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.sp-drawer__close { top: 14px !important; right: 14px !important; font-size: 28px !important; line-height: 1; }
.sp-drawer__menu {
  display: flex; flex-direction: column;
  gap: 0 !important;
  padding-top: var(--sp-6) !important;
  margin-bottom: var(--sp-4) !important;
}
.sp-drawer__menu a {
  padding: 14px 0 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sp-drawer__menu a:last-child { border-bottom: 0; }
.sp-drawer__cta {
  margin-top: auto !important;
  text-align: center;
  width: 100%;
  justify-content: center !important;
}

/* (4) Hero mobile: bigger min-height + mobile text alignment override */
@media (max-width: 720px) {
  .sp-section .hero--full,
  .sp-section .sp-hero--medium,
  .sp-section .sp-hero--tall,
  .sp-section .sp-hero--full {
    min-height: 92vh !important;
  }
  /* Video fills hero fully on mobile (object-fit: cover, not contain) */
  .sp-section .hero__media,
  .sp-section .hero__media video,
  .sp-section .hero__media iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    inset: 0 !important;
    position: absolute !important;
  }
  /* iframe specifically: scale up to cover (YouTube/Vimeo include controls margins) */
  .sp-section .hero__media iframe {
    min-width: 177.78vh; /* 16:9 reverse — keeps aspect, fills height */
    min-height: 56.25vw; /* 16:9 — fills width */
    transform: translate(-50%, -50%);
    top: 50%; left: 50%;
  }
  /* Mobile text position: top / middle / bottom — overrides desktop class on mobile */
  .sp-section .sp-hero--m-align-top    .hero__content { align-self: flex-start !important; padding-top: clamp(80px, 18vh, 140px) !important; padding-bottom: 0 !important; }
  .sp-section .sp-hero--m-align-middle .hero__content { align-self: center !important; padding-block: 0 !important; }
  .sp-section .sp-hero--m-align-bottom .hero__content { align-self: flex-end !important; padding-bottom: clamp(60px, 12vh, 100px) !important; padding-top: 0 !important; }
}

/* Drawer wider on smallest screens so menu items don't truncate */
@media (max-width: 480px) {
  .sp-drawer { width: min(330px, 92vw) !important; max-width: 92vw !important; }
  .sp-drawer__menu a { padding: 13px 0 !important; font-size: 16.5px !important; }
}

/* ============================================================
   SP — Round 6 fixes
   - Cases (Our Projects) mobile_layout: stack vs carousel opt-out
   - Header flag: clean circle, no button frame
   ============================================================ */

/* ============================================================
   SP — Round 7 fixes
   - Section headings overflow on mobile (Tiers, etc.)
   ============================================================ */

/* Mobile heading sizes — bigger + normal letter-spacing (no inside-word breaks) */
@media (max-width: 480px) {
  .sp-section .display-xl { font-size: clamp(40px, 11vw, 64px) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
  .sp-section .display-l  { font-size: clamp(36px, 10vw, 52px) !important; line-height: 1.1 !important; letter-spacing: -0.018em !important; }
  .sp-section .display-m,
  .sp-section h2 { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.15 !important; letter-spacing: -0.015em !important; }
  .sp-section .display-s,
  .sp-section h3 { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; }
  .sp-section h4 { font-size: clamp(18px, 5vw, 22px) !important; letter-spacing: 0 !important; }
}
@media (max-width: 380px) {
  .sp-section .display-m,
  .sp-section h2 { font-size: clamp(28px, 8vw, 36px) !important; }
  .sp-section .display-l { font-size: clamp(32px, 9vw, 44px) !important; }
  .sp-section .display-xl { font-size: clamp(36px, 10vw, 52px) !important; }
}

/* Force wrap inside container on ALL text — break only between words, NEVER inside words */
@media (max-width: 1024px) {
  .sp-section h1,
  .sp-section h2,
  .sp-section h3,
  .sp-section h4,
  .sp-section .display-xl,
  .sp-section .display-l,
  .sp-section .display-m,
  .sp-section .display-s,
  .sp-section .lead,
  .sp-section p,
  .sp-section li,
  .sp-section .text-mute,
  .sp-section .editorial {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box;
  }
  /* Heading wrappers should never overflow container */
  .sp-section .stack,
  .sp-section .sp-tiers__intro,
  .sp-section .sp-cmp__intro,
  .sp-section .sp-protocol__intro,
  .sp-section .sp-timeline__intro { max-width: 100% !important; box-sizing: border-box; overflow: hidden; }
}

/* Cases mobile_layout="stack" — overrides carousel rule with vertical stack on mobile */
@media (max-width: 1024px) {
  .sp-section .sp-cases--m-stack .sp-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-wrap: initial !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    gap: var(--sp-5) !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    padding-bottom: 0 !important;
    touch-action: auto !important;
  }
  .sp-section .sp-cases--m-stack .sp-grid > * {
    flex: initial !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: none !important;
  }
}

/* ============================================================
   SP — Round 5 fixes
   1) Card images: restore aspect-ratio (broke earlier)
   2) Carousel touch swipe — force touch-action + bigger peek
   3) Footer accordion (<details>) styling
   4) Brand SVG mark bigger
   5) Section vertical spacing tighter on mobile
   ============================================================ */

/* (1) Card image aspect-ratio restore — REMOVE height:auto that broke 16/9 frames */
.sp-section .sp-card-media,
.sp-section .sp-card-media--16-9,
.sp-section .sp-card-media--4-3,
.sp-section .sp-card-media--4-5,
.sp-section .sp-card-media--21-9,
.sp-section .sp-card-media--1-1,
.sp-section .sp-card-media--3-2 {
  width: 100% !important;
  height: auto !important; /* lets aspect-ratio control height */
  display: block;
  overflow: hidden;
  position: relative;
}
.sp-section .sp-card-media img,
.sp-section .sp-card-media video,
.sp-section .card .placeholder,
.sp-section .sp-card-media > * {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.sp-section .sp-card-media--16-9 { aspect-ratio: 16 / 9 !important; }
.sp-section .sp-card-media--4-3  { aspect-ratio: 4 / 3 !important; }
.sp-section .sp-card-media--4-5  { aspect-ratio: 4 / 5 !important; }
.sp-section .sp-card-media--21-9 { aspect-ratio: 21 / 9 !important; }
.sp-section .sp-card-media--1-1  { aspect-ratio: 1 / 1 !important; }
.sp-section .sp-card-media--3-2  { aspect-ratio: 3 / 2 !important; }
/* On mobile, ALL card images use 4:3 for better fit */
@media (max-width: 720px) {
  .sp-section .sp-card-media--16-9,
  .sp-section .sp-card-media--4-5,
  .sp-section .sp-card-media--21-9 { aspect-ratio: 4 / 3 !important; }
}

/* (2) DISABLED */
@media (min-width: 99999px) {
  .sp-section .sp-tiers-section .sp-grid { display: block; }
}

/* (3) Footer accordion — <details>/<summary> styling */
.sp-footer__details {
  display: block;
  border: 0;
  margin: 0;
}
.sp-footer__details summary {
  cursor: default;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--sp-4);
  padding: 0;
}
.sp-footer__details summary::-webkit-details-marker { display: none; }
.sp-footer__details summary::marker { display: none; }
.sp-footer__chev {
  display: none;
  font-size: 18px;
  font-weight: 300;
  color: var(--text-on-ink-soft, rgba(244,241,236,0.7));
  transition: transform 0.2s ease;
  font-family: var(--sans);
}
@media (max-width: 720px) {
  /* Mobile footer: tighter padding + stack everything */
  .sp-footer { padding: var(--sp-6) 0 var(--sp-4) !important; }
  .sp-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-bottom: var(--sp-5) !important;
  }
  .sp-footer__details {
    border-top: 1px solid rgba(244, 241, 236, 0.1);
    padding: 0;
    margin: 0;
  }
  .sp-footer__details:last-of-type {
    border-bottom: 1px solid rgba(244, 241, 236, 0.1);
  }
  .sp-footer__details summary {
    cursor: pointer;
    padding: 16px 0;
    margin: 0 !important;
    font-size: 13px;
    color: var(--bone, #f4f1ec);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    list-style: none !important;
  }
  .sp-footer__chev {
    display: inline-block !important;
    font-size: 24px;
    line-height: 1;
    color: var(--copper);
    font-weight: 300;
    transition: transform 0.25s ease;
  }
  .sp-footer__details[open] > summary .sp-footer__chev {
    transform: rotate(45deg);
  }
  .sp-footer__details[open] > .sp-footer__list,
  .sp-footer__details[open] > .sp-footer__intro,
  .sp-footer__details[open] > .sp-footer__newsletter {
    padding-bottom: 16px;
  }
  .sp-footer__details .sp-footer__list { margin: 0; }
  .sp-footer__details .sp-footer__list ul { padding: 0; margin: 0; list-style: none; }
  .sp-footer__details .sp-footer__list li { padding: 6px 0; font-size: 15px; }
  .sp-footer__details .sp-footer__list a { color: var(--text-on-ink, #f4f1ec); text-decoration: none; }

  /* Newsletter inside details on mobile */
  .sp-footer__details--newsletter .sp-footer__intro {
    font-size: 13px; line-height: 1.55; margin-bottom: var(--sp-3);
    color: var(--text-on-ink-soft, rgba(244,241,236,0.7));
  }
  .sp-footer__details--newsletter .sp-footer__newsletter {
    margin-top: 8px;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .sp-footer__details--newsletter .sp-footer__newsletter input,
  .sp-footer__details--newsletter .sp-footer__newsletter button {
    flex: 1 1 100%;
    border-radius: var(--r-sm) !important;
    border-right: 1px solid rgba(244,241,236,0.15) !important;
  }
  .sp-footer__details--newsletter .sp-footer__newsletter button {
    flex-basis: auto;
  }

  /* Brand-col first, no border above, more bottom spacing */
  .sp-footer__brand-col {
    padding: 0 0 var(--sp-6) 0;
    border: 0 !important;
  }
  .sp-footer__brand {
    margin-bottom: var(--sp-3) !important;
  }
  .sp-footer__tag {
    font-size: 14px;
    margin-bottom: var(--sp-3);
  }
  .sp-footer__addr {
    font-size: 13px;
    line-height: 1.6;
  }

  /* Bottom legal: tighter */
  .sp-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--sp-2) !important;
    padding-top: var(--sp-4) !important;
    font-size: 12px;
  }
  .sp-footer__legal {
    margin-top: var(--sp-5) !important;
    padding-top: var(--sp-4) !important;
    font-size: 11px !important;
    line-height: 1.65;
  }
}

/* (4) Brand SVG mark bigger — header + footer */
.sp-section .sp-brand__mark svg,
.sp-brand__mark svg { width: 28px !important; height: 16px !important; }
@media (max-width: 1024px) {
  .sp-section .sp-brand__mark svg,
  .sp-brand__mark svg { width: 36px !important; height: 20px !important; }
}
@media (max-width: 480px) {
  .sp-section .sp-brand__mark svg,
  .sp-brand__mark svg { width: 32px !important; height: 18px !important; }
}
/* Footer brand mark stays a bit bigger */
.sp-section .sp-footer__brand .sp-brand__mark svg { width: 44px !important; height: 24px !important; }
@media (max-width: 560px) {
  .sp-section .sp-footer__brand .sp-brand__mark svg { width: 36px !important; height: 20px !important; }
}

/* (5) Section vertical spacing tighter on mobile */
@media (max-width: 720px) {
  .sp-section .section,
  .sp-section section.sp-tiers-section,
  .sp-section section.sp-cases-section,
  .sp-section section.sp-solutions-section,
  .sp-section section.sp-bundles-section,
  .sp-section section.sp-protocol-section,
  .sp-section section.sp-stages-section,
  .sp-section section.sp-cmp-section,
  .sp-section section.sp-process-section,
  .sp-section section.sp-timeline-section,
  .sp-section section.sp-faq-section,
  .sp-section section.sp-founder-section,
  .sp-section section.sp-product-block,
  .sp-section section.trust-strip,
  .sp-section section.stats-bar { padding-block: var(--sp-6) !important; }
}
@media (max-width: 480px) {
  .sp-section .section,
  .sp-section section[class*=sp-]:not(.sp-hero):not(.sp-nav__inner) { padding-block: var(--sp-5) !important; }
}
/* Spacing between section heading + grid: tighter on mobile */
@media (max-width: 720px) {
  .sp-section .u-mb-9 { margin-bottom: var(--sp-5) !important; }
  .sp-section .u-mb-7 { margin-bottom: var(--sp-4) !important; }
  .sp-section .u-mb-6 { margin-bottom: var(--sp-4) !important; }
}

/* (Round 8 carousel block removed — superseded by Round 9 Horizon pattern at end of file) */

/* CRITICAL: Force .reveal cards visible inside carousels — IntersectionObserver
   doesn't fire for cards positioned off-screen horizontally, so without this they
   stay opacity:0 forever and look non-interactive. */
@media (max-width: 720px) {
  body[class] .sp-section .sp-tiers-section .sp-grid > .reveal,
  body[class] .sp-section .sp-tiers-section .sp-grid > *.reveal,
  body[class] .sp-section .sp-cases-section .sp-grid > .reveal,
  body[class] .sp-section .sp-cases-section .sp-grid > *.reveal,
  body[class] .sp-section .sp-solutions-section .sp-grid > .reveal,
  body[class] .sp-section .sp-solutions-section .sp-grid > *.reveal,
  body[class] .sp-section .sp-solutions-row > .reveal,
  body[class] .sp-section .sp-solutions-row > *.reveal,
  body[class] .sp-section .sp-bundles-section .sp-bundles__grid > .reveal,
  body[class] .sp-section .sp-bundles-section .sp-bundles__grid > *.reveal,
  body[class] .sp-section .sp-protocol-section .sp-protocol__grid > .reveal,
  body[class] .sp-section .sp-protocol-section .sp-protocol__grid > *.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
}

/* Timeline (How We Work) mobile alignment — nodes centered on line */
@media (max-width: 640px) {
  body[class] .sp-section .sp-timeline {
    padding-left: 0 !important;
    position: relative;
  }
  body[class] .sp-section .sp-timeline::before {
    left: 8px !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 2px !important;
  }
  body[class] .sp-section .sp-timeline__step {
    position: relative !important;
    padding: 8px 0 24px 32px !important;
    margin: 0 !important;
  }
  body[class] .sp-section .sp-timeline__node {
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    left: 0 !important;
    top: 14px !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px var(--bg) !important;
    border-radius: 50% !important;
    background: var(--bg);
    border: 2px solid var(--copper) !important;
  }
  body[class] .sp-section .sp-timeline__step:last-child { padding-bottom: 8px !important; }
}

/* sp-solution-card specific polish — looks "off" on mobile, fix layout */
@media (max-width: 720px) {
  body[class] .sp-section .sp-solution-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    padding: 16px !important;
    background: var(--bg);
    border: 1px solid var(--bone-3);
    border-radius: 12px;
    overflow: hidden !important;
    height: auto !important;
    box-sizing: border-box;
  }
  body[class] .sp-section .sp-solution-card .sp-card-media,
  body[class] .sp-section .sp-solution-card .placeholder {
    margin: -16px -16px 4px -16px;
    border-radius: 12px 12px 0 0;
    aspect-ratio: 4 / 3;
    width: calc(100% + 32px);
    overflow: hidden;
  }
  body[class] .sp-section .sp-solution-card .sp-card-media img,
  body[class] .sp-section .sp-solution-card .sp-card-media > * {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  body[class] .sp-section .sp-solution-card .card__eyebrow {
    font-size: 11px !important; letter-spacing: 0.1em; color: var(--copper); margin: 4px 0 0; padding: 0;
  }
  body[class] .sp-section .sp-solution-card .card__title {
    font-size: 19px !important; line-height: 1.25; margin: 0; padding: 0; font-family: var(--serif);
  }
  body[class] .sp-section .sp-solution-card .card__body {
    font-size: 14px !important; line-height: 1.5; color: var(--text-mute); margin: 0;
  }
  body[class] .sp-section .sp-solution-card .card__tags {
    display: flex; flex-wrap: wrap !important; gap: 6px; margin: 4px 0 0;
  }
  body[class] .sp-section .sp-solution-card .card__tag {
    font-size: 11px; padding: 4px 10px; border: 1px solid var(--bone-3);
    border-radius: 999px; white-space: nowrap; color: var(--text-mute);
  }
  body[class] .sp-section .sp-solution-card .card__cta {
    margin-top: auto !important;
    padding-top: 8px;
    font-size: 14px; font-weight: 500; color: var(--copper); text-decoration: none;
    border-bottom: 1px solid var(--copper);
    align-self: flex-start;
  }
}

/* Stack mode (Our Projects / Cases full list): vertical 1-col, NO swipe */
@media (max-width: 1024px) {
  body[class] .sp-section .sp-cases--m-stack .sp-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    overflow: visible !important;
    overflow-x: visible !important;
    flex-wrap: initial !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 24px !important;
    scroll-snap-type: none !important;
    touch-action: auto !important;
  }
  body[class] .sp-section .sp-cases--m-stack .sp-grid > * {
    flex: initial !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: none !important;
  }
}

/* ============================================================
   ====  CARDS — Final architecture (Round 13)  ===============
   Per-section mobile_layout: "carousel" or "stack"
   Section receives: sp-{name}--m-carousel | sp-{name}--m-stack
   ============================================================ */

@media (max-width: 960px) {

  /* ----- CAROUSEL MODE — sp-*--m-carousel ----- */
  body[class] .sp-tiers--m-carousel .sp-grid,
  body[class] .sp-cases--m-carousel .sp-grid,
  body[class] .sp-solutions--m-carousel .sp-grid,
  body[class] .sp-solutions--m-carousel .sp-solutions-row,
  body .sp-bundles-section .sp-bundles__grid,
  body .sp-protocol-section .sp-protocol__grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 4px 0 16px 0 !important;
    width: 100% !important;
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
  }
  body[class] .sp-tiers--m-carousel .sp-grid::-webkit-scrollbar,
  body[class] .sp-cases--m-carousel .sp-grid::-webkit-scrollbar,
  body[class] .sp-solutions--m-carousel .sp-grid::-webkit-scrollbar,
  body[class] .sp-solutions--m-carousel .sp-solutions-row::-webkit-scrollbar,
  body .sp-bundles-section .sp-bundles__grid::-webkit-scrollbar,
  body .sp-protocol-section .sp-protocol__grid::-webkit-scrollbar { height: 0 !important; width: 0 !important; }

  body[class] .sp-tiers--m-carousel .sp-grid > *,
  body[class] .sp-cases--m-carousel .sp-grid > *,
  body[class] .sp-solutions--m-carousel .sp-grid > *,
  body[class] .sp-solutions--m-carousel .sp-solutions-row > *,
  body .sp-bundles-section .sp-bundles__grid > *,
  body .sp-protocol-section .sp-protocol__grid > * {
    flex: 0 0 80vw !important;
    width: 80vw !important;
    max-width: 340px !important;
    min-width: 260px !important;
    scroll-snap-align: start !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* ----- STACK MODE — sp-*--m-stack ----- */
  body .sp-tiers--m-stack .sp-grid,
  body .sp-cases--m-stack .sp-grid,
  body .sp-solutions--m-stack .sp-grid,
  body .sp-solutions--m-stack .sp-solutions-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    flex-wrap: initial !important;
    overflow: visible !important;
    overflow-x: visible !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    scroll-snap-type: none !important;
  }
  body .sp-tiers--m-stack .sp-grid > *,
  body .sp-cases--m-stack .sp-grid > *,
  body .sp-solutions--m-stack .sp-grid > *,
  body .sp-solutions--m-stack .sp-solutions-row > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
    scroll-snap-align: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* ----- CARD INTERNAL LAYOUT (both modes) ----- */
  /* body[class] for high specificity to override section-specific padding overrides */
  body[class] .sp-section .card,
  body[class] .sp-section .bundle {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px !important;
    background: var(--bg) !important;
    border: 1px solid var(--bone-3) !important;
    border-radius: var(--r-md, 8px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    height: auto !important;
    margin-top: 0 !important;
  }
  /* Image media: edge-to-edge top, fixed aspect-ratio */
  body[class] .sp-section .card .sp-card-media,
  body[class] .sp-section .card .placeholder,
  body[class] .sp-section .bundle .sp-card-media,
  body[class] .sp-section .bundle .placeholder {
    margin: -16px -16px 4px -16px !important;
    border-radius: var(--r-md, 8px) var(--r-md, 8px) 0 0 !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    height: auto !important;
    overflow: hidden !important;
  }
  body .sp-section .card .sp-card-media--16-9,
  body .sp-section .bundle .sp-card-media--16-9 { aspect-ratio: 16/9 !important; }
  body .sp-section .card .sp-card-media--4-3,
  body .sp-section .bundle .sp-card-media--4-3,
  body .sp-section .card .sp-card-media--4-5,
  body .sp-section .bundle .sp-card-media--4-5 { aspect-ratio: 4/3 !important; }
  body .sp-section .card .placeholder--16-9 { aspect-ratio: 16/9 !important; }
  body .sp-section .card .placeholder--4-3,
  body .sp-section .card .placeholder--4-5 { aspect-ratio: 4/3 !important; }
  body .sp-section .card .sp-card-media img,
  body .sp-section .bundle .sp-card-media img {
    width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
  }
  body .sp-section .card .placeholder { display: flex !important; align-items: center !important; justify-content: center !important; }

  /* Card text */
  body .sp-section .card__eyebrow {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--copper) !important;
    margin: 4px 0 0 !important;
  }
  body .sp-section .card__title,
  body .sp-section .bundle__title {
    font-family: var(--serif) !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
  }
  body .sp-section .card__body {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--text-mute) !important;
    margin: 0 !important;
  }
  body .sp-section .card__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 4px 0 0 !important;
  }
  body .sp-section .card__tag {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border: 1px solid var(--bone-3) !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    color: var(--text-mute) !important;
  }
  body .sp-section .card__cta,
  body .sp-section .bundle .card__cta {
    margin-top: auto !important;
    padding-top: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--copper) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--copper) !important;
    align-self: flex-start !important;
  }

  /* MOBILE: Recommended card 100% identical to others — NO badge, NO special anything */
  body[class] .sp-section .card.card--recommended {
    overflow: hidden !important;
    margin: 0 !important;
    border: 1px solid var(--bone-3) !important;
    padding: 16px !important;
    position: relative !important;
  }
  body[class] .sp-section .card.card--recommended::after,
  body[class] .sp-section .card.card--recommended::before {
    display: none !important;
    content: none !important;
  }
  /* Add "Recommended" prefix to the eyebrow of recommended card */
  body[class] .sp-section .card.card--recommended .card__eyebrow::before {
    content: "Recommended · " !important;
    color: var(--copper) !important;
    display: inline !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 600 !important;
  }
  /* ALL tier cards align flush at top */
  body[class] .sp-tiers--m-carousel .sp-grid > * {
    margin: 0 !important;
    align-self: stretch !important;
  }
  body[class] .sp-tiers--m-carousel .sp-grid { padding-top: 4px !important; }
  /* Tier bullet alignment — proper left padding */
  body[class] .sp-section .tier__includes,
  body[class] .sp-section .tier__includes ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  body[class] .sp-section .tier__includes li {
    padding: 4px 0 4px 16px !important;
    position: relative !important;
    list-style: none !important;
  }
  body[class] .sp-section .tier__includes li::before {
    content: "—" !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    color: var(--copper) !important;
  }

  /* Tier-specific (no image) — bullets */
  body .sp-section .tier__use-case {
    font-family: var(--serif) !important;
    font-style: italic !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--copper) !important;
    margin: 0 0 4px !important;
  }
  body .sp-section .tier__includes ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body .sp-section .tier__includes li {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--text-mute) !important;
    padding: 4px 0 4px 18px !important;
    position: relative !important;
  }
  body .sp-section .tier__includes li::before {
    content: "—" !important;
    color: var(--copper) !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
  }
}

/* ============================================================
   FIX: Card media must EXTEND to card edges (cover full top of card)
   Negative margin doesn't expand width:auto block-level elements.
   Explicit width: calc(100% + 2*padding) needed.
   ============================================================ */

/* Desktop cards (32px padding) — media extends 32px each side */
body[class] .sp-section .card > .sp-card-media:first-child,
body[class] .sp-section .card > .placeholder:first-child {
  width: calc(100% + 64px) !important;
  max-width: calc(100% + 64px) !important;
  margin-left: -32px !important;
  margin-right: -32px !important;
  margin-top: -32px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

/* Image inside fills wrapper */
body[class] .sp-section .card > .sp-card-media:first-child img,
body[class] .sp-section .card > .sp-card-media:first-child video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Mobile cards (16-24px padding) — media extends accordingly */
@media (max-width: 960px) {
  body[class] .sp-section .card > .sp-card-media:first-child,
  body[class] .sp-section .card > .placeholder:first-child {
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    margin-top: -16px !important;
    margin-bottom: 8px !important;
  }
}
@media (max-width: 640px) {
  body[class] .sp-section .card > .sp-card-media:first-child,
  body[class] .sp-section .card > .placeholder:first-child {
    width: calc(100% + 40px) !important;
    max-width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    margin-top: -20px !important;
  }
}

/* ============================================================
   sp-product-block — fix list spacing + subheadings + pricing strip
   Matches prototype P1-P4 layout (Solutions page)
   ============================================================ */

body[class] .sp-product-block .stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body[class] .sp-product-block .stack > * + * { margin-top: 0; }

/* Lead paragraph (subtitle below heading) — tighter to heading */
body[class] .sp-product-block .lead { margin-top: 8px !important; }

/* Body paragraphs spacing */
body[class] .sp-product-block p {
  margin-top: 16px !important;
  line-height: 1.6;
}
body[class] .sp-product-block .lead + p,
body[class] .sp-product-block p + p { margin-top: 14px !important; }

/* Subheadings "What's included" / "Who this is for" — make them visible */
body[class] .sp-product-block h4 {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--copper) !important;
  margin-top: 32px !important;
  margin-bottom: 14px !important;
}

/* Lists — tighter bullet alignment, comfortable line spacing */
body[class] .sp-product-block .tier__includes {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
body[class] .sp-product-block .tier__includes li {
  position: relative !important;
  padding-left: 22px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--text-mute) !important;
  list-style: none !important;
}
body[class] .sp-product-block .tier__includes li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  width: 14px !important;
  height: 1.5px !important;
  background: var(--copper) !important;
  border-radius: 1px !important;
}

/* Pricing strip — proper visual block separator */
body[class] .sp-product-block .pricing-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin-top: 32px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--bone-3) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
}
body[class] .sp-product-block .pricing-strip strong {
  color: var(--copper) !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
}
body[class] .sp-product-block .pricing-strip span:last-child {
  color: var(--text-mute) !important;
  font-weight: 400 !important;
}

/* Footnote below pricing strip */
body[class] .sp-product-block .pricing-strip + p,
body[class] .sp-product-block .u-mono-12 {
  font-family: var(--mono) !important;
  font-size: 11.5px !important;
  font-style: italic !important;
  color: var(--text-soft) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

/* CTA link */
body[class] .sp-product-block .btn--link,
body[class] .sp-product-block a.card__cta {
  display: inline-block !important;
  margin-top: 28px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--copper) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--copper) !important;
  padding-bottom: 3px !important;
  align-self: flex-start !important;
}
body[class] .sp-product-block .btn--link:hover { color: var(--text); border-color: var(--text); }

/* Mobile-specific tightening */
@media (max-width: 720px) {
  body[class] .sp-product-block h4 { font-size: 11px !important; margin-top: 28px !important; }
  body[class] .sp-product-block .tier__includes li { font-size: 14px !important; padding-left: 20px !important; }
  body[class] .sp-product-block .pricing-strip { font-size: 12px !important; }
}

/* ============================================================
   Comparison table — EXPANDABLE TIER CARDS on mobile
   Desktop: full table. Mobile: 4 collapsible <details> per tier.
   ============================================================ */

/* Default: mobile cards hidden on desktop, table visible */
.sp-cmp__mobile { display: none; }
.sp-cmp__desktop { display: block; }

@media (max-width: 720px) {
  /* Swap visibility on mobile */
  body[class] .sp-cmp__desktop { display: none !important; }
  body[class] .sp-cmp__mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Tier card (expandable details element) */
  body[class] .sp-cmp__tier-card {
    background: var(--bg);
    border: 1px solid var(--bone-3);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease;
  }
  body[class] .sp-cmp__tier-card[open] { border-color: var(--copper); }
  body[class] .sp-cmp__tier-card--accent {
    border: 2px solid var(--copper);
  }

  /* Summary = tier header (click to expand) */
  body[class] .sp-cmp__tier-card > summary {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    cursor: pointer !important;
    list-style: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  body[class] .sp-cmp__tier-card > summary::-webkit-details-marker,
  body[class] .sp-cmp__tier-card > summary::marker { display: none !important; }

  body[class] .sp-cmp__tier-name {
    font-family: var(--serif) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    letter-spacing: -0.01em !important;
    flex: 1 1 auto;
  }
  body[class] .sp-cmp__tier-badge {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: var(--copper) !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }
  body[class] .sp-cmp__tier-chev {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans) !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: var(--copper) !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0;
  }
  body[class] .sp-cmp__tier-card[open] > summary .sp-cmp__tier-chev {
    transform: rotate(45deg) !important;
  }

  /* Feature list inside open card */
  body[class] .sp-cmp__tier-features {
    margin: 0 !important;
    padding: 0 18px 16px !important;
    border-top: 1px solid var(--bone-3);
    padding-top: 12px !important;
  }
  body[class] .sp-cmp__feature-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 16px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--bone-3);
  }
  body[class] .sp-cmp__feature-row:last-child { border-bottom: 0; }
  body[class] .sp-cmp__feature-row dt {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-mute) !important;
    font-weight: 500 !important;
    flex-shrink: 0;
    margin: 0 !important;
    max-width: 45%;
  }
  body[class] .sp-cmp__feature-row dd {
    font-size: 14px !important;
    color: var(--text) !important;
    margin: 0 !important;
    text-align: right;
    line-height: 1.4;
  }
  /* row_full type — full-width value */
  body[class] .sp-cmp__feature-row--full {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body[class] .sp-cmp__feature-row--full dd {
    text-align: left !important;
    margin-top: 4px !important;
    font-family: var(--mono) !important;
    font-size: 13px !important;
    color: var(--text-mute) !important;
  }
}

/* ============================================================
   FAQ — mobile polish (proper accordion experience)
   ============================================================ */
@media (max-width: 720px) {
  body[class] .sp-faq { padding: 0 !important; }
  body[class] .sp-faq__item {
    border: 0 !important;
    border-bottom: 1px solid var(--bone-3) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body[class] .sp-faq__item:first-child { border-top: 1px solid var(--bone-3) !important; }
  body[class] .sp-faq__item > summary {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 0 !important;
    font-family: var(--serif) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    color: var(--text) !important;
    cursor: pointer !important;
    list-style: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  body[class] .sp-faq__item > summary::-webkit-details-marker,
  body[class] .sp-faq__item > summary::marker { display: none !important; }
  body[class] .sp-faq__item > summary::after {
    content: "+" !important;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans) !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: var(--copper) !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
  }
  body[class] .sp-faq__item[open] > summary::after {
    transform: rotate(45deg) !important;
  }
  body[class] .sp-faq__answer {
    padding: 0 0 18px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--text-mute) !important;
  }
  body[class] .sp-faq__answer p { margin: 0 0 12px !important; }
  body[class] .sp-faq__answer p:last-child { margin-bottom: 0 !important; }
}

/* ============================================================
   Footer — mobile breathing room + bigger logo
   ============================================================ */
@media (max-width: 720px) {
  /* More vertical padding around whole footer */
  body[class] .sp-footer {
    padding: 48px 0 32px !important;
  }
  /* Larger gap between brand col and accordions */
  body[class] .sp-footer__grid {
    gap: 32px !important;
    padding-bottom: 32px !important;
  }
  /* Brand block — bigger logo + mark */
  body[class] .sp-footer__brand-col {
    padding: 0 0 8px 0 !important;
  }
  body[class] .sp-section .sp-footer__brand {
    font-size: clamp(36px, 9vw, 52px) !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.022em !important;
    line-height: 1 !important;
  }
  body[class] .sp-section .sp-footer__brand .sp-brand__mark svg {
    width: 52px !important;
    height: 30px !important;
  }
  /* Tagline below brand — larger */
  body[class] .sp-footer__tag {
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-width: none !important;
    margin-bottom: 18px !important;
    color: var(--text-on-ink, #f4f1ec);
    opacity: 0.92;
  }
  /* Address block */
  body[class] .sp-footer__addr {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  body[class] .sp-footer__addr p { margin: 0 0 6px !important; }
  body[class] .sp-footer__addr p:last-child { margin-bottom: 0 !important; }

  /* Accordion items — more breathing room */
  body[class] .sp-footer__details {
    padding: 4px 0 !important;
  }
  body[class] .sp-footer__details > summary {
    padding: 18px 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
  }
  body[class] .sp-footer__chev {
    font-size: 26px !important;
    width: 28px;
    height: 28px;
  }
  body[class] .sp-footer__details .sp-footer__list li {
    padding: 9px 0 !important;
    font-size: 16px !important;
  }
  body[class] .sp-footer__details .sp-footer__list a {
    line-height: 1.4;
  }

  /* Newsletter — more comfortable spacing */
  body[class] .sp-footer__details--newsletter .sp-footer__intro {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
  body[class] .sp-footer__details--newsletter .sp-footer__newsletter input {
    font-size: 16px !important;
    padding: 14px 14px !important;
    min-height: 50px;
  }
  body[class] .sp-footer__details--newsletter .sp-footer__newsletter button {
    padding: 14px 22px !important;
    font-size: 14px !important;
    min-height: 50px;
  }

  /* Bottom row — copyright + legal */
  body[class] .sp-footer__bottom {
    padding-top: 28px !important;
    gap: 10px !important;
    font-size: 13px !important;
    line-height: 1.55;
  }

  /* Legal boilerplate — much more readable */
  body[class] .sp-footer__legal {
    margin-top: 32px !important;
    padding-top: 24px !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
  }
}

/* Smaller phones (≤ 480px) */
@media (max-width: 480px) {
  body[class] .sp-section .sp-footer__brand {
    font-size: clamp(30px, 10vw, 44px) !important;
  }
  body[class] .sp-section .sp-footer__brand .sp-brand__mark svg {
    width: 44px !important;
    height: 26px !important;
  }
  body[class] .sp-footer { padding: 40px 0 28px !important; }
}

/* ============================================================
   Footer legal disclosure — collapsible "Read more" pattern
   ============================================================ */
body[class] .sp-footer__legal--collapsible {
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(244, 241, 236, 0.08);
  padding-top: 18px;
}
body[class] .sp-footer__legal--collapsible > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-ink-faint, rgba(244,241,236,0.5));
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body[class] .sp-footer__legal--collapsible > summary::-webkit-details-marker,
body[class] .sp-footer__legal--collapsible > summary::marker { display: none; }
body[class] .sp-footer__legal--collapsible > summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--copper);
  transition: transform 0.2s ease;
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
}
body[class] .sp-footer__legal--collapsible[open] > summary::after {
  transform: rotate(45deg);
}
body[class] .sp-footer__legal--collapsible > summary:hover { color: var(--text-on-ink-soft, rgba(244,241,236,0.7)); }

body[class] .sp-footer__legal-content {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-on-ink-faint, rgba(244,241,236,0.55));
  max-width: 720px;
}
body[class] .sp-footer__legal-content p { margin: 0; max-width: none; }
body[class] .sp-footer__legal-content strong { color: var(--text-on-ink-soft, rgba(244,241,236,0.75)); font-weight: 500; }

@media (max-width: 720px) {
  /* Footer accordion: tighter padding + remove redundant bottom hairline
     (the LEGAL DISCLOSURE block below already has its own border-top) */
  body[class] .sp-footer__details summary {
    padding: 12px 0 !important;
  }
  body[class] .sp-footer__details[open] > .sp-footer__list,
  body[class] .sp-footer__details[open] > .sp-footer__intro,
  body[class] .sp-footer__details[open] > .sp-footer__newsletter {
    padding-bottom: 12px !important;
  }
  body[class] .sp-footer__details:last-of-type {
    border-bottom: 0 !important;
  }
  /* Tighter bottom (copyright) row */
  body[class] .sp-footer__bottom {
    padding-top: 16px !important;
    gap: 8px !important;
  }
  /* Tighter legal disclosure expandable */
  body[class] .sp-footer__legal--collapsible {
    margin-top: 14px !important;
    padding-top: 12px !important;
  }
  body[class] .sp-footer__legal--collapsible > summary {
    padding: 6px 0;
    font-size: 11px;
  }
  body[class] .sp-footer__legal-content {
    font-size: 12px;
    line-height: 1.65;
    margin-top: 8px;
  }
}

/* ============================================================
   SP — Product blocks (sp-product-block — Solutions P1-P4, Insights featured, etc.):
   - Image dictates wrapper aspect (no forced 4:5, no stretch-to-text)
   - object-fit: contain ensures FULL image visible — no cropping ever
   - Both desktop and mobile
   - Image column aligns top of split row; text column may extend below
   ============================================================ */
body[class] .sp-product-block .split {
  align-items: start !important;
}
body[class] .sp-product-block .sp-card-media,
body[class] .sp-product-block .placeholder {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  background: transparent !important;
}
body[class] .sp-product-block .sp-card-media img,
body[class] .sp-product-block .sp-card-media video {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: inherit !important;
}

/* ============================================================
   SP — Tier cards: stronger visual definition (cards on bone-2 alt bg)
   ============================================================ */
body[class] .sp-tier-section .sp-tier-card {
  border: 1px solid rgba(14, 26, 36, 0.10);
  box-shadow:
    0 1px 2px rgba(14, 26, 36, 0.04),
    0 4px 12px rgba(14, 26, 36, 0.06);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
body[class] .sp-tier-section .sp-tier-card:hover {
  border-color: rgba(184, 115, 51, 0.45);
  box-shadow:
    0 2px 4px rgba(14, 26, 36, 0.05),
    0 12px 28px rgba(14, 26, 36, 0.10);
  transform: translateY(-2px);
}
body[class] .sp-tier-section .sp-tier-card--recommended {
  border: 2px solid var(--copper) !important;
  box-shadow:
    0 2px 4px rgba(184, 115, 51, 0.10),
    0 8px 20px rgba(184, 115, 51, 0.12);
}

/* ============================================================
   SP — Service Domains cards: ink dark cards on light section bg
   Section bg stays bone-2; cards become ink for dramatic contrast
   (esp mobile where bone-on-bone-2 blended)
   ============================================================ */
body[class] .sp-solutions-section .sp-solution-card {
  background: var(--ink) !important;
  border: 0 !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 6px 18px rgba(0, 0, 0, 0.15) !important;
}
body[class] .sp-solutions-section .sp-solution-card:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 14px 32px rgba(0, 0, 0, 0.28) !important;
}
/* Text inversion inside dark cards */
body[class] .sp-solutions-section .sp-solution-card .card__eyebrow {
  color: var(--copper) !important;
}
body[class] .sp-solutions-section .sp-solution-card .card__title {
  color: var(--bone) !important;
}
body[class] .sp-solutions-section .sp-solution-card .card__body,
body[class] .sp-solutions-section .sp-solution-card .card__body * {
  color: rgba(244, 241, 236, 0.72) !important;
}
body[class] .sp-solutions-section .sp-solution-card .card__tag {
  color: rgba(244, 241, 236, 0.70) !important;
  border-color: rgba(244, 241, 236, 0.18) !important;
}
body[class] .sp-solutions-section .sp-solution-card .card__cta {
  color: var(--bone) !important;
  border-bottom-color: var(--copper) !important;
}
body[class] .sp-solutions-section .sp-solution-card:hover .card__cta {
  color: var(--copper) !important;
}
/* Placeholder (no image uploaded) — fit dark card theme */
body[class] .sp-solutions-section .sp-solution-card > .placeholder {
  background: rgba(244, 241, 236, 0.04) !important;
  border-color: rgba(244, 241, 236, 0.18) !important;
}
body[class] .sp-solutions-section .sp-solution-card > .placeholder .placeholder__type,
body[class] .sp-solutions-section .sp-solution-card > .placeholder .placeholder__label {
  color: rgba(244, 241, 236, 0.65) !important;
}

/* ============================================================
   SP — Timeline (How we work): align node vertical center with number
   cap-height center on desktop/tablet (>=641px)
   - Mobile (<=640px) keeps its own positioning at line 1807
   - Shift scales with font-size (clamp 40-56px): 8px → 16px
   ============================================================ */
@media (min-width: 641px) {
  body[class] .sp-section .sp-timeline__node {
    top: calc(var(--sp-6) + clamp(8px, 0.9vw, 16px));
  }
}

/* ============================================================
   SP — Solutions cards (Service domains): bigger photos, tighter spacing,
   stronger visual definition vs section background
   - Desktop only (>=1100px); mobile rules at line ~4525 already use 4:3
   - CSS-only override; safe vs uploaded images & schema settings
   - !important needed: line 4274 has global aspect-ratio !important
   ============================================================ */
@media (min-width: 1100px) {
  body[class] .sp-section .sp-solution-card {
    padding: var(--sp-5);
    border: 1px solid rgba(14, 26, 36, 0.10);
    box-shadow:
      0 1px 2px rgba(14, 26, 36, 0.04),
      0 4px 12px rgba(14, 26, 36, 0.06);
  }
  body[class] .sp-section .sp-solution-card:hover {
    border-color: rgba(184, 115, 51, 0.55);
    box-shadow:
      0 2px 4px rgba(14, 26, 36, 0.05),
      0 12px 28px rgba(14, 26, 36, 0.10);
  }
  body[class] .sp-section .sp-solution-card .sp-card-media--16-9,
  body[class] .sp-section .sp-solution-card .placeholder--16-9 {
    aspect-ratio: 4 / 3 !important;
  }
  body[class] .sp-section .sp-solution-card > .sp-card-media:first-child,
  body[class] .sp-section .sp-solution-card > .placeholder:first-child {
    margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-3) calc(-1 * var(--sp-5)) !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  }
  body[class] .sp-section .sp-solutions-row {
    gap: var(--sp-4);
  }
}