/* ==========================================================================
   Slovenia Cars design system
   Single source of truth for tokens, type scale, spacing rhythm, cards,
   buttons, rails and the mobile action bar.

   Authored mobile first. Every value below describes the 375px case and
   larger screens are the enhancement.

   Conflict strategy (no specificity war):
   Elementor v4 containers resolve their entire box model from CSS custom
   properties. Its own stylesheet declares, at low specificity:
       .e-con            { width: var(--width); min-height: var(--min-height) }
       .e-con, .e-con>.e-con-inner { display: var(--display) }
       .e-con-full       { padding-block-*: var(--padding-block-*) }
       .elementor-element:where(.e-con-full,.elementor-widget)
                         { flex-wrap: var(--flex-wrap); gap: var(--row-gap) var(--column-gap) }
       @media (max-width:767px) .e-con.e-flex { --flex-wrap: var(--flex-wrap-mobile) }
   So this layer SETS THOSE VARIABLES rather than overriding the declarations.
   Elementor stays in control of how the box model is applied; the design
   system controls the values. That is why there is no !important in any
   layout rule here.

   The only !important declarations in this file are the two places the CSS
   spec effectively requires them: the prefers-reduced-motion reset and the
   visually-hidden utility.

   Per-widget Elementor typography and spacing values were removed from the
   document data itself, so nothing competes for ownership.
   ========================================================================== */

:root {
  /* colour */
  --sc-bg: #F6F8FB;
  --sc-surface: #FFFFFF;
  --sc-ink: #0E1A2B;
  --sc-accent: #0056B3;
  --sc-accent-hover: #00428A;
  --sc-accent-soft: #E8F0FA;
  --sc-secondary: #1E6B42;
  --sc-secondary-fill: #2E8B57;
  --sc-secondary-soft: #E9F4EE;
  --sc-highlight: #F4B400;
  --sc-text-2: #475569;   /* raised from #5A6A7D to ~8.2:1 on white */
  --sc-label: #334155;    /* section labels, calmer than the brand blue */
  --sc-alt-bg: #F8FAFC;   /* alternating section ground */
  --sc-border: #E1E7EF;
  --sc-border-strong: #CBD5E2;

  /* elevation, always tinted to the ground */
  --sc-depth-1: 0 1px 2px rgba(14, 26, 43, 0.05);
  --sc-depth-2: 0 14px 32px -12px rgba(14, 26, 43, 0.16);
  --sc-depth-3: 0 26px 60px -24px rgba(14, 26, 43, 0.24);

  /* radius, role based and locked */
  --sc-r-sm: 6px;
  --sc-r-md: 10px;
  --sc-r-lg: 14px;
  --sc-r-xl: 22px;
  --sc-r-full: 9999px;

  /* spacing scale */
  --sc-1: 4px;
  --sc-2: 8px;
  --sc-3: 12px;
  --sc-4: 16px;
  --sc-5: 20px;
  --sc-6: 24px;
  --sc-8: 32px;
  --sc-10: 40px;
  --sc-12: 48px;
  --sc-16: 64px;
  --sc-20: 80px;
  --sc-24: 96px;

  /* ------------------------------------------------------------------
     SEMANTIC SPACING ROLES
     Always use these in component rules, never the raw scale above.
     Each one answers "what is this space for", so a later editor can
     change every section gap or every card inset from one place.
     ------------------------------------------------------------------ */
  --sc-space-section: clamp(64px, 4.2vw + 44px, 104px); /* between major sections */
  --sc-space-container: 20px;                            /* page side gutter */
  --sc-space-card: 20px;                                 /* inset inside a card */
  --sc-space-grid: 20px;                                 /* gap between cards in a grid */
  --sc-space-rail: 12px;                                 /* gap between rail cards */
  --sc-space-content: 24px;                              /* between blocks in a section */
  --sc-space-heading: 4px;                               /* heading to supporting text */
  --sc-space-button: 12px;                               /* between adjacent buttons */

  /* Component heights that used to live as per-widget Elementor values. */
  --sc-hero-min: clamp(520px, 72vh, 760px);
  --sc-cta-min: clamp(320px, 40vh, 460px);

  /* Aliases: the rules below reference these, they resolve to the roles. */
  --sc-section-y: var(--sc-space-section);
  --sc-gutter: var(--sc-space-container);
  --sc-container: 1280px;

  /* type */
  --sc-font-display: "General Sans", "DM Sans", system-ui, sans-serif;
  --sc-font-body: "DM Sans", system-ui, sans-serif;

  --sc-fs-display: clamp(2.15rem, 1.55rem + 2.6vw, 4.25rem);
  --sc-fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --sc-fs-h2: clamp(1.75rem, 1.42rem + 1.5vw, 2.75rem);
  --sc-fs-h3: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --sc-fs-h4: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --sc-fs-lede: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --sc-fs-body: 1rem;
  --sc-fs-small: 0.875rem;
  --sc-fs-label: 0.75rem;

  --sc-ease: cubic-bezier(0.4, 0.14, 0.3, 1);
  --sc-dur: 180ms;
}

