/* The site is designed light-only with photo backgrounds. Chrome for Android
   "auto-dark" was inverting text to white while leaving the photos light —
   white copy on white fur/silk textures. Declaring only-light opts the whole
   site out of forced darkening (the <meta name="color-scheme"> in each page
   head does the same; this is the CSS-level backstop, injected on every page). */
:root { color-scheme: only light; }
/* =============================================================================
   SPARK CUSTOM STORE — FOOTER STYLES
   Design: Industrial-refined B2B | Red / Black / White brand system
   Fonts: Bebas Neue (display) · DM Serif Display (italic headings) · DM Sans (body)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES
   --------------------------------------------------------------------------- */
:root {
  --color-red:         #D71920;
  --color-red-dark:    #b01f1f;
  --color-black:       #111111;
  --color-white:       #FFFFFF;
  --color-gray-100:    #F5F5F5;
  --color-gray-200:    #E8E8E8;
  --color-gray-300:    #CCCCCC;
  --color-gray-500:    #777777;
  --color-gray-600:    #555555;

  --ftr-font-display:      'Bricolage Grotesque', sans-serif;
  --ftr-font-serif:        'Bricolage Grotesque', sans-serif;
  --ftr-font-body:         'Montserrat', sans-serif;

  --ftr-radius-sm:         6px;
  --ftr-radius-md:         12px;
  --ftr-radius-lg:         20px;

  --ftr-shadow-card:       0 2px 20px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05);
  --ftr-shadow-card-hover: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);

  --ftr-transition-base:   0.22s ease;
  --ftr-transition-slow:   0.38s cubic-bezier(0.4, 0, 0.2, 1);

  --container-max:     78.75rem;  /* 1260px@16 → 1890px@24 → 3780px@48 */
  --container-pad:     2.8rem;    /* 44.8px@16 → 67px@24 → 134px@48  */

  --ftr-section-pad-y:     clamp(56px, 8vw, 120px);
}
@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
:root {

  --ftr-section-pad-y:     clamp(56px, 10.6667vw, 120px);
} }

/* ---------------------------------------------------------------------------
   BASE RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Global overflow guard — prevents any section or misaligned element from
   creating horizontal scroll on any device or breakpoint. */
html { overflow-x: hidden; }

