/* ==========================================================================
   SEAMERGE GROUP — UNIFIED DESIGN SYSTEM
   Standardized against the Contact Us page style guide
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Manrope:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Color Palette */
  --white: #FFFFFF;
  --charcoal: #25221E;
  --charcoal-soft: #584F44;
  --accent: #2E5A8C;
  --accent-soft: #B7CBE0;
  --accent-tint: #EEF3F8;
  --line: #DCD3BD;
  --grey-bg: #F7F5F0;
  /* Aliases & Compatibility Tokens */
  --cream: transparent;
  --cream-2: transparent;
  --dark-bg: #17140F;
  --navy: var(--charcoal);
  --navy-2: var(--charcoal);
  --blue: var(--accent);
  --blue-soft: var(--accent-tint);
  --blue-deep: #234A75;
  --blue-pale: var(--accent-tint);
  --blue-pale-2: var(--accent-soft);
  --gold: var(--accent);
  --gold-soft: rgba(46, 90, 140, 0.14);
  --primary-gold: var(--accent);
  --ink: var(--charcoal);
  --paper: var(--white);
  --muted: var(--charcoal-soft);
  --border: var(--line);
  --bg: var(--white);
  --card: var(--white);
  --theme-bg: var(--white);
  --theme-white: var(--white);
  --theme-text: var(--charcoal);
  --theme-text-muted: var(--charcoal-soft);
  --theme-accent: var(--accent);

  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type Scale (+4px on body content as requested) */
  --font-hero: clamp(40px, 5.4vw, 68px);
  --font-h1: clamp(34px, 4.5vw, 56px);
  --font-h2: clamp(28px, 3.5vw, 36px);
  --font-h3: clamp(22px, 2.5vw, 28px);
  --font-body: 20px;
  --font-body-sm: 18px;
  --font-body-xs: 16px;
  --font-eyebrow: 13.5px;
  --font-btn: 13.5px;

  /* Layout & Reset Rules */
  --wrap-max: 1180px;
  --radius: 0px;
  --shadow: none;
  --shadow-hover: none;
  --ease: cubic-bezier(.16, .8, .24, 1);
}

/* ==========================================================================
   2. GLOBAL RESETS & TYPOGRAPHY OVERRIDES
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background-color: var(--white) !important;
  color: var(--charcoal) !important;
  font-family: var(--sans) !important;
  font-size: 20px;
  line-height: 1.75;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Universal Section Divider (Crisp 1px solid line after every section completes across all pages) */
section,
.site-section,
.page-section,
.intro-section,
.story-section,
.infra-section,
.purpose-section,
.journey-section,
.materials-section,
.certifications-section,
.promise-section,
.workflow-section,
.craft-cycle-section,
.client-marquee-section,
.precision-section,
.collection-section,
.wcu-section,
.services-section,
.services-process-section,
.services-cta-banner,
.contact-section,
.contact-hero-section,
.contact-metrics-bar,
.reach-us-section,
.contact-faq-section,
.contact-facility-section,
.testimonials-section,
.testimonials-hero-section,
.testimonials-clients-section,
.testimonials-stories-section,
.testimonials-collab-banner,
.testimonials-why-section,
.testimonials-start-section,
.testimonials-proofs-section,
.testimonials-pillars-section,
.compliance-hero-section,
.compliance-metrics-bar,
.compliance-certs-section,
.compliance-how-section,
.compliance-zero-waste-section,
.compliance-standards-section,
.compliance-cta-section,
.features-ribbon,
.who-we-are-section,
.knit-techniques-section,
.quality-assurance-section,
.sustainability-sourcing-section,
.partnership-service-section,
.cta-section,
.faq-custom-section,
.faq-cta-section,
.craft-cycle-header,
.process-grid,
.dealership-section,
.workshop-section,
.team-section,
.faqs-section,
.single-page,
.cat-hero,
.cat-grid-section,
.sub-hero,
.products-section,
.product-detail-section,
.cta-banner,
.cta-elevate-section,
.error-section {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--line, #DCD3BD) !important;
}