@media (min-width: 768px) {
  :root { --sc-space-container: 24px; }
}
@media (min-width: 1280px) {
  :root { --sc-space-container: 40px; }
}

/* --------------------------------------------------------------------------
   0. Elementor global token -> Slovenia Cars semantic role

   The editable source of truth for colour and type is Elementor's own
   Global Colors / Global Typography panel (Site Settings). This file mirrors
   those values as CSS custom properties so plain CSS components can use them,
   and the table below is the contract between the two. Change a value in
   Elementor and change the matching --sc-* token here to keep them in step.

   COLOUR
     Elementor "Brand Blue"      --e-global-color-primary         -> --sc-accent
     Elementor "Blue Hover"      --e-global-color-secondary       -> --sc-accent-hover
     Elementor "Ink"             --e-global-color-text            -> --sc-ink
     Elementor "Nature Green"    --e-global-color-accent           -> --sc-secondary-fill
     Elementor "Text Secondary"  --e-global-color-sctextsec        -> --sc-text-2
     Elementor "Border"          --e-global-color-scborder         -> --sc-border
     Elementor "Border Strong"   --e-global-color-scborderstrong   -> --sc-border-strong
     Elementor "Page BG"         --e-global-color-scbg             -> --sc-bg
     Elementor "Surface"         --e-global-color-scsurface        -> --sc-surface
     Elementor "Blue Soft"       --e-global-color-scaccentsoft     -> --sc-accent-soft
     Elementor "Green Deep"      --e-global-color-scgreendeep      -> --sc-secondary
     Elementor "Green Soft"      --e-global-color-scgreensoft      -> --sc-secondary-soft
     Elementor "Gold"            --e-global-color-scgold           -> --sc-highlight
     Elementor "Error"           --e-global-color-scred            -> --sc-error

   TYPOGRAPHY
     Elementor "Display"         globals/typography?id=primary    -> .sc-display
     Elementor "Section Heading" globals/typography?id=secondary  -> .sc-h2 / h2
     Elementor "Body"            globals/typography?id=text       -> .sc-body / body
     Elementor "Lede"            globals/typography?id=accent     -> .sc-lede
     Elementor "Page H1"         globals/typography?id=sch1       -> .sc-h1 / h1
     Elementor "Card Title"      globals/typography?id=sch3       -> .sc-h3 / h3
     Elementor "Sub Title"       globals/typography?id=sch4       -> .sc-h4 / h4
     Elementor "Overline"        globals/typography?id=scoverline -> .sc-eyebrow
     Elementor "Small Meta"      globals/typography?id=scsmall    -> .sc-meta
     Elementor "Button"          globals/typography?id=scbtn      -> .sc-btn

   Every type step is fluid via clamp(), so there is no separate mobile
   scale to maintain in either system.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--sc-bg);
  color: var(--sc-ink);
  font-family: var(--sc-font-body);
  font-size: var(--sc-fs-body);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Nothing on the site may render text below 14px. */
body, body p, body li, body span, body a, body td { font-size: inherit; }

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--sc-font-display);
  color: var(--sc-ink);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Keyboard focus is visible everywhere, once, consistently. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(0, 86, 179, 0.45);
  outline-offset: 2px;
  border-radius: var(--sc-r-sm);
}

/* --------------------------------------------------------------------------
   2. Type roles
   -------------------------------------------------------------------------- */