body {
  /* color/background removed — this sheet injects LAST, so they were
     overriding every page's own body colors (e.g. products' #1c1c1e text;
     custom-quote needed !important just to keep its dark background). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Footer type is scoped to the component so it no longer overrides the host
   page's <body> font-family. (This sheet injects at runtime AFTER the page CSS,
   so a global `body{font-family}` here was hijacking every page's body font —
   e.g. flipping the homepage from Barlow to DM Sans.) */
.site-footer { font-family: var(--ftr-font-body); }

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ---------------------------------------------------------------------------
   GLOBAL TYPOGRAPHY UTILITIES
   Available on every page via footer.css
   --------------------------------------------------------------------------- */
/* .section-tag {
  display: inline-block;
  background: rgba(215, 25, 32, 0.08);
  color: #D71920;
  font-size: 0.85rem;
  font-weight: 450;
  letter-spacing: 0.15em;
  padding: 10px 18px;
  border-radius: 100px;
  margin-bottom: 25px;
} */

.section-h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: #0A0A0A;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.section-h2 {
  font-size: clamp(1.8rem, 4.2667vw, 2.6rem);
} }
.section-h2 span { color: var(--red, #D71920); }

/* ---------------------------------------------------------------------------
   LAYOUT UTILITIES
   --------------------------------------------------------------------------- */
.site-footer { overflow: hidden; }

/* :where() drops specificity to zero so a page's OWN `.container` rule always
   wins (this sheet injects last and was stomping services/products/about wide
   layouts down to 1260px). Pages without their own container — faq, gallery,
   testimonials, blog, custom-quote — still get these styles. */
:where(.container) {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Mobile paddings stay full-strength on purpose — they normalize phone
   gutters site-wide (existing behavior preserved). */
@media (max-width: 992px) { .container { padding-inline: 2rem; } }
@media (max-width: 768px) { .container { padding-inline: 1.25rem; } }
@media (max-width: 480px) { .container { padding-inline: 1rem; } }

/* Footer fills wide screens (no longer narrow on big monitors). Scoped to the
   footer so page content keeps its own width. Fluid: 1260px ≤~1432px → 1520px
   by 1920 (matches the homepage content shell so edges align there). */
.site-footer .container { max-width: clamp(78.75rem, 88vw, 1520px); }
@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.site-footer .container { max-width: clamp(78.75rem, 117.3333vw, 1520px); } }

/* (Removed dead unscoped .section-header/.section-label/.section-title/
   .section-subtitle rules — the footer markup never used them, but because
   this sheet injects LAST they were overriding the page-owned versions on
   products/services/about — wrong font + smaller heading caps at 1920.) */


/* =============================================================================
   SECTION 3: QUOTE CTA STRIP (replaces the old embedded quote form)
   ============================================================================= */
.footer-cta-strip {
  /* Same dark -> deep-red gradient language as the page heroes, so the strip
     reads as part of the background instead of a loud red band. The CTA
     button carries the red now. */
  background:
    radial-gradient(ellipse 55% 140% at 86% 50%, rgba(215,25,32,0.42) 0%, rgba(215,25,32,0) 62%),
    linear-gradient(105deg, #070707 0%, #0b0b0b 45%, #1c0509 68%, #3f0a12 100%);
  padding-block: clamp(18px, 1.8vw, 26px);   /* client: strip was too tall */
  border-top: 1px solid rgba(255,255,255,0.06);
}
@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.footer-cta-strip {
  padding-block: clamp(18px, 2.4vw, 26px);
} }

.footer-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-cta-label {
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.25rem;
}

.footer-cta-headline {
  font-family: var(--ftr-font-display);
  font-size: clamp(1.375rem, 3vw, 2.125rem); /* 22px → 34px, in rem so it scales */
  letter-spacing: 0.03em;
  color: var(--color-white);
  line-height: 1.1;
}

@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.footer-cta-headline {
  font-size: clamp(1.375rem, 4vw, 2.125rem);
} }

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  /* Canonical CTA spec (see buttons.css) — inverse variant: the strip behind
     it is red, so this one stays white. footer.css is injected after
     buttons.css, so the shared system can't reach it; kept in sync here. */
  padding: 0.7rem 0.9rem;   /* matches --cta-pad-y / --cta-pad-x */
  min-height: 2.75rem;
  background: var(--color-red);
  color: var(--color-white);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid var(--color-red);
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--ftr-transition-base), color var(--ftr-transition-base),
              transform var(--ftr-transition-base), box-shadow var(--ftr-transition-base);
}

.footer-cta-btn:hover {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.footer-cta-btn svg {
  width: 1.125rem; height: 1.125rem; /* 18px — scales with root */
  transition: transform var(--ftr-transition-base);
}

.footer-cta-btn:hover svg { transform: translateX(4px); }

@media (max-width: 640px) {
  .footer-cta-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-cta-btn   { width: 100%; justify-content: center; }
}


/* =============================================================================
   SECTION 4: MAIN FOOTER
   ============================================================================= */
.footer-main {
  position: relative;
  padding-block: clamp(40px, 4vw, 60px);
  background: var(--color-black); /* fallback while footer.webp loads */
  color: var(--color-white);
  isolation: isolate; /* keeps the bg layer + its overlay contained to this section */
}
@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.footer-main {
  padding-block: clamp(40px, 5.3333vw, 60px);
} }

/* Atmospheric photo background (footer.webp) with a dark brand-tinted overlay
   so the existing white text stays fully readable on top of it. Kept as its
   own absolutely-positioned layer (rather than painted straight on
   .footer-main) so the gradient + image never fight the section's own
   background-color fallback. */
.footer-main-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.755) 0%, rgba(8, 8, 8, 0.91) 55%, rgba(8, 8, 8, 0.661) 100%),
    url('../images/webporavif/footer.webp') center 35% / cover no-repeat;
}

.footer-main-grid {
  display: grid;
  /* 6 columns, laid out row-major as 3x2:
       Brand        | Quick Links | Custom Patches
       Digitizing   | Vector Art  | Get In Touch
     Column widths are shared across both rows, so the fractions favour the
     pairs that need more room (Brand+Digitizing, Patches+Contact). */
  grid-template-columns: 1.2fr 0.9fr 1.15fr;
  /* Row gap kept much tighter than the column gap — the two rows stacking
     was the main reason the footer got so tall after the extra columns. */
  gap: clamp(26px, 2.4vw, 36px) clamp(32px, 4vw, 72px);
}

