.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}

.cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.cp-chip svg {
  stroke: #c9a656;
  transition: transform 0.4s ease;
}


/* ===============================================================
   .cp-why - Why Choose Us, horizontal cards in two columns
   (was .bh-why / .be-why)

   Used where the page also has a 3-across .vm-services-grid: two
   identical card grids stacked read as one undifferentiated block,
   so this one is deliberately a different shape.
   =============================================================== */
.cp-why {
  position: relative;
  overflow: hidden;
  background: #F9F5F5;
  padding: 78px 20px;
  font-family: 'SF Pro Regular', sans-serif;
}

/* Diagonal lines pattern - same treatment as .vm-hero-wrap */
.cp-why::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(144, 25, 28, 0.03) 0px,
    rgba(144, 25, 28, 0.03) 1px,
    transparent 1px,
    transparent 11px
  );
  pointer-events: none;
}

.cp-why > * {
  position: relative;
  z-index: 1;
}

.cp-why-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

/* An odd number of items leaves an orphan in the 2-column grid. Put --wide on
   the LAST card so it spans the full width and closes the section cleanly. */
.cp-why-card--wide {
  grid-column: span 2;
  background: linear-gradient(135deg, #fff 0%, #fdf7f7 100%);
}

.cp-why-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 28px 28px 28px 26px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Left accent bar that grows on hover */
.cp-why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: #c9a656;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s ease;
}

.cp-why-num {
  flex: 0 0 auto;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #f0e2e2;
  transition: color 0.4s ease, transform 0.4s ease;
}

.cp-why-body {
  min-width: 0;
}

.cp-why-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.cp-why-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-why-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-why-text a:hover {
  text-decoration: underline;
}


/* ===============================================================
   .cp-svc - service cards, 4 across with an optional featured card
   spanning two columns (was .at-services / .at-svc)

   Use --wide on the first card when the section has 5, 7 or 9
   items, so the grid fills evenly instead of leaving an orphan.
   =============================================================== */
.cp-services {
  position: relative;
  overflow: hidden;
  background: #F9F5F5;
  padding: 78px 20px;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(144, 25, 28, 0.03) 0px,
    rgba(144, 25, 28, 0.03) 1px,
    transparent 1px,
    transparent 11px
  );
  pointer-events: none;
}

.cp-services > * {
  position: relative;
  z-index: 1;
}

.cp-svc-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.cp-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 30px 26px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.cp-svc--wide {
  grid-column: span 2;
  background: linear-gradient(135deg, #fff 0%, #fdf7f7 100%);
}

.cp-svc::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: #c9a656;
  border-radius: 2px;
  transition: width 0.45s ease;
}

.cp-svc-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fdf2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-svc-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-svc-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 12px;
  transition: color 0.3s ease;
}

.cp-svc--wide .cp-svc-name {
  font-size: 21px !important;
}

.cp-svc-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-svc-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-svc-text a:hover {
  text-decoration: underline;
}

/* Bulleted list inside a service card (e.g. freight mode options) */
.cp-svc-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.cp-svc-list li {
  position: relative;
  padding: 0 0 0 20px;
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
}

.cp-svc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9a656;
}

.cp-svc-list li:last-child {
  margin-bottom: 0;
}


/* ===============================================================
   .cp-flow - vertical alternating timeline

   A third way to present a services list, for pages that already
   use .cp-svc-grid elsewhere or simply want a different rhythm.
   Cards alternate left and right of a dashed centre line, with a
   numbered badge sitting on the line itself.

   Collapses to a single left-aligned column below 900px.
   =============================================================== */
.cp-flow-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-flow {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

/* Dashed centre line */
.cp-flow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom,
    #e8dcdc 0px,
    #e8dcdc 7px,
    transparent 7px,
    transparent 14px
  );
}

.cp-flow-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  align-items: center;
  margin: 0 0 26px;
}

.cp-flow-item:last-child {
  margin-bottom: 0;
}

.cp-flow-badge {
  grid-column: 2;
  justify-self: center;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c9a656;
  color: #90191c;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.cp-flow-card {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 26px 26px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Odd items sit left of the line, even items right */
.cp-flow-item:nth-child(odd) .cp-flow-card  { grid-column: 1; text-align: right; }
.cp-flow-item:nth-child(even) .cp-flow-card { grid-column: 3; }

/* Accent bar on the edge facing the centre line */
.cp-flow-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #c9a656;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.45s ease;
}

.cp-flow-item:nth-child(odd) .cp-flow-card::before  { right: 0; }
.cp-flow-item:nth-child(even) .cp-flow-card::before { left: 0; }

.cp-flow-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.cp-flow-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-flow-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-flow-text a:hover {
  text-decoration: underline;
}


/* ===============================================================
   .cp-steps - numbered process strip with a dashed connector
   (was .at-steps). Works for 3, 4 or 5 steps - set the column
   count with the modifier classes below.
   =============================================================== */
.cp-steps {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-steps-grid {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 46px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.cp-steps-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cp-steps-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Connecting rule behind the numbered badges (desktop only) */
.cp-steps-grid::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    #e8dcdc 0px,
    #e8dcdc 7px,
    transparent 7px,
    transparent 14px
  );
  z-index: 0;
}

.cp-steps-grid--3::before { left: 16.6%; right: 16.6%; }
.cp-steps-grid--5::before { left: 10%;   right: 10%;   }

.cp-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 10px;
}

.cp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c9a656;
  color: #90191c;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px;
  margin: 0 0 18px;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

.cp-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-step-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-step-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.cp-step-text {
  font-size: 14px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}


/* ===============================================================
   Areas We Cover - column-count variants for .eh-modes-grid

   .eh-modes-grid from shared-sections.css is 3 across, which suits
   6, 9 or 12 cities. Countries with a different number of cities
   get one of these instead, so no row is left with an orphan.
   =============================================================== */
.eh-country .eh-modes-grid--4 { grid-template-columns: repeat(4, 1fr); }
.eh-country .eh-modes-grid--5 { grid-template-columns: repeat(5, 1fr); }


/* ===============================================================
   .cp-route - wide route banner (was .bh-route)
   =============================================================== */
.cp-route {
  max-width: 1200px;
  margin: 0 auto 32px;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #F9F5F5;
}

.cp-route img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.7s ease;
}


/* ===============================================================
   FAQ bulleted list - shared-sections.css styles <p> inside
   .vm-faq-answer but not <ul>/<li>. Some country FAQs list
   customs documents. (was scoped to .eh-belgium)
   =============================================================== */
.eh-country .vm-faq-answer-inner ul {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}

.eh-country .vm-faq-answer-inner li {
  position: relative;
  padding: 0 0 0 20px;
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #666;
}

.eh-country .vm-faq-answer-inner li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9a656;
}

.eh-country .vm-faq-answer-inner li:last-child {
  margin-bottom: 0;
}


/* ===============================================================
   Hover animation - scoped to .eh-country, so it applies to every
   country template that carries that class and to nothing else.
   shared-sections.css is loaded by every static template and is
   deliberately NOT touched here.
   =============================================================== */

/* Why cards */
.eh-country .cp-why-card:hover {
  transform: translateY(-5px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 16px 36px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-why-card:hover::before {
  transform: scaleY(1);
}

.eh-country .cp-why-card:hover .cp-why-num {
  color: #c9a656;
  transform: translateY(-2px);
}

.eh-country .cp-why-card:hover .cp-why-name {
  color: #90191c;
}

/* Service cards */
.eh-country .cp-svc:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.25);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.12);
}

.eh-country .cp-svc:hover::after {
  width: 60px;
}

.eh-country .cp-svc:hover .cp-svc-icon {
  background: #90191c;
  transform: translateY(-3px) scale(1.05);
}

.eh-country .cp-svc:hover .cp-svc-icon svg {
  stroke: #fff;
}

.eh-country .cp-svc:hover .cp-svc-name {
  color: #90191c;
}

/* Process steps */
.eh-country .cp-step:hover .cp-step-num {
  background: #c9a656;
  border-color: #c9a656;
  color: #fff;
  transform: translateY(-4px);
}

.eh-country .cp-step:hover .cp-step-icon {
  background: #90191c;
  transform: scale(1.06);
}

.eh-country .cp-step:hover .cp-step-icon svg {
  stroke: #fff;
}

.eh-country .cp-step:hover .cp-step-name {
  color: #90191c;
}

/* Flow timeline */
.eh-country .cp-flow-card:hover {
  transform: translateY(-4px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 16px 36px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-flow-card:hover::before {
  transform: scaleY(1);
}

.eh-country .cp-flow-card:hover .cp-flow-name {
  color: #90191c;
}

.eh-country .cp-flow-item:hover .cp-flow-badge {
  background: #90191c;
  border-color: #90191c;
  color: #fff;
  transform: scale(1.08);
}

/* Route banner */
.eh-country .cp-route:hover img {
  transform: scale(1.03);
}

/* Freight chips */
.eh-country .cp-chip:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.eh-country .cp-chip:hover svg {
  transform: translateX(3px) rotate(-8deg);
}

/* Shared components, country pages only */
.eh-country .vm-service-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.eh-country .vm-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 16px 36px rgba(144, 25, 28, 0.10);
}

.eh-country .vm-service-card .vm-service-icon,
.eh-country .vm-service-card .vm-service-num {
  transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease;
}

.eh-country .vm-service-card:hover .vm-service-icon {
  transform: translateY(-3px) scale(1.06);
}

.eh-country .vm-service-card:hover .vm-service-num {
  color: #c9a656;
}

/* City labels in Areas We Cover */
.eh-country .eh-mode-card--label {
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.eh-country .eh-mode-card--label:hover {
  transform: translateY(-4px);
  border-color: rgba(144, 25, 28, 0.25);
  box-shadow: 0 12px 28px rgba(144, 25, 28, 0.10);
}

.eh-country .eh-mode-card--label .eh-mode-name {
  transition: color 0.3s ease;
}

.eh-country .eh-mode-card--label:hover .eh-mode-name {
  color: #90191c;
}

/* City cards where .vm-why is used for an Areas We Cover row */
.eh-country .vm-why-card .vm-why-card-title {
  transition: color 0.3s ease;
}

.eh-country .vm-why-card:hover .vm-why-card-title {
  color: #90191c;
}

/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-why-card,
  .eh-country .cp-why-card::before,
  .eh-country .cp-why-num,
  .eh-country .cp-svc,
  .eh-country .cp-svc-icon,
  .eh-country .cp-step-num,
  .eh-country .cp-step-icon,
  .eh-country .cp-route img,
  .eh-country .cp-chip,
  .eh-country .cp-chip svg,
  .eh-country .vm-service-card,
  .eh-country .vm-service-card .vm-service-icon,
  .eh-country .eh-mode-card--label {
    transition: none !important;
  }
  .eh-country .cp-why-card:hover,
  .eh-country .cp-why-card:hover .cp-why-num,
  .eh-country .cp-svc:hover,
  .eh-country .cp-svc:hover .cp-svc-icon,
  .eh-country .cp-step:hover .cp-step-num,
  .eh-country .cp-step:hover .cp-step-icon,
  .eh-country .cp-route:hover img,
  .eh-country .cp-chip:hover,
  .eh-country .cp-chip:hover svg,
  .eh-country .vm-service-card:hover,
  .eh-country .vm-service-card:hover .vm-service-icon,
  .eh-country .eh-mode-card--label:hover {
    transform: none !important;
  }
}


/* ===============================================================
   Responsive
   =============================================================== */
@media (max-width: 1100px) {
  .cp-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-svc--wide { grid-column: span 2; }
  .cp-steps-grid,
  .cp-steps-grid--3,
  .cp-steps-grid--5 { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .cp-steps-grid::before { display: none; }
}

@media (max-width: 1024px) {
  .eh-country .eh-modes-grid--4,
  .eh-country .eh-modes-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* Flow timeline collapses to one left-aligned column */
@media (max-width: 900px) {
  .cp-flow::before { left: 26px; }
  .cp-flow-item {
    grid-template-columns: 52px 1fr;
    gap: 18px;
    align-items: start;
  }
  .cp-flow-badge { grid-column: 1; justify-self: start; }
  .cp-flow-item:nth-child(odd) .cp-flow-card,
  .cp-flow-item:nth-child(even) .cp-flow-card {
    grid-column: 2;
    text-align: left;
  }
  .cp-flow-item:nth-child(odd) .cp-flow-card::before,
  .cp-flow-item:nth-child(even) .cp-flow-card::before {
    left: 0;
    right: auto;
  }
}

@media (max-width: 960px) {
  .cp-why-grid { grid-template-columns: 1fr; }
  .cp-why-card--wide { grid-column: span 1; }
}

@media (max-width: 600px) {
  .eh-country .eh-modes-grid--4,
  .eh-country .eh-modes-grid--5 { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cp-why { padding: 56px 16px; }
  .cp-services { padding: 56px 16px; }
  .cp-steps { padding: 50px 16px; }
  .cp-why-card { padding: 24px 22px; gap: 16px; }
  .cp-why-num { font-size: 28px; }
  .cp-svc { padding: 26px 22px; }
  .cp-svc--wide .cp-svc-name { font-size: 19px !important; }
  .cp-route { margin-bottom: 26px; }
}

@media (max-width: 560px) {
  .cp-svc-grid { grid-template-columns: 1fr; gap: 18px; }
  .cp-svc--wide { grid-column: span 1; }
  .cp-steps-grid,
  .cp-steps-grid--3,
  .cp-steps-grid--5 { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 480px) {
  .cp-why-card { flex-direction: column; gap: 12px; }
}


/* ===============================================================
   .cp-bento - asymmetric service grid   (NEW - first used on Italy)

   A third services shape, alongside .cp-svc-grid (even 4-across)
   and .cp-flow (alternating timeline). Three columns of white
   cards with the icon INLINE beside the title and a numbered tab
   notched into the top-right corner, plus one --feature card on
   ink that spans two columns.

   Seven normal cards + one feature = nine cells = three clean
   rows with no orphan. Put the feature LAST.
   =============================================================== */
.cp-bento {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-bento-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.cp-bento-card {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 26px 26px 28px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Everything sits above the hover wash */
.cp-bento-card > * {
  position: relative;
  z-index: 1;
}

/* Diagonal wash that fades in on hover */
.cp-bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(144, 25, 28, 0.05) 0%, rgba(201, 166, 86, 0.09) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/* Number notched into the corner */
.cp-bento-num {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdfbfb;
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-bottom-left-radius: 12px;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  color: #c9a656;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.cp-bento-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 46px 14px 0;
}

.cp-bento-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fdf2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-bento-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-bento-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0;
  transition: color 0.3s ease;
}

.cp-bento-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-bento-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-bento-text a:hover {
  text-decoration: underline;
}

/* Feature card - ink ground, gold accents, spans two columns */
.cp-bento-card--feature {
  grid-column: span 2;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a1416 100%);
  border-color: #2a1416;
}

.cp-bento-card--feature::after {
  background: linear-gradient(135deg, rgba(201, 166, 86, 0.14) 0%, transparent 70%);
}

.cp-bento-card--feature .cp-bento-num {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #c9a656;
}

.cp-bento-card--feature .cp-bento-icon {
  background: rgba(201, 166, 86, 0.16);
}

.cp-bento-card--feature .cp-bento-icon svg {
  stroke: #c9a656;
}

.cp-bento-card--feature .cp-bento-name {
  color: #fff;
  font-size: 20px !important;
}

.cp-bento-card--feature .cp-bento-text {
  color: #c8c0c0;
}

.cp-bento-card--feature .cp-bento-text a {
  color: #c9a656;
}


/* --- .cp-bento hover, scoped to .eh-country like the rest --- */
.eh-country .cp-bento-card:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-bento-card:hover::after {
  opacity: 1;
}

.eh-country .cp-bento-card:hover .cp-bento-num {
  background: #90191c;
  border-color: #90191c;
  color: #fff;
}

.eh-country .cp-bento-card:hover .cp-bento-icon {
  background: #90191c;
  transform: rotate(-6deg) scale(1.06);
}

.eh-country .cp-bento-card:hover .cp-bento-icon svg {
  stroke: #fff;
}

.eh-country .cp-bento-card:hover .cp-bento-name {
  color: #90191c;
}

.eh-country .cp-bento-card--feature:hover {
  border-color: #c9a656;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.30);
}

.eh-country .cp-bento-card--feature:hover .cp-bento-num {
  background: #c9a656;
  border-color: #c9a656;
  color: #1a1a1a;
}

.eh-country .cp-bento-card--feature:hover .cp-bento-icon {
  background: #c9a656;
}

.eh-country .cp-bento-card--feature:hover .cp-bento-icon svg {
  stroke: #1a1a1a;
}

.eh-country .cp-bento-card--feature:hover .cp-bento-name {
  color: #c9a656;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-bento-card,
  .eh-country .cp-bento-card::after,
  .eh-country .cp-bento-icon,
  .eh-country .cp-bento-num {
    transition: none !important;
  }
  .eh-country .cp-bento-card:hover,
  .eh-country .cp-bento-card:hover .cp-bento-icon {
    transform: none !important;
  }
}

@media (max-width: 1100px) {
  .cp-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-bento-card--feature { grid-column: span 2; }
}

@media (max-width: 700px) {
  .cp-bento { padding: 56px 16px; }
  .cp-bento-grid { grid-template-columns: 1fr; gap: 18px; }
  .cp-bento-card { padding: 24px 22px 26px; }
  .cp-bento-card--feature { grid-column: span 1; }
  .cp-bento-card--feature .cp-bento-name { font-size: 18px !important; }
}


/* ===============================================================
   .cp-rail - sticky-aside editorial service list
                                    (NEW - first used on Kuwait)

   The fourth services shape, after .cp-svc-grid (even 4-across),
   .cp-flow (alternating timeline) and .cp-bento (asymmetric grid).

   Those three are all card grids, which need short blurbs. This
   one is for pages whose service blocks are full paragraphs: a
   sticky left panel carries the heading, lead, route badge and
   CTA while the right column scrolls a numbered list of hairline
   rows. Handles any number of items - no orphan to design around.

   Collapses to one column below 1024px, where the aside simply
   stops being sticky and sits above the list.
   =============================================================== */
.cp-rail-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-rail-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 56px;
  align-items: start;
}

/* --- sticky aside --- */
.cp-rail-aside {
  position: sticky;
  top: 100px;
}

.cp-rail-eyebrow {
  display: block;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #c9a656;
  margin: 0 0 12px;
}

.cp-rail-title {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0 0 16px;
}

.cp-rail-title span {
  color: #90191c;
}

.cp-rail-line {
  width: 50px;
  height: 3px;
  background: #c9a656;
  border-radius: 2px;
  margin: 0 0 18px;
}

.cp-rail-lead {
  font-size: 14.5px;
  line-height: 1.75;
  color: #777;
  margin: 0 0 22px;
}

/* Route badge - Dubai -> Kuwait by road */
.cp-rail-route {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #F9F5F5;
  margin: 0 0 22px;
  transition: border-color 0.4s ease, background 0.4s ease;
}

.cp-rail-route-city {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
}

.cp-rail-route-dash {
  flex: 1 1 auto;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    #d8c9c9 0px,
    #d8c9c9 5px,
    transparent 5px,
    transparent 10px
  );
}

.cp-rail-route svg {
  stroke: #90191c;
  flex: 0 0 auto;
  transition: transform 0.5s ease;
}

.cp-rail-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 30px;
  background: #90191c;
  color: #fff !important;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.cp-rail-cta svg {
  stroke: currentColor;
  transition: transform 0.35s ease;
}

/* --- the list --- */
.cp-rail-list {
  min-width: 0;
}

.cp-rail-item {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 22px;
  align-items: start;
  padding: 26px 22px 26px 18px;
  border-bottom: 1px solid #eee;
  transition: background 0.4s ease;
}

.cp-rail-item:first-child {
  border-top: 1px solid #eee;
}

/* Gold edge bar that grows on hover */
.cp-rail-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: #c9a656;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.45s ease;
}

.cp-rail-num {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fdf2f2;
  color: #90191c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 14px;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.cp-rail-body {
  min-width: 0;
  transition: transform 0.4s ease;
}

.cp-rail-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.cp-rail-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.cp-rail-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-rail-text a:hover {
  text-decoration: underline;
}


/* --- .cp-rail hover, scoped to .eh-country like the rest --- */
.eh-country .cp-rail-item:hover {
  background: #fdf8f8;
}

.eh-country .cp-rail-item:hover::before {
  transform: scaleY(1);
}

.eh-country .cp-rail-item:hover .cp-rail-num {
  background: #90191c;
  color: #fff;
  transform: scale(1.07);
}

.eh-country .cp-rail-item:hover .cp-rail-name {
  color: #90191c;
}

.eh-country .cp-rail-item:hover .cp-rail-body {
  transform: translateX(4px);
}

.eh-country .cp-rail-route:hover {
  border-color: rgba(144, 25, 28, 0.25);
  background: #fdf2f2;
}

.eh-country .cp-rail-route:hover svg {
  transform: translateX(4px);
}

.eh-country .cp-rail-cta:hover {
  background: #7a1518;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(144, 25, 28, 0.26);
}

.eh-country .cp-rail-cta:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-rail-item,
  .eh-country .cp-rail-item::before,
  .eh-country .cp-rail-num,
  .eh-country .cp-rail-body,
  .eh-country .cp-rail-route,
  .eh-country .cp-rail-route svg,
  .eh-country .cp-rail-cta,
  .eh-country .cp-rail-cta svg {
    transition: none !important;
  }
  .eh-country .cp-rail-item:hover .cp-rail-num,
  .eh-country .cp-rail-item:hover .cp-rail-body,
  .eh-country .cp-rail-route:hover svg,
  .eh-country .cp-rail-cta:hover,
  .eh-country .cp-rail-cta:hover svg {
    transform: none !important;
  }
}