.sc-display .elementor-heading-title,
.sc-display h1, .sc-display h2 {
  font-size: var(--sc-fs-display);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.sc-h1 .elementor-heading-title, .sc-h1 h1, .sc-h1 h2 {
  font-size: var(--sc-fs-h1);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.sc-h2 .elementor-heading-title, .sc-h2 h2, .sc-h2 h3 {
  font-size: var(--sc-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 700;
}

.sc-h3 .elementor-heading-title, .sc-h3 h3, .sc-h3 h4 {
  font-size: var(--sc-fs-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.sc-h4 .elementor-heading-title, .sc-h4 h4, .sc-h4 h5 {
  font-size: var(--sc-fs-h4);
  line-height: 1.3;
  font-weight: 600;
}

.sc-eyebrow .elementor-heading-title,
.sc-eyebrow p, .sc-eyebrow h2, .sc-eyebrow h3, .sc-eyebrow h4 {
  font-family: var(--sc-font-body);
  font-size: var(--sc-fs-label);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sc-label);
  line-height: 1.4;
}

.sc-lede, .sc-lede p {
  font-size: var(--sc-fs-lede);
  line-height: 1.6;
  color: var(--sc-text-2);
}

.sc-body, .sc-body p, .sc-body li {
  font-size: var(--sc-fs-body);
  line-height: 1.65;
  color: var(--sc-text-2);
}

.sc-meta, .sc-meta p {
  font-size: var(--sc-fs-small);
  line-height: 1.5;
  color: var(--sc-text-2);
}

.sc-meta strong { color: var(--sc-ink); font-weight: 600; }

/* Running prose never exceeds a comfortable measure. */
.sc-lede p, .sc-prose p { max-width: 66ch; }

/* On a dark ground the secondary text lifts so it still passes contrast. */
.sc-on-dark .elementor-heading-title,
.sc-on-dark h1, .sc-on-dark h2, .sc-on-dark h3 { color: #FFFFFF; }
.sc-on-dark .sc-lede, .sc-on-dark .sc-lede p,
.sc-on-dark .sc-body, .sc-on-dark .sc-body p { color: rgba(255, 255, 255, 0.88); }
.sc-on-dark .sc-eyebrow .elementor-heading-title { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   3. Section rhythm
   -------------------------------------------------------------------------- */

/* Elementor v4 containers resolve their box model from custom properties
   (.e-con { padding-block-start: var(--padding-block-start) } and friends).
   Setting those variables is the supported extension point, so the design
   system owns the rhythm without overriding a single Elementor declaration
   and without !important. */
body .sc-section {
  --padding-top: var(--sc-space-section);
  --padding-bottom: var(--sc-space-section);
  --padding-left: var(--sc-space-container);
  --padding-right: var(--sc-space-container);
  --row-gap: var(--sc-space-content);
}

.sc-section--tint { background-color: var(--sc-bg); }
.sc-section--alt { background-color: var(--sc-alt-bg); }
.sc-section--plain { background-color: var(--sc-surface); }
.sc-section--rule {
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
}

/* Section headers keep the eyebrow and title tight, then breathe before content. */
.sc-section > .sc-eyebrow { margin-bottom: -8px; }
.sc-section > .sc-h2 { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   4. Cards
   -------------------------------------------------------------------------- */

body .sc-card {
  --border-radius: var(--sc-r-lg);
  --overflow: hidden;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  box-shadow: var(--sc-depth-1);
  transition: box-shadow var(--sc-dur) var(--sc-ease),
              transform var(--sc-dur) var(--sc-ease),
              border-color var(--sc-dur) var(--sc-ease);
}

@media (hover: hover) {
  body .sc-card:hover {
    box-shadow: var(--sc-depth-2);
    border-color: var(--sc-border-strong);
    transform: translateY(-2px);
  }
  body .sc-card:hover .sc-card__media img { transform: scale(1.04); }
}

/* The whole card is one link: the inner arrow is a visual affordance only. */
body .sc-card:focus-within {
  box-shadow: var(--sc-depth-2);
  border-color: var(--sc-accent);
}

.sc-card__media { position: relative; overflow: hidden; line-height: 0; }
.sc-card__media img,
.sc-card__media .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--sc-ease);
}

/* Locked ratios so a portrait upload never breaks a row. */
/* One ratio for every card thumbnail across the site. */
body .sc-card .elementor-widget-image img,
body .sc-card__media img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.sc-card__media--4x3 img { aspect-ratio: 4 / 3; }
.sc-card__media--16x10 img { aspect-ratio: 16 / 10; }
.sc-ratio-4x3 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.sc-ratio-16x9 img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.sc-ratio-16x10 img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.sc-ratio-3x2 img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

body .sc-card__body {
  --padding-top: var(--sc-space-card);
  --padding-bottom: var(--sc-space-card);
  --padding-left: var(--sc-space-card);
  --padding-right: var(--sc-space-card);
  --row-gap: var(--sc-2);
}

/* A card with no media child carries its own inset, because it has no
   separate body container. Replaces the per-widget 24px/22px Elementor
   padding these cards used to hold. */
body .sc-card--plain {
  --padding-top: var(--sc-space-card);
  --padding-bottom: var(--sc-space-card);
  --padding-left: var(--sc-space-card);
  --padding-right: var(--sc-space-card);
  --row-gap: var(--sc-2);
}

@media (min-width: 768px) {
  body .sc-card--plain {
    --padding-top: 24px;
    --padding-bottom: 24px;
    --padding-left: 22px;
    --padding-right: 22px;
  }
}

/* A chip marks the category. One per card. */
.sc-chip .elementor-heading-title,
.sc-chip p {
  display: inline-block;
  background: var(--sc-accent-soft);
  color: var(--sc-accent);
  font-family: var(--sc-font-body);
  font-size: var(--sc-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--sc-r-sm);
  line-height: 1.2;
}

/* Verified / included state. Green is confined to this role. */
.sc-chip--verified .elementor-heading-title,
.sc-chip--verified p {
  background: var(--sc-secondary-soft);
  color: var(--sc-secondary);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

body .sc-btn .elementor-button,
body .sc-btn .xpro-elementor-button,
body a.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: var(--sc-r-md);
  font-family: var(--sc-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  transition: background-color var(--sc-dur) var(--sc-ease),
              border-color var(--sc-dur) var(--sc-ease),
              color var(--sc-dur) var(--sc-ease);
}

body .sc-btn--primary .elementor-button,
body .sc-btn--primary .xpro-elementor-button {
  background-color: var(--sc-accent);
  color: #FFFFFF;
  border: 1px solid var(--sc-accent);
}
body .sc-btn--primary .elementor-button:hover,
body .sc-btn--primary .elementor-button:focus,
body .sc-btn--primary .xpro-elementor-button:hover {
  background-color: var(--sc-accent-hover);
  border-color: var(--sc-accent-hover);
  color: #FFFFFF;
}

body .sc-btn--secondary .elementor-button {
  background-color: var(--sc-surface);
  color: var(--sc-ink);
  border: 1px solid var(--sc-border-strong);
}
body .sc-btn--secondary .elementor-button:hover {
  border-color: var(--sc-accent);
  color: var(--sc-accent);
  background-color: var(--sc-surface);
}

/* Over photography a ghost button needs a real stroke to stay legible. */
body .sc-btn--ghost .elementor-button {
  background-color: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(140%) blur(2px);
}
body .sc-btn--ghost .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* Tertiary: a text link with an arrow, still a 44px target. */
body .sc-btn--link .elementor-button {
  background: transparent;
  color: var(--sc-accent);
  border: 0;
  padding: 0;
  min-height: 44px;
  font-size: var(--sc-fs-body);
  justify-content: flex-start;
}
body .sc-btn--link .elementor-button:hover { color: var(--sc-accent-hover); }

/* Full width primary on mobile only, so the thumb has a real target. */
@media (max-width: 640px) {
  body .sc-btn--primary .elementor-button,
  body .sc-btn--secondary .elementor-button,
  body .sc-btn--ghost .elementor-button { width: 100%; }
  body .sc-btn--link .elementor-button { width: auto; }
}

/* Any small control still gets a 44px hit area. */
.sc-tap { position: relative; }
.sc-tap::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   6. Grids and mobile rails
   -------------------------------------------------------------------------- */

body .sc-grid {
  --display: flex;
  --flex-wrap: wrap;
  --row-gap: var(--sc-space-grid);
  --column-gap: var(--sc-space-grid);
}

/* One link per card. The card's link widget stretches an invisible layer over
   the whole card, so the entire card is clickable but keyboard users get a
   single tab stop instead of one for the image and one for the button. */
body .sc-card { position: relative; }

/* Cards in a row share top and bottom edges, and every card's action
   sits on the same baseline regardless of how long its copy runs. */
body .sc-grid, body .sc-rail { --align-items: stretch; }
body .sc-card { --height: auto; }
body .sc-card__body { flex: 1 1 auto; }
body .sc-card .sc-card__link { margin-top: auto; }
body .sc-card .sc-card__link a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
body .sc-card .sc-card__link { position: static; }

/* A row of four or more sibling cards becomes a snap rail on mobile.
   The next card peeks so the row reads as scrollable without a label. */
@media (max-width: 767px) {
  /* Elementor's own mobile rule is .e-con.e-flex { --flex-wrap:
     var(--flex-wrap-mobile) }, so the wrap is changed by setting
     --flex-wrap-mobile rather than by overriding flex-wrap. Gap for a
     full-width container comes from --row-gap / --column-gap, not --gap. */
  body .sc-rail {
    --display: flex;
    --flex-wrap: nowrap;
    --flex-wrap-mobile: nowrap;
    --row-gap: var(--sc-space-rail);
    --column-gap: var(--sc-space-rail);
    --padding-left: var(--sc-space-container);
    --padding-right: var(--sc-space-container);
    --padding-bottom: 4px;
    --margin-left: calc(var(--sc-space-container) * -1);
    --margin-right: calc(var(--sc-space-container) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body .sc-rail::-webkit-scrollbar { display: none; }

  /* The card peeks past the gutter so the row reads as scrollable with no
     label. --width feeds Elementor's own width:var(--width) declaration. */
  body .sc-rail > .e-con {
    --width: 80%;
    --margin-left: 0px;
    --margin-right: 0px;
    max-width: 320px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* A compact rail for short step cards. */
  body .sc-rail--compact > .e-con {
    --width: 68%;
    max-width: 260px;
  }
}

/* Off mobile the rail is an ordinary responsive grid again. */
@media (min-width: 768px) {
  body .sc-rail {
    --display: flex;
    --flex-wrap: wrap;
    --row-gap: var(--sc-space-grid);
    --column-gap: var(--sc-space-grid);
    overflow: visible;
  }
}

/* Two-up compact grid, used where cards are text only. */
@media (max-width: 767px) {
  body .sc-grid--2up {
    --row-gap: var(--sc-space-rail);
    --column-gap: var(--sc-space-rail);
    --flex-wrap: wrap;
    --flex-wrap-mobile: wrap;
  }
  body .sc-grid--2up > .e-con {
    --width: calc(50% - (var(--sc-space-rail) / 2));
    --margin-left: 0px;
    --margin-right: 0px;
    flex-shrink: 0;
  }
}

/* -------------------------------------------------------------------------
   6b. List family
   Used where a row of items has no real elevation to communicate, so a card
   would be false hierarchy. Replaces stacks of identical cards and gives the
   page a second row family.
   ------------------------------------------------------------------------- */

body .sc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--sc-border);
}

body .sc-listrow {
  --width: 100%;
  --padding-top: var(--sc-5);
  --padding-bottom: var(--sc-5);
  --padding-left: 0px;
  --padding-right: 0px;
  --border-radius: 0;
  --row-gap: var(--sc-2);
  border-bottom: 1px solid var(--sc-border);
  background: transparent;
  box-shadow: none;
  transition: background-color var(--sc-dur) var(--sc-ease);
}

@media (hover: hover) {
  body .sc-listrow:hover { background-color: rgba(0, 86, 179, 0.03); }
}

@media (min-width: 768px) {
  body .sc-list { column-gap: var(--sc-10); }
  body .sc-listrow { --width: calc(50% - (var(--sc-10) / 2)); }
}

@media (min-width: 1024px) {
  body .sc-list--3 { column-gap: var(--sc-8); }
  body .sc-list--3 .sc-listrow { --width: calc(33.333% - (var(--sc-8) * 2 / 3)); }
}

body .sc-stepnum .elementor-heading-title,
body .sc-stepnum p {
  font-family: var(--sc-font-body);
  font-size: var(--sc-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

body .sc-checklist .elementor-icon-list-item {
  align-items: flex-start;
  margin-bottom: 10px;
}
body .sc-checklist .elementor-icon-list-text {
  font-family: var(--sc-font-body);
  font-size: var(--sc-fs-body);
  line-height: 1.55;
  color: var(--sc-ink);
  position: relative;
  padding-left: 28px;
}
body .sc-checklist .elementor-icon-list-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 18px;
  height: 18px;
  border-radius: var(--sc-r-full);
  background-color: var(--sc-secondary-soft);
}
body .sc-checklist .elementor-icon-list-text::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.55em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--sc-secondary);
  border-bottom: 2px solid var(--sc-secondary);
  transform: rotate(-45deg);
}

body .sc-media img {
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-depth-1);
  width: 100%;
  display: block;
}

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */

body .sc-hero {
  --padding-left: var(--sc-space-container);
  --padding-right: var(--sc-space-container);
  --padding-top: clamp(48px, 6vw, 96px);
  --padding-bottom: clamp(40px, 5vw, 88px);
  /* Replaces the Elementor 88vh value. Capped so a tall desktop window
     cannot push the primary action out of the first viewport. */
  --min-height: var(--sc-hero-min);
}

/* A photographic closing CTA keeps real presence without being a hero.
   Replaces the Elementor 420px min-height these sections used to hold. */
body .sc-section--cta {
  --min-height: var(--sc-cta-min);
  --justify-content: center;
}

@media (max-width: 767px) {
  /* The headline, one short line of support and the primary action must all
     sit in the first viewport. Height becomes content driven, replacing the
     Elementor 78vh mobile value that pushed the CTA below the fold. */
  body .sc-hero {
    --min-height: 0;
    --padding-top: 44px;
    --padding-bottom: 36px;
  }
  body .sc-hero__lede p { font-size: 1rem; }
  body .sc-section--cta { --min-height: 0; }
}

/* The floating trust bar. One of only two roles allowed the 22px radius. */
body .sc-trustbar {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--sc-r-xl);
  box-shadow: var(--sc-depth-3);
  backdrop-filter: saturate(150%) blur(8px);
  padding: var(--sc-4) var(--sc-5);
}
body .sc-trustbar .elementor-icon-list-item,
body .sc-trustbar .elementor-icon-list-text {
  color: #FFFFFF;
  font-size: var(--sc-fs-small);
  font-weight: 500;
}

@media (max-width: 767px) {
  /* On mobile the trust bar reads as a single quiet row, not a stacked panel. */
  body .sc-trustbar { padding: var(--sc-3) var(--sc-4); }
  body .sc-trustbar .elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
}

/* --------------------------------------------------------------------------
   8. Mobile action bar
   Injected at wp_footer, shown on mobile only, past the hero.
   -------------------------------------------------------------------------- */

.sc-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  display: none;
  padding: 10px var(--sc-gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--sc-border);
  transform: translateY(110%);
  transition: transform 220ms var(--sc-ease);
}

.sc-actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  width: 100%;
  background: var(--sc-accent);
  color: #FFFFFF;
  font-family: var(--sc-font-body);
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--sc-r-md);
  text-decoration: none;
}
.sc-actionbar a:hover, .sc-actionbar a:focus { background: var(--sc-accent-hover); color: #FFFFFF; }

@media (max-width: 767px) {
  .sc-actionbar { display: block; }
  .sc-actionbar.is-visible { transform: translateY(0); }
  /* The bar must never sit on top of the footer content. */
  body.sc-has-actionbar footer,
  body.sc-has-actionbar .xpro-theme-builder-footer { padding-bottom: 76px; }
}

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */

body .xpro-theme-builder-header { background: var(--sc-surface); }

/* The header is its own role. It must never inherit section rhythm. */
body .sc-header {
  --padding-top: 12px;
  --padding-bottom: 12px;
  --padding-left: var(--sc-space-container);
  --padding-right: var(--sc-space-container);
  --row-gap: 0px;
  --column-gap: var(--sc-4);
}

@media (min-width: 1025px) {
  body .sc-header {
    --padding-top: 14px;
    --padding-bottom: 14px;
  }
}

/* Footer bar: the thin legal strip under the main footer. */
body .sc-footer-bar {
  --padding-top: var(--sc-5);
  --padding-bottom: var(--sc-5);
  --padding-left: var(--sc-space-container);
  --padding-right: var(--sc-space-container);
  border-top: 1px solid var(--sc-border);
}
body .sc-footer-bar,
body .sc-footer-bar p,
body .sc-footer-bar a { font-size: var(--sc-fs-small); color: var(--sc-text-2); }

body .xpro-site-title,
body .xpro-site-title-text {
  font-family: var(--sc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--sc-ink);
  margin: 0;
}

/* The site brand. A link, not a heading, so it stays out of the document
   outline and every page keeps exactly one H1. */
body .sc-brand,
body .sc-brand .elementor-heading-title {
  font-family: var(--sc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--sc-ink);
  margin: 0;
}
body .sc-brand a { color: var(--sc-ink); text-decoration: none; }
body .sc-brand a:hover { color: var(--sc-accent); }

/* Hidden where the docked action bar already carries the same action, so the
   same intent never appears twice on one screen. */
@media (max-width: 1024px) {
  body .sc-hide-handheld { display: none; }
}

/* A comfortable, obvious menu target. */
body .xpro-elementor-horizontal-menu-toggler {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  color: var(--sc-ink);
  font-size: 17px;
}
body .xpro-elementor-horizontal-menu-toggler:hover {
  border-color: var(--sc-accent);
  color: var(--sc-accent);
}
body .xpro-elementor-horizontal-menu-close {
  width: 44px;
  height: 44px;
  color: var(--sc-ink);
}

/* Xpro sets the drawer to a fixed 400px, which overflows a 320px or 360px
   screen. max-width wins over its width regardless of specificity, so this is
   a one-line cap rather than an override war. */
body .xpro-elementor-horizontal-menu-responsive-tablet,
body .xpro-elementor-horizontal-menu-responsive-mobile,
body .xpro-elementor-horizontal-navbar {
  max-width: min(400px, 88vw);
}

/* The drawer itself: generous rows, real touch targets. */
body .xpro-elementor-horizontal-navbar-nav > li > a {
  font-size: 1.0625rem;
  font-weight: 500;
}

@media (max-width: 1024px) {
  body .xpro-elementor-horizontal-navbar { padding-top: 68px; }
  body .xpro-elementor-horizontal-navbar-nav > li > a {
    min-height: 52px;
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--sc-border);
  }
  body .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a { color: var(--sc-accent); }

}



/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

body .sc-footer {
  --padding-top: var(--sc-16);
  --padding-bottom: var(--sc-10);
  --padding-left: var(--sc-space-container);
  --padding-right: var(--sc-space-container);
  --row-gap: var(--sc-8);
}

@media (max-width: 767px) {
  body .sc-footer {
    --padding-top: var(--sc-12);
    --padding-bottom: var(--sc-8);
  }
  body .sc-footer-col { --width: 100%; }
}

body .sc-footer-brand {
  font-family: var(--sc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--sc-ink);
}

body .sc-footer a { color: var(--sc-text-2); }
body .sc-footer a:hover { color: var(--sc-accent); }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

body .wpforms-field-label,
body .sc-field label {
  font-family: var(--sc-font-body);
  font-size: var(--sc-fs-small);
  font-weight: 600;
  color: var(--sc-ink);
  margin-bottom: 6px;
}

body .wpforms-field input[type="text"],
body .wpforms-field input[type="email"],
body .wpforms-field input[type="tel"],
body .wpforms-field input[type="date"],
body .wpforms-field select,
body .wpforms-field textarea,
body .sc-field input,
body .sc-field select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font-family: var(--sc-font-body);
  /* 16px prevents iOS Safari from zooming the viewport on focus. */
  font-size: 16px;
  color: var(--sc-ink);
  background: var(--sc-surface);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-r-md);
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease);
}

