/* Site-level overrides — applied on top of the Webflow stylesheet.
   Loaded after webflow.css on every page. */

/* ---------- Switzer (variable font) — primary Latin typeface ----------
   One file covers weights 100–900. Italic axis loaded separately. */
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-Variable.woff2") format("woff2"),
       url("/fonts/switzer/Switzer-Variable.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer/Switzer-VariableItalic.woff2") format("woff2"),
       url("/fonts/switzer/Switzer-VariableItalic.woff") format("woff");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Catch-all: Latin (non-RTL) pages render in Switzer. RTL pages override
   this back to Dubai (see rtl.css). */
html:not([dir="rtl"]),
html:not([dir="rtl"]) body,
html:not([dir="rtl"]) input,
html:not([dir="rtl"]) textarea,
html:not([dir="rtl"]) button,
html:not([dir="rtl"]) select {
  font-family: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Header logo at 1.5× the Webflow default (100px → 150px). Footer logo unchanged. */
.navbar-brand {
  width: 150px;
}
.navbar-brand img {
  width: 100%;
  height: auto;
}

/* Mobile: Webflow's CSS leaves a negative margin-left on .home-hero-inline
   after hiding the decorative line that sat next to "Sparc". The overshoot
   pushes the word past the .overflow-hidden container's left edge and
   clips the "S". Reset to 0 below 991px. */
@media (max-width: 991px) {
  .home-hero-inline { margin-left: 0 !important; }
}

/* Section headlines — Light (300) instead of Normal (400).
   Covers:
   - "Welcome to / Sparc / Technology"           → .heading-8
   - "App-free, browser-based, venue-branded"    → .heading-03.cap (+ .bold-text strong)
   - "A flexible portfolio deployed at scale"    → .heading-02.uper-case (+ .bold-text-4 strong)
   - "Where Vision / Meets Execution"            → .heading-02.uper-case
   - "Clear, & Effective Workflow"               → .heading-02.uper-case
*/
.heading-8,
.heading-03.cap,
.heading-03.cap strong,
.heading-03.cap .bold-text,
.heading-02.uper-case,
.heading-02.uper-case strong,
.heading-02.uper-case .bold-text-4 {
  font-weight: 300;
}

/* Product title tabs (Sparc Digital, ILX, Sparc Retail, Spotsy) —
   unselected colour. Selected state remains white via Webflow's .w--current. */
.awards-tab-link,
.awards-tab-link._01 {
  color: #6f6f6f;
}
.awards-tab-link.w--current,
.awards-tab-link._01.w--current {
  color: #ffffff;
}

/* Align all section headlines on a consistent left edge. The Webflow export
   uses three different max-widths for these wrappers (680, 767, 778). Pin
   them all to 767px so their left edges line up across "App-free /
   browser-based / venue-branded", "A flexible portfolio…", "Where Vision /
   Meets Execution" and "Clear, & Effective Workflow". */
.section-header-text:has(.heading-03.cap),
.section-header-text.max-778 {
  max-width: 767px;
}

/* "App-free, browser-based, venue-branded" headline (.heading-03.cap) renders
   each line via <br>. Webflow's default line-height (~1.33) makes the lines
   look glued together. Bump it so each line gets a visible gap — visually
   matching the separate-block headlines like "Where Vision / Meets Execution". */
.heading-03.cap,
.heading-03.cap strong {
  line-height: 1.4 !important;
}
@media (max-width: 991px) {
  .heading-03.cap,
  .heading-03.cap strong { line-height: 1.55 !important; }
}
@media (max-width: 767px) {
  .heading-03.cap,
  .heading-03.cap strong { line-height: 1.6 !important; }
}