/**
 * The home page's new sections.
 *
 * The page already carries its own design system in a style block at the top —
 * navy, gold, Playfair for display, Plus Jakarta for text, generous white
 * space. These rules use the same variables where the page defines them and
 * fall back to the brand's own where it does not, so the new sections read as
 * part of the page rather than as something bolted on.
 */

body.w2e-home {
  --w2e-home-max: 1240px;
  --w2e-home-gap: clamp(1rem, 2vw, 1.75rem);
}

/* Nothing on this page may scroll sideways. Clip rather than hidden, so no
   second scrolling box is created. */
body.w2e-home {
  overflow-x: clip;
}

/* The theme's own header.
 *
 * The desktop one was already stood down; the mobile one was not, so a phone
 * opened the home page on a white Astra bar - logo, site title and a burger of
 * its own - sitting directly above this page's real header. Two headers, two
 * logos and two menus, one on top of the other.
 */
body.w2e-home .site-header,
body.w2e-home #masthead,
body.w2e-home .ast-mobile-header-wrap,
body.w2e-home .ast-main-header-wrap {
  display: none !important;
}

/* The theme's own page title. The hero carries the page's heading; this one
   would be a second first-level heading saying only "Home". */
body.w2e-home .entry-header,
body.w2e-home .entry-header .entry-title,
body.w2e-home .w2e-hidden {
  display: none !important;
}

body.w2e-home .w2e-home-tag {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold, #bf953f);
  margin: 0 0 .6rem;
}

body.w2e-home .w2e-home-lead {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.72;
  color: var(--muted, #5b6873);
  margin: 0 0 1.25rem;
  max-width: 60ch;
}

body.w2e-home .w2e-home-note {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--muted, #6b7784);
  max-width: 74ch;
  margin: 0 auto 1.5rem;
}

/* The one button shape the new sections use. */
body.w2e-home .w2e-home-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  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);
  border-radius: 999px;
  padding: .95rem 1.9rem;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

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

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

/* --------------------------------------------------------------------------
   The four pillars, straight after the film

   A tinted band, so the eye registers a change of register immediately below
   the hero and reads the four things the firm does before scrolling further.
   -------------------------------------------------------------------------- */

body.w2e-home .w2e-home-pillars {
  background: #f6f8fa;
  border-bottom: 1px solid rgba(15, 26, 34, .07);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.15rem, 4vw, 2.5rem);
}

body.w2e-home .w2e-home-pillars__head {
  max-width: 54rem;
  margin: 0 auto clamp(1.9rem, 3.6vw, 2.9rem);
  text-align: center;
}

body.w2e-home .w2e-home-pillars h2 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--navy, #00335a);
  margin: 0 0 1rem;
}

body.w2e-home .w2e-home-pillars__grid {
  max-width: var(--w2e-home-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--w2e-home-gap);
}

body.w2e-home .w2e-home-pillar {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: #fff;
  border: 1px solid rgba(15, 26, 34, .09);
  border-top: 2px solid var(--gold, #bf953f);
  border-radius: var(--w2e-r, 4px);
  padding: 1.35rem 1.25rem 1.2rem;
  transition: box-shadow .2s ease, transform .2s ease;
}

body.w2e-home .w2e-home-pillar:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 26, 34, .09);
}

body.w2e-home .w2e-home-pillar h3 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 0;
}

body.w2e-home .w2e-home-pillar h3 a {
  color: var(--navy, #00335a);
  text-decoration: none;
}

body.w2e-home .w2e-home-pillar h3 a:hover {
  text-decoration: underline;
  text-underline-offset: .18em;
}

body.w2e-home .w2e-home-pillar p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--muted, #5b6873);
  margin: 0;
  flex: 1 1 auto;
}

body.w2e-home .w2e-home-pillar__link {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy, #00335a);
  text-decoration: none;
  align-self: flex-start;
}

body.w2e-home .w2e-home-pillar__link::after {
  content: " \2192";
}