@media (max-width: 1024px) {
  .cp-rail-grid { grid-template-columns: 1fr; gap: 34px; }
  .cp-rail-aside { position: static; top: auto; }
  .cp-rail-title { font-size: 26px !important; }
}

@media (max-width: 700px) {
  .cp-rail-section { padding: 56px 16px; }
  .cp-rail-item { grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 12px 22px 15px; }
  .cp-rail-num { width: 40px; height: 40px; font-size: 13px; }
  .cp-rail-title { font-size: 23px !important; }
}


/* ===============================================================
   .cp-solve - problem -> solution split cards
                                    (NEW - first used on Latvia)

   For "how we solve the top moving problems" style sections. Each
   card is split: the PROBLEM sits in a tinted band at the top with
   an alert icon, and the SOLUTION sits below on white, joined by a
   gold arrow that straddles the divide.

   On hover the problem band turns solid red while the solution
   below stays calm - the split is the whole point of the shape, so
   the hover dramatises it rather than just lifting the card.

   Two across, so it wants an even number of items.
   =============================================================== */
.cp-solve {
  position: relative;
  overflow: hidden;
  background: #F9F5F5;
  padding: 78px 20px;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-solve::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(144, 25, 28, 0.03) 0px,
    rgba(144, 25, 28, 0.03) 1px,
    transparent 1px,
    transparent 11px
  );
  pointer-events: none;
}

.cp-solve > * {
  position: relative;
  z-index: 1;
}

.cp-solve-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.cp-solve-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* --- top half: the problem --- */
.cp-solve-problem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: #fdf2f2;
  border-bottom: 1px solid #f3e4e4;
  transition: background 0.4s ease, border-color 0.4s ease;
}

.cp-solve-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-solve-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-solve-label {
  display: block;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c9a656;
  margin: 0 0 5px;
  transition: color 0.4s ease;
}

.cp-solve-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0;
  transition: color 0.3s ease;
}

/* --- bottom half: the solution --- */
.cp-solve-body {
  position: relative;
  padding: 26px 24px 26px;
}

/* Gold arrow straddling the divide */
.cp-solve-arrow {
  position: absolute;
  top: -13px;
  left: 24px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c9a656;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-solve-arrow svg {
  stroke: #fff;
}

.cp-solve-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.cp-solve-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-solve-text a:hover {
  text-decoration: underline;
}


/* --- .cp-solve hover, scoped to .eh-country like the rest --- */
.eh-country .cp-solve-card:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-solve-card:hover .cp-solve-problem {
  background: #90191c;
  border-color: #90191c;
}

.eh-country .cp-solve-card:hover .cp-solve-name {
  color: #fff;
}

.eh-country .cp-solve-card:hover .cp-solve-label {
  color: #e8c98a;
}

.eh-country .cp-solve-card:hover .cp-solve-icon {
  background: #fff;
  transform: rotate(-8deg) scale(1.07);
}

.eh-country .cp-solve-card:hover .cp-solve-arrow {
  background: #90191c;
  transform: translateY(3px);
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-solve-card,
  .eh-country .cp-solve-problem,
  .eh-country .cp-solve-icon,
  .eh-country .cp-solve-arrow,
  .eh-country .cp-solve-label,
  .eh-country .cp-solve-name {
    transition: none !important;
  }
  .eh-country .cp-solve-card:hover,
  .eh-country .cp-solve-card:hover .cp-solve-icon,
  .eh-country .cp-solve-card:hover .cp-solve-arrow {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .cp-solve-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cp-solve { padding: 56px 16px; }
  .cp-solve-problem { padding: 18px 20px; gap: 12px; }
  .cp-solve-body { padding: 24px 20px; }
  .cp-solve-arrow { left: 20px; }
}


/* ===============================================================
   .cp-tiles - photo-led service tiles
                                  (NEW - first used on Malaysia)

   The fifth services shape. Every earlier one - .cp-svc-grid,
   .cp-flow, .cp-bento, .cp-rail - is text only, because those
   pages had no photography. This one leads with the image: a
   cropped photo header carrying a number badge, then title and
   copy beneath.

   FILLING THE GRID. Three columns, and a --wide tile spans two.
   Pick the modifier count so the total CELLS divide by three:

       10 items  ->  8 normal + 2 wide  = 12 cells = 4 rows
        8 items  ->  7 normal + 1 wide  =  9 cells = 3 rows
        7 items  ->  7 normal           =  9? no - 7 cells, use
                     5 normal + 1 wide  =  7 -> reflow instead

   Put one --wide FIRST and one LAST so both rows close cleanly.
   Images are object-fit: cover inside a fixed ratio, so portrait,
   square and landscape sources all crop correctly.
   =============================================================== */
.cp-tiles {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-tiles-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cp-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.cp-tile--wide {
  grid-column: span 2;
}

/* --- photo header --- */
.cp-tile-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #F9F5F5;
}

.cp-tile--wide .cp-tile-media {
  aspect-ratio: 21 / 9;
}

.cp-tile-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

/* Scrim so the number badge stays legible over any photo */
.cp-tile-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.34) 0%, transparent 44%);
  pointer-events: none;
}

.cp-tile-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #90191c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12.5px;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

/* --- body --- */
.cp-tile-body {
  padding: 22px 24px 26px;
}

.cp-tile-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 11px;
  transition: color 0.3s ease;
}

.cp-tile--wide .cp-tile-name {
  font-size: 20px !important;
}

.cp-tile-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-tile-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-tile-text a:hover {
  text-decoration: underline;
}


/* --- .cp-tiles hover, scoped to .eh-country like the rest --- */
.eh-country .cp-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.12);
}

.eh-country .cp-tile:hover .cp-tile-media img {
  transform: scale(1.07);
}

.eh-country .cp-tile:hover .cp-tile-num {
  background: #90191c;
  color: #fff;
  transform: scale(1.08);
}

.eh-country .cp-tile:hover .cp-tile-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-tile,
  .eh-country .cp-tile-media img,
  .eh-country .cp-tile-num {
    transition: none !important;
  }
  .eh-country .cp-tile:hover,
  .eh-country .cp-tile:hover .cp-tile-media img,
  .eh-country .cp-tile:hover .cp-tile-num {
    transform: none !important;
  }
}

@media (max-width: 1100px) {
  .cp-tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-tile--wide { grid-column: span 2; }
  .cp-tile--wide .cp-tile-media { aspect-ratio: 16 / 7; }
}

@media (max-width: 700px) {
  .cp-tiles { padding: 56px 16px; }
  .cp-tiles-grid { grid-template-columns: 1fr; gap: 20px; }
  .cp-tile--wide { grid-column: span 1; }
  .cp-tile--wide .cp-tile-media { aspect-ratio: 16 / 10; }
  .cp-tile--wide .cp-tile-name { font-size: 18px !important; }
  .cp-tile-body { padding: 20px 20px 24px; }
}


/* ===============================================================
   .cp-deck - ghost-number service cards
                               (NEW - first used on Netherlands)

   The sixth services shape. Its signature is a large OUTLINED
   ghost number sitting behind the copy in the bottom-right, a
   folded corner in the top-right, and a red-to-gold accent line
   that draws across the bottom edge on hover.

   Three columns, so it wants a multiple of three (9 fits exactly).

   The ghost number keeps a light fill as well as a stroke, so it
   still reads if -webkit-text-stroke is unsupported rather than
   vanishing into transparent.
   =============================================================== */
.cp-deck {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-deck-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.cp-deck-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px 26px 30px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Folded corner, top right */
.cp-deck-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent #fdf2f2 transparent transparent;
  transition: border-right-color 0.4s ease;
}

/* Accent line that draws across the bottom on hover */
.cp-deck-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #90191c 0%, #c9a656 100%);
  transition: width 0.5s ease;
}

.cp-deck-ghost {
  position: absolute;
  right: 4px;
  bottom: -20px;
  z-index: 0;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 92px;
  line-height: 1;
  color: #faf4f4;
  -webkit-text-stroke: 1.5px #f2e5e5;
  pointer-events: none;
  user-select: none;
  transition: color 0.45s ease, -webkit-text-stroke-color 0.45s ease, transform 0.5s ease;
}

/* Content rides above the ghost number */
.cp-deck-icon,
.cp-deck-name,
.cp-deck-text {
  position: relative;
  z-index: 1;
}

.cp-deck-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fdf2f2;
  margin: 0 0 20px;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-deck-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-deck-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 11px;
  transition: color 0.3s ease;
}

.cp-deck-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-deck-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-deck-text a:hover {
  text-decoration: underline;
}


/* ===============================================================
   .cp-trust - compact one-line trust strip
                               (NEW - first used on Netherlands)

   For a SECOND reasons-to-choose block on a page that already
   uses .cp-why. Those are paragraph cards; these are one-liners,
   so they get a different shape rather than a second identical
   grid - a hairline-separated row with a gold check disc.
   =============================================================== */
.cp-trust {
  position: relative;
  overflow: hidden;
  background: #F9F5F5;
  padding: 74px 20px;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-trust::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(144, 25, 28, 0.03) 0px,
    rgba(144, 25, 28, 0.03) 1px,
    transparent 1px,
    transparent 11px
  );
  pointer-events: none;
}

.cp-trust > * {
  position: relative;
  z-index: 1;
}

.cp-trust-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 34px;
}

.cp-trust-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px 6px;
  border-top: 1px solid #eae0e0;
  transition: transform 0.35s ease;
}

.cp-trust-check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ecdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.cp-trust-check svg {
  stroke: #c9a656;
  transition: stroke 0.4s ease;
}

.cp-trust-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 7px;
  transition: color 0.3s ease;
}

.cp-trust-text {
  font-size: 14px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}


/* --- .cp-deck / .cp-trust hover, scoped to .eh-country --- */
.eh-country .cp-deck-card:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-deck-card:hover::before {
  border-right-color: #c9a656;
}

.eh-country .cp-deck-card:hover::after {
  width: 100%;
}

.eh-country .cp-deck-card:hover .cp-deck-ghost {
  color: #fdf0f0;
  -webkit-text-stroke-color: #e8cfcf;
  transform: translateY(-4px) scale(1.04);
}

.eh-country .cp-deck-card:hover .cp-deck-icon {
  background: #90191c;
  transform: translateY(-3px) scale(1.06);
}

.eh-country .cp-deck-card:hover .cp-deck-icon svg {
  stroke: #fff;
}

.eh-country .cp-deck-card:hover .cp-deck-name {
  color: #90191c;
}

.eh-country .cp-trust-item:hover {
  transform: translateX(4px);
}

.eh-country .cp-trust-item:hover .cp-trust-check {
  background: #90191c;
  border-color: #90191c;
  transform: scale(1.07);
}

.eh-country .cp-trust-item:hover .cp-trust-check svg {
  stroke: #fff;
}

.eh-country .cp-trust-item:hover .cp-trust-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-deck-card,
  .eh-country .cp-deck-card::after,
  .eh-country .cp-deck-ghost,
  .eh-country .cp-deck-icon,
  .eh-country .cp-trust-item,
  .eh-country .cp-trust-check {
    transition: none !important;
  }
  .eh-country .cp-deck-card:hover,
  .eh-country .cp-deck-card:hover .cp-deck-ghost,
  .eh-country .cp-deck-card:hover .cp-deck-icon,
  .eh-country .cp-trust-item:hover,
  .eh-country .cp-trust-item:hover .cp-trust-check {
    transform: none !important;
  }
}

@media (max-width: 1100px) {
  .cp-deck-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 28px; }
}

@media (max-width: 700px) {
  .cp-deck { padding: 56px 16px; }
  .cp-deck-grid { grid-template-columns: 1fr; gap: 18px; }
  .cp-deck-card { padding: 26px 22px 28px; }
  .cp-deck-ghost { font-size: 78px; }
  .cp-trust { padding: 54px 16px; }
  .cp-trust-grid { grid-template-columns: 1fr; gap: 0; }
  .cp-trust-item { padding: 20px 2px; }
}


/* ===============================================================
   .cp-issue - alternating problem panels with artwork
                                    (NEW - first used on Poland)

   A wider, image-led sibling of .cp-solve. Where .cp-solve stacks
   the problem above the solution inside a narrow card, this puts
   the artwork on one side of a full-width panel and the copy on
   the other, alternating sides down the list.

   Use it when the pain points HAVE illustrations; use .cp-solve
   when they don't.

   The artwork is object-fit: contain inside a padded tinted frame,
   not cover - these are illustrations, and cropping them loses
   meaning. Small source images therefore sit centred with
   breathing room instead of being blown up.
   =============================================================== */
.cp-issue-section {
  position: relative;
  overflow: hidden;
  background: #F9F5F5;
  padding: 74px 20px;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-issue-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(144, 25, 28, 0.03) 0px,
    rgba(144, 25, 28, 0.03) 1px,
    transparent 1px,
    transparent 11px
  );
  pointer-events: none;
}

.cp-issue-section > * {
  position: relative;
  z-index: 1;
}

.cp-issue-list {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.cp-issue {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.cp-issue-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdf6f6;
  padding: 34px 30px;
  min-height: 230px;
}

.cp-issue-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 190px;
  object-fit: contain;
  transition: transform 0.55s ease;
}

.cp-issue-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 36px;
}

.cp-issue-tag {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 30px;
  background: #fdf2f2;
  color: #90191c;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 14px;
  transition: background 0.4s ease, color 0.4s ease;
}

.cp-issue-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 14px;
  transition: color 0.3s ease;
}

.cp-issue-rule {
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 16px;
  transition: width 0.45s ease;
}

.cp-issue-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.cp-issue-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-issue-text a:hover {
  text-decoration: underline;
}

/* Every second panel puts the artwork on the right */
.cp-issue:nth-child(even) .cp-issue-media {
  order: 2;
}


/* --- .cp-issue hover, scoped to .eh-country like the rest --- */
.eh-country .cp-issue:hover {
  transform: translateY(-5px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-issue:hover .cp-issue-media img {
  transform: scale(1.05);
}

.eh-country .cp-issue:hover .cp-issue-tag {
  background: #90191c;
  color: #fff;
}

.eh-country .cp-issue:hover .cp-issue-rule {
  width: 80px;
}

.eh-country .cp-issue:hover .cp-issue-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-issue,
  .eh-country .cp-issue-media img,
  .eh-country .cp-issue-tag,
  .eh-country .cp-issue-rule {
    transition: none !important;
  }
  .eh-country .cp-issue:hover,
  .eh-country .cp-issue:hover .cp-issue-media img {
    transform: none !important;
  }
}

@media (max-width: 860px) {
  .cp-issue { grid-template-columns: 1fr; }
  /* artwork always leads on narrow screens */
  .cp-issue:nth-child(even) .cp-issue-media { order: 0; }
  .cp-issue-media { min-height: 0; padding: 28px 24px; }
  .cp-issue-media img { max-height: 160px; }
  .cp-issue-body { padding: 28px 24px 30px; }
}

@media (max-width: 700px) {
  .cp-issue-section { padding: 56px 16px; }
  .cp-issue-name { font-size: 17px !important; }
}


/* ===============================================================
   Links inside the shared header paragraphs and FAQ answers.

   .vm-hero-desc and .vm-services-desc live in shared-sections.css,
   which styles the paragraph but never its <a>. On the live site a
   global rule (Astra / the legacy inner-pages snippet) happens to
   paint them #90191c, so they look right today - but the country
   templates put real in-body links in both, and they should not
   depend on a global that this migration is meant to retire.

   Scoped to .eh-country so nothing else on the site is touched.
   Matches what the live site already renders: no visual change now,
   a safety net if that global ever goes away.
   =============================================================== */
.eh-country .vm-hero-desc a,
.eh-country .vm-faq-answer-inner a,
.eh-country .vm-services-desc a {
  color: #90191c;
  text-decoration: none;
}

.eh-country .vm-hero-desc a:hover,
.eh-country .vm-faq-answer-inner a:hover,
.eh-country .vm-services-desc a:hover {
  text-decoration: underline;
}


/* ===============================================================
   .cp-matrix - hairline service lattice
                                  (NEW - first used on Portugal)

   Every other services shape in this file is made of separate
   rounded cards. This one has NO cards: the cells sit in one
   continuous grid whose 1px gaps show the container's background
   through as hairline rules, with a single rounded border around
   the whole block. Quieter and more editorial - it suits pages
   pitched as "premium" rather than "busy".

   FILLING THE GRID: four columns, so it wants a multiple of four.
   Seven services + one --cta cell = 8 = two clean rows. The CTA
   cell is the trick worth reusing: an odd count leaves a hole, so
   the hole becomes a call to action instead of dead space.

   The cell hover deliberately has NO transform. The container
   needs overflow:hidden to clip the corner cells to its radius,
   which would also clip a lifted cell - so the hover is a gold
   top edge, an icon flip and a colour change instead.
   =============================================================== */
.cp-matrix-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-matrix {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #ececec;
  border: 1px solid #ececec;
  border-radius: 16px;
  overflow: hidden;
}

.cp-matrix-cell {
  position: relative;
  background: #fff;
  padding: 32px 26px 34px;
  transition: background 0.45s ease;
}

/* Gold-to-red top edge that draws in on hover */
.cp-matrix-cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #90191c 0%, #c9a656 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.cp-matrix-num {
  display: block;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #c9a656;
  margin: 0 0 18px;
  transition: color 0.4s ease;
}