/* Why Seamerge grey background sections: 01 Knit Gauge, 03 Raw Fabrics & Yarn, 05 Quick Sample */
.knit-gauge-section,
.raw-fabrics-yarn-section,
.quick-sample-section {
  background-color: var(--grey-bg, #F7F5F0) !important;
  border-bottom: 1px solid var(--line, #DCD3BD) !important;
}

/* Headings: Cormorant Garamond 500 (Kept exact original sizes as requested) */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--serif) !important;
  color: var(--charcoal);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Ensure headings in dark/blue sections remain crisp white */
.mfr-strip h1,
.mfr-strip h2,
.mfr-strip h3,
.dark-section h1,
.dark-section h2,
.dark-section h3,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.footer h1,
.footer h2,
.footer h3,
.footer h4 {
  color: #FFFFFF !important;
}

.mfr-strip {
  background: linear-gradient(135deg, #234A75 0%, #2E5A8C 100%) !important;
  color: #FFFFFF !important;
}

.mfr-strip h2 {
  color: #FFFFFF !important;
}

.mfr-strip p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 19px !important;
}

/* CTA Banner (White theme with charcoal typography and brand buttons) */
.cta-banner {
  background: var(--white) !important;
  background-color: #FFFFFF !important;
  color: var(--charcoal) !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line) !important;
}

.cta-banner h1,
.cta-banner h2,
.cta-banner h3 {
  color: var(--charcoal) !important;
}

.cta-banner .eyebrow {
  color: var(--accent) !important;
}

h1,
.h1 {
  font-size: var(--font-h1);
}

h2,
.h2 {
  font-size: var(--font-h2);
}

h3,
.h3 {
  font-size: var(--font-h3);
}

/* Body Content (+4px across all content as requested) */
p,
.body-text,
.content-text,
.text-body,
.desc,
.description,
.card-desc,
.feature-desc,
.intro-description,
.story-content p,
.story-intro-text,
.wcu-body p,
.precision-text-body p,
.panel-desc,
.materials-card-desc,
.certifications-card-desc,
.timeline-card-desc,
.who-we-are-section .section-text,
.features-ribbon .ribbon-title,
.faq-accordion-body,
.faq-main-subtitle,
.product-desc,
.compliance-section-desc,
.stories-desc {
  font-family: var(--sans);
  color: var(--charcoal-soft);
  font-size: var(--font-body, 20px) !important;
  line-height: 1.75;
}

ul:not(.navbar ul):not(.btn-cssbuttons ul) li,
ol:not(.breadcrumbs ol) li {
  font-family: var(--sans);
  color: var(--charcoal-soft);
  font-size: 18px !important;
  line-height: 1.7;
}

td,
th {
  font-family: var(--sans);
  font-size: 17.5px !important;
}

a {
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent);
}

