/* ==========================================================================
   Sewika Packers and Movers — site theme
   --------------------------------------------------------------------------
   Loads AFTER bootstrap.min.css and style.css, so anything here wins.

   How this file is organised
     1.  Design tokens          brand colours, spacing, radii, shadows
     2.  Bootstrap bridge       maps our tokens onto Bootstrap's own variables
     3.  Base + typography
     4.  Section rhythm
     5.  Buttons
     6.  Top bar
     7.  Header + navigation
     8.  Hero
     9.  Quote card
     10. Process spine
     11. Feature + service cards
     12. Trust strip
     13. Stat counters
     14. Testimonials
     15. FAQ
     16. CTA band
     17. Footer
     18. Floating actions
     19. Motion

   Conventions
     - Every class we add is prefixed  .sw-   so it can never collide with
       Bootstrap or with the old style.css.
     - Reach for a Bootstrap utility in the markup first. Only style here when
       Bootstrap genuinely cannot express it.
     - Colours come from the tokens in section 1. Do not hard-code a hex below
       that point.
   ========================================================================== */


/* 1. Design tokens =========================================================
   Navy and orange are sampled directly from the logo artwork, so the site
   and the mark are the same colour.
   ------------------------------------------------------------------------ */
:root {
  /* brand */
  --sw-navy:        #001845;
  --sw-navy-800:    #0a2559;
  --sw-navy-700:    #143166;
  --sw-navy-100:    #dbe3f2;
  --sw-navy-050:    #eef2fa;

  --sw-orange:      #f0600c;
  --sw-orange-700:  #c94d07;
  --sw-orange-100:  #ffdcc7;
  --sw-orange-050:  #fff3ec;

  /* neutrals */
  --sw-ink:         #10182b;
  --sw-body:        #414b60;
  --sw-muted:       #6b7488;
  --sw-line:        #e3e8f0;
  --sw-surface:     #f7f9fc;
  --sw-white:       #ffffff;

  /* type */
  --sw-font-head:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sw-font-body:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* radii */
  --sw-radius-sm:   .5rem;
  --sw-radius:      .875rem;
  --sw-radius-lg:   1.25rem;
  --sw-radius-pill: 50rem;

  /* elevation */
  --sw-shadow-sm:   0 1px 2px rgba(16, 24, 43, .06), 0 2px 8px rgba(16, 24, 43, .04);
  --sw-shadow:      0 4px 12px rgba(16, 24, 43, .08), 0 12px 32px rgba(16, 24, 43, .06);
  --sw-shadow-lg:   0 12px 28px rgba(16, 24, 43, .12), 0 32px 64px rgba(16, 24, 43, .10);

  /* fixed chrome heights, referenced by the sticky header and scroll offset */
  --sw-header-h:    76px;
}


/* 2. Bootstrap bridge ======================================================
   Point Bootstrap's own variables at our tokens. After this, the stock
   utilities — .text-primary, .bg-primary, .btn-primary, .border-primary —
   all render in brand colours, so the markup can stay plain Bootstrap.
   ------------------------------------------------------------------------ */
:root {
  --bs-primary:            #001845;
  --bs-primary-rgb:        0, 24, 69;
  --bs-link-color:         #001845;
  --bs-link-color-rgb:     0, 24, 69;
  --bs-link-hover-color:   #f0600c;

  --bs-body-color:         #414b60;
  --bs-body-color-rgb:     65, 75, 96;
  --bs-body-font-family:   var(--sw-font-body);
  --bs-body-font-size:     1rem;
  --bs-body-line-height:   1.65;

  --bs-border-color:       #e3e8f0;
  --bs-border-radius:      .875rem;
  --bs-heading-color:      #10182b;
}

/* An accent counterpart to .bg-primary / .text-primary, for the orange. */
.sw-bg-accent   { background-color: var(--sw-orange) !important; }
.sw-text-accent { color: var(--sw-orange) !important; }
.sw-bg-soft     { background-color: var(--sw-surface) !important; }
.sw-bg-navy     { background-color: var(--sw-navy) !important; }
.sw-text-muted  { color: var(--sw-muted) !important; }
.sw-text-ink    { color: var(--sw-ink) !important; }