@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.footer-main-grid {
  gap: clamp(26px, 3.2vw, 36px) clamp(32px, 5.3333vw, 72px);
} }

/* Brand / Logo */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 12px;
  transition: opacity var(--ftr-transition-base);
}

.footer-logo:hover { opacity: 0.8; }

.logo__img--footer {
  height: clamp(2.5rem, 1.3vw + 2.2rem, 3.75rem); /* 40px → 60px, scales with screen */
  width: auto;
  display: block;
  object-fit: contain;
}

@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.logo__img--footer {
  height: clamp(2.5rem, 1.7333vw + 2.2rem, 3.75rem);
} }

.footer-logo__name {
  font-family: var(--ftr-font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem); /* 18px → 22px */
  letter-spacing: 0.01em;
  color: var(--color-white);
  line-height: 1.15;
}

@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.footer-logo__name {
  font-size: clamp(1.125rem, 0.5333vw + 1rem, 1.375rem);
} }

.footer-desc {
  font-size: 1rem; /* 16px */
  color: rgba(255, 255, 255, 0.906);
  line-height: 1.65;
  max-width: 24rem;
  margin-bottom: 1rem;
}

.footer-hours {
  margin-top: 0.875rem;
  font-size: 0.875rem; /* 14px */
  color: rgba(255, 255, 255, 0.788);
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Column headings */
.footer-col-heading {
  font-family: var(--ftr-font-display);
  font-size: clamp(1.0625rem, 1.1vw, 1.125rem);   /* 17 → 18px */
  letter-spacing: 0.12em;
  color: var(--color-white);
  margin-bottom: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.footer-col-heading {
  font-size: clamp(1.0625rem, 1.4667vw, 1.125rem);
} }

/* Navigation lists */
.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 0.55vw, 0.625rem); /* 7 → 10px — tightened, the 7-item
                                            service columns drove the footer height */
}
@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.footer-nav-list {
  gap: clamp(0.45rem, 0.7333vw, 0.625rem);
} }

/* Reset Bootstrap list padding inside footer */
.site-footer ul,
.site-footer ol {
  padding-left: 0;
}

.footer-link {
  font-size: clamp(1rem, 1vw, 1.0625rem); /* 16 → 17px */
  color: rgba(255, 255, 255, 0.887);
  transition: color var(--ftr-transition-base), padding-left var(--ftr-transition-base);
  display: inline-block;
}

@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.footer-link {
  font-size: clamp(1rem, 1.3333vw, 1.0625rem);
} }

.footer-link:hover {
  color: var(--color-red);
  padding-left: 0.25rem;
}

/* Contact Column */
.footer-col--contact .footer-col-heading {
  margin-bottom: 20px;
}

.footer-contact {
  font-style: normal;
  margin-bottom: 22px;
}

.site-footer .contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer .contact-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.site-footer .contact-icon {
  width: 1.125rem;  /* 18px */
  height: 1.125rem;
  color: var(--color-red);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.site-footer .contact-icon svg {
  width: 100%;
  height: 100%;
}

.site-footer .contact-label {
  display: block;
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.903);
  margin-bottom: 0.375rem; /* 6px — clearer label→value separation */
}

.site-footer .contact-value {
  display: block;
  font-size: clamp(0.9375rem, 1vw, 1rem); /* 15 → 16px */
  color: rgba(255, 255, 255, 0.881);
  transition: color var(--ftr-transition-base);
}

@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.site-footer .contact-value {
  font-size: clamp(0.9375rem, 1.3333vw, 1rem);
} }

.site-footer .contact-value--secondary {
  margin-top: 0.25rem;
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem); /* 13 → 14px, quieter than the primary email */
  color: rgba(255, 255, 255, 0.798);
}

@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.site-footer .contact-value--secondary {
  font-size: clamp(0.8125rem, 1.2vw, 0.875rem);
} }

.site-footer a.contact-value:hover {
  color: var(--color-red);
}

