/* ============================================================
 * MID Luxury Redesign — Design System CSS
 * All rules scoped to .mid-* custom classes (set via Elementor
 * CSS Classes field). No global selectors.
 * ============================================================ */

/* DESIGN TOKENS */
:root {
  --mid-warm-white:  #FDFCF9;
  --mid-ivory:       #FAF8F3;
  --mid-champagne:   #F5EDD8;
  --mid-pale-gold:   #E8D5B0;
  --mid-light-gold:  #C9A96E;
  --mid-dark-gold:   #A07840;
  --mid-navy:        #1A2340;
  --mid-navy-deep:   #0F1520;
  --mid-navy-mid:    #243060;
  --mid-charcoal:    #1C1C1C;
  --mid-text-dark:   #2A2A2A;
  --mid-text-mid:    #5A5A5A;
  --mid-text-light:  #9A9A9A;
  --mid-font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mid-font-sans:   'Jost', 'Helvetica Neue', system-ui, sans-serif;
  --mid-transition:  0.3s ease;
}

/* ============================================================
 * SECTION 1 — HERO (mid-luxury-hero)
 * Elementor: Background = Video, URL = https://vimeo.com/1187287359
 * Height = 100vh, Stretch to full width
 * ============================================================ */

.mid-luxury-hero > .elementor-container {
  position: relative;
  z-index: 2;
}
.mid-luxury-hero .mid-hero-overline .elementor-heading-title,
.mid-luxury-hero .mid-hero-overline {
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.35em !important;
  color: var(--mid-light-gold) !important;
  text-transform: uppercase !important;
}
.mid-luxury-hero .elementor-heading-title {
  color: var(--mid-warm-white);
  font-family: var(--mid-font-serif);
}
.mid-luxury-hero h1.elementor-heading-title {
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.mid-luxury-hero .mid-hero-subtitle .elementor-widget-container p,
.mid-luxury-hero .mid-hero-subtitle p {
  font-family: var(--mid-font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(253, 252, 249, 0.82);
  max-width: 560px;
}
.mid-luxury-hero .mid-btn-navy .elementor-button {
  background: var(--mid-navy) !important;
  color: var(--mid-warm-white) !important;
  border: 1px solid var(--mid-navy) !important;
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  padding: 17px 40px !important;
  border-radius: 0 !important;
  transition: background var(--mid-transition), border-color var(--mid-transition) !important;
}
.mid-luxury-hero .mid-btn-navy .elementor-button:hover {
  background: var(--mid-light-gold) !important;
  border-color: var(--mid-light-gold) !important;
}
.mid-luxury-hero .mid-btn-ghost .elementor-button {
  background: transparent !important;
  color: var(--mid-warm-white) !important;
  border: 1px solid rgba(253, 252, 249, 0.45) !important;
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  padding: 17px 40px !important;
  border-radius: 0 !important;
  transition: border-color var(--mid-transition), color var(--mid-transition) !important;
}
.mid-luxury-hero .mid-btn-ghost .elementor-button:hover {
  border-color: var(--mid-light-gold) !important;
  color: var(--mid-light-gold) !important;
}

/* ============================================================
 * SECTION 2 — AUTHORITY BAR (mid-authority-bar)
 * ============================================================ */

.mid-authority-bar {
  border-top: 1px solid var(--mid-pale-gold);
  border-bottom: 1px solid var(--mid-pale-gold);
}
.mid-authority-bar .mid-authority-item {
  text-align: center;
  padding: 56px 24px;
  border-right: 1px solid var(--mid-pale-gold);
}
.mid-authority-bar .mid-authority-item:last-child {
  border-right: none;
}
.mid-authority-bar .mid-stat-number {
  font-family: var(--mid-font-serif);
  font-size: 52px;
  font-weight: 300;
  color: var(--mid-navy);
  line-height: 1;
  margin-bottom: 10px;
}
.mid-authority-bar .mid-stat-label {
  font-family: var(--mid-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--mid-text-mid);
  text-transform: uppercase;
}

/* ============================================================
 * SECTION 3 — ABOUT MID (mid-about-section)
 * ============================================================ */

.mid-about-section .mid-section-overline {
  font-family: var(--mid-font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: var(--mid-light-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}
.mid-about-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(38px, 4vw, 58px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  color: var(--mid-charcoal) !important;
  margin-bottom: 28px !important;
}
.mid-about-section .elementor-text-editor p {
  font-family: var(--mid-font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--mid-text-mid);
}
.mid-about-section .mid-link-gold-anchor,
.mid-about-section a.mid-link-gold {
  font-family: var(--mid-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--mid-light-gold);
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mid-pale-gold);
  padding-bottom: 3px;
  transition: color var(--mid-transition), border-color var(--mid-transition);
  display: inline-block;
  margin-top: 24px;
}
.mid-about-section a.mid-link-gold:hover {
  color: var(--mid-dark-gold);
  border-color: var(--mid-dark-gold);
}

/* ============================================================
 * SECTION 4 — NATURAL DIAMONDS (mid-diamonds-section)
 * ============================================================ */

.mid-diamonds-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 300 !important;
  color: var(--mid-charcoal) !important;
}
.mid-diamonds-section .mid-section-sub p {
  font-family: var(--mid-font-sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--mid-text-mid);
  line-height: 1.8;
}
.mid-diamond-card {
  display: block;
  background: var(--mid-warm-white);
  border: 1px solid var(--mid-pale-gold);
  padding: 48px 36px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow var(--mid-transition), transform var(--mid-transition);
}
.mid-diamond-card:hover {
  box-shadow: 0 12px 40px rgba(26, 35, 64, 0.09);
  transform: translateY(-4px);
}

/* ============================================================
 * SECTION 5 — FANCY COLOR (mid-fancy-section)
 * ============================================================ */

.mid-fancy-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 300 !important;
  color: var(--mid-charcoal) !important;
}

/* ============================================================
 * SECTION 6 — B2B SERVICES (mid-services-section)
 * ============================================================ */

.mid-services-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 300 !important;
  color: var(--mid-charcoal) !important;
}
.mid-service-card {
  text-align: center;
  padding: 40px 28px;
}
.mid-service-card h3 {
  font-family: var(--mid-font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--mid-charcoal);
  margin-bottom: 14px;
}
.mid-service-card p {
  font-family: var(--mid-font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--mid-text-mid);
  line-height: 1.8;
}

