/* ============================================================
   luther.css — Shared stylesheet for Luther Asia pages
   Clean white corporate design. Premium editorial aesthetic.
   Disciplined crimson (#c0003c) as accent only.
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  --crimson:  #c0003c;
  --navy:     #1a2b3c;
  --charcoal: #2d2d2d;
  --text:     #1a1a1a;
  --muted:    #555;
  --border:   #e0e0e0;
  --bg:       #f8f8f8;

  /* convenience aliases used across files */
  --accent:       #c0003c;
  --accent-light: #fce8ee;
  --white:        #fff;
}


/* ============================================================
   2. RESET + BASE
   ============================================================ */
*, *::before, *::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:       var(--text);
  line-height: 1.6;
  background:  #fff;
}

a {
  text-decoration: none;
  color:           inherit;
}

img {
  max-width: 100%;
  display:   block;
}


/* ============================================================
   3. NAVIGATION
   ============================================================ */
nav {
  background:  #fff;
  position:    sticky;
  top:         0;
  z-index:     1000;
  box-shadow:  0 2px 8px rgba(0, 0, 0, .08);
}

.nav-inner {
  max-width:       1200px;
  margin:          0 auto;
  padding:         0 32px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          76px;
}

/* Logo */
.logo {
  display:     flex;
  align-items: center;
  gap:         4px;
  text-decoration: none;
}

.logo-name {
  font-size:      30px;
  font-weight:    800;
  color:          var(--crimson);
  letter-spacing: -1px;
  line-height:    1;
}

.logo-dot {
  font-size:   30px;
  font-weight: 800;
  color:       var(--crimson);
  line-height: 1;
}

.logo-divider {
  width:      1px;
  height:     28px;
  background: #ddd;
  margin:     0 14px;
}

.logo-sub {
  font-size:   12px;
  font-weight: 500;
  color:       #555;
  line-height: 1.3;
}

/* Desktop nav links */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.nav-links > a,
.nav-links > .dropdown > a {
  color:         #333;
  font-size:     14px;
  padding:       7px 13px;
  border-radius: 4px;
  transition:    color .2s;
  cursor:        pointer;
}

.nav-links > a:hover,
.nav-links > .dropdown > a:hover {
  color: var(--crimson);
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown::after {
  content:  '';
  position: absolute;
  bottom:   0;
  left:     -8px;
  right:    -8px;
  height:   12px;
}

.dropdown-menu {
  display:       none;
  position:      absolute;
  top:           100%;
  left:          0;
  background:    #fff;
  border-radius: 8px;
  box-shadow:    0 8px 32px rgba(0, 0, 0, .14);
  min-width:     220px;
  padding:       8px 0;
  border:        1px solid var(--border);
  margin-top:    0;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display:    block;
  padding:    10px 18px;
  color:      var(--text);
  font-size:  14px;
  transition: background .15s, color .15s;
}

.dropdown-menu a:hover {
  background: var(--accent-light);
  color:      var(--accent);
}

/* CTA pill in nav */
.nav-cta {
  background:    var(--crimson) !important;
  color:         #fff !important;
  padding:       10px 24px !important;
  border-radius: 50px !important;
  font-weight:   600;
  transition:    background .2s !important;
}

.nav-cta:hover {
  background: #a0002e !important;
}

/* Hamburger button (hidden on desktop) */
.hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  cursor:          pointer;
  padding:         4px;
  width:           32px;
  height:          32px;
  position:        relative;
  background:      none;
  border:          none;
}

.hamburger span {
  width:         24px;
  height:        2px;
  background:    var(--crimson);
  border-radius: 2px;
  transition:    transform .3s ease, opacity .3s ease, top .3s ease;
  display:       block;
  position:      absolute;
  left:          4px;
}

.hamburger span:nth-child(1) { top: 8px; }
.hamburger span:nth-child(2) { top: 15px; }
.hamburger span:nth-child(3) { top: 22px; }

.hamburger.is-open span:nth-child(1) { transform: rotate(45deg);  top: 15px; }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: rotate(-45deg); top: 15px; }


/* ============================================================
   4. BUTTON SYSTEM
   ============================================================ */
.btn-primary {
  background:    var(--crimson);
  color:         #fff;
  padding:       13px 28px;
  border-radius: 50px;
  font-weight:   600;
  font-size:     15px;
  transition:    background .2s, transform .2s;
  display:       inline-block;
}

