/* Sparen Studio, site layer: critical fixes, design tokens, motion system.
   Loaded after the Webflow export CSS on every page.

   Motion/spacing values follow docs/design-references/hypermatic:
   one easing curve everywhere, two clearly separated duration bands
   (slow entrances, fast interactions), 25ms micro-stagger, and a
   four-stop shadow whose individual layers are near-invisible. */

/* ================= Tokens ================= */
:root {
  /* easeOutQuint, the only curve used on this site */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Entrances: slow and cinematic */
  --dur-enter-fast: 600ms;
  --dur-enter: 700ms;
  --dur-enter-slow: 800ms;

  /* Interactions: ~4x faster. Never reuse entrance durations here. */
  --dur-tap: 160ms;
  --dur-hover: 180ms;
  --dur-state: 220ms;

  --stagger-micro: 25ms;

  /* Brand */
  --sp-blue: #0258f8;
  --sp-blue-bright: #2f7bff;
  --sp-yellow: #f8d148;

  /* Four stops, doubling offsets, 1-2.4% alphas. Reads as light falloff
     rather than a drop shadow. */
  --shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.01), 0 6.7px 5.3px rgba(0, 0, 0, 0.016),
    0 12.5px 10px rgba(0, 0, 0, 0.02), 0 22.3px 17.9px rgba(0, 0, 0, 0.024);
  --shadow-lift: 0 10px 30px rgba(17, 17, 17, 0.07);
  --shadow-blue: 0 5px 21.9px rgba(2, 88, 248, 0.42);
}

/* ================= Critical fixes ================= */

/* The Webflow export ships `.container-large, .main-wrapper { height: 120vh }`
   inside the ≤479px breakpoint, which collapsed <main> and stacked the footer
   into the hero on phones. */
@media screen and (max-width: 479px) {
  .container-large,
  .main-wrapper {
    height: auto;
  }
}

/* .text-size-medium is styled for dark backgrounds (#eee); the features
   section is light, so its intro paragraph was white-on-white. */
.section_home_features-list p.text-size-medium {
  color: #3b3b3b;
}

::selection {
  background: var(--sp-blue);
  color: #fff;
}

/* ================= Optical tracking =================
   Large type at default tracking reads loose. Tighten as size grows. */
h1.heading,
.heading-style-h1 {
  letter-spacing: -0.055em;
}
.heading-style-h2 {
  letter-spacing: -0.045em;
}
.heading-style-h3,
.heading-style-h4 {
  letter-spacing: -0.03em;
}

/* ================= Page-load choreography =================
   html.m-js is set by an inline head script (skipped when the user prefers
   reduced motion), so nothing is ever hidden without JS. html.m-go plays the
   sequence; a fallback timer in the same head script guarantees it fires.
   Content starts ABOVE final position and settles down. */

html.m-js .navbar1_component,
html.m-js .page_multi-form_navbar {
  opacity: 0;
}
html.m-js h1.heading {
  opacity: 0;
  transform: translateY(-20px);
}
html.m-js .header78_component {
  opacity: 0;
  transform: translateY(-20px);
}
html.m-js .header78_image-wrapper {
  opacity: 0;
  transform: translateY(-20px) scale(0.97);
}
html.m-js .banner7_component {
  opacity: 0;
  transform: translateY(-16px);
}
html.m-js .page_multi-form_block {
  opacity: 0;
  transform: translateY(-20px);
}

html.m-go .navbar1_component,
html.m-go .page_multi-form_navbar,
html.m-go h1.heading,
html.m-go .header78_component,
html.m-go .header78_image-wrapper,
html.m-go .banner7_component,
html.m-go .page_multi-form_block {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-enter-slow) var(--ease),
    transform var(--dur-enter-slow) var(--ease);
}
html.m-go .navbar1_component,
html.m-go .page_multi-form_navbar { transition-delay: 100ms; }
html.m-go h1.heading { transition-delay: 200ms; }
html.m-go .header78_component { transition-delay: 300ms; }
/* 25ms micro-stagger: stops the row landing on one frame */
html.m-go .header78_image-wrapper {
  transition-delay: calc(400ms + var(--ml, 0) * var(--stagger-micro));
}
html.m-go .page_multi-form_block { transition-delay: 200ms; }
html.m-go .banner7_component {
  transition-delay: 1100ms;
  transition-duration: var(--dur-enter-fast);
}

