/* ============================================================
   ANNURYA — MARKET PAGES ENHANCED STYLESHEET
   Premium design: 3D effects, animations, scroll reveals
   ============================================================ */

/* ── Reset & Custom Properties ── */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --forest:       #1a2e1a;
  --forest-mid:   #24402a;
  --forest-light: #2d5233;
  --gold:         #b8962e;
  --gold-light:   #e8c46a;
  --ivory:        #f8f4ed;
  --ivory-warm:   #faf7f2;
  --charcoal:     #2c2c2c;
  --muted:        #6b6b6b;
  --white:        #ffffff;
  --border:       #e8e2d9;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.14);
  --shadow-xl:  0 40px 80px rgba(0,0,0,0.18);

  --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Page-hero: deep 3D parallax hero ── */
.page-hero {
  position: relative;
  background: var(--forest);
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 140px 6% 100px;
}

/* Layered depth rings */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 50%, rgba(184,150,46,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 10% 80%, rgba(184,150,46,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(46,74,46,0.6) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Animated grid mesh */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184,150,46,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,150,46,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridShift 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes gridShift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

/* Floating orb accent */
.page-hero-inner::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,150,46,0.12) 0%, transparent 70%);
  top: -100px;
  right: -200px;
  animation: orbFloat 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.08); }
}

/* Eyebrow badge */
.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(184,150,46,0.12);
  border: 1px solid rgba(184,150,46,0.25);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 2rem;
  backdrop-filter: blur(8px);
  animation: fadeSlideDown 0.8s ease both;
}

.page-hero .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.6); }
}

/* Hero H1 */
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
  animation: fadeSlideUp 0.9s 0.15s ease both;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--gold);
  display: block;
}

/* Hero subtitle */
.page-hero .hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.75;
  color: rgba(242,242,245,0.72);
  max-width: 620px;
  margin-bottom: 2.5rem;
  animation: fadeSlideUp 0.9s 0.3s ease both;
}

/* Hero CTA button — 3D press effect */
.page-hero .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  box-shadow:
    0 4px 0 rgba(184,150,46,0.7),
    0 8px 24px rgba(184,150,46,0.3),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: var(--transition);
  animation: fadeSlideUp 0.9s 0.45s ease both;
  transform-style: preserve-3d;
}

.page-hero .btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
  box-shadow:
    0 7px 0 rgba(184,150,46,0.7),
    0 16px 40px rgba(184,150,46,0.4),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.page-hero .btn-primary:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 0 rgba(184,150,46,0.7),
    0 4px 12px rgba(184,150,46,0.2);
}

/* ── Hero stat chips (optional decorative elements) ── */
.hero-chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 3rem;
  animation: fadeSlideUp 0.9s 0.6s ease both;
}

.hero-chip {
  background: rgba(242,242,245,0.06);
  border: 1px solid rgba(242,242,245,0.12);
  border-radius: 100px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(242,242,245,0.6);
  backdrop-filter: blur(8px);
  transition: var(--transition);
}

.hero-chip:hover {
  background: rgba(184,150,46,0.12);
  border-color: rgba(184,150,46,0.3);
  color: var(--gold);
}

/* ── Content Section: elevated cards layout ── */
.content-section {
  background: var(--ivory-warm);
  padding: 100px 6%;
  position: relative;
}

.content-section::before {
  content: '';
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), var(--gold), var(--border), transparent);
}

.content-inner {
  max-width: 860px;
  margin: 0 auto;
}

/* ── Section H2: floating label treatment ── */
.content-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.2;
  margin: 4rem 0 1.25rem;
  position: relative;
  padding-left: 1.5rem;
}

.content-inner h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.1em;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), transparent);
  border-radius: 2px;
}

.content-inner h2:first-child {
  margin-top: 0;
}

/* ── City cards: 3D hover blocks ── */
.content-inner h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--charcoal);
  margin: 2.5rem 0 0.75rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.content-inner h3::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  vertical-align: middle;
  transition: width 0.3s ease;
}

