/* ==========================================================================
   MTH Group — Premium B2B Theme Tokens
   Single source of truth for colour. Change values here to re-theme the site.
   ========================================================================== */
:root {
  /* Canvas / surfaces (warm ivory ramp) */
  --canvas: #f6f1e4;
  --canvas-raised: #fbf8f0;
  --canvas-sunken: #ece5d4;
  --surface: #ffffff;
  --border: #ded5c1;
  --border-strong: #c9bda3;

  /* Ink (deep navy ramp) */
  --ink: #1a2547;
  --ink-strong: #101833;
  --ink-muted: #4a5372;
  --ink-subtle: #737a92;
  --ink-inverse: #f6f1e4;

  /* Brand / primary accent (indigo blue) */
  --brand: #2754bd;
  --brand-hover: #1f459e;
  --brand-active: #183779;
  --brand-soft: #e5ebf9;
  --brand-border: #b9c8ec;

  /* Signal / highlight (refined gold) */
  --signal: #d9a62b;
  --signal-hover: #bd8f20;
  --signal-soft: #f8eed6;
  --signal-border: #ecd9a6;

  /* Secondary accent (coral) */
  --accent: #ec725e;
  --accent-hover: #d55c49;
  --accent-soft: #fbe6e2;
  --accent-border: #f4c1b8;

  /* Disabled */
  --disabled-bg: #e8e2d3;
  --disabled-ink: #9a9382;

  /* Premium gradients */
  --gradient-hero: linear-gradient(135deg, #1a2547 0%, #223466 55%, #2754bd 100%);
  --gradient-cta: linear-gradient(135deg, #2754bd 0%, #1f459e 100%);
  --gradient-gold: linear-gradient(135deg, #d9a62b 0%, #bd8f20 100%);
  --gradient-canvas: linear-gradient(180deg, #f6f1e4 0%, #fbf8f0 100%);

  /* Refined shadows (navy-tinted, never pure black) */
  --shadow-xs: 0 1px 2px rgba(26, 37, 71, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 37, 71, 0.08);
  --shadow-md: 0 10px 24px -12px rgba(26, 37, 71, 0.22);
  --shadow-lg: 0 24px 60px -24px rgba(26, 37, 71, 0.28);
  --shadow-brand: 0 14px 34px -16px rgba(39, 84, 189, 0.45);

  --focus-ring: 0 0 0 3px rgba(39, 84, 189, 0.28);
}

/* Polished, palette-only interaction states — no layout/spacing/type changes. */
a,
button,
input,
select,
textarea,
.btn,
.card {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

::selection {
  background: var(--signal-soft);
  color: var(--ink-strong);
}

/* --------------------------------------------------------------------------
   Utility-class colour overrides — remapped onto the premium palette above.
   Generated from the classes already used in the markup; no class renamed.
   -------------------------------------------------------------------------- */
.bg-amber-400{background-color:#e0aa27 !important;}
.bg-black{background-color:#f6f1e4 !important;}
.bg-blue-400{background-color:#285dd9 !important;}
.bg-blue-500{background-color:#2557ca !important;}
.bg-blue-600{background-color:#2653ba !important;}
.bg-blue-700{background-color:#274fad !important;}
.bg-emerald-500{background-color:#be9122 !important;}
.bg-green-400{background-color:#d3a638 !important;}
.bg-green-500{background-color:#c3962a !important;}
.bg-purple-500{background-color:#275bd4 !important;}
.bg-purple-600{background-color:#2855be !important;}
.bg-red-100{background-color:#f6f1e4 !important;}
.bg-red-400{background-color:#f18e7e !important;}
.bg-red-500{background-color:#ee7b68 !important;}
.bg-sky-400{background-color:#2456ca !important;}
.bg-slate-700{background-color:#ceccc8 !important;}
.bg-slate-800{background-color:#d9d6cf !important;}
.bg-slate-900{background-color:#e4e0d7 !important;}
.bg-slate-950{background-color:#eee9de !important;}
.bg-white{background-color:#f6f1e4 !important;}
.bg-yellow-400{background-color:#dfa721 !important;}
.bg-yellow-500{background-color:#d39e20 !important;}
.border-amber-400{border-color:#e0aa27 !important;}
.border-blue-400{border-color:#285dd9 !important;}
.border-blue-500{border-color:#2557ca !important;}
.border-gray-100{border-color:#f6f1e4 !important;}
.border-gray-300{border-color:#283251 !important;}
.border-green-400{border-color:#d3a638 !important;}
.border-green-500{border-color:#c3962a !important;}
.border-purple-400{border-color:#3668dc !important;}
.border-red-100{border-color:#f6f1e4 !important;}
.border-red-400{border-color:#f18e7e !important;}
.border-sky-400{border-color:#2456ca !important;}
.border-slate-700{border-color:#ceccc8 !important;}
.border-slate-800{border-color:#d9d6cf !important;}
.border-slate-900{border-color:#e4e0d7 !important;}
.border-white{border-color:#f6f1e4 !important;}
.border-yellow-400{border-color:#dfa721 !important;}
.from-emerald-500{--tw-gradient-from:#f6f1e4 !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important;}
.from-orange-500{--tw-gradient-from:#f6f1e4 !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important;}
.from-purple-500{--tw-gradient-from:#f6f1e4 !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important;}
.from-white{--tw-gradient-from:#f6f1e4 !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important;}
.ring-yellow-400{border-color:#f6f1e4 !important;}
.text-amber{color:#1a2547 !important;}
.text-amber-400{color:#e0aa27 !important;}
.text-amber-500{color:#d8a221 !important;}
.text-black{color:#1a2547 !important;}
.text-blue-400{color:#285dd9 !important;}
.text-cyan{color:#1a2547 !important;}
.text-cyan-400{color:#2552bb !important;}
.text-emerald-400{color:#cc9e30 !important;}
.text-gray-200{color:#202b4b !important;}
.text-gray-300{color:#283251 !important;}
.text-gray-400{color:#484f68 !important;}
.text-gray-600{color:#90929b !important;}
.text-gray-700{color:#a4a5aa !important;}
.text-gray-800{color:#dad7d0 !important;}
.text-green{color:#1a2547 !important;}
.text-green-400{color:#d3a638 !important;}
.text-green-500{color:#c3962a !important;}
.text-orange-400{color:#e1ad30 !important;}
.text-purple-400{color:#3668dc !important;}
.text-red{color:#1a2547 !important;}
.text-red-400{color:#f18e7e !important;}
.text-red-500{color:#ee7b68 !important;}
.text-red-600{color:#e66e5a !important;}
.text-sky-400{color:#2456ca !important;}
.text-slate-200{color:#202a4b !important;}
.text-slate-300{color:#283251 !important;}
.text-slate-400{color:#474f67 !important;}
.text-slate-500{color:#6f7484 !important;}
.text-slate-600{color:#8f919a !important;}
.text-slate-700{color:#a4a5aa !important;}
.text-slate-800{color:#d9d6cf !important;}
.text-slate-900{color:#e4e0d7 !important;}
.text-white{color:#1a2547 !important;}
.text-yellow-300{color:#e3b035 !important;}
.text-yellow-400{color:#dfa721 !important;}
.text-yellow-600{color:#c6941c !important;}
.to-pink-500{--tw-gradient-to:#f6f1e4 !important;}
.to-purple-500{--tw-gradient-to:#f6f1e4 !important;}
.to-red-500{--tw-gradient-to:#f6f1e4 !important;}
.to-slate-200{--tw-gradient-to:#f6f1e4 !important;}
.to-slate-900{--tw-gradient-to:#f6f1e4 !important;}
.to-teal-500{--tw-gradient-to:#f6f1e4 !important;}
.to-white{--tw-gradient-to:#f6f1e4 !important;}
.via-white{--tw-gradient-stops:var(--tw-gradient-from),#f6f1e4,var(--tw-gradient-to) !important;}

/* --- Responsive safety: prevent decorative glows/marquees from causing
   horizontal scroll on small screens. `clip` keeps position:sticky working. --- */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
img, video, canvas, svg:not([width]) { max-width: 100%; }

/* ==========================================================================
   MTH Group visual system v2
   Shared finish for every public page. The previous palette remapped dark
   utility colours to pale values, which caused white-on-ivory text and weak
   contrast. These tokens keep the existing markup and interactions intact
   while giving every route the homepage's editorial, textured canvas.
   ========================================================================== */
:root {
  --canvas: #f4f7fb !important;
  --canvas-raised: #ffffff !important;
  --canvas-sunken: #e8eef6 !important;
  --surface: rgba(255,255,255,.82) !important;
  --border: rgba(16,39,70,.13) !important;
  --border-strong: rgba(16,39,70,.24) !important;
  --ink: #102746 !important;
  --ink-strong: #091b34 !important;
  --ink-muted: #52627a !important;
  --ink-subtle: #718096 !important;
  --ink-inverse: #ffffff !important;
  --brand: #1f5798 !important;
  --brand-hover: #17457d !important;
  --brand-active: #103662 !important;
  --brand-soft: #e7f0f7 !important;
  --brand-border: #b9cede !important;
  --signal: #b9862e !important;
  --signal-hover: #93691f !important;
  --signal-soft: #f7f0df !important;
  --signal-border: #e7d4a5 !important;
  --accent: #167f78 !important;
  --accent-hover: #0f625d !important;
  --accent-soft: #e2f2f0 !important;
  --accent-border: #acd8d3 !important;
  --disabled-bg: #e8edf3 !important;
  --disabled-ink: #8995a5 !important;
  --shadow-xs: 0 1px 2px rgba(16,39,70,.07) !important;
  --shadow-sm: 0 8px 24px rgba(16,39,70,.09) !important;
  --shadow-md: 0 18px 42px rgba(16,39,70,.14) !important;
  --shadow-lg: 0 30px 72px rgba(16,39,70,.18) !important;
}

html { background: #f4f7fb !important; }
body {
  background-color: #f4f7fb !important;
  background-image:
    radial-gradient(circle at 9% 4%, rgba(31,87,152,.12), transparent 27rem),
    radial-gradient(circle at 92% 11%, rgba(22,127,120,.10), transparent 24rem),
    radial-gradient(circle at 52% 72%, rgba(185,134,46,.07), transparent 30rem),
    linear-gradient(115deg, rgba(255,255,255,.92), rgba(244,247,251,.70) 48%, rgba(232,240,247,.82)) !important;
  color: #102746 !important;
  color-scheme: light;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
  background-image:
    linear-gradient(rgba(16,39,70,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,39,70,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 82%);
}

body > * { position: relative; z-index: 1; }
body > nav, body > header, #navbar, #top-bar { z-index: 50; }
body > #scroll-progress, body > #scroll-bar, body > #cursor-glow,
body > #particle-canvas, body > .wa-btn, body > #toast-box,
body > #greet, body > #vb { z-index: 999; }

/* Make the shared canvas show through opaque page sections without removing
   the existing card hierarchy or hero imagery. */
body > main, body > section, main > section {
  background-color: transparent !important;
}
section, main, footer, .section, .section-sm, .section-md, .page-section {
  background-color: transparent !important;
}

header, nav, #navbar {
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(16,39,70,.12) !important;
  box-shadow: 0 8px 28px rgba(16,39,70,.06);
}

.glass, .card, .panel, .service-slide-panel, .focus-card {
  background-color: rgba(255,255,255,.82) !important;
  border-color: rgba(16,39,70,.13) !important;
  box-shadow: 0 12px 30px rgba(16,39,70,.07);
}

/* Consistent readable ink for Tailwind-style classes used by the pages. */
.text-white, .text-black, .text-gray-200, .text-gray-300,
.text-gray-700, .text-gray-800, .text-slate-200, .text-slate-300,
.text-slate-700, .text-slate-800, .text-slate-900 {
  color: #102746 !important;
}
.text-gray-400, .text-gray-500, .text-gray-600,
.text-slate-400, .text-slate-500, .text-slate-600 {
  color: #52627a !important;
}
[style*="#f6f1e4"], [style*="#F6F1E4"] { color: #102746 !important; }

.bg-white { background-color: #ffffff !important; }
.bg-black { background-color: #102746 !important; }
.bg-slate-700, .bg-slate-800, .bg-slate-900, .bg-slate-950,
[class~="bg-slate-950/90"], [class~="bg-slate-900/90"] {
  background-color: rgba(232,240,247,.90) !important;
}
.border-white, .border-gray-100, .border-gray-300,
.border-slate-700, .border-slate-800, .border-slate-900 {
  border-color: rgba(16,39,70,.13) !important;
}

.btn-primary, .btn-gold, .btn-sm-gold, .nav-cta, .mobile-cta,
.service-tab.active, .btn-primary *, .btn-gold *, .btn-sm-gold * {
  color: #ffffff !important;
}
.btn-outline, .btn-sm-outline, .btn-ghost { color: #102746 !important; }
.btn-primary, .btn-gold, .btn-sm-gold, .nav-cta, .mobile-cta {
  background-image: linear-gradient(135deg, #b9862e, #93691f) !important;
  border-color: transparent !important;
}

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, select, textarea {
  color: #102746 !important;
  background-color: rgba(255,255,255,.92) !important;
  border-color: rgba(16,39,70,.20) !important;
}
input::placeholder, textarea::placeholder { color: #718096 !important; opacity: 1; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(31,87,152,.28) !important;
  outline-offset: 3px;
  box-shadow: none !important;
}

/* Premium, scalable mark. Keeping the old src values in markup means old
   integrations and metadata continue to work; CSS supplies the new asset. */
img[src*="mthlogo"], img[src*="mth-brand"] {
  content: url("../mth-brand.svg") !important;
  object-fit: contain !important;
  background: transparent !important;
}
.nav-logo img, .chrome-logo img { filter: drop-shadow(0 5px 8px rgba(16,39,70,.12)); }
.logo-mark, .nav-logo-badge, .fb-badge {
  background: #102746 url("../mth-brand.svg") center / 100% 100% no-repeat !important;
  color: transparent !important;
  box-shadow: 0 10px 24px rgba(16,39,70,.16) !important;
  border: 1px solid rgba(197,150,58,.50) !important;
}

@media (max-width: 760px) {
  body::before { opacity: .28; background-size: 28px 28px; }
  .container, .container-sm, .container-xs { padding-left: 18px !important; padding-right: 18px !important; }
  .hero-content { padding-left: 18px !important; padding-right: 18px !important; }
  .hero-box { padding: 30px 24px !important; border-radius: 22px !important; }
  .hero-card { width: 100% !important; max-width: 360px; }
  .service-slide-panel { grid-template-columns: 1fr !important; }
  .service-body { padding: 30px 24px !important; }
  .focus-cta { grid-column: auto !important; }
  .nav-links { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}