.btn-primary:hover {
  background: #a0002e;
  transform:  translateY(-1px);
}

.btn-outline-white {
  border:        2px solid rgba(255, 255, 255, .4);
  color:         #fff;
  padding:       11px 26px;
  border-radius: 50px;
  font-weight:   600;
  font-size:     15px;
  transition:    border-color .2s, background .2s;
  display:       inline-block;
  margin-left:   12px;
}

.btn-outline-white:hover {
  border-color: #fff;
  background:   rgba(255, 255, 255, .08);
}

.btn-white {
  background:    #fff;
  color:         var(--crimson);
  padding:       13px 30px;
  border-radius: 50px;
  font-weight:   700;
  font-size:     15px;
  display:       inline-block;
  transition:    background .2s, transform .2s, box-shadow .2s;
}

.btn-white:hover {
  background:  #f5f5f5;
  transform:   translateY(-1px);
  box-shadow:  0 10px 28px rgba(0, 0, 0, .18);
}

.btn-outline {
  border:        2px solid rgba(255, 255, 255, .45);
  color:         #fff;
  padding:       12px 28px;
  border-radius: 50px;
  font-weight:   600;
  font-size:     15px;
  transition:    border-color .2s, background .2s;
  display:       inline-block;
}

.btn-outline:hover {
  border-color: #fff;
  background:   rgba(255, 255, 255, .08);
}


/* ============================================================
   5. PAGE HERO (inner service pages)
   ============================================================ */
.page-hero {
  position:    relative;
  overflow:    hidden;
  color:       #fff;
  padding:     80px 32px 70px;
  min-height:  460px;
  display:     flex;
  align-items: center;
  background:  #0d1117;
}

.page-hero-img {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center 35%;
  z-index:        0;
}

.page-hero-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, .6);
  z-index:    1;
}

/* wrapper needed to sit above overlay */
.page-hero > .hero-inner-wrap {
  position: relative;
  z-index:  2;
  width:    100%;
}

.page-hero-inner {
  max-width:             1200px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   60px;
  align-items:           center;
  position:              relative;
  z-index:               2;
}

/* Breadcrumb */
.breadcrumb {
  font-size:    13px;
  opacity:      .6;
  margin-bottom: 14px;
}

.breadcrumb a {
  color: rgba(255, 255, 255, .7);
}

.breadcrumb span {
  margin: 0 6px;
}

/* Hero heading */
.page-hero h1 {
  font-size:     clamp(26px, 3.5vw, 42px);
  font-weight:   700;
  line-height:   1.2;
  margin-bottom: 16px;
}

.page-hero h1 em {
  color:      #fff;
  font-style: normal;
}

.page-hero p {
  font-size:     16px;
  opacity:       .8;
  line-height:   1.7;
  margin-bottom: 26px;
}

/* Hero side list — fully unboxed editorial list, no rectangle/border/background */
.hero-box {
  background:    none;
  border:        none;
  border-radius: 0;
  padding:       0;
}

.hero-box h3 {
  font-size:      13px;
  font-weight:    600;
  margin-bottom:  18px;
  opacity:        .85;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* Checklist inside hero box */
.checklist {
  list-style: none;
}

.checklist li {
  padding:      8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size:    14px;
  opacity:      .85;
  display:      flex;
  align-items:  center;
  gap:          10px;
}

.checklist li:last-child {
  border: none;
}

.checklist li::before {
  content:       '✓';
  background:    var(--crimson);
  color:         #fff;
  width:         20px;
  height:        20px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     11px;
  font-weight:   700;
  flex-shrink:   0;
}


/* ============================================================
   6. SECTION LAYOUT
   ============================================================ */
.section {
  padding: 72px 24px;
}

.section-inner {
  max-width: 1200px;
  margin:    0 auto;
}

.section-label {
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--crimson);
  margin-bottom:  10px;
}

.section-title {
  font-size:     clamp(22px, 2.8vw, 32px);
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 12px;
}

.section-sub {
  color:      var(--muted);
  font-size:  16px;
  line-height: 1.7;
  max-width:  720px;
}

.section-header {
  margin-bottom: 46px;
}

.section-header.center {
  text-align: center;
}

.section-header.center .section-sub {
  margin: 0 auto;
}

.bg-light {
  background: var(--bg);
}


/* ============================================================
   7. COUNTRY SELECTOR SYSTEM
   Clean editorial tab bar, no app-like styling.
   ============================================================ */
.country-selector-section {
  padding:    56px 24px;
  background: #fff;
}