/* ================= Scroll reveals ================= */
html.m-js [data-mr] {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity var(--dur-enter-fast) var(--ease),
    transform var(--dur-enter-fast) var(--ease);
  transition-delay: calc(var(--mr, 0) * var(--stagger-micro));
}
html.m-js [data-mri] {
  opacity: 0;
  transform: translateY(-20px) scale(0.98);
  transition: opacity var(--dur-enter-slow) var(--ease),
    transform var(--dur-enter-slow) var(--ease);
  transition-delay: calc(var(--mr, 0) * var(--stagger-micro));
}
html.m-js [data-mr].m-in,
html.m-js [data-mri].m-in {
  opacity: 1;
  transform: none;
}

/* ================= Micro-interactions ================= */
.button,
.w-button {
  transition: transform var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease),
    background-color var(--dur-tap) var(--ease), opacity var(--dur-state) var(--ease);
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}
.button.is-secondary:hover {
  box-shadow: var(--shadow-lift);
}
.button:active {
  transform: translateY(0);
  transition-duration: var(--dur-tap);
}
.button img {
  transition: transform var(--dur-hover) var(--ease);
}
.button:hover img {
  transform: translateX(3px);
}

/* Hero project cards, hover handed over once the entrance finishes */
html.m-done .header78_image-wrapper {
  transition: transform var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
html.m-done .header78_image-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65);
}

.header78_image-list-top,
.header78_image-list {
  will-change: transform;
}

.banner7_close-button {
  transition: transform var(--dur-state) var(--ease), opacity var(--dur-hover) var(--ease);
}
.banner7_close-button:hover {
  transform: rotate(90deg);
}

.home_faq_question {
  transition: background-color var(--dur-hover) var(--ease);
  cursor: pointer;
}
.home_faq_question:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Light-section cards get the layered shadow */
.home_features-list_item {
  transition: transform var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.home_features-list_item:hover {
  transform: translateY(-4px);
}

/* ================= Forms ================= */
.form_input {
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.form_input:focus {
  border-color: var(--sp-blue);
  box-shadow: 0 0 0 3px rgba(2, 88, 248, 0.25);
}
.form_checkbox-btn {
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease),
    background-color var(--dur-hover) var(--ease), transform var(--dur-tap) var(--ease);
}
.form_checkbox-btn:hover {
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}
.form_checkbox-btn:has(input:checked) {
  border-color: var(--sp-blue);
  background-color: rgba(2, 88, 248, 0.14);
}
.form_checkbox-btn:has(input:focus-visible) {
  outline: 2px solid var(--sp-blue);
  outline-offset: 2px;
}
a:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sp-blue);
  outline-offset: 2px;
}

/* --- Multi-step navigation buttons ---
   The library marks Next `.disabled` with inline pointer-events:none until
   required fields validate, so clicking did nothing and said nothing, the
   single biggest reason the form read as broken. Always accept the click
   (form-handler.js explains what's missing) and make Next the visibly
   primary action, since the secondary Back/Cancel was the brighter of the two. */
