/**
 * The finishing layer for the inner pages.
 *
 * Three jobs: repair what the heading demotion broke, dress the drawn icons
 * that replaced the glyphs, and keep the pages' own sections to the same
 * measure, rhythm and hierarchy as the home page.
 */

/* --------------------------------------------------------------------------
   The page's own hero heading

   Each page carries a photographic band under the film, and its headline was
   written as a first-level heading. There can be one of those on a page and
   the film already holds it, so the band's headline is demoted — at which
   point it stops matching the page's own rule for h1 and falls back to the
   theme's dark body colour, on a dark photograph. These rules give the demoted
   heading exactly what the rule it lost was giving it.
   -------------------------------------------------------------------------- */

.w2e-page-hero-content h2,
.w2e-page-hero-content h3:first-of-type {
  color: #fff;
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 16px;
}

.w2e-hero-content h2,
.w2e-hero-inner h2 {
  color: inherit;
}

/* The band's overlay was light enough to read navy through. Now that the
   headline is white it can stay as it is, but a floor under the darkest part
   keeps the standfirst readable on a pale photograph too. */
.w2e-page-hero-overlay {
  background: linear-gradient(180deg, rgba(0, 15, 30, .38) 0%, rgba(0, 15, 30, .86) 100%);
}

/* --------------------------------------------------------------------------
   Drawn icons
   -------------------------------------------------------------------------- */

.w2e-icon-item .w2e-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: rgba(0, 51, 90, .06);
  color: var(--navy, #00335a);
}

.w2e-icon-item .w2e-ic svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* --------------------------------------------------------------------------
   A written subject with a photograph beside it

   The written sections ran the full width of the page as unbroken prose, which
   is both hard to read and visually empty next to the card grids around them.
   Two columns fixes the measure and gives the subject something to look at.
   -------------------------------------------------------------------------- */

.w2e-topic--split {
  display: grid;
  /* The page's own split sections are a straight half and half, and they are the
     ones that look right. A 1.35 / 0.65 grid put a 712px column of text beside a
     343px picture with the picture pinned to the far edge of its column — a
     postage stamp and a gap. These match what is already on the page. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.w2e-topic--split:nth-of-type(even) .w2e-topic__text {
  order: 2;
}

.w2e-topic__text > *:first-child {
  margin-top: 0;
}

.w2e-topic__text p {
  max-width: 58ch;
}

/* The picture fills its half. No cap, no auto margin: both of those were what
   pushed it away from the text and left the hole in the middle. */
.w2e-topic__figure {
  margin: 0;
}

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

.w2e-topic__figure 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);
}

/* Two columns need room. Below this they stack — the page's own split sections
   included, which were being squeezed into 375px columns between 768 and 860. */
@media (max-width: 900px) {
  .w2e-topic--split,
  .w2e-page .w2e-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .w2e-topic--split:nth-of-type(even) .w2e-topic__text {
    order: 0;
  }

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

/* --------------------------------------------------------------------------
   A photographic band that now says something

   It held a button and nothing else. The heading and the line above the button
   need a scrim behind them, because a photograph is not a background you can
   set type on and hope.
   -------------------------------------------------------------------------- */

.w2e-band-copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
  text-align: center;
  margin: 0 auto 1.4rem;
  padding-inline: 1.15rem;
}

.w2e-band-copy 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;
  color: #fff;
  margin: 0 0 .7rem;
  text-shadow: 0 2px 18px rgba(0, 12, 24, .55);
}

.w2e-band-copy p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
  margin: 0;
  text-shadow: 0 1px 14px rgba(0, 12, 24, .6);
}

/* The band lays its children out in a row; the copy and the button belong in a
   column, centred. */
.w2e-band-copy + .w2e-cta {
  position: relative;
  z-index: 2;
}