.cp-matrix-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fdf2f2;
  margin: 0 0 18px;
  transition: background 0.4s ease;
}

.cp-matrix-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-matrix-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 11px;
  transition: color 0.3s ease;
}

.cp-matrix-text {
  font-size: 14px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-matrix-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-matrix-text a:hover {
  text-decoration: underline;
}

/* --- the CTA cell that fills the odd slot --- */
.cp-matrix-cell--cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a1416 100%);
  transition: background 0.45s ease;
}

.cp-matrix-cell--cta::before {
  display: none;
}

.cp-matrix-cta-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 12px;
}

.cp-matrix-cta-text {
  font-size: 14px;
  line-height: 1.7;
  color: #c8c0c0;
  margin: 0 0 20px;
}

.cp-matrix-cta-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 30px;
  background: #c9a656;
  color: #1a1a1a !important;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12.5px;
  text-decoration: none;
  transition: background 0.35s ease, transform 0.35s ease;
}

.cp-matrix-cta-btn svg {
  stroke: currentColor;
  transition: transform 0.35s ease;
}


/* --- .cp-matrix hover, scoped to .eh-country like the rest --- */
.eh-country .cp-matrix-cell:hover {
  background: #fdfbfb;
}

.eh-country .cp-matrix-cell:hover::before {
  transform: scaleX(1);
}

.eh-country .cp-matrix-cell:hover .cp-matrix-num {
  color: #90191c;
}

.eh-country .cp-matrix-cell:hover .cp-matrix-icon {
  background: #90191c;
}

.eh-country .cp-matrix-cell:hover .cp-matrix-icon svg {
  stroke: #fff;
}

.eh-country .cp-matrix-cell:hover .cp-matrix-name {
  color: #90191c;
}

.eh-country .cp-matrix-cell--cta:hover {
  background: linear-gradient(135deg, #241a1c 0%, #3b1c21 100%);
}

.eh-country .cp-matrix-cta-btn:hover {
  background: #fff;
  transform: translateY(-2px);
}

.eh-country .cp-matrix-cta-btn:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-matrix-cell,
  .eh-country .cp-matrix-cell::before,
  .eh-country .cp-matrix-icon,
  .eh-country .cp-matrix-cta-btn,
  .eh-country .cp-matrix-cta-btn svg {
    transition: none !important;
  }
  .eh-country .cp-matrix-cta-btn:hover,
  .eh-country .cp-matrix-cta-btn:hover svg {
    transform: none !important;
  }
}

@media (max-width: 1100px) {
  .cp-matrix { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .cp-matrix-section { padding: 56px 16px; }
  .cp-matrix { grid-template-columns: 1fr; border-radius: 14px; }
  .cp-matrix-cell { padding: 28px 22px 30px; }
  .cp-matrix-cta-name { font-size: 17px !important; }
}


/* ===============================================================
   .cp-stagger - offset two-column service list
                                     (NEW - first used on Qatar)

   Two columns of cards where the SECOND column starts lower than
   the first, so the cards interlock instead of lining up in rows.
   The signature is that broken vertical rhythm, plus a thick left
   rail on each card that colours in on hover.

   Takes any even number of items - split them evenly between the
   two .cp-stagger-col wrappers. Nothing to solve for orphans,
   which is why it suits counts that divide badly by three or four.

   The offset is removed below 860px, where the columns collapse
   into one and a stagger would just look like a mistake.
   =============================================================== */
.cp-stagger-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-stagger {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.cp-stagger-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* The offset that gives the section its rhythm */
.cp-stagger-col:nth-child(2) {
  margin-top: 64px;
}

.cp-stagger-card {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-left: 3px solid #f0e2e2;
  border-radius: 14px;
  padding: 28px 28px 30px 30px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, border-left-color 0.4s ease;
}

.cp-stagger-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 13px;
}

.cp-stagger-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fdf2f2;
  color: #90191c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.cp-stagger-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0;
  transition: color 0.3s ease;
}

.cp-stagger-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-stagger-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-stagger-text a:hover {
  text-decoration: underline;
}


/* --- .cp-stagger hover, scoped to .eh-country like the rest --- */
.eh-country .cp-stagger-card:hover {
  transform: translateY(-5px);
  border-color: rgba(144, 25, 28, 0.18);
  border-left-color: #90191c;
  box-shadow: 0 16px 36px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-stagger-card:hover .cp-stagger-num {
  background: #90191c;
  color: #fff;
  transform: rotate(-6deg) scale(1.07);
}

.eh-country .cp-stagger-card:hover .cp-stagger-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-stagger-card,
  .eh-country .cp-stagger-num {
    transition: none !important;
  }
  .eh-country .cp-stagger-card:hover,
  .eh-country .cp-stagger-card:hover .cp-stagger-num {
    transform: none !important;
  }
}

@media (max-width: 860px) {
  .cp-stagger { grid-template-columns: 1fr; gap: 20px; }
  .cp-stagger-col { gap: 20px; }
  .cp-stagger-col:nth-child(2) { margin-top: 0; }
}

@media (max-width: 700px) {
  .cp-stagger-section { padding: 56px 16px; }
  .cp-stagger-card { padding: 24px 22px 26px 24px; }
}


/* ===============================================================
   .cp-ledger - three-column spec rows
                                   (NEW - first used on Romania)

   A list, not a grid: full-width rows inside one bordered panel,
   each row splitting into number | name | description. The fixed
   name column makes the titles line up vertically down the page,
   which reads like a spec sheet rather than a set of cards.

   Use it for LONG service lists. Cards stop working past about
   nine items - the page becomes a wall - whereas rows stay
   scannable however many there are. Romania has twelve.

   Below 900px the name and text stack into a single column
   beside the number, so the row still reads top-to-bottom.
   =============================================================== */
.cp-ledger-section {
  position: relative;
  overflow: hidden;
  background: #F9F5F5;
  padding: 74px 20px;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-ledger-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(144, 25, 28, 0.03) 0px,
    rgba(144, 25, 28, 0.03) 1px,
    transparent 1px,
    transparent 11px
  );
  pointer-events: none;
}

.cp-ledger-section > * {
  position: relative;
  z-index: 1;
}

.cp-ledger {
  max-width: 1140px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
}

.cp-ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: 74px 290px 1fr;
  gap: 24px;
  align-items: start;
  padding: 26px 30px 28px;
  border-bottom: 1px solid #f4ecec;
  transition: background 0.4s ease;
}

.cp-ledger-row:last-child {
  border-bottom: none;
}

/* Gold edge bar that grows on hover */
.cp-ledger-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #c9a656;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.45s ease;
}

.cp-ledger-num {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 26px;
  line-height: 1.15;
  color: #f0dede;
  transition: color 0.4s ease, transform 0.4s ease;
}

.cp-ledger-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0;
  padding-top: 4px;
  transition: color 0.3s ease;
}

.cp-ledger-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
  padding-top: 3px;
}

.cp-ledger-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-ledger-text a:hover {
  text-decoration: underline;
}


/* --- .cp-ledger hover, scoped to .eh-country like the rest --- */
.eh-country .cp-ledger-row:hover {
  background: #fdf8f8;
}

.eh-country .cp-ledger-row:hover::before {
  transform: scaleY(1);
}

.eh-country .cp-ledger-row:hover .cp-ledger-num {
  color: #c9a656;
  transform: translateX(4px);
}

.eh-country .cp-ledger-row:hover .cp-ledger-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-ledger-row,
  .eh-country .cp-ledger-row::before,
  .eh-country .cp-ledger-num {
    transition: none !important;
  }
  .eh-country .cp-ledger-row:hover .cp-ledger-num {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .cp-ledger-row {
    grid-template-columns: 58px 1fr;
    gap: 8px 18px;
    padding: 24px 22px 26px;
  }
  .cp-ledger-name { grid-column: 2; padding-top: 2px; }
  .cp-ledger-text { grid-column: 2; padding-top: 0; }
  .cp-ledger-num { font-size: 22px; }
}

@media (max-width: 700px) {
  .cp-ledger-section { padding: 56px 16px; }
  .cp-ledger-row { grid-template-columns: 46px 1fr; gap: 6px 14px; padding: 22px 18px 24px; }
  .cp-ledger-num { font-size: 20px; }
}


/* ===============================================================
   .cp-crest - cards with an overhanging icon badge
                              (NEW - first used on Saudi Arabia)

   The badge sits ON the card's top edge rather than inside it, so
   the circle breaks the boundary and the row reads as a line of
   crests. That overhang is the whole point of the shape, so:

     - the cards must NOT have overflow:hidden
     - the grid needs padding-top to make room for the overhang
     - every hover transform on the badge must keep its
       translateX(-50%) or the badge jumps out of centre

   Centred text, four across, so it wants a multiple of four.
   Saudi Arabia has eight.
   =============================================================== */
.cp-crest-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-crest-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 46px 22px;
}

.cp-crest {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 44px 24px 28px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.cp-crest-badge {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 6px 16px rgba(144, 25, 28, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.cp-crest-badge svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-crest-num {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: #e8d8d8;
  transition: color 0.4s ease;
}

.cp-crest-name {
  position: relative;
  display: inline-block;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 14px;
  padding-bottom: 10px;
  transition: color 0.3s ease;
}

/* Gold underline that grows from the centre on hover */
.cp-crest-name::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  transform: translateX(-50%);
  transition: width 0.45s ease;
}

.cp-crest-text {
  font-size: 14px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-crest-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-crest-text a:hover {
  text-decoration: underline;
}


/* --- .cp-crest hover, scoped to .eh-country like the rest --- */
.eh-country .cp-crest:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

/* translateX(-50%) must survive, or the badge leaves centre */
.eh-country .cp-crest:hover .cp-crest-badge {
  background: #90191c;
  border-color: #90191c;
  box-shadow: 0 10px 22px rgba(144, 25, 28, 0.28);
  transform: translateX(-50%) translateY(-4px) scale(1.06);
}

.eh-country .cp-crest:hover .cp-crest-badge svg {
  stroke: #fff;
}

.eh-country .cp-crest:hover .cp-crest-num {
  color: #c9a656;
}

.eh-country .cp-crest:hover .cp-crest-name {
  color: #90191c;
}

.eh-country .cp-crest:hover .cp-crest-name::after {
  width: 38px;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-crest,
  .eh-country .cp-crest-badge,
  .eh-country .cp-crest-name::after {
    transition: none !important;
  }
  .eh-country .cp-crest:hover {
    transform: none !important;
  }
  .eh-country .cp-crest:hover .cp-crest-badge {
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 1100px) {
  .cp-crest-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .cp-crest-section { padding: 56px 16px; }
  .cp-crest-grid { grid-template-columns: 1fr; gap: 44px 0; }
  .cp-crest { padding: 42px 22px 26px; }
}


/* ===============================================================
   .cp-mark - wide cards with a ghost-ICON watermark
                                  (NEW - first used on Slovenia)

   .cp-deck puts a ghost NUMBER behind the copy; this puts a large
   faint ICON in the bottom-right corner instead, cropped by the
   card edge. Two columns rather than three, so each card is wide
   enough for a full paragraph without the watermark crowding it.

   The card needs overflow:hidden - the crop is what makes the
   watermark read as a mark rather than a floating graphic.

   FILLING THE GRID: two columns, so an odd count needs one --wide
   card spanning both. Slovenia has seven: 1 wide + 6 = 8 cells =
   four clean rows. Put the --wide one FIRST.
   =============================================================== */
.cp-mark-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-mark-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cp-mark {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 32px 34px 34px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.cp-mark--wide {
  grid-column: span 2;
  background: linear-gradient(135deg, #fff 0%, #fdf8f8 100%);
}

/* The watermark, cropped by the card's own edge */
.cp-mark-watermark {
  position: absolute;
  right: -16px;
  bottom: -24px;
  z-index: 0;
  line-height: 0;
  opacity: 0.05;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s ease;
}

.cp-mark-watermark svg {
  width: 150px;
  height: 150px;
  stroke: #90191c;
}

/* Content rides above the watermark */
.cp-mark-num,
.cp-mark-name,
.cp-mark-text,
.cp-mark-list {
  position: relative;
  z-index: 1;
}

.cp-mark-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 20px;
  background: #fdf2f2;
  color: #90191c;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11px;
  letter-spacing: 0.8px;
  margin: 0 0 16px;
  transition: background 0.4s ease, color 0.4s ease;
}

.cp-mark-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 12px;
  transition: color 0.3s ease;
}

.cp-mark--wide .cp-mark-name {
  font-size: 21px !important;
}

.cp-mark-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
  max-width: 44em;
}

.cp-mark-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-mark-text a:hover {
  text-decoration: underline;
}

/* Bulleted list inside a card - for copy that was written as a list */
.cp-mark-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-width: 44em;
}

.cp-mark-list li {
  position: relative;
  padding: 0 0 0 20px;
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
}

.cp-mark-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9a656;
}

.cp-mark-list li:last-child {
  margin-bottom: 0;
}

/* Links inside a restored list - .cp-mark-text a covers paragraphs but
   not list items, and these lists carry in-body links. */
.cp-mark-list li a {
  color: #90191c;
  text-decoration: none;
}

.cp-mark-list li a:hover {
  text-decoration: underline;
}


/* --- .cp-mark hover, scoped to .eh-country like the rest --- */
.eh-country .cp-mark:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-mark:hover .cp-mark-watermark {
  opacity: 0.11;
  transform: translate(-6px, -8px) rotate(-5deg);
}

.eh-country .cp-mark:hover .cp-mark-num {
  background: #90191c;
  color: #fff;
}

.eh-country .cp-mark:hover .cp-mark-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-mark,
  .eh-country .cp-mark-watermark,
  .eh-country .cp-mark-num {
    transition: none !important;
  }
  .eh-country .cp-mark:hover,
  .eh-country .cp-mark:hover .cp-mark-watermark {
    transform: none !important;
  }
}

@media (max-width: 860px) {
  .cp-mark-grid { grid-template-columns: 1fr; gap: 20px; }
  .cp-mark--wide { grid-column: span 1; }
  .cp-mark--wide .cp-mark-name { font-size: 18px !important; }
}

@media (max-width: 700px) {
  .cp-mark-section { padding: 56px 16px; }
  .cp-mark { padding: 28px 24px 30px; }
  .cp-mark-watermark svg { width: 118px; height: 118px; }
}


/* ===============================================================
   .cp-spine - cards with a vertical numbered rail
                                     (NEW - first used on Spain)

   A tinted strip runs the full height of the card's left edge,
   with the number set VERTICALLY inside it. That rotated numeral
   is the shape's signature - nothing else in this file sets type
   on its side - and it fills the strip whatever the card height,
   so ragged copy lengths still look deliberate.

   Three columns; six services = two clean rows.
   =============================================================== */
.cp-spine-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-spine-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.cp-spine {
  display: grid;
  grid-template-columns: 54px 1fr;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.cp-spine-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdf2f2;
  transition: background 0.4s ease;
}

/* Vertical numeral, reading bottom-to-top */
.cp-spine-num {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12.5px;
  letter-spacing: 3px;
  color: #90191c;
  transition: color 0.4s ease;
}

.cp-spine-body {
  min-width: 0;
  padding: 26px 24px 28px;
}

.cp-spine-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fdf2f2;
  margin: 0 0 16px;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-spine-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-spine-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 11px;
  transition: color 0.3s ease;
}

.cp-spine-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-spine-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-spine-text a:hover {
  text-decoration: underline;
}


/* ===============================================================
   .cp-steps-grid--6 - six process steps over two rows

   The dashed connector in .cp-steps-grid is drawn once across the
   top of the grid, which only makes sense on a single row. With
   six steps it would sit behind row one and leave row two's
   badges unconnected, so this variant hides it.
   =============================================================== */
.cp-steps-grid--6 {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 42px;
}

.cp-steps-grid--6::before {
  display: none;
}


/* --- .cp-spine hover, scoped to .eh-country like the rest --- */
.eh-country .cp-spine:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-spine:hover .cp-spine-rail {
  background: #90191c;
}

.eh-country .cp-spine:hover .cp-spine-num {
  color: #fff;
}

.eh-country .cp-spine:hover .cp-spine-icon {
  background: #90191c;
  transform: translateY(-3px) scale(1.06);
}

.eh-country .cp-spine:hover .cp-spine-icon svg {
  stroke: #fff;
}

.eh-country .cp-spine:hover .cp-spine-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-spine,
  .eh-country .cp-spine-rail,
  .eh-country .cp-spine-icon,
  .eh-country .cp-spine-num {
    transition: none !important;
  }
  .eh-country .cp-spine:hover,
  .eh-country .cp-spine:hover .cp-spine-icon {
    transform: none !important;
  }
  /* the numeral's own rotation must survive */
  .eh-country .cp-spine-num {
    transform: rotate(180deg) !important;
  }
}

@media (max-width: 1100px) {
  .cp-spine-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-steps-grid--6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .cp-spine-section { padding: 56px 16px; }
  .cp-spine-grid { grid-template-columns: 1fr; gap: 18px; }
  .cp-spine { grid-template-columns: 46px 1fr; }
  .cp-spine-body { padding: 24px 20px 26px; }
  .cp-steps-grid--6 { grid-template-columns: 1fr; row-gap: 34px; }
}