.page_multi-form_content-bottom [data-form="next-btn"],
.page_multi-form_content-bottom [data-form="submit-btn"] {
  pointer-events: auto !important;
  background-color: var(--sp-blue);
  color: #fff;
  /* Never dim the primary action. A greyed-out button reads as a dead form,
     which is exactly how this one used to look. Problems are explained in
     words underneath the field instead. */
  opacity: 1 !important;
}
.page_multi-form_content-bottom [data-form="next-btn"]:hover,
.page_multi-form_content-bottom [data-form="submit-btn"]:hover {
  background-color: var(--sp-blue-bright);
}
.page_multi-form_content-bottom .button.is-secondary {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.page_multi-form_content-bottom .button.is-secondary:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* Inline validation message (created by form-handler.js) */
.m-field-error {
  color: #ff8794;
  font-size: 0.875rem;
  margin-top: 6px;
  display: block;
}
.form_input.m-invalid {
  border-color: #ff8794;
  box-shadow: 0 0 0 3px rgba(255, 135, 148, 0.22);
}
@keyframes m-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.m-nudge {
  animation: m-nudge var(--dur-state) var(--ease);
}

.page_multi-form_progress-bar {
  transition: width var(--dur-enter-fast) var(--ease),
    background-color var(--dur-state) var(--ease), transform var(--dur-enter-fast) var(--ease);
}

/* Entering step staggers its fields in (class re-armed by motion.js).
   `both` fill is mandatory: it holds the start state during the delay
   instead of flashing the element at full opacity first. */
@keyframes m-step-in {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: none; }
}
.m-step .margin-bottom.margin-medium {
  animation: var(--dur-enter-fast) both m-step-in;
  animation-timing-function: var(--ease);
}
.m-step .page_multi-form_form-content > *:nth-child(1) {
  animation: var(--dur-enter-fast) 50ms both m-step-in;
  animation-timing-function: var(--ease);
}
.m-step .page_multi-form_form-content > *:nth-child(2) {
  animation: var(--dur-enter-fast) 75ms both m-step-in;
  animation-timing-function: var(--ease);
}
.m-step .page_multi-form_form-content > *:nth-child(3) {
  animation: var(--dur-enter-fast) 100ms both m-step-in;
  animation-timing-function: var(--ease);
}
.m-step .page_multi-form_content-bottom {
  animation: var(--dur-enter-fast) 125ms both m-step-in;
  animation-timing-function: var(--ease);
}

@keyframes m-pop {
  from { opacity: 0; transform: translateY(-14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.w-form-done,
.w-form-fail {
  animation: var(--dur-enter-fast) both m-pop;
  animation-timing-function: var(--ease);
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .header78_image-list-top,
  .header78_image-list {
    transform: none !important;
  }
}

/* ============================================================
   Instrument-panel surface layer
   Per docs/design-references/Aesthetic DATA UI: the canvas is a cool
   near-black, never pure #000, pure black removes the value gap that
   lets a card read as elevated and the whole interface flattens.
   Structure is carried by hairlines, since a shadow barely registers
   on a dark surface.
   ============================================================ */
:root {
  --adui-bg-base: #0c0c0e;
  --adui-surface-1: #131316;
  --adui-surface-2: #1a1a1f;
  --adui-border-subtle: rgba(255, 255, 255, 0.06);
  --adui-border: rgba(255, 255, 255, 0.1);
  --adui-border-strong: rgba(255, 255, 255, 0.16);
  --adui-text-primary: #f4f4f6;
  --adui-text-secondary: #a1a1ad;
  --adui-text-muted: #74747f;

  /* Retint the export's darkest primitive: this one token drives every
     black background and near-black text colour in the Webflow sheet. */
  --_primitives---colors--neutral-darkest: #0c0c0e;
}

body,
.page-wrapper {
  background-color: var(--adui-bg-base);
}

/* Cards sit one value step above the canvas, edged with a hairline */
.home_features-list_item,
.timeline13_image,
.header78_image-wrapper {
  border-radius: 14px;
}
.home_faq_accordion {
  border-bottom: 1px solid var(--adui-border-subtle);
}

/* Nav and footer edges */
.navbar1_component {
  border-bottom: 1px solid var(--adui-border-subtle);
}

/* Skip link, visible only when focused */
.m-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--sp-blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}
.m-skip:focus {
  left: 0;
}

/* ============================================================
   Homepage automations band
   Surfaces the service high on the page, in the same
   instrument-panel language as the /automations page.
   ============================================================ */
.sp-auto {
  background: var(--adui-surface-1);
  border-block: 1px solid var(--adui-border-subtle);
  padding-block: clamp(56px, 6vw, 120px);
}
.sp-auto__wrap {
  width: 90%;
  max-width: 1300px;
  margin-inline: auto;
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  grid-template-columns: 1fr;
}
@media (width >= 1000px) {
  .sp-auto__wrap { grid-template-columns: 1fr 1fr; align-items: start; }
}
.sp-auto__eyebrow {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sp-yellow);
}
.sp-auto__h {
  margin: 0;
  color: var(--adui-text-primary);
  font-size: clamp(27px, 1.05rem + 2.9vw, 55px);
  line-height: 1.1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.sp-auto__sub {
  margin: 20px 0 0;
  max-width: 54ch;
  color: var(--adui-text-secondary);
  font-size: clamp(16.3px, 1rem + 0.14vw, 17.5px);
  line-height: 1.55;
}
.sp-auto__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sp-auto__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--sp-blue);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-blue);
  transition: transform var(--dur-hover) var(--ease),
    background-color var(--dur-tap) var(--ease);
}
.sp-auto__btn:hover { transform: translateY(-2px); background: var(--sp-blue-bright); }
.sp-auto__btn:active { transform: translateY(0); }
.sp-auto__btn--ghost {
  background: transparent;
  color: var(--adui-text-primary);
  box-shadow: inset 0 0 0 1px var(--adui-border-strong);
}
.sp-auto__btn--ghost:hover { background: var(--adui-surface-2); }
.sp-auto__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sp-auto__list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--adui-border-subtle);
  color: var(--adui-text-secondary);
  font-size: 15px;
  line-height: 1.55;
}
.sp-auto__list li:last-child { border-bottom: 1px solid var(--adui-border-subtle); }
.sp-auto__list span {
  flex: 0 0 auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--sp-yellow);
}
.sp-auto__list strong { color: var(--adui-text-primary); }

