/* ==========================================================================
   Spick & Span Cleaning — Design System
   Source of truth: docs/09-DESIGN-SYSTEM.md
   Concept: "camera pregătită" — space, order, straight edges, little visual noise.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette — one navy family, one accent blue, cool neutrals.
     Anchored on the brand navy already used by the footer (#001C38) and the
     azure from the header gradient (#00BCFF). Surface ratio target:
     70% paper, 20% mist, 8% navy, 2% azure. */
  --ss-navy-deep:   #001C38;  /* darkest bands, header, footer */
  --ss-navy:        #123A6B;  /* primary buttons, section headings */
  --ss-blue:        #0B5FA5;  /* prices, figures, emphasis — 6.6:1 on white */
  --ss-azure:       #00BCFF;  /* bright highlight; decorative or on navy only */
  --ss-mist:        #EDF2F8;  /* alternating section ground */
  --ss-ink:         #12181F;  /* body text, not pure black */
  --ss-ink-muted:   #55606E;  /* secondary text — 6.4:1 on white */
  --ss-line:        #DCE3EC;  /* rules, card borders, input borders */
  --ss-paper:       #FFFFFF;
  --ss-on-dark:     #C3D2E2;  /* secondary text on navy grounds — 7.8:1 */

  /* Typography */
  --ss-font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ss-font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spacing — 8px base unit */
  --ss-s1: 8px;   --ss-s2: 16px;  --ss-s3: 24px;  --ss-s4: 32px;
  --ss-s5: 48px;  --ss-s6: 64px;  --ss-s7: 96px;  --ss-s8: 128px;

  /* Layout */
  --ss-container: 1200px;
  --ss-col-text:  680px;  /* max 72 characters per line */
  --ss-col-narrow: 800px; /* forms, FAQ */

  --ss-section-y: var(--ss-s7);
  --ss-radius:    12px;
  --ss-radius-sm: 4px;

  /* The single permitted shadow, for one hero element per page */
  --ss-shadow-hero: 0 18px 48px rgba(10, 39, 36, .14);
}

@media (max-width: 767px) {
  :root { --ss-section-y: 56px; }
}

/* --------------------------------------------------------------------------
   2. Base typography
   -------------------------------------------------------------------------- */
.ss-scope,
body.ss-redesign {
  font-family: var(--ss-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ss-ink);
  background: var(--ss-paper);
  -webkit-font-smoothing: antialiased;
}

body.ss-redesign h1, body.ss-redesign h2, body.ss-redesign h3,
.ss-scope h1, .ss-scope h2, .ss-scope h3 {
  font-family: var(--ss-font-head);
  color: var(--ss-ink);
  margin: 0 0 var(--ss-s3);
  /* Sentence case, never all-caps, never a single coloured word */
  text-transform: none;
  letter-spacing: 0;
}

body.ss-redesign h1, .ss-scope h1 { font-size: 52px; line-height: 1.15; font-weight: 700; }
body.ss-redesign h2, .ss-scope h2 { font-size: 38px; line-height: 1.2;  font-weight: 700; }
body.ss-redesign h3, .ss-scope h3 { font-size: 26px; line-height: 1.3;  font-weight: 600; }
body.ss-redesign h4, .ss-scope h4 {
  font-family: var(--ss-font-body); font-size: 20px; line-height: 1.35; font-weight: 600;
}

@media (max-width: 767px) {
  body.ss-redesign, .ss-scope { font-size: 16px; line-height: 1.65; }
  body.ss-redesign h1, .ss-scope h1 { font-size: 34px; line-height: 1.2; }
  body.ss-redesign h2, .ss-scope h2 { font-size: 27px; line-height: 1.25; }
  body.ss-redesign h3, .ss-scope h3 { font-size: 21px; }
  body.ss-redesign h4, .ss-scope h4 { font-size: 18px; }
}