body .wpforms-field input:focus,
body .wpforms-field select:focus,
body .wpforms-field textarea:focus,
body .sc-field input:focus,
body .sc-field select:focus {
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.16);
  outline: none;
}

body .wpforms-submit {
  min-height: 52px;
  width: 100%;
  background: var(--sc-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--sc-r-md);
  font-family: var(--sc-font-body);
  font-size: 1rem;
  font-weight: 700;
}
body .wpforms-submit:hover { background: var(--sc-accent-hover); }

@media (min-width: 768px) {
  body .wpforms-submit { width: auto; padding-left: 28px; padding-right: 28px; }
}

/* -------------------------------------------------------------------------
   11b. Comparison search panel
   The primary conversion surface. Mobile first: one field per row, 52px
   targets, full width action. Becomes a single inline row on desktop.
   ------------------------------------------------------------------------- */

body .sc-searchpanel {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-r-xl);
  box-shadow: var(--sc-depth-3);
  padding: var(--sc-5);
}

body .sc-searchform {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sc-4);
  margin: 0;
}

body .sc-searchform .sc-field { display: flex; flex-direction: column; min-width: 0; }

body .sc-searchsubmit {
  width: 100%;
  min-height: 52px;
  background: var(--sc-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--sc-r-md);
  font-family: var(--sc-font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--sc-dur) var(--sc-ease);
}
body .sc-searchsubmit:hover { background: var(--sc-accent-hover); }