/* ============================================================
   Desktop navigation
   The export trapped these links inside a Webflow dropdown that
   was display:none with no trigger, so Automations, Testimonials
   and Contact Us all computed to 0x0 on every desktop screen and
   an entire product line was unreachable from the header.
   ============================================================ */
.sp-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
}
.sp-nav__link {
  color: var(--adui-text-secondary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding: 8px 0;
  transition: color var(--dur-hover) var(--ease);
}
.sp-nav__link:hover { color: var(--adui-text-primary); }
.sp-nav__link:focus-visible { outline: 2px solid var(--sp-blue); outline-offset: 3px; }

/* Below the nav breakpoint these sit inside the hamburger panel, so they
   stack and get full-size tap targets. */
@media screen and (max-width: 991px) {
  .sp-nav { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; }
  .sp-nav__link { font-size: 17px; padding: 12px 0; width: 100%; }
}

/* The banner emoji was an 803KB GIF displayed at 42px, 10% of page weight. */
.sp-banner-emoji { font-size: 26px; line-height: 1; display: inline-block; }

/* ============================================================
   Contrast repairs
   The gold accent is legible on near-black but measured 1.48:1 on
   the white section, where it introduces the core offer.
   ============================================================ */
.section_home_features-list .text-style-tagline {
  color: #8a6a00; /* 5.1:1 on white */
}
/* Timeline step numbers were 2.62:1 against a 3.0:1 requirement */
.timeline13_number,
.timeline13_item .text-style-tagline {
  color: rgba(255, 255, 255, 0.62);
}

/* ============================================================
   Tap targets
   The mobile primary CTA measured 173x40, under the 44px minimum.
   ============================================================ */
@media screen and (max-width: 767px) {
  .button,
  .w-button,
  .sp-auto__btn,
  .a-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* The Webflow cascade sets the tagline colour with equal specificity later in
   the sheet, so an accessibility repair has to win explicitly. 1.48:1 -> 5.1:1 */
.section_home_features-list .text-style-tagline,
.home_features-list_component .text-style-tagline {
  color: #8a6a00 !important;
}

/* Buttons carry an explicit height:40px from the export, under the 44px
   minimum touch target. Raise it on touch widths only. */
@media screen and (max-width: 767px) {
  .button,
  .w-button,
  .button.is-small,
  .sp-auto__btn,
  .a-btn {
    min-height: 44px !important;
    height: auto !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ============================================================
   Pricing
   The real numbers existed only inside a collapsed FAQ item at
   88% scroll depth. Publishing them is a genuine advantage in a
   market of "contact us for a quote".
   ============================================================ */
.sp-price { background: var(--adui-bg-base); border-top: 1px solid var(--adui-border-subtle);
  padding-block: clamp(56px, 6vw, 110px); }
.sp-price__wrap { width: 90%; max-width: 1300px; margin-inline: auto; }
.sp-price__eyebrow { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sp-yellow); }
.sp-price__h { margin: 0; color: var(--adui-text-primary); font-size: clamp(27px, 1.05rem + 2.4vw, 46px);
  line-height: 1.12; letter-spacing: -.045em; max-width: 20ch; text-wrap: balance; }
.sp-price__sub { margin: 16px 0 0; color: var(--adui-text-secondary); max-width: 52ch; font-size: 17px; }
.sp-price__grid { display: grid; gap: 16px; margin-top: 48px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.sp-price__card { background: var(--adui-surface-1); border: 1px solid var(--adui-border-subtle);
  border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--dur-state) var(--ease), transform var(--dur-state) var(--ease); }
.sp-price__card:hover { border-color: var(--adui-border); transform: translateY(-3px); }
.sp-price__card--accent { border-color: rgba(2,88,248,.42); background:
  linear-gradient(180deg, rgba(2,88,248,.10), var(--adui-surface-1) 60%); }
.sp-price__label { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sp-yellow); }
.sp-price__fig { margin: 6px 0 0; color: var(--adui-text-primary); font-size: 40px; font-weight: 800;
  letter-spacing: -.04em; line-height: 1.05; }
.sp-price__fig span { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--adui-text-muted); margin-top: 4px; }
.sp-price__fig--2 { font-size: 30px; opacity: .9; }
.sp-price__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.sp-price__list li { color: var(--adui-text-secondary); font-size: 14.5px; line-height: 1.5;
  padding-left: 20px; position: relative; }
.sp-price__list li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 999px; background: rgba(2,88,248,.6); }
.sp-price__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center;
  padding: 13px 24px; border-radius: 999px; background: var(--sp-blue); color: #fff;
  text-decoration: none; font-size: 13.5px; font-weight: 700; letter-spacing: -.02em;
  box-shadow: var(--shadow-blue);
  transition: transform var(--dur-hover) var(--ease), background-color var(--dur-tap) var(--ease); }