/* Remove default bootstrap border radiuses and shadows across elements */
.rounded,
.rounded-circle,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-5,
.rounded-pill,
.shadow,
.shadow-sm,
.shadow-lg {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   3. LAYOUT & CONTAINER
   ========================================================================== */
.wrap,
.custom-container {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}

@media (max-width: 900px) {

  .wrap,
  .custom-container {
    padding: 0 24px;
  }
}

/* ==========================================================================
   4. UI COMPONENTS (BUTTONS, CARDS, EYEBROWS, STATS, FORMS)
   ========================================================================== */
/* Eyebrow label */
.eyebrow,
.section-tag,
.sub-title,
.intro-subtitle,
.story-subtitle,
.purpose-subtitle,
.journey-subtitle,
.infra-subtitle,
.materials-subtitle,
.panel-step-badge,
.contact-hero-tag,
.testimonials-hero-tag {
  font-family: var(--sans) !important;
  font-size: var(--font-eyebrow) !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  display: inline-block;
  margin-bottom: 16px;
}

/* Primary Button (Global Deep Blue with White Text) */
.btn-primary,
.btn-main,
.theme-btn,
.reach-form-submit-btn,
.quote-modal-submit,
.btn-action,
.custom-btn,
.read-more-btn,
button.btn-primary,
a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #234A75 !important;
  background-color: #234A75 !important;
  color: #FFFFFF !important;
  border: 1px solid #234A75 !important;
  padding: 14px 24px !important;
  font-family: var(--sans) !important;
  font-size: var(--font-btn) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.btn-primary:hover,
.btn-main:hover,
.theme-btn:hover,
.reach-form-submit-btn:hover,
.quote-modal-submit:hover,
.btn-action:hover,
.custom-btn:hover,
.read-more-btn:hover {
  background: #173455 !important;
  background-color: #173455 !important;
  border-color: #173455 !important;
  color: #FFFFFF !important;
}

/* Header Animated Contact Pill Button */
.btn-cssbuttons {
  --btn-color: #2E5A8C !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.btn-cssbuttons::before {
  background: #2E5A8C !important;
  border-radius: 24px !important;
}

.btn-cssbuttons:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Buttons inside Blue-Background Sections (Keep White with Blue Text) */
.services-cta-banner .services-cta-btn,
.faq-cta-section .faq-cta-btn,
.cta-banner .cta-btn,
.blue-section .btn-primary,
.bg-blue .btn-primary {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #234A75 !important;
  border: 1px solid #FFFFFF !important;
}

.services-cta-banner .services-cta-btn:hover,
.faq-cta-section .faq-cta-btn:hover,
.cta-banner .cta-btn:hover,
.blue-section .btn-primary:hover,
.bg-blue .btn-primary:hover {
  background: #EEF3F8 !important;
  background-color: #EEF3F8 !important;
  color: #173455 !important;
  border-color: #EEF3F8 !important;
}

/* Ghost Button */
.btn-ghost,
.btn-secondary-outline,
.btn-outline,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid var(--charcoal) !important;
  color: var(--charcoal) !important;
  padding: 14px 24px !important;
  font-family: var(--sans) !important;
  font-size: var(--font-btn) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-ghost:hover,
.btn-secondary-outline:hover,
.btn-outline:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: transparent !important;
}

/* Standard Cards */
.card,
.feature-card,
.service-card,
.info-card,
.about-card,
.purpose-card,
.timeline-card,
.shipping-term-card,
.prod-stat-card,
.lead-card-box {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  padding: 44px;
}

@media (max-width: 768px) {

  .card,
  .feature-card,
  .service-card,
  .info-card,
  .about-card,
  .purpose-card,
  .timeline-card,
  .shipping-term-card,
  .prod-stat-card,
  .lead-card-box {
    padding: 28px 20px;
  }
}

/* Forms & Inputs */
input[type="text"]:not(.smg-inquiry-inp):not(.smg-code-inp):not(.smg-phone-inp):not(.smg-ft-news-inp),
input[type="email"]:not(.smg-inquiry-inp):not(.smg-ft-news-inp),
input[type="tel"]:not(.smg-inquiry-inp):not(.smg-phone-inp):not(.smg-ft-news-inp),
input[type="number"]:not(.smg-ft-news-inp),
input[type="search"]:not(.smg-ft-news-inp),
select:not(.smg-inquiry-sel):not(.smg-ft-news-inp),
textarea:not(.smg-inquiry-ta):not(.smg-ft-news-inp),
.form-control:not(.smg-inquiry-inp):not(.smg-ft-news-inp) {
  border: 1px solid var(--line) !important;
  background: var(--white) !important;
  color: var(--charcoal) !important;
  padding: 12px 14px !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100%;
}

input:not(.smg-ft-news-inp):focus,
select:not(.smg-ft-news-inp):focus,
textarea:not(.smg-ft-news-inp):focus,
.form-control:not(.smg-inquiry-inp):not(.smg-ft-news-inp):focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Fact / Stat Block Pattern */
.fact-value,
.stat-number,
.metric-number,
.contact-metric-number,
.services-stat-number,
.lead-card-val,
.prod-stat-val {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  color: var(--charcoal) !important;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1;
}

.fact-value span,
.stat-number span,
.metric-number span,
.contact-metric-number span,
.services-stat-number span {
  color: var(--accent) !important;
}

.fact-label,
.stat-label,
.metric-label,
.contact-metric-label,
.services-stat-label,
.lead-card-label {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--charcoal-soft) !important;
  margin-top: 8px;
}

/* FAQ Accordion Details / Summary */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}

.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.25s ease;
  line-height: 1;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

/* ==========================================================================
   5. HERO & SECTION STANDARDIZATIONS
   ========================================================================== */