body.w2e-home .w2e-home-pillar__link:hover {
  color: var(--gold, #bf953f);
}

/* --------------------------------------------------------------------------
   Who we are
   -------------------------------------------------------------------------- */

body.w2e-home .w2e-home-about {
  max-width: var(--w2e-home-max);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

body.w2e-home .w2e-home-about__head {
  text-align: center;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

body.w2e-home .w2e-home-about h2,
body.w2e-home .w2e-home-act h2,
body.w2e-home .w2e-home-deals h2,
body.w2e-home .w2e-home-featured h2,
body.w2e-home .w2e-home-visa h2 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.65rem, 3.2vw, 2.45rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--navy, #00335a);
  margin: 0 0 1rem;
}

body.w2e-home .w2e-home-about__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--w2e-home-gap);
}

body.w2e-home .w2e-home-about__grid article {
  border-top: 2px solid var(--gold, #bf953f);
  padding-top: 1.15rem;
}

body.w2e-home .w2e-home-about__grid h3 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--navy, #00335a);
  margin: 0 0 .6rem;
}

body.w2e-home .w2e-home-about__grid p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--muted, #5b6873);
  margin: 0;
}

/* --------------------------------------------------------------------------
   An activity: photograph on one side, what we do on the other
   -------------------------------------------------------------------------- */

body.w2e-home .w2e-home-act {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: var(--w2e-home-max);
  margin: clamp(3rem, 6.5vw, 5.5rem) auto 0;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

body.w2e-home .w2e-home-act--reverse .w2e-home-act__photo {
  order: 2;
}

body.w2e-home .w2e-home-act__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 30rem;
  object-fit: cover;
  border-radius: 4px;
}

body.w2e-home .w2e-home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

body.w2e-home .w2e-home-chips li {
  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: .38rem .85rem;
}

/* --------------------------------------------------------------------------
   Opportunities and featured properties
   -------------------------------------------------------------------------- */

body.w2e-home .w2e-home-deals,
body.w2e-home .w2e-home-featured {
  max-width: var(--w2e-home-max);
  margin: clamp(3rem, 6.5vw, 5.5rem) auto 0;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

body.w2e-home .w2e-home-deals__head {
  text-align: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

body.w2e-home .w2e-home-deals__head .w2e-home-lead {
  margin-inline: auto;
  text-align: center;
}

body.w2e-home .w2e-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--w2e-home-gap);
}

body.w2e-home .w2e-home-more {
  text-align: center;
  margin-top: clamp(1.6rem, 3vw, 2.25rem);
}

/* A property card. The same anatomy as the listing page's, written here so the
   home page carries no dependency on that page's stylesheet. */
body.w2e-home .w2e-home-card {
  display: block;
  border: 1px solid rgba(15, 26, 34, .1);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

body.w2e-home .w2e-home-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15, 26, 34, .14);
}

body.w2e-home .w2e-home-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--navy, #00335a);
  background-size: cover;
  background-position: center;
}

body.w2e-home .w2e-home-card__chip,
body.w2e-home .w2e-home-card__flag {
  position: absolute;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: 999px;
}

body.w2e-home .w2e-home-card__chip {
  top: .75rem;
  left: .75rem;
  color: #fff;
  background: rgba(0, 51, 90, .88);
}