.country-selector-wrap {
  max-width: 1200px;
  margin:    0 auto;
}

/* Header block above tabs */
.country-selector-header {
  margin-bottom: 36px;
}

.country-selector-header .section-label {
  margin-bottom: 10px;
}

.country-selector-header h2 {
  font-size:     clamp(22px, 2.8vw, 32px);
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 12px;
}

.country-selector-header p {
  font-size:   16px;
  color:       var(--muted);
  line-height: 1.7;
  max-width:   620px;
}

/* Tab bar */
.country-tabs {
  display:         flex;
  flex-direction:  row;
  border-bottom:   2px solid #e8e8e8;
  overflow-x:      auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.country-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.country-tab {
  flex-shrink:    0;
  padding:        14px 24px;
  font-size:      14px;
  font-weight:    500;
  color:          #666;
  background:     none;
  border:         none;
  cursor:         pointer;
  border-bottom:  2px solid transparent;
  margin-bottom:  -2px;
  transition:     color .2s, border-color .2s;
  letter-spacing: 0.3px;
  white-space:    nowrap;
  font-family:    inherit;
}

.country-tab:hover {
  color: var(--crimson);
}

.country-tab.active {
  color:         var(--crimson);
  border-bottom-color: var(--crimson);
  font-weight:   600;
}

/* Panels */
.country-panels {
  padding-top: 48px;
}

.country-panel {
  display: none;
}

.country-panel.active {
  display:   block;
  animation: fadeInPanel .25s ease;
}

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

/* Panel header (title + intro text) */
.panel-header {
  margin-bottom: 32px;
}

/* Two-column layout inside each panel */
.panel-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   48px;
  align-items:           start;
}

.panel-section-title {
  font-size:     20px;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 16px;
}

.panel-lead {
  font-size:     15px;
  color:         var(--muted);
  line-height:   1.75;
  margin-bottom: 24px;
}

/* Bullet list inside panel — clean definition rows */
.panel-items {
  list-style: none;
}

.panel-items li {
  padding:       14px 0 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size:     14px;
  color:         var(--muted);
  position:      relative;
  line-height:   1.65;
}

.panel-items li:last-child {
  border: none;
}

.panel-items li::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           21px;
  width:         6px;
  height:        6px;
  background:    var(--crimson);
  border-radius: 50%;
  flex-shrink:   0;
}

.panel-items li strong {
  display:       block;
  margin-bottom: 3px;
  font-size:     14.5px;
  font-weight:   700;
  color:         var(--text);
}

/* Note / callout box */
.panel-note-box {
  background:    var(--bg);
  border-left:   3px solid var(--crimson);
  padding:       20px 24px;
  border-radius: 0 8px 8px 0;
  margin-top:    24px;
}

.panel-note-box h4 {
  font-size:      13px;
  font-weight:    700;
  color:          var(--text);
  margin-bottom:  8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.panel-note-box p {
  font-size:   13px;
  color:       var(--muted);
  line-height: 1.65;
}

/* Panel CTA row */
.panel-cta {
  margin-top:    36px;
  padding-top:   32px;
  border-top:    1px solid var(--border);
  display:       flex;
  align-items:   center;
  gap:           16px;
  flex-wrap:     wrap;
}

.panel-cta-text {
  font-size: 14px;
  color:     var(--muted);
}


/* ============================================================
   8. BENEFITS GRID
   ============================================================ */
.benefits-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   24px;
}

.benefit-card {
  background:    #fff;
  border:        1px solid var(--border);
  border-radius: 12px;
  padding:       28px;
  transition:    box-shadow .2s, transform .2s;
}

.benefit-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
  transform:  translateY(-2px);
}

/* Icon suppressed — editorial design */
.benefit-icon {
  display: none;
}

.benefit-card h3 {
  font-size:     16px;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 8px;
}

.benefit-card p {
  color:       var(--muted);
  font-size:   14px;
  line-height: 1.65;
}


/* ============================================================
   9. INCLUDED GRID
   ============================================================ */
.included-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
}

.included-item {
  background:    #fff;
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       16px 20px;
  display:       flex;
  gap:           12px;
  align-items:   flex-start;
}

.inc-check {
  width:         8px;
  height:        8px;
  background:    var(--crimson);
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    9px;
}

.included-item h4 {
  font-size:     14px;
  font-weight:   600;
  color:         var(--text);
  margin-bottom: 3px;
}