/* 3. Base + typography =====================================================
   The old style.css sets `text-align: justify` and letter-spacing on every
   <a> and <p>. Justified text creates rivers of whitespace and hurts
   readability, so it is neutralised here for the whole site.
   ------------------------------------------------------------------------ */
body {
  font-family: var(--sw-font-body);
  color: var(--sw-body);
  background-color: var(--sw-white);
  -webkit-font-smoothing: antialiased;
}

p, a {
  text-align: inherit;
  letter-spacing: normal;
  word-spacing: normal;
}

h1, h2, h3, h4, h5, h6, .sw-display {
  font-family: var(--sw-font-head);
  color: var(--sw-ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Fluid headings: no media queries needed, they scale with the viewport. */
h1, .sw-h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); }
h2, .sw-h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
h3, .sw-h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }

a { text-decoration: none; }

/* Section eyebrow — the small orange label above a heading. */
.sw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sw-font-head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sw-orange);
}
.sw-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--sw-orange);
}

.sw-lead {
  font-size: 1.0625rem;
  color: var(--sw-muted);
  max-width: 60ch;
}

/* On a dark ground, headings and body text invert. */
.sw-on-dark,
.sw-on-dark h1, .sw-on-dark h2, .sw-on-dark h3,
.sw-on-dark h4, .sw-on-dark h5, .sw-on-dark h6 { color: var(--sw-white); }
.sw-on-dark .sw-lead { color: rgba(255, 255, 255, .78); }


/* 4. Section rhythm ========================================================
   Bootstrap's .py-5 is 3rem, which is tight for full-width marketing
   sections. .sw-section gives a fluid block that breathes on desktop and
   tightens on mobile.
   ------------------------------------------------------------------------ */
.sw-section {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.sw-section-tight {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: calc(var(--sw-header-h) + 1rem); }


/* 5. Buttons ===============================================================
   Bootstrap 5.3 builds buttons from --bs-btn-* variables, so a new variant
   is just a set of variable overrides. No rewriting of the base .btn.
   ------------------------------------------------------------------------ */
.btn {
  --bs-btn-font-family: var(--sw-font-head);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--sw-radius-pill);
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .6875rem;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn-primary {
  --bs-btn-bg:              var(--sw-navy);
  --bs-btn-border-color:    var(--sw-navy);
  --bs-btn-hover-bg:        var(--sw-navy-700);
  --bs-btn-hover-border-color: var(--sw-navy-700);
  --bs-btn-active-bg:       var(--sw-navy-800);
  --bs-btn-active-border-color: var(--sw-navy-800);
}

/* Primary call to action — the orange from the logo. */
.btn-accent {
  --bs-btn-color:           #fff;
  --bs-btn-bg:              var(--sw-orange);
  --bs-btn-border-color:    var(--sw-orange);
  --bs-btn-hover-color:     #fff;
  --bs-btn-hover-bg:        var(--sw-orange-700);
  --bs-btn-hover-border-color: var(--sw-orange-700);
  --bs-btn-active-color:    #fff;
  --bs-btn-active-bg:       var(--sw-orange-700);
  --bs-btn-focus-shadow-rgb: 240, 96, 12;
}

.btn-outline-light-brand {
  --bs-btn-color:           #fff;
  --bs-btn-border-color:    rgba(255, 255, 255, .45);
  --bs-btn-hover-color:     var(--sw-navy);
  --bs-btn-hover-bg:        #fff;
  --bs-btn-hover-border-color: #fff;
}

.btn-accent:hover,
.btn-primary:hover { transform: translateY(-2px); }

.btn-accent  { box-shadow: 0 6px 18px rgba(240, 96, 12, .28); }
.btn-accent:hover { box-shadow: 0 10px 24px rgba(240, 96, 12, .36); }


/* 6. Top bar ===============================================================
   Thin navy strip above the header: contact details and the rating chip.
   Hidden below lg — on mobile the same actions live in the floating buttons.
   ------------------------------------------------------------------------ */
.sw-topbar {
  background: var(--sw-navy);
  color: rgba(255, 255, 255, .82);
  font-size: .875rem;
}
.sw-topbar a {
  color: rgba(255, 255, 255, .82);
  transition: color .15s ease;
}
.sw-topbar a:hover { color: var(--sw-white); }

.sw-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.sw-topbar-item i { color: var(--sw-orange); }

/* Google-rating chip. */
.sw-rating-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .7rem;
  border-radius: var(--sw-radius-pill);
  background: rgba(255, 255, 255, .1);
  font-weight: 600;
  color: var(--sw-white);
}
.sw-rating-chip .sw-stars { color: #ffc107; letter-spacing: -1px; }

.sw-social a {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.sw-social a:hover { background: var(--sw-orange); }


/* 7. Header + navigation ===================================================
   Bootstrap's navbar handles the collapse, the dropdowns and the toggler.
   Everything here is skin only.
   ------------------------------------------------------------------------ */
.sw-header {
  background: var(--sw-white);
  border-bottom: 1px solid var(--sw-line);
  transition: box-shadow .2s ease;
}
.sw-header.sw-stuck { box-shadow: var(--sw-shadow-sm); }

.sw-logo img {
  height: 46px;
  width: auto;
}

.sw-nav .nav-link {
  font-family: var(--sw-font-head);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--sw-ink);
  padding: .5rem .9rem;
  border-radius: var(--sw-radius-sm);
  transition: color .15s ease, background-color .15s ease;
}
.sw-nav .nav-link:hover,
.sw-nav .nav-link:focus-visible,
.sw-nav .nav-link.active { color: var(--sw-orange); }

.sw-nav .dropdown-menu {
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow);
  padding: .5rem;
  min-width: 15rem;
}
.sw-nav .dropdown-item {
  border-radius: var(--sw-radius-sm);
  font-size: .9125rem;
  font-weight: 500;
  padding: .5rem .75rem;
}
.sw-nav .dropdown-item:hover,
.sw-nav .dropdown-item:focus {
  background: var(--sw-navy-050);
  color: var(--sw-navy);
}