/* Wrap city sections in 3D card blocks */
.city-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  margin: 1.75rem 0;
  position: relative;
  transition: var(--transition);
  transform-style: preserve-3d;
  perspective: 1000px;
  overflow: hidden;
}

.city-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(184,150,46,0.04) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
}

.city-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.city-card:hover {
  transform: translateY(-6px) rotateX(1deg);
  box-shadow: var(--shadow-lg);
  border-color: rgba(184,150,46,0.3);
}

.city-card:hover::after {
  transform: scaleX(1);
}

/* ── Body paragraphs ── */
.content-inner p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.82;
  color: var(--charcoal);
  margin-bottom: 1.25rem;
}

.content-inner p strong {
  color: var(--charcoal);
  font-weight: 500;
}

/* ── Feature callout blocks (strong lead paragraphs) ── */
.feature-block {
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 1.25rem 0;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.feature-block:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}

/* ── Practitioner list: icon grid ── */
.content-inner ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.content-inner ul li {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--charcoal);
  position: relative;
  padding-left: 42px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.content-inner ul li::before {
  content: '→';
  position: absolute;
  left: 16px;
  top: 14px;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}

.content-inner ul li:hover {
  border-color: rgba(184,150,46,0.4);
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
  background: var(--ivory-warm);
}

.content-inner ul li:hover::before {
  transform: translateX(4px);
}

.content-inner ul li a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.content-inner ul li a:hover { color: var(--charcoal); }

/* ── FAQ section: accordion-style cards ── */
.faq-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  margin: 1rem 0;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.faq-block:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(184,150,46,0.3);
}

.faq-block h3 {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--charcoal) !important;
  padding: 22px 24px !important;
  margin: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.faq-block h3::after {
  content: '+' !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  width: auto !important;
  height: auto !important;
  background: none !important;
  display: block !important;
}

.faq-block.open h3::after {
  transform: rotate(45deg);
}

.faq-block p {
  padding: 0 24px 22px !important;
  margin: 0 !important;
  border-top: 1px solid var(--border);
  color: var(--muted) !important;
  font-size: 0.93rem !important;
  line-height: 1.78 !important;
  display: none;
}

.faq-block.open p {
  display: block;
  animation: fadeDown 0.3s ease;
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Markets cross-link grid ── */
.markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 1.5rem 0;
}

.market-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--charcoal);
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.market-link-card .flag { font-size: 1.3rem; }

.market-link-card:hover {
  background: var(--forest);
  color: var(--ivory);
  border-color: var(--charcoal);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── CTA Section: immersive 3D banner ── */
.cta-section {
  position: relative;
  background: var(--forest);
  overflow: hidden;
  padding: 120px 6%;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(184,150,46,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 30%, rgba(184,150,46,0.06) 0%, transparent 50%);
  pointer-events: none;
}

/* Rotating ring decoration */
.cta-section::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(184,150,46,0.06);
  border-radius: 50%;
  right: -200px;
  top: 50%;
  transform: translateY(-50%);
  animation: slowSpin 30s linear infinite;
  pointer-events: none;
}

@keyframes slowSpin {
  0%   { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

.cta-container {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.cta-container h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 300 !important;
  color: var(--ivory) !important;
  line-height: 1.2 !important;
  margin-bottom: 1.25rem !important;
  padding-left: 0 !important;
}

.cta-container h2::before { display: none !important; }

.cta-container p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(242,242,245,0.65);
  margin-bottom: 2.5rem;
}

/* 3D CTA button */
.cta-container .btn-primary,
.cta-container .btn-primary.btn-large {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 18px 40px;
  border-radius: 100px;
  text-decoration: none;
  position: relative;
  box-shadow:
    0 6px 0 rgba(184,150,46,0.65),
    0 12px 40px rgba(184,150,46,0.3),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: var(--transition);
  letter-spacing: 0.01em;
}

.cta-container .btn-primary:hover,
.cta-container .btn-primary.btn-large:hover {
  background: var(--gold-light);
  transform: translateY(-4px);
  box-shadow:
    0 10px 0 rgba(184,150,46,0.65),
    0 20px 50px rgba(184,150,46,0.4);
}

.cta-container .btn-primary:active,
.cta-container .btn-primary.btn-large:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(184,150,46,0.65);
}

