/**
 * The subject index and the written subjects on the three activity pages.
 *
 * The pages already carry their own design system in a style block — navy,
 * gold, Playfair for display, Plus Jakarta for text. These rules use those
 * variables where the page defines them and the brand's own where it does not,
 * so a new section is indistinguishable from one that was always there.
 */

/* A one-pixel measuring div, dropped just outside the viewport by one of the
   scripts on the page, is enough to give the whole document a sideways
   scrollbar. Clip stops it without creating a second scrolling box, and this
   file loads on these three pages only. */
html,
body {
  overflow-x: clip;
}

.w2e-topics-wrap {
  max-width: 1100px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   The index: the whole subject in one glance
   -------------------------------------------------------------------------- */

.w2e-topics {
  border-top: 2px solid var(--gold, #bf953f);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.w2e-topics__lead {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: var(--muted, #5b6873);
  max-width: 62ch;
  margin: 0 0 1.35rem;
}

.w2e-topics ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.w2e-topics li {
  margin: 0;
}

.w2e-topics a {
  display: inline-block;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  color: var(--navy, #00335a);
  background: rgba(0, 51, 90, .05);
  border: 1px solid rgba(0, 51, 90, .12);
  border-radius: 999px;
  padding: .42rem .95rem;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}

.w2e-topics a:hover,
.w2e-topics a:focus-visible {
  background: rgba(0, 51, 90, .1);
  border-color: rgba(0, 51, 90, .3);
  color: var(--navy, #00335a);
}

/* --------------------------------------------------------------------------
   A written subject
   -------------------------------------------------------------------------- */

.w2e-topic {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid rgba(15, 26, 34, .1);
}

.w2e-topic:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.w2e-topic h2 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--navy, #00335a);
  margin: 0 0 .85rem;
}

.w2e-topic p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted, #5b6873);
  max-width: 68ch;
  margin: 0 0 1rem;
}

.w2e-topic p:last-of-type {
  margin-bottom: 0;
}

.w2e-topic__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.25rem;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy, #00335a);
  /* One radius scale for the whole site. The hero buttons and the cards are
     square-cornered; a pill here made the page look assembled from two kits. */
  border-radius: var(--w2e-r, 4px);
  padding: .85rem 1.7rem;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.w2e-topic__cta::after {
  content: "\2192";
  font-size: 1rem;
  line-height: 1;
}

.w2e-topic__cta:hover {
  background: var(--navy-deep, #002440);
  transform: translateY(-1px);
  color: #fff;
}

/* The caution that belongs under anything to do with immigration. */
.w2e-topics__note {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--muted, #6b7784);
  max-width: 74ch;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(15, 26, 34, .1);
}

/* An anchored block should not land under a fixed header when jumped to. */
.w2e-page [id] {
  scroll-margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .w2e-topic__cta {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Market insights

   Four emirates, four registered totals, and under each one the authority that
   published it and the date. The source line is set as small as it can be and
   still be read, because it is the part that makes the figure worth anything.
   -------------------------------------------------------------------------- */

.w2e-insights {
  max-width: 1100px;
  margin: clamp(3rem, 6vw, 5rem) auto clamp(2rem, 4vw, 3rem);
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.w2e-insights__head {
  border-top: 2px solid var(--gold, #bf953f);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.w2e-insights h2 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--navy, #00335a);
  margin: .35rem 0 .9rem;
}

.w2e-insights__lead {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted, #5b6873);
  max-width: 68ch;
  margin: 0;
}

.w2e-insights__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.w2e-insight {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 26, 34, .1);
  border-radius: var(--w2e-r, 4px);
  padding: 1.35rem 1.25rem 1.15rem;
}

.w2e-insight h3 {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted, #6b7784);
  margin: 0 0 .55rem;
}

.w2e-insight__figure {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.15;
  font-weight: 600;
  color: var(--navy, #00335a);
  margin: 0 0 .3rem;
}

.w2e-insight__scale {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .875rem;
  font-weight: 600;
  color: var(--gold-deep, #9a7526);
  margin: 0 0 .7rem;
}

.w2e-insight__text {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .875rem;
  line-height: 1.62;
  color: var(--muted, #5b6873);
  margin: 0 0 .9rem;
  flex: 1 1 auto;
}

.w2e-insight__source {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .75rem;
  line-height: 1.55;
  color: var(--muted, #6b7784);
  margin: 0;
  padding-top: .7rem;
  border-top: 1px solid rgba(15, 26, 34, .09);
}

.w2e-insight__source a {
  color: var(--navy, #00335a);
  text-decoration: underline;
  text-underline-offset: .16em;
}

.w2e-insights__note {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--muted, #6b7784);
  max-width: 78ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(15, 26, 34, .1);
}

@media (max-width: 1024px) {
  .w2e-insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .w2e-insights__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   The band of photographs at the head of a page

   Three real places, captioned with what they are. The caption sits under the
   picture rather than over it, so nothing has to be read through an image.
   -------------------------------------------------------------------------- */

.w2e-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.w2e-band__tile {
  margin: 0;
}

.w2e-band__tile img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--w2e-r, 4px);
}

.w2e-band__tile figcaption {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted, #6b7784);
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(15, 26, 34, .1);
}

.w2e-band__tile figcaption b {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy, #00335a);
  margin-bottom: .18rem;
}

@media (max-width: 860px) {
  .w2e-band { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .w2e-band__tile figcaption { font-size: .75rem; }
}

@media (max-width: 560px) {
  .w2e-band { grid-template-columns: minmax(0, 1fr); }
  .w2e-band__tile img { aspect-ratio: 16 / 9; }
}

/* The subject chips are a menu, not prose: Astra's underline on every link
   inside the content does not belong on them, nor on the market sources'
   surrounding furniture. */
.entry-content .w2e-topics a,
.entry-content .w2e-topic__cta,
.w2e-topics a,
.w2e-topic__cta {
  text-decoration: none;
}

.entry-content .w2e-topics a:hover,
.w2e-topics a:hover {
  text-decoration: none;
}

/* The eyebrow over the market block, set like every other eyebrow on the site. */
.w2e-insights .w2e-topics-tag {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep, #a87d33);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Free zone or mainland: a comparison, not two essays

   A reader weighing two options should be able to read across one line. Two
   consecutive image-and-text splits made them hold the first option in their
   head while they scrolled through the second, which is the one thing a
   comparison must not ask.

   Below 780px a two-column table stops being readable, so each row is restacked
   under its own option using the labels the markup already carries.
   -------------------------------------------------------------------------- */

.w2e-compare__shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

.w2e-compare__shots figure {
  margin: 0;
}

.w2e-compare__shots img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--w2e-r, 4px);
}

.w2e-compare__shots figcaption {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--muted, #6b7784);
  margin-top: .7rem;
}

.w2e-compare {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.w2e-compare table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  table-layout: fixed;
  border: 0;
}

/* The page's own stylesheet draws a box around every cell. A comparison reads
   as rows, not as a spreadsheet, so only the horizontal rules are kept and the
   vertical ones are taken off explicitly rather than hoped away. */
.w2e-compare th,
.w2e-compare td {
  border: 0;
  background: none;
}

.w2e-compare thead th {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600;
  color: var(--navy, #00335a);
  text-align: left;
  padding: 0 1.5rem .9rem 0;
  border-bottom: 2px solid var(--navy, #00335a);
  vertical-align: bottom;
}

.w2e-compare thead th:last-child {
  padding-right: 0;
}

.w2e-compare thead th:first-child {
  width: 22%;
  border-bottom-color: rgba(15, 26, 34, .12);
}

.w2e-compare tbody th {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--navy, #00335a);
  text-align: left;
  vertical-align: top;
  padding: 1.15rem 1.5rem 1.15rem 0;
  border-bottom: 1px solid rgba(15, 26, 34, .1);
  line-height: 1.5;
}

.w2e-compare tbody td {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--muted, #5b6873);
  vertical-align: top;
  padding: 1.15rem 1.5rem 1.15rem 0;
  border-bottom: 1px solid rgba(15, 26, 34, .1);
}

.w2e-compare tbody td:last-child {
  padding-right: 0;
}

.w2e-compare tbody tr:last-child th,
.w2e-compare tbody tr:last-child td {
  border-bottom: 0;
}

.w2e-compare__note {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--muted, #6b7784);
  max-width: 74ch;
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(15, 26, 34, .1);
}

@media (max-width: 780px) {
  .w2e-compare__shots {
    grid-template-columns: minmax(0, 1fr);
  }

  .w2e-compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .w2e-compare table,
  .w2e-compare tbody,
  .w2e-compare tr,
  .w2e-compare tbody th,
  .w2e-compare tbody td {
    display: block;
    width: auto;
    padding-right: 0;
  }

  .w2e-compare tbody tr {
    padding: 1.15rem 0;
    border-bottom: 1px solid rgba(15, 26, 34, .1);
  }

  .w2e-compare tbody tr:last-child {
    border-bottom: 0;
  }

  .w2e-compare tbody th {
    border-bottom: 0;
    padding: 0 0 .6rem;
  }

  .w2e-compare tbody td {
    border-bottom: 0;
    padding: 0 0 .85rem;
  }

  .w2e-compare tbody td:last-child {
    padding-bottom: 0;
  }

  /* The column heading the cell belongs to, printed back above it. */
  .w2e-compare tbody td::before {
    content: attr(data-col);
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--navy, #00335a);
    margin-bottom: .3rem;
  }
}

/* --------------------------------------------------------------------------
   How a setup runs

   Numbered, because the order is the information. The numeral is drawn from a
   counter rather than typed, so a step can be added without renumbering.
   -------------------------------------------------------------------------- */

.w2e-steps {
  counter-reset: w2e-step;
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.w2e-step {
  counter-increment: w2e-step;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 2vw, 1.5rem);
  padding: 1.25rem 0;
  border-top: 1px solid rgba(15, 26, 34, .1);
}

.w2e-step:first-child {
  border-top: 0;
  padding-top: 0;
}

.w2e-step::before {
  content: counter(w2e-step, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 600;
  color: var(--w2e-gold-text, #8a6420);
}

.w2e-step h3 {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy, #00335a);
  margin: 0 0 .35rem;
}

.w2e-step p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--muted, #5b6873);
  max-width: 68ch;
  margin: 0;
}

@media (max-width: 560px) {
  .w2e-step {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }

  .w2e-step::before {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   The invitation in the middle of the page

   A long page that only asks at the end asks too late. This one sits directly
   under the comparison, where the reader has just met the decision and has not
   yet made it.
   -------------------------------------------------------------------------- */

.w2e-midcta {
  background: var(--navy, #00335a);
  border-top: 0;
  border-radius: var(--w2e-r, 4px);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}

.w2e-midcta > div {
  max-width: 64ch;
}

body .w2e-page .w2e-midcta h2,
body .w2e-built .w2e-midcta h2,
body .entry-content .w2e-midcta h2 {
  color: #fff;
  margin-bottom: .6rem;
}

body .w2e-page .w2e-midcta p,
body .w2e-built .w2e-midcta p,
body .entry-content .w2e-midcta p {
  color: rgba(255, 255, 255, .82);
  margin-bottom: 0;
}

.w2e-midcta__go {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.4rem;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy, #00335a);
  background: var(--gold, #c99a49);
  border-radius: var(--w2e-r, 4px);
  padding: .85rem 1.7rem;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.w2e-midcta__go::after {
  content: "\2192";
  font-size: 1rem;
  line-height: 1;
}

.w2e-midcta__go:hover,
.w2e-midcta__go:focus-visible {
  background: #d8ab5c;
  color: var(--navy, #00335a);
  transform: translateY(-1px);
}

/* Astra underlines every link inside a post's content (.ast-single-post
   .entry-content a). A button is not prose; one class deeper wins it back
   without reaching for !important. */
body[class] .entry-content .w2e-midcta__go,
body[class] .entry-content .w2e-midcta__go:hover,
body[class] .entry-content .w2e-topic__cta,
body[class] .entry-content .w2e-topic__cta:hover {
  text-decoration: none;
}

@media (max-width: 640px) {
  .w2e-midcta__go {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Two heading levels, told apart

   Each of these pages carries its own <style> block inside its content, which
   loads after this file and sets every heading in Playfair. That is right for a
   section heading and wrong for the small labels inside a card or a step: set in
   the display face at 16px they read as undersized headlines rather than as
   labels, and the two levels stop being distinguishable.

   One class deeper than the page's own rule, so it wins without !important.
   -------------------------------------------------------------------------- */

body .w2e-page .w2e-step h3,
body .w2e-page .w2e-insight h3,
body .entry-content .w2e-step h3,
body .entry-content .w2e-insight h3 {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
}

body .w2e-page .w2e-step h3,
body .entry-content .w2e-step h3 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--navy, #00335a);
}

/* --------------------------------------------------------------------------
   The six service cards, once the generated photographs came off

   Three things were left over from a card that used to be led by a picture: a
   centred heading above ragged-left prose, a green tick in a navy-and-gold
   palette, and a heading set in the display face at 15px, which is smaller than
   the text under it looks. None of them survive the picture.

   The tick becomes a rule-coloured mark of the site's own accent. Green was the
   only third colour on the page and it appeared eighty times.
   -------------------------------------------------------------------------- */

body .w2e-page .w2e-bcard h3,
body .entry-content .w2e-bcard h3 {
  text-align: left;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  text-transform: none;
  color: var(--navy, #00335a);
}

body .w2e-page .w2e-bcard li::before,
body .entry-content .w2e-bcard li::before {
  color: var(--w2e-gold-text, #8a6420);
}

/* --------------------------------------------------------------------------
   The investment block and the expansion grid

   The investment block was a centred slab of text running to more than a
   hundred characters a line. Centred prose is readable for one sentence and
   punishing for five: the eye has to hunt for the start of every line. It is
   set left, on the same measure as every other paragraph on the page, and given
   the same gold rule the other sections open with.

   The four expansion cards keep their drawn icons and lose the uppercase
   display face on their headings, so that every small heading on this page — a
   service card, a step, an expansion card — is the same thing typographically.
   -------------------------------------------------------------------------- */

body .w2e-page .w2e-invest-block,
body .entry-content .w2e-invest-block {
  text-align: left;
}

/* The tint stays full width; the words line up with every other section's
   left edge instead of starting nineteen pixels to the left of them. */
body .w2e-page .w2e-invest-block > *,
body .entry-content .w2e-invest-block > * {
  max-width: 1100px;
  margin-inline: auto;
}

body .w2e-page .w2e-invest-block h2,
body .entry-content .w2e-invest-block h2 {
  text-align: left;
  border-top: 2px solid var(--gold, #bf953f);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

body .w2e-page .w2e-invest-block p,
body .entry-content .w2e-invest-block p {
  text-align: left;
  max-width: 68ch;
  margin-left: 0;
  margin-right: 0;
}

body .w2e-page .w2e-icon-grid h3,
body .entry-content .w2e-icon-grid h3 {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--navy, #00335a);
}

/* ==========================================================================
   Pages built from a plan

   Business and Visa & Mobility are generated as one document rather than
   assembled from the blocks they came with, because the order was the problem:
   they explained before they offered.

   Section rhythm, top to bottom: a value proposition set as two columns, six
   capability cards, an invitation, a numbered process, the structure decision
   with a short comparison, three strategic cards, and the questions. No two
   adjacent sections share a shape, and none of them is an image-beside-text
   split — that shape was used eleven times on the sister page and it is what
   made these pages read as a template.
   ========================================================================== */

.w2e-built {
  max-width: 1180px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.w2e-built > section {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.w2e-built > section:last-child {
  margin-bottom: 0;
}

.w2e-built .w2e-eyebrow {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w2e-gold-text, #8a6420);
  margin: 0 0 .7rem;
}

body .w2e-built h2 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--navy, #00335a);
  margin: 0 0 .9rem;
  text-align: left;
  text-transform: none;
}

body .w2e-built h3 {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy, #00335a);
  margin: 0 0 .5rem;
  text-align: left;
}

.w2e-built p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--muted, #5b6873);
  max-width: 68ch;
  margin: 0 0 1rem;
}

.w2e-built ul,
.w2e-built ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Why Welcome2Emirates — the value proposition
   -------------------------------------------------------------------------- */

.w2e-lede {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  border-top: 2px solid var(--gold, #bf953f);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.w2e-lede__text p:last-child {
  margin-bottom: 0;
}

.w2e-lede__points {
  display: grid;
  gap: .9rem;
}

.w2e-lede__points li {
  position: relative;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--navy, #00335a);
  padding: 0 0 .9rem 1.6rem;
  border-bottom: 1px solid rgba(15, 26, 34, .1);
}

.w2e-lede__points li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.w2e-lede__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .55rem;
  height: .55rem;
  border: 1.5px solid var(--gold, #bf953f);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   What we do — the six capabilities
   -------------------------------------------------------------------------- */

.w2e-caps__head,
.w2e-strategy__head,
.w2e-structure__head,
.w2e-faq__head {
  max-width: 72ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.w2e-caps__lead,
.w2e-strategy__lead {
  margin-bottom: 0;
}

.w2e-caps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.w2e-cap {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 26, 34, .12);
  border-radius: var(--w2e-r, 4px);
  padding: clamp(1.25rem, 2.2vw, 1.65rem);
}

.w2e-cap__top {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}

.w2e-cap__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  border: 1px solid rgba(191, 149, 63, .5);
  border-radius: var(--w2e-r, 4px);
  color: var(--navy, #00335a);
}

.w2e-cap__mark svg,
.w2e-strat__mark svg {
  width: 1.2rem;
  height: 1.2rem;
}

.w2e-cap__step {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w2e-gold-text, #8a6420);
}

.w2e-cap p {
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.w2e-cap ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid rgba(15, 26, 34, .09);
}

.w2e-cap li,
.w2e-strat li {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .78rem;
  line-height: 1.4;
  color: var(--navy, #00335a);
  background: rgba(0, 51, 90, .05);
  border: 1px solid rgba(0, 51, 90, .1);
  border-radius: var(--w2e-r, 4px);
  padding: .3rem .6rem;
}

/* --------------------------------------------------------------------------
   Growth, network and investment
   -------------------------------------------------------------------------- */

.w2e-strategy {
  background: var(--navy, #00335a);
  border-radius: var(--w2e-r, 4px);
  padding: clamp(1.75rem, 4vw, 3rem);
}

body .w2e-built .w2e-strategy h2,
body .w2e-built .w2e-strategy h3 {
  color: #fff;
}

.w2e-strategy .w2e-eyebrow {
  color: var(--gold, #c99a49);
}

.w2e-strategy p {
  color: rgba(255, 255, 255, .8);
}

.w2e-strategy__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.w2e-strat {
  border-top: 1px solid rgba(255, 255, 255, .22);
  padding-top: 1.25rem;
}

.w2e-strat__mark {
  display: inline-flex;
  margin-bottom: .9rem;
  color: var(--gold, #c99a49);
}

.w2e-strat p {
  font-size: .95rem;
  line-height: 1.65;
}

.w2e-strat ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.w2e-strat li {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
}

/* --------------------------------------------------------------------------
   Choosing the right structure
   -------------------------------------------------------------------------- */

.w2e-structure__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.w2e-checklist {
  counter-reset: w2e-check;
  display: grid;
  gap: .55rem;
}

.w2e-checklist li {
  counter-increment: w2e-check;
  position: relative;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .98rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--navy, #00335a);
  padding: .55rem 0 .55rem 2.4rem;
  border-bottom: 1px solid rgba(15, 26, 34, .1);
}

.w2e-checklist li:last-child {
  border-bottom: 0;
}

.w2e-checklist li::before {
  content: counter(w2e-check, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .55rem;
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: .95rem;
  color: var(--w2e-gold-text, #8a6420);
}

.w2e-structure__note {
  background: rgba(0, 51, 90, .04);
  border-left: 2px solid var(--gold, #bf953f);
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 0 var(--w2e-r, 4px) var(--w2e-r, 4px) 0;
}

.w2e-structure__note p {
  margin: 0;
  font-size: .95rem;
}

/* --------------------------------------------------------------------------
   The questions
   -------------------------------------------------------------------------- */

.w2e-faq__list {
  border-top: 1px solid rgba(15, 26, 34, .12);
}

.w2e-faq__item {
  border-bottom: 1px solid rgba(15, 26, 34, .12);
}

.w2e-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy, #00335a);
  padding: 1.15rem 0;
}

.w2e-faq__item summary::-webkit-details-marker {
  display: none;
}

.w2e-faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 400;
  color: var(--w2e-gold-text, #8a6420);
  transition: transform .18s ease;
}

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

.w2e-faq__item summary:focus-visible {
  outline: 2px solid var(--navy, #00335a);
  outline-offset: 3px;
}

.w2e-faq__answer {
  padding: 0 0 1.3rem;
}

.w2e-faq__answer p {
  margin: 0;
  font-size: .97rem;
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   Narrower screens
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .w2e-caps__grid,
  .w2e-strategy__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .w2e-lede,
  .w2e-structure__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .w2e-caps__grid,
  .w2e-strategy__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   One picture beside one subject

   Used once per page. The relocation page used this shape eleven times in a
   row, which is what made every activity page look like the same template with
   different words in it.
   -------------------------------------------------------------------------- */

.w2e-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  border-top: 2px solid var(--gold, #bf953f);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.w2e-feature--plain {
  grid-template-columns: minmax(0, 1fr);
}

.w2e-feature__text {
  grid-column: 1;
  grid-row: 1;
}

.w2e-feature__points {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: .6rem;
  margin-top: .4rem;
}

.w2e-feature__points li {
  position: relative;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .95rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--navy, #00335a);
  padding-left: 1.6rem;
}

.w2e-feature__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: .55rem;
  height: .55rem;
  border: 1.5px solid var(--gold, #bf953f);
  border-radius: 50%;
}

.w2e-feature figure {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.w2e-feature img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--w2e-r, 4px);
}

.w2e-feature figcaption {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted, #6b7784);
  margin-top: .7rem;
}

/* --------------------------------------------------------------------------
   Three columns rather than two in a comparison

   A three-option table wants more of the width than a two-option one, so the
   labels give some back.
   -------------------------------------------------------------------------- */

.w2e-compare--three thead th:first-child {
  width: 17%;
}

.w2e-compare--three tbody th {
  padding-right: 1.1rem;
}

.w2e-compare--three tbody td {
  font-size: .9rem;
  padding-right: 1.1rem;
}

/* --------------------------------------------------------------------------
   The standing caution

   Set quietly and marked as an aside, because it is a caution and not a claim,
   and a page that shouts a disclaimer is not being more honest.
   -------------------------------------------------------------------------- */

.w2e-standing {
  border-top: 1px solid rgba(15, 26, 34, .12);
  padding-top: 1.25rem;
}

.w2e-standing p {
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--muted, #6b7784);
  max-width: 82ch;
  margin: 0;
}

@media (max-width: 860px) {
  .w2e-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .w2e-feature figure {
    grid-column: 1;
    grid-row: 3;
    margin-top: 1.5rem;
  }

  .w2e-feature img {
    aspect-ratio: 16 / 9;
  }
}

/* The link out of a capability card. Sits at the foot of the card so the four
   of them line up across a row whatever the card above it is doing. */
.w2e-cap__go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy, #00335a);
  text-decoration: none;
  border-bottom: 1px solid var(--gold, #bf953f);
  padding-bottom: .25rem;
  align-self: flex-start;
  transition: color .18s ease, border-color .18s ease;
}

.w2e-cap__go::after {
  content: "\2192";
  font-size: .95rem;
  line-height: 1;
}

body[class] .entry-content .w2e-cap__go,
body[class] .entry-content .w2e-cap__go:hover {
  text-decoration: none;
}

.w2e-cap__go:hover,
.w2e-cap__go:focus-visible {
  color: var(--w2e-gold-text, #8a6420);
  border-color: var(--w2e-gold-text, #8a6420);
}

/* Four cards in a three-column grid leave one of them stranded on a row of its
   own. Four go in two columns, where they make a square. */
@media (min-width: 1025px) {
  .w2e-caps__grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   A grid of districts

   The relocation page described eight of them as eight consecutive
   picture-beside-text splits — six thousand pixels of the same shape, in which
   no two districts could ever be seen at once. Somebody choosing where to live
   is comparing, so they go side by side.

   The photograph leads, because that is what a reader looks at first when the
   subject is a place; the marketing line each district carried is demoted to a
   label above its real name.
   -------------------------------------------------------------------------- */

.w2e-places__head {
  max-width: 72ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.w2e-places__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.w2e-place {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 26, 34, .12);
  border-radius: var(--w2e-r, 4px);
  overflow: hidden;
}

.w2e-place img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.w2e-place__text {
  padding: 1rem 1.1rem 1.2rem;
}

.w2e-place__label {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--w2e-gold-text, #8a6420);
  margin: 0 0 .35rem;
}

body .w2e-built .w2e-place h3 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--navy, #00335a);
  margin: 0 0 .45rem;
}

.w2e-place p:not(.w2e-place__label) {
  font-size: .88rem;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .w2e-places__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .w2e-places__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .w2e-places__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}