/* ============================================================
 * SECTION 7 — SPECIALTY (mid-specialty-section)
 * ============================================================ */

.mid-specialty-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 300 !important;
  color: var(--mid-charcoal) !important;
}
.mid-specialty-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--mid-pale-gold);
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.mid-specialty-item:last-child { border-bottom: none; }
.mid-specialty-item .mid-num {
  font-family: var(--mid-font-serif);
  font-size: 52px;
  font-weight: 300;
  color: var(--mid-pale-gold);
  line-height: 1;
  flex-shrink: 0;
  width: 64px;
}
.mid-specialty-item h3 {
  font-family: var(--mid-font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--mid-charcoal);
  margin-bottom: 8px;
}
.mid-specialty-item p {
  font-family: var(--mid-font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--mid-text-mid);
  line-height: 1.75;
}

/* ============================================================
 * SECTION 8 — DIGITAL / API (mid-digital-section)
 * ============================================================ */

.mid-digital-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 300 !important;
  color: var(--mid-warm-white) !important;
}
.mid-digital-section .elementor-text-editor p {
  font-family: var(--mid-font-sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(253, 252, 249, 0.75);
  line-height: 1.85;
  max-width: 580px;
}
.mid-digital-section .mid-btn-ghost .elementor-button {
  background: transparent !important;
  color: var(--mid-light-gold) !important;
  border: 1px solid rgba(201, 169, 110, 0.5) !important;
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  padding: 16px 40px !important;
  border-radius: 0 !important;
}
.mid-digital-section .mid-btn-ghost .elementor-button:hover {
  border-color: var(--mid-light-gold) !important;
  background: rgba(201, 169, 110, 0.08) !important;
}
.mid-api-tag {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid rgba(201, 169, 110, 0.4);
  font-family: var(--mid-font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--mid-light-gold);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--mid-transition), background var(--mid-transition);
}
.mid-api-tag:hover {
  border-color: var(--mid-light-gold);
  background: rgba(201, 169, 110, 0.1);
}
.mid-api-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
 * SECTION 9 — TRUST / CERTIFICATION (mid-trust-section)
 * ============================================================ */

.mid-trust-section {
  border-top: 1px solid var(--mid-pale-gold);
}
.mid-trust-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 300 !important;
  color: var(--mid-charcoal) !important;
}
.mid-trust-pillar {
  text-align: center;
  padding: 40px 24px;
}
.mid-trust-pillar h4 {
  font-family: var(--mid-font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--mid-charcoal);
  margin-bottom: 10px;
}
.mid-trust-pillar p {
  font-family: var(--mid-font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--mid-text-mid);
  line-height: 1.65;
}

/* ============================================================
 * SECTION 10 — GLOBAL PRESENCE (mid-global-section)
 * ============================================================ */

.mid-global-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 300 !important;
  color: var(--mid-warm-white) !important;
}
.mid-global-section .elementor-text-editor p {
  font-family: var(--mid-font-sans);
  color: rgba(253, 252, 249, 0.65);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
}
.mid-offices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.mid-office-item {
  padding: 36px 28px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  transition: background var(--mid-transition);
}
.mid-office-item:hover {
  background: rgba(201, 169, 110, 0.06);
}
.mid-city {
  font-family: var(--mid-font-serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--mid-warm-white);
  margin-bottom: 6px;
}
.mid-country {
  font-family: var(--mid-font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--mid-light-gold);
  text-transform: uppercase;
}

/* ============================================================
 * SECTION 11 — BLOG / INSIGHTS (mid-insights-section)
 * ============================================================ */

.mid-insights-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 300 !important;
  color: var(--mid-charcoal) !important;
}
.mid-blog-card {
  background: var(--mid-warm-white);
  border: 1px solid var(--mid-pale-gold);
  overflow: hidden;
  transition: box-shadow var(--mid-transition);
}
.mid-blog-card:hover {
  box-shadow: 0 8px 32px rgba(26, 35, 64, 0.08);
}

/* ============================================================
 * SECTION 12 — TRADE CTA (mid-cta-section)
 * ============================================================ */

.mid-cta-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(38px, 5vw, 68px) !important;
  font-weight: 300 !important;
  color: var(--mid-charcoal) !important;
}
.mid-cta-section .elementor-text-editor p {
  font-family: var(--mid-font-sans);
  font-size: 17px;
  font-weight: 300;
  color: var(--mid-text-mid);
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto;
}
.mid-cta-section .mid-btn-navy .elementor-button,
.mid-cta-section .mid-btn-cta-navy .elementor-button {
  background: var(--mid-navy) !important;
  color: var(--mid-warm-white) !important;
  border: 1px solid var(--mid-navy) !important;
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  padding: 18px 52px !important;
  border-radius: 0 !important;
  transition: background var(--mid-transition) !important;
}
.mid-cta-section .mid-btn-navy .elementor-button:hover,
.mid-cta-section .mid-btn-cta-navy .elementor-button:hover {
  background: var(--mid-navy-deep) !important;
  border-color: var(--mid-navy-deep) !important;
}
.mid-cta-section .mid-btn-ghost .elementor-button {
  background: transparent !important;
  color: var(--mid-charcoal) !important;
  border: 1px solid rgba(28, 28, 28, 0.4) !important;
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  padding: 18px 52px !important;
  border-radius: 0 !important;
}
.mid-cta-section .mid-btn-ghost .elementor-button:hover {
  border-color: var(--mid-charcoal) !important;
}

/* ============================================================
 * SHARED UTILITIES
 * ============================================================ */