/* CTA markets strip */
.cta-markets {
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(242,242,245,0.3);
  letter-spacing: 0.05em;
}

/* ── Scroll-reveal animation classes ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.2s; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.3s; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.4s; }
.reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.5s; }
.reveal-stagger.visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.6s; }

/* ── Stat strip (between hero and content) ── */
.stat-strip {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 6%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  position: relative;
  z-index: 2;
}

/* Auto-adjust to however many stat-items are actually on the page,
   instead of assuming 3. Fixes the 4th stat wrapping onto its own
   row (for-index, markets-index, services-index all use 4). */
.stat-strip:has(.stat-item:nth-child(4)):not(:has(.stat-item:nth-child(5))) {
  grid-template-columns: repeat(4, 1fr);
}

.stat-strip:has(.stat-item:nth-child(5)) {
  grid-template-columns: repeat(5, 1fr);
}

.stat-item {
  text-align: center;
  padding: 24px;
  border-right: 1px solid var(--border);
  transition: var(--transition);
}

.stat-item:last-child { border-right: none; }

/* Bracket the outer edges to match the interior dividers, so the
   first and last items look framed the same way as the middle ones
   instead of trailing off into open padding on one side. */
.stat-strip {
  border-left: none;
}
.stat-item:first-child { border-left: 1px solid var(--border); }
.stat-item:last-child  { border-right: 1px solid var(--border); }

.stat-item:hover { background: var(--ivory-warm); }

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ── Legacy two-col layout (california / germany older pages) ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.highlight-box {
  background: var(--forest);
  color: var(--ivory);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: sticky;
  top: 120px;
  transform-style: preserve-3d;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}

.highlight-box:hover {
  transform: rotateY(-2deg) rotateX(1deg) translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.highlight-box h3 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: var(--gold) !important;
  margin: 0 0 1.25rem !important;
}

.highlight-box h3::after { display: none !important; }

.benefit-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.benefit-list li {
  background: rgba(242,242,245,0.06) !important;
  border: 1px solid rgba(242,242,245,0.1) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px 10px 36px !important;
  font-size: 0.875rem !important;
  color: rgba(242,242,245,0.82) !important;
  box-shadow: none !important;
  transition: var(--transition) !important;
  transform: none !important;
}

.benefit-list li:hover {
  background: rgba(184,150,46,0.12) !important;
  border-color: rgba(184,150,46,0.25) !important;
  transform: translateX(4px) !important;
}

.benefit-list li::before {
  content: '✓' !important;
  left: 12px !important;
  color: var(--gold) !important;
  font-size: 0.8rem !important;
  top: 11px !important;
}

/* ── Sub-CTA (older pages) ── */
.sub-cta {
  background: var(--ivory-warm);
  padding: 80px 6%;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sub-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 1rem;
}

.sub-cta p {
  font-family: var(--font-body);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 2rem;
}

/* ── Animations ── */
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .page-hero::after,
  .page-hero-inner::before,
  .cta-section::after,
  .orbFloat { animation: none !important; }
  .reveal, .reveal-left, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-strip   { grid-template-columns: repeat(3, 1fr); }
  .stat-strip:has(.stat-item:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
  .two-col      { grid-template-columns: 1fr; }
  .highlight-box { position: static; }
}

@media (max-width: 768px) {
  .page-hero    { min-height: 70vh; padding: 120px 5% 80px; }
  .page-hero h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  .content-section { padding: 70px 5%; }
  .stat-strip   { grid-template-columns: 1fr; gap: 0; }
  .stat-item    { border-right: none; border-left: none; border-bottom: 1px solid var(--border); }
  .stat-item:first-child { border-top: 1px solid var(--border); }
  .stat-item:last-child  { border-right: none; }
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .content-inner ul { grid-template-columns: 1fr; }
  .cta-section  { padding: 80px 5%; }
}

@media (max-width: 480px) {
  .markets-grid { grid-template-columns: 1fr; }
}