.sp-price__cta:hover { transform: translateY(-2px); background: var(--sp-blue-bright); }
.sp-price__note { margin: 26px 0 0; color: var(--adui-text-muted); font-size: 14px; max-width: 70ch; }

/* ============================================================
   Process timeline compression
   It measured 3,608px, 45% of the page, burying the offer and the
   proof behind five viewports of scrolling.
   ============================================================ */
.section_timeline13 .timeline13_image,
.section_timeline13 .timeline13_image img {
  max-height: 300px;
  width: auto;
  object-fit: contain;
}
.section_timeline13 .timeline13_item {
  padding-block: clamp(16px, 2vw, 32px);
}
.section_timeline13 .padding-section-large {
  padding-top: clamp(48px, 5vw, 88px);
  padding-bottom: clamp(48px, 5vw, 88px);
}
@media screen and (min-width: 992px) {
  .section_timeline13 .timeline13_item { min-height: 0; }
}

/* ============================================================
   Aspect ratio safety net
   Intrinsic width/height attributes reserve layout space and stop
   layout shift, but if a declared pair ever disagrees with the real
   file the image stretches. Letting height resolve from the ratio
   makes that class of bug impossible.
   ============================================================ */
img[width][height] {
  height: auto;
}
/* Images with an explicit inline or CSS height are excluded above by
   specificity, so decorative fixed-size marks are unaffected. */

/* ============================================================
   BRAND TYPOGRAPHY  (audit 29)
   The whole site resolved to system-ui, so it rendered as SF Pro
   on Mac, Segoe on Windows and Roboto on Android. Self-hosted
   WOFF2, latin subset, ~80KB total for five weights.
   ============================================================ */