/* ===============================================================
   .cp-fold - cards with a clipped, numbered corner
                                    (NEW - first used on Sweden)

   Every other card in this file is a plain rounded rectangle.
   This one has a DIAGONAL triangle filling its bottom-right
   corner, with the number sitting inside it - an angular note
   among the rounded shapes, and the only place the accent colour
   meets the card edge as a hard diagonal.

   The triangle is a CSS border trick, not clip-path, so the
   card's own border-radius and border survive intact.

   NOTE the deliberately large padding-bottom: the copy must clear
   the triangle. Shrink the triangle and the padding together, or
   text will run into it.

   Four columns; eight services = two clean rows.
   =============================================================== */
.cp-fold-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-fold-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.cp-fold {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px 26px 64px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The clipped corner - a bottom-right triangle drawn with borders */
.cp-fold-corner {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 58px 58px;
  border-color: transparent transparent #fdf2f2 transparent;
  transition: border-bottom-color 0.4s ease;
}

.cp-fold-num {
  position: absolute;
  right: 10px;
  bottom: 7px;
  z-index: 1;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12.5px;
  color: #90191c;
  transition: color 0.4s ease;
}

.cp-fold-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fdf2f2;
  margin: 0 0 18px;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-fold-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-fold-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 11px;
  transition: color 0.3s ease;
}

.cp-fold-text {
  font-size: 14px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-fold-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-fold-text a:hover {
  text-decoration: underline;
}


/* --- .cp-fold hover, scoped to .eh-country like the rest --- */
.eh-country .cp-fold:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-fold:hover .cp-fold-corner {
  border-bottom-color: #90191c;
}

.eh-country .cp-fold:hover .cp-fold-num {
  color: #fff;
}

.eh-country .cp-fold:hover .cp-fold-icon {
  background: #90191c;
  transform: translateY(-3px) scale(1.06);
}

.eh-country .cp-fold:hover .cp-fold-icon svg {
  stroke: #fff;
}

.eh-country .cp-fold:hover .cp-fold-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-fold,
  .eh-country .cp-fold-corner,
  .eh-country .cp-fold-icon,
  .eh-country .cp-fold-num {
    transition: none !important;
  }
  .eh-country .cp-fold:hover,
  .eh-country .cp-fold:hover .cp-fold-icon {
    transform: none !important;
  }
}

@media (max-width: 1100px) {
  .cp-fold-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .cp-fold-section { padding: 56px 16px; }
  .cp-fold-grid { grid-template-columns: 1fr; gap: 18px; }
  .cp-fold { padding: 26px 22px 58px; }
  .cp-fold-corner { border-width: 0 0 52px 52px; }
}


/* ===============================================================
   .cp-tone - checkerboard of light and ink cards
                                  (NEW - first used on Thailand)

   Cards alternate white / ink down the grid. With THREE columns
   and an ODD number of items, nth-child(odd) produces a true
   checkerboard: dark, light, dark / light, dark, light / and so
   on. With an even count per row it degenerates into stripes, so
   this shape wants a 3-column grid and an odd total (9 works).

   The ink treatment is the same one used by .cp-bento--feature
   and .cp-matrix--cta, so the three read as one family.
   =============================================================== */
.cp-tone-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-tone-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.cp-tone {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 30px 26px 32px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.cp-tone-num {
  display: block;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #c9a656;
  margin: 0 0 16px;
  transition: color 0.4s ease;
}

.cp-tone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fdf2f2;
  margin: 0 0 18px;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-tone-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-tone-name {
  position: relative;
  display: inline-block;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 12px;
  padding-bottom: 9px;
  transition: color 0.3s ease;
}

/* Gold underline that grows from the left on hover */
.cp-tone-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  transition: width 0.45s ease;
}

.cp-tone-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.cp-tone-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-tone-text a:hover {
  text-decoration: underline;
}

/* --- the ink half of the checkerboard --- */
.cp-tone:nth-child(odd) {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a1416 100%);
  border-color: #2a1416;
}

.cp-tone:nth-child(odd) .cp-tone-icon {
  background: rgba(201, 166, 86, 0.16);
}

.cp-tone:nth-child(odd) .cp-tone-icon svg {
  stroke: #c9a656;
}

.cp-tone:nth-child(odd) .cp-tone-name {
  color: #fff;
}

.cp-tone:nth-child(odd) .cp-tone-text {
  color: #c8c0c0;
}

.cp-tone:nth-child(odd) .cp-tone-text a {
  color: #c9a656;
}


/* --- .cp-tone hover, scoped to .eh-country like the rest --- */
.eh-country .cp-tone:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-tone:hover .cp-tone-icon {
  background: #90191c;
  transform: translateY(-3px) scale(1.06);
}

.eh-country .cp-tone:hover .cp-tone-icon svg {
  stroke: #fff;
}

.eh-country .cp-tone:hover .cp-tone-name {
  color: #90191c;
}

.eh-country .cp-tone:hover .cp-tone-name::after {
  width: 34px;
}

/* Ink cards invert: gold where the light ones go red */
.eh-country .cp-tone:nth-child(odd):hover {
  border-color: #c9a656;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.30);
}

.eh-country .cp-tone:nth-child(odd):hover .cp-tone-icon {
  background: #c9a656;
}

.eh-country .cp-tone:nth-child(odd):hover .cp-tone-icon svg {
  stroke: #1a1a1a;
}

.eh-country .cp-tone:nth-child(odd):hover .cp-tone-name {
  color: #c9a656;
}

.eh-country .cp-tone:nth-child(odd):hover .cp-tone-num {
  color: #e8c98a;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-tone,
  .eh-country .cp-tone-icon,
  .eh-country .cp-tone-name::after {
    transition: none !important;
  }
  .eh-country .cp-tone:hover,
  .eh-country .cp-tone:hover .cp-tone-icon {
    transform: none !important;
  }
}

/* Two columns would turn the checkerboard into vertical stripes, so the
   alternation is dropped below 1100px and every card goes light. */
@media (max-width: 1100px) {
  .cp-tone-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-tone:nth-child(odd) {
    background: #fff;
    border-color: #eee;
  }
  .cp-tone:nth-child(odd) .cp-tone-icon { background: #fdf2f2; }
  .cp-tone:nth-child(odd) .cp-tone-icon svg { stroke: #90191c; }
  .cp-tone:nth-child(odd) .cp-tone-name { color: #1a1a1a; }
  .cp-tone:nth-child(odd) .cp-tone-text { color: #777; }
  .cp-tone:nth-child(odd) .cp-tone-text a { color: #90191c; }
  .eh-country .cp-tone:nth-child(odd):hover { border-color: rgba(144, 25, 28, 0.22); box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10); }
  .eh-country .cp-tone:nth-child(odd):hover .cp-tone-icon { background: #90191c; }
  .eh-country .cp-tone:nth-child(odd):hover .cp-tone-icon svg { stroke: #fff; }
  .eh-country .cp-tone:nth-child(odd):hover .cp-tone-name { color: #90191c; }
}

@media (max-width: 700px) {
  .cp-tone-section { padding: 56px 16px; }
  .cp-tone-grid { grid-template-columns: 1fr; gap: 18px; }
  .cp-tone { padding: 26px 22px 28px; }
}


/* =====================================================================
   .cp-issue--plain - problem panel with no artwork

   The UK page states three problems but only two of them ship with an
   illustration. A two-column panel with an empty media well looks broken,
   so the third drops to a single full-width column and stays inside the
   same card rhythm as the two above it.
   ===================================================================== */

.cp-issue--plain {
  grid-template-columns: 1fr;
}

.cp-issue--plain .cp-issue-body {
  padding: 32px 36px 34px;
}

@media (max-width: 700px) {
  .cp-issue--plain .cp-issue-body { padding: 28px 24px 30px; }
}


/* =====================================================================
   .cp-frame - service cards with an inset rule that opens on hover
   First used on /international-movers/dubai-to-uk/ (8 services, 4 x 2).

   The card is quiet at rest: a hairline sits inset from the edge like the
   plate mark on a printed page. On hover it pushes outward toward the card
   border and takes on gold, so the card appears to OPEN rather than merely
   lift. Nothing else changes position except the icon, which keeps a
   four-across row calm instead of busy.

   The frame is animated with the top/right/bottom/left longhands rather
   than the `inset` shorthand, because shorthand transitions are the kind
   of thing that quietly stops working in one browser.
   ===================================================================== */

.cp-frame-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-frame-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cp-frame {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 30px 24px 32px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The plate mark. Inset and invisible at rest. */
.cp-frame::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  left: 16px;
  border: 1px solid rgba(201, 166, 86, 0);
  border-radius: 8px;
  pointer-events: none;
  transition: top 0.45s ease, right 0.45s ease, bottom 0.45s ease,
              left 0.45s ease, border-color 0.45s ease;
}

.cp-frame-num {
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #e0d9d9;
  transition: color 0.4s ease;
}

.cp-frame-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fdf2f2;
  margin: 0 0 18px;
  transition: background 0.4s ease, transform 0.4s ease;
}

.cp-frame-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.cp-frame-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 12px;
  transition: color 0.3s ease;
}

.cp-frame-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.cp-frame-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-frame-text a:hover {
  text-decoration: underline;
}


/* --- .cp-frame hover, scoped to .eh-country like the rest --- */
.eh-country .cp-frame:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .cp-frame:hover::before {
  top: 7px;
  right: 7px;
  bottom: 7px;
  left: 7px;
  border-color: rgba(201, 166, 86, 0.55);
}

.eh-country .cp-frame:hover .cp-frame-icon {
  background: #90191c;
  transform: translateY(-2px);
}

.eh-country .cp-frame:hover .cp-frame-icon svg {
  stroke: #fff;
}

.eh-country .cp-frame:hover .cp-frame-name {
  color: #90191c;
}

.eh-country .cp-frame:hover .cp-frame-num {
  color: #c9a656;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-frame,
  .eh-country .cp-frame::before,
  .eh-country .cp-frame-icon,
  .eh-country .cp-frame-num {
    transition: none !important;
  }
  .eh-country .cp-frame:hover,
  .eh-country .cp-frame:hover .cp-frame-icon {
    transform: none !important;
  }
}

@media (max-width: 1100px) {
  .cp-frame-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .cp-frame-section { padding: 56px 16px; }
  .cp-frame-grid { grid-template-columns: 1fr; gap: 18px; }
  .cp-frame { padding: 26px 22px 28px; }
  .cp-frame-num { top: 20px; right: 22px; }
}


/* =====================================================================
   .cp-trace - feature rows whose outline draws itself on hover
   First used on /international-movers/dubai-to-usa/ (10 premium features).

   Two L-shaped brackets sit collapsed in opposite corners at rest. On hover
   each one grows along its edge and then turns the corner - width first,
   height on a delay - so the pair traces the full perimeter in two strokes
   that meet. It reads as the card being drawn rather than merely lit up,
   and it is the only hover in this stylesheet that animates the outline
   itself rather than a fill, a lift or an inset frame.

   Rows rather than tiles, because ten items in a card grid would either
   run too narrow or leave a ragged last row.
   ===================================================================== */

.cp-trace-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.cp-trace-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cp-trace {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 26px 28px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* The two brackets. Zero-sized at rest, so nothing shows.
   width transitions immediately, height after a beat - that ordering is
   what makes the line appear to turn the corner instead of scaling. */
.cp-trace::before,
.cp-trace::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 12px;
  pointer-events: none;
  transition: width 0.3s ease, height 0.3s ease 0.26s;
}

.cp-trace::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid #c9a656;
  border-left: 1px solid #c9a656;
}

.cp-trace::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid #c9a656;
  border-right: 1px solid #c9a656;
}

.cp-trace-num {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 20px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #d8cfcf;
  padding-top: 2px;
  transition: -webkit-text-stroke-color 0.4s ease, color 0.4s ease;
}

.cp-trace-body {
  min-width: 0;
  transition: transform 0.4s ease;
}

.cp-trace-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.cp-trace-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.cp-trace-text a {
  color: #90191c;
  text-decoration: none;
}

.cp-trace-text a:hover {
  text-decoration: underline;
}


/* --- .cp-trace hover, scoped to .eh-country like the rest --- */
.eh-country .cp-trace:hover {
  border-color: rgba(144, 25, 28, 0.14);
  box-shadow: 0 14px 34px rgba(144, 25, 28, 0.07);
}

.eh-country .cp-trace:hover::before,
.eh-country .cp-trace:hover::after {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

.eh-country .cp-trace:hover .cp-trace-num {
  -webkit-text-stroke-color: #c9a656;
  color: rgba(201, 166, 86, 0.12);
}

.eh-country .cp-trace:hover .cp-trace-body {
  transform: translateX(3px);
}

.eh-country .cp-trace:hover .cp-trace-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .cp-trace,
  .eh-country .cp-trace::before,
  .eh-country .cp-trace::after,
  .eh-country .cp-trace-body,
  .eh-country .cp-trace-num {
    transition: none !important;
  }
  .eh-country .cp-trace:hover .cp-trace-body {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .cp-trace-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cp-trace-section { padding: 56px 16px; }
  .cp-trace-grid { gap: 16px; }
  .cp-trace { padding: 22px 22px; gap: 16px; }
  .cp-trace-num { font-size: 17px; }
}


/* =====================================================================
   .em-rates - indicative price table
   First used on /movers-and-packers-in-ajman/ (6 move sizes).

   The first table in this stylesheet. Neither shared-sections.css nor
   country-pages.css had any table rules at all, so everything here is
   from scratch rather than an override of something existing.

   On row hover a gold bar slides in from the left edge and the price
   column lifts to red, so the eye tracks across a single row instead of
   losing its place between the move size and the number - the actual
   failure mode of a five-column price table.

   The table is wrapped in .em-rates-scroll, which is the only thing on
   the page allowed to scroll sideways. A price table cannot be reflowed
   into a single column without destroying the row relationship, so on a
   narrow screen it scrolls within its own box and the page body does not.
   ===================================================================== */

.em-rates-section {
  position: relative;
  overflow: hidden;
  background: #F9F5F5;
  padding: 74px 20px;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-rates-section > * {
  position: relative;
  z-index: 1;
}

.em-rates-card {
  max-width: 1140px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
}

.em-rates-caption {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #90191c;
  background: #fdf2f2;
  margin: 0;
  padding: 16px 26px;
  border-bottom: 1px solid #f2e4e4;
}

/* The only sideways-scrolling box on the page. */
.em-rates-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.em-rates-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14px;
}

.em-rates-table thead th {
  background: #1a1a1a;
  color: #fff;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  text-align: left;
  padding: 15px 20px;
  white-space: nowrap;
}

.em-rates-table thead th:last-child,
.em-rates-table tbody td:last-child {
  text-align: right;
}

.em-rates-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid #f0eaea;
  color: #777;
  line-height: 1.6;
  transition: color 0.3s ease;
}

.em-rates-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Move size - the row's own label, so it carries the weight. */
.em-rates-table tbody td:first-child {
  position: relative;
  color: #1a1a1a;
  font-weight: 600;
  white-space: nowrap;
}

/* The gold bar that slides in on hover. */
.em-rates-table tbody td:first-child::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 0;
  background: #c9a656;
  border-radius: 0 2px 2px 0;
  transition: width 0.32s ease;
}

.em-rates-price {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15px;
  color: #1a1a1a;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.em-rates-price span {
  font-family: 'SF Pro Regular', sans-serif;
  font-size: 11px;
  color: #aaa;
  margin-right: 4px;
}

.em-rates-table tbody tr {
  transition: background 0.3s ease;
}

.em-rates-note {
  max-width: 1140px;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.75;
  color: #888;
}

/* The fixed-price promise, sitting under the table. */
.em-rates-promise {
  max-width: 1140px;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 24px 28px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.em-rates-promise-figure {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 30px;
  line-height: 1;
  color: #90191c;
  white-space: nowrap;
}

.em-rates-promise-figure span {
  font-size: 14px;
  color: #c9a656;
  margin-left: 4px;
}

.em-rates-promise-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
  min-width: 0;
}

.em-rates-promise-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  background: #90191c;
  color: #fff;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.35s ease, transform 0.35s ease;
}


/* --- .em-rates hover, scoped like every other component here --- */
.eh-country .em-rates-table tbody tr:hover {
  background: #fdf7f7;
}

.eh-country .em-rates-table tbody tr:hover td:first-child::before {
  width: 4px;
}

.eh-country .em-rates-table tbody tr:hover td {
  color: #555;
}

.eh-country .em-rates-table tbody tr:hover .em-rates-price {
  color: #90191c;
}

.eh-country .em-rates-promise:hover {
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 16px 36px rgba(144, 25, 28, 0.08);
}

.eh-country .em-rates-promise-btn:hover {
  background: #7a1518;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-rates-table tbody tr,
  .eh-country .em-rates-table tbody td,
  .eh-country .em-rates-table tbody td:first-child::before,
  .eh-country .em-rates-promise,
  .eh-country .em-rates-promise-btn {
    transition: none !important;
  }
  .eh-country .em-rates-promise-btn:hover {
    transform: none !important;
  }
}

@media (max-width: 780px) {
  .em-rates-promise {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }
  .em-rates-promise-btn { justify-self: start; }
}

@media (max-width: 700px) {
  .em-rates-section { padding: 56px 16px; }
  .em-rates-caption { padding: 14px 20px; font-size: 11px; }
  .em-rates-table thead th { padding: 13px 16px; }
  .em-rates-table tbody td { padding: 14px 16px; }
}


/* =====================================================================
   .em-swap - service cards whose number becomes the icon on hover
   First used on /movers-and-packers-in-al-ain/ (8 services, 4 x 2).

   One 46px slot in the top-left holds BOTH the two-digit number and the
   icon, stacked on top of each other and clipped by the slot. At rest the
   number is showing; on hover it slides up and out while the icon slides
   in from below, and the slot fills to ink red. Nothing else in this
   stylesheet swaps two elements through a single opening - the other cards
   either move, lift, or draw a line.

   Both children are absolutely positioned in the same box, so the swap
   costs no layout and the card height never shifts.
   ===================================================================== */

.em-swap-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-swap-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.em-swap {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px 24px 30px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The opening. overflow:hidden is what makes the swap read as one slot
   rather than two elements crossing. */
.em-swap-slot {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #fdf2f2;
  overflow: hidden;
  margin: 0 0 18px;
  transition: background 0.4s ease;
}

.em-swap-num,
.em-swap-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.42s ease, opacity 0.42s ease;
}

.em-swap-num {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #90191c;
  opacity: 1;
  transform: translateY(0);
}

.em-swap-icon {
  opacity: 0;
  transform: translateY(100%);
}

.em-swap-icon svg {
  stroke: #fff;
}

.em-swap-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

/* Grows out from under the title on hover. */
.em-swap-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 12px;
  transition: width 0.45s ease;
}