/* Open dropdowns on hover from lg up; tap still works on touch devices. */
@media (min-width: 992px) {
  .sw-nav .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}


/* 8. Hero ==================================================================
   Two columns: story and trust on the left, quote card on the right.
   The diagonal is a clip-path wedge echoing the road graphic in the logo —
   this is one of the few things Bootstrap has no utility for.
   ------------------------------------------------------------------------ */
.sw-hero {
  position: relative;
  background: var(--sw-navy);
  overflow: hidden;
}
.sw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(240, 96, 12, .22), transparent 60%),
    radial-gradient(900px 460px at 92% 8%, rgba(20, 49, 102, .85), transparent 62%);
}
/* Orange wedge, bottom-left. */
.sw-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
  height: 6px;
  background: var(--sw-orange);
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
}
.sw-hero > .container { position: relative; z-index: 1; }

/* Small pill claims under the hero headline. */
.sw-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: var(--sw-radius-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .92);
  font-size: .8125rem;
  font-weight: 600;
}
.sw-chip i { color: var(--sw-orange); }

/* Overlapping avatar cluster — the "families moved" social proof. */
.sw-avatars {
  display: flex;
  align-items: center;
}
.sw-avatars .sw-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid var(--sw-navy);
  margin-left: -12px;
}
.sw-avatars .sw-avatar:first-child { margin-left: 0; }

/* Monogram avatar. Deliberately not a stock photo of a stranger: both
   reference sites use fake faces, which reads as dishonest up close. */
.sw-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sw-orange);
  color: var(--sw-white);
  font-family: var(--sw-font-head);
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
}
.sw-avatar-navy { background: var(--sw-navy-700); }


/* 9. Quote card ============================================================
   The lead-capture form that sits in the hero.
   ------------------------------------------------------------------------ */
.sw-quote-card {
  background: var(--sw-white);
  border-radius: var(--sw-radius-lg);
  box-shadow: var(--sw-shadow-lg);
  overflow: hidden;
}
.sw-quote-card-head {
  background: var(--sw-orange);
  color: var(--sw-white);
  padding: 1rem 1.5rem;
}
.sw-quote-card-head h3 {
  color: var(--sw-white);
  font-size: 1.15rem;
  margin: 0;
}
.sw-quote-card .form-control,
.sw-quote-card .form-select {
  border-color: var(--sw-line);
  border-radius: var(--sw-radius-sm);
  padding: .7rem .9rem;
  font-size: .9375rem;
}
.sw-quote-card .form-control:focus,
.sw-quote-card .form-select:focus {
  border-color: var(--sw-orange);
  box-shadow: 0 0 0 .2rem rgba(240, 96, 12, .15);
}
.sw-quote-card .form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--sw-ink);
  margin-bottom: .3rem;
}