body.w2e-home .w2e-home-card__flag {
  right: .75rem;
  bottom: .75rem;
  color: #2a1e05;
  background: var(--gold, #bf953f);
  box-shadow: 0 6px 18px rgba(15, 26, 34, .28);
}

body.w2e-home .w2e-home-card__flag.is-distress {
  color: #fff;
  background: var(--navy, #00335a);
}

body.w2e-home .w2e-home-card__none {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}

body.w2e-home .w2e-home-card__body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.05rem 1.15rem 1.2rem;
}

body.w2e-home .w2e-home-card__title {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.34;
  color: var(--navy, #00335a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

body.w2e-home .w2e-home-card__price {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--navy, #00335a);
}

body.w2e-home .w2e-home-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  color: var(--muted, #5b6873);
  padding-top: .5rem;
  border-top: 1px solid rgba(15, 26, 34, .08);
}

body.w2e-home .w2e-home-card__meta b {
  color: var(--navy, #00335a);
  font-weight: 600;
}

body.w2e-home .w2e-home-card__where {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  color: var(--muted, #6b7784);
}

/* --------------------------------------------------------------------------
   Visa and mobility — the fuller section
   -------------------------------------------------------------------------- */

body.w2e-home .w2e-home-visa {
  max-width: var(--w2e-home-max);
  margin: clamp(3rem, 6.5vw, 5.5rem) auto 0;
  padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.15rem, 4vw, 2.5rem);
  background: rgba(0, 51, 90, .035);
  border-top: 2px solid var(--gold, #bf953f);
  border-radius: 4px;
}

body.w2e-home .w2e-home-visa__head {
  text-align: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

body.w2e-home .w2e-home-visa__head .w2e-home-lead {
  margin-inline: auto;
  text-align: center;
}

body.w2e-home .w2e-home-visa__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
  margin-bottom: 1.75rem;
}

body.w2e-home .w2e-home-visa__grid h3 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--navy, #00335a);
  margin: 0 0 .5rem;
}

body.w2e-home .w2e-home-visa__grid p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--muted, #5b6873);
  margin: 0;
}

body.w2e-home .w2e-home-visa .w2e-home-note {
  text-align: center;
}

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

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

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

  body.w2e-home .w2e-home-act--reverse .w2e-home-act__photo {
    order: 0;
  }

  body.w2e-home .w2e-home-act__photo img {
    max-height: 17rem;
  }
}

@media (max-width: 640px) {
  body.w2e-home .w2e-home-about__grid,
  body.w2e-home .w2e-home-pillars__grid,
  body.w2e-home .w2e-home-visa__grid,
  body.w2e-home .w2e-home-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.w2e-home .w2e-home-cta {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Three things wrong with the home page's own header and hero

   1. The mark. The page carries a 100 x 150 portrait logo inside a navigation
      bar. A portrait mark in a horizontal bar forces the bar to 216px — more
      than twice the height of the header on every other page — and pushes the
      mark so far above the fold that the site's identity is, in practice,
      absent from its most important page. Capped to the height of the bar, it
      sits where a brand belongs and the two headers finally match.

   2. The second button. "Explore Our Services" was navy text on a transparent
      background, over a dark photograph of a city at dusk. It is the least
      readable thing on the site and it is one of the two calls to action on the
      home page. White, like the same button on every inner page.

   3. The rule under the two of them: a control over a photograph needs its own
      contrast, not the contrast of the section it happens to sit in.
   -------------------------------------------------------------------------- */

body .w2e-hero .w2e-nav > a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

body .w2e-hero .w2e-nav > a img {
  height: auto;
  width: auto;
  max-height: none;
  max-width: 40vw;
  object-fit: contain;
}

/* The logo that replaces the blank placeholder, set exactly as the inner
   pages set theirs so the two headers are the same object. The wordmark rules
   below it are the fallback for a library with no artwork in it. */
body .w2e-hero .w2e-nav .w2e-brand .w2e-brand__img,
body .w2e-hero .w2e-nav .w2e-brand img {
  /* A portrait mark: the tower with the wordmark beneath it. It needs height
     to be readable at all, so the header bar grows around it rather than the
     logo shrinking into the bar. */
  height: clamp(56px, 6.2vw, 88px);
  width: auto;
  max-width: 40vw;
  display: block;
  object-fit: contain;
  /* White line art on a photograph: a soft shadow keeps it readable wherever
     the picture behind it happens to be light. */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}

body .w2e-hero .w2e-nav .w2e-brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  flex: none;
}

body .w2e-hero .w2e-nav .w2e-brand__word {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 600;
}

body .w2e-hero .w2e-nav .w2e-brand__sub {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-top: .35em;
}

/* The mark is a portrait: below the desktop widths it needs height, or the
   words under the tower stop being words. */
@media (max-width: 1024px) {
  body .w2e-hero .w2e-nav .w2e-brand .w2e-brand__img,
  body .w2e-hero .w2e-nav .w2e-brand img { height: 108px; }
}

@media (max-width: 720px) {
  body .w2e-hero .w2e-nav .w2e-brand .w2e-brand__img,
  body .w2e-hero .w2e-nav .w2e-brand img { height: 92px; }
}

body .w2e-hero .w2e-nav .w2e-brand:hover,
body .w2e-hero .w2e-nav .w2e-brand:focus-visible {
  color: #fff;
  text-decoration: none;
}

/* The secondary hero button, made readable against the film behind it. Named
   exactly — .w2e-cta.ghost — so the filled gold button beside it keeps its navy
   label, which is the pair that is already correct at 5:1. */
body .w2e-hero-inner a.w2e-cta.ghost,
body .w2e-hero .w2e-hero-inner a.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

body .w2e-hero-inner a.w2e-cta.ghost:hover,
body .w2e-hero-inner a.w2e-cta.ghost:focus-visible,
body .w2e-hero .w2e-hero-inner a.ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .85);
}

/* --------------------------------------------------------------------------
   The locations mosaic, sized to how many tiles it actually has

   The grid was written for five: one tall feature down the left and four small
   ones beside it.

       grid-template-columns: 1.3fr 1fr 1fr;
       grid-template-rows: 260px 260px;
       .w2e-comm-card:first-child { grid-row: 1 / 3; }

   Given three tiles it left half the second row empty, and the section read as
   a layout that had fallen over. It had not: it was starved. Three fit the same
   idea in two columns — the emirate holding most of the stock takes the tall
   one, the other two stack beside it — and every other count falls back to a
   plain row of equal tiles rather than a hole.
   -------------------------------------------------------------------------- */

/* Dubai large, the rest stacked beside it.

   Four emirates, and the first of them is always Dubai — which is also the only
   one of the four whose photograph is portrait, so the tall column suits the
   picture as well as the hierarchy. Two columns, three rows: Dubai down the
   left through all three, Sharjah, Ajman and Abu Dhabi stacked on the right.
   No empty cells, which is what went wrong when a five-slot mosaic was handed
   three tiles. */
body .w2e-comm-grid--4 {
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: repeat(3, 186px);
}

body .w2e-comm-grid--4 .w2e-comm-card--lead {
  grid-row: 1 / 4;
  grid-column: 1;
}

body .w2e-comm-grid--3 {
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: repeat(2, 200px);
}

body .w2e-comm-grid--3 .w2e-comm-card--lead {
  grid-row: 1 / 3;
  grid-column: 1;
}

body .w2e-comm-grid--5 {
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: 260px 260px;
}

body .w2e-comm-grid--5 .w2e-comm-card--lead {
  grid-row: 1 / 3;
  grid-column: 1;
}

body .w2e-comm-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 260px;
}