.ss-lead { font-size: 20px; line-height: 1.65; color: var(--ss-ink); }
.ss-note { font-size: 14px; line-height: 1.6; color: var(--ss-ink-muted); }
@media (max-width: 767px) { .ss-lead { font-size: 18px; line-height: 1.6; } }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.ss-section    { padding: var(--ss-section-y) 0; }
.ss-section--quiet { padding: var(--ss-s8) 0; }
.ss-section--mist  { background: var(--ss-mist); }
.ss-section--navy{ background: var(--ss-navy); color: #fff; }
.ss-section--dark  { background: var(--ss-navy-deep); color: #fff; }

.ss-section--navy h1, .ss-section--navy h2, .ss-section--navy h3,
.ss-section--dark h1,   .ss-section--dark h2,   .ss-section--dark h3 { color: #fff; }

.ss-container { width: 100%; max-width: var(--ss-container); margin: 0 auto; padding: 0 var(--ss-s3); }
.ss-col-text   { max-width: var(--ss-col-text);   margin-inline: auto; }
.ss-col-narrow { max-width: var(--ss-col-narrow); margin-inline: auto; }

@media (max-width: 767px) { .ss-container { padding: 0 20px; } }

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

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

/* --------------------------------------------------------------------------
   4. Buttons
   The primary navy fill is reserved: no decorative element may reuse it.
   -------------------------------------------------------------------------- */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ss-s1);
  min-height: 48px; padding: 16px 32px;
  font-family: var(--ss-font-body); font-size: 16px; font-weight: 600; line-height: 1;
  text-transform: none; text-decoration: none;
  border: 1.5px solid transparent; border-radius: var(--ss-radius-sm);
  cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ss-btn--primary   { background: var(--ss-navy); color: #fff; }
.ss-btn--primary:hover, .ss-btn--primary:focus { background: var(--ss-navy-deep); color: #fff; }

.ss-btn--secondary { background: transparent; color: var(--ss-navy); border-color: var(--ss-navy); }
.ss-btn--secondary:hover, .ss-btn--secondary:focus { background: var(--ss-mist); color: var(--ss-navy); }

.ss-btn--on-dark   { background: #fff; color: var(--ss-navy); }
.ss-btn--on-dark:hover, .ss-btn--on-dark:focus { background: var(--ss-mist); color: var(--ss-navy-deep); }

.ss-btn--ghost-light { background: transparent; color: #fff; border-color: #fff; }
.ss-btn--ghost-light:hover, .ss-btn--ghost-light:focus { background: #fff; color: var(--ss-navy); }

.ss-link { color: var(--ss-navy); text-decoration: none; font-weight: 500; }
.ss-link:hover, .ss-link:focus { text-decoration: underline; }

/* Focus is always visible */
.ss-btn:focus-visible, .ss-link:focus-visible,
.ss-field input:focus-visible, .ss-field select:focus-visible, .ss-field textarea:focus-visible,
.ss-accordion__trigger:focus-visible {
  outline: 2px solid var(--ss-blue); outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Cards — lines, not shadows
   -------------------------------------------------------------------------- */
.ss-card {
  background: var(--ss-paper);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: var(--ss-s4);
  transition: border-color .18s ease;
}
.ss-card:hover { border-color: var(--ss-navy); }        /* no lift, no shadow change */
.ss-card--hero { box-shadow: var(--ss-shadow-hero); }      /* one per page only */
.ss-card__media { aspect-ratio: 16 / 10; width: 100%; object-fit: cover;
                  border-radius: var(--ss-radius) var(--ss-radius) 0 0; display: block; }

/* Whole card clickable: the stretched overlay must be on the <a>, not on the
   heading that wraps it, or nothing is actually hit-testable. */
.ss-card--link { position: relative; }
.ss-card--link a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Nothing else in the card is interactive, so the overlay covers the whole
   surface. Raise an element above it only if it becomes a real link. */

/* --------------------------------------------------------------------------
   6. "Ce include" lists
   -------------------------------------------------------------------------- */
.ss-checks { list-style: none; margin: 0; padding: 0; }
.ss-checks li {
  position: relative; padding-left: 28px; margin-bottom: 12px;
}
.ss-checks li::before {
  content: "\f00c";                                    /* fa-check */
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 0; top: 2px;               /* aligned to top, not centred */
  color: var(--ss-blue); font-size: 13px;
}
@media (min-width: 768px) { .ss-checks--wide { columns: 2; column-gap: var(--ss-s5); } }

/* --------------------------------------------------------------------------
   7. Accordion (FAQ)
   Answers stay in the DOM when collapsed — hidden with CSS, never injected by JS,
   otherwise they are not indexed and FAQPage schema becomes non-compliant.
   -------------------------------------------------------------------------- */
.ss-accordion { max-width: var(--ss-col-narrow); margin-inline: auto; }
.ss-accordion__item { border-bottom: 1px solid var(--ss-line); }
.ss-accordion__trigger {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ss-s2);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--ss-s3) 0;
  font-family: var(--ss-font-body); font-size: 18px; font-weight: 600; color: var(--ss-ink);
}
.ss-accordion__sign { flex: 0 0 auto; width: 20px; height: 20px; position: relative; margin-top: 4px; }
.ss-accordion__sign::before, .ss-accordion__sign::after {
  content: ""; position: absolute; background: var(--ss-navy);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.ss-accordion__sign::before { width: 14px; height: 2px; }
.ss-accordion__sign::after  { width: 2px;  height: 14px; transition: opacity .18s ease; }
.ss-accordion__trigger[aria-expanded="true"] .ss-accordion__sign::after { opacity: 0; } /* + becomes − */

.ss-accordion__panel { padding: 0 0 var(--ss-s3); max-width: var(--ss-col-text); }
.ss-accordion__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.ss-field { margin-bottom: var(--ss-s3); }
.ss-field label {
  display: block; margin-bottom: var(--ss-s1);
  font-size: 14px; font-weight: 500; color: var(--ss-ink-muted);
}
.ss-field input, .ss-field select, .ss-field textarea {
  width: 100%; min-height: 48px; padding: 12px var(--ss-s2);
  font-family: var(--ss-font-body);
  font-size: 16px;                       /* below 16px iOS zooms on focus */
  color: var(--ss-ink); background: var(--ss-paper);
  border: 1px solid var(--ss-line); border-radius: var(--ss-radius-sm);
}
.ss-field textarea { min-height: 120px; padding-top: var(--ss-s2); resize: vertical; }
.ss-field input:focus, .ss-field select:focus, .ss-field textarea:focus {
  border-color: var(--ss-navy); outline: 2px solid var(--ss-navy); outline-offset: -2px;
}
.ss-field--error input, .ss-field--error select, .ss-field--error textarea { border-color: #C2412D; }
.ss-field__error { display: block; margin-top: 6px; font-size: 14px; color: #C2412D; }

/* --------------------------------------------------------------------------
   9. Price tables — horizontal rules only; stacked cards on mobile, never x-scroll
   -------------------------------------------------------------------------- */
.ss-table { width: 100%; border-collapse: collapse; border: 0; }
.ss-table th, .ss-table td { padding: var(--ss-s2) 0; border: 0; border-bottom: 1px solid var(--ss-line); text-align: left; }
.ss-table th { font-family: var(--ss-font-body); font-size: 14px; font-weight: 600; color: var(--ss-ink-muted); }
.ss-price { font-family: var(--ss-font-head); font-size: 30px; font-weight: 700; color: var(--ss-blue); }
.ss-table td.ss-table__price { text-align: right; font-family: var(--ss-font-head); font-weight: 700; color: var(--ss-blue); white-space: nowrap; }

@media (max-width: 767px) {
  .ss-price { font-size: 26px; }
  .ss-table, .ss-table tbody, .ss-table tr, .ss-table td { display: block; width: 100%; }
  .ss-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ss-table tr { border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
                 padding: var(--ss-s3); margin-bottom: var(--ss-s2); }
  .ss-table td { border-bottom: 0; padding: 4px 0; }
  .ss-table td[data-label]::before { content: attr(data-label) " "; font-size: 14px; color: var(--ss-ink-muted); }
  .ss-table td.ss-table__price { text-align: left; }
}

/* --------------------------------------------------------------------------
   10. Badges
   -------------------------------------------------------------------------- */
.ss-badge {
  display: inline-block; padding: 6px 12px; border-radius: var(--ss-radius-sm);
  font-size: 13px; font-weight: 600; line-height: 1.2;
}
.ss-badge--rec   { background: var(--ss-mist); color: var(--ss-navy); }
.ss-badge--price { background: transparent; color: var(--ss-blue); border: 1px solid var(--ss-blue); }

/* --------------------------------------------------------------------------
   11. Mobile sticky action bar
   -------------------------------------------------------------------------- */
.ss-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: none; gap: 1px; background: var(--ss-line);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%); transition: transform .25s ease;
}
.ss-actionbar.is-visible { transform: translateY(0); }
.ss-actionbar a {
  flex: 1 1 auto; min-height: 56px;
  display: flex; align-items: center; justify-content: center; gap: var(--ss-s1);
  font-family: var(--ss-font-body); font-size: 16px; font-weight: 600; text-decoration: none;
}
.ss-actionbar__call { background: var(--ss-navy); color: #fff; flex-basis: 60%; }
.ss-actionbar__wa   { background: var(--ss-azure);  color: var(--ss-navy-deep); flex-basis: 40%; }

@media (max-width: 767px) {
  .ss-actionbar { display: flex; }
  body.ss-has-actionbar { padding-bottom: 56px; }
}

/* --------------------------------------------------------------------------
   12. Breadcrumbs
   -------------------------------------------------------------------------- */
.ss-breadcrumbs { font-size: 14px; color: var(--ss-ink-muted); padding: var(--ss-s2) 0; }
.ss-breadcrumbs a { color: var(--ss-ink-muted); text-decoration: none; }
.ss-breadcrumbs a:hover { color: var(--ss-navy); text-decoration: underline; }
.ss-breadcrumbs [aria-current="page"] { color: var(--ss-ink); }

/* --------------------------------------------------------------------------
   13. Editorial helpers
   -------------------------------------------------------------------------- */
.ss-pull {
  margin: var(--ss-s4) 0; padding-left: var(--ss-s3);
  border-left: 3px solid var(--ss-blue);
  font-family: var(--ss-font-head); font-size: 22px; line-height: 1.45;
}
.ss-pills { display: flex; flex-wrap: wrap; gap: var(--ss-s1); list-style: none; margin: 0; padding: 0; }
.ss-pills li, .ss-pills a {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: var(--ss-mist); color: var(--ss-navy); font-size: 15px; text-decoration: none;
}
.ss-pills a:hover { background: var(--ss-navy); color: #fff; }

/* Build-time placeholders. Deliberately loud so nothing ships half-filled.
   Hidden for visitors unless ?ss_todo=1 — see functions.php. */
.ss-todo {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  background: #FFF3CD; color: #6B4E00; border: 1px dashed #B98900;
  font-family: var(--ss-font-body); font-size: 13px; font-weight: 600;
}
.ss-todo-block {
  display: block; padding: var(--ss-s3); margin: var(--ss-s3) 0;
  background: #FFF9E8; border: 1px dashed #B98900; border-radius: var(--ss-radius);
  color: #6B4E00; font-size: 15px;
}

/* --------------------------------------------------------------------------
   14. Motion — one orchestrated moment per page, at load
   -------------------------------------------------------------------------- */
.ss-fade-in { animation: ss-fade .4s ease both; }
@keyframes ss-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Elementor does not honour this by default */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Screen-reader only */
.ss-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   15. Price calculator — the hero element of /tarife/
   -------------------------------------------------------------------------- */
.ss-calc { max-width: 720px; margin-inline: auto; border-radius: 20px; }
.ss-calc__title { margin-bottom: var(--ss-s1); }
.ss-calc__group { border: 0; padding: 0; margin: var(--ss-s4) 0 0; }
.ss-calc__group legend {
  padding: 0; margin-bottom: var(--ss-s2);
  font-size: 14px; font-weight: 500; color: var(--ss-ink-muted);
}
.ss-calc__radios { display: grid; gap: var(--ss-s1); }
.ss-calc__radios--inline { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .ss-calc__radios--inline { grid-template-columns: 1fr; } }

.ss-calc__radio { display: flex; align-items: center; gap: var(--ss-s2); cursor: pointer; }
.ss-calc__radio input { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; accent-color: var(--ss-navy); }
.ss-calc__radio span {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--ss-s2);
  min-height: 48px; padding: 8px var(--ss-s2);
  border: 1px solid var(--ss-line); border-radius: var(--ss-radius-sm);
  font-size: 16px; transition: border-color .18s ease, background-color .18s ease;
}
.ss-calc__radio input:checked + span { border-color: var(--ss-navy); background: var(--ss-mist); }
.ss-calc__radio em { font-style: normal; font-weight: 600; color: var(--ss-blue); white-space: nowrap; }

.ss-calc__area { display: grid; grid-template-columns: 1fr 140px; gap: var(--ss-s3); align-items: end; }
@media (max-width: 600px) { .ss-calc__area { grid-template-columns: 1fr; } }
.ss-calc__area input[type="range"] { width: 100%; accent-color: var(--ss-navy); min-height: 48px; }
.ss-calc__num { margin-bottom: 0; }

.ss-calc__result {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--ss-s2); flex-wrap: wrap;
  margin-top: var(--ss-s4); padding-top: var(--ss-s3); border-top: 1px solid var(--ss-line);
}
.ss-calc__disclaimer { margin-top: var(--ss-s1); }
.ss-calc__actions { display: flex; flex-wrap: wrap; gap: var(--ss-s2); margin-top: var(--ss-s3); }
.ss-calc__actions .ss-btn { flex: 1 1 220px; }

/* --------------------------------------------------------------------------
   16. Zones and CTA band
   -------------------------------------------------------------------------- */
.ss-zones h3 { font-size: 20px; margin: var(--ss-s3) 0 var(--ss-s2); }
.ss-zones h3:first-child { margin-top: 0; }
.ss-cta__actions { display: flex; flex-wrap: wrap; gap: var(--ss-s2); justify-content: center; margin-top: var(--ss-s4); }
.ss-cta .ss-lead { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Figures — real photo or proportioned placeholder, same footprint
   -------------------------------------------------------------------------- */
.ss-figure { margin: 0; border-radius: var(--ss-radius); overflow: hidden; }
.ss-figure__img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ss-ratio, 16 / 10); }
.ss-figure--empty {
  aspect-ratio: var(--ss-ratio, 16 / 10);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--ss-s3);
  background: var(--ss-mist); border: 1px dashed var(--ss-line);
  color: var(--ss-ink-muted); font-size: 14px;
}

/* --------------------------------------------------------------------------
   18. Hero — the one bold moment on the homepage
   -------------------------------------------------------------------------- */
.ss-hero__grid { display: grid; grid-template-columns: 55fr 45fr; gap: var(--ss-s6); align-items: center; }
.ss-hero__copy h1 { margin-bottom: var(--ss-s3); }
.ss-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ss-s2); margin: var(--ss-s4) 0 var(--ss-s2); }
.ss-hero__media .ss-figure { border-radius: 16px; box-shadow: var(--ss-shadow-hero); }
@media (max-width: 880px) {
  .ss-hero__grid { grid-template-columns: 1fr; gap: var(--ss-s4); }
  .ss-hero__media { order: -1; }
}

/* --------------------------------------------------------------------------
   19. Trust bar
   -------------------------------------------------------------------------- */
.ss-trustbar { padding: var(--ss-s3) 0; }
.ss-trustbar__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ss-s3);
  list-style: none; margin: 0; padding: 0; text-align: center;
}
.ss-trustbar__list li { display: flex; flex-direction: column; gap: 2px; color: #fff; }
.ss-trustbar__list strong { font-size: 18px; font-weight: 600; }
.ss-trustbar__list span { font-size: 14px; color: var(--ss-on-dark); }
@media (max-width: 767px) { .ss-trustbar__list { grid-template-columns: repeat(2, 1fr); text-align: left; } }

/* --------------------------------------------------------------------------
   20. Service cards
   -------------------------------------------------------------------------- */
.ss-servicecard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ss-servicecard .ss-figure { border-radius: var(--ss-radius) var(--ss-radius) 0 0; }
.ss-servicecard__body { padding: var(--ss-s4); display: flex; flex-direction: column; gap: var(--ss-s2); flex: 1 1 auto; }
.ss-servicecard__body h3 { margin: 0; }
.ss-servicecard__body p { margin: 0; }
.ss-servicecard__link { color: inherit; text-decoration: none; }
.ss-servicecard__cta { margin-top: auto !important; }
.ss-badge--price { align-self: flex-start; }

/* --------------------------------------------------------------------------
   21. Steps — connected on desktop, vertical rail on mobile
   -------------------------------------------------------------------------- */
.ss-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--ss-step-cols, 4), 1fr); gap: var(--ss-s4);
  counter-reset: ss-step;
}
.ss-steps:has(> :nth-child(5)) { --ss-step-cols: 5; }
.ss-step { position: relative; padding-top: var(--ss-s5); }
.ss-step__num {
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ss-navy); color: #fff; font-weight: 600; font-size: 16px;
}
/* connecting rule between circles */
.ss-step::after {
  content: ""; position: absolute; top: 20px; left: 48px; right: calc(var(--ss-s4) * -1);
  height: 1px; background: var(--ss-line);
}
.ss-step:last-child::after { display: none; }
.ss-step__title { font-size: 20px; font-family: var(--ss-font-body); font-weight: 600; margin-bottom: var(--ss-s1); }
.ss-step p { margin: 0; font-size: 16px; }

