/* ============================================================
   saiimpression.com — Redesign Design System
   Scope: all classes prefixed `si-` so this file does NOT clash
   with the legacy style.css / Bootstrap-3 still loaded on pages
   that have not yet been migrated.
   CHROME v2 — Deep Navy premium header & footer (common site-wide):
   navy #14213d/#0d1730 + gold #c9a24b + magenta #9b0571 (logo colors).
   ============================================================ */

/* ---------- Fonts (self-hosted in /fonts) — UNIFIED SITE TYPOGRAPHY ----------
   Marcellus (display serif, weight 400 only — headings)
   Figtree  (sans, 400–800 — body / UI)                                        */
@font-face { font-family:'Marcellus'; src:url('/fonts/Marcellus-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('/fonts/Figtree-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('/fonts/Figtree-500.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('/fonts/Figtree-600.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('/fonts/Figtree-700.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('/fonts/Figtree-800.ttf') format('truetype'); font-weight:800; font-display:swap; }
/* Legacy faces kept for old pages not yet migrated */
@font-face { font-family:'Montserrat'; src:url('/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('/fonts/Roboto-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('/fonts/Roboto-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('/fonts/Roboto-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

/* ---------- Design tokens ---------- */
:root{
  --si-navy:#14213d;
  --si-navy-700:#1d2d50;
  --si-navy-deep:#0d1730;
  --si-amber:#9b0571;           /* brand magenta (legacy token name kept) */
  --si-amber-600:#7a0458;
  --si-magenta-2:#c4187e;
  --si-gold:#c9a24b;
  --si-gold-soft:#f3e3c0;
  --si-ink:#1b1f2a;
  --si-body:#3d4453;
  --si-muted:#6b7280;
  --si-line:#e6e8ee;
  --si-bg:#ffffff;
  --si-bg-soft:#f6f8fc;
  --si-white:#ffffff;
  --si-radius:14px;
  --si-radius-sm:9px;
  --si-shadow:0 10px 30px rgba(20,33,61,.10);
  --si-shadow-sm:0 4px 14px rgba(20,33,61,.08);
  --si-container:1240px;
  --si-head:'Marcellus',Georgia,serif;
  --si-sans:'Figtree','Montserrat',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --si-transition:.25s ease;
  /* Light header/footer theme (v3). Header bg is PURE white to match the
     logo file's own baked-in white background exactly (it has no alpha
     channel) so it sits with zero visible edge — no chip/box needed.
     Footer uses a soft cream instead (visually separates it from the page),
     so its logo keeps a small, deliberately subtle white card. */
  --si-hdr-bg:#FFFFFF;
  --si-hdr-bg-2:#F6F1F3;
  --si-hdr-border:rgba(35,26,38,.09);
}

/* ---------- Shell-scoped reset (only affects si- components) ---------- */
.si-site-header *,
.si-footer *{ box-sizing:border-box; }

/* ---------- Layout helpers ---------- */
.si-container{ width:100%; max-width:var(--si-container); margin:0 auto; padding:0 20px; }
.si-section{ padding:72px 0; }
.si-section--soft{ background:var(--si-bg-soft); }
.si-grid{ display:grid; gap:24px; }

/* ---------- Buttons ---------- */
.si-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--si-sans);
  font-weight:700; font-size:15px; line-height:1; cursor:pointer; border:0;
  padding:13px 28px; border-radius:999px; text-decoration:none; transition:var(--si-transition); white-space:nowrap; }
.si-btn--primary{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--si-magenta-2),var(--si-amber) 60%,var(--si-amber-600)); color:#fff;
  box-shadow:0 12px 26px -10px rgba(155,5,113,.6), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(201,162,75,.35); }
.si-btn--primary::after{ content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-24deg); transition:left .55s ease; }
.si-btn--primary:hover{ transform:translateY(-2px); color:#fff; box-shadow:0 16px 34px -10px rgba(155,5,113,.7), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(201,162,75,.55); }
.si-btn--primary:hover::after{ left:130%; }
.si-btn--ghost{ background:transparent; color:var(--si-white); border:1.5px solid rgba(255,255,255,.45); }
.si-btn--ghost:hover{ background:rgba(255,255,255,.12); }
.si-btn--navy{ background:var(--si-navy); color:#fff; }
.si-btn--navy:hover{ background:var(--si-navy-700); }

/* =====================================================================
   TOP BAR — deep navy strip: contact left, trust line center, socials right
   ===================================================================== */
.si-topbar{ background:var(--si-hdr-bg); color:var(--si-body); font-family:var(--si-sans); font-size:13px; border-bottom:1px solid var(--si-hdr-border); }
.si-topbar .si-container{ display:flex; align-items:center; justify-content:space-between; min-height:38px; gap:14px; }
.si-topbar__contacts{ display:flex; align-items:center; gap:18px; }
.si-topbar__contacts a{ color:var(--si-body); text-decoration:none; font-weight:600; font-size:12.5px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:color .2s; }
.si-topbar__contacts a:hover{ color:var(--si-amber); }
.si-topbar__contacts .fa{ color:var(--si-amber); font-size:13px; }
.si-topbar__tag{ margin:0; color:var(--si-amber); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
@media(max-width:900px){ .si-topbar__tag{ display:none; } }
@media(max-width:560px){
  /* keep email + phone READABLE on mobile (icons alone were invisible when
     Font Awesome failed to load) — wrap to two lines instead of hiding */
  .si-topbar .si-container{ flex-wrap:wrap; justify-content:center; padding-top:6px; padding-bottom:6px; gap:6px 14px; }
  .si-topbar__contacts{ flex-wrap:wrap; justify-content:center; gap:6px 16px; }
  .si-topbar__contacts a{ font-size:12px; }
}
/* Social icons — full-colour brand logos on white chips = always visible */
.si-topbar__social{ list-style:none; display:flex; gap:7px; margin:0; padding:0; align-items:center; }
.si-topbar__social a{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:#fff; border:1px solid var(--si-hdr-border); box-shadow:0 2px 6px rgba(20,33,61,.08); transition:transform .25s, box-shadow .25s; }
.si-topbar__social a:hover{ transform:translateY(-2px) scale(1.08); box-shadow:0 6px 14px rgba(201,162,75,.35); border-color:var(--si-gold); }
.si-topbar__social img{ width:15px; height:15px; display:block; }

/* =====================================================================
   HEADER / NAV — navy bar, gold underlines, magenta CTA
   ===================================================================== */
.si-site-header{ font-family:var(--si-sans); position:relative; z-index:1200; }
.si-nav{ background:var(--si-hdr-bg); box-shadow:0 2px 14px rgba(20,33,61,.06); }
.si-nav::after{ content:''; display:block; height:2.5px; background:linear-gradient(90deg,var(--si-gold),var(--si-amber) 45%,var(--si-gold)); }
.si-nav .si-container{ display:flex; align-items:center; justify-content:space-between; min-height:80px; gap:16px; }
/* Logo has its own baked-in light background — no chip/box needed on a light nav */
.si-logo{ display:inline-flex; align-items:center; flex-shrink:0; transition:transform .25s; }
.si-logo:hover{ transform:translateY(-1px); }
/* height fixed, width auto → never stretched; aspect ratio 1.9 preserved */
.si-logo img{ height:52px; width:auto; object-fit:contain; display:block; }

.si-menu{ list-style:none; display:flex; align-items:center; justify-content:center; gap:2px; margin:0; padding:0; flex:1 1 auto; min-width:0; }
.si-menu > li{ position:relative; }
.si-menu > li > a{ position:relative; display:inline-flex; align-items:center; gap:7px; color:var(--si-navy);
  font-weight:600; font-size:14.5px; text-decoration:none; padding:31px 13px;
  transition:color var(--si-transition); white-space:nowrap; }
.si-menu > li > a::after{ content:''; position:absolute; left:13px; right:13px; bottom:22px; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,var(--si-gold),var(--si-magenta-2)); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.si-menu > li > a:hover{ color:var(--si-amber); }
.si-menu > li > a:hover::after,
.si-menu > li:hover > a::after{ transform:scaleX(1); }
.si-menu .si-chevron{ font-size:10px; color:var(--si-amber); transition:transform var(--si-transition); }
.si-menu > li:hover > a .si-chevron,
.si-menu > li.si-open > a .si-chevron{ transform:rotate(180deg); }

/* CTA (phone chip removed from main nav — contact info lives in the topbar) */
.si-cta-wrap{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.si-cta-wrap .si-btn{ flex-shrink:0; }
@media(max-width:1300px){
  .si-menu > li > a{ padding:31px 9px; font-size:13.5px; }
  .si-menu > li > a::after{ left:9px; right:9px; }
  .si-btn--primary{ padding:12px 20px; font-size:14px; }
}
@media(max-width:1080px) and (min-width:993px){
  .si-menu > li > a{ padding:31px 6px; font-size:12.5px; gap:4px; }
  .si-logo img{ height:36px; }
}

/* Dropdown / mega menu */
.si-dropdown{ position:absolute; top:100%; left:0; min-width:270px; background:#fff;
  border:1px solid var(--si-line); border-radius:0 0 16px 16px; box-shadow:0 30px 60px -22px rgba(13,23,48,.45);
  border-top:3px solid var(--si-gold);
  padding:12px; opacity:0; visibility:hidden; transform:translateY(10px); transition:var(--si-transition); z-index:50; }
.si-menu > li:hover > .si-dropdown,
.si-menu > li.si-open > .si-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.si-mega{ min-width:620px; display:grid; grid-template-columns:1fr 1fr; gap:3px 14px; }
.si-dropdown a{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  color:var(--si-navy); font-size:13.5px; font-weight:600; text-decoration:none; transition:background .2s, transform .2s; white-space:nowrap; }
.si-dropdown a:hover{ background:linear-gradient(90deg,#faf3e3,#faf1f7); color:var(--si-amber); transform:translateX(3px); }
/* Company dropdown: single column, and a highlighted Case Studies row */
.si-dropdown--company{ min-width:230px; }
.si-drop-featured{ background:linear-gradient(90deg,rgba(155,5,113,.08),rgba(201,162,75,.08)); font-weight:700; color:var(--si-amber) !important; }
.si-drop-featured:hover{ background:linear-gradient(90deg,rgba(155,5,113,.16),rgba(201,162,75,.14)) !important; }
.si-drop-badge{ margin-left:auto; background:var(--si-amber); color:#fff; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
/* real icons, shown in their natural (dark) colour — only the tinted chip
   behind them carries the brand accent */
.si-dropdown a img{ width:30px; height:30px; object-fit:contain; flex:0 0 30px;
  background:rgba(155,5,113,.08); border-radius:8px; padding:4px; }
.si-dropdown a:hover img{ background:rgba(155,5,113,.14); }

/* Hamburger */
.si-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.si-burger span{ width:26px; height:2.5px; background:var(--si-navy); border-radius:3px; transition:var(--si-transition); }
.si-burger.si-active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.si-burger.si-active span:nth-child(2){ opacity:0; }
.si-burger.si-active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Sticky — JS inserts .si-nav-spacer to reserve the nav's height so the page
   does not jump when the nav switches to fixed. */
.si-nav-spacer{ height:0; }
.si-site-header.si-stuck .si-nav{ position:fixed; top:0; left:0; right:0; z-index:1200; animation:si-slidedown .3s ease; box-shadow:0 10px 30px -14px rgba(0,0,0,.5); }
@keyframes si-slidedown{ from{ transform:translateY(-100%);} to{ transform:translateY(0);} }

/* In-page anchor jumps clear the fixed nav (no headings hidden behind header) */
html{ scroll-padding-top:96px; }
@media(max-width:992px){ html{ scroll-padding-top:80px; } }

/* Mobile-drawer-only blocks (hidden on desktop; shown inside the ≤992px rules below) */
.si-menu__extra{ display:none; }
.si-menu__head{ display:none; }

/* Inline rotating USP ticker — sits between the logo and the hamburger in
   the SAME row (mobile only), one short line at a time, auto-cycling. */
.si-usp-inline{ display:none; }
@media (max-width:992px){
  .si-nav .si-container{ padding:0 14px; gap:8px; }
  .si-usp-inline{ display:flex; flex:1 1 auto; min-width:0; height:42px; align-items:center; justify-content:center; overflow:hidden; }
  .si-usp-type{ font-family:var(--si-sans); font-size:13.5px; font-weight:700; line-height:1.5;
    color:var(--si-navy); white-space:nowrap; overflow:hidden; letter-spacing:.01em;
    text-shadow:0 2px 12px rgba(155,5,113,.22); }
  .si-usp-type b{ font-weight:800; color:var(--si-magenta-2);
    text-shadow:0 2px 10px rgba(196,24,126,.38), 0 0 18px rgba(201,162,75,.28); }
  /* blinking caret after the typed text */
  .si-usp-type::after{ content:''; display:inline-block; width:2px; height:13px; margin-left:3px;
    vertical-align:-2px; border-radius:1px; background:var(--si-magenta-2);
    animation:siUspBlink 1s steps(2,start) infinite; }
  /* burger flush to the corner — no leftover container padding beyond its own tap-target */
  .si-burger{ padding:8px 0 8px 8px; margin-right:-2px; }
}
@media (max-width:360px){
  .si-usp-inline{ display:none; } /* too narrow for logo + text + burger to breathe */
}
@keyframes siUspBlink{ 50%{ opacity:0; } }

/* Sticky mobile bottom bar — WhatsApp (15%) | Get a Quote (70%) | Live
   Chat (15%), always reachable while scrolling on a phone. Desktop already
   has the CTA in the nav + its own floating WhatsApp circle. */
.si-mobile-cta{ display:none; }
@media (max-width:992px){
  .si-mobile-cta{ display:flex; align-items:stretch; gap:7px; position:fixed; left:0; right:0; bottom:0; z-index:1300;
    background:#fff; border-top:1px solid var(--si-hdr-border); padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(20,33,61,.12); }
  .si-mobile-cta__btn{ flex:1 1 70%; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px;
    background:linear-gradient(135deg,var(--si-magenta-2),var(--si-amber)); color:#fff; border:none; cursor:pointer;
    padding:13px 6px; border-radius:14px; font-family:var(--si-sans); font-weight:700; font-size:14.5px;
    box-shadow:0 10px 24px -8px rgba(155,5,113,.55); white-space:nowrap; }
  .si-mobile-cta__btn .fa{ font-size:14px; }
  .si-mobile-cta__chat{ flex:0 0 15%; display:flex; align-items:center; justify-content:center;
    background:var(--si-navy); color:#fff; border:none; border-radius:14px; cursor:pointer; font-size:19px; }
  /* WhatsApp float, when folded into the bar (pages without their own sticky CTA) */
  .si-mobile-cta .si-whatsapp.si-mobile-cta__wa{ position:static; flex:0 0 15%; width:auto; height:auto;
    display:flex; align-items:center; justify-content:center; background:#25D366; border-radius:14px; box-shadow:none; }
  .si-mobile-cta .si-whatsapp.si-mobile-cta__wa img{ width:24px; height:24px; }
  /* keep page content from hiding behind the fixed bar */
  body.si-has-mobile-cta{ padding-bottom:68px; }
}
@media (max-width:340px){
  .si-mobile-cta__btn{ font-size:13px; }
}

/* =====================================================================
   RESPONSIVE NAV — navy slide-in drawer
   ===================================================================== */
@media (max-width:992px){
  .si-burger{ display:flex; }
  .si-cta-wrap .si-btn{ display:none; }
  .si-nav .si-container{ min-height:68px; }
  .si-logo img{ height:38px; }
  .si-menu{ position:fixed; inset:0 0 0 auto; width:min(86vw,370px); background:var(--si-hdr-bg);
    flex-direction:column; align-items:stretch; gap:2px; padding:22px 18px 32px; overflow-y:auto;
    box-shadow:-16px 0 50px rgba(20,33,61,.25); transform:translateX(100%);
    transition:transform .32s cubic-bezier(.2,.7,.2,1); z-index:1150; }
  .si-menu.si-open{ transform:translateX(0); }
  /* Drawer header: brand mark + explicit close button (was missing) */
  .si-menu__head{ display:flex; align-items:center; justify-content:space-between; margin:0 4px 18px; padding-bottom:16px; border-bottom:1px solid var(--si-hdr-border); }
  .si-menu__head img{ height:30px; width:auto; }
  .si-menu__close{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
    background:var(--si-bg-soft); border:1px solid var(--si-hdr-border); color:var(--si-navy); font-size:20px; line-height:1;
    cursor:pointer; transition:background .2s,color .2s,transform .2s; flex-shrink:0; }
  .si-menu__close:hover{ background:var(--si-amber); color:#fff; transform:rotate(90deg); }
  .si-menu > li > a{ justify-content:space-between; padding:15px 12px; border-radius:10px; color:var(--si-navy); font-size:16px; }
  .si-menu > li > a::after{ display:none; }
  .si-menu > li > a:hover{ background:var(--si-bg-soft); }
  .si-dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:transparent; border:0; border-left:2px solid rgba(201,162,75,.5); border-radius:0; margin:2px 0 6px 12px;
    padding:4px 0 4px 8px; display:none; min-width:0; }
  .si-dropdown a{ color:var(--si-body); white-space:normal; }
  .si-dropdown a:hover{ background:var(--si-bg-soft); color:var(--si-amber); transform:none; }
  .si-mega{ display:none; grid-template-columns:1fr; min-width:0; }
  .si-menu > li.si-open > .si-dropdown{ display:block; }
  .si-menu > li.si-open > .si-mega{ display:grid; }
  .si-nav-backdrop{ position:fixed; inset:0; background:rgba(6,11,24,.6); backdrop-filter:blur(3px); opacity:0; visibility:hidden;
    transition:var(--si-transition); z-index:1100; }
  .si-nav-backdrop.si-open{ opacity:1; visibility:visible; }
  /* drawer extras: CTA + socials */
  .si-menu__extra{ display:block; margin-top:14px; padding-top:18px; border-top:1px solid var(--si-hdr-border); }
  .si-menu__extra .si-btn{ display:inline-flex; width:100%; justify-content:center; }
  .si-menu__extra-tel{ display:flex; align-items:center; justify-content:center; gap:9px; color:var(--si-navy); font-weight:700;
    font-size:15px; text-decoration:none; margin:14px 0; }
  .si-menu__extra-tel .fa{ color:var(--si-amber); }
  .si-menu__extra-soc{ display:flex; justify-content:center; gap:10px; }
  .si-menu__extra-soc a{ width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--si-hdr-border); display:flex; align-items:center; justify-content:center; transition:transform .25s; }
  .si-menu__extra-soc a:hover{ transform:translateY(-2px); }
  .si-menu__extra-soc img{ width:17px; height:17px; }
}

/* =====================================================================
   QUOTE MODAL — vanilla fallback for pages WITHOUT Bootstrap
   (blogs, case studies…). Landing pages keep Bootstrap behaviour:
   bootstrap shows the modal with inline display:block which overrides
   the class rule below.
   ===================================================================== */
.header-modal{ display:none; }
.header-modal.si-show{ display:block; position:fixed; inset:0; z-index:2000; overflow-y:auto;
  background:rgba(13,23,48,.62); backdrop-filter:blur(4px); padding:30px 16px; }
.header-modal.si-show .modal-dialog{ max-width:560px; margin:4vh auto; animation:si-modal-in .3s cubic-bezier(.2,.7,.2,1); }
@keyframes si-modal-in{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }
.header-modal.si-show .modal-content{ background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55); border:1px solid rgba(201,162,75,.4); font-family:var(--si-sans); }
.header-modal.si-show .modal-header{ background:radial-gradient(130% 160% at 80% -20%,#243a63,var(--si-navy) 60%); padding:22px 28px; position:relative; }
.header-modal.si-show .modal-title{ color:#fff; font-size:21px; font-weight:700; margin:0; }
.header-modal.si-show .close{ position:absolute; top:14px; right:16px; background:rgba(255,255,255,.14); border:0; color:#fff;
  width:32px; height:32px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; opacity:1; text-shadow:none; }
.header-modal.si-show .close:hover{ background:var(--si-amber); }
.header-modal.si-show .modal-body{ padding:22px 28px 28px; }
.header-modal.si-show .modal-body input,
.header-modal.si-show .modal-body select,
.header-modal.si-show .modal-body textarea{ width:100%; padding:12px 14px; border:1.5px solid #ddd3c1; border-radius:10px;
  font-size:14.5px; font-family:var(--si-sans); margin-bottom:12px; background:#fff; color:var(--si-ink); }
.header-modal.si-show .modal-body input:focus,
.header-modal.si-show .modal-body select:focus,
.header-modal.si-show .modal-body textarea:focus{ outline:none; border-color:var(--si-amber); box-shadow:0 0 0 3px rgba(155,5,113,.12); }
.header-modal.si-show .modal-body button[type="submit"],
.header-modal.si-show .modal-body .btn{ background:linear-gradient(135deg,var(--si-magenta-2),var(--si-amber)); color:#fff; border:0;
  padding:13px 30px; border-radius:999px; font-weight:700; font-size:15px; cursor:pointer; width:100%;
  box-shadow:0 12px 26px -10px rgba(155,5,113,.6); transition:.25s; }
.header-modal.si-show .modal-body button[type="submit"]:hover{ transform:translateY(-2px); }
body.si-modal-open{ overflow:hidden; }

/* =====================================================================
   FOOTER — light theme (v3): soft cream background, dark readable text.
   Layout: brand | Company | Products | Find Us on desktop; on mobile the
   Find Us card gets its own full-width row (was squeezed into a half-width
   column before, wrapping the address awkwardly) with Company/Products
   as a clean 2-up pair below it.
   ===================================================================== */
.si-footer{ position:relative; background:var(--si-hdr-bg-2);
  color:var(--si-body); font-family:var(--si-sans); font-size:15px; padding:0;
  border-top:1px solid var(--si-hdr-border); }
.si-footer__accent{ height:3.5px; background:linear-gradient(90deg,var(--si-gold),var(--si-magenta-2),var(--si-amber),var(--si-gold)); background-size:220% 100%; animation:si-foot-shine 7s linear infinite; }
@keyframes si-foot-shine{ to{ background-position:220% 0; } }
.si-footer a{ color:var(--si-body); text-decoration:none; transition:var(--si-transition); }
.si-footer a:hover{ color:var(--si-amber); }
.si-footer__grid{ display:grid; grid-template-columns:1.3fr .8fr .95fr .95fr 1.05fr; gap:34px; padding-top:64px; align-items:start; }
.si-footer h3{ font-family:var(--si-sans); color:var(--si-navy); font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 0 22px; position:relative; padding-bottom:12px; }
.si-footer h3::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2.5px; background:linear-gradient(90deg,var(--si-gold),var(--si-magenta-2)); border-radius:3px; }

/* Brand column — logo needs a small subtle card since footer bg isn't pure white */
.si-footer__logo{ display:inline-block; margin-bottom:22px; background:#fff; padding:8px 14px; border-radius:12px;
  box-shadow:0 4px 14px rgba(35,26,38,.08); border:1px solid var(--si-hdr-border); }
.si-footer__logo img{ height:44px; width:auto; object-fit:contain; display:block; }
.si-footer__brand p{ line-height:1.78; margin:0 0 24px; font-size:14.5px; max-width:350px; color:var(--si-body); }

/* Link lists */
.si-footer__links{ list-style:none; margin:0; padding:0; }
.si-footer__links li{ margin-bottom:12px; }
.si-footer__links a{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--si-body); transition:color .2s,transform .2s; }
.si-footer__links a::before{ content:'→'; color:var(--si-amber); font-size:12px; opacity:0; margin-left:-16px; transition:.2s; }
.si-footer__links a:hover{ color:var(--si-amber); transform:translateX(16px); }
.si-footer__links a:hover::before{ opacity:1; }

/* Find Us — presented as its own light card so address/email/phone are
   always high-contrast and never squeezed into a narrow half-column */
.si-footer__col--find{ background:#fff; border:1px solid var(--si-hdr-border); border-radius:16px; padding:24px 26px; }
.si-footer__find{ list-style:none; margin:0; padding:0; }
.si-footer__find li{ display:flex; gap:13px; align-items:flex-start; line-height:1.6; margin-bottom:17px; font-size:14.5px; color:var(--si-body); }
.si-footer__find li:last-child{ margin-bottom:0; }
.si-footer__find a{ font-weight:600; color:var(--si-navy); }
.si-footer__find a:hover{ color:var(--si-amber); }
.si-footer__find .ic{ width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg,var(--si-magenta-2),var(--si-amber));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
  box-shadow:0 8px 18px -8px rgba(155,5,113,.5); }
.si-footer__find small{ display:block; margin-top:2px; font-size:12.5px; color:var(--si-body); opacity:.72; font-weight:400; }

/* Social — full-colour icons on white chips with a visible border on light bg */
.si-footer__social{ display:flex; gap:11px; margin-top:6px; }
.si-footer__social a{ width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--si-hdr-border);
  box-shadow:0 4px 12px rgba(35,26,38,.06); display:flex; align-items:center; justify-content:center; transition:.25s; }
.si-footer__social a:hover{ border-color:var(--si-gold); transform:translateY(-4px) scale(1.05); box-shadow:0 10px 22px rgba(201,162,75,.3); }
.si-footer__social img{ width:20px; height:20px; }

/* Export countries strip — single row */
.si-footer__export{ margin-top:54px; padding-top:36px; border-top:1px solid var(--si-hdr-border); }
.si-footer__export-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.si-footer__export-head h3{ margin:0; padding:0; font-size:16px; }
.si-footer__export-head h3::after{ display:none; }
.si-footer__export-btn{ display:inline-flex; align-items:center; gap:9px; background:linear-gradient(135deg,var(--si-magenta-2),var(--si-amber));
  color:#fff; padding:12px 26px; border-radius:999px; font-weight:700; font-size:14px;
  box-shadow:0 12px 28px rgba(155,5,113,.3), inset 0 1px 0 rgba(255,255,255,.25); transition:.25s; border:none; cursor:pointer; }
.si-footer__export-btn:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 18px 36px rgba(155,5,113,.4); }
.si-footer__flags{ display:flex; gap:14px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; -ms-overflow-style:none; }
.si-footer__flags::-webkit-scrollbar{ display:none; }
.si-footer__flags img{ width:68px; height:auto; border-radius:8px; flex:0 0 auto; background:#fff; padding:3px; border:1px solid var(--si-hdr-border);
  box-shadow:0 4px 10px rgba(35,26,38,.08); transition:transform .25s,box-shadow .25s; }
.si-footer__flags img:hover{ transform:translateY(-5px) scale(1.06); box-shadow:0 10px 20px rgba(201,162,75,.25); }

/* Bottom bar */
.si-footer__bottom{ border-top:1px solid var(--si-hdr-border); margin-top:48px; padding:20px 0; background:rgba(35,26,38,.03); }
.si-footer__bottom .si-container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--si-muted); }
.si-footer__bottom a{ color:var(--si-body); }
.si-footer__bottom a:hover{ color:var(--si-amber); }

@media (max-width:1180px){
  .si-footer__grid{ grid-template-columns:1fr 1fr 1fr; gap:32px; }
  .si-footer__brand{ grid-column:1 / -1; }
  .si-footer__col--find{ grid-column:1 / -1; }
}
@media (max-width:992px){
  .si-footer__grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:576px){
  .si-footer__grid{ grid-template-columns:1fr 1fr; gap:28px 20px; padding-top:40px; }
  .si-footer__brand{ grid-column:1 / -1; text-align:center; order:1; }
  .si-footer__brand p{ max-width:100%; margin-left:auto; margin-right:auto; }
  .si-footer__social{ justify-content:center; }
  /* Find Us gets its own full-width row right after the brand, so the
     address/phone/email are never cramped into a half column */
  .si-footer__col--find{ grid-column:1 / -1; order:2; padding:22px 20px; }
  .si-footer__col--company{ order:3; }
  .si-footer__col--products{ order:4; }
  .si-footer__col--specialty{ order:5; }
  .si-footer__col h3{ font-size:12.5px; margin-bottom:14px; }
  .si-footer__links{ gap:9px; }
  .si-footer__links a{ font-size:13.5px; }
  .si-footer__find li{ font-size:13.5px; }
  .si-footer__export-head{ flex-direction:column; align-items:flex-start; }
  .si-footer__bottom .si-container{ justify-content:center; text-align:center; }
}

/* WhatsApp float */
.si-whatsapp{ position:fixed; bottom:22px; left:22px; z-index:1000; width:52px; height:52px;
  border-radius:50%; box-shadow:var(--si-shadow); transition:var(--si-transition); }
.si-whatsapp:hover{ transform:scale(1.08); }
.si-whatsapp img{ width:100%; height:100%; object-fit:contain; }
/* Lift above the sticky mobile "Get a Quote" bar so they never overlap */
@media (max-width:992px){
  .si-whatsapp{ bottom:80px; width:46px; height:46px; }
}

/* Skip duplicate when legacy whatsapp present */
.whatsapp_icon + .si-whatsapp{ display:none; }

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .si-footer__accent{ animation:none; }
  .si-menu,.si-dropdown,.si-btn--primary::after{ transition:none; }
}