.em-swap-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-swap-text a {
  color: #90191c;
  text-decoration: none;
}

.em-swap-text a:hover {
  text-decoration: underline;
}


/* --- .em-swap hover, scoped to .eh-country like the rest --- */
.eh-country .em-swap:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-swap:hover .em-swap-slot {
  background: #90191c;
}

.eh-country .em-swap:hover .em-swap-num {
  opacity: 0;
  transform: translateY(-100%);
}

.eh-country .em-swap:hover .em-swap-icon {
  opacity: 1;
  transform: translateY(0);
}

.eh-country .em-swap:hover .em-swap-name {
  color: #90191c;
}

.eh-country .em-swap:hover .em-swap-rule {
  width: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-swap,
  .eh-country .em-swap-slot,
  .eh-country .em-swap-num,
  .eh-country .em-swap-icon,
  .eh-country .em-swap-rule {
    transition: none !important;
  }
  .eh-country .em-swap:hover { transform: none !important; }
  .eh-country .em-swap:hover .em-swap-num  { transform: translateY(-100%) !important; }
  .eh-country .em-swap:hover .em-swap-icon { transform: translateY(0) !important; }
}

@media (max-width: 1100px) {
  .em-swap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .em-swap-section { padding: 56px 16px; }
  .em-swap-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-swap { padding: 24px 22px 26px; }
}


/* =====================================================================
   .em-cta - closing offer band on an ink ground

   The Al Ain page repeats its 20% offer as a closing call to action. On a
   dark ground the shared .vm-srv-btn-secondary (dark red on transparent,
   red border) all but disappears, so it is overridden to white inside this
   band only. The primary button is left alone - red on ink still reads.
   ===================================================================== */

.em-cta-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 20px 76px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-cta {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a1416 100%);
  border-radius: 18px;
  padding: 56px 40px;
  text-align: center;
}

.em-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(201, 166, 86, 0.05) 0px,
    rgba(201, 166, 86, 0.05) 1px,
    transparent 1px,
    transparent 12px
  );
  pointer-events: none;
}

.em-cta > * {
  position: relative;
  z-index: 1;
}

.em-cta-eyebrow {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9a656;
  margin: 0 0 14px;
}

.em-cta-figure {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 46px;
  line-height: 1;
  color: #fff;
  margin: 0 0 8px;
}

.em-cta-figure span {
  color: #c9a656;
}

.em-cta-sub {
  font-size: 14px;
  color: #c8c0c0;
  margin: 0 0 20px;
}

.em-cta-line {
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 auto 20px;
}

.em-cta-text {
  font-size: 14px;
  line-height: 1.75;
  color: #c8c0c0;
  max-width: 620px;
  margin: 0 auto 26px;
}

/* Only inside this band - the shared secondary button is built for light
   grounds and vanishes on ink. */
.em-cta .vm-srv-btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.eh-country .em-cta .vm-srv-btn-secondary:hover {
  background: #fff;
  border-color: #fff;
  color: #1a1a1a;
}

@media (max-width: 700px) {
  .em-cta-section { padding: 8px 16px 56px; }
  .em-cta { padding: 44px 22px; border-radius: 14px; }
  .em-cta-figure { font-size: 36px; }
}


/* =====================================================================
   .em-shot - photo service cards where the image breaks out of its mount
   First used on /movers-and-packers-in-al-quoz/ (8 photographed services).

   At rest the photo sits inset inside the card like a mounted print, with
   its own rounded corners and slightly held-back colour. On hover the mount
   closes to zero, the photo bleeds to the card's top edges, its corners
   square off against the card radius, and full colour comes back. The image
   also scales a little inside the fixed-height box, so it reads as pushing
   OUT of the mount rather than simply changing size.

   .em-shot-media is a FIXED height with box-sizing: border-box, so the
   padding animating 10px -> 0 changes the picture area without moving the
   card. Nothing below it shifts.

   Distinct from .cp-tiles (Malaysia), which is a photo header with a badge
   and a scrim and does not animate the frame at all.
   ===================================================================== */

.em-shot-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-shot-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.em-shot {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The mount. Fixed height + border-box is what stops the padding
   animation from moving anything. */
.em-shot-media {
  position: relative;
  height: 190px;
  box-sizing: border-box;
  padding: 10px 10px 0;
  background: #f7f2f2;
  overflow: hidden;
  transition: padding 0.45s ease, background 0.45s ease;
}

.em-shot-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  filter: saturate(0.72) contrast(1.02);
  transform: scale(1);
  transition: filter 0.5s ease, transform 0.6s ease, border-radius 0.45s ease;
}

.em-shot-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 22px 26px;
}

.em-shot-num {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: #c9a656;
  margin: 0 0 10px;
  transition: color 0.4s ease;
}

.em-shot-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.em-shot-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 12px;
  transition: width 0.45s ease;
}

.em-shot-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-shot-text a {
  color: #90191c;
  text-decoration: none;
}

.em-shot-text a:hover {
  text-decoration: underline;
}


/* --- .em-shot hover, scoped to .eh-country like the rest --- */
.eh-country .em-shot:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-shot:hover .em-shot-media {
  padding: 0;
  background: #1a1a1a;
}

.eh-country .em-shot:hover .em-shot-media img {
  filter: saturate(1) contrast(1);
  transform: scale(1.05);
  border-radius: 0;
}

.eh-country .em-shot:hover .em-shot-name {
  color: #90191c;
}

.eh-country .em-shot:hover .em-shot-rule {
  width: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-shot,
  .eh-country .em-shot-media,
  .eh-country .em-shot-media img,
  .eh-country .em-shot-rule {
    transition: none !important;
  }
  .eh-country .em-shot:hover { transform: none !important; }
  .eh-country .em-shot:hover .em-shot-media img { transform: none !important; }
}

@media (max-width: 1100px) {
  .em-shot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .em-shot-section { padding: 56px 16px; }
  .em-shot-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-shot-media { height: 200px; }
  .em-shot-body { padding: 20px 20px 24px; }
}


/* =====================================================================
   .em-stack - service cards that fan open like a deck on hover
   First used on /movers-and-packers-in-al-ruwais/ (12 services, 4 x 3).

   Two ghost layers sit exactly behind the card, invisible and unrotated at
   rest. On hover they fan out a couple of degrees either way and fade in,
   so the single card reads as the top of a small stack. Nothing else in
   this stylesheet builds depth BEHIND the card - the others lift, draw,
   swap or open a frame.

   Twelve services is a lot to look at. A stack that only appears under the
   pointer keeps the resting grid completely flat and quiet.

   STRUCTURE MATTERS HERE: the white surface is on .em-stack-face, not on
   .em-stack. If the wrapper painted its own background, the ghost layers
   would sit behind it and never be seen - the classic z-index trap with
   negative-index pseudo-elements. The wrapper stays transparent and the
   face is raised above the layers instead.

   The section must NOT be overflow:hidden or the fan will be clipped at
   the grid edges.
   ===================================================================== */

.em-stack-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-stack-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.em-stack {
  position: relative;
  display: flex;
  background: transparent;
}

/* The two ghost layers. Inset slightly so a 2deg rotation cannot reach a
   neighbouring column. */
.em-stack::before,
.em-stack::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  right: 5px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  opacity: 0;
  transform: rotate(0deg) translateY(0);
  transform-origin: 50% 100%;
  transition: transform 0.45s ease, opacity 0.4s ease;
}

.em-stack::after {
  transition-delay: 0.05s;
}

/* The visible surface. Raised above the ghost layers. */
.em-stack-face {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 26px 24px 28px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.em-stack-num {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: #d8cfcf;
  margin: 0 0 12px;
  transition: color 0.4s ease;
}

.em-stack-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.em-stack-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 12px;
  transition: width 0.45s ease;
}

.em-stack-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-stack-text a {
  color: #90191c;
  text-decoration: none;
}

.em-stack-text a:hover {
  text-decoration: underline;
}


/* --- .em-stack hover, scoped to .eh-country like the rest --- */
.eh-country .em-stack:hover::before {
  opacity: 1;
  transform: rotate(-2deg) translateY(5px);
}

.eh-country .em-stack:hover::after {
  opacity: 1;
  transform: rotate(2deg) translateY(9px);
}

.eh-country .em-stack:hover .em-stack-face {
  transform: translateY(-5px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-stack:hover .em-stack-num {
  color: #c9a656;
}

.eh-country .em-stack:hover .em-stack-name {
  color: #90191c;
}

.eh-country .em-stack:hover .em-stack-rule {
  width: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-stack::before,
  .eh-country .em-stack::after,
  .eh-country .em-stack-face,
  .eh-country .em-stack-rule {
    transition: none !important;
  }
  .eh-country .em-stack:hover::before,
  .eh-country .em-stack:hover::after {
    transform: none !important;
    opacity: 0 !important;
  }
  .eh-country .em-stack:hover .em-stack-face {
    transform: none !important;
  }
}

@media (max-width: 1100px) {
  .em-stack-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .em-stack-section { padding: 56px 16px; }
  .em-stack-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-stack-face { padding: 24px 22px 26px; }
}


/* =====================================================================
   .em-lift - service cards whose number rides a track on hover
   First used on /movers-and-packers-in-business-bay/ (8 services, 4 x 2).

   A hairline runs down the left edge of each card. The numbered disc sits
   at the BOTTOM of that track at rest; on hover a gold fill rises from the
   bottom and the disc travels up with it to the top, like a lift car
   reaching the floor. Business Bay is a district where every move is
   scheduled around service lift bookings, so the motion is the page's
   subject rather than decoration.

   The travel distance is the track's own height, which differs per card
   because the copy differs. That is why the disc is positioned with
   top:100% / translateY(-100%) at rest and top:0 / translateY(0) on hover
   rather than a fixed pixel offset - the distance solves itself at any
   card height.
   ===================================================================== */

.em-lift-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-lift-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.em-lift {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 30px 24px 32px 62px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The shaft. Definite height, which is what makes the percentage
   positioning on the car resolve. */
.em-lift-track {
  position: absolute;
  left: 28px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: #f0eaea;
  border-radius: 2px;
}

.em-lift-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #c9a656;
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.55s ease;
}

/* The car. Sits at the foot of the shaft until the card is hovered. */
.em-lift-car {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fdf2f2;
  color: #90191c;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3px;
  transition: top 0.55s ease, transform 0.55s ease,
              background 0.45s ease, color 0.45s ease;
}

.em-lift-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.em-lift-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-lift-text a {
  color: #90191c;
  text-decoration: none;
}

.em-lift-text a:hover {
  text-decoration: underline;
}


/* --- .em-lift hover, scoped to .eh-country like the rest --- */
.eh-country .em-lift:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-lift:hover .em-lift-fill {
  transform: scaleY(1);
}

.eh-country .em-lift:hover .em-lift-car {
  top: 0;
  transform: translate(-50%, 0);
  background: #90191c;
  color: #fff;
}

.eh-country .em-lift:hover .em-lift-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-lift,
  .eh-country .em-lift-fill,
  .eh-country .em-lift-car {
    transition: none !important;
  }
  .eh-country .em-lift:hover { transform: none !important; }
  /* The car still needs its two-part positioning, just without the travel. */
  .eh-country .em-lift:hover .em-lift-car { transform: translate(-50%, 0) !important; }
}

@media (max-width: 1100px) {
  .em-lift-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .em-lift-section { padding: 56px 16px; }
  .em-lift-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-lift { padding: 26px 22px 28px 58px; }
  .em-lift-track { left: 26px; top: 28px; bottom: 28px; }
}


/* =====================================================================
   .em-towers - grouped building directory
   First used on /movers-and-packers-in-dubai-marina/ (4 zones, 27 towers).

   Four zone panels, each holding its towers as individual chips. Two levels
   of hover: the PANEL lifts and grows a gold rule under its zone name, and
   each CHIP inside it fills to ink independently. A resident scanning for
   their own building gets a target that responds, rather than a wall of
   middot-separated text.

   Nothing else in this stylesheet groups chips under headings - .cp-chips
   is a short inline row and .eh-modes-grid is a flat grid of equal cards.
   Neither can carry 27 names in four labelled sets.
   ===================================================================== */

.em-towers-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-towers-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.em-tower-zone {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 26px 26px 28px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.em-tower-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 10px;
}

.em-tower-zone-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
  transition: color 0.3s ease;
}

.em-tower-count {
  flex: 0 0 auto;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #c9a656;
  white-space: nowrap;
}

.em-tower-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 16px;
  transition: width 0.45s ease;
}

.em-tower-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.em-tower-chip {
  padding: 7px 13px;
  border-radius: 30px;
  background: #f9f5f5;
  border: 1px solid #f0eaea;
  font-size: 12.5px;
  line-height: 1.3;
  color: #555;
  transition: background 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, transform 0.3s ease;
}

.em-tower-note {
  max-width: 1200px;
  margin: 22px auto 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: #888;
  text-align: center;
}