body .w2e-comm-grid--2 .w2e-comm-card:first-child {
  grid-row: auto;
}

body .w2e-comm-grid--6,
body .w2e-comm-grid--7,
body .w2e-comm-grid--8 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 260px;
}

body .w2e-comm-grid--6 .w2e-comm-card:first-child,
body .w2e-comm-grid--7 .w2e-comm-card:first-child,
body .w2e-comm-grid--8 .w2e-comm-card:first-child {
  grid-row: auto;
}

/* --------------------------------------------------------------------------
   An emirate with no photograph of it

   The library holds Dubai several times over and neither Sharjah nor Ajman
   even once. Rather than borrow a fitted kitchen from a listing — which is how
   the section came to show a bathroom captioned "Ajman", carrying another
   agency's watermark — a tile without a photograph of its own place is set as
   a panel: the name, the count, a gold rule, and nothing pretending to be a
   view. It reads as a designed tile rather than a broken one, and it stops
   being a panel the day somebody sends a photograph of Sharjah.
   -------------------------------------------------------------------------- */

body .w2e-comm-card {
  background-color: var(--w2e-navy, #00335a);
}

body .w2e-comm-card--plain {
  background-image: none;
  background-color: var(--w2e-navy, #00335a);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1.4rem, 2.4vw, 2rem);
}

/* The scrim exists to lift a caption off a photograph. Without one it only
   darkens a panel that is already dark. */
body .w2e-comm-card--plain::after {
  background: none;
}

/* Rule, name, count — centred as one block, so the tile reads as a piece of
   typography rather than as a photograph that failed to load. */
body .w2e-comm-card--plain::before {
  content: "";
  position: static;
  display: block;
  width: 2.6rem;
  height: 2px;
  margin-bottom: 1rem;
  background: var(--w2e-gold, #bf953f);
}

body .w2e-comm-card--plain .label,
body .w2e-comm-card--plain .sub {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 0;
  margin: 0;
}

body .w2e-comm-card--plain .sub {
  margin-top: .3rem;
}

@media (max-width: 860px) {
  body .w2e-comm-grid,
  body .w2e-comm-grid--2,
  body .w2e-comm-grid--3,
  body .w2e-comm-grid--4,
  body .w2e-comm-grid--6,
  body .w2e-comm-grid--7,
  body .w2e-comm-grid--8 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  body .w2e-comm-grid .w2e-comm-card,
  body .w2e-comm-grid .w2e-comm-card:first-child,
  body .w2e-comm-grid .w2e-comm-card--lead {
    grid-row: auto;
    grid-column: auto;
    min-height: 220px;
  }

  body .w2e-comm-grid .w2e-comm-card--lead {
    min-height: 300px;
  }
}

/* --------------------------------------------------------------------------
   The questions, set the way every other page sets them

   Two faults. The open marker was written `content: "2212"` — the code point
   for a minus sign with the backslash left off — so an opened question was
   labelled with the four digits 2212 instead of a dash. And the whole block was
   white type on a teal gradient, which is the only place on the site that
   treats a list of questions as a dark panel; the other five pages set them as
   a light ruled list with a gold mark that turns.

   Same primitive underneath — a native <details>, no script — so the answer is
   to give the home page the same clothes rather than a different mechanism.
   -------------------------------------------------------------------------- */

body .w2e-faq-inner {
  max-width: 900px;
}

body .w2e-faq-inner h2 {
  text-align: left;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

body .w2e-faq-inner .w2e-faq-item {
  background: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid rgba(15, 26, 34, .12);
}

body .w2e-faq-inner .w2e-faq-item:first-of-type {
  border-top: 1px solid rgba(15, 26, 34, .12);
}

body .w2e-faq-inner .w2e-faq-item summary {
  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(--w2e-navy, #00335a);
  padding: 1.15rem 0;
  align-items: flex-start;
  gap: 1rem;
}

body .w2e-faq-inner .w2e-faq-item summary::after,
body .w2e-faq-inner .w2e-faq-item[open] 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);
  margin-left: 1rem;
  transition: transform .18s ease;
}

body .w2e-faq-inner .w2e-faq-item[open] summary::after {
  transform: rotate(45deg);
}

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

body .w2e-faq-inner .w2e-faq-item p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: .97rem;
  line-height: 1.72;
  color: var(--w2e-muted, #5b6873);
  max-width: 78ch;
  margin: 0 0 1.3rem;
}

/* --------------------------------------------------------------------------
   How we work

   One paragraph where five numbered steps and three rules used to be. The
   steps were true and nobody read them: process belongs on the page a visitor
   reaches *after* deciding you are worth talking to, not on the one where they
   are deciding.

   Set narrow and centred so it reads as a statement of position rather than as
   another card. It is the only section on the page with no grid in it, which
   is what makes it land between the four pillars above and the eleven reasons
   below.
   -------------------------------------------------------------------------- */

body.w2e-home .w2e-home-approach {
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  padding: clamp(2.6rem, 5vw, 4rem) clamp(1.15rem, 4vw, 2.5rem);
  background: #f6f8fa;
  border-top: 1px solid rgba(15, 26, 34, .07);
  border-bottom: 1px solid rgba(15, 26, 34, .07);
}

body.w2e-home .w2e-home-approach__inner {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

body.w2e-home .w2e-home-approach h2 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.65rem, 3.2vw, 2.45rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--navy, #00335a);
  margin: 0 0 1.1rem;
}

body.w2e-home .w2e-home-approach__lede {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(1rem, 1.35vw, 1.08rem);
  line-height: 1.78;
  color: var(--muted, #5b6873);
  margin: 0;
}

/* --------------------------------------------------------------------------
   The eleven reasons

   Eleven is a lot of anything. It only works if it can be scanned, so each one
   is a numbered compartment with a short title and two or three lines - the
   same visual grammar as the four pillars, at a smaller weight so it reads as
   supporting argument rather than as a second set of headline claims.

   Three columns on a wide screen rather than four: at four, eleven items leave
   an awkward gap on the last row and the titles start breaking across lines.
   Three gives 3-3-3-2, which reads as a deliberate list rather than a grid
   that ran out.
   -------------------------------------------------------------------------- */

body.w2e-home .w2e-home-reasons {
  max-width: var(--w2e-home-max);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

body.w2e-home .w2e-home-reasons__head {
  max-width: 54rem;
  margin: 0 0 clamp(1.75rem, 3.4vw, 2.6rem);
}

body.w2e-home .w2e-home-reasons h2 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.65rem, 3.2vw, 2.45rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--navy, #00335a);
  margin: 0;
}

body.w2e-home .w2e-home-reasons__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

body.w2e-home .w2e-home-reason {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  background: #fff;
  border: 1px solid rgba(15, 26, 34, .09);
  border-radius: var(--w2e-r, 4px);
  padding: 1.25rem 1.2rem 1.3rem;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

body.w2e-home .w2e-home-reason:hover {
  transform: translateY(-2px);
  border-color: rgba(191, 149, 63, .45);
  box-shadow: 0 14px 30px rgba(15, 26, 34, .08);
}

body.w2e-home .w2e-home-reason__n {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold, #bf953f);
  line-height: 1;
}

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

body.w2e-home .w2e-home-reason p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .9rem;
  line-height: 1.62;
  color: var(--muted, #5b6873);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Investment strategies

   Three ways of buying and one card about the arithmetic. The fourth is set
   apart - navy rather than white - because it is not a fourth strategy, it is
   the discipline applied to the other three.
   -------------------------------------------------------------------------- */

body.w2e-home .w2e-home-strategies {
  max-width: var(--w2e-home-max);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

body.w2e-home .w2e-home-strategies__head {
  max-width: 54rem;
  margin: 0 0 clamp(1.75rem, 3.4vw, 2.6rem);
}

body.w2e-home .w2e-home-strategies h2 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.65rem, 3.2vw, 2.45rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--navy, #00335a);
  margin: 0;
}

body.w2e-home .w2e-home-strategies__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--w2e-home-gap);
}

body.w2e-home .w2e-home-strategy {
  background: #fff;
  border: 1px solid rgba(15, 26, 34, .09);
  border-top: 2px solid var(--gold, #bf953f);
  border-radius: var(--w2e-r, 4px);
  padding: 1.35rem 1.25rem 1.3rem;
}

body.w2e-home .w2e-home-strategy h3 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--navy, #00335a);
  margin: 0 0 .55rem;
}

body.w2e-home .w2e-home-strategy p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .9rem;
  line-height: 1.64;
  color: var(--muted, #5b6873);
  margin: 0;
}

body.w2e-home .w2e-home-strategy--roi {
  background: var(--navy, #00335a);
  border-color: rgba(255, 255, 255, .14);
  border-top-color: var(--gold, #bf953f);
}

body.w2e-home .w2e-home-strategy--roi h3 { color: #fff; }
body.w2e-home .w2e-home-strategy--roi p  { color: rgba(255, 255, 255, .82); }

@media (max-width: 1040px) {
  body.w2e-home .w2e-home-reasons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.w2e-home .w2e-home-strategies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body.w2e-home .w2e-home-reasons__grid { grid-template-columns: minmax(0, 1fr); }
  body.w2e-home .w2e-home-strategies__grid { grid-template-columns: minmax(0, 1fr); }
  body.w2e-home .w2e-home-approach__inner { text-align: left; }
}
}