/* A link written into a list row, so it reads as a link and not as emphasis. */
.w2e-polish-link {
  display: inline-block;
  font-weight: 600;
  color: var(--navy, #00335a);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.w2e-polish-link:hover {
  color: var(--gold-deep, #a87d33);
}

/* --------------------------------------------------------------------------
   Buttons are not prose

   Astra underlines every link inside the content. That is right for a link in a
   sentence and wrong for a button, a menu item or a card. The selector carries
   an extra element so it wins on weight rather than on being shouted at.
   -------------------------------------------------------------------------- */

body .entry-content a.w2e-cta,
body .entry-content a.w2e-topic__cta,
body .entry-content a.w2e-home-cta,
body .entry-content a.w2e-home-pillar__link,
body .entry-content a.w2e-btn,
body .entry-content .w2e-topics a,
body .entry-content .w2e-menu a,
body .entry-content .w2e-drawer a,
body .entry-content .w2e-mobile-panel a,
body .entry-content .w2e-footer a,
body .entry-content .w2e-card a,
body .entry-content .w2e-home-card,
body .entry-content .w2e-home-pillar h3 a {
  text-decoration: none;
}

body .entry-content a.w2e-cta:hover,
body .entry-content a.w2e-topic__cta:hover,
body .entry-content a.w2e-home-cta:hover,
body .entry-content .w2e-footer a:hover,
body .entry-content .w2e-home-pillar h3 a:hover {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* The band's button was a bare underlined word on a photograph. It needs to
   look like something you press. */
.w2e-band-copy + .w2e-cta,
.w2e-cta {
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   The developer wall

   The marks are supplied at wildly different proportions — some square, some
   wide, some with their own white ground. Containing each one in a fixed box
   and letting it size itself inside makes a row of them read as a set rather
   than as fifteen unrelated files.
   -------------------------------------------------------------------------- */

.w2e-brandcell {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
}

.w2e-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 62px;
}

.w2e-mark img {
  max-width: 80%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* The marks arrive in many colours on many grounds. One tone settles them
     into a row and keeps the page's own palette in charge; colour returns on
     hover, so nobody's brand is misrepresented on inspection. */
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}

.w2e-brandcell:hover .w2e-mark img,
.w2e-brandcell:focus-within .w2e-mark img {
  filter: none;
  opacity: 1;
}

.w2e-mark__name {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--muted, #5b6873);
}

/* --------------------------------------------------------------------------
   The contact form

   The fields keep the look they had. What is added is what was missing: a
   label for anyone not using their eyes, an error that appears against the
   field that caused it, and a line at the end that says what happened.
   -------------------------------------------------------------------------- */

.w2e-field {
  display: block;
  position: relative;
}

.w2e-field__error {
  display: block;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.5;
  color: #a3261f;
  margin: -.55rem 0 .75rem;
  min-height: 0;
}

.w2e-field__error:empty {
  display: none;
}

#w2e-contact-form .is-wrong {
  border-color: #a3261f !important;
  box-shadow: 0 0 0 3px rgba(163, 38, 31, .12);
}

/* The honeypot. Off-screen rather than display:none, because some robots skip
   what is hidden and fill in what is not. */
.w2e-trap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.w2e-form__status {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .9375rem;
  line-height: 1.6;
  margin: 1rem 0 0;
  padding: 0;
}

.w2e-form__status:empty {
  display: none;
}

.w2e-form__status.is-good {
  color: #1c5c3a;
  background: rgba(28, 92, 58, .07);
  border-left: 3px solid #1c5c3a;
  padding: .85rem 1rem;
  border-radius: 3px;
}

.w2e-form__status.is-bad {
  color: #a3261f;
  background: rgba(163, 38, 31, .07);
  border-left: 3px solid #a3261f;
  padding: .85rem 1rem;
  border-radius: 3px;
}

/* A disabled send button should look disabled. */
#w2e-contact-form button[disabled] {
  opacity: .6;
  cursor: progress;
}

/* Comfortable to fill in on a phone: nothing under the size at which iOS zooms
   the page in on focus. */
@media (max-width: 640px) {
  #w2e-contact-form input,
  #w2e-contact-form select,
  #w2e-contact-form textarea {
    font-size: 16px;
  }
}

/* ==========================================================================
   Accessibility

   Measured across every page rather than guessed at. Each rule below answers a
   pair that failed WCAG AA at the size it is actually set in, and the identity
   is kept: the gold stays the brand's gold wherever it is large enough to pass,
   and only the small text that could not be read moves to the deeper bronze
   the palette already contains.
   ========================================================================== */

:root {
  /* Gold at eyebrow size — 11 to 14 pixels — needs to be this dark to clear
     4.5:1 on white and on the pale grounds used across the site. */
  --w2e-gold-text: #8a6420;
}

/* Eyebrows and small caps: the page's own .tag, ours, and the numerals in the
   numbered lists, all of which were set in the display gold at 11–14px. */