/* Contact CTA Button */
.site-footer .btn-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem; /* 10px 20px */
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--ftr-font-display);
  font-size: 0.875rem; /* 14px */
  letter-spacing: 0.1em;
  border-radius: var(--ftr-radius-sm);
  margin-bottom: 24px;
  transition: background var(--ftr-transition-base), transform var(--ftr-transition-base);
}

.site-footer .btn-contact-cta:hover {
  background: var(--color-white);
  color: var(--color-black);
  transform: translateY(-1px);
}

.site-footer .btn-contact-cta svg {
  width: 1rem;  /* 16px */
  height: 1rem;
}

/* Social Links */
.footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;  /* 44px — meets the 44×44 touch-target minimum */
  height: 2.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.715);
  transition:
    border-color var(--ftr-transition-base),
    color var(--ftr-transition-base),
    background var(--ftr-transition-base),
    transform var(--ftr-transition-base);
}

.social-link:hover {
  border-color: var(--color-red);
  color: var(--color-white);
  background: var(--color-red);
  transform: translateY(-2px);
}

.social-link svg {
  width: 1.25rem;  /* 20px — proportional to the 44px button */
  height: 1.25rem;
}

/* =============================================================================
   SECTION 5: SHIPPING PARTNERS
   ============================================================================= */
.footer-shipping {
  padding-block: clamp(18px, 2vw, 26px);
  background: var(--color-black);
  border-top: 1px solid rgba(255,255,255,0.06);
}
@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.footer-shipping {
  padding-block: clamp(18px, 2.6667vw, 26px);
} }

.footer-shipping-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vw, 16px);
}

@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */

.footer-shipping-inner {
  gap: clamp(12px, 2.1333vw, 16px);
} }