.included-item p {
  font-size:   13px;
  color:       var(--muted);
  line-height: 1.5;
}


/* ============================================================
   10. EXPERTISE SECTION
   ============================================================ */
.expertise-section {
  background: var(--bg);
}

.expertise-grid {
  display:               grid;
  grid-template-columns: 1.2fr 1fr;
  gap:                   64px;
  align-items:           start;
}

.expertise-points {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            14px;
  margin-top:     24px;
}

.expertise-points li {
  display:     flex;
  gap:         12px;
  align-items: flex-start;
  font-size:   14px;
  color:       var(--muted);
  line-height: 1.68;
}

.expertise-points li::before {
  content:       '';
  width:         7px;
  height:        7px;
  background:    var(--crimson);
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    7px;
}

/* Stats panel inside expertise section */
.expertise-numbers {
  background:     var(--navy);
  border-radius:  14px;
  padding:        36px;
  color:          #fff;
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.expertise-num-item {
  text-align:    center;
  padding:       28px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.expertise-num-item:last-child {
  border-bottom: none;
}

.en-num {
  font-size:   46px;
  font-weight: 700;
  color:       #fff;
  line-height: 1;
}

.en-label {
  font-size:   13px;
  opacity:     .78;
  margin-top:  8px;
  line-height: 1.45;
}


/* ============================================================
   11. PROCESS STEPS
   ============================================================ */
.process-steps {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:                   0;
  position:              relative;
}

.process-steps::before {
  content:    '';
  position:   absolute;
  top:        28px;
  left:       0;
  right:      0;
  height:     2px;
  background: var(--border);
}

.step {
  text-align: center;
  padding:    0 16px;
  position:   relative;
}

.step-num {
  width:          56px;
  height:         56px;
  background:     #fff;
  border:         3px solid var(--crimson);
  border-radius:  50%;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-weight:    700;
  font-size:      18px;
  color:          var(--crimson);
  margin:         0 auto 16px;
  position:       relative;
  z-index:        1;
}

.step h4 {
  font-size:     14px;
  font-weight:   600;
  color:         var(--text);
  margin-bottom: 6px;
}

.step p {
  font-size:   13px;
  color:       var(--muted);
  line-height: 1.5;
}


/* ============================================================
   12. FAQ
   ============================================================ */
.faq-list {
  max-width: 780px;
  margin:    0 auto;
}

.faq-item {
  border:        1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow:      hidden;
}

.faq-q {
  padding:         18px 22px;
  font-weight:     600;
  font-size:       15px;
  color:           var(--text);
  cursor:          pointer;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  background:      #fff;
  transition:      background .15s;
}

.faq-q:hover {
  background: var(--accent-light);
}

.faq-q::after {
  content:     '＋';
  font-size:   18px;
  color:       var(--crimson);
  flex-shrink: 0;
}

.faq-a {
  padding:     0 22px 18px;
  color:       var(--muted);
  font-size:   14px;
  line-height: 1.7;
  background:  #fff;
}


/* ============================================================
   13. RELATED SERVICES STRIP
   ============================================================ */
.related-services {
  background: var(--bg);
  padding:    64px 24px;
}

.related-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
  margin-top:            40px;
}

.related-card {
  background:     #fff;
  border:         1px solid var(--border);
  border-radius:  12px;
  padding:        28px;
  text-decoration: none;
  color:          inherit;
  transition:     box-shadow .2s, transform .2s;
  display:        block;
}

.related-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
  transform:  translateY(-2px);
}

.related-card-label {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--crimson);
  margin-bottom:  8px;
}

.related-card h3 {
  font-size:     17px;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 8px;
}

.related-card p {
  font-size:   13px;
  color:       var(--muted);
  line-height: 1.6;
}

.related-card-arrow {
  margin-top: 16px;
  font-size:  20px;
  color:      var(--crimson);
}


/* ============================================================
   14. CTA SECTION
   ============================================================ */
.cta-section {
  background:  var(--crimson);
  color:       #fff;
  padding:     64px 24px;
  text-align:  center;
}

.cta-section h2 {
  font-size:     clamp(20px, 2.8vw, 32px);
  font-weight:   700;
  margin-bottom: 12px;
}

.cta-section p {
  font-size:     15px;
  opacity:       .9;
  margin-bottom: 26px;
  line-height:   1.7;
}

/* .btn-white is defined in section 4 */


/* ============================================================
   15. FOOTER
   ============================================================ */