.mid-section-overline {
  font-family: var(--mid-font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: var(--mid-light-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}
.mid-luxury-divider {
  width: 48px;
  height: 1px;
  background: var(--mid-light-gold);
  margin: 20px 0 36px;
}
.mid-luxury-divider--center {
  margin-left: auto;
  margin-right: auto;
}
.mid-dark-divider {
  background: var(--mid-light-gold);
}

/* ============================================================
 * WIDGET-BASED REBUILD OVERRIDES
 * Styles for the fully Elementor-editable version of page 7188.
 * Targets real Heading / Text / Button / Image / Divider widgets
 * (rendered as .elementor-heading-title / .elementor-text-editor /
 * .elementor-button / .elementor-widget-image) that carry the
 * scoped .mid-* classes via Advanced → CSS Classes. No inline HTML.
 * ============================================================ */

/* --- Overline as a Heading widget --- */
.mid-section-overline .elementor-heading-title {
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.35em !important;
  color: var(--mid-light-gold) !important;
  text-transform: uppercase !important;
}

/* --- Hero text widgets --- */
.mid-luxury-hero .mid-hero-title .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(52px, 6vw, 88px) !important;
  font-weight: 300 !important;
  line-height: 1.04 !important;
  color: var(--mid-warm-white) !important;
}

/* --- Authority bar: stat number + label as Heading widgets --- */
.mid-authority-bar .mid-stat-number .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 52px !important;
  font-weight: 300 !important;
  color: var(--mid-navy) !important;
  line-height: 1 !important;
}
.mid-authority-bar .mid-stat-label .elementor-heading-title {
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  color: var(--mid-text-mid) !important;
  text-transform: uppercase !important;
}

/* --- Generic decorative glyph/icon as a Heading widget --- */
.mid-card-icon .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 48px !important;
  font-weight: 300 !important;
  color: var(--mid-light-gold) !important;
  line-height: 1 !important;
}

/* --- Diamond cards: column + widgets --- */
.mid-diamond-card .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: var(--mid-charcoal) !important;
}
.mid-diamond-card .elementor-text-editor {
  font-family: var(--mid-font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--mid-text-mid);
  line-height: 1.75;
}

/* --- Service cards (h3/p rules already exist; cover widget markup) --- */
.mid-service-card .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: var(--mid-charcoal) !important;
}
.mid-service-card .elementor-text-editor {
  font-family: var(--mid-font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--mid-text-mid);
  line-height: 1.8;
}

/* --- Fancy color swatch as an editable column (bg set in Elementor) --- */
.mid-swatch {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
}
.mid-swatch .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-weight: 300 !important;
  color: var(--mid-warm-white) !important;
}
.mid-swatch .mid-swatch-name .elementor-heading-title { font-size: 28px !important; }
.mid-swatch .mid-swatch-sub .elementor-heading-title {
  font-family: var(--mid-font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Specialty rows --- */
.mid-spec-item { border-bottom: 1px solid var(--mid-pale-gold); }
.mid-num .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 52px !important;
  font-weight: 300 !important;
  color: var(--mid-pale-gold) !important;
  line-height: 1 !important;
}

/* --- Digital / API tag buttons --- */
.mid-digital-section .mid-api-tag .elementor-button {
  background: transparent !important;
  color: var(--mid-light-gold) !important;
  border: 1px solid rgba(201, 169, 110, 0.4) !important;
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  padding: 10px 22px !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
}
.mid-digital-section .mid-api-tag .elementor-button:hover {
  border-color: var(--mid-light-gold) !important;
  background: rgba(201, 169, 110, 0.10) !important;
}

/* --- Trust pillars --- */
.mid-pillar-badge .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 40px !important;
  font-weight: 300 !important;
  color: var(--mid-navy) !important;
  line-height: 1 !important;
}

/* --- Global office items --- */
.mid-office-item .mid-city .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--mid-warm-white) !important;
}
.mid-office-item .mid-country .elementor-heading-title {
  font-family: var(--mid-font-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  color: var(--mid-light-gold) !important;
  text-transform: uppercase !important;
}

/* --- Blog cards --- */
.mid-blog-card .elementor-widget-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.mid-blog-cat .elementor-heading-title {
  font-family: var(--mid-font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  color: var(--mid-light-gold) !important;
  text-transform: uppercase !important;
}
.mid-blog-card .mid-blog-title .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--mid-charcoal) !important;
  line-height: 1.3 !important;
}
.mid-blog-card .elementor-text-editor {
  font-family: var(--mid-font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--mid-text-mid);
  line-height: 1.75;
}

/* --- About / Specialty editorial images --- */
.mid-about-image img,
.mid-specialty-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media (max-width: 1023px) {
  .mid-offices-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .mid-luxury-hero h1.elementor-heading-title {
    font-size: clamp(38px, 9vw, 64px);
  }
  .mid-authority-bar .mid-authority-item {
    border-right: none;
    border-bottom: 1px solid var(--mid-pale-gold);
  }
  .mid-offices-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * DYNAMIC LATEST POSTS  ([mid_latest_posts] shortcode output)
 * Luxury blog cards rendered from live WP_Query — matches the
 * static card look but updates automatically. Scoped to .mid-dyn-*.
 * ============================================================ */
.mid-dyn-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mid-dyn-card {
  background: var(--mid-warm-white);
  border: 1px solid var(--mid-pale-gold);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--mid-transition), transform var(--mid-transition);
}
.mid-dyn-card:hover {
  box-shadow: 0 8px 32px rgba(26, 35, 64, 0.08);
  transform: translateY(-3px);
}
.mid-dyn-card__media {
  display: block;
  overflow: hidden;
  line-height: 0;
}
.mid-dyn-card__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.mid-dyn-card:hover .mid-dyn-card__img { transform: scale(1.04); }
.mid-dyn-card__img--ph {
  background: linear-gradient(150deg, #1A2340, #243060);
}
.mid-dyn-card__body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.mid-dyn-card__cat {
  font-family: var(--mid-font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--mid-light-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}
.mid-dyn-card__title {
  font-family: var(--mid-font-serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--mid-charcoal);
  margin: 0 0 12px;
}
.mid-dyn-card__title a { color: inherit; text-decoration: none; transition: color var(--mid-transition); }
.mid-dyn-card__title a:hover { color: var(--mid-light-gold); }
.mid-dyn-card__excerpt {
  font-family: var(--mid-font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mid-text-mid);
  margin: 0 0 20px;
  flex: 1;
}
.mid-dyn-card__more {
  font-family: var(--mid-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--mid-light-gold);
  text-decoration: none;
  text-transform: uppercase;
  align-self: flex-start;
  transition: color var(--mid-transition);
}
.mid-dyn-card__more:hover { color: var(--mid-dark-gold); }
.mid-dyn-card__more::after { content: " →"; }

@media (max-width: 1023px) { .mid-dyn-posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .mid-dyn-posts { grid-template-columns: 1fr; } }

/* ============================================================
 * WHITE DIAMONDS redesign (page 7190) — section helpers
 * ============================================================ */
.mid-wd-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(34px, 4vw, 54px) !important;
  font-weight: 300 !important;
  color: var(--mid-charcoal) !important;
}
.mid-wd-section .elementor-text-editor {
  font-family: var(--mid-font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--mid-text-mid);
}

/* Hero (bright, slim, luxury) */
.mid-wd-hero .mid-wd-hero-title .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(46px, 6vw, 80px) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  color: var(--mid-charcoal) !important;
}
.mid-wd-hero .mid-wd-hero-sub .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: var(--mid-text-mid) !important;
}