/* --- .em-towers hover, scoped to .eh-country like the rest --- */
.eh-country .em-tower-zone:hover {
  transform: translateY(-5px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-tower-zone:hover .em-tower-rule {
  width: 44px;
}

.eh-country .em-tower-zone:hover .em-tower-zone-name {
  color: #90191c;
}

/* Chips respond on their own, inside the panel hover. */
.eh-country .em-tower-chip:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-tower-zone,
  .eh-country .em-tower-rule,
  .eh-country .em-tower-chip {
    transition: none !important;
  }
  .eh-country .em-tower-zone:hover,
  .eh-country .em-tower-chip:hover {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .em-towers-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .em-towers-section { padding: 56px 16px; }
  .em-tower-zone { padding: 22px 20px 24px; }
  .em-tower-chip { font-size: 12px; padding: 6px 11px; }
}


/* =====================================================================
   .em-flip - service cards whose badge flips from number to icon
   First used on /movers-and-packers-in-fujairah/ (8 services, 4 x 2).

   A true two-sided 3D flip: the number is printed on the front face of the
   badge and the icon on the back, and the badge rotates 180deg on its Y
   axis when the card is hovered. Both faces use backface-visibility:hidden
   so only one is ever visible.

   Deliberately NOT the same trick as .em-swap on the Al Ain page. That one
   slides two stacked elements through a clipped slot in 2D; this one turns
   a single object in 3D. Side by side they read as different mechanisms,
   which is the point of giving each page its own shape.

   perspective lives on the badge wrapper rather than the card, so the
   rotation is a local effect and the rest of the card stays flat - a
   perspective on the card would skew the text as it turns.
   ===================================================================== */

.em-flip-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-flip-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.em-flip {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 30px 24px 32px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.em-flip-badge {
  width: 46px;
  height: 46px;
  margin: 0 0 18px;
  perspective: 500px;
}

.em-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.em-flip-face {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.em-flip-front {
  background: #fdf2f2;
  color: #90191c;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4px;
}

.em-flip-back {
  background: #90191c;
  transform: rotateY(180deg);
}

.em-flip-back svg {
  stroke: #fff;
}

.em-flip-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.em-flip-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 12px;
  transition: width 0.45s ease;
}

.em-flip-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-flip-text a {
  color: #90191c;
  text-decoration: none;
}

.em-flip-text a:hover {
  text-decoration: underline;
}


/* --- .em-flip hover, scoped to .eh-country like the rest --- */
.eh-country .em-flip:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-flip:hover .em-flip-inner {
  transform: rotateY(180deg);
}

.eh-country .em-flip:hover .em-flip-name {
  color: #90191c;
}

.eh-country .em-flip:hover .em-flip-rule {
  width: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-flip,
  .eh-country .em-flip-inner,
  .eh-country .em-flip-rule {
    transition: none !important;
  }
  .eh-country .em-flip:hover { transform: none !important; }
  /* The flip still resolves to the icon face, it just does not spin. */
  .eh-country .em-flip:hover .em-flip-inner { transform: rotateY(180deg) !important; }
}

@media (max-width: 1100px) {
  .em-flip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .em-flip-section { padding: 56px 16px; }
  .em-flip-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-flip { padding: 26px 22px 28px; }
}


/* =====================================================================
   .em-ring - service cards whose number is circled by a drawing ring
   First used on /movers-and-packers-in-sharjah/ (6 services, 3 x 2).

   The number sits inside a 58px SVG dial. A pale track circle is always
   there; a gold progress circle sits on top of it, fully offset so none of
   it shows at rest. On hover the offset animates to zero and the gold
   stroke draws itself clockwise from twelve o'clock all the way round.

   This is the only component in the stylesheet that animates an SVG STROKE
   rather than a transform, an opacity or a box dimension. Next to the flip
   on Fujairah and the slot-swap on Al Ain it reads as a third, unrelated
   mechanism, which is the point.

   The circumference of an r=26 circle is 163.36, so stroke-dasharray and
   the resting stroke-dashoffset are both set to 164 - one dash long enough
   to wrap the whole circle, pushed entirely out of view. The SVG is rotated
   -90deg so the stroke starts at the top instead of at three o'clock.
   ===================================================================== */

.em-ring-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-ring-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.em-ring {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 30px 26px 32px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.em-ring-badge {
  position: relative;
  width: 58px;
  height: 58px;
  margin: 0 0 18px;
}

.em-ring-svg {
  display: block;
  width: 58px;
  height: 58px;
  transform: rotate(-90deg);
}

.em-ring-track {
  fill: none;
  stroke: #f2ecec;
  stroke-width: 2;
}

.em-ring-progress {
  fill: none;
  stroke: #c9a656;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 164;
  stroke-dashoffset: 164;
  transition: stroke-dashoffset 0.7s ease;
}

.em-ring-num {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #c0b6b6;
  transition: color 0.4s ease;
}

.em-ring-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.em-ring-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 12px;
  transition: width 0.45s ease;
}

.em-ring-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-ring-text a {
  color: #90191c;
  text-decoration: none;
}

.em-ring-text a:hover {
  text-decoration: underline;
}


/* --- .em-ring hover, scoped to .eh-country like the rest --- */
.eh-country .em-ring:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-ring:hover .em-ring-progress {
  stroke-dashoffset: 0;
}

.eh-country .em-ring:hover .em-ring-num {
  color: #90191c;
}

.eh-country .em-ring:hover .em-ring-name {
  color: #90191c;
}

.eh-country .em-ring:hover .em-ring-rule {
  width: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-ring,
  .eh-country .em-ring-progress,
  .eh-country .em-ring-num,
  .eh-country .em-ring-rule {
    transition: none !important;
  }
  .eh-country .em-ring:hover { transform: none !important; }
}

@media (max-width: 1000px) {
  .em-ring-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .em-ring-section { padding: 56px 16px; }
  .em-ring-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-ring { padding: 26px 22px 28px; }
}


/* =====================================================================
   .em-turn - service cards whose icon tile turns to a diamond
   First used on /movers-and-packers-in-umm-al-quwain/ (8 services, 4 x 2).

   The rounded icon tile rotates 45deg on hover and lands as a diamond,
   filling to ink at the same time. The glyph inside counter-rotates -45deg
   by exactly the same amount, so it stays upright while its container
   turns underneath it.

   That counter-rotation is the whole trick and the reason this is its own
   component: nothing else in the stylesheet rotates a container and undoes
   the rotation on the child. Without it the icon would end up on its side
   and read as a mistake rather than a move.

   The number crossfades out as the tile turns, so the two never compete
   for the same corner.
   ===================================================================== */

.em-turn-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-turn-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.em-turn {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 30px 24px 32px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.em-turn-num {
  position: absolute;
  top: 26px;
  right: 24px;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #e0d9d9;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* The tile. Square at rest, diamond on hover. */
.em-turn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #fdf2f2;
  margin: 0 0 22px;
  transition: transform 0.5s ease, background 0.45s ease, border-radius 0.5s ease;
}

/* The glyph, which must NOT turn with its container. */
.em-turn-icon svg {
  stroke: #90191c;
  transition: transform 0.5s ease, stroke 0.45s ease;
}

.em-turn-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.em-turn-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 12px;
  transition: width 0.45s ease;
}

.em-turn-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-turn-text a {
  color: #90191c;
  text-decoration: none;
}

.em-turn-text a:hover {
  text-decoration: underline;
}


/* --- .em-turn hover, scoped to .eh-country like the rest --- */
.eh-country .em-turn:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-turn:hover .em-turn-icon {
  transform: rotate(45deg);
  background: #90191c;
  border-radius: 8px;
}

/* Equal and opposite, so the glyph stays upright. */
.eh-country .em-turn:hover .em-turn-icon svg {
  transform: rotate(-45deg);
  stroke: #fff;
}

.eh-country .em-turn:hover .em-turn-num {
  opacity: 0;
  transform: translateX(6px);
}

.eh-country .em-turn:hover .em-turn-name {
  color: #90191c;
}

.eh-country .em-turn:hover .em-turn-rule {
  width: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-turn,
  .eh-country .em-turn-icon,
  .eh-country .em-turn-icon svg,
  .eh-country .em-turn-num,
  .eh-country .em-turn-rule {
    transition: none !important;
  }
  .eh-country .em-turn:hover { transform: none !important; }
  /* No spin, but the tile must not be left mid-turn either. */
  .eh-country .em-turn:hover .em-turn-icon,
  .eh-country .em-turn:hover .em-turn-icon svg,
  .eh-country .em-turn:hover .em-turn-num { transform: none !important; }
}

@media (max-width: 1100px) {
  .em-turn-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .em-turn-section { padding: 56px 16px; }
  .em-turn-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-turn { padding: 26px 22px 28px; }
  .em-turn-num { top: 22px; right: 22px; }
}


/* =====================================================================
   .em-sweep - service cards washed by a tint that sweeps in from the left
   First used on /movers-in-al-qouz-dubai/ (5 services, 2 cols + wide 5th).

   The card carries an oversized linear-gradient as its background, parked
   off to the right so only the white end of it shows. On hover the
   background POSITION animates to the left, dragging the tinted end of the
   gradient across the card. A gold bar grows down the left edge at the same
   time, so the wash reads as arriving from that edge rather than fading in.

   Animating background-position is the mechanism here, and nothing else in
   this stylesheet does it - the others move boxes, turn them, draw strokes
   or flip faces. A plain background-color transition would fade uniformly
   and lose the directional read entirely.

   Long service copy is why these are two-up rather than four-up: each of
   these five descriptions runs to four or five lines.
   ===================================================================== */

.em-sweep-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-sweep-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

/* An odd count leaves an orphan in a two-column grid; put --wide on the
   last card the way .cp-why-card--wide does. */
.em-sweep--wide {
  grid-column: span 2;
}

.em-sweep {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 30px 30px 32px 34px;
  background-color: #fff;
  background-image: linear-gradient(100deg, #fdf2f2 0%, #fdf2f2 38%, #ffffff 72%);
  background-size: 260% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  transition: background-position 0.6s ease, transform 0.4s ease,
              box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The edge the wash arrives from. */
.em-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: #c9a656;
  transition: width 0.45s ease;
}

.em-sweep-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

.em-sweep-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fdf2f2;
  transition: background 0.45s ease, transform 0.45s ease;
}

.em-sweep-icon svg {
  stroke: #90191c;
  transition: stroke 0.45s ease;
}

.em-sweep-num {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: #c0b6b6;
  transition: color 0.4s ease;
}

.em-sweep-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 12px;
  transition: color 0.3s ease;
}

.em-sweep-text {
  font-size: 13.5px;
  line-height: 1.8;
  color: #777;
  margin: 0;
}

.em-sweep-text a {
  color: #90191c;
  text-decoration: none;
}

.em-sweep-text a:hover {
  text-decoration: underline;
}


/* --- .em-sweep hover, scoped to .eh-country like the rest --- */
.eh-country .em-sweep:hover {
  background-position: 0 0;
  transform: translateY(-5px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-sweep:hover::before {
  width: 4px;
}

.eh-country .em-sweep:hover .em-sweep-icon {
  background: #90191c;
  transform: translateX(2px);
}

.eh-country .em-sweep:hover .em-sweep-icon svg {
  stroke: #fff;
}

.eh-country .em-sweep:hover .em-sweep-num {
  color: #c9a656;
}

.eh-country .em-sweep:hover .em-sweep-name {
  color: #90191c;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-sweep,
  .eh-country .em-sweep::before,
  .eh-country .em-sweep-icon {
    transition: none !important;
  }
  .eh-country .em-sweep:hover,
  .eh-country .em-sweep:hover .em-sweep-icon {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .em-sweep-grid { grid-template-columns: 1fr; }
  .em-sweep--wide { grid-column: span 1; }
}

@media (max-width: 700px) {
  .em-sweep-section { padding: 56px 16px; }
  .em-sweep-grid { gap: 18px; }
  .em-sweep { padding: 26px 22px 28px 26px; }
}


/* Three zone panels rather than the default two - used where a page groups
   its areas into three sets instead of four. */
.em-towers-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .em-towers-grid--3 { grid-template-columns: 1fr; }
}


/* =====================================================================
   .em-arrow - service cards with an action affordance in the corner
   First used on /movers-in-bur-dubai/ (7 services, 3 across + wide 7th).

   Each card carries a small outlined circle in its top-right holding an
   arrow that points right. On hover the circle fills to ink, the arrow
   turns 45deg to point up-and-out, and travels a few pixels along that
   new diagonal - the standard "this goes somewhere" gesture.

   Being straight about what is new here: after eleven components the
   distinct thing is no longer the CSS property but the ROLE. Nothing else
   in this stylesheet gives a card a per-card affordance; every other
   component decorates the card, this one makes it look actionable. The
   combined motion - a circle filling while its glyph rotates AND
   translates along the diagonal it now points down - reads differently
   from the tile-turn on Umm Al Quwain, which rotates its container and
   counter-rotates the glyph to keep it still.

   The circle sits in the padding reserve at the top right, so it never
   collides with the heading no matter how long the title runs.
   ===================================================================== */

.em-arrow-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-arrow-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Seven items in a three-column grid leaves one alone; the last spans. */
.em-arrow--wide {
  grid-column: span 3;
}

.em-arrow {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  /* right padding reserves the corner for the affordance */
  padding: 28px 74px 30px 26px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.em-arrow-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ecebeb;
  transition: background 0.4s ease, border-color 0.4s ease;
}

.em-arrow-btn svg {
  stroke: #90191c;
  transition: transform 0.45s ease, stroke 0.4s ease;
}

.em-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fdf2f2;
  margin: 0 0 18px;
  transition: background 0.4s ease;
}

.em-arrow-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.em-arrow-num {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: #c0b6b6;
  margin: 0 0 8px;
  transition: color 0.4s ease;
}

.em-arrow-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.em-arrow-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 12px;
  transition: width 0.45s ease;
}

.em-arrow-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-arrow-text a {
  color: #90191c;
  text-decoration: none;
}

.em-arrow-text a:hover {
  text-decoration: underline;
}


/* --- .em-arrow hover, scoped to .eh-country like the rest --- */
.eh-country .em-arrow:hover {
  transform: translateY(-6px);
  border-color: rgba(144, 25, 28, 0.22);
  box-shadow: 0 18px 40px rgba(144, 25, 28, 0.10);
}

.eh-country .em-arrow:hover .em-arrow-btn {
  background: #90191c;
  border-color: #90191c;
}

/* Turn to point up-and-out, then travel along that diagonal. */
.eh-country .em-arrow:hover .em-arrow-btn svg {
  transform: rotate(-45deg) translate(3px, 0);
  stroke: #fff;
}

.eh-country .em-arrow:hover .em-arrow-icon {
  background: #90191c;
}

.eh-country .em-arrow:hover .em-arrow-icon svg {
  stroke: #fff;
}

.eh-country .em-arrow:hover .em-arrow-num {
  color: #c9a656;
}

.eh-country .em-arrow:hover .em-arrow-name {
  color: #90191c;
}

.eh-country .em-arrow:hover .em-arrow-rule {
  width: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-arrow,
  .eh-country .em-arrow-btn,
  .eh-country .em-arrow-btn svg,
  .eh-country .em-arrow-icon,
  .eh-country .em-arrow-rule {
    transition: none !important;
  }
  .eh-country .em-arrow:hover { transform: none !important; }
  .eh-country .em-arrow:hover .em-arrow-btn svg { transform: none !important; }
}

@media (max-width: 1000px) {
  .em-arrow-grid { grid-template-columns: repeat(2, 1fr); }
  .em-arrow--wide { grid-column: span 2; }
}

@media (max-width: 700px) {
  .em-arrow-section { padding: 56px 16px; }
  .em-arrow-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-arrow--wide { grid-column: span 1; }
  .em-arrow { padding: 26px 68px 28px 22px; }
  .em-arrow-btn { top: 22px; right: 22px; }
}


/* =====================================================================
   .em-door - service cards whose icon plate opens like a pair of doors
   First used on /movers-in-deira-dubai/ (6 services, 3 across).

   Deira's whole story is access: lift cabins too narrow for a wardrobe,
   lanes a truck cannot stop in, souk alleys that close by 8am. The
   component makes that literal. The icon sits on a square plate; behind
   it an ink fill is clipped to a hairline slit down the centre. On hover
   the clip opens outward from that slit to fill the plate - two doors
   parting - while the icon stroke flips to white and a gold threshold
   rule draws itself along the bottom of the plate.

   MECHANISM, and the reason this is not a repeat: the opening is a
   clip-path inset() transition. Nothing else in these 6,000-odd lines
   animates clip-path - the corner wedge on .cp-fold is a border trick
   precisely so it would not need one, and .em-sweep drags a background
   rather than clipping. inset() interpolates cleanly because both ends
   have the same four-value shape; the `round 9px` corner is carried on
   both keyframes so the radius does not pop.

   The plate keeps a fixed 52px box and the fill is a positioned layer
   inside it, so nothing reflows while the doors open - the icon never
   moves, which is the point. It stands still and the way in widens.
   ===================================================================== */

.em-door-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-door-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.em-door {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px 24px 30px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The plate. Fixed box, border-box sizing, so the fill layer inside can
   never change the card's height while it opens. */
.em-door-plate {
  position: relative;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  margin: 0 0 18px;
  border-radius: 11px;
  background: #fdf2f2;
  transition: background 0.4s ease;
}

/* The doors. Clipped SHUT at rest - left and right insets of exactly 50%
   leave zero width, so nothing shows. On hover both insets go to 0 and
   the ink opens outward from the centre line in both directions at once.

   The insets are 50%, not 49%. A 49% pair leaves a ~1px sliver, and at
   this size that sliver renders as a red line straight through the middle
   of the icon glyph - it reads as a rendering fault, not as a seam. This
   was checked at 4x before it was changed. */
.em-door-fill {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: #90191c;
  clip-path: inset(0 50% 0 50% round 9px);
  transition: clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Icon rides above the fill and does not move. */
.em-door-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The stroke turns white FASTER than the doors open (0.25s against 0.5s).
   Matched durations look tidier on paper but read worse: mid-transition
   the ink panel has already reached the glyph while the glyph is still
   dark red, so the icon disappears into the fill for a beat. Running the
   colour ahead keeps it legible the whole way across. */
.em-door-icon svg {
  stroke: #90191c;
  transition: stroke 0.25s ease;
}

/* Threshold rule under the plate, drawn left to right on hover. */
.em-door-sill {
  position: absolute;
  left: 24px;
  top: 80px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  transition: width 0.45s ease 0.12s;
}

.em-door-num {
  position: absolute;
  top: 26px;
  right: 24px;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: #c0b6b6;
  transition: color 0.4s ease;
}

.em-door-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 12px 0 12px;
  transition: color 0.3s ease;
}

.em-door-text {
  font-size: 14px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-door-text a {
  color: #90191c;
  text-decoration: none;
  border-bottom: 1px solid rgba(144, 25, 28, 0.3);
  transition: border-color 0.3s ease;
}

.em-door-text a:hover { border-bottom-color: #90191c; }

/* Optional "what is included" line under a service. */
.em-door-incl {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px dashed #eee;
  font-size: 13px;
  line-height: 1.7;
  color: #999;
}

.em-door-incl strong {
  display: block;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #c9a656;
  margin: 0 0 5px;
}

.em-door--wide { grid-column: span 2; }

/* --- .em-door hover, scoped to .eh-country like every other component --- */
.eh-country .em-door:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(144, 25, 28, 0.09);
  border-color: #f0dede;
}

.eh-country .em-door:hover .em-door-fill {
  clip-path: inset(0 0 0 0 round 9px);
}

.eh-country .em-door:hover .em-door-plate { background: #fdf2f2; }
.eh-country .em-door:hover .em-door-icon svg { stroke: #fff; }
.eh-country .em-door:hover .em-door-sill { width: 52px; }
.eh-country .em-door:hover .em-door-num { color: #c9a656; }
.eh-country .em-door:hover .em-door-name { color: #90191c; }

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-door,
  .eh-country .em-door-fill,
  .eh-country .em-door-plate,
  .eh-country .em-door-icon svg,
  .eh-country .em-door-sill,
  .eh-country .em-door-num {
    transition: none !important;
  }
  .eh-country .em-door:hover { transform: none !important; }
}

@media (max-width: 1000px) {
  .em-door-grid { grid-template-columns: repeat(2, 1fr); }
  .em-door--wide { grid-column: span 2; }
}

@media (max-width: 700px) {
  .em-door-section { padding: 56px 16px; }
  .em-door-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-door--wide { grid-column: span 1; }
  .em-door { padding: 26px 22px 28px; }
  .em-door-num { top: 24px; right: 22px; }
  .em-door-sill { left: 22px; top: 78px; }
}


/* ---------------------------------------------------------------------
   Two small additions used by the Deira page, both reusing shapes that
   already exist rather than introducing a component.

   1. A SECOND caption band inside .em-rates-card, sitting BELOW the table
      instead of above it, so the "what affects the final price" list is
      part of the same card as the prices it qualifies. Only the border
      side flips.

   2. A centred variant of .em-tower-list, so the same chips that carry
      the area names can carry the price factors without inline styles.
      .cp-chip is deliberately NOT reused here - it is white text on a
      translucent ground, built for the dark offer card, and would be
      invisible on this white section.
   --------------------------------------------------------------------- */

.em-rates-caption--foot {
  border-bottom: 0;
  border-top: 1px solid #f2e4e4;
}

.em-rates-factors {
  padding: 20px 26px 24px;
}

.em-tower-list--center {
  justify-content: center;
}


/* =====================================================================
   .em-cluster - the 26-cluster coverage map
   First used on /movers-in-jlt-dubai/ (clusters A to Z).

   JLT is organised as 26 lettered clusters, and the page's own claim is
   "all 26 clusters from A through Z". A sentence saying that is a claim;
   twenty-six tiles you can run a cursor along is the claim shown. A
   resident looks for their own letter and gets something that answers.

   MECHANISM: a conic-gradient ring that rotates once on hover. There is
   no other conic-gradient in this stylesheet, and no other hover that
   turns a gradient rather than an element. It reads as a dial coming
   round to the mark, which is the JLT subject exactly - every move here
   waits on a service-lift slot booked 24 to 48 hours ahead.

   The ring is the tile's own background showing through a 2px gap around
   an inner face, so no mask and no extra layer is needed. The face is
   what fills to ink; the gradient never sits under the letter, which
   keeps the letter legible at every point in the sweep.
   ===================================================================== */

.em-cluster-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #F9F5F5;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-cluster-grid {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* The tile. Its own background is the ring track; ::before carries the
   gradient that replaces it on hover. */
.em-cluster {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ece0e0;
  display: block;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.em-cluster::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #90191c, #c9a656, #90191c);
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity 0.3s ease, transform 0.7s cubic-bezier(0.3, 0.7, 0.3, 1);
}

/* The face sits 2px inside, so the tile's background reads as a ring. */
.em-cluster-face {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 17px;
  line-height: 1;
  color: #90191c;
  transition: background 0.35s ease, color 0.35s ease;
}

.em-cluster-caption {
  max-width: 900px;
  margin: 26px auto 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: #888;
  text-align: center;
}

/* Named-buildings list under the map reuses the area chips. */
.em-cluster-buildings {
  max-width: 900px;
  margin: 30px auto 0;
  padding-top: 26px;
  border-top: 1px solid #ece2e2;
}

.em-cluster-buildings-title {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c9a656;
  text-align: center;
  margin: 0 0 16px;
}

/* --- .em-cluster hover, scoped to .eh-country like the rest --- */
.eh-country .em-cluster:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(144, 25, 28, 0.16);
}

.eh-country .em-cluster:hover::before {
  opacity: 1;
  transform: rotate(360deg);
}

.eh-country .em-cluster:hover .em-cluster-face {
  background: #90191c;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-cluster,
  .eh-country .em-cluster::before,
  .eh-country .em-cluster-face {
    transition: none !important;
  }
  .eh-country .em-cluster:hover { transform: none !important; }
  .eh-country .em-cluster:hover::before { transform: none !important; }
}

@media (max-width: 700px) {
  .em-cluster-section { padding: 56px 16px; }
  .em-cluster-grid { gap: 10px; }
  .em-cluster { width: 48px; height: 48px; }
  .em-cluster-face { font-size: 15px; }
}


/* =====================================================================
   .em-cut - image-led service cards for the services hub
   First used on /services/ (12 services, three across).

   This is a HUB page: its whole job is routing, and the thing a visitor
   scans is the photograph, not the paragraph. So the photo leads and it
   gets the motion.

   MECHANISM: a clip-path POLYGON that shears. At rest the bottom edge of
   each photo is cut on a slant; on hover the slant levels out to square
   while the image itself scales up behind the mask. Deira animates
   clip-path too, but with inset() - a rectangle opening from its centre.
   This is a four-point polygon whose bottom-left corner travels, which
   looks nothing like it: an edge straightening rather than a shape
   opening. Both keyframes carry the same four points in the same order,
   which is what makes the interpolation smooth rather than a jump.

   The media box is a fixed height with overflow hidden, so the scaling
   image cannot push the card taller and a row of cards stays aligned.
   ===================================================================== */

.em-cut-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-cut-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.em-cut {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Fixed height + overflow hidden: the image can scale without ever
   changing the card's height, so a row stays aligned. */
.em-cut-media {
  position: relative;
  height: 194px;
  overflow: hidden;
  background: #f6efef;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  transition: clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.em-cut-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.em-cut-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11.5px;
  color: #90191c;
  transition: background 0.4s ease, color 0.4s ease;
}

.em-cut-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 24px 24px;
}

.em-cut-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 10px;
  transition: color 0.3s ease;
}

.em-cut-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 12px;
  transition: width 0.45s ease;
}

.em-cut-text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.75;
  color: #777;
  margin: 0 0 16px;
}

/* "Learn More" - the arrow travels, the label does not. */
.em-cut-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #90191c;
  text-decoration: none;
  transition: gap 0.35s ease;
}

.em-cut-link svg {
  stroke: #90191c;
  transition: transform 0.35s ease;
}

.em-cut--wide { grid-column: span 2; }

/* --- .em-cut hover, scoped to .eh-country like the rest --- */
.eh-country .em-cut:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(144, 25, 28, 0.10);
  border-color: #f0dede;
}

.eh-country .em-cut:hover .em-cut-media {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.eh-country .em-cut:hover .em-cut-media img { transform: scale(1.06); }
.eh-country .em-cut:hover .em-cut-num { background: #90191c; color: #fff; }
.eh-country .em-cut:hover .em-cut-name { color: #90191c; }
.eh-country .em-cut:hover .em-cut-rule { width: 44px; }
.eh-country .em-cut:hover .em-cut-link svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-cut,
  .eh-country .em-cut-media,
  .eh-country .em-cut-media img,
  .eh-country .em-cut-num,
  .eh-country .em-cut-rule,
  .eh-country .em-cut-link svg {
    transition: none !important;
  }
  .eh-country .em-cut:hover { transform: none !important; }
  .eh-country .em-cut:hover .em-cut-media img { transform: none !important; }
  .eh-country .em-cut:hover .em-cut-link svg { transform: none !important; }
}

@media (max-width: 1000px) {
  .em-cut-grid { grid-template-columns: repeat(2, 1fr); }
  .em-cut--wide { grid-column: span 2; }
}

@media (max-width: 700px) {
  .em-cut-section { padding: 56px 16px; }
  .em-cut-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-cut--wide { grid-column: span 1; }
  .em-cut-media { height: 178px; }
}


/* =====================================================================
   .em-seal - service cards that get stamped on hover
   First used on /services/movers-and-packers-in-palm-jumeirah/ (6 svcs).

   Palm Jumeirah is the only location on this site where nothing happens
   until somebody grants permission. A Nakheel community permit to pass
   the Gateway, frond gate registration for a villa, a separate Crescent
   checkpoint clearance for the outer arc. Three approvals before a truck
   moves. The card behaves the same way: a ring stands off it, then snaps
   in and settles on the edge - a stamp landing on a document.

   MECHANISM: an animated outline-offset. There is no outline anywhere
   else in these 6,800 lines, let alone an animated one, and it does
   something no border or box-shadow ring can do as cheaply: outline sits
   OUTSIDE the box and takes no part in layout, so a ring can travel
   inward from 16px away without shifting a single pixel of the card or
   its neighbours. Doing this with a border would resize the box; with an
   inset box-shadow it could never start outside it.

   outline-offset follows border-radius in every browser that matters, so
   the ring stays a rounded rectangle the whole way in.
   ===================================================================== */

.em-seal-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-seal-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* The ring is declared here but held transparent, so only the offset and
   the colour animate - no layout work at all on hover. */
.em-seal {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px 26px 30px;
  outline: 2px solid transparent;
  outline-offset: 16px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease,
              outline-color 0.35s ease, outline-offset 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.em-seal-num {
  position: absolute;
  top: 26px;
  right: 26px;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: #c0b6b6;
  transition: color 0.4s ease;
}

.em-seal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #fdf2f2;
  margin: 0 0 16px;
  transition: background 0.4s ease, transform 0.4s ease;
}

.em-seal-icon svg {
  stroke: #90191c;
  transition: stroke 0.4s ease;
}

.em-seal-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 12px;
  padding-right: 34px;
  transition: color 0.3s ease;
}

.em-seal-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 14px;
  transition: width 0.45s ease;
}

.em-seal-text {
  font-size: 14px;
  line-height: 1.75;
  color: #777;
  margin: 0 0 12px;
}

.em-seal-text:last-child { margin-bottom: 0; }

.em-seal-text a {
  color: #90191c;
  text-decoration: none;
  border-bottom: 1px solid rgba(144, 25, 28, 0.3);
  transition: border-color 0.3s ease;
}

.em-seal-text a:hover { border-bottom-color: #90191c; }

/* "What is included" strip, used on the two services that carry one. */
.em-seal-incl {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px dashed #eee;
  font-size: 13px;
  line-height: 1.7;
  color: #999;
}

.em-seal-incl strong {
  display: block;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #c9a656;
  margin: 0 0 5px;
}

.em-seal--wide { grid-column: span 2; }

/* --- .em-seal hover, scoped to .eh-country like the rest --- */
.eh-country .em-seal:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(144, 25, 28, 0.09);
  border-color: #f0dede;
  outline-color: rgba(144, 25, 28, 0.35);
  outline-offset: 4px;
}

.eh-country .em-seal:hover .em-seal-icon { background: #90191c; }
.eh-country .em-seal:hover .em-seal-icon svg { stroke: #fff; }
.eh-country .em-seal:hover .em-seal-num { color: #c9a656; }
.eh-country .em-seal:hover .em-seal-name { color: #90191c; }
.eh-country .em-seal:hover .em-seal-rule { width: 44px; }

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-seal,
  .eh-country .em-seal-icon,
  .eh-country .em-seal-icon svg,
  .eh-country .em-seal-num,
  .eh-country .em-seal-rule {
    transition: none !important;
  }
  .eh-country .em-seal:hover { transform: none !important; outline-offset: 4px; }
}

@media (max-width: 1000px) {
  .em-seal-grid { grid-template-columns: repeat(2, 1fr); }
  .em-seal--wide { grid-column: span 2; }
}

@media (max-width: 700px) {
  .em-seal-section { padding: 56px 16px; }
  /* The ring stands off less on a phone, where 16px of travel would run
     the outline under the neighbouring card during the transition. */
  .em-seal-grid { grid-template-columns: 1fr; gap: 22px; }
  .em-seal { padding: 26px 22px 28px; outline-offset: 10px; }
  .em-seal--wide { grid-column: span 1; }
  .em-seal-num { top: 24px; right: 22px; }
}

/* ---------------------------------------------------------------------
   .cp-solve-card--wide - odd-count rescue for the two-column .cp-solve
   grid, matching .cp-why-card--wide. Palm Jumeirah has FIVE zone
   briefings; without this the fifth sits half-width beside a gap.
   --------------------------------------------------------------------- */

.cp-solve-card--wide { grid-column: span 2; }

@media (max-width: 900px) {
  .cp-solve-card--wide { grid-column: span 1; }
}


/* =====================================================================
   .em-relay - the six stages of a house move
   First used on /services/house-movers/ (6 stages, three across).

   The six services on that page are not a menu, they are a SEQUENCE:
   assessment, packing, transport, insurance, storage, unpacking and
   setup. One move, start to finish. So each card carries a numbered node
   and, on hover, the node signals - it fills to ink and throws two
   concentric rings outward, the way a marker on a route pulses when it
   becomes the active one.

   MECHANISM: an animated multi-ring box-shadow spread. Two rings are
   declared on one shadow property at zero spread and grown to 7px and
   14px together, so a single transition produces the whole ripple. There
   is no multi-ring box-shadow anywhere else in these 7,000 lines, and
   the effect is distinct from the two rings already in the library: the
   conic ring on .em-cluster rotates a gradient in place, and the outline
   on .em-seal travels inward from outside. This one grows outward from
   nothing, and being a shadow it costs no layout at all.

   The node sits in a reserved 62px strip at the top of the card, so the
   rings expand into padding and never touch the heading or a neighbour.
   ===================================================================== */

.em-relay-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-relay-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.em-relay {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px 26px 30px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Node strip. The rings expand into this reserve, so they never reach
   the heading below or the card beside it. */
.em-relay-head {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
  margin: 0 0 6px;
}

.em-relay-node {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf2f2;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 13px;
  color: #90191c;
  /* Both rings declared at zero spread so only the spread animates. */
  box-shadow: 0 0 0 0 rgba(144, 25, 28, 0.16),
              0 0 0 0 rgba(144, 25, 28, 0.08);
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.55s ease;
}

.em-relay-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.em-relay-icon svg {
  stroke: #c9a656;
  transition: stroke 0.4s ease, transform 0.4s ease;
}

.em-relay-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 12px;
  transition: color 0.3s ease;
}

.em-relay-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 14px;
  transition: width 0.45s ease;
}

.em-relay-text {
  font-size: 14px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-relay-text a {
  color: #90191c;
  text-decoration: none;
  border-bottom: 1px solid rgba(144, 25, 28, 0.3);
  transition: border-color 0.3s ease;
}

.em-relay-text a:hover { border-bottom-color: #90191c; }

.em-relay--wide { grid-column: span 2; }

/* --- .em-relay hover, scoped to .eh-country like the rest --- */
.eh-country .em-relay:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(144, 25, 28, 0.09);
  border-color: #f0dede;
}

.eh-country .em-relay:hover .em-relay-node {
  background: #90191c;
  color: #fff;
  box-shadow: 0 0 0 7px rgba(144, 25, 28, 0.16),
              0 0 0 14px rgba(144, 25, 28, 0.08);
}

.eh-country .em-relay:hover .em-relay-icon svg {
  stroke: #90191c;
  transform: translateX(3px);
}

.eh-country .em-relay:hover .em-relay-name { color: #90191c; }
.eh-country .em-relay:hover .em-relay-rule { width: 44px; }

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-relay,
  .eh-country .em-relay-node,
  .eh-country .em-relay-icon svg,
  .eh-country .em-relay-rule {
    transition: none !important;
  }
  .eh-country .em-relay:hover { transform: none !important; }
  .eh-country .em-relay:hover .em-relay-icon svg { transform: none !important; }
}

@media (max-width: 1000px) {
  .em-relay-grid { grid-template-columns: repeat(2, 1fr); }
  .em-relay--wide { grid-column: span 2; }
}

@media (max-width: 700px) {
  .em-relay-section { padding: 56px 16px; }
  .em-relay-grid { grid-template-columns: 1fr; gap: 20px; }
  .em-relay--wide { grid-column: span 1; }
  .em-relay { padding: 26px 22px 28px; }
}


/* =====================================================================
   .em-vault - storage locations with a unit-size ladder
   First used on /storage/ (7 emirates, 9 areas and 8 sizes each).

   The old page prints the same eight unit sizes as eight identical text
   chips, seven times over - so "20sq feet" and "200sq feet" look exactly
   alike, and the one decision a storage customer actually has to make
   (how much space do I need) is given no help at all.

   Here the sizes are a LADDER. Each row carries a bar whose width is
   proportional to its real square footage - 20sq ft draws to 10% of the
   track, 200sq ft to 100% - so the jump from 100 to 200 is something you
   see rather than read. The numbers are not decorated; they are drawn to
   scale. Warehouse has no square footage on the live page, so it gets an
   outlined full-width track rather than a fake number.

   MECHANISM: a staggered transition-delay cascade. On hover the bars fill
   from left in ascending order, each one 55ms behind the last, so the
   ladder climbs instead of flashing on at once. There is exactly one
   transition-delay elsewhere in these 7,200 lines (a single 0.05s on one
   property) and no cascade anywhere - nothing else in the library uses
   nth-child to sequence a group.
   ===================================================================== */

.em-vault-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #F9F5F5;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-vault-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.em-vault {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 26px 26px 28px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.em-vault-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
}

.em-vault-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0;
  transition: color 0.3s ease;
}

.em-vault-count {
  flex: 0 0 auto;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #c9a656;
}

.em-vault-rule {
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: #eee;
  margin: 0 0 16px;
  transition: width 0.45s ease, background 0.4s ease;
}

.em-vault-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.em-vault-area {
  padding: 7px 13px;
  border-radius: 30px;
  background: #f9f5f5;
  border: 1px solid #f0eaea;
  font-size: 12.5px;
  line-height: 1.3;
  color: #555;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --- the size ladder --- */

.em-vault-sizes-title {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #b9adad;
  margin: 0 0 12px;
  padding-top: 16px;
  border-top: 1px dashed #eee;
}

.em-vault-sizes {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.em-vault-size {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

.em-vault-size:last-child { margin-bottom: 0; }

.em-vault-size-label {
  font-size: 12.5px;
  color: #777;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* The track holds the bar. Fixed height so a filling bar never reflows. */
.em-vault-track {
  position: relative;
  height: 8px;
  border-radius: 8px;
  background: #f4eded;
  overflow: hidden;
}

/* The bar. Its WIDTH is set inline per row because it encodes real square
   footage - it is data, not decoration, so it belongs with the data, and
   it is present AT REST. An earlier draft only drew the bars on hover,
   which hid the whole point of the section from anyone on a touch screen,
   where there is no hover at all. The bar is always the right length; what
   hover adds is the ink sweeping along it. */
.em-vault-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w);
  border-radius: 8px;
  background: #f2dede;
  overflow: hidden;
}

/* The ink. Grows along the bar it sits in, so the sweep is bounded by the
   real proportion rather than running the full track. */
.em-vault-bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #90191c, #b8474a);
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Warehouse carries no square footage on the live page, so it gets an
   outlined full track rather than an invented number. */
.em-vault-size--open .em-vault-track {
  background: repeating-linear-gradient(
    45deg,
    #f7efef 0px, #f7efef 5px,
    #fdf7f7 5px, #fdf7f7 10px
  );
  border: 1px dashed #ecdede;
}

.em-vault-foot { margin-top: auto; }

.em-vault-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #90191c;
  text-decoration: none;
  transition: gap 0.35s ease;
}

.em-vault-btn svg {
  stroke: #90191c;
  transition: transform 0.35s ease;
}

/* Said plainly, on the panels that have no sub-page to link to. */
.em-vault-nolink {
  font-size: 12.5px;
  color: #a99e9e;
  margin: 0;
}

/* --- .em-vault hover, scoped to .eh-country like the rest --- */
.eh-country .em-vault:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(144, 25, 28, 0.09);
  border-color: #f0dede;
}

.eh-country .em-vault:hover .em-vault-name { color: #90191c; }
.eh-country .em-vault:hover .em-vault-rule { width: 62px; background: #c9a656; }
.eh-country .em-vault:hover .em-vault-btn svg { transform: translateX(4px); }

/* The ladder climbs: the ink runs along each bar 55ms behind the one
   above, so the eye is walked up the sizes in order. The BAR lengths never
   move - only the fill inside them. */
.eh-country .em-vault:hover .em-vault-bar::after { width: 100%; }

.eh-country .em-vault:hover .em-vault-size:nth-child(1) .em-vault-bar::after { transition-delay: 0s; }
.eh-country .em-vault:hover .em-vault-size:nth-child(2) .em-vault-bar::after { transition-delay: 0.055s; }
.eh-country .em-vault:hover .em-vault-size:nth-child(3) .em-vault-bar::after { transition-delay: 0.11s; }
.eh-country .em-vault:hover .em-vault-size:nth-child(4) .em-vault-bar::after { transition-delay: 0.165s; }
.eh-country .em-vault:hover .em-vault-size:nth-child(5) .em-vault-bar::after { transition-delay: 0.22s; }
.eh-country .em-vault:hover .em-vault-size:nth-child(6) .em-vault-bar::after { transition-delay: 0.275s; }
.eh-country .em-vault:hover .em-vault-size:nth-child(7) .em-vault-bar::after { transition-delay: 0.33s; }
.eh-country .em-vault:hover .em-vault-size:nth-child(8) .em-vault-bar::after { transition-delay: 0.385s; }

.eh-country .em-vault-area:hover {
  background: #90191c;
  border-color: #90191c;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-vault,
  .eh-country .em-vault-rule,
  .eh-country .em-vault-area,
  .eh-country .em-vault-btn svg {
    transition: none !important;
  }
  .eh-country .em-vault:hover { transform: none !important; }
  .eh-country .em-vault:hover .em-vault-btn svg { transform: none !important; }
  /* Bar lengths are unaffected - the data is in the markup, not the
     motion. The ink simply appears with no sweep and no cascade. */
  .eh-country .em-vault-bar::after { transition: none !important; }
  .eh-country .em-vault:hover .em-vault-bar::after { transition-delay: 0s !important; }
}

@media (max-width: 900px) {
  .em-vault-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .em-vault-section { padding: 56px 16px; }
  .em-vault { padding: 24px 20px 26px; }
  .em-vault-size { grid-template-columns: 70px 1fr; gap: 10px; }
  .em-vault-area { font-size: 12px; padding: 6px 11px; }
}


/* ---------------------------------------------------------------------
   .cp-steps-grid--4 - four process steps in a row.
   Added for /storage/, which has a four-step sequence. The library had
   --3, --5 and --6 but no --4. The connector inset is 12.5% each side,
   which is half of one column of four, so the line starts and ends at
   the centre of the first and last step exactly as the other modifiers
   do.
   --------------------------------------------------------------------- */

.cp-steps-grid--4 { grid-template-columns: repeat(4, 1fr); }

.cp-steps-grid--4::before { left: 12.5%; right: 12.5%; }

@media (max-width: 1000px) {
  .cp-steps-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
}

@media (max-width: 640px) {
  .cp-steps-grid--4 { grid-template-columns: 1fr; gap: 32px; }
}


/* =====================================================================
   .em-pan - storage service cards whose photo pans on hover
   First used on /storage/abu-dhabi/ (6 services, three across).

   A storage unit is a space you want to look INSIDE. So the photograph
   does not zoom or slide as a block - it stays exactly where it is and
   the framing moves, the way your eye travels across a room you are
   sizing up. What was cropped off the bottom comes into view.

   MECHANISM: an animated object-position. There is no object-position
   anywhere in country-pages.css or shared-sections.css, animated or
   otherwise. It is worth naming why this is not the same as the two
   other photo treatments already here: .em-cut (services hub) scales the
   image and shears its mask, and .em-shot (Al Quoz) bleeds the whole
   picture out to the card edges. Both MOVE the image. This one leaves
   the image still and moves the window onto it, which is why nothing
   shifts, nothing scales, and no edge ever pulls away from its frame.

   The media box is a fixed height with the image at width/height 100%
   and object-fit: cover, so the pan is bounded by the crop and can never
   expose a gap.
   ===================================================================== */

.em-pan-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-pan-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.em-pan {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.em-pan-media {
  position: relative;
  height: 196px;
  overflow: hidden;
  background: #f6efef;
}

/* The image never moves. Only the window onto it does. */
.em-pan-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transition: object-position 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.em-pan-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 11.5px;
  color: #90191c;
  transition: background 0.4s ease, color 0.4s ease;
}

/* Hairline that runs along the join between photo and body. */
.em-pan-seam {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: #c9a656;
  transition: width 0.55s ease;
}

.em-pan-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}

.em-pan-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 12px;
  transition: color 0.3s ease;
}

.em-pan-text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-pan-text a {
  color: #90191c;
  text-decoration: none;
  border-bottom: 1px solid rgba(144, 25, 28, 0.3);
  transition: border-color 0.3s ease;
}

.em-pan-text a:hover { border-bottom-color: #90191c; }

.em-pan--wide { grid-column: span 2; }

/* --- .em-pan hover, scoped to .eh-country like the rest --- */
.eh-country .em-pan:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(144, 25, 28, 0.10);
  border-color: #f0dede;
}

.eh-country .em-pan:hover .em-pan-media img { object-position: center 68%; }
.eh-country .em-pan:hover .em-pan-num { background: #90191c; color: #fff; }
.eh-country .em-pan:hover .em-pan-seam { width: 100%; }
.eh-country .em-pan:hover .em-pan-name { color: #90191c; }

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-pan,
  .eh-country .em-pan-media img,
  .eh-country .em-pan-num,
  .eh-country .em-pan-seam {
    transition: none !important;
  }
  .eh-country .em-pan:hover { transform: none !important; }
  /* The pan is the whole effect, so it is dropped entirely rather than
     snapped to a new crop - a jump is worse than no motion. */
  .eh-country .em-pan:hover .em-pan-media img { object-position: center 32%; }
}

@media (max-width: 1000px) {
  .em-pan-grid { grid-template-columns: repeat(2, 1fr); }
  .em-pan--wide { grid-column: span 2; }
}

@media (max-width: 700px) {
  .em-pan-section { padding: 56px 16px; }
  .em-pan-grid { grid-template-columns: 1fr; gap: 20px; }
  .em-pan--wide { grid-column: span 1; }
  .em-pan-media { height: 180px; }
}


/* =====================================================================
   .em-tick - a numbered checklist that numbers itself
   First used on /storage/al-ruwais/ (8 tips for choosing a facility).

   The section is a decision aid: eight things to check before you sign a
   storage contract. So it is built as a checklist, and hovering a row
   marks it - the box fills to ink, a tick appears, and a hairline sweeps
   the width of the row, the way you would run a pen along a line you
   have just satisfied.

   MECHANISM: CSS counters. counter-reset on the list, counter-increment
   per row, and content: counter() to print the number. There is no
   counter anywhere else in these 7,700 lines - every other numbered
   component in the library has its "01", "02", "03" typed into the
   markup by hand.

   That is not novelty for its own sake. Eight hardcoded numbers is eight
   chances to leave a stale "05" behind when a tip is inserted, removed
   or reordered - and on a page that was itself produced by cloning
   another one, that failure has already happened elsewhere. Here the
   numbers are generated from document order, so they cannot drift.
   ===================================================================== */

.em-tick-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #F9F5F5;
  font-family: 'SF Pro Regular', sans-serif;
}

/* The counter is reset once on the list, so every row below it counts
   from one regardless of how many rows there are. */
.em-tick-list {
  counter-reset: em-tick;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.em-tick {
  counter-increment: em-tick;
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px 22px 20px 20px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Hairline swept along the bottom of the row on hover. */
.em-tick::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #c9a656;
  transition: width 0.5s ease;
}

/* The box. Its number is printed by the counter, not typed in markup. */
.em-tick-box {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fdf2f2;
  border: 1px solid #f4e2e2;
  transition: background 0.35s ease, border-color 0.35s ease;
}

.em-tick-box::before {
  content: counter(em-tick, decimal-leading-zero);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  color: #90191c;
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* The tick sits over the number and swaps in on hover. Drawn with two
   borders on a rotated box - no SVG needed for a shape this simple. */
.em-tick-box::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 7px;
  height: 12px;
  margin: -7px 0 0 -3px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.em-tick-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 7px;
  transition: color 0.3s ease;
}

.em-tick-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: #777;
  margin: 0;
}

.em-tick-text a {
  color: #90191c;
  text-decoration: none;
  border-bottom: 1px solid rgba(144, 25, 28, 0.3);
  transition: border-color 0.3s ease;
}

.em-tick-text a:hover { border-bottom-color: #90191c; }

/* --- .em-tick hover, scoped to .eh-country like the rest --- */
.eh-country .em-tick:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(144, 25, 28, 0.08);
  border-color: #f0dede;
}

.eh-country .em-tick:hover::after { width: 100%; }

.eh-country .em-tick:hover .em-tick-box {
  background: #90191c;
  border-color: #90191c;
}

.eh-country .em-tick:hover .em-tick-box::before { opacity: 0; }

.eh-country .em-tick:hover .em-tick-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.eh-country .em-tick:hover .em-tick-name { color: #90191c; }

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-tick,
  .eh-country .em-tick::after,
  .eh-country .em-tick-box,
  .eh-country .em-tick-box::before,
  .eh-country .em-tick-box::after,
  .eh-country .em-tick-name {
    transition: none !important;
  }
  .eh-country .em-tick:hover { transform: none !important; }
  .eh-country .em-tick:hover .em-tick-box::after { transform: rotate(45deg) scale(1); }
}

@media (max-width: 860px) {
  .em-tick-list { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .em-tick-section { padding: 56px 16px; }
  .em-tick { padding: 18px 18px 18px 16px; grid-template-columns: 40px 1fr; gap: 13px; }
}


/* =====================================================================
   .em-iris - situation cards that open with a radial reveal
   First used on /storage/dubai/ ("Why You Need Self Storage", 5 cards).

   That section is not a service list, it is five SITUATIONS - moving,
   renovating, decluttering, business overflow, seasonal. The reader is
   meant to recognise themselves in one. So hovering a card opens an ink
   disc outward from its icon until it floods the whole tile, the way a
   spotlight finds the one that is you.

   MECHANISM: clip-path circle(). The stylesheet already animates
   clip-path twice, and it is worth being precise about why this is not a
   third helping of the same thing: .em-door uses inset() - a rectangle
   whose left and right edges part from a centre line - and .em-cut uses
   polygon() - a four-point shape whose bottom corner travels to shear an
   edge straight. Both are rectilinear. circle() is a radius growing from
   a point, which reads as nothing like either; it is the only one of the
   three where the revealed shape is curved and the growth is radial.

   The circle is anchored at the icon's centre rather than the tile's, so
   the fill appears to originate from the glyph instead of from an
   arbitrary point, and 150% is used as the end radius so the disc clears
   the far corner of a non-square tile.
   ===================================================================== */

.em-iris-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #fff;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-iris-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.em-iris {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px 26px 30px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The tile. Fixed 54px box so the disc inside it can never change the
   card's height while it opens. */
.em-iris-tile {
  position: relative;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #fdf2f2;
  margin: 0 0 18px;
  overflow: hidden;
  transition: background 0.4s ease;
}

/* The iris. A circle of zero radius centred on the glyph, grown past the
   far corner on hover. */
.em-iris-fill {
  position: absolute;
  inset: 0;
  background: #90191c;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.em-iris-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.em-iris-icon svg {
  stroke: #90191c;
  transition: stroke 0.3s ease;
}

.em-iris-num {
  position: absolute;
  top: 28px;
  right: 26px;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: #c0b6b6;
  transition: color 0.4s ease;
}

.em-iris-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 10px;
  padding-right: 34px;
  transition: color 0.3s ease;
}

.em-iris-rule {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  margin: 0 0 13px;
  transition: width 0.45s ease;
}

.em-iris-text {
  font-size: 14px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-iris-text a {
  color: #90191c;
  text-decoration: none;
  border-bottom: 1px solid rgba(144, 25, 28, 0.3);
  transition: border-color 0.3s ease;
}

.em-iris-text a:hover { border-bottom-color: #90191c; }

.em-iris--wide { grid-column: span 2; }

/* --- .em-iris hover, scoped to .eh-country like the rest --- */
.eh-country .em-iris:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(144, 25, 28, 0.09);
  border-color: #f0dede;
}

.eh-country .em-iris:hover .em-iris-fill {
  clip-path: circle(150% at 50% 50%);
}

/* The glyph goes white ahead of the disc reaching its edge, for the same
   reason the door plate on Deira does - matched timings leave the icon
   briefly dark-on-dark and it disappears for a beat. */
.eh-country .em-iris:hover .em-iris-icon svg { stroke: #fff; }
.eh-country .em-iris:hover .em-iris-num { color: #c9a656; }
.eh-country .em-iris:hover .em-iris-name { color: #90191c; }
.eh-country .em-iris:hover .em-iris-rule { width: 44px; }

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-iris,
  .eh-country .em-iris-fill,
  .eh-country .em-iris-tile,
  .eh-country .em-iris-icon svg,
  .eh-country .em-iris-num,
  .eh-country .em-iris-rule {
    transition: none !important;
  }
  .eh-country .em-iris:hover { transform: none !important; }
}

@media (max-width: 1000px) {
  .em-iris-grid { grid-template-columns: repeat(2, 1fr); }
  .em-iris--wide { grid-column: span 2; }
}

@media (max-width: 700px) {
  .em-iris-section { padding: 56px 16px; }
  .em-iris-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-iris--wide { grid-column: span 1; }
  .em-iris { padding: 26px 22px 28px; }
  .em-iris-num { top: 26px; right: 22px; }
}


/* =====================================================================
   .em-sheen - property-type cards lit by a passing highlight
   First used on /trusted-movers-and-packers-in-downtown-dubai/
   (6 property types).

   The section is a catalogue of property types - resort, luxury,
   beachfront, townhouse, cluster, bungalow. High-value homes. So the
   hover is a band of light travelling across the tile, the way it moves
   over a polished surface when you turn it toward a window.

   MECHANISM: an animated mask-position over a gradient mask. There is no
   mask-image anywhere in these 8,000 lines. The important difference
   from the three clip-path components already here - .em-door (inset),
   .em-cut (polygon), .em-iris (circle) - is the EDGE. A clip-path edge
   is hard: a shape is either inside it or outside it. A gradient mask
   has a soft ramp, so this reads as light falling across a surface
   rather than a shape being cut out of one. They cannot be mistaken for
   each other on screen.

   The mask is 300% wide and slid from one end to the other, so the
   highlight enters off one edge and leaves off the other instead of
   appearing and vanishing in place. -webkit-mask is duplicated for
   Safari, which still needs the prefix for mask-position.
   ===================================================================== */

.em-sheen-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #F9F5F5;
  font-family: 'SF Pro Regular', sans-serif;
}

.em-sheen-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.em-sheen {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px 26px 30px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The plate. Fixed box so the highlight inside cannot alter the layout. */
.em-sheen-plate {
  position: relative;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #90191c;
  margin: 0 0 18px;
  overflow: hidden;
}

/* The highlight. A pale band masked to a soft gradient and parked off the
   left edge; on hover it travels across and off the right. */
.em-sheen-light {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transform: translateX(-110%);
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.em-sheen-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.em-sheen-icon svg {
  stroke: #fff;
  transition: transform 0.4s ease;
}

.em-sheen-num {
  position: absolute;
  top: 28px;
  right: 26px;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: #c0b6b6;
  transition: color 0.4s ease;
}

.em-sheen-name {
  position: relative;
  display: inline-block;
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0 0 12px;
  padding-bottom: 8px;
  transition: color 0.3s ease;
}

/* Gold underline that grows from the left under the name. */
.em-sheen-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c9a656;
  transition: width 0.45s ease;
}

.em-sheen-text {
  font-size: 14px;
  line-height: 1.75;
  color: #777;
  margin: 0;
}

.em-sheen-text a {
  color: #90191c;
  text-decoration: none;
  border-bottom: 1px solid rgba(144, 25, 28, 0.3);
  transition: border-color 0.3s ease;
}

.em-sheen-text a:hover { border-bottom-color: #90191c; }

.em-sheen--wide { grid-column: span 2; }

/* --- .em-sheen hover, scoped to .eh-country like the rest --- */
.eh-country .em-sheen:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(144, 25, 28, 0.09);
  border-color: #f0dede;
}

.eh-country .em-sheen:hover .em-sheen-light { transform: translateX(110%); }
.eh-country .em-sheen:hover .em-sheen-icon svg { transform: scale(1.08); }
.eh-country .em-sheen:hover .em-sheen-num { color: #c9a656; }
.eh-country .em-sheen:hover .em-sheen-name { color: #90191c; }
.eh-country .em-sheen:hover .em-sheen-name::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-sheen,
  .eh-country .em-sheen-icon svg,
  .eh-country .em-sheen-num,
  .eh-country .em-sheen-name,
  .eh-country .em-sheen-name::after {
    transition: none !important;
  }
  .eh-country .em-sheen:hover { transform: none !important; }
  .eh-country .em-sheen:hover .em-sheen-icon svg { transform: none !important; }
  /* The travelling highlight IS the effect, so it is dropped rather than
     snapped to the far edge - a jump is worse than no motion. */
  .eh-country .em-sheen-light { transition: none !important; }
  .eh-country .em-sheen:hover .em-sheen-light { transform: translateX(-110%); }
}

@media (max-width: 1000px) {
  .em-sheen-grid { grid-template-columns: repeat(2, 1fr); }
  .em-sheen--wide { grid-column: span 2; }
}

@media (max-width: 700px) {
  .em-sheen-section { padding: 56px 16px; }
  .em-sheen-grid { grid-template-columns: 1fr; gap: 18px; }
  .em-sheen--wide { grid-column: span 1; }
  .em-sheen { padding: 26px 22px 28px; }
  .em-sheen-num { top: 26px; right: 22px; }
}


/* =====================================================================
   .em-dash - instrument tiles that light up when a system engages
   First used on /why-choose-us/ (7 truck safety systems).

   The seven items are onboard safety systems on a truck - emergency
   braking, anti-roll-back, retarder, radar, air suspension, lane and
   drowsiness assist, computerised gearbox. That is an instrument
   cluster, so the section is laid out as one, and hovering a tile makes
   its system ENGAGE: the status pip goes from dim to lit, the glyph
   picks up a glow, and a readout bar fills along the bottom.

   MECHANISM: an animated filter: drop-shadow() on the SVG. There is no
   drop-shadow anywhere in these 8,200 lines - the two existing filters
   are saturate/contrast on a photograph.

   Why it is not just another box-shadow: drop-shadow follows the ALPHA
   of the element, so on an SVG icon the glow traces the strokes of the
   glyph itself. A box-shadow can only ever follow the rectangle the
   glyph sits in. On a warning symbol that difference is the whole
   effect - the shape appears lit from within rather than sitting on a
   lit panel. .em-relay's ripple is a box-shadow spread and looks
   nothing like it.
   ===================================================================== */

.em-dash-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 20px;
  background: #1a1a1a;
  font-family: 'SF Pro Regular', sans-serif;
}

/* The header inside a dark section needs its own colours - the shared
   .vm-services-* rules are written for a light ground. */
.em-dash-section .vm-services-title { color: #fff; }
.em-dash-section .vm-services-desc { color: #a89f9f; }

.em-dash-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.em-dash {
  position: relative;
  background: #232020;
  border: 1px solid #332d2d;
  border-radius: 14px;
  padding: 24px 22px 26px;
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

/* Status pip, top right. Dim until the system engages. */
.em-dash-pip {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4a4040;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.em-dash-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #2c2727;
  margin: 0 0 16px;
  transition: background 0.4s ease;
}

/* The glow traces the glyph, not the box - that is the whole point of
   using drop-shadow here rather than box-shadow. */
.em-dash-icon svg {
  stroke: #b9a6a6;
  filter: drop-shadow(0 0 0 rgba(201, 166, 86, 0));
  transition: stroke 0.4s ease, filter 0.5s ease;
}

.em-dash-name {
  font-family: 'LemonmilkReg', sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 10px;
  padding-right: 18px;
  transition: color 0.3s ease;
}

.em-dash-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: #9c9292;
  margin: 0 0 4px;
  transition: color 0.3s ease;
}

/* Readout bar along the bottom edge of the tile. */
.em-dash-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #90191c, #c9a656);
  transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.em-dash--wide { grid-column: span 2; }

/* --- .em-dash hover, scoped to .eh-country like the rest --- */
.eh-country .em-dash:hover {
  transform: translateY(-4px);
  background: #292424;
  border-color: #4a3c3c;
}

.eh-country .em-dash:hover .em-dash-pip {
  background: #c9a656;
  box-shadow: 0 0 10px rgba(201, 166, 86, 0.75);
}

.eh-country .em-dash:hover .em-dash-icon { background: #90191c; }

.eh-country .em-dash:hover .em-dash-icon svg {
  stroke: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

.eh-country .em-dash:hover .em-dash-name { color: #fff; }
.eh-country .em-dash:hover .em-dash-text { color: #b6acac; }
.eh-country .em-dash:hover .em-dash-bar { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .eh-country .em-dash,
  .eh-country .em-dash-pip,
  .eh-country .em-dash-icon,
  .eh-country .em-dash-icon svg,
  .eh-country .em-dash-bar,
  .eh-country .em-dash-name,
  .eh-country .em-dash-text {
    transition: none !important;
  }
  .eh-country .em-dash:hover { transform: none !important; }
}

@media (max-width: 1100px) {
  .em-dash-grid { grid-template-columns: repeat(3, 1fr); }
  .em-dash--wide { grid-column: span 1; }
}

@media (max-width: 820px) {
  .em-dash-grid { grid-template-columns: repeat(2, 1fr); }
  .em-dash--wide { grid-column: span 2; }
}

@media (max-width: 560px) {
  .em-dash-section { padding: 56px 16px; }
  .em-dash-grid { grid-template-columns: 1fr; gap: 14px; }
  .em-dash--wide { grid-column: span 1; }
}