/* 9b. Address autocomplete =================================================
   Dropdown under the "moving from / moving to" fields in the quote modal.
   Fed by the places/autocomplete endpoint.
   ------------------------------------------------------------------------ */
.sw-autocomplete { position: relative; }

.sw-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-sm);
  box-shadow: var(--sw-shadow);
}
.sw-suggestions:empty { display: none; }

.sw-suggestions button {
  display: flex;
  gap: .5rem;
  width: 100%;
  padding: .7rem .9rem;
  border: 0;
  border-bottom: 1px solid var(--sw-line);
  background: none;
  text-align: left;
  font-size: .875rem;
  color: var(--sw-body);
}
.sw-suggestions button:last-child { border-bottom: 0; }
.sw-suggestions button:hover,
.sw-suggestions button:focus { background: var(--sw-navy-050); }
.sw-suggestions button i { color: var(--sw-orange); margin-top: .15rem; }

.sw-suggestions .sw-suggestion-note {
  padding: .7rem .9rem;
  font-size: .875rem;
  color: var(--sw-muted);
}


/* 10. Process spine ========================================================
   Five connected steps. The connector is a single line drawn behind the
   numbered badges, hidden below lg where the steps stack vertically.
   ------------------------------------------------------------------------ */
.sw-process {
  position: relative;
}
.sw-step {
  position: relative;
  text-align: center;
}
.sw-step-badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--sw-white);
  border: 2px solid var(--sw-orange-100);
  color: var(--sw-orange);
  font-size: 1.5rem;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.sw-step-num {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sw-navy);
  color: var(--sw-white);
  font-family: var(--sw-font-head);
  font-size: .75rem;
  font-weight: 700;
}
.sw-step:hover .sw-step-badge {
  background: var(--sw-orange);
  color: var(--sw-white);
  transform: translateY(-4px);
}

/* The connecting rail. */
@media (min-width: 992px) {
  .sw-process::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      var(--sw-orange-100) 0 12px,
      transparent 12px 22px
    );
  }
}


/* 11. Feature + service cards ==============================================
   .card is Bootstrap's; these classes only add the brand skin and the hover.
   ------------------------------------------------------------------------ */
.sw-card {
  height: 100%;
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius);
  padding: 1.75rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sw-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sw-shadow);
  border-color: transparent;
}

.sw-card-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.15rem;
  border-radius: var(--sw-radius-sm);
  background: var(--sw-orange-050);
  color: var(--sw-orange);
  font-size: 1.35rem;
  transition: background-color .2s ease, color .2s ease;
}
.sw-card:hover .sw-card-icon {
  background: var(--sw-orange);
  color: var(--sw-white);
}

.sw-card h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.sw-card p  { font-size: .9375rem; color: var(--sw-muted); margin-bottom: 0; }

/* Text link with a sliding arrow. */
.sw-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--sw-font-head);
  font-weight: 600;
  font-size: .9125rem;
  color: var(--sw-navy);
}
.sw-link i { transition: transform .18s ease; }
.sw-link:hover { color: var(--sw-orange); }
.sw-link:hover i { transform: translateX(4px); }

/* Checklist used in "why choose us". */
.sw-checks { list-style: none; padding: 0; margin: 0; }
.sw-checks li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .85rem;
  color: var(--sw-body);
}
.sw-checks li::before {
  content: "\f00c";                     /* Font Awesome check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .1rem;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--sw-orange-050);
  color: var(--sw-orange);
  font-size: .6875rem;
}


/* 12. Trust strip ==========================================================
   The accreditation row that sits directly under the hero.
   ------------------------------------------------------------------------ */
.sw-trust {
  background: var(--sw-white);
  border-bottom: 1px solid var(--sw-line);
}
.sw-trust-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
  padding: 1.1rem .5rem;
}
.sw-trust-item i { font-size: 1.5rem; color: var(--sw-orange); }
.sw-trust-item strong {
  display: block;
  font-family: var(--sw-font-head);
  font-size: .9375rem;
  color: var(--sw-ink);
  line-height: 1.25;
}
.sw-trust-item span { font-size: .8125rem; color: var(--sw-muted); }