/* Trust bar */
.mid-wd-trustbar { border-top: 1px solid var(--mid-pale-gold); border-bottom: 1px solid var(--mid-pale-gold); }
.mid-wd-trust-item { text-align: center; padding: 30px 18px; border-right: 1px solid var(--mid-pale-gold); }
.mid-wd-trust-item .elementor-heading-title {
  font-family: var(--mid-font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  color: var(--mid-navy) !important;
  text-transform: uppercase !important;
}

/* Shape tiles (link to existing specials pages) */
.mid-shape-tile {
  border: 1px solid var(--mid-pale-gold);
  text-align: center;
  transition: background var(--mid-transition), box-shadow var(--mid-transition), transform var(--mid-transition);
}
.mid-shape-tile:hover { background: var(--mid-warm-white); box-shadow: 0 8px 24px rgba(26,35,64,0.07); transform: translateY(-3px); }
.mid-shape-tile .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  color: var(--mid-charcoal) !important;
}
.mid-shape-tile .elementor-heading-title a { color: inherit; text-decoration: none; }
.mid-shape-tile:hover .elementor-heading-title,
.mid-shape-tile:hover .elementor-heading-title a { color: var(--mid-light-gold) !important; }

/* Capability list rows */
.mid-wd-cap .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  color: var(--mid-charcoal) !important;
}
.mid-wd-cap .elementor-text-editor { font-size: 14px; line-height: 1.7; }

/* Certification pillars reuse .mid-trust-pillar / .mid-pillar-badge already defined */

/* White diamonds editorial images */
.mid-wd-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Generic redesign buttons (work on any redesign section) --- */
.mid-btn-navy .elementor-button {
  background: var(--mid-navy) !important; color: var(--mid-warm-white) !important;
  border: 1px solid var(--mid-navy) !important; font-family: var(--mid-font-sans) !important;
  font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.18em !important;
  padding: 16px 40px !important; border-radius: 0 !important;
  transition: background var(--mid-transition), border-color var(--mid-transition) !important;
}
.mid-btn-navy .elementor-button:hover { background: var(--mid-light-gold) !important; border-color: var(--mid-light-gold) !important; }
.mid-btn-outline .elementor-button {
  background: transparent !important; color: var(--mid-charcoal) !important;
  border: 1px solid rgba(28,28,28,0.4) !important; font-family: var(--mid-font-sans) !important;
  font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.18em !important;
  padding: 16px 40px !important; border-radius: 0 !important;
  transition: border-color var(--mid-transition), color var(--mid-transition) !important;
}
.mid-btn-outline .elementor-button:hover { border-color: var(--mid-light-gold) !important; color: var(--mid-light-gold) !important; }

/* ============================================================
 * WHITE DIAMONDS v2 — refined luxury (page 7190)
 * Quiet-luxury rhythm: generous space, editorial serif, hairline
 * gold details, navy used only as one readable authority band.
 * No glyph icons. No inline CSS. No raw shortcodes.
 * ============================================================ */
.mid-wd-section .mid-section-overline .elementor-heading-title,
.mid-wd-hero .mid-section-overline .elementor-heading-title,
.mid-wd-invcta .mid-section-overline .elementor-heading-title {
  font-family: var(--mid-font-sans) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.38em !important; color: var(--mid-light-gold) !important;
  text-transform: uppercase !important;
}
.mid-wd-hero .mid-wd-hero-title .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(52px, 6.5vw, 92px) !important; font-weight: 300 !important;
  line-height: 1.02 !important; letter-spacing: -0.015em !important; color: var(--mid-charcoal) !important;
}
.mid-wd-hero .mid-wd-hero-sub .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(20px, 2.3vw, 30px) !important; font-weight: 300 !important;
  font-style: italic !important; line-height: 1.4 !important; color: var(--mid-text-mid) !important;
}
.mid-wd-section .elementor-text-editor,
.mid-wd-hero .elementor-text-editor {
  font-family: var(--mid-font-sans); font-size: 16px; font-weight: 300;
  line-height: 1.9; color: var(--mid-text-mid);
}
.mid-wd-section h2.elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important; font-weight: 300 !important;
  line-height: 1.12 !important; letter-spacing: -0.01em !important; color: var(--mid-charcoal) !important;
}
.mid-wd-section h3.elementor-heading-title { font-family: var(--mid-font-serif) !important; }

/* Authority bar — bright ivory, navy text, hairline separators */
.mid-wd-trustbar { border-top: 1px solid var(--mid-pale-gold); border-bottom: 1px solid var(--mid-pale-gold); }
.mid-wd-trust-item { text-align: center; padding: 34px 16px; border-right: 1px solid var(--mid-pale-gold); }
.mid-wd-trust-item:last-child { border-right: none; }
.mid-wd-trust-item .elementor-heading-title {
  font-family: var(--mid-font-sans) !important; font-size: 12px !important; font-weight: 500 !important;
  letter-spacing: 0.16em !important; color: var(--mid-navy) !important; text-transform: uppercase !important;
}

