/*
 * ████████████████████████████████████████████████████████████████████████████
 *  SWEDBANG — LUXURY THEME SYSTEM v3.0
 *  Applies globally to ALL pages. Deep Midnight Indigo + Neon Cyan + Gold
 *  DO NOT REMOVE — Core visual identity for entire website
 * ████████████████████████████████████████████████████████████████████████████
 */

/* ══════════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — Single source of truth
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --sw-bg-deep:    #04080f;
  --sw-bg-base:    #070c1a;
  --sw-bg-mid:     #0b1224;
  --sw-bg-card:    #0e1830;
  --sw-bg-glass:   rgba(14,24,48,0.88);
  --sw-bg-hover:   #121e38;

  /* Neon accent palette */
  --sw-cyan:       #00D4FF;
  --sw-cyan-dim:   rgba(0,212,255,0.18);
  --sw-cyan-glow:  rgba(0,212,255,0.28);
  --sw-gold:       #F0C060;
  --sw-gold-dim:   rgba(240,192,96,0.18);
  --sw-gold-glow:  rgba(240,192,96,0.30);
  --sw-violet:     #9B79FF;
  --sw-magenta:    #FF2D78;

  /* Text hierarchy */
  --sw-text-h:     #F0F6FF;   /* headings */
  --sw-text-body:  #C4D4EC;   /* body text */
  --sw-text-muted: #8EA4C8;   /* secondary text */
  --sw-text-faint: #5A74A0;   /* captions */

  /* Borders */
  --sw-border:     rgba(0,180,255,0.12);
  --sw-border-hi:  rgba(0,200,255,0.28);
  --sw-border-gold: rgba(240,192,96,0.25);

  /* Gradients */
  --sw-grad-page:  linear-gradient(160deg,#04080f 0%,#070c1a 45%,#09102a 100%);
  --sw-grad-card:  linear-gradient(145deg,#0e1830 0%,#0a1222 100%);
  --sw-grad-hero:  linear-gradient(125deg,#020508 0%,#050d20 50%,#080f28 100%);
  --sw-grad-cyan:  linear-gradient(135deg,#00D4FF 0%,#0080CC 100%);
  --sw-grad-gold:  linear-gradient(135deg,#F0C060 0%,#C89020 100%);

  /* Radii */
  --sw-r-sm: 8px;
  --sw-r-md: 12px;
  --sw-r-lg: 18px;
  --sw-r-xl: 24px;

  /* Shadows */
  --sw-shadow-card:    0 8px 40px rgba(0,0,0,0.55),0 0 0 1px rgba(0,180,255,0.08);
  --sw-shadow-hover:   0 20px 60px rgba(0,0,0,0.70),0 0 0 1px rgba(0,200,255,0.18),0 0 40px rgba(0,180,255,0.10);
  --sw-shadow-gold:    0 20px 60px rgba(0,0,0,0.65),0 0 0 1px rgba(240,192,96,0.22),0 0 40px rgba(240,192,96,0.10);
  --sw-shadow-glow:    0 0 60px rgba(0,180,255,0.14);
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. GLOBAL PAGE BACKGROUND — deep midnight indigo on ALL pages
   ══════════════════════════════════════════════════════════════════════════════ */
html, body {
  background-color: var(--sw-bg-base) !important;
  color: var(--sw-text-body) !important;
}

body {
  background-image: var(--sw-grad-page) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Subtle animated ambient orb on every page */
body::before {
  content: '';
  position: fixed;
  top: -20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 70vh;
  background: radial-gradient(ellipse 70% 60% at 50% 0%,
    rgba(0,150,255,0.07) 0%,
    rgba(80,0,200,0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: sw-ambient-orb 12s ease-in-out infinite;
}

@keyframes sw-ambient-orb {
  0%,100% { opacity:0.6; transform:translateX(-50%) scale(1); }
  50%     { opacity:1.0; transform:translateX(-48%) scale(1.06); }
}

/* Every main container over the gradient */
#root, .sb-app, .sb-home, main, .page-wrapper, .site-content {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY — Perfect hierarchy, luxury readability
   ══════════════════════════════════════════════════════════════════════════════ */

/* Page/section headings */
h1, .h1,
.ip-title,
.ip-section-heading,
.luxury-h1,
.page-title {
  color: var(--sw-text-h) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h2, .h2 {
  color: var(--sw-text-h) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
}

h3, .h3 {
  color: #DDE8FF !important;
  font-weight: 600 !important;
}

h4, .h4, h5, h6 {
  color: #C8D8F0 !important;
  font-weight: 600 !important;
}

/* Body text */
p, li, span:not([class*="gradient"]):not(.sbhp-headline):not(.sbhp-section-title) {
  color: var(--sw-text-body);
}

/* Muted text */
.text-muted,
.ip-text-3,
.ip-text-4,
.section-eyebrow,
small {
  color: var(--sw-text-muted) !important;
}

/* Links */
a:not(.ip-btn-primary):not(.ip-btn-ghost):not(.sbhp-btn-primary):not(.sbhp-btn-secondary):not(.sb-nav a):not(.sb-mob-top-link) {
  color: var(--sw-cyan);
  transition: color 0.2s, text-shadow 0.2s;
}
a:not(.ip-btn-primary):not(.ip-btn-ghost):not(.sbhp-btn-primary):not(.sbhp-btn-secondary):hover {
  color: #7DD8FF;
  text-shadow: 0 0 16px rgba(0,200,255,0.35);
}

/* Accent / eyebrow labels */
.ip-section-eyebrow,
.ip-category,
.section-eyebrow,
[class*="eyebrow"],
[class*="overline"],
[class*="label--section"] {
  color: var(--sw-cyan) !important;
  text-shadow: 0 0 12px rgba(0,200,255,0.30);
}

/* ══════════════════════════════════════════════════════════════════════════════
   4. CARD SYSTEM — Glass + glow, luxurious depth
   ══════════════════════════════════════════════════════════════════════════════ */

/* Inner page cards */
.ip-card,
.luxury-card,
[class*="card"]:not(.sbhp-stat-card):not(.sbhp-supply-card):not(.sbhp-feature-card):not([class*="CardBack"]):not([class*="CardFront"]) {
  background: var(--sw-grad-card) !important;
  border: 1px solid var(--sw-border) !important;
  border-radius: var(--sw-r-md) !important;
  box-shadow: var(--sw-shadow-card) !important;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1) !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer top-edge light on all cards */
.ip-card::before,
.luxury-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,210,255,0.40), transparent);
  pointer-events: none;
}

/* Card hover state — lift + glow */
.ip-card:hover,
.luxury-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--sw-shadow-hover) !important;
  border-color: var(--sw-border-hi) !important;
}

/* ── Inner page capability / step items ── */
.ip-cap-item,
.ip-step {
  border-bottom: 1px solid var(--sw-border) !important;
  transition: background 0.25s;
}

.ip-cap-item:hover,
.ip-step:hover {
  background: rgba(0,180,255,0.03);
}

.ip-cap-title { color: var(--sw-text-h) !important; }
.ip-cap-desc  { color: var(--sw-text-muted) !important; }
.ip-cap-num   { color: var(--sw-cyan) !important; }
.ip-step-num  { color: var(--sw-cyan) !important; }
.ip-step-text { color: var(--sw-text-body) !important; }
.ip-step-text strong { color: var(--sw-text-h) !important; }

/* ── Stats strip ── */
.ct-stat-value,
.ip-stat-value { color: var(--sw-text-h) !important; font-weight: 900 !important; }
.ct-stat-label,
.ip-stat-label { color: var(--sw-text-muted) !important; }
.ct-stat-icon  { color: var(--sw-cyan) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   5. SECTION BACKGROUNDS — alternating dark tones on all inner pages
   ══════════════════════════════════════════════════════════════════════════════ */
.ip-page {
  background: var(--sw-bg-base) !important;
}

.ip-section {
  background: transparent;
}

.ip-section-alt,
.ip-cta-section {
  background: rgba(0,10,30,0.45) !important;
  backdrop-filter: blur(2px);
}

/* Page hero banner */
.ip-hero {
  background: linear-gradient(160deg, var(--sw-bg-mid) 0%, var(--sw-bg-base) 100%) !important;
  border-bottom: 1px solid var(--sw-border) !important;
  position: relative;
  overflow: hidden;
}

/* Glow bloom behind hero text */
.ip-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 80%;
  height: 180%;
  background: radial-gradient(ellipse 55% 60% at 30% 50%,
    rgba(0,150,255,0.09) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.ip-hero-inner { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   6. BUTTONS — Luxury CTAs on all pages
   ══════════════════════════════════════════════════════════════════════════════ */

/* Primary CTA */
.ip-btn-primary,
.luxury-button-primary,
[class*="btn-primary"]:not(.sbhp-btn-primary) {
  background: linear-gradient(135deg, #00B8E0 0%, #0055AA 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--sw-r-sm) !important;
  box-shadow: 0 0 24px rgba(0,180,255,0.25), 0 4px 16px rgba(0,80,180,0.30) !important;
  transition: all 0.30s cubic-bezier(0.23,1,0.32,1) !important;
  letter-spacing: 0.03em;
}

.ip-btn-primary:hover,
.luxury-button-primary:hover,
[class*="btn-primary"]:hover:not(.sbhp-btn-primary) {
  background: linear-gradient(135deg, #00D0FF 0%, #0066CC 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 0 40px rgba(0,200,255,0.40), 0 10px 28px rgba(0,80,180,0.40) !important;
  color: #ffffff !important;
}

/* Ghost / secondary */
.ip-btn-ghost,
[class*="btn-secondary"]:not(.sbhp-btn-secondary),
[class*="btn-ghost"] {
  border-color: var(--sw-border-hi) !important;
  color: var(--sw-text-body) !important;
  transition: all 0.25s !important;
}

.ip-btn-ghost:hover,
[class*="btn-secondary"]:hover:not(.sbhp-btn-secondary),
[class*="btn-ghost"]:hover {
  border-color: var(--sw-cyan) !important;
  color: var(--sw-cyan) !important;
  box-shadow: 0 0 16px rgba(0,200,255,0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   7. FORMS — Luxury input styling
   ══════════════════════════════════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
  background: rgba(10,18,38,0.80) !important;
  border: 1px solid var(--sw-border) !important;
  border-radius: var(--sw-r-sm) !important;
  color: var(--sw-text-body) !important;
  font-family: 'Satoshi', system-ui, sans-serif !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea:focus,
select:focus {
  border-color: var(--sw-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,200,255,0.12) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--sw-text-faint) !important;
}

/* Form card */
.ct-form-card {
  background: linear-gradient(145deg,#080d1c 0%,#0a1020 100%) !important;
  border: 1px solid rgba(0,200,255,0.12) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), inset 0 1px rgba(255,255,255,0.04) !important;
}

/* Contact channel cards */
.ct-channel-card {
  background: rgba(8,14,30,0.70) !important;
  border: 1px solid var(--sw-border) !important;
  transition: all 0.28s cubic-bezier(0.23,1,0.32,1) !important;
}

.ct-channel-card:hover {
  background: rgba(0,180,255,0.05) !important;
  border-color: var(--sw-border-hi) !important;
  transform: translateX(5px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.40) !important;
}

.ct-channel-value { color: var(--sw-text-h) !important; }
.ct-channel-label { color: var(--sw-text-faint) !important; }
.ct-channel-arrow { color: var(--sw-text-faint) !important; }
.ct-channel-card:hover .ct-channel-arrow { color: var(--sw-cyan) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   8. RELATED CARDS — sleek hover lift
   ══════════════════════════════════════════════════════════════════════════════ */
.ip-related-card {
  background: var(--sw-bg-card) !important;
  border: 1px solid var(--sw-border) !important;
  transition: all 0.25s !important;
}

.ip-related-card:hover {
  background: rgba(0,180,255,0.05) !important;
  border-color: var(--sw-border-hi) !important;
}

.ip-related-card-title { color: var(--sw-text-h) !important; }
.ip-related-card-desc  { color: var(--sw-text-muted) !important; }
.ip-related-arrow      { color: var(--sw-text-faint) !important; }
.ip-related-card:hover .ip-related-arrow { color: var(--sw-cyan) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   9. OFFICE CARDS (Contact page)
   ══════════════════════════════════════════════════════════════════════════════ */
.ct-office-card {
  background: linear-gradient(145deg, #0a1020 0%, #080d1c 100%) !important;
  border: 1px solid var(--sw-border) !important;
  box-shadow: var(--sw-shadow-card) !important;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1) !important;
}

.ct-office-card:hover {
  border-color: var(--sw-border-hi) !important;
  transform: translateY(-6px) !important;
  box-shadow: var(--sw-shadow-hover) !important;
}

.ct-office-card--hq {
  border-color: rgba(0,200,255,0.22) !important;
  background: linear-gradient(145deg, #0a1428 0%, #08102a 100%) !important;
}

.ct-office-country { color: var(--sw-text-h) !important; }
.ct-office-address { color: var(--sw-text-muted) !important; }
.ct-office-phone-number { color: var(--sw-text-h) !important; }
.ct-office-phone:hover .ct-office-phone-number { color: var(--sw-cyan) !important; }
.ct-office-email:hover { color: var(--sw-cyan) !important; }
.ct-hq-badge { color: var(--sw-cyan) !important; border-color: rgba(0,200,255,0.22) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   10. TABLES — inner page tables
   ══════════════════════════════════════════════════════════════════════════════ */
table {
  background: var(--sw-bg-card) !important;
  border: 1px solid var(--sw-border) !important;
  border-radius: var(--sw-r-md);
  overflow: hidden;
  width: 100%;
}

th {
  background: rgba(0,180,255,0.08) !important;
  color: var(--sw-text-h) !important;
  border-bottom: 1px solid var(--sw-border-hi) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 14px 16px;
}

td {
  color: var(--sw-text-body) !important;
  border-bottom: 1px solid var(--sw-border) !important;
  padding: 13px 16px;
  font-size: 14.5px;
}

tr:last-child td { border-bottom: none !important; }
tr:hover td { background: rgba(0,180,255,0.03) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   11. SCROLL-REVEAL ANIMATIONS — applied globally
   ══════════════════════════════════════════════════════════════════════════════ */
@keyframes sw-fade-up {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes sw-fade-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes sw-slide-right {
  from { opacity:0; transform:translateX(-20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes sw-scale-in {
  from { opacity:0; transform:scale(0.94); }
  to   { opacity:1; transform:scale(1); }
}

/* Apply entrance animation to inner page sections */
.ip-section { animation: sw-fade-in 0.5s ease both; }

.ip-cap-item:nth-child(1) { animation: sw-slide-right 0.45s 0.05s ease both; }
.ip-cap-item:nth-child(2) { animation: sw-slide-right 0.45s 0.12s ease both; }
.ip-cap-item:nth-child(3) { animation: sw-slide-right 0.45s 0.19s ease both; }
.ip-cap-item:nth-child(4) { animation: sw-slide-right 0.45s 0.26s ease both; }
.ip-cap-item:nth-child(5) { animation: sw-slide-right 0.45s 0.33s ease both; }

/* Cards stagger in */
.ip-card {
  animation: sw-fade-up 0.5s ease both;
}

/* Office cards stagger */
.ct-office-card:nth-child(1) { animation: sw-scale-in 0.4s 0.05s ease both; }
.ct-office-card:nth-child(2) { animation: sw-scale-in 0.4s 0.10s ease both; }
.ct-office-card:nth-child(3) { animation: sw-scale-in 0.4s 0.15s ease both; }
.ct-office-card:nth-child(4) { animation: sw-scale-in 0.4s 0.20s ease both; }
.ct-office-card:nth-child(5) { animation: sw-scale-in 0.4s 0.25s ease both; }
.ct-office-card:nth-child(6) { animation: sw-scale-in 0.4s 0.30s ease both; }

/* Channel cards */
.ct-channel-card:nth-child(1) { animation: sw-slide-right 0.4s 0.05s ease both; }
.ct-channel-card:nth-child(2) { animation: sw-slide-right 0.4s 0.12s ease both; }
.ct-channel-card:nth-child(3) { animation: sw-slide-right 0.4s 0.19s ease both; }

/* ══════════════════════════════════════════════════════════════════════════════
   12. GLOW PULSE MICRO-ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════════ */
@keyframes sw-glow-pulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(0,200,255,0.14), 0 0 18px rgba(0,200,255,0.08); }
  50%     { box-shadow: 0 0 0 1px rgba(0,200,255,0.28), 0 0 36px rgba(0,200,255,0.16); }
}

@keyframes sw-text-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Accent number/stat elements get a subtle glow pulse */
.ip-stat-value,
.ct-stat-value {
  animation: sw-text-shimmer 6s linear infinite;
  background: linear-gradient(90deg, #FFFFFF 0%, #00D4FF 50%, #FFFFFF 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* HQ badge pulse */
.ct-hq-badge {
  animation: sw-glow-pulse 3s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   13. SCROLLBAR — Dark luxury style
   ══════════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sw-bg-base); }
::-webkit-scrollbar-thumb {
  background: rgba(0,180,255,0.25);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,200,255,0.45);
}

/* ══════════════════════════════════════════════════════════════════════════════
   14. SELECTION HIGHLIGHT
   ══════════════════════════════════════════════════════════════════════════════ */
::selection {
  background: rgba(0,200,255,0.22);
  color: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════════════════
   15. FOOTER — dark luxury
   ══════════════════════════════════════════════════════════════════════════════ */
footer,
#main-footer,
.sb-footer,
[class*="footer"] {
  background: linear-gradient(180deg, #050a18 0%, #040810 100%) !important;
  border-top: 1px solid var(--sw-border) !important;
  color: var(--sw-text-muted) !important;
}

footer a, [class*="footer"] a {
  color: var(--sw-text-muted) !important;
  transition: color 0.2s !important;
}

footer a:hover, [class*="footer"] a:hover {
  color: var(--sw-cyan) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   16. INNER PAGE — prose / legal / policy pages
   ══════════════════════════════════════════════════════════════════════════════ */
.ip-prose,
.prose,
[class*="prose"],
.legal-content,
.policy-content {
  color: var(--sw-text-body) !important;
  line-height: 1.80;
}

.ip-prose h2, .ip-prose h3,
.prose h2, .prose h3 {
  color: var(--sw-text-h) !important;
  margin-top: 2em;
}

.ip-prose strong, .prose strong {
  color: var(--sw-text-h) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   17. HERO GRADIENT TEXT (inner pages)
   ══════════════════════════════════════════════════════════════════════════════ */
.ip-title,
.ip-cta-headline {
  background: linear-gradient(120deg,
    #FFFFFF 0%,
    #D8ECFF 25%,
    #AACCFF 48%,
    #FFFFFF 60%,
    #F0C060 76%,
    #FFFFFF 90%
  ) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: sw-text-shimmer 8s linear infinite !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   18. DIVIDERS & SEPARATORS
   ══════════════════════════════════════════════════════════════════════════════ */
hr,
.ip-office-divider,
.ct-office-divider {
  background: var(--sw-border) !important;
  border: none !important;
  height: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   19. PRODUCT / CATALOGUE CARDS
   ══════════════════════════════════════════════════════════════════════════════ */
[class*="product-card"],
[class*="ProductCard"],
[class*="catalogue-item"],
.hw-card {
  background: linear-gradient(145deg, #0c1628 0%, #090e1c 100%) !important;
  border: 1px solid var(--sw-border) !important;
  border-radius: var(--sw-r-md) !important;
  box-shadow: var(--sw-shadow-card) !important;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1) !important;
  overflow: hidden;
}

[class*="product-card"]:hover,
[class*="ProductCard"]:hover,
.hw-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--sw-shadow-hover) !important;
  border-color: var(--sw-border-hi) !important;
}

/* Product card price */
[class*="price"],
.price-tag {
  color: var(--sw-cyan) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   20. BADGES & TAGS
   ══════════════════════════════════════════════════════════════════════════════ */
[class*="badge"],
[class*="tag"],
[class*="chip"]:not(.sbhp-logo-chip) {
  background: rgba(0,200,255,0.10) !important;
  color: var(--sw-cyan) !important;
  border: 1px solid rgba(0,200,255,0.20) !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   21. RESPONSIVE — maintain luxury on mobile
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body::before { width:120vw; height:40vh; opacity:0.5; }
  .ip-hero::before { width:120%; }

  .ip-title { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
  .ip-subtitle { font-size: 14.5px !important; }
  .ip-section-heading { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
  .ip-section-body { font-size: 14px !important; }

  /* No stagger delay on mobile — instant load */
  .ip-cap-item, .ct-office-card, .ct-channel-card {
    animation-delay: 0s !important;
  }

  /* Tables — horizontal scroll on mobile */
  table { display: block; overflow-x: auto; }
}

@media (max-width: 960px) {
  body::before { opacity:0.6; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   22. REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .ip-section,
  .ip-cap-item,
  .ip-card,
  .ct-office-card,
  .ct-channel-card,
  .ip-title,
  .ip-cta-headline,
  .ip-stat-value,
  .ct-stat-value {
    animation: none !important;
    transition: none !important;
  }
}