@font-face{font-family:"Space Grotesk";src:url("/fonts/spacegrotesk-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/fonts/spacegrotesk-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/fonts/manrope-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/fonts/manrope-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/fonts/manrope-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;

  /* TYPE SCALE (audit 31): one 1.25 ratio, eight steps.
     Replaces the eleven ad-hoc sizes (13, 13.5, 14, 15, 16, 17.5,
     19.2, 24, 48, 53.92, 104) whose unrounded values were rem*1.2
     artifacts rather than decisions. */
  --t-1:13px; --t-2:16px; --t-3:20px; --t-4:25px;
  --t-5:31px; --t-6:39px; --t-7:49px; --t-8:61px;
  --t-display:clamp(39px, 1rem + 4.4vw, 76px);

  /* TOKENS (audit 30): one blue, two dark grounds, three radii */
  --sp-blue-dark:#013eaf;      /* hover only, was a second brand blue */
  --r-sm:8px; --r-md:14px; --r-pill:999px;
}

body, p, li, td, input, select, textarea, button, .text-size-medium,
.text-size-small, .form_field-label, .sp-nav__link {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5,
.heading, .heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .sp-auto__h, .sp-price__h,
.sp-price__fig, .a-page h1, .a-page h2, .a-page h3 {
  font-family: var(--font-display);
}
.a-num, .sp-price__label, .sp-auto__list span, .a-step::before {
  font-family: var(--font-mono);
}

/* TRACKING (audit 32): the previous -5.5% was applied linearly at
   every size, which closed the counters at display sizes. Tracking
   should tighten AS size grows, not scale with it. */
h1.heading, .heading-style-h1, .a-page h1 {
  letter-spacing: -0.025em;
  line-height: 0.98;
}
.heading-style-h2, .sp-auto__h, .sp-price__h, .a-page h2 {
  letter-spacing: -0.02em;
  line-height: 1.06;
}
.heading-style-h3, .heading-style-h4, .a-page h3 {
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  h1.heading, .heading-style-h1, .a-page h1 { letter-spacing: -0.01em; }
}

/* The banner used a second brand blue against the button blue, a gap
   large enough in one viewport to read as a mistake rather than a tone. */
.banner7_component { background-color: var(--sp-blue-dark); }

/* ============================================================
   WHITE SECTION  (audit 33)
   The page runs near-black throughout, flips to pure #FFFFFF for
   the features section, then back. Nothing marked it as deliberate
   and it carried the worst contrast failure on the site. Converting
   it to a raised dark surface makes the page one system.
   ============================================================ */
.section_home_features-list {
  background-color: var(--adui-surface-1) !important;
  border-block: 1px solid var(--adui-border-subtle);
}
.section_home_features-list h2,
.section_home_features-list .heading-style-h2,
.section_home_features-list h3 {
  color: var(--adui-text-primary) !important;
}
.section_home_features-list p,
.section_home_features-list p.text-size-medium,
.section_home_features-list .text-size-small {
  color: var(--adui-text-secondary) !important;
}
/* Back on a dark ground the brand gold is legible again (9.8:1) */
.section_home_features-list .text-style-tagline {
  color: var(--sp-yellow) !important;
}
/* The flat clipart sat on white; on a dark surface it needs a plate
   so the artwork does not float on a mismatched background. */
.home_features-list_item-icon-wrapper {
  background: #fff;
  border-radius: var(--r-md);
  padding: 14px;
  display: inline-block;
}

/* ============================================================
   MOBILE PROJECT STRIP  (audit 26)
   The marquee is static below the breakpoint at 225px per tile in a
   375px viewport, so four of the six projects were cropped off-screen
   and unreachable. Make it a real swipeable rail with snap points.
   ============================================================ */
@media screen and (max-width: 767px) {
  .header78_images-layout {
    overflow: visible;
  }
  .header78_image-list-top,
  .header78_image-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 5vw;
    transform: none !important;
    animation: none !important;
    width: 100%;
  }
  .header78_image-list-top::-webkit-scrollbar,
  .header78_image-list::-webkit-scrollbar { display: none; }
  .header78_image-wrapper {
    flex: 0 0 78vw;
    max-width: 78vw;
    scroll-snap-align: center;
  }
  /* The strip is duplicated for the desktop marquee loop; on mobile the
     second copy is redundant and would double the swipe distance. */
  .header78_image-list-top .header78_image-wrapper:nth-child(n + 7),
  .header78_image-list .header78_image-wrapper:nth-child(n + 7) { display: none; }
}

/* ============================================================
   INLINE CAPTURE  (audit 24)
   Every conversion path was a redirect to /onboarding, so a visitor
   who was not ready for a call had exactly one action: leave.
   ============================================================ */
.sp-cap{background:var(--adui-bg-base);border-top:1px solid var(--adui-border-subtle);
  padding-block:clamp(48px,5vw,96px)}
.sp-cap__wrap{width:90%;max-width:1300px;margin-inline:auto;display:grid;gap:clamp(28px,4vw,64px);
  grid-template-columns:1fr;align-items:start}
@media(width >= 900px){.sp-cap__wrap{grid-template-columns:1.1fr 1fr}}
.sp-cap__h{margin:0;color:var(--adui-text-primary);font-size:clamp(25px,1rem+2vw,39px);
  line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.sp-cap__sub{margin:14px 0 0;color:var(--adui-text-secondary);max-width:48ch;font-size:var(--t-2);
  line-height:1.55}
.sp-cap__form{display:grid;gap:8px;background:var(--adui-surface-1);
  border:1px solid var(--adui-border-subtle);border-radius:var(--r-md);padding:22px}
.sp-cap__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sp-cap__label{font-size:var(--t-1);font-weight:600;color:var(--adui-text-secondary);margin-top:6px}
.sp-cap__input{font:inherit;font-size:var(--t-2);padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--adui-border);background:#fff;color:#0c0c0e;min-height:44px;
  transition:border-color var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease)}