@media (max-width: 880px) {
  .ss-steps { grid-template-columns: 1fr; gap: var(--ss-s3); }
  .ss-step { padding: 0 0 var(--ss-s3) 60px; }
  .ss-step::after { top: 44px; bottom: 0; left: 20px; right: auto; width: 1px; height: auto; }
  .ss-step:last-child { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   22. Why us
   -------------------------------------------------------------------------- */
.ss-why { display: grid; grid-template-columns: 38fr 62fr; gap: var(--ss-s6); align-items: start; }
.ss-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ss-s3); }
.ss-why__list li { padding-left: var(--ss-s3); border-left: 3px solid var(--ss-mist); }
.ss-why__list strong { color: var(--ss-navy); }
@media (max-width: 880px) {
  .ss-why { grid-template-columns: 1fr; gap: var(--ss-s4); }
  .ss-why__media { max-width: 320px; }
}

/* --------------------------------------------------------------------------
   23. Specificity layer
   Elementor emits its kit styles as `.elementor-kit-26 h2 { … }` (0,1,1) and the
   parent theme styles bare `button`. Both land after this file, so the component
   rules below are re-stated with a `body.ss-redesign` prefix (0,2,1+) to win
   without resorting to !important.
   -------------------------------------------------------------------------- */

/* Buttons — the primary fill must always carry white text */
body.ss-redesign .ss-btn--primary,
body.ss-redesign a.ss-btn--primary { background: var(--ss-navy); color: #fff; border-color: var(--ss-navy); }
body.ss-redesign .ss-btn--primary:hover,
body.ss-redesign a.ss-btn--primary:hover { background: var(--ss-navy-deep); color: #fff; }

body.ss-redesign .ss-btn--secondary,
body.ss-redesign a.ss-btn--secondary { background: transparent; color: var(--ss-navy); border-color: var(--ss-navy); }
body.ss-redesign .ss-btn--secondary:hover,
body.ss-redesign a.ss-btn--secondary:hover { background: var(--ss-mist); color: var(--ss-navy); }

body.ss-redesign .ss-btn--on-dark,
body.ss-redesign a.ss-btn--on-dark { background: #fff; color: var(--ss-navy); border-color: #fff; }
body.ss-redesign .ss-btn--on-dark:hover,
body.ss-redesign a.ss-btn--on-dark:hover { background: var(--ss-mist); color: var(--ss-navy-deep); }

body.ss-redesign .ss-btn--ghost-light,
body.ss-redesign a.ss-btn--ghost-light { background: transparent; color: #fff; border-color: #fff; }
body.ss-redesign .ss-btn--ghost-light:hover,
body.ss-redesign a.ss-btn--ghost-light:hover { background: #fff; color: var(--ss-navy); }

/* Headings and body copy on dark or navy grounds */
body.ss-redesign .ss-section--dark h1,   body.ss-redesign .ss-section--dark h2,
body.ss-redesign .ss-section--dark h3,   body.ss-redesign .ss-section--dark h4,
body.ss-redesign .ss-section--navy h1, body.ss-redesign .ss-section--navy h2,
body.ss-redesign .ss-section--navy h3, body.ss-redesign .ss-section--navy h4 { color: #fff; }
body.ss-redesign .ss-section--dark p,
body.ss-redesign .ss-section--navy p { color: var(--ss-on-dark); }
body.ss-redesign .ss-trustbar__list strong { color: #fff; }

/* Accordion trigger is a <button>; strip every inherited button skin */
body.ss-redesign .ss-accordion__trigger {
  background: none; background-color: transparent; color: var(--ss-ink);
  border: 0; border-radius: 0; box-shadow: none;
  padding: var(--ss-s3) 0; margin: 0; min-height: 0;
  font-family: var(--ss-font-body); font-size: 18px; font-weight: 600; line-height: 1.4;
  text-transform: none; letter-spacing: 0; width: 100%;
}
body.ss-redesign .ss-accordion__trigger:hover {
  background: none; background-color: transparent; color: var(--ss-navy);
}

/* Pills and badges must not inherit link colours from the theme */
body.ss-redesign .ss-pills li { color: var(--ss-navy); }
body.ss-redesign .ss-badge--price { color: var(--ss-blue); }
body.ss-redesign .ss-table td.ss-table__price { color: var(--ss-blue); }
body.ss-redesign .ss-servicecard__link { color: var(--ss-ink); }
body.ss-redesign .ss-servicecard:hover .ss-servicecard__link { color: var(--ss-navy); }

/* Calculator radio labels sit inside a card, not a form skin */
body.ss-redesign .ss-calc__radio span { color: var(--ss-ink); }
body.ss-redesign .ss-calc__radio em { color: var(--ss-blue); }

/* --------------------------------------------------------------------------
   24. Comparison cards, exclusions, factors
   -------------------------------------------------------------------------- */
.ss-compare__card { display: flex; flex-direction: column; gap: var(--ss-s2); }
.ss-compare__card h3 { margin: 0; }
.ss-compare__card .ss-price { margin: 0; }
.ss-compare__card .ss-badge { align-self: flex-start; }
.ss-compare__card .ss-checks { margin-top: var(--ss-s1); }
.ss-compare__card > p:last-child { margin-top: auto; }
.ss-fit {
  background: var(--ss-mist); border-radius: var(--ss-radius-sm);
  padding: var(--ss-s2); font-size: 15px; color: var(--ss-navy);
}

.ss-crosses { list-style: none; margin: 0; padding: 0; }
.ss-crosses li { position: relative; padding-left: 28px; margin-bottom: 12px; }
.ss-crosses li::before { content: "\f00d";                            /* fa-times */
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 0; top: 2px; color: #C2412D; font-size: 13px; }

.ss-exclusion {
  margin-top: var(--ss-s4); padding: var(--ss-s3);
  border: 1px solid var(--ss-line); border-left: 3px solid var(--ss-blue); border-radius: var(--ss-radius);
  background: var(--ss-mist);
}
.ss-exclusion h3 { margin-bottom: var(--ss-s1); font-size: 20px; font-family: var(--ss-font-body); }
.ss-exclusion p { margin: 0; }

.ss-included .ss-card h3 { margin-bottom: var(--ss-s2); font-size: 20px; font-family: var(--ss-font-body); }

/* --------------------------------------------------------------------------
   25. Rate groups
   -------------------------------------------------------------------------- */
/* Anchor nav above the rate groups. Several ids are redirect targets, so the
   scroll-margin below keeps a linked group clear of the sticky header. */
.ss-ratenav { margin-bottom: var(--ss-s5); }
.ss-ratenav a { font-weight: 500; }

.ss-rategroup { margin-bottom: var(--ss-s6); scroll-margin-top: 96px; }
.ss-rategroup h3 { margin-bottom: var(--ss-s2); }

/* --------------------------------------------------------------------------
   26. Contact channels
   -------------------------------------------------------------------------- */
.ss-channel { display: flex; flex-direction: column; gap: var(--ss-s2); text-align: center; align-items: center; }
.ss-channel--primary { border-color: var(--ss-navy); border-width: 2px; }
.ss-channel__icon { font-size: 32px; line-height: 1; }
.ss-channel h3 { font-size: 20px; font-family: var(--ss-font-body); margin: 0; }
.ss-channel__value {
  font-family: var(--ss-font-head); font-size: 24px; font-weight: 700;
  color: var(--ss-navy); text-decoration: none;
}
.ss-channel__value--sm { font-size: 17px; word-break: break-all; }
.ss-channel__value:hover { text-decoration: underline; }
.ss-channel .ss-btn { margin-top: auto; width: 100%; }
.ss-channel p { margin: 0; }

/* --------------------------------------------------------------------------
   27. Company card / official data
   -------------------------------------------------------------------------- */
.ss-companycard h4 { margin: var(--ss-s3) 0 var(--ss-s1); }
.ss-companycard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ss-s1); }
.ss-companycard__list li { display: flex; gap: var(--ss-s1); align-items: flex-start; }
.ss-hours td { padding: 6px 0; }

.ss-official dl { margin: 0; display: grid; grid-template-columns: minmax(160px, 34%) 1fr; gap: 10px var(--ss-s3); font-size: 15px; }
.ss-official dt { font-weight: 600; color: var(--ss-ink-muted); }
.ss-official dd { margin: 0; }
@media (max-width: 600px) { .ss-official dl { grid-template-columns: 1fr; gap: 2px; } .ss-official dd { margin-bottom: var(--ss-s2); } }

/* --------------------------------------------------------------------------
   28. FAQ page
   -------------------------------------------------------------------------- */
.ss-faqnav { position: sticky; top: 0; z-index: 5; background: var(--ss-paper);
             padding: var(--ss-s2) 0; margin-bottom: var(--ss-s4); border-bottom: 1px solid var(--ss-line); }
.ss-faqcat { margin-bottom: var(--ss-s6); scroll-margin-top: 88px; }
.ss-faqcat__item { padding: var(--ss-s3) 0; border-bottom: 1px solid var(--ss-line); }
.ss-faqcat__item h3 { font-family: var(--ss-font-body); font-size: 18px; font-weight: 600; margin-bottom: var(--ss-s1); }
.ss-faqcat__item p { margin: 0; }

/* --------------------------------------------------------------------------
   29. Contact form (Contact Form 7)
   -------------------------------------------------------------------------- */
.ss-formgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--ss-s3); }
@media (max-width: 600px) { .ss-formgrid { grid-template-columns: 1fr; } }
.ss-optional { font-weight: 400; color: var(--ss-ink-muted); }
.ss-consent { display: flex; gap: var(--ss-s1); align-items: flex-start; font-size: 15px; margin: var(--ss-s3) 0; }
.ss-consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ss-navy); }
.wpcf7 .ss-field input, .wpcf7 .ss-field select, .wpcf7 .ss-field textarea { width: 100%; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 14px; color: #C2412D; }
.wpcf7 form .wpcf7-response-output {
  margin: var(--ss-s3) 0 0; padding: var(--ss-s2) var(--ss-s3);
  border-width: 1px; border-radius: var(--ss-radius-sm); font-size: 15px;
}
.wpcf7-spinner { display: block; margin: var(--ss-s2) auto 0; }

/* Contact layout: the form gets more room than the details beside it */
.ss-contactgrid { display: grid; grid-template-columns: 60fr 40fr; gap: var(--ss-s5); align-items: start; }
@media (max-width: 880px) { .ss-contactgrid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   30. Footer legal bar
   -------------------------------------------------------------------------- */
.ss-legalbar {
  background: var(--ss-navy-deep); color: var(--ss-on-dark);
  padding: var(--ss-s3) 0; font-size: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ss-legalbar p { margin: 0 0 6px; }
.ss-legalbar__links { display: flex; flex-wrap: wrap; gap: var(--ss-s1) var(--ss-s3); }
.ss-legalbar a { color: var(--ss-on-dark); text-decoration: none; }
.ss-legalbar a:hover { color: #fff; text-decoration: underline; }

/* Phone item in the main menu reads as a button, not a link */
.ss-menu-cta > a {
  /* Azure is the brand's one bright note; on the navy header it is the only
     element that needs to shout, so it gets it. Navy text on azure is 7.9:1. */
  background: var(--ss-azure); color: var(--ss-navy-deep) !important;
  border-radius: var(--ss-radius-sm); padding: 10px 18px !important;
  font-weight: 600;
}
.ss-menu-cta > a:hover { background: #35CCFF; color: var(--ss-navy-deep) !important; }

/* --------------------------------------------------------------------------
   31. Consent checkbox touch target
   The box stays visually 20px, but a pseudo-element expands the hit area to
   44×44 so it meets the minimum touch target without changing the design.
   -------------------------------------------------------------------------- */
.ss-consent .wpcf7-list-item-label,
.ss-consent { position: relative; }
.ss-consent input[type="checkbox"] {
  position: relative;
  width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: 0 0 auto;
}
.ss-consent input[type="checkbox"]::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
/* CF7 wraps the control in its own label; make that row the real target */
.ss-consent .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.ss-consent label { display: flex; align-items: flex-start; gap: var(--ss-s1); min-height: 44px; cursor: pointer; }

/* --------------------------------------------------------------------------
   32. Icons
   -------------------------------------------------------------------------- */
.ss-i { font-style: normal; line-height: 1; }
.ss-btn .ss-i { font-size: .95em; }
.ss-channel__icon .ss-i { font-size: 30px; color: var(--ss-navy); }
.ss-channel--primary .ss-channel__icon .ss-i { color: var(--ss-blue); }
.ss-companycard__list .ss-i { width: 18px; text-align: center; color: var(--ss-ink-muted); margin-top: 5px; }
.ss-rategroup h3 .ss-i { color: var(--ss-blue); margin-right: 8px; }
.ss-actionbar .ss-i { font-size: 17px; }
.ss-menu-cta .ss-i { margin-right: 7px; }
.ss-channel__value .ss-i,
.ss-companycard__list li .ss-i { margin-right: 2px; }
/* Legal bar sits on the same navy as the footer, so a hairline keeps the two
   readable as separate zones. */
.ss-legalbar { border-top: 1px solid rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   33. Cookie consent modal
   The plugin ships a green toggle and save button. Bring them onto the palette
   so the consent UI does not read as a different product.
   -------------------------------------------------------------------------- */
.cli-switch input:checked + .cli-slider,
.cli-switch input:checked + .cli-slider:before { background-color: var(--ss-navy) !important; }
.cli-slider { background-color: var(--ss-line) !important; }
.cli-switch input:checked + .cli-slider:before { background-color: #fff !important; }

.wt-cli-privacy-btn,
a.wt-cli-privacy-btn.cli_setting_save_button,
.cli_setting_save_button {
  background-color: var(--ss-navy) !important;
  border-color: var(--ss-navy) !important;
  color: #fff !important;
}
.wt-cli-privacy-btn:hover,
a.wt-cli-privacy-btn.cli_setting_save_button:hover { background-color: var(--ss-navy-deep) !important; }

#cookie-law-info-bar { border-top: 1px solid var(--ss-line) !important; }

/* --------------------------------------------------------------------------
   34. Legal pages
   Long-form policy copy inherited from the old site: no headings of its own on
   the cookie page, dense paragraphs. Keep it inside the reading column and
   give it room to breathe.
   -------------------------------------------------------------------------- */
.ss-section .ss-col-text > h2 { margin-top: var(--ss-s6); }
.ss-section .ss-col-text > h2:first-child { margin-top: 0; }
.ss-section .ss-col-text > h3 { margin-top: var(--ss-s5); }
.ss-section .ss-col-text > p { margin: 0 0 var(--ss-s3); }
.ss-section .ss-col-text > ul,
.ss-section .ss-col-text > ol { margin: 0 0 var(--ss-s3); padding-left: var(--ss-s3); }
.ss-section .ss-col-text > ul li,
.ss-section .ss-col-text > ol li { margin-bottom: var(--ss-s1); }
.ss-section .ss-col-text a { color: var(--ss-blue); }
.ss-section .ss-col-text a:hover { text-decoration: underline; }
.ss-section .ss-col-text strong { font-weight: 600; color: var(--ss-ink); }
/* Legal text often arrives with hard-coded inline colours and faces */
.ss-section .ss-col-text [style*="font-family"] { font-family: var(--ss-font-body) !important; }
.ss-section .ss-col-text [style*="color"] { color: inherit !important; }

/* --------------------------------------------------------------------------
   35. Header and main menu
   The header used to be an Elementor Pro Theme Builder template, which carried
   its own background and menu colours. Pro is gone and the parent theme renders
   the header now, so the navy ground and the hover treatment live here instead.
   Selectors target the parent theme's markup (.wpbf-*).
   -------------------------------------------------------------------------- */
body.ss-redesign .wpbf-page-header,
body.ss-redesign .wpbf-navigation,
body.ss-redesign .wpbf-mobile-menu-hamburger {
  background: var(--ss-navy-deep);
}

/* The logo is a white wordmark, so it needs the dark ground to be legible. */
body.ss-redesign .wpbf-logo img,
body.ss-redesign .wpbf-mobile-logo img { max-height: 69px; width: auto; }

/* The parent theme lays the header out as a table: a fixed 1/4 logo cell and a
   3/4 menu cell. With seven items plus the phone button that came to 871px in an
   870px cell, so the button wrapped onto a second row. Flex with an auto-width
   logo lets the menu take exactly the space it needs, and nowrap makes any
   future overflow visible rather than silently stacking. */
body.ss-redesign .wpbf-nav-wrapper > .wpbf-grid {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--ss-s3);
}
body.ss-redesign .wpbf-nav-wrapper .wpbf-logo-container {
  width: auto;
  flex: 0 0 auto;
}
body.ss-redesign .wpbf-nav-wrapper .wpbf-menu-container {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
body.ss-redesign .wpbf-nav-wrapper .wpbf-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
/* Items keep their natural width and their labels never break: without this the
   flex row shrinks them instead of the container and "Despre noi" wraps onto
   two lines inside its own button. */
body.ss-redesign .wpbf-nav-wrapper .wpbf-menu > li { flex: 0 0 auto; }
body.ss-redesign .wpbf-nav-wrapper .wpbf-menu > li > a { white-space: nowrap; }

/* Below ~1300px the row is tight; trim the gaps before anything can wrap. */
@media (min-width: 1025px) and (max-width: 1320px) {
  body.ss-redesign .wpbf-menu > li > a { padding-left: 11px; padding-right: 11px; font-size: 15px; }
  body.ss-redesign .wpbf-logo img, body.ss-redesign .wpbf-mobile-logo img { max-height: 56px; }
}

/* ---- desktop items ---- */
body.ss-redesign .wpbf-menu > li > a {
  position: relative;
  color: var(--ss-on-dark);
  font-weight: 500;
  border-radius: var(--ss-radius-sm);
  transition: color .18s ease, background-color .18s ease;
}

/* A hairline that grows from the centre on hover, and stays for the current page */
body.ss-redesign .wpbf-menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: var(--ss-azure);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .22s cubic-bezier(.4, 0, .2, 1);
}
body.ss-redesign .wpbf-menu > li > a:hover::after,
body.ss-redesign .wpbf-menu > li > a:focus-visible::after,
body.ss-redesign .wpbf-menu > li.current-menu-item > a::after,
body.ss-redesign .wpbf-menu > li.current-menu-ancestor > a::after {
  width: calc(100% - 28px);
}

body.ss-redesign .wpbf-menu > li > a:hover,
body.ss-redesign .wpbf-menu > li > a:focus-visible {
  background-color: rgba(255, 255, 255, .07);
  color: #fff;
}
body.ss-redesign .wpbf-menu > li.current-menu-item > a,
body.ss-redesign .wpbf-menu > li.current-menu-ancestor > a { color: #fff; }

/* The caret is part of the link, so it must not carry its own background or
   colour — it inherits, and that is the whole fix. */
body.ss-redesign .wpbf-menu .wpbff-arrow-down,
body.ss-redesign .wpbf-mobile-menu .wpbff-arrow-down {
  background: none;
  color: inherit;
  font-size: .8em;
}

/* The phone button is not a nav item and keeps its own treatment */
body.ss-redesign .ss-menu-cta > a::after { display: none; }
body.ss-redesign .ss-menu-cta > a { color: var(--ss-navy-deep); }
body.ss-redesign .ss-menu-cta > a:hover { background: #35CCFF; color: var(--ss-navy-deep); }

/* ---- desktop submenu ---- */
body.ss-redesign .wpbf-menu .sub-menu {
  background: var(--ss-navy-deep);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 28, 56, .34);
  padding: 6px 0;
}
body.ss-redesign .wpbf-menu .sub-menu > li > a {
  color: var(--ss-on-dark);
  font-size: 15px;
  border-radius: 0;
  transition: background-color .16s ease, color .16s ease, padding-left .16s ease;
}
body.ss-redesign .wpbf-menu .sub-menu > li > a:hover,
body.ss-redesign .wpbf-menu .sub-menu > li > a:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding-left: 28px;
}
body.ss-redesign .wpbf-menu .sub-menu > li > a::after { display: none; }

/* ---- mobile ---- */
/* The toggle is an icon, not a button: no filled box behind it. */
body.ss-redesign .wpbf-mobile-menu-toggle,
body.ss-redesign .wpbf-mobile-menu-toggle:hover,
body.ss-redesign .wpbf-mobile-menu-toggle:focus {
  background: none;
  border: 0;
  box-shadow: none;
  color: #fff;
  font-size: 26px;
  padding: 6px;
}
body.ss-redesign .wpbf-mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--ss-azure);
  outline-offset: 2px;
}

/* The drawer keeps a light ground — navy text on white is the more readable of
   the two at that size — so only the submenu toggle's filled box is removed. */
body.ss-redesign .wpbf-mobile-menu .wpbf-submenu-toggle,
body.ss-redesign .wpbf-mobile-menu .wpbf-submenu-toggle:hover,
body.ss-redesign .wpbf-mobile-menu .wpbf-submenu-toggle:focus {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ss-navy);
}
body.ss-redesign .wpbf-mobile-menu > li > a { color: var(--ss-navy); }
body.ss-redesign .wpbf-mobile-menu .ss-menu-cta > a { color: var(--ss-navy-deep); }

/* --------------------------------------------------------------------------
   36. Mobile action bar corrections
   The kit's global link colour (navy) was winning over the bar's own colours,
   so "Sună acum" rendered navy-on-navy and was invisible. Restate both with the
   body prefix, as with the buttons in §23.
   -------------------------------------------------------------------------- */
body.ss-redesign .ss-actionbar__call,
body.ss-redesign a.ss-actionbar__call { background: var(--ss-navy); color: #fff; }
body.ss-redesign .ss-actionbar__call:hover,
body.ss-redesign a.ss-actionbar__call:hover { background: var(--ss-navy-deep); color: #fff; }

body.ss-redesign .ss-actionbar__wa,
body.ss-redesign a.ss-actionbar__wa { background: var(--ss-azure); color: var(--ss-navy-deep); }
body.ss-redesign .ss-actionbar__wa:hover,
body.ss-redesign a.ss-actionbar__wa:hover { background: #35CCFF; color: var(--ss-navy-deep); }

/* The back-to-top control is fixed bottom-right at z-index 9999 and was landing
   on the WhatsApp button. Lift it clear of the bar while the bar is on screen. */
@media (max-width: 767px) {
  #to_top_scrollup { bottom: 76px !important; }
}

/* Shared-preview flag; only rendered while the site is served over a tunnel. */
.ss-previewflag {
  position: fixed; left: 12px; bottom: 12px; z-index: 9998;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(0, 28, 56, .92); color: #C3D2E2;
  font-family: var(--ss-font-body); font-size: 12px; font-weight: 500;
  pointer-events: none; box-shadow: 0 6px 20px rgba(0, 28, 56, .3);
}
@media (max-width: 767px) { .ss-previewflag { bottom: 128px; font-size: 11px; } }

/* --------------------------------------------------------------------------
   Footer — replaces the Elementor Pro Theme Builder template (inc/site-chrome.php)
   -------------------------------------------------------------------------- */
.ss-footer {
  background: var(--ss-navy-deep);
  color: var(--ss-on-dark);
  font-size: 15px;
  line-height: 1.7;
}
.ss-footer__inner {
  max-width: var(--ss-container);
  margin: 0 auto;
  padding: var(--ss-s6) var(--ss-s3) var(--ss-s5);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 1.4fr;
  gap: var(--ss-s5) var(--ss-s4);
}
.ss-footer__logo { width: 200px; height: auto; }
.ss-footer__wordmark {
  font-family: var(--ss-font-head);
  font-size: 22px; font-weight: 700; color: #fff;
}
.ss-footer__social {
  list-style: none; margin: var(--ss-s3) 0 0; padding: 0;
  display: flex; gap: var(--ss-s2);
}
.ss-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--ss-on-dark);
  transition: background .15s ease, color .15s ease;
}
.ss-footer__social a:hover,
.ss-footer__social a:focus-visible { background: var(--ss-azure); color: var(--ss-navy-deep); }

/* Scoped with body.ss-redesign to match the specificity of the global heading
   rule at the top of this file (body.ss-redesign h2, 0-2-1). Without the same
   weight, that rule wins and the headings render at 38px in near-black on the
   navy ground — about 1.1:1, effectively invisible. */
body.ss-redesign .ss-footer__head {
  font-family: var(--ss-font-body);
  font-size: 13px; line-height: 1.4; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: #fff; margin: 0 0 var(--ss-s2);
}
.ss-footer__list { list-style: none; margin: 0; padding: 0; }
.ss-footer__list li { margin-bottom: 7px; display: flex; gap: 9px; align-items: baseline; }
.ss-footer__list .ss-i { color: var(--ss-azure); width: 15px; flex: none; font-size: 13px; }
/* Same reason: the global link colour is --ss-navy, which on this navy ground
   is about 1.4:1. */
body.ss-redesign .ss-footer__list a { color: var(--ss-on-dark); text-decoration: none; }
body.ss-redesign .ss-footer__list a:hover,
body.ss-redesign .ss-footer__list a:focus-visible { color: #fff; text-decoration: underline; }
body.ss-redesign .ss-footer__social a { color: var(--ss-on-dark); }
body.ss-redesign .ss-footer__social a:hover,
body.ss-redesign .ss-footer__social a:focus-visible { color: var(--ss-navy-deep); }

/* The legal bar sits on the same navy, so a hairline keeps the two apart. */
.ss-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ss-footer__legal p {
  max-width: var(--ss-container);
  margin: 0 auto;
  padding: var(--ss-s3);
  font-size: 13.5px;
  color: var(--ss-on-dark);
  text-align: center;
}

@media (max-width: 900px) {
  .ss-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--ss-s4) var(--ss-s3); }
}
@media (max-width: 560px) {
  .ss-footer__inner { grid-template-columns: 1fr; padding: var(--ss-s5) var(--ss-s3) var(--ss-s4); }
}