/* 13. Stat counters ========================================================
   Numbers animate up on first scroll into view — see sewika.js.
   ------------------------------------------------------------------------ */
.sw-stats { background: var(--sw-navy); position: relative; overflow: hidden; }
.sw-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 320px at 80% 0%, rgba(240, 96, 12, .18), transparent 65%);
}
.sw-stats > .container { position: relative; z-index: 1; }

.sw-stat { text-align: center; padding: .5rem; }
.sw-stat-value {
  font-family: var(--sw-font-head);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--sw-white);
}
.sw-stat-value .sw-stat-suffix { color: var(--sw-orange); }
.sw-stat-label {
  margin-top: .5rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .72);
}


/* 14. Testimonials =========================================================
   Bootstrap carousel supplies the slide behaviour.
   ------------------------------------------------------------------------ */
.sw-review-card {
  height: 100%;
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius);
  padding: 1.75rem;
}
.sw-review-card .sw-quote-mark {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--sw-orange-100);
}
.sw-review-card p {
  font-size: .9375rem;
  color: var(--sw-body);
}
.sw-review-stars { color: #ffc107; font-size: .875rem; }
.sw-review-name {
  font-family: var(--sw-font-head);
  font-weight: 700;
  color: var(--sw-ink);
  font-size: .9375rem;
}
.sw-review-route { font-size: .8125rem; color: var(--sw-muted); }

/* Carousel controls, restyled as brand buttons below the track. */
.sw-carousel-nav .btn {
  --bs-btn-padding-x: .75rem;
  --bs-btn-padding-y: .5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}


/* 15. FAQ ==================================================================
   Bootstrap accordion, brand skin only.
   ------------------------------------------------------------------------ */
.sw-faq .accordion-item {
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius) !important;
  margin-bottom: .75rem;
  overflow: hidden;
}
.sw-faq .accordion-button {
  font-family: var(--sw-font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--sw-ink);
  padding: 1.1rem 1.25rem;
}
.sw-faq .accordion-button:not(.collapsed) {
  background: var(--sw-orange-050);
  color: var(--sw-orange);
  box-shadow: none;
}
.sw-faq .accordion-button:focus {
  border-color: transparent;
  box-shadow: 0 0 0 .2rem rgba(240, 96, 12, .15);
}
.sw-faq .accordion-button::after {
  width: 1.1rem;
  height: 1.1rem;
  background-size: 1.1rem;
}
.sw-faq .accordion-body {
  padding: 0 1.25rem 1.25rem;
  font-size: .9375rem;
  color: var(--sw-muted);
}


/* 16. CTA band =============================================================
   Full-bleed navy strip before the footer.
   ------------------------------------------------------------------------ */
.sw-cta {
  position: relative;
  background: var(--sw-navy);
  overflow: hidden;
}
.sw-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(680px 300px at 15% 50%, rgba(240, 96, 12, .25), transparent 60%);
}
.sw-cta > .container { position: relative; z-index: 1; }


/* 17. Footer ===============================================================
   ------------------------------------------------------------------------ */
.sw-footer {
  background: var(--sw-navy);
  color: rgba(255, 255, 255, .72);
  font-size: .9125rem;
}
.sw-footer h4 {
  font-size: 1rem;
  color: var(--sw-white);
  margin-bottom: 1.1rem;
}

/* The logo is artwork on a white ground, so it sits on a white chip rather
   than being knocked out — cleaner than faking a transparent version. */
.sw-footer-logo {
  display: inline-block;
  background: var(--sw-white);
  border-radius: var(--sw-radius-sm);
  padding: .6rem .9rem;
}
.sw-footer-logo img { height: 40px; width: auto; }

.sw-footer-links { list-style: none; padding: 0; margin: 0; }
/* style.css has a legacy `footer ul li { display: inline-block }` with higher
   specificity than a bare `li` here, which ran these links together inline
   instead of stacking them — override it explicitly. */
.sw-footer-links li { display: block; margin-bottom: .6rem; }
.sw-footer-links a {
  color: rgba(255, 255, 255, .72);
  transition: color .15s ease, padding-left .15s ease;
}
.sw-footer-links a:hover {
  color: var(--sw-orange);
  padding-left: .3rem;
}