.footer-shipping-label {
  font-family: var(--ftr-font-display);
  font-size: 0.8125rem; /* 13px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

.footer-shipping-carriers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.carrier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 46px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--ftr-radius-sm);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: transform var(--ftr-transition-base), box-shadow var(--ftr-transition-base);
}

.carrier-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

.carrier-badge-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* =============================================================================
   SECTION 6: COPYRIGHT BAR
   ============================================================================= */
.footer-copyright {
  padding-block: clamp(14px, 1.4vw, 20px);
  background: var(--color-black);
  border-top: 1px solid rgba(255,255,255,0.06);
}
@media (min-width: 1600px) {
 /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
.footer-copyright {
  padding-block: clamp(14px, 1.8667vw, 20px);
} }

.copyright-inner {
  display: flex;
  align-items: center;   /* keeps all three groups on one centre line */
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* One size + one line-height across the whole bottom bar. The links were
   sitting low because they inherited a different line-height than the
   copyright/brand text once Montserrat came in. */
.copyright-text,
.copyright-links,
.copyright-link {
  font-size: 0.875rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

.copyright-text {
  color: rgba(255, 255, 255, 0.728);
  white-space: nowrap;
  /* This is a <p> tag. Bootstrap's reboot (`p{margin-bottom:1rem}`, 0,0,1)
     beats our universal `*{margin:0}` (0,0,0), and that stray 16px margin was
     lifting the text off the centre line while the links stayed put. */
  margin: 0;
}

.copyright-links {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.copyright-link {
  font-size: 0.9375rem; /* 15px */
  color: rgba(255, 255, 255, 0.658);
  transition: color var(--ftr-transition-base);
}

.copyright-link:hover { color: var(--color-red); }

.copyright-links span {
  color: rgba(255, 255, 255, 0.581);
}

/* (footer dev credit removed per client request) */


/* =============================================================================
   FOCUS STYLES (WCAG)
   ============================================================================= */
:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
  border-radius: 3px;
}

.footer-main :focus-visible {
  outline-color: var(--color-red);
}



/* =============================================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================================= */
@media (max-width: 1024px) {
  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-main-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }

  /* Brand and Contact each span the full row on tablet so the four link
     columns in between pair up evenly (2x2) without a lopsided last row. */
  .footer-col--brand,
  .footer-col--contact {
    grid-column: 1 / -1;
  }

  .footer-desc { max-width: 32rem; }

  .quote-inner {
    gap: 40px;
  }
}


/* =============================================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================================= */
@media (max-width: 768px) {

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .industry-card {
    padding: 20px 14px;
    gap: 10px;
  }

  .industry-icon {
    width: 40px;
    height: 40px;
  }

  /* FAQ */
  .faq-trigger {
    padding: 16px 18px;
  }

  .faq-answer {
    padding: 0 18px 18px;
  }

  /* Quote */
  .quote-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .quote-subtext {
    max-width: 100%;
  }

  .quote-closing {
    max-width: 100%;
  }

  /* Form */
  .form-row--two {
    flex-direction: column;
  }

  .quote-form-card {
    border-radius: var(--ftr-radius-sm);
  }

  .form-card-header {
    padding: 18px 20px 14px;
  }

  .quote-form {
    padding: 18px 20px 22px;
  }

  /* Main footer */
  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* .footer-col intentionally left blank removed to avoid empty ruleset */

  /* Trust badges */
  .site-footer .trust-badges-list {
    gap: 8px 12px;
  }

  .site-footer .trust-badge {
    font-size: 13px;
    padding: 6px 12px;
  }

  /* Copyright */
  .copyright-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .copyright-text {
    white-space: normal;
    text-align: center;
  }
}

/* =============================================================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================================================= */
@media (max-width: 480px) {
  .quote-headline {
    font-size: clamp(28px, 7vw, 42px);
  }

  .quote-benefits li {
    font-size: clamp(12px, 3vw, 14px);
    gap: 8px;
  }

  .quote-trust-inline {
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 11px;
  }

  .social-link {
    width: 44px;
    height: 44px;
  }

  .dropdown-menu {
    max-height: 60vh;
    overflow-y: auto;
  }

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .industry-name {
    font-size: 12px;
  }

  .copyright-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
  }

  .footer-social {
    gap: 8px;
  }
}

/* =============================================================================
   ≤ 375px — TINY PHONES
   ============================================================================= */
@media (max-width: 375px) {
  .footer-main-grid { gap: 1.5rem; }
  .footer-col-title { font-size: 12px; }
  .footer-link      { font-size: 14px; }
  .social-link      { width: 44px; height: 44px; }
  .industries-grid  { gap: 6px; }
  .industry-name    { font-size: 11px; }
  .site-footer .trust-badge      { font-size: 12px; padding: 5px 9px; gap: 5px; }
  .footer-cta-btn   { font-size: 13px; padding: 12px 20px; }
}

/* =============================================================================
   LARGE DESKTOP (≥1600px) — scale the footer up for big / UHD displays so it
   has real presence and never looks compressed in the centre of a wide screen.
   Most footer sizing is fluid clamp() that caps ~1600px; this pushes past those
   caps. Container stays at 1520px (aligns with the page content shell).
   ============================================================================= */
@media (min-width: 1600px) {
  /* Full-bleed to MATCH THE NAVBAR — footer spans the whole screen (same inset),
     so the brand/contact edges line up with the navbar's logo/CTA on big displays. */
  .site-footer .container { max-width: none; padding-inline: clamp(3rem, 4vw, 5rem); }
  @media (min-width: 1600px) {
  /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
  .site-footer .container { padding-inline: clamp(3rem, 5.3333vw, 5rem); } }

  /* CTA strip */
  .footer-cta-headline { font-size: 2.5rem; }                 /* 40px */
  .footer-cta-btn      { font-size: 0.95rem; padding: 0.8rem 1.5rem; }  /* = canonical base */
  .footer-cta-btn svg  { width: 1.05rem; height: 1.05rem; }

  /* Main grid */
  .footer-main-grid    { gap: clamp(32px, 2.4vw, 44px) clamp(64px, 4.5vw, 88px); }
  @media (min-width: 1600px) {
  /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
  .footer-main-grid    { gap: clamp(32px, 3.2vw, 44px) clamp(64px, 6vw, 88px); } }
  .logo__img--footer   { height: 4rem; }                      /* 64px */
  .footer-desc         { font-size: 1.0625rem; max-width: 23rem; } /* 17px */
  .footer-col-heading  { font-size: 1.375rem; }               /* 22px */
  .footer-link         { font-size: 1.1875rem; }              /* 19px */
  .footer-nav-list     { gap: 0.75rem; }                       /* 12px */

  /* Contact */
  .site-footer .contact-label       { font-size: 0.75rem; }                /* 12px */
  .site-footer .contact-value       { font-size: 1.0625rem; }              /* 17px */
  .site-footer .contact-value--secondary { font-size: 0.9375rem; }         /* 15px — stays quieter than the primary email */
  .site-footer .contact-list        { gap: 1.125rem; }                     /* 18px */
  .site-footer .btn-contact-cta     { font-size: 0.9375rem; padding: 0.75rem 1.5rem; }

  /* Social — bigger touch targets + glyphs */
  .social-link         { width: 3rem; height: 3rem; }         /* 48px */
  .social-link svg     { width: 1.375rem; height: 1.375rem; } /* 22px */

  /* Trust badges + copyright */
  .site-footer .trust-badge         { font-size: 1rem; padding: 0.75rem 1.5rem; } /* 16px */
  .site-footer .trust-badges-list   { gap: 14px 32px; }
  .copyright-text,
  .copyright-link      { font-size: 1rem; }                   /* 16px */
}

/* =============================================================================
   EMAIL OVERFLOW FIX — prevents long email addresses breaking layout
   ============================================================================= */
.site-footer .contact-value {
  overflow-wrap: break-word;
  word-break: break-all;
}

/* The postal address is prose, not a URL — break-all would split the street
   name mid-word, so it wraps on spaces like normal text. */
.site-footer .contact-value--address {
  word-break: normal;
  line-height: 1.5;
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .footer-cta-btn,
  .footer-link,
  .social-link,
  .site-footer .trust-badge { transition: none; }
}




/* =============================================================================
   SCROLL REVEAL ANIMATION CLASSES
   ============================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.07s; }
.reveal-delay-2 { transition-delay: 0.14s; }
.reveal-delay-3 { transition-delay: 0.21s; }
.reveal-delay-4 { transition-delay: 0.28s; }
.reveal-delay-5 { transition-delay: 0.35s; }
.reveal-delay-6 { transition-delay: 0.42s; }
.reveal-delay-7 { transition-delay: 0.49s; }
.reveal-delay-8 { transition-delay: 0.56s; }


/* =============================================================================
   UNIVERSAL BACK-TO-TOP BUTTON (MODULE 9 — footer.js)
   Injected on pages that don't have their own back-to-top.
   ============================================================================= */
.spark-back-top {
  position: fixed;
  bottom: max(1.625rem, calc(1rem + env(safe-area-inset-bottom, 0px)));
  right: 1.375rem;  /* 22px */
  z-index: 500;
  width: 3.4rem;   /* 54px */
  height: 3.4rem;
  background: #D71920;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(215,25,32,0.42), 0 2px 8px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.24s ease, transform 0.24s ease, background 0.18s ease, box-shadow 0.18s ease;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.spark-back-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.spark-back-top svg { width: 1.35rem; height: 1.35rem; } /* 21.6px */
.spark-back-top:hover {
  background: #b0141a;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(215,25,32,0.52);
}
@media (max-width: 768px) {
  .spark-back-top {
    right: 14px;
    width: 48px;
    height: 48px;
    bottom: max(20px, calc(12px + env(safe-area-inset-bottom, 0px)));
  }
}
@media (min-width: 1920px) {
  .spark-back-top { width: 4.25rem; height: 4.25rem; right: 2rem; }
  .spark-back-top svg { width: 1.7rem; height: 1.7rem; }

}
@media (prefers-reduced-motion: reduce) {
  .spark-back-top { transition: opacity 0.1s; }
  .spark-back-top:hover { transform: none; }
}


/* =============================================================================
   IMAGE SKELETON PLACEHOLDERS
   Shimmer animation on all product/portfolio image wrappers while
   real photos are being designed/captured. Invisible once images load.
   ============================================================================= */
@keyframes spark-img-shimmer {
  0%   { background-position: -300% 0; }
  100% { background-position: 300% 0; }
}

/* Light-background pages: product catalog & product detail main */
.pc-card-img-wrap {
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%) !important;
  background-size: 300% 100% !important;
  animation: spark-img-shimmer 1.6s ease-in-out infinite;
}
.pd-main-img-wrap {
  background: linear-gradient(90deg, #f4f4f4 25%, #e8e8e8 50%, #f4f4f4 75%) !important;
  background-size: 300% 100% !important;
  animation: spark-img-shimmer 1.6s ease-in-out infinite;
}
/* Dark-background: related products cards */
.pd-rel-card-img-wrap {
  position: relative; /* required for pseudo-element */
  background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%) !important;
  background-size: 300% 100% !important;
  animation: spark-img-shimmer 1.6s ease-in-out infinite;
}
/* Portfolio masonry cards — dark shimmer + min-height so cards don't collapse */
.pf-card-img-wrap {
  background: linear-gradient(90deg, #1c1c1c 25%, #252525 50%, #1c1c1c 75%) !important;
  background-size: 300% 100% !important;
  animation: spark-img-shimmer 1.6s ease-in-out infinite;
  min-height: 160px;
}
/* Thumbnail strip in product detail */
.pd-thumb {
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%) !important;
  background-size: 300% 100% !important;
  animation: spark-img-shimmer 1.6s ease-in-out infinite;
}

/* When images load they paint over the wrapper background naturally —
   no JS needed. Once real images ship, remove the animation rules above. */

@media (prefers-reduced-motion: reduce) {
  .pc-card-img-wrap,
  .pd-main-img-wrap,
  .pd-rel-card-img-wrap,
  .pf-card-img-wrap,
  .pd-thumb {
    animation: none !important;
  }
}


/* =============================================================================
   PRINT STYLES
   ============================================================================= */
@media print {
  .footer-cta-strip,
  .footer-trust-badges { display: none; }
  .footer-main { background: white; color: black; }
  .footer-copyright { background: #eee; }
  a { color: inherit; }
}

@media (min-width: 1600px) {
  .footer-cta-label { font-size: 1rem; } /* 12px */
  .footer-cta-btn { font-size: 0.95rem; padding: 0.8rem 1.5rem; font-weight: 700; }  /* = canonical base */
}
/* =============================================================================
   FOOTER — 1080p+ STEP (the 1600px block above already full-bleeds & scales;
   this nudges the content up one more notch to match the site's 1920 treatment).
   Appended last so it wins over the earlier 1600 blocks at this width.
   ============================================================================= */
@media (min-width: 1920px) {
  /* ── CTA strip ── */
  .footer-cta-label    { font-size: 1.1rem; }
  .footer-cta-headline { font-size: 3rem; }
  .footer-cta-btn      { font-size: 1.3rem; padding: 1.2rem 1.3rem; }
  .footer-cta-btn svg  { width: 1.15rem; height: 1.15rem; }

  /* ── Main grid ── */
  .footer-main-grid    { gap: clamp(36px, 2.6vw, 52px) clamp(80px, 5vw, 112px); }
  @media (min-width: 1600px) {
  /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
  .footer-main-grid    { gap: clamp(36px, 3.4667vw, 52px) clamp(80px, 6.6667vw, 112px); } }
  .logo__img--footer   { height: 4.5rem; }
  .footer-desc         { font-size: 1.2rem; max-width: 26rem; }
  .footer-col-heading  { font-size: 1.6rem; }
  .footer-link         { font-size: 1.3rem; }
  .footer-nav-list     { gap: 0.85rem; }
  .footer-logo__name   { font-size: 1.6rem; }
  .footer-hours        { font-size: 1rem; }

  /* ── Contact ── */
  .site-footer .contact-label   { font-size: 1rem; }
  .site-footer .contact-value   { font-size: 1.3rem; }
  .site-footer .contact-value--secondary { font-size: 1.1rem; }
  .site-footer .contact-list    { gap: 1.35rem; }
  .site-footer .btn-contact-cta { font-size: 1.3rem; padding: 0.9rem 1.75rem; }

  /* ── Social ── */
  .social-link     { width: 3.5rem; height: 3.5rem; }
  .social-link svg { width: 1.7rem; height: 1.6rem; }

  /* ── Trust badges + copyright ── */
  .site-footer .trust-badge       { font-size: 1.15rem; padding: 0.9rem 1.75rem; }
  .site-footer .trust-badges-list { gap: 18px 40px; }
  .copyright-text,
  .copyright-link { font-size: 1.1rem; }

  /* ── Shipping partners ── */
  .footer-shipping        { padding-block: 30px; }
  .footer-shipping-inner  { gap: 20px; }
  .footer-shipping-label  { font-size: 1.05rem; letter-spacing: 0.1em; }
  .footer-shipping-carriers { gap: 20px; }
  .carrier-badge           { width: 122px; height: 60px; padding: 10px 18px; }
}


/* =============================================================================
   PHONE — LEGIBILITY
   The CTA strip's eyebrow was black at 0.7 alpha on the brand red, which
   measures ~3.2:1. White reads cleanly on that same red.
   ============================================================================= */
@media (max-width: 768px) {
  .footer-cta-label { color: rgba(255, 255, 255, 0.95); }
}

/* =============================================================================
   FOOTER HEIGHT — structural fix (client: "footer looks so big")
   Trimming padding alone wasn't visible enough. Two real changes:
     · ≥1200px: all six columns on ONE row instead of a 3x2 stack — that
       alone roughly halves .footer-main. Placed last so it beats the
       ≥1600/≥1920 gap + type scale-ups above.
     · ≤768px: collapsed accordion headers sit tight together instead of
       inheriting the 36px grid row gap; the brand block loses its
       duplicate hours line and reads at a smaller size.
   ============================================================================= */
@media (min-width: 1200px) {
  .footer-main { padding-block: clamp(36px, 3vw, 48px); }
  @media (min-width: 1600px) {
  /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
  .footer-main { padding-block: clamp(36px, 4vw, 48px); } }
  .footer-main-grid {
    grid-template-columns: 1.3fr 0.75fr 1.05fr 1fr 1fr 1.6fr;
    gap: 1.5rem clamp(1.75rem, 2.4vw, 3rem);
  }
  @media (min-width: 1600px) {
  /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
  .footer-main-grid {
    gap: 1.5rem clamp(1.75rem, 3.2vw, 3rem);
  } }
  .footer-col--brand,
  .footer-col--contact { grid-column: auto; }
  .footer-desc          { font-size: 0.9rem; line-height: 1.6; max-width: none; }
  .footer-col-heading   { font-size: 1rem; letter-spacing: 0.08em; margin-bottom: 0.65rem; }
  .footer-link          { font-size: clamp(0.875rem, 0.55vw + 0.45rem, 1rem); }
  @media (min-width: 1600px) {
  /* DESKTOP-SCALE generated by tools/desktop-scale.mjs */
  .footer-link          { font-size: clamp(0.875rem, 0.7333vw + 0.45rem, 1rem); } }
  .footer-nav-list      { gap: 0.4rem; }
  .site-footer .contact-value { font-size: 0.82rem; }
  .site-footer .contact-value--secondary { font-size: 0.8rem; }
  .site-footer .contact-list  { gap: 0.75rem; }
  .logo__img--footer    { height: 2.5rem; }
  .footer-hours         { font-size: 0.8rem; margin-top: 0.75rem; padding-top: 0.6rem; }
}

@media (max-width: 768px) {
  .footer-main      { padding-block: 28px 20px; }
  .footer-main-grid { gap: 0; }
  .footer-col--brand { margin-bottom: 1rem; }
  .footer-desc      { font-size: 0.9rem; line-height: 1.55; margin-bottom: 0.75rem; }
  .footer-hours     { display: none; }   /* duplicates "Business Hours" in Get In Touch */
  .footer-col-heading {
    margin-bottom: 0;
    padding-block: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .footer-col-heading.is-open { margin-bottom: 0.6rem; }
  /* padding only once open — the JS collapses with max-height:0 + overflow:hidden,
     and padding on a 0-height box still paints as a visible sliver */
  .footer-col-heading.is-open + nav,
  .footer-col-heading.is-open + .footer-contact { padding-bottom: 0.75rem; }
  .footer-col--contact .footer-col-heading { margin-bottom: 0; }
  .footer-col--contact .footer-col-heading.is-open { margin-bottom: 0.6rem; }
  .footer-cta-strip     { padding-block: 16px; }
  .footer-cta-headline  { font-size: 1.35rem; }
  .footer-cta-btn       { width: auto; }
  .footer-shipping      { padding-block: 16px; }
  .footer-copyright     { padding-block: 12px; }
  .copyright-inner      { gap: 6px; }
}