@media (min-width: 640px) {
  body .sc-searchform { grid-template-columns: 1fr 1fr; }
  body .sc-searchform .sc-field--wide { grid-column: 1 / -1; }
  body .sc-searchform .sc-field--submit { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  body .sc-searchpanel { padding: var(--sc-6); }
  body .sc-searchform {
    grid-template-columns: 1.6fr 1fr 1fr 0.8fr auto;
    align-items: end;
    gap: var(--sc-3);
  }
  body .sc-searchform .sc-field--wide,
  body .sc-searchform .sc-field--submit { grid-column: auto; }
  body .sc-searchsubmit { width: auto; padding: 0 26px; white-space: nowrap; }
}

/* Honest empty state while no partner is connected. */
body .sc-searchnotice {
  margin-top: var(--sc-4);
  padding: var(--sc-4);
  background: var(--sc-accent-soft);
  border-radius: var(--sc-r-md);
}
body .sc-searchnotice__title {
  font-family: var(--sc-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sc-ink);
  margin: 0 0 4px;
}
body .sc-searchnotice__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-4);
  margin: var(--sc-3) 0 0;
}

body .sc-inline-link {
  color: var(--sc-accent);
  font-family: var(--sc-font-body);
  font-size: var(--sc-fs-small);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
body .sc-inline-link:hover { color: var(--sc-accent-hover); text-decoration: underline; }

/* -------------------------------------------------------------------------
   11c. Blog archive
   /blog/ is the posts page and renders through the theme, not Elementor, so
   it needs the tokens applied directly to the theme's own markup.
   ------------------------------------------------------------------------- */

body .sc-archive-head {
  padding: 0 0 var(--sc-8);
  margin-bottom: var(--sc-6);
  border-bottom: 1px solid var(--sc-border);
}

body .sc-archive-title {
  font-family: var(--sc-font-display);
  font-size: var(--sc-fs-h1);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--sc-ink);
  margin: 0 0 var(--sc-3);
}