.sw-footer-contact { list-style: none; padding: 0; margin: 0; }
.sw-footer-contact li {
  display: flex;
  gap: .75rem;
  margin-bottom: .9rem;
}
.sw-footer-contact i {
  color: var(--sw-orange);
  margin-top: .25rem;
  flex: 0 0 1rem;
}
.sw-footer-contact a { color: rgba(255, 255, 255, .72); }
.sw-footer-contact a:hover { color: var(--sw-white); }

.sw-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
}
.sw-footer-bottom a { color: rgba(255, 255, 255, .72); }
.sw-footer-bottom a:hover { color: var(--sw-white); }

.sw-payment img {
  max-width: 100%;
  height: auto;
  background: var(--sw-white);
  border-radius: var(--sw-radius-sm);
  padding: .5rem;
}


/* 18. Floating actions =====================================================
   One stack, bottom-right. Replaces the four overlapping widget systems the
   old call_widget.php shipped.
   ------------------------------------------------------------------------ */
.sw-fab-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.sw-fab {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--sw-white);
  font-size: 1.25rem;
  box-shadow: var(--sw-shadow);
  transition: transform .18s ease;
}
.sw-fab:hover { transform: scale(1.07); color: var(--sw-white); }
.sw-fab-whatsapp { background: #25d366; }
.sw-fab-call     { background: var(--sw-orange); }

/* Ping ring on the WhatsApp button only, so it reads as the primary action. */
.sw-fab-whatsapp::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  opacity: .5;
  animation: sw-ping 2s cubic-bezier(0, 0, .2, 1) infinite;
  z-index: -1;
}
@keyframes sw-ping {
  75%, 100% { transform: scale(1.7); opacity: 0; }
}

@media (max-width: 575.98px) {
  .sw-fab { width: 46px; height: 46px; font-size: 1.1rem; }
  .sw-fab-whatsapp::after { width: 46px; height: 46px; }
}


/* 19. Motion ===============================================================
   Reveal-on-scroll. sewika.js adds .sw-in when the element enters view.
   ------------------------------------------------------------------------ */
.sw-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.sw-reveal.sw-in {
  opacity: 1;
  transform: none;
}

/* Respect the OS "reduce motion" setting: no transforms, no ping, no reveal. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .sw-reveal { opacity: 1; transform: none; }
}


/* 20. Inner page banner + branch cards =====================================
   Two fixes to the legacy theme, kept here so style.css stays untouched.
   ------------------------------------------------------------------------ */

/* style.css gives .page-title a dark scrim through ::before with inset:0, but
   never makes .page-title a positioned ancestor — so the scrim resolved
   against the page instead of the banner and the heading sat unreadable on
   the artwork. It also colours only h2 white, while the markup uses h1. */
.page-title {
  position: relative;
  isolation: isolate;
}
.page-title::before {
  z-index: -1;
  background-color: rgba(0, 24, 69, .62);
}
.page-title h1,
.page-title h2 {
  color: var(--sw-white);
  font-family: var(--sw-font-head);
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.page-title .bread-crumb,
.page-title .bread-crumb li,
.page-title .bread-crumb a {
  color: rgba(255, 255, 255, .85);
}
.page-title .bread-crumb a:hover { color: var(--sw-orange); }

/* Branch directory cards — the call button was a pink-to-red gradient and the
   card hover was emerald, neither of which is in the palette. */
.branch-card {
  border-radius: var(--sw-radius-lg);
  border: 1px solid var(--sw-line);
  box-shadow: var(--sw-shadow-sm);
}
.branch-card:hover {
  border-color: var(--sw-navy-100);
  box-shadow: var(--sw-shadow);
}
.branch-card::before { background: rgba(240, 96, 12, .04); }

.branch-card .city-heading {
  font-family: var(--sw-font-head);
  color: var(--sw-ink);
  font-weight: 700;
}

.call-btn,
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.15rem;
  border-radius: var(--sw-radius-pill);
  font-size: .875rem;
  font-weight: 600;
}
.call-btn {
  background: var(--sw-orange);
  background-image: none;
  color: var(--sw-white);
}
.call-btn:hover,
.call-btn:focus {
  background: var(--sw-orange-700);
  background-image: none;
  color: var(--sw-white);
}
.whatsapp-btn { background: #1faf54; color: var(--sw-white); }
.whatsapp-btn:hover,
.whatsapp-btn:focus { background: #17843f; color: var(--sw-white); }