.sp-cap__input:focus{outline:none;border-color:var(--sp-blue);box-shadow:0 0 0 3px rgba(2,88,248,.25)}
.sp-cap__input.m-invalid{border-color:#ff8794;box-shadow:0 0 0 3px rgba(255,135,148,.22)}
.sp-cap__btn{margin-top:12px;min-height:48px;border:0;cursor:pointer;border-radius:var(--r-pill);
  background:var(--sp-blue);color:#fff;font:inherit;font-family:var(--font-body);
  font-size:var(--t-2);font-weight:700;letter-spacing:-.01em;box-shadow:var(--shadow-blue);
  transition:transform var(--dur-hover) var(--ease),background-color var(--dur-tap) var(--ease)}
.sp-cap__btn:hover{transform:translateY(-2px);background:var(--sp-blue-bright)}
.sp-cap__btn:active{transform:translateY(0)}
.sp-cap__btn:disabled{opacity:.7;cursor:default;transform:none}
.sp-cap__note{margin:10px 0 0;font-size:var(--t-1);color:var(--adui-text-muted);line-height:1.5}
.sp-cap__note.is-ok{color:#7fd8b0}
.sp-cap__note.is-err{color:#ff8794}

/* Contact: a way to reach a human without committing to a four-step form. */
.sp-contact{background:var(--adui-surface-1);border-top:1px solid var(--adui-border-subtle);
  padding-block:clamp(48px,5vw,96px);scroll-margin-top:90px}
.sp-contact__wrap{width:90%;max-width:1300px;margin-inline:auto;display:grid;gap:28px;
  grid-template-columns:1fr;align-items:center}
@media(width >= 900px){.sp-contact__wrap{grid-template-columns:1.2fr auto}}
.sp-contact__eyebrow{margin:0 0 10px;font-size:var(--t-1);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sp-yellow)}
.sp-contact__h{margin:0;color:var(--adui-text-primary);font-size:clamp(25px,1rem+2vw,39px);
  line-height:1.06;letter-spacing:-.02em}
.sp-contact__sub{margin:12px 0 0;color:var(--adui-text-secondary);max-width:52ch;line-height:1.55}
.sp-contact__actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media(width >= 900px){.sp-contact__actions{align-items:flex-end}}
.sp-contact__mail{font-family:var(--font-display);font-size:clamp(20px,1rem+1vw,25px);
  font-weight:700;letter-spacing:-.02em;color:var(--adui-text-primary);text-decoration:none;
  border-bottom:2px solid rgba(2,88,248,.5);padding-bottom:2px;min-height:44px;
  display:inline-flex;align-items:center;transition:border-color var(--dur-hover) var(--ease)}
.sp-contact__mail:hover{border-bottom-color:var(--sp-blue)}
.sp-contact__btn{color:var(--adui-text-secondary);text-decoration:none;font-size:var(--t-1);
  font-weight:600;min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--dur-hover) var(--ease)}
.sp-contact__btn:hover{color:var(--adui-text-primary)}
/* The rail inherits wrap/width from the marquee layout, so the tiles were
   fitting instead of overflowing and there was nothing to swipe. */
@media screen and (max-width: 767px) {
  .header78_image-list-top,
  .header78_image-list {
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .header78_images-layout {
    display: block !important;
    width: 100% !important;
  }
}
/* The marquee nests .header78_image-list inside .header78_image-list-top, so
   the outer element is the one that must scroll on mobile. */
@media screen and (max-width: 767px) {
  .header78_image-list-top { overflow-x: auto; }
  .header78_image-list { overflow: visible; width: max-content; }
}