body .sc-archive-intro {
  font-size: var(--sc-fs-lede);
  line-height: 1.6;
  color: var(--sc-text-2);
  max-width: 60ch;
  margin: 0;
}

/* The theme's article list, given the card treatment without new components. */
body .blog .ast-article-post,
body .archive .ast-article-post {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-depth-1);
  padding: var(--sc-5);
  margin-bottom: var(--sc-4);
  transition: box-shadow var(--sc-dur) var(--sc-ease), border-color var(--sc-dur) var(--sc-ease);
}

@media (hover: hover) {
  body .blog .ast-article-post:hover,
  body .archive .ast-article-post:hover {
    box-shadow: var(--sc-depth-2);
    border-color: var(--sc-border-strong);
  }
}

body .blog .entry-title,
body .archive .entry-title {
  font-family: var(--sc-font-display);
  font-size: var(--sc-fs-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--sc-2);
}
body .blog .entry-title a,
body .archive .entry-title a { color: var(--sc-ink); }
body .blog .entry-title a:hover,
body .archive .entry-title a:hover { color: var(--sc-accent); }

body .blog .entry-content p,
body .archive .entry-content p {
  font-size: var(--sc-fs-body);
  line-height: 1.65;
  color: var(--sc-text-2);
}

body .blog .post-thumb img,
body .archive .post-thumb img {
  border-radius: var(--sc-r-md);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

body .blog .ast-article-post .read-more a,
body .archive .ast-article-post .read-more a {
  color: var(--sc-accent);
  font-weight: 700;
  font-size: var(--sc-fs-body);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* -------------------------------------------------------------------------
   12. Accordion
   ------------------------------------------------------------------------- */

body .sc-accordion .elementor-accordion-item {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
  margin-bottom: var(--sc-3);
  overflow: hidden;
}
body .sc-accordion .elementor-tab-title {
  font-family: var(--sc-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 16px 18px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}
body .sc-accordion .elementor-tab-title.elementor-active { color: var(--sc-accent); }
body .sc-accordion .elementor-tab-content {
  font-size: var(--sc-fs-body);
  line-height: 1.65;
  color: var(--sc-text-2);
  padding: 0 18px 18px;
  border-top: 0;
}

/* --------------------------------------------------------------------------
   13. Images
   -------------------------------------------------------------------------- */

body img { max-width: 100%; height: auto; }
body .elementor-widget-image img { border-radius: inherit; }

/* --------------------------------------------------------------------------
   14. Motion
   The motion dial is low. Everything here degrades to static.
   -------------------------------------------------------------------------- */

@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;
  }
  .sc-actionbar { transition: none; }
}

/* --------------------------------------------------------------------------
   15. Utilities
   -------------------------------------------------------------------------- */

.sc-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sc-stack-sm { --row-gap: var(--sc-2); row-gap: var(--sc-2); }
.sc-stack-md { --row-gap: var(--sc-4); row-gap: var(--sc-4); }

/* Drawer scrim, so the page behind an open menu reads as inactive. */
body .xpro-elementor-horizontal-menu-overlay { background: rgba(14, 26, 43, 0.55); }

body .xpro-elementor-horizontal-menu-toggler:focus-visible,
body .xpro-elementor-horizontal-menu-close:focus-visible {
  outline: 3px solid rgba(0, 86, 179, 0.45);
  outline-offset: 2px;
}

/* A single gradient contract for every photographic section, so white text
   stays legible no matter how bright the underlying photo is. */
body .sc-hero > .elementor-background-overlay,
body .sc-section--cta > .elementor-background-overlay {
  background-image: linear-gradient(180deg, rgba(14,26,43,0.35) 0%, rgba(14,26,43,0.72) 100%);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   9b. Header layout at desktop widths

   The brand was wrapping to two lines and the seven item nav was spilling
   onto a second row between roughly 1025px and 1300px. Both are fixed by
   refusing to wrap and tightening the nav rhythm, rather than by shrinking
   the header.
   -------------------------------------------------------------------------- */

body .sc-brand,
body .sc-brand .elementor-heading-title,
body .sc-brand a { white-space: nowrap; }

@media (min-width: 1025px) {
  body .sc-header {
    --flex-wrap: nowrap;
    --align-items: center;
  }

  /* The nav takes the space it needs and stays on one line. */
  body .xpro-elementor-horizontal-navbar-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  body .xpro-elementor-horizontal-navbar-nav > li > a {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 0.9375rem;
  }
}

/* Between 1025 and 1300 the row is tightest, so trim a little further. */
@media (min-width: 1025px) and (max-width: 1300px) {
  body .xpro-elementor-horizontal-navbar-nav > li > a {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 0.9rem;
  }
  body .sc-header .sc-btn .xpro-elementor-button {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --------------------------------------------------------------------------
   9c. Header: logo image and nav distribution

   The header is three widgets in one flex row. By default each took an equal
   share, so the seven item nav was squeezed into a third of the width and
   wrapped onto three lines. The logo and the CTA are now sized to content and
   the nav takes the remaining space.
   -------------------------------------------------------------------------- */

body .sc-brand img {
  display: block;
  height: 26px;
  width: auto;
  max-width: none;
}

@media (min-width: 768px) {
  body .sc-brand img { height: 30px; }
}

@media (min-width: 1025px) {
  body .sc-header { --flex-wrap: nowrap; }

  /* Sized to content, so neither steals room from the nav. */
  body .sc-header > .sc-brand,
  body .sc-header > .sc-btn {
    --width: auto;
    flex: 0 0 auto;
  }

  /* The nav takes whatever is left and never wraps. */
  body .sc-header > .elementor-widget-xpro-horizontal-menu {
    --width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  body .xpro-elementor-horizontal-navbar-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: flex-end;
  }
}