/* ---- Pull-stat strip — refined, balanced, single-line ---- */
/* Vertically center each item so the three sit as one unit; equal-height
   columns with thin champagne dividers between them. */
.mid-wd-stats .elementor-container { align-items: stretch; }
.mid-wd-stats .elementor-column .elementor-widget-wrap {
  justify-content: center;
  padding-top: 6px;
  padding-bottom: 6px;
}
.mid-wd-stats .elementor-column + .elementor-column {
  border-left: 1px solid var(--mid-pale-gold) !important;
}
/* Large numbers (refined, not oversized) — kept on one line */
.mid-wd-stat .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-size: clamp(40px, 4.4vw, 60px) !important;
  font-weight: 300 !important; color: var(--mid-navy) !important;
  line-height: 1.05 !important; white-space: nowrap !important;
}
/* Certification value — slightly smaller, one line, letter-spaced */
.mid-wd-stat-cert .elementor-heading-title {
  font-size: clamp(24px, 2.5vw, 34px) !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
}
.mid-wd-stat-label .elementor-heading-title {
  font-family: var(--mid-font-sans) !important; font-size: 12px !important; font-weight: 500 !important;
  letter-spacing: 0.22em !important; color: var(--mid-text-mid) !important; text-transform: uppercase !important;
  margin-top: 12px !important;
}
/* Mobile: stack, center, no side dividers, smaller single-line cert */
@media (max-width: 767px) {
  .mid-wd-stats .elementor-column + .elementor-column {
    border-left: none !important;
    border-top: 1px solid var(--mid-pale-gold) !important;
  }
  .mid-wd-stats .elementor-column .elementor-widget-wrap { padding-top: 26px; padding-bottom: 26px; }
  .mid-wd-stat .elementor-heading-title { font-size: 40px !important; }
  .mid-wd-stat-cert .elementor-heading-title { font-size: 22px !important; }
}

/* Capability cards — numerals, hairline, NO glyph icons */
.mid-cap-card { border: 1px solid var(--mid-pale-gold); padding: 40px 34px; background: var(--mid-warm-white);
  transition: box-shadow var(--mid-transition), transform var(--mid-transition); height: 100%; }
.mid-cap-card:hover { box-shadow: 0 14px 44px rgba(26,35,64,0.08); transform: translateY(-4px); }
.mid-cap-num .elementor-heading-title { font-family: var(--mid-font-serif) !important; font-size: 22px !important;
  font-weight: 300 !important; color: var(--mid-light-gold) !important; letter-spacing: 0.05em !important; }
.mid-cap-card h3.elementor-heading-title { font-size: 25px !important; font-weight: 400 !important; color: var(--mid-charcoal) !important; }
.mid-cap-card .elementor-text-editor { font-size: 14px; line-height: 1.75; }

/* Shape tiles */
.mid-shape-tile { border: 1px solid var(--mid-pale-gold); text-align: center; background: var(--mid-warm-white);
  transition: background var(--mid-transition), box-shadow var(--mid-transition), transform var(--mid-transition); }
.mid-shape-tile:hover { box-shadow: 0 10px 28px rgba(26,35,64,0.07); transform: translateY(-3px); }
.mid-shape-tile .elementor-heading-title { font-family: var(--mid-font-serif) !important; font-size: 20px !important;
  font-weight: 400 !important; color: var(--mid-charcoal) !important; }
.mid-shape-tile .elementor-heading-title a { color: inherit; text-decoration: none; transition: color var(--mid-transition); }
.mid-shape-tile:hover .elementor-heading-title a { color: var(--mid-light-gold) !important; }

/* Certification columns — gold top rule, no badges */
.mid-cert-col { padding: 8px 26px; border-top: 2px solid var(--mid-light-gold); }
.mid-cert-col .mid-cert-label .elementor-heading-title {
  font-family: var(--mid-font-sans) !important; font-size: 10px !important; font-weight: 500 !important;
  letter-spacing: 0.28em !important; color: var(--mid-light-gold) !important; text-transform: uppercase !important; }
.mid-cert-col h3.elementor-heading-title { font-size: 23px !important; font-weight: 400 !important; color: var(--mid-charcoal) !important; }
.mid-cert-col .elementor-text-editor { font-size: 14px; line-height: 1.75; }

/* Inventory CTA — navy authority band, fully readable */
.mid-wd-invcta h2.elementor-heading-title { color: var(--mid-warm-white) !important; }
.mid-wd-invcta .elementor-text-editor { color: rgba(253,252,249,0.82) !important; font-size: 17px; line-height: 1.85; }
.mid-btn-gold .elementor-button {
  background: var(--mid-light-gold) !important; color: var(--mid-navy-deep) !important;
  border: 1px solid var(--mid-light-gold) !important; font-family: var(--mid-font-sans) !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.18em !important;
  padding: 18px 46px !important; border-radius: 0 !important; transition: background var(--mid-transition) !important; }