.w2e-page-hero-content .tag,
.entry-content .tag,
.w2e-home-tag,
.w2e-topics-tag,
.w2e-insight__scale,
.w2e-svc-row .idx,
.w2e-services .idx {
  color: var(--w2e-gold-text, #8a6420) !important;
}

/* The eyebrow that sits on a photograph keeps the light gold: it is read
   against a dark scrim, not against paper. */
.w2e-page-hero .w2e-page-hero-content .tag,
.w2e-hero .tag,
.w2e-hero-inner .tag {
  color: var(--w2e-gold-soft, #e3c68a) !important;
}

/* The gold call to action carried white text at 2.6:1. The gold is the brand's
   and stays exactly as it is; the label becomes navy, which is the pair the
   site already uses everywhere else and clears 5:1.

   Not `.ghost`, and this exclusion matters more than the rule does. The outline
   variant of this button shares the class and has no gold behind it — on the
   home page it sits on a photograph of a city at dusk. Painting its label navy
   made the second of the two calls to action on the site's most important page
   almost invisible, and the `!important` above meant nothing downstream could
   put it right. An accessibility fix aimed at one button had quietly broken
   another one. */
.w2e-cta:not(.ghost),
a.w2e-cta:not(.ghost),
button.w2e-cta:not(.ghost),
.w2e-btn--gold {
  color: var(--w2e-navy, #00335a) !important;
  font-weight: 700;
}

.w2e-cta:not(.ghost):hover,
a.w2e-cta:not(.ghost):hover,
button.w2e-cta:not(.ghost):hover {
  color: var(--w2e-navy-deep, #002440) !important;
}

/* The outline variant, over a photograph: white, with a border it can be seen
   against, and a weight that matches its filled twin. */
.w2e-cta.ghost,
a.w2e-cta.ghost {
  color: #fff;
  font-weight: 700;
  border-color: rgba(255, 255, 255, .55);
}

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

/* The floating WhatsApp button: white on the light green is 2:1. WhatsApp's own
   darker green keeps it recognisable and clears the bar. */
.w2e-whatsapp,
a.w2e-whatsapp {
  background: #128c7e !important;
}

/* Estatik's own label colours. "Distress deal" was white on a light green at
   2.25:1. Only the label pills are restyled — the price badges beside them
   keep the grey they already had, so the row does not turn into a wall of
   navy and the label stays the thing that catches the eye. */
.es-badges--rounded .es-badge:not(.call-for-price):not(.es-badge--normal):not(.w2e-on-application),
.es-badge--label,
.es-label {
  background: var(--w2e-navy, #00335a) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   A visible focus ring

   The theme removes the outline from links, which leaves anyone working from a
   keyboard with no idea where they are. This puts one back — only for keyboard
   focus, so a mouse click does not draw a box round everything it touches.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--w2e-gold, #c99a49) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* On a dark ground the gold ring would disappear; white reads on both. */
.w2e-hero a:focus-visible,
.w2e-hero button:focus-visible,
.w2e-page-hero a:focus-visible,
.w2e-footer a:focus-visible,
.w2e-cta-band a:focus-visible,
.w2e-mobile-panel a:focus-visible,
.w2e-drawer a:focus-visible {
  outline-color: #fff !important;
}

/* The skip link should be reachable and visible when it is reached. */
.w2e-skip:focus,
.skip-link:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 100000;
  background: var(--w2e-navy, #00335a);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 3px;
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
}

/* --------------------------------------------------------------------------
   Targets big enough to hit

   The carousel dots are eight pixels across. The dot stays the size it is; the
   area that answers to a finger grows around it.
   -------------------------------------------------------------------------- */

.slick-dots li {
  position: relative;
}

.slick-dots li button {
  position: relative;
}

.slick-dots li button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   Reading on a phone

   Nothing below fourteen pixels in running text, and enough line height that a
   long paragraph does not close up.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .w2e-page p,
  .w2e-topic__text p,
  .w2e-insight__text {
    font-size: max(0.9375rem, 15px);
    line-height: 1.7;
  }

  .w2e-mark__name,
  .w2e-topic__figure figcaption,
  .w2e-insight__source {
    font-size: .8125rem;
  }
}

/* Someone who has asked their machine for less movement should get it. */
@media (prefers-reduced-motion: reduce) {
  .w2e-reveal,
  .w2e-home-pillar,
  .w2e-mark img {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   The newsletter box
   -------------------------------------------------------------------------- */

.w2e-newsletter button,
.w2e-newsletter [type="submit"] {
  color: var(--w2e-navy, #00335a) !important;
  font-weight: 700;
}

.w2e-signup__status {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.55;
  margin: .6rem 0 0;
  flex-basis: 100%;
}

.w2e-signup__status:empty {
  display: none;
}

.w2e-signup__status.is-good {
  color: #9ce0b4;
}

.w2e-signup__status.is-bad {
  color: #ffb4ae;
}

/* ==========================================================================
   The container, and why this selector is shaped the way it is

   Astra ships a blanket reset for page-builder templates:

     .ast-page-builder-template .entry-content[data-ast-blocks-layout]
       > :not(.wp-block-group):where(…) > *  { max-width: none }

   It matches every top-level section inside the page wrapper — every section
   this plugin adds included — and it carries four class-level components, so a
   three-class rule of ours loses to it and every section sprawls the full width
   of the window. On a 1265px screen that reads as "a bit wide". On a 1900px
   screen the text column collapses to a third of the container and the pictures
   fly to the far edge, which is exactly what it was doing.

   body[class] adds an element and an attribute without depending on which body
   classes happen to be present, which is enough to win cleanly. No !important.
   ========================================================================== */

:root {
  --w2e-shell: 1180px;
  --w2e-shell-wide: 1360px;
  --w2e-shell-pad: clamp(1.15rem, 4vw, 2.5rem);
}

body[class] .entry-content .w2e-page > .w2e-topics-wrap,
body[class] .entry-content .w2e-page > .w2e-insights,
body[class] .entry-content .w2e-page > .w2e-shell {
  max-width: var(--w2e-shell);
  margin-inline: auto;
  padding-inline: var(--w2e-shell-pad);
}

body[class] .entry-content .w2e-page > .w2e-shell--wide,
body[class] .entry-content .w2e-page > .w2e-card-grid,
body[class] .entry-content .w2e-page > .w2e-icon-grid,
body[class] .entry-content .w2e-page > .w2e-services,
body[class] .entry-content .w2e-page > .w2e-split,
body[class] .entry-content .w2e-page > .w2e-statement,
body[class] .entry-content .w2e-page > .w2e-intro-split {
  max-width: var(--w2e-shell-wide);
  margin-inline: auto;
}

/* Full-bleed by design: these are meant to run edge to edge. */
body[class] .entry-content .w2e-page > .w2e-cta-band,
body[class] .entry-content .w2e-page > .w2e-footer,
body[class] .entry-content .w2e-page > .w2e-hero {
  max-width: none;
}

/* ==========================================================================
   One hero per page

   The page's own title band has been folded into this one, so the hero now
   carries the eyebrow, the headline, the standfirst and the two buttons, over
   the page's own photograph rather than the same film on every page.
   ========================================================================== */

body.w2e-page-hero .w2e-hero--still {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.w2e-page-hero .w2e-hero--page .w2e-hero-content {
  width: 100%;
}

/* The copy was sitting in a column narrow enough to wrap a headline onto five
   lines while most of a 1900px photograph stayed empty. It gets a real measure
   and a ceiling, and the headline a scale that fits two lines. */
body.w2e-page-hero .w2e-hero--page .w2e-hero-inner {
  max-width: min(46rem, 92%);
  margin-inline: 0;
  padding-inline: 0;
}

body.w2e-page-hero .w2e-hero--page h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 .85rem;
}

body.w2e-page-hero .w2e-hero--page .subhead {
  max-width: 46ch;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
}

.w2e-hero__eyebrow {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--w2e-gold-soft, #e3c68a);
  margin: 0 0 .9rem;
}

.w2e-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.9rem;
}

.w2e-hero__go,
.w2e-hero__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .95rem 1.7rem;
  border-radius: var(--w2e-r, 4px);
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.w2e-hero__go {
  background: var(--w2e-gold, #c99a49);
  color: var(--w2e-navy, #00335a) !important;
  border: 1px solid var(--w2e-gold, #c99a49);
}

.w2e-hero__more {
  background: rgba(255, 255, 255, .07);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(3px);
}

.w2e-hero__go:hover,
.w2e-hero__more:hover { transform: translateY(-1px); }
.w2e-hero__go:active,
.w2e-hero__more:active { transform: scale(.985); }
.w2e-hero__more:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }

@media (max-width: 560px) {
  .w2e-hero__actions { flex-direction: column; align-items: stretch; }
  .w2e-hero__go, .w2e-hero__more { width: 100%; }
}

/* ==========================================================================
   One radius scale

   A pill call-to-action next to a four-pixel card is two systems arguing. The
   site is square-ish: four pixels everywhere, and the buttons match.
   ========================================================================== */

body .entry-content a.w2e-cta,
body .entry-content button.w2e-cta,
.w2e-cta,
.w2e-band-copy + .w2e-cta {
  border-radius: var(--w2e-r, 4px);
}

/* ==========================================================================
   Eyebrow restraint

   Every section on every page carried the same small gold uppercase label, so
   the pages read as one rhythm marker repeated fifteen times. The hero keeps
   its own; inside the page they go, and the headline carries the section.
   ========================================================================== */

body.w2e-page-hero .w2e-page .w2e-topics-tag,
body.w2e-page-hero .w2e-page .w2e-intro-split .tag,
body.w2e-page-hero .w2e-page .w2e-split .tag {
  display: none;
}

/* ==========================================================================
   Emphasis is emphasis, not a highlighter

   The page's own stylesheet paints every <strong> in the display gold. In a
   heading that reads as an accent; in a paragraph or a bullet it turns running
   copy into scattered coloured words — "Free Zone", "Mainland", "help",
   "locations" all lit up mid-sentence — and the page looks broken rather than
   emphasised. Bold text goes back to being bold text; the gold stays where it
   was chosen deliberately.
   ========================================================================== */

body .w2e-page p strong,
body .w2e-page p b,
body .w2e-page li strong,
body .w2e-page li b,
body .w2e-page .w2e-card strong,
body .w2e-page .w2e-card b,
body .w2e-page figcaption strong {
  color: var(--w2e-navy, #00335a);
  font-weight: 600;
}

/* On a dark ground the navy would vanish. */
body .w2e-page .w2e-cta-band p strong,
body .w2e-page .w2e-footer p strong,
body .w2e-page .w2e-statement strong {
  color: inherit;
}

/* --------------------------------------------------------------------------
   The phone-width blowout

   On a 390px phone every one of these pages was laying out at 460px and being
   clipped: about eighty-five pixels of each section — the right-hand end of
   every line — was rendered and then hidden. Nothing looked broken, because
   `overflow-x` was doing its job; the words were simply not there.

   Two causes, both classic:

   1. Astra's page wrapper — `.site.hfeed`, the outermost one, not the content
      column — is a flex item, and a flex item defaults to `min-width: auto`,
      which means it refuses to shrink below the widest thing inside it. One
      fixed-width descendant and the whole document grows. `.site` is the one
      that mattered; the rest of the chain is listed with it because any of them
      can do the same thing when a theme update moves the flex container.

   2. The fixed-width descendant is the page's own opening block, whose grid is
      declared with a 460px minimum track. Below 460px of available space that
      track does not shrink — it overflows. `min(460px, 100%)` is the form that
      does what the author meant.

   Fixed here rather than in the page's own style block because that block is
   inside the content of six different pages, and this file loads on all of
   them.
   -------------------------------------------------------------------------- */

body .site,
body .hfeed,
body .ast-container,
body .site-content,
body #primary,
body .site-main,
body .entry-content,
body .w2e-page {
  min-width: 0;
}

body .w2e-page .w2e-intro-split,
body .entry-content .w2e-intro-split {
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
}

/* Anything else that was given a fixed pixel width and cannot honour it. */
@media (max-width: 520px) {
  body .w2e-page .w2e-intro-split,
  body .entry-content .w2e-intro-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   The closing band, nested three deep.

   The band that ends every page is wrapped inside a copy of itself, twice, so
   its 90px of padding was being applied three times: 540px of empty navy above
   and below two lines of type. The copies are emptied of padding and of their
   background here, and the outer band is brought back to a normal rhythm.

   The duplication itself lives in the page content; this makes the pages right
   now, and the content pass can unwrap them without anything changing visibly.
   -------------------------------------------------------------------------- */

body .w2e-cta-band {
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: clamp(48px, 6vw, 76px);
}

body .w2e-cta-band .w2e-cta-band {
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
}

/* The theme's own logo, wherever it still renders: the artwork is a portrait
   and Astra prints it at its natural height unless told otherwise. */
body .site-header .custom-logo,
body .ast-site-identity .custom-logo {
  max-height: 64px;
  width: auto;
}


/* The closing band moved into the footer, where it now sits directly above the
   directory. The copy inside each page is left in place - hidden, not deleted -
   so the page can be restored from its own content if this is ever undone. */
body .w2e-page > .w2e-cta-band,
body .entry-content > .w2e-cta-band,
body .w2e-cta-band {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Responsive design pass — measured, not guessed.

   1. The mark is a portrait: at the height the header gave it on a phone it was
      29px wide and the words under the tower were unreadable. It gets real
      height on small screens, where it is the only piece of identity on the
      page.

   2. The language pill and the menu button were spread across the bar by
      `space-between` once the menu itself was hidden, so the pill sat alone in
      the middle. They belong together, at the right.

   3. The burger was a 40 x 31 target. 44 x 44 is the smallest a thumb should
      be asked to hit.

   4. The home page's own stylesheet gives two sections 120px of padding top and
      bottom whatever the width: on a 390px screen that is 240px of empty white
      between two blocks of content.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  body .w2e-hero .w2e-nav .w2e-brand img,
  body.w2e-page-hero .w2e-hero--page .w2e-brand img,
  body.w2e-chrome .w2e-header .w2e-brand img {
    height: 80px;
  }

  .w2e-lang--header { margin-left: auto; }

  body .w2e-hero .w2e-nav,
  body.w2e-page-hero .w2e-hero--page .w2e-nav {
    gap: .5rem;
  }

  body .w2e-burger,
  body .w2e-hero .w2e-burger,
  body.w2e-page-hero .w2e-hero--page .w2e-burger {
    width: 44px;
    height: 44px;
  }

  .w2e-lang--header .w2e-lang__button {
    min-height: 42px;
    padding: 10px 14px;
  }
}

@media (max-width: 720px) {
  body .w2e-hero .w2e-nav .w2e-brand img,
  body.w2e-page-hero .w2e-hero--page .w2e-brand img,
  body.w2e-chrome .w2e-header .w2e-brand img {
    height: 72px;
  }
}

@media (max-width: 900px) {
  body .w2e-communities,
  body .w2e-faq-section,
  body .w2e-home-deals,
  body .w2e-home-visa {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }
}

@media (max-width: 600px) {
  body .w2e-communities,
  body .w2e-faq-section,
  body .w2e-home-deals,
  body .w2e-home-visa {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  /* A centred paragraph four lines deep is harder to read than a ranged-left
     one; the heading above it keeps its centre. */
  body .w2e-home-pillars__head .w2e-home-lead,
  body .w2e-home-about__head p {
    text-align: left;
  }
}

/* ==========================================================================
   The developers, at the foot of the property page.

   A quiet grid: the marks are the content, so they get a light field, a lot of
   air and nothing else - no cards with shadows competing with fifteen
   different logo colours. Greyscale at rest so the row reads as one object,
   full colour on hover for the one being looked at.
   ========================================================================== */

.w2e-devs {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(52px, 6vw, 96px) clamp(16px, 4vw, 32px) clamp(56px, 6vw, 92px);
}

/* A hairline above the developers. The blocks at the foot of the property page
   sit one under the other in the same white and otherwise read as one long
   section with several headings in it. */
.w2e-devs__rule {
  max-width: 1240px;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid #e6ebf0;
}

.w2e-devs__head {
  max-width: 720px;
  margin: 0 0 clamp(22px, 2.8vw, 36px);
}

.w2e-devs__eyebrow {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--w2e-gold, #bf953f);
}

.w2e-devs__title {
  margin: 0 0 .6rem;
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.15;
  color: var(--w2e-navy, #00335a);
}

.w2e-devs__lead {
  margin: 0;
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: #4a5764;
}

.w2e-devs__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   One card, one mark, one height

   The first version sized the image with percentages inside a grid tile, and
   percentages do not resolve there: a tall mark - Emaar, Nakheel, Aldar - kept
   its intrinsic height and grew to three times the row, over the caption and
   into the row beneath. Everything here is a fixed pixel height instead, so
   fifteen logos drawn at fifteen different aspect ratios all occupy the same
   optical space whatever the file happens to be.

   The px height also fixes a second fault. These images load lazily, and a
   lazily loaded image whose width and height both compute to `auto` measures
   0x0, never intersects the viewport, and therefore never loads at all.
   -------------------------------------------------------------------------- */
.w2e-devs__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  padding: 18px 22px;
  margin: 0;
  border: 1px solid #e4e9ee;
  border-radius: 12px;
  background: #FFFFFF;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

body .w2e-devs__item img {
  width: 100%;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: .66;
  transition: filter .22s ease, opacity .22s ease;
}

/* See the note in inc/developers.php: a near-square mark gets a taller box so
   it carries the same weight as a long wordmark beside it. */
body .w2e-devs__item--square img {
  height: 64px;
}

.w2e-devs__item:hover {
  border-color: rgba(191, 149, 63, .55);
  box-shadow: 0 10px 24px rgba(0, 51, 90, .1);
  transform: translateY(-2px);
}

.w2e-devs__item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.w2e-devs__note {
  max-width: 760px;
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: #7b8794;
}

@media (max-width: 1100px) {
  .w2e-devs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .w2e-devs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .w2e-devs__item { height: 92px; padding: 14px 16px; }
  body .w2e-devs__item img { height: 40px; }
  body .w2e-devs__item--square img { height: 56px; }
}

@media (max-width: 520px) {
  .w2e-devs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w2e-devs__item { height: 84px; padding: 12px 14px; }
  body .w2e-devs__item img { height: 36px; }
  body .w2e-devs__item--square img { height: 50px; }
}

/* A finger has no hover, so a touch screen gets the marks in colour outright
   rather than a grid that stays grey however hard it is prodded. */
@media (hover: none) {
  body .w2e-devs__item img { filter: grayscale(0); opacity: .95; }
}

/* --------------------------------------------------------------------------
   The emirates, on the property page

   The block moved here from the home page, and it had to bring its clothes
   with it: the tiles were dressed by the inline stylesheet that ships inside
   the home page's own content, and the mosaic rules live in home.css, which is
   enqueued on the front page only. Neither reaches /real-property/.

   So this is a complete set rather than a patch - section, head, mosaic, tile,
   caption, scrim - scoped to `--page` so it cannot reach back and disturb
   anything the home page still owns.
   -------------------------------------------------------------------------- */

body .w2e-communities--page {
  display: block;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 92px) clamp(16px, 4vw, 32px) clamp(8px, 1.5vw, 20px);
}

body .w2e-communities--page .w2e-communities-head {
  max-width: 720px;
  margin: 0 0 clamp(20px, 2.6vw, 34px);
}

body .w2e-communities--page .w2e-communities-head h2 {
  margin: 0 0 .55rem;
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.15;
  color: var(--w2e-navy, #00335a);
}

body .w2e-communities--page .w2e-communities-head p {
  margin: 0;
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: #4a5764;
}

/* Dubai down the left through all three rows, the other three stacked beside
   it. Same proportions the home page used, restated here because the file that
   held them does not load on this page. */
body .w2e-communities--page .w2e-comm-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: repeat(3, 186px);
}

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

body .w2e-communities--page .w2e-comm-grid--3 {
  grid-template-rows: repeat(2, 200px);
}

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

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

body .w2e-communities--page .w2e-comm-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--w2e-navy, #00335a);
  background-size: cover;
  background-position: center;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* The caption sits on a photograph, so it needs its own ground rather than
   luck: a scrim from the bottom edge, strong enough at the baseline to hold
   white type over a lit skyline, gone by halfway up. */
body .w2e-communities--page .w2e-comm-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 22, 40, .82) 0%, rgba(0, 22, 40, .34) 34%, rgba(0, 22, 40, 0) 62%);
  pointer-events: none;
}

body .w2e-communities--page .w2e-comm-card .label,
body .w2e-communities--page .w2e-comm-card .sub {
  position: absolute;
  left: clamp(16px, 1.7vw, 24px);
  right: clamp(16px, 1.7vw, 24px);
  z-index: 2;
  color: #FFFFFF;
}

body .w2e-communities--page .w2e-comm-card .label {
  bottom: 2.05rem;
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: .01em;
}

body .w2e-communities--page .w2e-comm-card .sub {
  bottom: .9rem;
  font-size: .82rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .82);
}

/* The whole tile is the link. The anchor covers it and its text is for screen
   readers and for a browser with no CSS, not for the eye. */
body .w2e-communities--page .w2e-comm-card .w2e-stretch {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  text-indent: -999em;
  white-space: nowrap;
  border: 0;
}

body .w2e-communities--page .w2e-comm-card:hover,
body .w2e-communities--page .w2e-comm-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 22, 40, .22);
}

body .w2e-communities--page .w2e-comm-card:focus-within {
  outline: 2px solid var(--w2e-gold, #bf953f);
  outline-offset: 2px;
}

/* An emirate with no photograph of its own is set as a panel - gold rule,
   name, count - rather than given somebody else's picture. */
body .w2e-communities--page .w2e-comm-card--plain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background-image: none;
}

body .w2e-communities--page .w2e-comm-card--plain::after {
  background: none;
}

body .w2e-communities--page .w2e-comm-card--plain::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 2px;
  margin-bottom: 1rem;
  background: var(--w2e-gold, #bf953f);
}

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

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

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

  body .w2e-communities--page .w2e-comm-card,
  body .w2e-communities--page .w2e-comm-card--lead {
    grid-row: auto;
    grid-column: auto;
    min-height: 208px;
  }

  body .w2e-communities--page .w2e-comm-card--lead {
    min-height: 280px;
  }
}

/* --------------------------------------------------------------------------
   The emirates on a tablet

   Below 860px the mosaic collapsed straight from two columns to one, which on
   a 768px tablet means four full-width tiles and most of a screen of scrolling
   for a block that is meant to be taken in at a glance. Two columns hold
   between 560 and 860; one column starts where one column is genuinely the
   only option.

   Scoped through `.w2e-communities` so it carries the extra class it needs to
   win against the same breakpoint in home.css, and so the block looks the same
   on the home page and on the property page rather than different in each.
   -------------------------------------------------------------------------- */
@media (min-width: 561px) and (max-width: 860px) {
  body .w2e-communities .w2e-comm-grid,
  body .w2e-communities .w2e-comm-grid--3,
  body .w2e-communities .w2e-comm-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  body .w2e-communities .w2e-comm-grid .w2e-comm-card,
  body .w2e-communities .w2e-comm-grid .w2e-comm-card--lead {
    grid-row: auto;
    grid-column: auto;
    min-height: 196px;
  }
}

/* --------------------------------------------------------------------------
   The buying guide

   The client's guide, condensed to seven numbered cards in the same grammar as
   the pillars and the eleven reasons on the home page: gold number, short
   title, two or three lines. The source had seven checklists in it, forty-odd
   bullet points in total; flat, above the listings, that is three screens of
   prose in front of somebody who came to look at a flat.

   Three columns on a wide screen gives 3-3-1. The seventh card is stretched
   across the last row rather than left sitting alone in a third of it.
   -------------------------------------------------------------------------- */

body .w2e-guide {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) clamp(16px, 4vw, 32px) clamp(8px, 1.5vw, 20px);
}

body .w2e-guide__head {
  max-width: 760px;
  margin: 0 0 clamp(22px, 2.8vw, 34px);
}

body .w2e-guide__eyebrow {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--w2e-gold, #bf953f);
}

body .w2e-guide__title {
  margin: 0 0 .8rem;
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.15;
  color: var(--w2e-navy, #00335a);
}

body .w2e-guide__lead {
  margin: 0;
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.7;
  color: #4a5764;
}

body .w2e-guide__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-guide__card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  background: #FFFFFF;
  border: 1px solid rgba(15, 26, 34, .09);
  border-radius: 4px;
  padding: 1.25rem 1.2rem 1.3rem;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

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

/* The odd one out, rather than a gap. */
body .w2e-guide__card:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

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

body .w2e-guide__card h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--w2e-navy, #00335a);
}

body .w2e-guide__card p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.62;
  color: #4a5764;
}

body .w2e-guide__foot {
  max-width: 760px;
  margin: clamp(22px, 2.8vw, 34px) 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--w2e-gold, #bf953f);
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.6;
  color: var(--w2e-navy, #00335a);
}

@media (max-width: 1040px) {
  body .w2e-guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .w2e-guide__card:last-child:nth-child(3n + 1) { grid-column: auto; }
  body .w2e-guide__card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body .w2e-guide__grid { grid-template-columns: minmax(0, 1fr); }
  body .w2e-guide__card:last-child { grid-column: auto; }
}