footer {
  background: var(--charcoal);
  color:      rgba(255, 255, 255, .65);
}

.footer-main {
  padding: 64px 32px 52px;
}

.footer-inner {
  max-width: 1200px;
  margin:    0 auto;
}

.footer-top {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   48px;
  margin-bottom:         48px;
}

.footer-brand p {
  font-size:   14px;
  line-height: 1.78;
  margin-top:  14px;
  opacity:     .62;
}

.footer-col h4 {
  color:          #fff;
  font-size:      12px;
  font-weight:    700;
  margin-bottom:  14px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.footer-col a {
  display:    block;
  font-size:  13px;
  margin-bottom: 8px;
  opacity:    .62;
  transition: opacity .15s, color .15s;
}

.footer-col a:hover {
  opacity: 1;
  color:   var(--crimson);
}

.footer-contact p {
  font-size:  13px;
  margin-bottom: 7px;
  color:      rgba(255, 255, 255, .72);
}

.footer-contact a {
  color: rgba(255, 255, 255, .85) !important;
}

.footer-strip {
  background: #1a1a1a;
  padding:    18px 32px;
}

.footer-strip-inner {
  max-width:       1200px;
  margin:          0 auto;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       12px;
  color:           rgba(255, 255, 255, .8);
  flex-wrap:       wrap;
  gap:             8px;
}

.footer-strip-inner a {
  color:      rgba(255, 255, 255, .8);
  transition: color .15s;
}

.footer-strip-inner a:hover {
  color: #fff;
}


/* ============================================================
   16. ANIMATION CLASSES
   ============================================================ */
.reveal {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
  opacity:   1;
  transform: none;
}

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

.reveal-left.visible {
  opacity:   1;
  transform: none;
}

.reveal-right {
  opacity:    0;
  transform:  translateX(28px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal-right.visible {
  opacity:   1;
  transform: none;
}

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }


/* ============================================================
   17. MODALS
   ============================================================ */
.modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, .5);
  z-index:         9000;
  align-items:     center;
  justify-content: center;
  padding:         24px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background:     #fff;
  border-radius:  12px;
  max-width:      680px;
  width:          100%;
  max-height:     85vh;
  display:        flex;
  flex-direction: column;
  box-shadow:     0 20px 60px rgba(0, 0, 0, .3);
}

.modal-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         24px 28px;
  border-bottom:   1px solid #e0e0e0;
  flex-shrink:     0;
}

.modal-header h3 {
  font-size:   18px;
  font-weight: 700;
  color:       #1a1a1a;
}

.modal-close {
  background: none;
  border:     none;
  font-size:  22px;
  cursor:     pointer;
  color:      #555;
  line-height: 1;
  padding:    4px 8px;
  transition: color .15s;
}

.modal-close:hover {
  color: #1a1a1a;
}

.modal-body {
  overflow-y:  auto;
  padding:     28px;
  font-size:   14px;
  line-height: 1.8;
  color:       #333;
}

.modal-body h4 {
  font-size:   14px;
  font-weight: 700;
  color:       #1a1a1a;
  margin:      20px 0 6px;
}

.modal-body h4:first-child {
  margin-top: 0;
}

.modal-body p {
  margin-bottom: 12px;
}

.modal-body ul {
  margin: 0 0 12px 20px;
}

.modal-body ul li {
  margin-bottom: 4px;
}


/* ============================================================
   18. MOBILE NAV OVERLAY
   ============================================================ */
.mobile-overlay {
  display:                   none;
  position:                  fixed;
  top:                       0;
  left:                      0;
  right:                     0;
  bottom:                    0;
  background:                #fff;
  z-index:                   9999;
  flex-direction:            column;
  overflow-y:                auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-overlay.open {
  display:   flex;
  animation: mobSlideIn .28s ease;
}

@keyframes mobSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.mobile-overlay-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 24px;
  height:          76px;
  border-bottom:   1px solid #eee;
  flex-shrink:     0;
}

.mobile-close {
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     8px;
  color:       #333;
  font-size:   28px;
  line-height: 1;
}

.mobile-nav-list {
  list-style: none;
  padding:    0;
  margin:     0;
  flex:       1;
}

.mobile-nav-item {
  border-bottom: 1px solid #eee;
}

