/* ═══════════════════════════════════════════════════════════════════
   shared.css — Common styles for index.html and supplier.html
   DO NOT duplicate any of these rules in page-level <style> blocks.
═══════════════════════════════════════════════════════════════════ */

/* ── Bootstrap container max-width override ── */
.container,
.container-xl { max-width: 1200px !important; }

/* ── Bold text ── */
b, strong { font-weight: bold; }

/* ── POSITIIVPLUS "II" gradient logo ── */
.positiivplus-logo {
  background: linear-gradient(180deg, #EF9B4E 18.25%, #C1D177 37.29%, #78CB9B 54.03%, #5EE0F7 69.44%, #2C5BFD 86.51%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* ── Badge pill ── */
.ui-badge {
  display: inline-block;
  background: linear-gradient(91.01deg, rgb(120, 203, 155) 1.73%, rgb(193, 209, 119) 109.71%);
  color: #232323;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 10px;
}

/* ── CTA Buttons ── */
.hiw-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.hiw-cta:hover        { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.hiw-cta:active       { transform: scale(0.97); }
.hiw-cta-dark         { background: #1f2024; color: #fff !important; border: 1px solid #1f2024; }
.hiw-cta-dark:hover   { color: #fff !important; }
.hiw-cta-light        { background: #fff; color: #1f2024 !important; border: 1.5px solid #ddd; transition: border-color .2s ease, box-shadow .2s ease; }
.hiw-cta-light:hover  { color: #1f2024 !important; border-color: #25D366; box-shadow: 0 2px 12px rgba(37,211,102,0.15); transform: none; }

/* ── WhatsApp CTA — "Talk to an Expert" etc. Same look/hover as the
   "Chat With Us" button (.hiw-cta-light), layered on top of whatever
   size/layout class the button already carries. ── */
a.wa-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #1f2024 !important;
  border: 1.5px solid #ddd;
  transition: border-color .2s ease, box-shadow .2s ease;
}
a.wa-cta:hover {
  color: #1f2024 !important;
  border-color: #25D366;
  box-shadow: 0 2px 12px rgba(37,211,102,0.15);
  transform: none;
}
a.wa-cta svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSAL SECTION HEADING SYSTEM
   One class for every section's main heading, one for every section's
   subheading — same typography everywhere on both pages, desktop and
   mobile. (Hero's H1/subtitle are a deliberate, functional exception —
   hero uses its own larger display type and is NOT included here.)

   Color is intentionally NOT set here — it stays defined per-section
   (scoped to that section's id/wrapper) so each section keeps its own
   heading color; only size/weight/line-height/letter-spacing/spacing
   are standardized.
═══════════════════════════════════════════════════════════════════ */
.section-heading {
  font-size: clamp(1.6rem, 2.7vw, 2.3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.section-subheading {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 20px;
}
@media (max-width: 767px) {
  .section-heading    { margin-bottom: 10px; }
  .section-subheading { font-size: 16px; margin-bottom: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSAL SECTION SPACING SYSTEM  —  single source of truth
   ───────────────────────────────────────────────────────────────────
   THE HIERARCHY

     Section            ← vertical rhythm, from the tokens below ONLY
     └── Inner container ← horizontal padding + max-width only
         └── Content     ← its own internal margins

   THE RULES

   1. Section gaps are PADDING, never margin. Sections never carry
      margin-top/margin-bottom, so two neighbours can't each add a gap
      (no double spacing) and no margin ever collapses through them.
   2. Every regular <section> on both pages gets the scale automatically.
      A block that acts as a section but isn't a <section> tag (a
      wrapper div) opts in with class="section-space".
   3. Only padding-top/padding-bottom are set here. Horizontal padding,
      max-width and background stay with each section, so layout and
      page width are untouched.
   4. Nothing here uses !important. A section that genuinely needs a
      different rhythm overrides it with its own ID selector and a
      comment saying why — see the exception list below.

   DELIBERATE EXCEPTIONS (documented at each override, not here):
     • Hero sections            #hero, #hero-supplier, #hero-buyer
     • Footer block             .bottom-dark-block, #reimagine
     • Sourcing stage (mobile)  #sourcingSection — a 100vh stage whose
                                children are absolutely positioned from
                                its padding box, so padding moves the
                                layout rather than the gap.
═══════════════════════════════════════════════════════════════════ */
:root {
  --section-y: 48px;         /* desktop, ≥992px */
  --section-y-tablet: 40px;  /* 768–991px */
  --section-y-mobile: 32px;  /* ≤767px */
}
section,
.section-space {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
@media (max-width: 991px) {
  section,
  .section-space { padding-top: var(--section-y-tablet); padding-bottom: var(--section-y-tablet); }
}
@media (max-width: 767px) {
  section,
  .section-space { padding-top: var(--section-y-mobile); padding-bottom: var(--section-y-mobile); }
}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM DARK BLOCK — Reimagine + Footer (shared by both pages)
═══════════════════════════════════════════════════════════════════ */
.bottom-dark-block {
  background: #fff;
  padding: 0 0 60px;
}
.bottom-dark-inner {
  background: #111;
  border-radius: 24px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  color: #fff;
  position: relative;
}

/* ── Reimagine section ── */
#reimagine {
  padding: 56px 56px 48px;
}
#reimagine .section-heading {
  color: #fff;
  margin-bottom: 0;
}
/* Sits in the right-hand column of #reimagine, so it fills that column
   rather than being capped at the old 380px left-column width. */
.re-support-box {
  background: rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  width: 100%;
}
.re-support-box h6 { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 0.3rem; }
.re-support-box p  { font-size: var(--fs-body, 14px); color: rgba(255,255,255,0.5); margin: 0; line-height: 1.55; }

.btn-rc {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  margin-top: auto;
}
.btn-rc.green { background: linear-gradient(94.41deg, #78CB9B -6.1%, #C1D177 112.81%); color: #0d2a1a; }
.btn-rc.blue  { background: linear-gradient(90.29deg, #2C5BFD -11.3%, #5EE0F7 99.49%); color: #fff; }
.btn-rc:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.btn-rc:active { transform: translateY(-1px) scale(0.97); }

/* ── Footer divider ── */
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 0 56px;
}

/* ── Footer ── */
footer {
  padding: 20px 56px 20px;
  position: relative;
}
.footer-logo-img    { display: block; height: auto; width: 260px; margin-bottom: 1.35rem; object-fit: contain; }
.footer-parent-logo { display: inline-block; height: auto; width: 160px; object-fit: contain; vertical-align: middle; }
.footer-parent      { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.3); margin-bottom: 0.2rem; }
.footer-parent-name { font-size: 1.3rem; font-weight: 800; color: rgba(255,255,255,0.85); letter-spacing: -0.5px; margin-bottom: 1.2rem; }
.footer-heading     { font-size: 0.88rem; font-weight: 700; color: #fff; margin-bottom: 0.9rem; }
.footer-link        { display: block; font-size: 0.88rem; color: rgba(255,255,255,0.55); margin-bottom: 0.55rem; text-decoration: none; transition: color 0.35s ease; }
.footer-link:hover  { color: #78CB9B; }

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.35s ease;
  margin-right: 0.4rem;
}
.social-btn:hover { border-color: #78CB9B; color: #78CB9B; }

.ask-us-btn {
  position: absolute;
  bottom: 40px;
  right: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.ask-us-bubble {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4cef9f, #38d996);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #0d2a1a;
  box-shadow: 0 4px 16px rgba(76,239,159,0.35);
}
.ask-us-btn span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
  line-height: 1.3;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .bottom-dark-block  { padding: 0 20px 32px; }
  #reimagine          { padding: 40px 24px 36px; }
  #reimagine .section-heading { line-height: 1.2; margin-bottom: 16px; }
  .footer-divider     { border-top: 2px solid rgb(255 255 255) !important; margin: 0 15px !important; }
  footer              { padding: 32px 24px 80px; }
  .footer-logo-img    { width: 180px; }

  /* ── Mobile footer order ──────────────────────────────────────
     logo → rule → Company | Contact (side by side) → parent co →
     socials. The `order`/`display:contents` combo used previously
     is unreliable in Safari, so the actual DOM is physically
     rebuilt into this sequence by JS (see index.html inline script,
     IS_MOBILE branch) into a flat set of `footer .row` children;
     this CSS just styles that resulting flat structure. ── */
  footer .row { display: flex; flex-direction: column; margin: 0; }
  footer .footer-logo-img   { width: 100%; }
  footer .footer-mobile-divider { border: none; border-top: 2px solid rgb(255 255 255); margin: 0; width: 100%; }
  footer .footer-mobile-pair { display: flex; gap: 16px; width: 100%; }
  footer .footer-mobile-pair .col-6 { width: 50%; max-width: 50%; flex: 0 0 50%; }
  footer .footer-parent     { width: 100%; margin-top: 0; }
  footer .footer-parent-name{ width: 100%; margin-bottom: 0.9rem; }
  footer .mt-3              { width: 100%; margin-top: 0 !important; }
  .ask-us-btn         { bottom: 24px; right: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE LOADER
═══════════════════════════════════════════════════════════ */
#page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.55s cubic-bezier(.22,1,.36,1), visibility 0.55s;
}
#page-loader.pl-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pl-logo-img { width: 150px; height: auto; display: block; }
.pl-ring {
  width: 38px; height: 38px;
  border: 3px solid #e8f5e4;
  border-top-color: #78CB9B;
  border-radius: 50%;
  animation: plSpin 0.75s linear infinite;
}
@keyframes plSpin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL UTILITY — .rvu
═══════════════════════════════════════════════════════════ */
.rvu {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(.22,1,.36,1),
              transform 0.65s cubic-bezier(.22,1,.36,1);
}
.rvu.rvu-in { opacity: 1; transform: translateY(0); }
.rvu-d1 { transition-delay: 0.10s; }
.rvu-d2 { transition-delay: 0.20s; }
.rvu-d3 { transition-delay: 0.30s; }
.rvu-d4 { transition-delay: 0.40s; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM ANIMATION UTILITIES
   Trigger: .is-visible  (added by IntersectionObserver once)
   JS removes animation class after transition so hover works.
═══════════════════════════════════════════════════════════ */

:root {
  --anim-ease : cubic-bezier(.22,.61,.36,1);
  --anim-dur  : 650ms;
  --anim-delay: 0ms;
}

/* ─── Shared initial hidden state ─────────────────────────── */
.fade-up, .fade-left, .fade-right,
.fade-scale, .zoom-in, .blur-in,
.stagger-item {
  opacity: 0;
  will-change: opacity, transform;
}

/* Per-variant initial transforms */
.fade-up,
.stagger-item   { transform: translateY(30px);
  transition: opacity var(--anim-dur) var(--anim-ease) var(--anim-delay),
              transform var(--anim-dur) var(--anim-ease) var(--anim-delay); }
.fade-left      { transform: translateX(-40px);
  transition: opacity var(--anim-dur) var(--anim-ease) var(--anim-delay),
              transform var(--anim-dur) var(--anim-ease) var(--anim-delay); }
.fade-right     { transform: translateX(40px);
  transition: opacity var(--anim-dur) var(--anim-ease) var(--anim-delay),
              transform var(--anim-dur) var(--anim-ease) var(--anim-delay); }
.fade-scale     { transform: scale(0.94) translateY(20px);
  transition: opacity var(--anim-dur) var(--anim-ease) var(--anim-delay),
              transform var(--anim-dur) var(--anim-ease) var(--anim-delay); }
.zoom-in        { transform: scale(0.96) translateY(20px);
  transition: opacity 800ms var(--anim-ease) var(--anim-delay),
              transform 800ms var(--anim-ease) var(--anim-delay); }
.blur-in        { filter: blur(6px); transform: translateY(20px);
  transition: opacity var(--anim-dur) var(--anim-ease) var(--anim-delay),
              transform var(--anim-dur) var(--anim-ease) var(--anim-delay),
              filter var(--anim-dur) var(--anim-ease) var(--anim-delay); }

/* ─── Revealed state (added by IntersectionObserver once) ─── */
.fade-up.is-visible, .fade-left.is-visible, .fade-right.is-visible,
.fade-scale.is-visible, .zoom-in.is-visible, .blur-in.is-visible,
.stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  filter: none;
}

/* ─── Delay helpers ──────────────────────────────────────── */
.anim-d1 { --anim-delay: 100ms; }
.anim-d2 { --anim-delay: 220ms; }
.anim-d3 { --anim-delay: 340ms; }
.anim-d4 { --anim-delay: 460ms; }
.anim-d5 { --anim-delay: 580ms; }

/* ─── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-left, .fade-right,
  .fade-scale, .zoom-in, .blur-in,
  .stagger-item {
    opacity: 1 !important; transform: none !important;
    filter: none !important; transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SHARED HOVER ENHANCEMENTS
═══════════════════════════════════════════════════════════ */
/* Re-card lift */

/* ═══════════════════════════════════════════════════════════
   THE READINESS FORUM — shared between index.html and supplier.html
   (both use #readiness-fits with the same .rfits-* markup).
═══════════════════════════════════════════════════════════ */
#readiness-fits { background: #fff; }
.rfits-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 56px 64px;
  min-height: 320px;
  display: flex;
  align-items: center;
  text-align: left;
  color: #fff;
  /* finished composite — blue→green conference photo, no additional
     treatment needed */
  background: url("images/CTA before footer.webp") center / cover no-repeat;
  background-color: #1c1c1c;
}
.rfits-content { position: relative; z-index: 1; max-width: 560px; }
.rfits-title {
  font-family: 'K2D', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}
.rfits-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 32px;
}
.rfits-host { display: flex; flex-direction: column; gap: 8px; }
.rfits-host-label { font-family: 'K2D', sans-serif; font-size: 14px; color: rgba(255,255,255,0.85); }
.rfits-host-logo { width: 140px; height: auto; display: block; }

@media (max-width: 767px) {
  .rfits-card {
    padding: 32px 24px 28px;
    border-radius: 20px;
    aspect-ratio: 357 / 450;
    min-height: 0;
    background-image: url("images/CTA before footer_mob.webp");
    align-items: stretch;
  }
  .rfits-content {
    max-width: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  .rfits-title { font-size: 26px; line-height: 1.2; }
  .rfits-sub { font-size: 17px; margin: 14px 0 0; }
  .rfits-host { margin-top: auto; }
  .rfits-host-logo { width: 120px; }
}