/* Standard White Page Hero */
.page-hero,
.about-hero-section {
  background-color: var(--white) !important;
  color: var(--charcoal) !important;
  padding: 140px 0 60px !important;
  border-bottom: 1px solid var(--line);
}

.contact-hero-section {
  background-color: var(--white) !important;
  color: var(--charcoal) !important;
  border-bottom: none !important;
}

.contact-hero-title,
.intro-title {
  font-family: var(--serif) !important;
  font-size: var(--font-hero) !important;
  color: var(--charcoal) !important;
  font-weight: 500 !important;
  line-height: 1.15;
  margin-bottom: 24px;
}

.contact-hero-title span,
.intro-title em {
  color: var(--accent) !important;
  font-style: italic;
}

.contact-hero-desc,
.intro-description {
  font-family: var(--sans) !important;
  font-size: var(--font-body, 20px) !important;
  color: var(--charcoal-soft) !important;
  line-height: 1.75;
  max-width: 780px;
}

/* Contact Metrics Bar */
.contact-metrics-bar {
  border: 1px solid var(--line) !important;
  background: var(--white) !important;
  margin-top: 50px;
}

.contact-metric-item {
  padding: 32px 24px !important;
  border-right: 1px solid var(--line) !important;
  background: var(--white) !important;
}

.contact-metric-item:last-child {
  border-right: none !important;
}

/* Process Navigation Tabs on Services page */
.process-tab-nav-wrapper {
  background: var(--white) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  border-radius: 0px !important;
}

.process-tab-btn {
  font-family: var(--sans) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
}

.process-tab-btn.active {
  border-bottom-color: var(--accent) !important;
}

.process-tab-btn.active .stage-name {
  color: var(--accent) !important;
  font-weight: 700;
}

.process-tab-btn.active .stage-num {
  color: var(--accent) !important;
}

.process-panel {
  border-bottom: 1px solid var(--line) !important;
}

.panel-title {
  font-family: var(--serif) !important;
  font-size: var(--font-h2) !important;
  color: var(--charcoal) !important;
  font-weight: 500 !important;
}

.panel-desc {
  font-family: var(--sans) !important;
  color: var(--charcoal-soft) !important;
}

/* Why Seamerge Hero Banner */
.why-seamerge-banner {
  background-color: transparent;
  background-image: url('https://res.cloudinary.com/dsyoruznr/image/upload/v1784128376/seamerge/about/whyseamerge/juavsl3brq51o8auysob.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  height: 100vh !important;
  min-height: 100vh !important;
}

.why-seamerge-banner .why-hero-card {
  background: var(--white) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.why-seamerge-banner .why-hero-title {
  font-family: var(--serif) !important;
  color: var(--charcoal) !important;
  font-weight: 500 !important;
}

.why-seamerge-banner .why-hero-title span {
  color: var(--accent) !important;
  font-style: normal !important;
}

.why-seamerge-banner .why-hero-divider {
  background-color: var(--accent) !important;
}

/* Timeline & Milestones on About / Why Seamerge */
.timeline-line {
  background-color: var(--line) !important;
}

.timeline-badge {
  font-family: var(--serif) !important;
  background: var(--charcoal) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
}

.timeline-card {
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--white) !important;
  box-shadow: none !important;
}

.timeline-card-tag {
  color: var(--accent) !important;
  font-family: var(--sans) !important;
}

.timeline-card-pill {
  font-family: var(--sans) !important;
  color: var(--charcoal-soft) !important;
  background: var(--accent-tint) !important;
  border: 1px solid var(--accent-soft) !important;
  border-radius: 0 !important;
}

/* Craft Cycle Section Standard */
.craft-cycle-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--line);
  padding: 130px 0 60px !important;
}

.craft-cycle-header h1 {
  font-family: var(--serif) !important;
  font-size: var(--font-hero) !important;
  color: var(--charcoal) !important;
  letter-spacing: -0.01em !important;
  background: none !important;
  -webkit-text-fill-color: var(--charcoal) !important;
}

.craft-cycle-header p {
  color: var(--charcoal-soft) !important;
  font-family: var(--sans) !important;
}

.craft-cycle-grid .cycle-step-card {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.cycle-step-badge {
  font-family: var(--sans) !important;
  color: var(--accent) !important;
  background: var(--accent-tint) !important;
  border: 1px solid var(--accent-soft) !important;
  border-radius: 0 !important;
}

/* Breadcrumbs Standard */
.breadcrumbs,
.page-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 120px 0 30px !important;
}