.mid-btn-gold .elementor-button:hover { background: #d8bd87 !important; }

/* Editorial images */
.mid-wd-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Elementor Pro Posts widget -> luxury cards (Related Insights) */
.mid-wd-insights .elementor-posts-container { gap: 24px; }
.mid-wd-insights .elementor-post {
  background: var(--mid-warm-white); border: 1px solid var(--mid-pale-gold); overflow: hidden;
  transition: box-shadow var(--mid-transition), transform var(--mid-transition); }
.mid-wd-insights .elementor-post:hover { box-shadow: 0 12px 36px rgba(26,35,64,0.08); transform: translateY(-3px); }
.mid-wd-insights .elementor-post__text { padding: 26px 26px 30px; }
.mid-wd-insights .elementor-post__title { font-family: var(--mid-font-serif) !important; font-size: 22px !important;
  font-weight: 400 !important; line-height: 1.3 !important; margin-bottom: 10px; }
.mid-wd-insights .elementor-post__title a { color: var(--mid-charcoal) !important; transition: color var(--mid-transition); }
.mid-wd-insights .elementor-post__title a:hover { color: var(--mid-light-gold) !important; }
.mid-wd-insights .elementor-post__meta-data { font-family: var(--mid-font-sans) !important; font-size: 11px !important;
  letter-spacing: 0.12em !important; color: var(--mid-light-gold) !important; text-transform: uppercase !important; margin-bottom: 8px; }
.mid-wd-insights .elementor-post__excerpt p { font-family: var(--mid-font-sans) !important; font-size: 14px !important;
  font-weight: 300 !important; line-height: 1.75 !important; color: var(--mid-text-mid) !important; }
.mid-wd-insights .elementor-post__read-more { font-family: var(--mid-font-sans) !important; font-size: 11px !important;
  font-weight: 500 !important; letter-spacing: 0.2em !important; color: var(--mid-light-gold) !important;
  text-transform: uppercase !important; text-decoration: none !important; }

/* Final CTA */
.mid-wd-finalcta h2.elementor-heading-title { color: var(--mid-charcoal) !important; }

/* ============================================================
 * BULK REDESIGN DRAFTS — editorial article body (content reflow)
 * Clean, readable, centered content column for the generic
 * page-redesign drafts. Reuses the mid-wd-* type system.
 * ============================================================ */
.mid-article { max-width: 880px; margin: 0 auto; }
.mid-article .elementor-widget-heading .elementor-heading-title {
  font-family: var(--mid-font-serif) !important;
  font-weight: 400 !important;
  color: var(--mid-charcoal) !important;
  line-height: 1.2 !important;
}
.mid-article h2.elementor-heading-title { font-size: clamp(28px, 3vw, 40px) !important; font-weight: 300 !important; }
.mid-article h3.elementor-heading-title { font-size: clamp(21px, 2.2vw, 27px) !important; }
.mid-article .elementor-text-editor {
  font-family: var(--mid-font-sans);
  font-size: 16px; font-weight: 300; line-height: 1.9; color: var(--mid-text-mid);
}
.mid-article .elementor-text-editor a { color: var(--mid-dark-gold); text-decoration: underline; }
.mid-article .elementor-text-editor a:hover { color: var(--mid-light-gold); }
.mid-article .elementor-text-editor ul,
.mid-article .elementor-text-editor ol { padding-left: 1.25em; margin: 0 0 1em; }
.mid-article .elementor-text-editor li { margin-bottom: 8px; }
.mid-article .mid-article-img img { width: 100%; height: auto; display: block; border: 1px solid var(--mid-pale-gold); }

/* ============================================================
 * OUR MOBILE APP redesign (draft) — small additions; reuses the
 * White Diamonds (mid-wd-*) system. App page = digital trade tool.
 * ============================================================ */
/* Phone/app screenshot must not be cropped (unlike WD diamond photo) */
.mid-app-hero-image img,
.mid-app-image img { object-fit: contain !important; height: auto !important; }
/* QR code in the download CTA — compact, on a clean white tile */
.mid-app-qr img {
  max-width: 156px; width: 156px; height: auto; display: block;
  margin: 0 auto; background: #FFFFFF; padding: 12px; border: 1px solid var(--mid-pale-gold);
}
/* Video widget framed cleanly to match the luxury rhythm */
.mid-app-video .elementor-widget-video,
.mid-app-video .elementor-wrapper { border: 1px solid var(--mid-pale-gold); }
/* On the navy download CTA, keep the Google Play outline button readable on dark */
.mid-wd-invcta .mid-btn-outline .elementor-button {
  color: var(--mid-warm-white) !important;
  border-color: rgba(253,252,249,0.5) !important;
}
.mid-wd-invcta .mid-btn-outline .elementor-button:hover {
  color: var(--mid-light-gold) !important; border-color: var(--mid-light-gold) !important;
}

/* ---- How-it-works: bulletproof equal-height, perfectly aligned cards ---- */
.mid-wd-howitworks .elementor-inner-section > .elementor-container { align-items: stretch !important; }
.mid-wd-howitworks .elementor-inner-section .mid-cap-card {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column;
  height: auto !important;
  padding: 42px 30px !important;   /* identical top/bottom + side rhythm on all four */
}
.mid-wd-howitworks .elementor-inner-section .mid-cap-card > .elementor-widget-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* reserve a consistent body block so number/title/body align across all 4 */
.mid-wd-howitworks .mid-cap-card .elementor-text-editor { min-height: 50px; }
@media (max-width: 767px) {
  .mid-wd-howitworks .elementor-inner-section .mid-cap-card { padding: 34px 28px !important; }
  .mid-wd-howitworks .mid-cap-card .elementor-text-editor { min-height: 0; }
}

/* ---- Video section: large, centered, premium ---- */
.mid-app-video-sec .elementor-inner-section > .elementor-container {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.mid-app-video .elementor-widget-video,
.mid-app-video .elementor-wrapper { border: 1px solid var(--mid-pale-gold); }
/* ensure the 16:9 video fills the (now full-width) column */
.mid-app-video .elementor-widget-video .elementor-wrapper,
.mid-app-video .elementor-widget-video iframe { width: 100% !important; }

/* ============================================================
 * GLOBAL ALIGNMENT CORRECTION (local redesign)
 * Left-align all main content (headings, overlines, body text,
 * dividers) across every redesigned page. Centered alignment is
 * preserved only where it is justified: stat strips, trust/benefit
 * bars, and the deliberately-centered decorative card components.
 * Scoped to .mid-luxury-section (carried by every redesign section).
 * ============================================================ */

/* 1) Blanket left-align: headings, overlines, body text, lists, dividers */
.mid-luxury-section .elementor-widget-heading .elementor-heading-title,
.mid-luxury-section .elementor-widget-text-editor,
.mid-luxury-section .elementor-widget-text-editor .elementor-text-editor {
  text-align: left !important;
}
.mid-luxury-section .elementor-widget-text-editor p,
.mid-luxury-section .elementor-widget-text-editor ul,
.mid-luxury-section .elementor-widget-text-editor ol,
.mid-luxury-section .elementor-widget-text-editor li {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mid-luxury-section .elementor-widget-divider .elementor-divider { justify-content: flex-start !important; }

/* 2) Exceptions — keep CENTERED (more specific + later in file = win) */
/* Stat strips + trust / benefit bars */
.mid-luxury-section .mid-wd-stats .elementor-widget-heading .elementor-heading-title,
.mid-luxury-section .mid-authority-bar .elementor-widget-heading .elementor-heading-title,
.mid-luxury-section .mid-authority-item .elementor-widget-heading .elementor-heading-title,
.mid-luxury-section .mid-wd-trustbar .elementor-widget-heading .elementor-heading-title,
.mid-luxury-section .mid-wd-trust-item .elementor-widget-heading .elementor-heading-title,
/* Deliberately-centered decorative cards */
.mid-luxury-section .mid-diamond-card .elementor-widget-heading .elementor-heading-title,
.mid-luxury-section .mid-service-card .elementor-widget-heading .elementor-heading-title,
.mid-luxury-section .mid-trust-pillar .elementor-widget-heading .elementor-heading-title,
.mid-luxury-section .mid-office-item .elementor-widget-heading .elementor-heading-title,
.mid-luxury-section .mid-shape-tile .elementor-widget-heading .elementor-heading-title {
  text-align: center !important;
}
.mid-luxury-section .mid-diamond-card .elementor-widget-text-editor,
.mid-luxury-section .mid-diamond-card .elementor-widget-text-editor p,
.mid-luxury-section .mid-service-card .elementor-widget-text-editor,
.mid-luxury-section .mid-service-card .elementor-widget-text-editor p,
.mid-luxury-section .mid-trust-pillar .elementor-widget-text-editor,
.mid-luxury-section .mid-trust-pillar .elementor-widget-text-editor p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
 * CORRECTION (2026-06-17): left GRID alignment.
 * Editorial body, section content, and hero share one left grid
 * line (the section's left padding) — body no longer centered.
 * ============================================================ */
.mid-article { margin-left: 0 !important; margin-right: 0 !important; }
/* keep section content columns anchored left (not centered blocks) */
.mid-luxury-section .mid-wd-section > .elementor-container > .elementor-row > .elementor-column,
.mid-luxury-section .elementor-widget-text-editor { margin-left: 0 !important; }
/* re-center genuinely centered components only */
.mid-wd-stats .elementor-widget-text-editor,
.mid-diamond-card .elementor-widget-text-editor,
.mid-service-card .elementor-widget-text-editor,
.mid-trust-pillar .elementor-widget-text-editor { margin-left: auto !important; margin-right: auto !important; }

/* ============================================================
 * IMAGE-LEFT layout — scoped to Contact (7192) & Diamond
 * Education Center (7251) article sections only (.mid-img-left).
 * Smaller images floated left, text flows right; responsive.
 * ============================================================ */
.mid-img-left .mid-article-img {
  float: left;
  width: 30%;
  max-width: 240px;
  margin: 6px 34px 20px 0;
}
.mid-img-left .mid-article-img img { width: 100%; height: auto; display: block; }
/* text wraps to the right of the floated image (own block formatting context) */
.mid-img-left .elementor-widget-text-editor { overflow: hidden; }
/* each titled subsection starts below the previous image */
.mid-img-left .elementor-widget-heading { clear: both; }
/* mobile: image above text, smaller, clean */
@media (max-width: 767px) {
  .mid-img-left .mid-article-img { float: none; width: auto; max-width: 190px; margin: 0 0 16px; }
}


/* ===== CORRECTIONS 2026-06-21 ===== */
.mid-dyn-card__media{display:block;height:220px;overflow:hidden;}
.mid-dyn-card__img{width:100%;height:100%;object-fit:cover;display:block;}
.mid-dyn-card__img--ph{display:block;height:100%;}
.mid-fancy-section .mid-swatch{background:#FDFCF9 !important;border:1px solid var(--mid-pale-gold);min-height:0 !important;justify-content:flex-start !important;padding:0 !important;overflow:hidden;}
.mid-swatch-imgph{width:100%;margin:0 !important;}
.mid-swatch-imgph img{width:100%;height:210px;object-fit:cover;display:block;background:#FAF8F3;}
.mid-fancy-section .mid-swatch .mid-swatch-sub .elementor-heading-title{color:var(--mid-light-gold) !important;text-align:left !important;}
.mid-fancy-section .mid-swatch .mid-swatch-name .elementor-heading-title{color:var(--mid-charcoal) !important;text-align:left !important;}
.mid-fancy-section .mid-swatch .mid-swatch-sub{padding:18px 22px 0;}
.mid-fancy-section .mid-swatch .mid-swatch-name{padding:0 22px 22px;}
/* Hero must span the FULL viewport width. stretch_section is set but the kit's
   stretched-container selector is empty, so Elementor's JS stretch is unreliable
   and the section sat inside the theme's centered/boxed wrapper (gray side
   margins). This breaks it out to the true viewport edges; the boxed inner
   .elementor-container keeps the overlay text centered/readable as before.
   Making the section exactly 100vw also makes the viewport-unit video cover
   below resolve correctly (section == viewport), eliminating the letterbox. */
/* Its Elementor wrapper (.elementor-7188) is left-anchored at viewport x:0
   (width = viewport minus scrollbar), NOT centered — so the usual
   calc(50% - 50vw) breakout over-shifts and leaves a thin gray strip on the
   right. Anchoring margin:0 + left:0 + width:100vw makes the section span
   0..100vw exactly; the parent's overflow:visible lets it exceed the wrapper. */
.mid-luxury-hero{width:100vw !important;max-width:100vw !important;margin-left:0 !important;margin-right:0 !important;left:0 !important;right:auto !important;position:relative !important;}
/* Hero video: custom Vimeo iframe (mid-hero-video.js) sized to TRUE 16:9 cover.
   Why not Elementor's bg video: it (and any CSS) put the 16:9 video inside a
   non-16:9 iframe, so Vimeo letterboxed it (black bars top & bottom) — and an
   iframe cannot be CSS object-fit:cover. The JS keeps OUR iframe exactly 16:9
   and oversizes it to cover the hero, cropping the excess with overflow:hidden;
   a 16:9 iframe holding a 16:9 video has no room to letterbox. Elementor's own
   bg-video container is hidden so it can't reintroduce the bars. */
.mid-luxury-hero .elementor-background-video-container{display:none !important;}
.mid-hero-video{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;overflow:hidden !important;z-index:0 !important;background:transparent;pointer-events:none;}
.mid-hero-video iframe{position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;border:0 !important;max-width:none !important;max-height:none !important;pointer-events:none !important;}
.mid-luxury-hero .elementor-background-overlay{z-index:1 !important;}
.mid-luxury-hero > .elementor-container{z-index:2 !important;}
/* Hero button row (restored under the paragraph): anchor it to the same left
   grid (x = section padding-left) as the overline/H1/paragraph. The restored
   inner-section's container was boxed+centered (margin-left:78px) with an
   "extended" column gap (15px) pushing the buttons inward; flatten both. */
.mid-luxury-hero .elementor-inner-section{margin-top:30px !important;}
.mid-luxury-hero .elementor-inner-section > .elementor-container{max-width:100% !important;margin-left:0 !important;margin-right:0 !important;}
.mid-luxury-hero .elementor-inner-section .elementor-column:first-child > .elementor-widget-wrap{padding-left:0 !important;}
.mid-luxury-hero .elementor-inner-section .elementor-widget-button{margin-bottom:0 !important;}
.mid-edu-card{border:1px solid var(--mid-pale-gold);background:var(--mid-warm-white);transition:box-shadow .3s,transform .3s;height:100%;}
.mid-edu-card:hover{box-shadow:0 10px 28px rgba(26,35,64,.08);transform:translateY(-3px);}
.mid-edu-card .elementor-widget-image img{width:100%;height:150px;object-fit:contain;background:transparent;padding:0;display:block;}
.mid-edu-card .elementor-widget-heading .elementor-heading-title{font-family:var(--mid-font-serif) !important;font-size:18px !important;font-weight:400 !important;color:var(--mid-charcoal) !important;text-align:center !important;padding:14px 10px 18px;}
.mid-edu-card .elementor-heading-title a{color:inherit;text-decoration:none;}
.mid-edu-card:hover .elementor-heading-title a{color:var(--mid-light-gold) !important;}
.mid-edu-sec .mid-btn-outline .elementor-button{margin:0 10px 12px 0;}

/* ===== PERMANENT GUARD — all .mid-edu-sec / .mid-edu-card sections (2026-06-23)
   Keeps the DIAMOND SHAPES + FANCY COLOR DIAMONDS edu-card sections at Diamond
   Education Center scale on ANY page that contains them (currently the Diamond
   Education Center review 7251 + Wholesale review 7205), regardless of the
   page's Elementor version/markup — so it survives re-opening & saving in
   Elementor (which re-stamps _elementor_version and can drop the legacy col-25
   flex CSS). Explicit flex + widths so it does NOT depend on Elementor's legacy
   column CSS. Keyed on the .mid-edu-sec/.mid-edu-card classes only → it cannot
   affect unrelated image sections, the homepage, or the .mid-fc-swatch
   "other colors" grids (different classes). 4/2/1 per row; transparent PNGs. */
.mid-edu-sec .elementor-inner-section > .elementor-container{display:flex !important;flex-wrap:wrap !important;justify-content:flex-start !important;max-width:100% !important;}
.mid-edu-sec .mid-edu-card{width:25% !important;flex:0 0 25% !important;max-width:25% !important;}
.mid-edu-sec .mid-edu-card .elementor-widget-image img{width:100% !important;height:150px !important;object-fit:contain !important;background:transparent !important;padding:0 !important;box-shadow:none !important;display:block !important;}
.mid-edu-sec .mid-edu-card .elementor-widget-heading .elementor-heading-title{font-size:18px !important;text-align:center !important;padding:14px 10px 18px !important;}
@media (max-width:1024px){.mid-edu-sec .mid-edu-card{width:50% !important;flex:0 0 50% !important;max-width:50% !important;}}
@media (max-width:600px){.mid-edu-sec .mid-edu-card{width:100% !important;flex:0 0 100% !important;max-width:100% !important;}}

/* ===== FANCY COLOR pages — specials + "other colors" nav (2026-06-21) ===== */
.mid-fc-specials{background:var(--mid-warm-white);}
.mid-fc-specials .mid-section-overline{color:var(--mid-light-gold) !important;}
.mid-fc-others{background:var(--mid-warm-white);border-top:1px solid var(--mid-pale-gold);}
.mid-fc-others .elementor-inner-section > .elementor-container{flex-wrap:wrap !important;justify-content:flex-start !important;max-width:100% !important;}
.mid-fc-others .mid-fc-swatch{width:14.2857% !important;padding:10px !important;text-align:center;}
.mid-fc-others .mid-fc-swatch > .elementor-widget-wrap{padding:0 !important;align-content:flex-start;}
.mid-fc-others .mid-fc-swatch .elementor-widget-image{margin:0 !important;}
.mid-fc-others .mid-fc-swatch .elementor-widget-image img{width:100%;height:160px;object-fit:contain;background:#FDFCF9;border:1px solid var(--mid-pale-gold);padding:16px;display:block;transition:transform .3s,box-shadow .3s;}
.mid-fc-others .mid-fc-swatch:hover .elementor-widget-image img{transform:translateY(-4px);box-shadow:0 12px 26px rgba(26,35,64,.10);}
.mid-fc-others .mid-fc-swatch .elementor-widget-heading{margin-top:12px !important;}
.mid-fc-others .mid-fc-swatch .elementor-heading-title{font-family:var(--mid-font-sans) !important;font-size:12px !important;font-weight:500 !important;letter-spacing:.08em !important;text-transform:uppercase;color:var(--mid-charcoal) !important;line-height:1.4 !important;}
.mid-fc-others .mid-fc-swatch .elementor-heading-title a{color:inherit !important;text-decoration:none;}
.mid-fc-others .mid-fc-swatch:hover .elementor-heading-title a{color:var(--mid-light-gold) !important;}
@media(max-width:1024px){.mid-fc-others .mid-fc-swatch{width:25% !important;}}
@media(max-width:600px){.mid-fc-others .mid-fc-swatch{width:50% !important;}}