.mobile-nav-link {
  display:                   flex;
  align-items:               center;
  justify-content:           space-between;
  padding:                   22px 28px;
  font-size:                 20px;
  font-weight:               500;
  color:                     #1a1a1a;
  text-decoration:           none;
  cursor:                    pointer;
  transition:                color .15s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-link.active {
  color: var(--crimson);
}

.mobile-nav-chevron {
  font-size:   16px;
  color:       #999;
  transition:  transform .25s;
  display:     inline-block;
}

.mobile-nav-link.active .mobile-nav-chevron {
  transform: rotate(90deg);
  color:     var(--crimson);
}

.mobile-sub-list {
  list-style:  none;
  padding:     0;
  margin:      0;
  display:     none;
  background:  #fafafa;
  border-top:  1px solid #eee;
}

.mobile-sub-list.open {
  display: block;
}

.mobile-sub-list li a {
  display:                   block;
  padding:                   16px 28px 16px 44px;
  font-size:                 16px;
  color:                     #333;
  text-decoration:           none;
  border-bottom:             1px solid #eee;
  -webkit-tap-highlight-color: transparent;
  transition:                color .15s;
}

.mobile-sub-list li a:hover,
.mobile-sub-list li a:active {
  color: var(--crimson);
}

.mobile-sub-list li a::after {
  content:   '›';
  font-size: 16px;
  color:     #bbb;
}


/* ============================================================
   19. MEDIA QUERIES
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {

  /* Nav */
  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Page hero */
  .page-hero {
    padding: 60px 20px 50px;
  }

  .page-hero h1 {
    font-size: clamp(22px, 6vw, 34px);
  }

  .page-hero-inner {
    grid-template-columns: 1fr;
    gap:                   32px;
  }

  .hero-box {
    display: none;
  }

  /* Buttons */
  .btn-outline-white {
    display:    block;
    margin-left: 0;
    margin-top:  14px;
    text-align:  center;
  }

  /* Sections */
  .section {
    padding: 56px 20px;
  }

  /* Grids → single column */
  .included-grid {
    grid-template-columns: 1fr;
  }

  .panel-grid {
    grid-template-columns: 1fr;
    gap:                   32px;
  }

  .expertise-grid {
    grid-template-columns: 1fr !important;
    gap:                   32px;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  /* Process line hidden on mobile */
  .process-steps::before {
    display: none;
  }

  /* Country tabs scroll nicely on mobile already via overflow-x */
  .country-selector-section {
    padding: 40px 20px;
  }

  .country-tab {
    padding: 12px 18px;
    font-size: 13px;
  }

  /* Dropdown in desktop nav (residual safety) */
  .dropdown-menu {
    position:   static !important;
    display:    none;
    box-shadow: none !important;
    border:     none !important;
    padding:    0 !important;
    background: transparent !important;
    min-width:  0;
  }

  .dropdown-menu a {
    padding:   8px 16px !important;
    font-size: 13px !important;
    color:     #555 !important;
  }

  /* Inner padding safety */
  .section-inner,
  .section-content {
    padding-left:  20px !important;
    padding-right: 20px !important;
  }
}

/* Narrow mobile */
@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-main {
    padding: 48px 20px 36px;
  }

  .footer-strip {
    padding: 16px 20px;
  }

  .footer-strip-inner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
  }

  .cta-section {
    padding: 48px 20px;
  }
}

/* ============================================================
   Country-specific service FAQ (service pages) + locations chips
   Added in IA/UX pass — switches with the country tab selection.
   ============================================================ */
.cfaq-panel{display:none;max-width:880px;margin:0 auto}
.cfaq-panel.active{display:block;animation:cfaqFade .3s ease}
@keyframes cfaqFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cfaq-head{font-size:21px;font-weight:700;color:var(--text);margin:0 0 18px}
.cfaq-exp{margin-top:26px;padding-top:24px;border-top:1px solid var(--border)}
.cfaq-exp-label{display:block;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--crimson);margin-bottom:13px}
.cfaq-exp-row{display:flex;flex-wrap:wrap;gap:10px}
.cfaq-exp-row a,.cfaq-exp-row span{display:inline-block;padding:8px 15px;background:#f7f7f8;border:1px solid var(--border);border-radius:50px;font-size:13px;font-weight:500;color:#333;text-decoration:none;transition:.15s}
.cfaq-exp-row a:hover{border-color:var(--crimson);color:var(--crimson)}
.cfaq-foot{max-width:880px;margin:38px auto 0;text-align:center;padding-top:28px;border-top:1px solid var(--border)}
.cfaq-foot p{font-size:15px;color:var(--muted);margin-bottom:18px}