.breadcrumbs h2,
.page-header h2 {
  font-family: var(--serif) !important;
  font-size: var(--font-h1) !important;
  color: var(--charcoal) !important;
  font-weight: 500 !important;
}

.breadcrumbs ol,
.breadcrumbs ol li a {
  font-family: var(--sans) !important;
  color: var(--charcoal-soft) !important;
  font-size: 13px !important;
}

.breadcrumbs ol li a:hover {
  color: var(--accent) !important;
}

/* Client Marquee Logos: Always show in full original colors without hover required */
.client-marquee-item img {
  filter: none !important;
  opacity: 1 !important;
}

/* Home Hero Title Highlight */
.hero-title .hero-highlight {
  color: var(--accent, #2E5A8C) !important;
  font-style: italic;
}

/* ==========================================================================
   5. RESPONSIVE DESIGN SYSTEM BREAKPOINTS (320px - 1920px)
   ========================================================================== */

/* Touch-Friendly Global Interactive Rules */
button,
.btn,
.btn-brand-primary,
.btn-brand-secondary,
.btn-luxury-primary,
.btn-luxury-secondary,
.btn-luxury-blue,
.btn-cssbuttons,
input[type="submit"],
input[type="button"] {
  min-height: 44px;
  touch-action: manipulation;
}

/* ── LAPTOP & TABLET LANDSCAPE (max-width: 1024px) ── */
@media (max-width: 1024px) {

  .wrap,
  .custom-container {
    padding: 0 28px !important;
  }

  .contact-metrics-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .contact-metric-item:nth-child(2) {
    border-right: none !important;
  }

  .contact-metric-item:nth-child(1),
  .contact-metric-item:nth-child(2) {
    border-bottom: 1px solid var(--line) !important;
  }
}

/* ── TABLET PORTRAIT (max-width: 768px) ── */
@media (max-width: 768px) {
  :root {
    --font-hero: clamp(34px, 7vw, 48px);
    --font-h1: clamp(28px, 6vw, 40px);
    --font-h2: clamp(24px, 5vw, 32px);
    --font-h3: clamp(20px, 4vw, 24px);
    --font-body: 18px;
    --font-body-sm: 16px;
  }

  .wrap,
  .custom-container {
    padding: 0 20px !important;
  }

  /* Breadcrumbs on Tablet */
  .breadcrumbs,
  .page-header {
    padding: 95px 0 25px !important;
  }

  /* Hero & Headings */
  h1,
  .h1 {
    font-size: var(--font-h1) !important;
  }

  h2,
  .h2 {
    font-size: var(--font-h2) !important;
  }

  h3,
  .h3 {
    font-size: var(--font-h3) !important;
  }

  /* Forms on Tablet */
  .form-control,
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── MOBILE SCREENS (max-width: 480px) ── */
@media (max-width: 480px) {
  :root {
    --font-hero: clamp(28px, 8.5vw, 36px);
    --font-h1: clamp(26px, 7.5vw, 32px);
    --font-h2: clamp(22px, 6.5vw, 26px);
    --font-h3: clamp(18px, 5.5vw, 22px);
    --font-body: 17px;
    --font-body-sm: 15px;
  }

  .wrap,
  .custom-container {
    padding: 0 16px !important;
  }

  /* Breadcrumbs on Mobile */
  .breadcrumbs,
  .page-header {
    padding: 80px 0 20px !important;
  }

  /* Metric Bars & Stats to Single Column on Mobile */
  .contact-metrics-bar {
    grid-template-columns: 1fr !important;
  }

  .contact-metric-item {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 22px 18px !important;
  }

  .contact-metric-item:last-child {
    border-bottom: none !important;
  }

  /* Action Buttons Full Width on Small Screens */
  .btn-mobile-block {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Prevent any table overflow on mobile */
  table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── SMALL MOBILE (max-width: 360px) ── */
@media (max-width: 360px) {
  :root {
    --font-hero: 26px;
    --font-h1: 24px;
    --font-h2: 20px;
  }

  .wrap,
  .custom-container {
    padding: 0 12px !important;
  }
}