/**
 * Wosol Theme - Page Section Styles
 *
 * Styles for full-width homepage (and other page) sections:
 * hero, nav, world philosophy, app, map, curated experiences,
 * what we offer, the wosol way, membership CTA, and footer.
 *
 * All values derive from CSS variables in variables.css.
 * Section classes are prefixed with .wosol-* to avoid Astra/plugin collisions.
 */

/* =============================================
   HERO SECTION (homepage)
   Full-viewport intro with background media, overlay, headline,
   subtitle, and CTA button.

   Three stacked layers inside the section:
     0. the element background — poster still, painted immediately
     1. .wosol-hero__video     — autoplaying muted loop, covers layer 0
     2. ::after                — the darkening gradients that keep the
                                 headline legible over either layer
     3. .wosol-hero__inner     — the copy and CTA
   The gradients live on ::after rather than in the inline background so
   they sit above the video as well as the still.
   ============================================= */

.wosol-hero {
  position: relative;
  min-height: 880px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #0a1119;
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  padding: 0 80px 100px;
  overflow: hidden;
}

.wosol-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
  /* Chrome paints a transparent gap for a frame or two while decoding;
     the section background sits behind, so nothing flashes through. */
  background: transparent;
}

.wosol-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(10, 17, 25, 0.12), rgba(16, 26, 40, 0)),
    linear-gradient(0deg, rgba(10, 17, 25, 0.44), rgba(10, 17, 25, 0.44));
}

.wosol-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-hero__content {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.wosol-hero__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 400;
  font-size: 18px;
  color: var(--wosol-cream);
  opacity: 0.9;
  margin: 0 0 24px;
}

.wosol-hero__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 40px;
}

@media (max-width: 768px) {
  .wosol-hero {
    min-height: 640px;
    padding: 0 16px 60px;
  }

  .wosol-hero__title {
    font-size: 40px;
  }

  .wosol-hero__eyebrow {
    font-size: 14px;
  }
}

/* =============================================
   NAV — Figma transparent header
   Pinned over the hero at every width; three-column
   grid: Menu pill · WOSOL logo · Call us pill.
   ============================================= */

.wosol-nav {
  /* Travels with the page instead of scrolling away with the hero, and stays
     put in both directions — the bar is held at every width, never retracted.
     Fixed rather than the sticky the header started as: it sits over the
     hero, so it was already out of flow and nothing below it shifts. */
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 20;
  /* The bar carries no vertical padding of its own — this height is what sets
     the space above and below the 33px logo lock-up, so it is the knob for the
     bar's vertical rhythm. 76px leaves ~21px either side; the hero paddings
     below still reserve the old 100px, which now reads as a little clearance
     under the bar rather than a gap the bar fills. */
  height: 76px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  transition:
    background-color 0.35s ease,
    backdrop-filter 0.35s ease;
}

/* Over the hero the header is transparent; once the page moves it takes the
   footer's ground (--wosol-footer-bg, #041026) so the bar and the footer close
   the page on the same colour, frosted over whatever scrolls under it.
   Written as an rgba() literal rather than the token because the tint needs an
   alpha channel and the token is a plain hex.
   main.js adds .is-scrolled past a small threshold. */
.wosol-nav.is-scrolled {
  /* Opaque fallback first: without backdrop-filter support the translucent
     tint alone is too thin to hold white labels over light content. */
  background-color: var(--wosol-footer-bg);
}

/* -webkit- prefix included for iOS/Safari before 18, still a large share of
   this site's traffic — unprefixed alone leaves those users the flat fallback. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wosol-nav.is-scrolled {
    background-color: rgba(4, 16, 38, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}

.wosol-nav__inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.wosol-nav__menu {
  justify-self: start;
}

.wosol-nav__call {
  justify-self: end;
}

/* Nav pills must appear as borderless label chips, not buttons (Figma 17426:124255) */
.wosol-nav__menu,
.wosol-nav__call {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 8px 12px;
  gap: 4px;
  line-height: 20px;
  border-radius: 100px;
  /* Set in CSS rather than in the labels themselves so the customizer and
     the .po files keep the human-cased strings. Arabic has no case, so this
     is a no-op on /ar/. Tracking stays on .wosol-btn's --letter-spacing-wide;
     anything wider pushes the CTA into the logo on a 320px screen. */
  text-transform: uppercase;
}

.wosol-nav__logo {
  justify-self: center;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .wosol-nav {
    padding: 0 16px;
    /* Logo drops to 72px wide / ~27px tall here, so the same tightening leaves
       ~16px either side — the floor before the pills start to feel boxed in. */
    height: 60px;
  }

  /* Equal 1fr side columns mirror the widest pill onto both sides, and
     "Become a Member" is far wider than "Menu": below ~470px that pushed the
     CTA past the viewport and took the whole page into horizontal scroll.
     Anchor the two chips to the gutters instead and centre the logo on the
     viewport, so the mark keeps the comp's centred position at every width. */
  .wosol-nav__inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  /* Physical left/translateX rather than the logical pair: the mark is
     centred on the viewport, which is the same place in both directions. */
  .wosol-nav__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .wosol-nav__menu,
  .wosol-nav__call {
    flex: 0 0 auto;
  }

  /* layout.css still dresses a long-gone ul.wosol-nav__menu as an off-canvas
     drawer below 1023px (width: 100%, flex-direction: column). Those rules
     also match this button, which is what stretched it across the header and
     stacked "Menu" under the icon. Undo them here rather than in layout.css,
     which template-parts/header/navigation.php may still render. */
  .wosol-nav__menu {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 8px;
  }

  /* Borderless chip: its own padding is all that sits between the label and
     the nav's 16px gutter, so drop it and let the gutter do the spacing. */
  .wosol-nav__call {
    padding: 8px 0;
  }
}

/* Phone widths — the logo is centred and fixed at 71px, so the CTA has only
   (viewport - 71) / 2 to live in. Wrapping it to two lines buys that room
   back; on one line it runs into the mark below ~360px. */
@media (max-width: 480px) {
  .wosol-nav__menu,
  .wosol-nav__call {
    font-size: 12px;
  }

  .wosol-nav__call {
    max-width: 88px;
    /* .wosol-btn is nowrap by default — this is the whole point of the tier. */
    white-space: normal;
    /* Centred, not end-aligned: the two lines are of unlike length, and a
       ragged edge beside the gutter read as a layout slip. */
    text-align: center;
    line-height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wosol-nav {
    transition: none;
  }
}

/* =============================================
   WORLD PHILOSOPHY SECTION (homepage)
   Image left / text right on cream-tint background.
   Figma node 17426:124266
   ============================================= */

.wosol-world {
  background: var(--wosol-cream-tint);
  border-bottom: 1px solid var(--wosol-border-hairline);
  padding: 100px 80px;
}

.wosol-world__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: 80px;
  align-items: center;
}

.wosol-world__media img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: var(--wosol-radius-image);
  display: block;
}

.wosol-world__title {
  font-family: var(--wosol-font-serif);
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 16px 0 24px;
}

.wosol-world__copy p {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(16, 26, 40, 0.8);
  margin: 0 0 16px;
}

@media (max-width: 900px) {
  .wosol-world {
    padding: 60px 16px;
  }

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

  .wosol-world__media img {
    height: auto;
  }

  .wosol-world__title {
    font-size: 32px;
  }
}

/* =============================================
   WOSOL APP SECTION — Figma node 17426:124276
   "Luxury Concierge. Always Within Reach."
   Text left / iPhone mockups right.
   ============================================= */

/* No bottom padding: the artwork runs off the bottom of the section on
   purpose, so the bottom edge is defined by the render, not by padding.
   `overflow: hidden` clips to the padding box — with the padding at 0
   that lands exactly on the border-bottom hairline, which is what does
   the cutting. The mobile block puts the padding back, since the stacked
   layout shows the render whole. */
.wosol-app {
  background: var(--wosol-cream);
  border-bottom: 1px solid var(--wosol-border-hairline);
  padding: 100px 80px 0;
  overflow: hidden;
}

/* Figma row 17426:124277 — a 604px text column and a 479px mockup frame
   sitting at either end of the 1280px container, 197px apart. Both the
   columns and the gap are expressed as fractions of that 1280px so the
   whole row keeps its Figma proportions as the container narrows. */
.wosol-app__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 604fr) minmax(0, 479fr);
  column-gap: 15.378%;
  /* = 197 / 1280 */
  align-items: center;
}

/* Figma node 17426:124278 — a 16px rhythm between every stacked block.

   The bottom margin re-centres the copy. `align-items: center` centres it
   in the grid *row*, but the row is no longer symmetric within the
   section: the bleed took the section's bottom padding to 0 while the top
   stayed at 100px, which left the block sitting 50px — half the top
   padding — below the section's optical centre. Giving the block a bottom
   margin equal to the missing padding balances its margin box, and the
   content lands back on the section's centre line. It stays shorter than
   the mockup frame either way, so the row height is unaffected. */
.wosol-app__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  margin-bottom: 100px;
}

.wosol-app__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-app__lede {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(16, 26, 40, 0.8);
  margin: 0;
}

.wosol-app__badges {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.wosol-app__badge img {
  display: block;
  height: 44px;
  width: auto;
}

/* Mockup column: one exported render of both devices (560 x 789 native),
   deliberately cut off by the section's bottom border.

   The frame is sized to the *visible* 80% of the render — 789 x 0.8 =
   631.2 — and the art is pinned to its top at full width, so the
   remaining 20% spills past the frame and out of the section, where
   `overflow: hidden` clips it on the border-bottom hairline.

   Because the frame is the tallest thing in the row it sets the row
   height, and because the section has no bottom padding the frame's
   bottom edge *is* the section's bottom edge. That keeps the cut at
   exactly 20% at every container width — the ratio is proportional, so
   there is no fixed offset to drift.

   Nothing here is directional, so RTL needs no override: the art is
   100% of the frame's width, which makes left and right identical. The
   render is never flipped either way, since the screens hold real UI text. */
.wosol-app__mockups {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 560 / 631.2;
  min-width: 0;
  margin-inline: auto;
}

.wosol-app__art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
}

@media (max-width: 900px) {
  .wosol-app {
    padding: 60px 16px;
  }

  .wosol-app__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .wosol-app__title {
    font-size: 32px;
  }

  /* Stacked, and the section's padding is symmetric again, so the
     re-centring margin would just add dead space under the copy. */
  .wosol-app__body {
    margin-bottom: 0;
  }

  /* Stacked: the bleed is a desktop composition — cutting the render in
     half under the text would just look broken — so the frame goes back
     to a plain responsive image and the art is shown whole. The render is
     taller than it is wide, so it is held well below its native 560px to
     keep the section from dominating the scroll. */
  .wosol-app__mockups {
    aspect-ratio: auto;
    max-width: 380px;
    margin: 0 auto;
    justify-self: center;
  }

  .wosol-app__art {
    position: static;
    width: 100%;
  }
}

/* =============================================
   WORLD MAP SECTION (homepage) — Figma node 17426:124313
   Cream section background with a dark navy rounded card
   containing the dotted world-map SVG + city names row.
   Header sits above the card on the cream bg.
   ============================================= */

.wosol-map {
  background: var(--wosol-cream-tint);
  color: var(--wosol-ink);
  padding: 100px 80px;
}

.wosol-map__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Figma header row: 604 (left) + 32 gap + 644 (right), bottom-aligned,
   130px total tall. Below the header row: 80px of empty section bg,
   then the dark card starts. */
.wosol-map__header {
  display: grid;
  grid-template-columns: 604px 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 80px;
}

.wosol-map__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 16px 0 0;
}

.wosol-map__lede {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(16, 26, 40, 0.8);
  margin: 0;
}

/* Kept for backward compatibility with any lingering markup;
   on-dark modifier no longer needed since the whole section is light. */
.wosol-eyebrow--on-dark {
  color: var(--wosol-gold);
}

.wosol-map__card {
  /* Graduated top to bottom, and only just: #000815 to #000b19 is three points
     of blue across the whole card. It is meant to be felt as depth behind the
     map rather than seen as a gradient — at this delta any banding is below
     what an 8-bit ramp can show over 475px, so it needs no dithering.

     Both stops are deeper and cooler than --wosol-ink, which is why they are
     spelled out rather than borrowed from the token; the zoom chrome below
     carries its one step up from the card's own value.

     Note this is the ground the artwork's own inks composite against. The land
     is opaque #17202d so it is unaffected, but the coastline, its spread and
     the country seams are all in the .10-.20 range, so they now land on a
     darker floor than the #05111f they were pitched against and read a touch
     dimmer. The colours in tools/generate-world-map.py reference #05111f in
     their reasoning; that note is stale by these three points. */
  background: linear-gradient(180deg, #000815 0%, #000b19 100%);
  border-radius: 16px;
  overflow: hidden;
  /* Positioning context for the zoom controls, which sit in the card rather
     than in the plane — parked in the plane they would zoom along with it. */
  position: relative;
  /* An even inset on all four edges. Percentages resolve against the card's
     width on every side, so the gap is visually equal rather than merely
     equal-in-its-own-axis, and it scales with the breakpoint.

     Because the artwork is cropped tight to the land (LAT_TOP 83.8 /
     LAT_BOTTOM -56.6 leave 0px above the northernmost land and 3px below the
     southernmost) the land itself lands on this inset — there is no interior
     whitespace of its own adding to it, which is why this reads as the whole
     margin and why tightening it gives the map real estate immediately. */
  padding: 2%;
}

.wosol-map__figure {
  margin: 0;
}

.wosol-map__figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center top;
}

/* Cities row sits BELOW the dark card on the cream section bg.

   The rail is the scroll container and the <ul> inside it is the track. Two
   elements rather than one because the row carries a fade-up reveal and the
   names repeat: the reveal's transform belongs on something that is not itself
   scrolling, and the repeated names have to be flex siblings of the originals
   for the loop to be seamless.

   overflow-y is pinned to hidden rather than left at its initial value. A box
   with overflow-x: auto computes visible to auto on the other axis, and the
   focus ring on a city name overflows the line by a couple of pixels — enough
   to put a vertical scrollbar on a 40px-tall row. */
.wosol-map__rail {
  margin: 24px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* The names run under the section's own edges rather than stopping at them:
     a hard cut at both ends reads as clipped text, a fade reads as a row that
     continues past the frame. 64px is about two characters' worth of travel at
     the marquee's speed, so a name is legible again well before it is centred. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  /* The row scrolls itself, so the bar is chrome on an animation rather than an
     affordance — and on the platforms that show one permanently it would sit
     under the names as a grey line across the section. Swipe, trackpad, drag
     and keyboard focus all still scroll it. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* The row loops, so there is no end of the list to bounce against — and a
     horizontal overscroll on a trackpad would otherwise be read as a back
     gesture and take the page with it. */
  overscroll-behavior-x: contain;
  /* reset.css puts smooth scrolling on html. It does not inherit, but this is
     one place where inheriting it would be quietly fatal: every frame of the
     marquee is a scroll position being set, and each one would start its own
     easing rather than land. */
  scroll-behavior: auto;
  /* The row can be picked up and thrown. The names set their own pointer
     cursor on top of this, so the affordance reads as "drag the row, click a
     name" rather than one or the other. */
  cursor: grab;
}

.wosol-map__rail::-webkit-scrollbar {
  display: none;
}

/* Held. The cursor is forced onto the descendants too, or the row would still
   be showing a text caret and a pointer finger while it is being dragged. */
.wosol-map__rail.is-dragging,
.wosol-map__rail.is-dragging * {
  cursor: grabbing;
}

.wosol-map__rail.is-dragging {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.wosol-map__cities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  /* No wrapping and no space-between: this is one continuous line whose width
     is its content's, which is what gives the rail something to scroll. */
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  width: max-content;
  /* Was 8px, when the row was justified across the full width and the space
     between names came from space-between rather than from the gap. A marquee
     has no such distribution to lean on, so the gap now carries the whole
     rhythm of the row. */
  gap: 48px;
}

.wosol-map__cities li {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--wosol-ink);
  white-space: nowrap;
  /* Astra gives every list item 4px of margin-bottom and takes it back on
     :last-child. In a centred flex line that makes the last city — and only
     the last — sit 2px below the rest of the row. The row does its own
     spacing. */
  margin-bottom: 0;
}

/* The city names were plain text before they became buttons, and they still
   have to look like plain text — the row is a quiet index, not a toolbar. So
   the button strips its own chrome entirely and the only affordance is the
   rule that grows underneath on hover, focus and selection. No accent colour
   in any of those states — the row keeps its own ink throughout.

   Cities with no coordinates stay unwrapped text: there is nowhere to fly to,
   and a dead button would read as broken. */
.wosol-map__city {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: opacity 200ms ease;
}

/* Astra ships bare `button:hover` and `button:focus` rules that repaint any
   real button: white text on --ast-global-color-1 (a blue), plus a border.
   These city names ARE real buttons, so stripping that chrome at rest is not
   enough — the parent rules win again the moment you point at one, and the
   name goes white on cream inside a blue pill.
   :focus is neutralised alongside :focus-visible deliberately: a city keeps
   focus after it is clicked, so without it the blue pill stays behind on the
   selected name. */
.wosol-map__city:hover,
.wosol-map__city:focus,
.wosol-map__city:focus-visible {
  color: inherit;
  background: none;
  border-color: transparent;
  box-shadow: none;
}

/* Dim to match the rest of the theme's text links — .wosol-menu__link uses
   the same 0.6, so a city name now answers the pointer the way every other
   piece of clickable text on the site does. The underline is this row's own
   addition on top; the fade is what makes it feel like the same product.

   Deliberately not on plain :focus. The clicked city stays focused while you
   look at the map, and a permanently dimmed label would read as disabled. */
.wosol-map__city:hover,
.wosol-map__city:focus-visible {
  opacity: 0.6;
}

/* The rule wipes in from the leading edge rather than fading up. A fade puts
   the whole line on at once, which reads as a state being toggled; a wipe
   reads as a response to the pointer, and it costs nothing extra because
   transform is the one property that animates without touching layout. */
.wosol-map__city::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wipe from the right in Arabic, so the line still grows away from the start
   of the word rather than back toward it. */
[dir="rtl"] .wosol-map__city::after {
  transform-origin: right center;
}

.wosol-map__city:hover::after,
.wosol-map__city:focus-visible::after,
.wosol-map__city.is-active::after {
  transform: scaleX(1);
}

/* Selection stays in the row's own ink — no accent colour. Hover and selected
   would then be indistinguishable on the rule alone, so selected takes a
   heavier rule and a slightly heavier face instead. Weight and thickness carry
   the state; nothing here depends on colour, which is what keeps it legible
   for anyone who cannot separate the two. */
.wosol-map__city.is-active {
  font-weight: 400;
}

.wosol-map__city.is-active::after {
  height: 2px;
}

.wosol-map__city:focus-visible {
  outline: 2px solid var(--wosol-ink);
  outline-offset: 4px;
  border-radius: 2px;
}

/* There is no wrapping breakpoint any more. The row used to justify itself
   across the inner and wrap below ~1300px, because the sixteen cities it ships
   with need ~1230px on one line and a line wider than the viewport put ~130px
   of horizontal scroll on the whole page. A rail answers both at once: the line
   is as long as it likes, and the overflow is the rail's own rather than the
   document's. The width is still Customizer copy and still unbounded, which is
   exactly why it now lives in a scroll container. */
@media (max-width: 900px) {
  .wosol-map {
    padding: 60px 16px;
  }

  .wosol-map__header {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }

  .wosol-map__title {
    font-size: 32px;
  }

  .wosol-map__card {
    border-radius: 12px;
  }

  /* The fade is proportionally much wider on a phone than on a desktop, so it
     comes in to roughly one name's width. */
  .wosol-map__rail {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }

  /* Tighter than the desktop 48px: on a 360px screen a 48px gap spends a
     seventh of the viewport on emptiness between two names. */
  .wosol-map__cities {
    gap: 32px;
  }

  /* At 14px the names give a 23px-tall hit area, well under the 44px a thumb
     needs. Padding buys the height without changing how the row looks, and the
     underline is pushed back down by the same amount so it stays on the text
     rather than floating below the padding. */
  .wosol-map__city {
    padding: 11px 0;
  }

  .wosol-map__city::after {
    bottom: 7px;
  }
}

/* Flat world map — sits inside .wosol-map__card.

   The artwork (assets/images/world-map-flat.svg) is stretched to fill this
   box exactly — it carries preserveAspectRatio="none" for that — and every
   pin is placed at a percentage of the same box, so the two stay registered
   at any width. That only holds while the box keeps the artwork's aspect
   ratio — do not give .wosol-map__plane a fixed height, and do not switch
   the image to object-fit: cover. */
.wosol-map__plane {
  position: relative;
  width: 100%;
  /* Taller than the artwork's own 1217:396. The 5% padding above would
     otherwise cost the map height, so this buys it back and then some: 475 is
     where the latitude scale matches the longitude scale, i.e. true
     equirectangular for the cropped range ((83.8 + 56.6) x 1217/360 = 475).
     The artwork carries preserveAspectRatio="none" so it fills this box, and
     the markers are placed as percentages of the same box, so stretching it
     keeps every marker on its city. Lower the 475 toward 396 to squash the
     latitudes back down. */
  aspect-ratio: 1217 / 475;
  padding: 0;
  /* No tilt, no perspective: the map lies flat in the card.

     Zoom and pan live entirely in these three custom properties, and their
     defaults are identity: with no JavaScript this resolves to
     translate(0px, 0px) scale(1) and the section renders as the flush still
     it was built as. assets/js/world-map.js writes nothing but these three.
     --pan-x / --pan-y carry px units because they land inside translate().
     Custom properties inherit, which is how each marker reads --zoom to
     cancel it out again below. */
  transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1));
  transform-origin: 50% 50%;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  /* One finger stays with the browser so a visitor scrolling past the map on
     a phone is never trapped. world-map.js claims two-finger gestures only. */
  touch-action: pan-y;
}

/* While a drag or pinch is in flight the map must track the pointer exactly,
   so the easing that makes button zooms feel considered is taken back out. */
.wosol-map__plane.is-tracking {
  transition: none;
}

/* There is nothing to pan until the map is zoomed in, so the grab affordance
   only appears then. world-map.js owns the modifier on the section. */
.wosol-map--zoomed .wosol-map__plane {
  cursor: grab;
}

.wosol-map--zoomed .wosol-map__plane.is-tracking {
  cursor: grabbing;
}

.wosol-map__plane:focus-visible {
  outline: 1px solid var(--wosol-gold);
  /* Inset, because the plane is flush with the card and an outset ring would
     be clipped by the card's overflow: hidden. */
  outline-offset: -2px;
}

/* Zoom controls — created by world-map.js, so a page without JavaScript shows
   no dead buttons. Reading edge in LTR, mirrored for RTL. */
.wosol-map__zoom {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wosol-map__zoom button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--wosol-gold) 40%, transparent);
  border-radius: 50%;
  /* A step up from the card, so the buttons read as chrome resting on the map
     rather than as holes cut in it — the blur behind them is what keeps the
     continents visible through the lift. #131d29 was one step over the card's
     old flat #05111f; against the darker gradient it now stands further off,
     which reads as more chrome, not less. Left as is deliberately — pull it
     toward #0a1420 if the controls start to float. */
  background: color-mix(in srgb, #131d29 70%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--wosol-gold);
  font-family: var(--wosol-font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.wosol-map__zoom button:hover:not(:disabled),
.wosol-map__zoom button:focus-visible {
  background: color-mix(in srgb, var(--wosol-gold) 18%, #131d29);
  border-color: var(--wosol-gold);
  outline: none;
}

.wosol-map__zoom button:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 900px) {
  .wosol-map__zoom {
    inset-inline-end: 8px;
    bottom: 8px;
    gap: 4px;
  }

  .wosol-map__zoom button {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
}

.wosol-map__plane-art {
  display: block;
  width: 100%;
  height: 100%;
}

/* Pin layer. Percentages come from inc/world-map.php via --x / --y. */
.wosol-map__pins {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wosol-map__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* Cancel the plane's zoom so a marker keeps the size it was designed at
     while the map grows underneath it — at 3x an uncancelled 6px core would
     paint 18px and its 39px halo 117px. The counter-scale comes AFTER the
     centring translate, so the anchor point stays exactly on the city. */
  transform: translate(-50%, -50%) scale(calc(1 / var(--zoom, 1)));
  /* Must match the plane's transition exactly. The two transforms cancel each
     other out, so if they interpolate on different curves — or one of them
     not at all — the markers visibly shrink and then get caught up as the map
     arrives. Change one duration or easing and you must change both. */
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 0;
}

/* Same reason the plane drops its easing while tracking: during a drag or
   pinch the marker has to cancel the zoom of the frame being painted now. */
.wosol-map__plane.is-tracking .wosol-map__pin {
  transition: none;
}

/* City marker, from Figma node I17426:124394 — three coats of the same gold,
   stacked smallest to widest:
     the dot        a 6px taupe core, the only opaque part
     ::before       a hard 7px bloom right at the rim (the comp's drop shadow,
                    a 3.5 stdDeviation Gaussian, which is ~7px of CSS blur)
     ::after        a 39px radial falloff, gone by 70% of the radius
   The core is deliberately NOT gold: in the comp it is the same taupe as the
   map ink, and the gold arrives entirely as light around it. Painting the core
   gold instead flattens the marker into a plain dot. */
.wosol-map__pin-dot {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9d958c;
}

.wosol-map__pin-dot::before,
.wosol-map__pin-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wosol-map__pin-dot::before {
  width: 6px;
  height: 6px;
  background: #b8965a;
  filter: blur(3.5px);
}

/* Widest coat, and the one that carries the breathing. Scaling only this
   layer leaves the core and its rim bloom untouched, so the marker reads as
   light pooling and thinning rather than a dot changing size. */
.wosol-map__pin-dot::after {
  width: 39px;
  height: 39px;
  background: radial-gradient(circle closest-side,
              rgba(200, 169, 106, 0.18) 0%,
              rgba(200, 169, 106, 0) 70%);
  animation: wosol-pin-glow 4200ms ease-in-out infinite;
}

@keyframes wosol-pin-glow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.82); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1); }
}

/* ------- Selected city -------
   Set when a city button below the map is clicked. The marker has to read as
   "here" from across the card, so the core goes bright against the slate land
   and the halo stops breathing and holds open — a marker that is still
   pulsing reads as one of the crowd. */
.wosol-map__pin.is-active .wosol-map__pin-dot {
  background: #f4ede1;
  box-shadow: 0 0 0 2px rgba(184, 150, 90, 0.95);
}

.wosol-map__pin.is-active .wosol-map__pin-dot::after {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.3);
  background: radial-gradient(circle closest-side,
              rgba(200, 169, 106, 0.45) 0%,
              rgba(200, 169, 106, 0) 70%);
}

/* ------- Previewed city -------
   Set while a city name below the map is hovered or focused, WITHOUT moving
   the map. Hovering the row is how you discover that the names and the
   markers are the same ten things; making that link visible before the click
   is most of the value. Lighter touch than .is-active — the halo opens and
   the name tag appears, but the core keeps its resting colour, so a preview
   can never be mistaken for the current selection. */
.wosol-map__pin.is-hovered .wosol-map__pin-dot::after {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
}

.wosol-map__pin.is-hovered .wosol-map__pin-name {
  opacity: 1;
  visibility: visible;
}

/* Name tag for the selected city. It sits inside .wosol-map__pin so it
   inherits the marker's counter-scale and stays at its designed size however
   far the map is zoomed. visibility, not just opacity, so it is never a
   transparent hit target — and the pin list is aria-hidden, so this is
   reinforcement only; the button below the map carries the real name. */
.wosol-map__pin-name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(9, 20, 35, 0.94);
  color: var(--wosol-cream);
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.wosol-map__pin.is-active .wosol-map__pin-name {
  opacity: 1;
  visibility: visible;
}

/* Stagger the breathing so the cities are never in unison. */
.wosol-map__pin:nth-child(2n) .wosol-map__pin-dot::after { animation-delay: 840ms; }
.wosol-map__pin:nth-child(3n) .wosol-map__pin-dot::after { animation-delay: 1680ms; }
.wosol-map__pin:nth-child(4n) .wosol-map__pin-dot::after { animation-delay: 2520ms; }
.wosol-map__pin:nth-child(5n) .wosol-map__pin-dot::after { animation-delay: 3360ms; }

/* The map keeps its aspect ratio at every width, so it gets short on
   phones — shrink the markers and their glow with it rather than letting
   them crowd. */
@media (max-width: 900px) {
  .wosol-map__pin-dot,
  .wosol-map__pin-dot::before {
    width: 5px;
    height: 5px;
  }

  .wosol-map__pin-dot::after {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 480px) {
  .wosol-map__pin-dot,
  .wosol-map__pin-dot::before {
    width: 4px;
    height: 4px;
  }

  .wosol-map__pin-dot::after {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Hold the glow at its fullest rather than mid-breath. */
  .wosol-map__pin-dot::after {
    animation: none;
    opacity: 1;
  }

  /* Zoom and pan still work — they just arrive rather than travel. Both, or
     the markers would ease while the map jumps. Flying to a city still works
     too; it simply arrives, name tag and all. */
  .wosol-map__plane,
  .wosol-map__pin,
  .wosol-map__pin-name,
  .wosol-map__city,
  .wosol-map__city::after {
    transition: none;
  }
}

/* =============================================
   CURATED EXPERIENCES SECTION (homepage)
   Cream background, gold eyebrow, centered serif h2.
   Wide-banner carousel: each card fills viewport width minus
   section padding, with a small peek of the next card on the right.
   Figma node 17426:127590 — cards are 1280x320 (4:1), gap 24.
   ============================================= */

.wosol-curated {
  background: var(--wosol-cream);
  border-bottom: 1px solid var(--wosol-border-hairline);
  padding: 120px 0 120px 80px;
  overflow: hidden;
}

/* Carousel starts at the reading-start edge; mirror asymmetric padding in RTL */
[dir="rtl"] .wosol-curated {
  padding: 120px 80px 120px 0;
}

.wosol-curated__inner {
  max-width: none;
}

.wosol-curated__header {
  padding-inline-end: 80px;
  text-align: center;
  margin-bottom: 64px;
}

.wosol-curated__title {
  font-family: var(--wosol-font-serif);
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 16px 0 0;
}

.wosol-curated__grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-inline-end: 80px;
  scroll-padding-inline-start: 0;
}

.wosol-curated__grid::-webkit-scrollbar {
  display: none;
}

.wosol-curated__card {
  /* Figma spec (node 18620:29515): 4 cards @ 628 × 383 with 24px gap,
     so on desktop 2 cards fit fully inside the 1280 content area plus
     a small peek of the 3rd on the right. */
  flex: 0 0 min(628px, calc((100vw - 184px) / 2));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The rounded, clipping frame ("Rectangle" in Figma) — it exists so the
   hover zoom is clipped by the image box alone, leaving the caption below
   outside the clip and flush with the image's leading edge. It also hosts the
   hover scrim and light sweep (animations.css), which is what position and
   isolation are for: both are pseudo-elements stacked over the image, and the
   isolation keeps their z-indexes from competing with anything outside. */
.wosol-curated__media {
  position: relative;
  width: 100%;
  aspect-ratio: 628 / 320;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}

.wosol-curated__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wosol-curated__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wosol-curated__card-title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-curated__card-caption {
  font-family: var(--wosol-font-caption);
  font-weight: 300;
  font-size: 14px;
  line-height: normal;
  color: var(--wosol-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .wosol-curated {
    padding: 80px 0 80px 24px;
  }

  [dir="rtl"] .wosol-curated {
    padding: 80px 24px 80px 0;
  }

  .wosol-curated__header {
    padding-inline-end: 24px;
  }

  .wosol-curated__grid {
    padding-inline-end: 24px;
  }

  .wosol-curated__card {
    flex-basis: calc(100vw - 48px);
  }

  /* The desktop 628×320 banner gets too letterboxed once a card spans the
     whole viewport, so the media frame takes a taller crop on small screens. */
  .wosol-curated__media {
    aspect-ratio: 3 / 2;
  }
}

/* =============================================
   WHAT WE OFFER SECTION (homepage)
   Cream-tint background, gold eyebrow, serif h2,
   3-column image-card grid with CURATED COLLECTION kicker.
   Figma node 17426:127615
   ============================================= */

.wosol-offer {
  background: var(--wosol-cream-tint);
  border-bottom: 1px solid var(--wosol-border-hairline);
  padding: 100px 80px;
}

.wosol-offer__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-offer__header {
  text-align: center;
  margin-bottom: 56px;
}

.wosol-offer__title {
  font-family: var(--wosol-font-serif);
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 16px 0 0;
}

.wosol-offer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.wosol-offer__card {
  display: flex;
  flex-direction: column;
}

/* Media frame — the counterpart of .wosol-curated__media and
   .wosol-services-card__media, added so these tiles can carry the same hover
   treatment clipped to the picture. The radius, hairline and the 24px gap
   below moved here off the <img>: the frame is the picture box now, and the
   card itself no longer clips, so the kicker and title below sit flush with
   the image edge the way they do in the other two sections. */
.wosol-offer__media {
  position: relative;
  display: block;
  /* The 438px moved off the <img> onto the frame so the tile keeps exactly the
     height it had: border-box put the hairline inside the image's 438px, and
     leaving it on the image would have added the 2px border on top instead. */
  height: 438px;
  border-radius: 10px;
  border: 1px solid var(--wosol-image-border);
  overflow: hidden;
  isolation: isolate;
  background: var(--wosol-cream-tint);
  margin-bottom: 24px;
}

.wosol-offer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card text sits at regular, not semibold — the tiles read as an even set
   against the section header rather than competing with it. */
.wosol-offer__kicker {
  font-family: var(--wosol-font-sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--wosol-gold-2);
  letter-spacing: 3px;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.wosol-offer__card-title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: var(--wosol-ink);
  margin: 0;
}

@media (max-width: 900px) {
  .wosol-offer {
    padding: 60px 16px;
  }

  .wosol-offer__grid {
    grid-template-columns: 1fr;
  }

  /* One tile per row here, so the fixed 438px crop gives way to the image's
     own ratio. Released on the frame, since that is what carries the height. */
  .wosol-offer__media,
  .wosol-offer__img {
    height: auto;
  }
}

/* =============================================
   THE WOSOL WAY — 3-step method section
   Cream background, gold Roman numerals, 3-column grid
   with vertical hairlines between steps.
   Figma node 17426:127638
   ============================================= */

.wosol-way {
  background: var(--wosol-cream);
  padding: 120px 80px;
}

.wosol-way__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-way__header {
  text-align: start;
  margin-bottom: 64px;
}

.wosol-way__title {
  font-family: var(--wosol-font-serif);
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 16px 0 0;
}

.wosol-way__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  position: relative;
}

.wosol-way__grid>.wosol-way__step+.wosol-way__step {
  border-inline-start: 1px solid var(--wosol-border-hairline);
  padding-inline-start: 48px;
}

.wosol-way__numeral {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 48px;
  color: var(--wosol-gold);
  margin: 0 0 12px;
}

.wosol-way__step-title {
  font-family: var(--wosol-font-serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--wosol-ink);
  margin: 0 0 12px;
}

.wosol-way__step-body {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(16, 26, 40, 0.8);
  margin: 0;
}

@media (max-width: 900px) {
  .wosol-way {
    padding: 60px 16px;
  }

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

  .wosol-way__grid>.wosol-way__step+.wosol-way__step {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid var(--wosol-border-hairline);
    padding-top: 32px;
  }
}

/* =============================================
   MEMBERSHIP CTA SECTION (homepage)
   Dark background image with rgba(17,36,59,0.56) overlay.
   Centered eyebrow, serif h2, body, two pill CTAs.
   Figma node 17426:127660
   ============================================= */

.wosol-membership {
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 120px 80px;
  text-align: center;
}

.wosol-membership__inner {
  max-width: 872px;
  margin: 0 auto;
}

.wosol-membership__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: #ffffff;
  margin: 16px 0 24px;
}

.wosol-membership__lede {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 40px;
}

.wosol-membership__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .wosol-membership {
    padding: 80px 16px;
  }

  .wosol-membership__title {
    font-size: 30px;
  }
}

/* =============================================
   FOOTER
   Dark ink background, 5-column grid (Brand + 3 nav + newsletter),
   gold column headings, cream text, pill email form.
   ============================================= */

.wosol-footer {
  background: var(--wosol-footer-bg);
  color: var(--wosol-cream);
  padding: 120px 100px 80px;
}

/* Explicit column widths from the comp (286 / 130 / 130 / 130 / 320) with the
   leftover distributed between them, rather than fr units — the brand and
   contact columns are fixed in the design and only the gutters flex. */
.wosol-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 286px 130px 130px 130px 320px;
  justify-content: space-between;
  gap: 40px;
  align-items: start;
}

.wosol-footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* The lock-up centres on itself and the block sits left in the column. */
.wosol-footer__logo {
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  align-self: flex-start;
}

/* The lock-up is one supplied asset (assets/images/wosol-logo.png, 344x131 so
   it stays crisp to 4x) rather than the Poppins pair it replaces. Size on
   width, not height: the header grid centres on this box and the mobile pills
   are laid out around it, so width is the dimension the layout depends on.
   86px is what the type lock-up measured, which keeps every surrounding
   breakpoint exactly where it was; height follows the asset's 2.63:1. */
.wosol-nav__logo-img,
.wosol-footer__logo-img {
  display: block;
  width: 86px;
  height: auto;
}

/* Declared after the shared sizing above, not beside the other nav
   breakpoints: same specificity, so source order is what decides. */
@media (max-width: 768px) {
  .wosol-nav__logo-img {
    width: 72px;
  }
}

/* Serif, not the sans the rest of the footer uses — the comp sets this line in
   Cormorant Garamond Light 18px. */
.wosol-footer__tagline {
  font-family: var(--wosol-font-serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);
  margin: 0;
}

.wosol-footer__badges {
  display: flex;
  gap: 16px;
  align-items: center;
}

.wosol-footer__badges img {
  display: block;
}

.wosol-footer__heading {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.5;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.wosol-footer__col--nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wosol-footer__col--nav ul li {
  margin: 0;
}

.wosol-footer__col--nav a {
  color: rgba(250, 249, 247, 0.70);
  text-decoration: none;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  display: inline-block;
}

.wosol-footer__col--nav a:hover {
  color: #ffffff;
}

/* Five lines spread over the column, matching the comp's justify-between. */
.wosol-footer__col--contact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  align-self: stretch;
}

.wosol-footer__contact-line {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(250, 249, 247, 0.70);
  margin: 0;
}

.wosol-footer__contact-line a {
  color: inherit;
  text-decoration: none;
}

.wosol-footer__contact-line a:hover {
  color: #ffffff;
}

.wosol-footer__bottom {
  max-width: 1240px;
  margin: 80px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(250, 249, 247, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wosol-footer__copy {
  font-family: var(--wosol-font-sans);
  font-weight: 400;
  font-size: 12px;
  color: rgba(250, 249, 247, 0.40);
  margin: 0;
}

.wosol-footer__social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 24px;
}

.wosol-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(250, 249, 247, 0.40);
  text-decoration: none;
  transition: color 0.2s ease;
}

.wosol-footer__social-link:hover,
.wosol-footer__social-link:focus-visible {
  color: rgba(250, 249, 247, 0.90);
}

.wosol-footer__social-icon {
  display: block;
}

@media (max-width: 900px) {
  .wosol-footer {
    padding: 60px 16px 24px;
  }

  .wosol-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .wosol-footer__col--brand {
    grid-column: 1 / -1;
  }

  .wosol-footer__col--contact {
    grid-column: 1 / -1;
  }

  .wosol-footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* =============================================
   OUR STORY — contact page
   Figma node 18604:24012
   Collage left (340 primary + 236 secondary over a stat card), copy right.
   ============================================= */

.wosol-story {
  background: var(--wosol-cream);
  padding: 120px 80px;
}

.wosol-story__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: 80px;
  align-items: center;
}

/* 340 + 24 gutter + 236 = the comp's 600px collage. */
.wosol-story__media {
  display: grid;
  grid-template-columns: 340fr 236fr;
  gap: 24px;
  align-items: start;
}

.wosol-story__media-primary,
.wosol-story__media-secondary {
  margin: 0;
}

.wosol-story__media-primary img,
.wosol-story__media-secondary img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--wosol-radius-image);
  display: block;
}

.wosol-story__media-primary img {
  aspect-ratio: 340 / 520;
}

.wosol-story__media-secondary img {
  aspect-ratio: 236 / 320;
}

.wosol-story__media-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Fills the height left beside the taller primary image, so the two columns
   bottom out together. */
.wosol-story__stat {
  background: var(--wosol-cream-tint);
  border-radius: var(--wosol-radius-image);
  padding: 20px;
  flex: 1;
}

.wosol-story__stat-value {
  font-family: var(--wosol-font-serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 0 0 4px;
}

.wosol-story__stat-label {
  font-family: var(--wosol-font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-story__title {
  font-family: var(--wosol-font-serif);
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 16px 0 24px;
}

.wosol-story__copy p {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(16, 26, 40, 0.8);
  margin: 0 0 20px;
}

.wosol-story__copy p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .wosol-story {
    padding: 60px 16px;
  }

  .wosol-story__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* =============================================
   OUR VALUES — contact page
   Figma node 18604:24012, inside comp 18603:158506
   One portrait image left, copy right closing on the office address.
   Distinct from .wosol-story above, which /about/ still renders.
   ============================================= */

.wosol-contact-values {
  background: var(--wosol-cream);
  border-bottom: 1px solid var(--wosol-border-hairline);
  padding: clamp(56px, 8vw, 120px) clamp(16px, 5.5vw, 80px);
}

/* 404 + 751 = the comp's two columns; space-between spreads the 125px the
   1280 content box has left over. minmax lets both shrink before the
   single-column breakpoint rather than overflowing. */
.wosol-contact-values__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 404px) minmax(0, 751px);
  justify-content: space-between;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.wosol-contact-values__media {
  margin: 0;
}

.wosol-contact-values__media img {
  width: 100%;
  aspect-ratio: 404 / 560;
  object-fit: cover;
  border-radius: var(--wosol-radius-image);
  display: block;
}

.wosol-contact-values__title {
  font-family: var(--wosol-font-serif);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 16px 0 32px;
}

.wosol-contact-values__copy p {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(16, 26, 40, 0.8);
  margin: 0 0 20px;
}

.wosol-contact-values__copy p:last-child {
  margin-bottom: 0;
}

/* Icon column is 24px wide like the comp's box, though the pin itself is the
   18 x 21.73 leaf that box centres. */
.wosol-contact-values__address {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 32px 0 0;
  font-family: var(--wosol-font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(16, 26, 40, 0.8);
}

.wosol-contact-values__address-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--wosol-gold);
}

@media (max-width: 900px) {
  .wosol-contact-values__inner {
    grid-template-columns: 1fr;
  }

  /* Copy first on a phone: the address is the payload, and 560px of image
     above it pushes everything below the fold. */
  .wosol-contact-values__media {
    order: 2;
  }

  .wosol-contact-values__media img {
    aspect-ratio: 3 / 2;
  }
}

/* =============================================
   FLOATING "DOWNLOAD APP" PILL — contact page
   Figma node 18603:158577
   ============================================= */

.wosol-app-pill {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 50; /* over the page, under the menu overlay (100) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--wosol-radius-pill);
  /* A touch lighter than --wosol-navy, as the comp has it. */
  background: #16304e;
  border: 1px solid var(--wosol-gold);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(4, 16, 38, 0.28);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.wosol-app-pill:hover,
.wosol-app-pill:focus-visible {
  background: var(--wosol-ink);
  color: #ffffff;
  transform: translateY(-2px);
}

.wosol-app-pill__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.wosol-app-pill__label {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

[dir="rtl"] .wosol-app-pill {
  right: auto;
  left: 32px;
}

@media (max-width: 600px) {
  .wosol-app-pill {
    right: 16px;
    bottom: 16px;
    padding: 10px 18px;
  }

  [dir="rtl"] .wosol-app-pill {
    right: auto;
    left: 16px;
  }

  .wosol-app-pill__label {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wosol-app-pill {
    transition: background-color 0.2s ease;
  }

  .wosol-app-pill:hover,
  .wosol-app-pill:focus-visible {
    transform: none;
  }
}

/* =============================================
   MEMBERSHIP ENQUIRY FORM
   Figma nodes 18603:158746 / 18603:158930
   Heading trio over a white card: tier tabs, per-tier field panel,
   consent row, full-width submit.
   ============================================= */

.wosol-mship-enq {
  background: var(--wosol-cream);
  padding: clamp(56px, 8vw, 120px) clamp(16px, 5.5vw, 80px);
}

.wosol-mship-enq__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-mship-enq__head {
  margin-bottom: clamp(28px, 5vw, 64px);
}

.wosol-mship-enq__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0 0 16px;
}

.wosol-mship-enq__title {
  font-family: var(--wosol-font-serif);
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 0 0 16px;
}

.wosol-mship-enq__desc {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;
  color: rgba(16, 26, 40, 0.7);
  max-width: 62ch;
  margin: 0;
}

/* The card is inset from the section's 1280 content width, matching the
   comp's 1120 form card centred inside it. */
.wosol-mship-enq__card {
  max-width: 1120px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: 12px;
  padding: clamp(20px, 3.2vw, 40px);
}

/* ---- Tabs ---- */

.wosol-mship-form__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.wosol-mship-form__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--wosol-ink);
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* The radio carries the state and the keyboard behaviour; it is the label
   that is styled, so the input itself is visually removed but not hidden
   from assistive tech or from focus. */
.wosol-mship-form__tab input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.wosol-mship-form__tab.is-active {
  background: var(--wosol-ink);
  border-color: var(--wosol-ink);
  color: #ffffff;
}

.wosol-mship-form__tab:focus-within {
  outline: 2px solid var(--wosol-navy);
  outline-offset: 2px;
}

/* ---- Fields ---- */

.wosol-mship-form__row {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.wosol-mship-form__row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wosol-mship-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-bottom: 20px;
}

.wosol-mship-form__row .wosol-mship-form__field {
  margin-bottom: 0;
}

.wosol-mship-form__label {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wosol-ink);
}

.wosol-mship-form__req {
  color: var(--wosol-gold);
}

.wosol-mship-form__field input,
.wosol-mship-form__field select,
.wosol-mship-form__field textarea {
  width: 100%;
  min-height: 50px;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.45;
  color: var(--wosol-ink);
  background: #ffffff;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: 8px;
  padding: 13px 16px;
}

.wosol-mship-form__field textarea {
  min-height: 100px;
  resize: vertical;
}

/* Left at the UA default, iOS Safari draws its own control here: its own
   caret, its own text metrics, its own fill — so these read as system fields
   sitting among themed ones, and the caret does not mirror in Arabic. Taking
   the appearance off and drawing the caret ourselves is what the theme's other
   selects already do (components.css .wosol-form__select); the glyph matches
   the country picker's, which sits in this same card. */
.wosol-mship-form__field select:not(.wosol-cc__native) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23101A28' stroke-opacity='0.45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px 6px;
  padding-inline-end: 40px;
  appearance: none;
  -webkit-appearance: none;
}

/* background-position has no logical form, so the caret side is flipped here. */
[dir="rtl"] .wosol-mship-form__field select:not(.wosol-cc__native) {
  background-position: left 16px center;
}

.wosol-mship-form__field input:focus,
.wosol-mship-form__field select:focus,
.wosol-mship-form__field textarea:focus {
  outline: none;
  border-color: var(--wosol-navy-2);
  box-shadow: 0 0 0 4px rgba(18, 38, 62, 0.08);
}

/* Country picker sized to its content, number takes the rest. */
.wosol-mship-form__tel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
}

.wosol-mship-form__error {
  font-family: var(--wosol-font-sans);
  font-size: 12px;
  color: #b3261e;
  min-height: 0;
}

.has-error input,
.has-error select,
.has-error textarea,
.has-error .wosol-cc__trigger {
  border-color: #b3261e;
}

/* ---- Country dial-code picker ----
   Enhanced from the native select by assets/js/country-select.js. Every rule
   here is scoped under .wosol-cc so it outranks the .wosol-mship-form__field
   input/select rules above, which would otherwise size the picker's own
   search box like a form field. */

.wosol-cc {
  position: relative;
  min-width: 0;
}

/* The select stays the value and stays in the tab-switch enable/disable
   sweep, so it is clipped rather than removed. Without the script it is the
   control, unclipped and fully usable. */
.wosol-mship-form__field select.wosol-cc__native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
}

.wosol-cc .wosol-cc__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 108px;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--wosol-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--wosol-ink);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wosol-cc .wosol-cc__trigger:focus-visible,
.wosol-cc.is-open .wosol-cc__trigger {
  outline: none;
  border-color: var(--wosol-navy-2);
  box-shadow: 0 0 0 4px rgba(18, 38, 62, 0.08);
}

.wosol-cc__flag {
  font-size: 17px;
  line-height: 1;
  flex: none;
}

.wosol-cc__flag[hidden] {
  display: none;
}

/* Dial codes read left-to-right whichever way the page runs. */
.wosol-cc__dial,
.wosol-cc__code {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wosol-cc__caret {
  flex: none;
  margin-inline-start: auto;
  color: rgba(16, 26, 40, 0.45);
  transition: transform 0.2s ease;
}

.wosol-cc.is-open .wosol-cc__caret {
  transform: rotate(180deg);
}

/* The trigger's visible text is a dial code; the country it stands for is
   what it actually means, so the name rides along off-screen. */
.wosol-cc__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.wosol-cc .wosol-cc__panel {
  position: absolute;
  z-index: 40;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  width: max(280px, 100%);
  background: #ffffff;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: 10px;
  box-shadow: 0 20px 44px rgba(16, 26, 40, 0.16);
  overflow: hidden;
}

.wosol-cc.is-above .wosol-cc__panel {
  top: auto;
  bottom: calc(100% + 6px);
}

.wosol-cc__search-wrap {
  padding: 10px;
  border-bottom: 1px solid var(--wosol-border-hairline);
}

.wosol-cc .wosol-cc__search {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.45;
  color: var(--wosol-ink);
  background: #ffffff;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: 6px;
}

.wosol-cc .wosol-cc__search:focus {
  outline: none;
  border-color: var(--wosol-navy-2);
  box-shadow: 0 0 0 3px rgba(18, 38, 62, 0.08);
}

.wosol-cc__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.wosol-cc__group {
  padding: 10px 10px 6px;
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wosol-muted);
}

.wosol-cc__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--wosol-ink);
}

/* Filtering sets the hidden property on rows and headings. The UA's
   [hidden] { display: none } is outranked by the display above, so each
   element that sets display has to opt back out explicitly. */
.wosol-cc__option[hidden],
.wosol-cc__group[hidden],
.wosol-cc__empty[hidden] {
  display: none;
}

.wosol-cc__option.is-active {
  background: rgba(18, 38, 62, 0.06);
}

.wosol-cc__option[aria-selected="true"] {
  font-weight: 600;
}

.wosol-cc__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wosol-cc__code {
  flex: none;
  color: var(--wosol-muted);
}

.wosol-cc__empty {
  margin: 0;
  padding: 18px 14px;
  font-family: var(--wosol-font-sans);
  font-size: 13px;
  color: var(--wosol-muted);
  text-align: center;
}

/* Only ever shown behind the phone-sized sheet, below. */
.wosol-cc__backdrop {
  display: none;
}

/* ---- Consent + submit ---- */

.wosol-mship-form__consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  margin: 12px 0 32px;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(16, 26, 40, 0.7);
  cursor: pointer;
}

.wosol-mship-form__consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
}

/* The error sits under both columns rather than beside the checkbox. */
.wosol-mship-form__consent .wosol-mship-form__error {
  grid-column: 1 / -1;
}

.wosol-mship-form__submit {
  display: block;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  background: var(--wosol-ink);
  color: #ffffff;
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 15px;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wosol-mship-form__submit:hover:not(:disabled) {
  background: var(--wosol-navy);
}

.wosol-mship-form__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.wosol-mship-form__fine-print {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: var(--wosol-muted);
  text-align: center;
  margin: 16px 0 0;
}

.wosol-mship-form__success p {
  font-family: var(--wosol-font-serif);
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.5;
  color: var(--wosol-ink);
  text-align: center;
  margin: 0;
  padding: 40px 0;
}

/* ---- Responsive ----
   Paired columns hold until the card is too narrow to keep the phone field
   usable beside a neighbour; the tier tabs hold longer, since two short
   labels still fit where two full fields no longer do. */

@media (max-width: 820px) {
  .wosol-mship-form__row--two {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 16px is the threshold below which iOS zooms the page on focus. */
  .wosol-mship-form__field input,
  .wosol-mship-form__field select,
  .wosol-mship-form__field textarea,
  .wosol-cc .wosol-cc__trigger {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .wosol-mship-form__tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .wosol-mship-form__row,
  .wosol-mship-form__field {
    margin-bottom: 16px;
  }

  .wosol-mship-form__row {
    gap: 16px;
  }

  .wosol-mship-form__consent {
    margin-bottom: 24px;
  }
}

/* On a phone the dropdown becomes a sheet: a 240-row list has nowhere to go
   inside a 110px-wide field, and anchoring it to the trigger would put it
   under the keyboard as often as not. */
@media (max-width: 600px) {
  .wosol-cc.is-open .wosol-cc__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(16, 26, 40, 0.45);
  }

  .wosol-cc .wosol-cc__panel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1001;
    width: auto;
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 40px rgba(16, 26, 40, 0.22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .wosol-cc__list {
    max-height: min(52vh, 380px);
  }

  .wosol-cc .wosol-cc__search {
    min-height: 44px;
    font-size: 16px;
  }
}

/* =============================================
   ABOUT PAGE
   Figma node 18603:159003
   Hero -> Our Story (shared) -> Approach -> Values -> Promise -> Journey
   ============================================= */

.wosol-about-hero {
  position: relative;
  min-height: 880px;
  /* Photo URL comes in as --wosol-about-hero-img from the template. The scrim
     dips to 0.06 around the reef band, then deepens over the copy — the lower
     half of the shot is near-white sand and would sink the text otherwise. */
  background-image:
    linear-gradient(180deg,
      rgba(10, 17, 25, 0.36) 0%,
      rgba(10, 17, 25, 0.06) 24%,
      rgba(10, 17, 25, 0.44) 46%,
      rgba(10, 17, 25, 0.62) 74%,
      rgba(10, 17, 25, 0.66) 100%),
    linear-gradient(90deg, rgba(10, 17, 25, 0.36) 0%, rgba(10, 17, 25, 0.36) 100%),
    var(--wosol-about-hero-img);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 100px 24px 180px;
}

.wosol-about-hero__inner {
  max-width: 880px;
  width: 100%;
  text-align: center;
}

.wosol-about-hero__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 20px;
}

.wosol-about-hero__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.18;
  color: #ffffff;
  margin: 0 0 24px;
}

.wosol-about-hero__lede {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 680px;
  margin: 0 auto;
}

/* ---- Approach ---- */

.wosol-about-approach {
  background: var(--wosol-cream-tint);
  padding: 120px 80px;
}

.wosol-about-approach__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-about-approach__head {
  text-align: center;
  margin-bottom: 80px;
}

.wosol-about-approach__eyebrow,
.wosol-about-values__eyebrow,
.wosol-about-journey__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0 0 16px;
}

.wosol-about-approach__title,
.wosol-about-values__title,
.wosol-about-journey__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-about-approach__lede {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(16, 26, 40, 0.7);
  max-width: 760px;
  margin: 16px auto 0;
}

/* Six columns so a row of three (2 each) and a row of two (3 each) share one
   grid — see the $is_tail note in about-approach.php. */
.wosol-about-approach__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
}

.wosol-about-approach__card {
  grid-column: span 2;
  background: #ffffff;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: 12px;
  padding: 32px;
  min-height: 240px;
}

.wosol-about-approach__card.is-wide {
  grid-column: span 3;
}

.wosol-about-approach__num {
  display: block;
  font-family: var(--wosol-font-serif);
  font-size: 28px;
  line-height: 1;
  color: var(--wosol-gold);
  margin-bottom: 40px;
}

.wosol-about-approach__card-title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  color: var(--wosol-ink);
  margin: 0 0 12px;
}

.wosol-about-approach__card-desc {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(16, 26, 40, 0.7);
  margin: 0;
}

/* ---- Values ---- */

.wosol-about-values {
  background: var(--wosol-cream);
  padding: 120px 80px;
}

.wosol-about-values__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-about-values__head {
  margin-bottom: 64px;
}

.wosol-about-values__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

/* The rule above each value is the border, not a separate element. */
.wosol-about-values__item {
  border-top: 1px solid var(--wosol-gold);
  padding-top: 24px;
}

.wosol-about-values__item-title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wosol-ink);
  margin: 0 0 16px;
}

.wosol-about-values__item-desc {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(16, 26, 40, 0.7);
  margin: 0;
}

/* ---- Promise ---- */

.wosol-about-promise {
  background: var(--wosol-ink);
  color: #ffffff;
  padding: 100px 80px;
}

.wosol-about-promise__inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.wosol-about-promise__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0 0 16px;
}

.wosol-about-promise__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 24px;
}

.wosol-about-promise__body {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 880px;
  margin: 0 auto;
}

/* ---- Journey ---- */

.wosol-about-journey {
  background: var(--wosol-cream);
  padding: 120px 80px;
}

.wosol-about-journey__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-about-journey__head {
  text-align: center;
  margin-bottom: 80px;
}

.wosol-about-journey__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.wosol-about-journey__marker {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0 0 24px;
}

.wosol-about-journey__step-title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  color: var(--wosol-ink);
  margin: 0 0 12px;
}

.wosol-about-journey__step-desc {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(16, 26, 40, 0.7);
  margin: 0;
}

/* Tracking breaks Arabic cursive joining. */
[dir="rtl"] .wosol-about-hero__eyebrow,
[dir="rtl"] .wosol-about-approach__eyebrow,
[dir="rtl"] .wosol-about-values__eyebrow,
[dir="rtl"] .wosol-about-values__item-title,
[dir="rtl"] .wosol-about-journey__eyebrow,
[dir="rtl"] .wosol-about-promise__eyebrow {
  letter-spacing: normal;
}

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

@media (max-width: 900px) {
  .wosol-about-hero {
    min-height: 560px;
    padding: 100px 16px 80px;
    /* At 560px the copy spans most of the section, so the desktop scrim's light
       trough would sit behind text. Flatten it and hold a floor of ~0.46. */
    background-image:
      linear-gradient(180deg,
        rgba(10, 17, 25, 0.5) 0%,
        rgba(10, 17, 25, 0.46) 30%,
        rgba(10, 17, 25, 0.58) 70%,
        rgba(10, 17, 25, 0.66) 100%),
      linear-gradient(90deg, rgba(10, 17, 25, 0.36) 0%, rgba(10, 17, 25, 0.36) 100%),
      var(--wosol-about-hero-img);
  }

  .wosol-about-hero__title {
    font-size: 34px;
  }

  .wosol-about-approach,
  .wosol-about-values,
  .wosol-about-journey {
    padding: 60px 16px;
  }

  .wosol-about-promise {
    padding: 60px 16px;
  }

  .wosol-about-approach__grid,
  .wosol-about-values__grid,
  .wosol-about-journey__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wosol-about-approach__card,
  .wosol-about-approach__card.is-wide {
    grid-column: auto;
    min-height: 0;
  }

  .wosol-about-approach__title,
  .wosol-about-values__title,
  .wosol-about-journey__title,
  .wosol-about-promise__title {
    font-size: 28px;
  }
}

/* =============================================
   LEGAL PAGES (privacy policy, terms)
   Compact photographic header over a single prose column. Styles are
   element-level inside .wosol-legal__inner because the body is authored in
   the WP editor, which emits bare <h2>/<p>/<ul> with no classes to hook.
   ============================================= */

/* Darkened photograph rather than the cream band this used to be: the site
   header sits over it and paints its logo and pills white with no light
   variant, so a pale hero erased them. The image and its overlay are set
   inline by template-parts/pages/legal-page.php. Copy stays start-aligned —
   this is a document header, not one of the centred marketing heroes. */
.wosol-legal-hero {
  position: relative;
  min-height: 420px;
  background-color: var(--wosol-ink);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  /* Top padding clears the 76px fixed nav with room to spare. */
  padding: 160px 80px 72px;
}

.wosol-legal-hero__inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.wosol-legal-hero__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 16px;
}

.wosol-legal-hero__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}

.wosol-legal-hero__meta {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  margin: 16px 0 0;
}

.wosol-legal {
  background: var(--wosol-cream);
  padding: 80px 80px 120px;
}

/* Contents rail beside the copy. The prose column is capped rather than
   fluid — long legal text needs a readable measure more than it needs the
   full grid width. */
.wosol-legal__layout {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px minmax(0, 760px);
  gap: 80px;
  justify-content: center;
}

/* Without the rail the prose still centres on its own measure. */
.wosol-legal__layout > .wosol-legal__inner:only-child {
  grid-column: 1 / -1;
  margin: 0 auto;
}

.wosol-legal__toc {
  position: sticky;
  /* Clears the 76px fixed nav plus a little breathing room. */
  top: 140px;
  align-self: start;
}

.wosol-legal__toc-title {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0 0 20px;
}

.wosol-legal__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: legal-section;
}

.wosol-legal__toc-list li {
  counter-increment: legal-section;
  margin: 0;
}

.wosol-legal__toc-list a {
  display: block;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(16, 26, 40, 0.6);
  text-decoration: none;
  padding: 9px 0 9px 16px;
  border-inline-start: 1px solid var(--wosol-border-hairline);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wosol-legal__toc-list a::before {
  content: counter(legal-section, decimal-leading-zero) "  ";
  color: var(--wosol-gold);
  opacity: 0.7;
}

.wosol-legal__toc-list a:hover,
.wosol-legal__toc-list a:focus-visible {
  color: var(--wosol-ink);
  border-inline-start-color: var(--wosol-gold);
}

/* Set by assets/js/legal-toc.js as the reader moves through the page. */
.wosol-legal__toc-list a.is-current {
  color: var(--wosol-ink);
  border-inline-start-color: var(--wosol-ink);
}

.wosol-legal__inner {
  min-width: 0;
}

/* Anchored headings land clear of the fixed nav instead of under it. */
.wosol-legal__inner h2 {
  scroll-margin-top: 130px;
}

.wosol-legal__inner h2:focus {
  outline: none;
}

.wosol-legal__inner h2 {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  color: var(--wosol-ink);
  margin: 48px 0 12px;
}

.wosol-legal__inner h2:first-child {
  margin-top: 0;
}

.wosol-legal__inner h3 {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  color: var(--wosol-ink);
  margin: 32px 0 8px;
}

.wosol-legal__inner p,
.wosol-legal__inner li {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(16, 26, 40, 0.8);
}

.wosol-legal__inner p {
  margin: 0 0 20px;
}

.wosol-legal__inner ul,
.wosol-legal__inner ol {
  margin: 0 0 20px;
  padding-inline-start: 22px;
}

.wosol-legal__inner li {
  margin-bottom: 8px;
}

.wosol-legal__inner a {
  color: var(--wosol-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wosol-legal__inner a:hover {
  color: var(--wosol-ink);
}

/* The terms open with a definitions table. Scrolls inside its own box so a
   long definition never widens the page. */
.wosol-legal__inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(16, 26, 40, 0.8);
}

.wosol-legal__inner thead th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wosol-ink);
  background: var(--wosol-cream-tint);
}

.wosol-legal__inner th,
.wosol-legal__inner td {
  border: 1px solid var(--wosol-border-hairline);
  padding: 12px 14px;
  text-align: start;
  vertical-align: top;
}

/* First column is the defined term — keep it narrow and unbroken. */
.wosol-legal__inner tbody td:first-child {
  width: 26%;
  font-weight: 500;
  color: var(--wosol-ink);
}

/* Precedence note above the English translation. */
.wosol-legal__inner .wosol-legal__notice {
  background: var(--wosol-cream-tint);
  border-inline-start: 3px solid var(--wosol-gold);
  border-radius: 4px;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 40px;
}

/* Closing newsletter line — set apart from the policy body above it. */
.wosol-legal__inner .wosol-legal__closing {
  border-top: 1px solid var(--wosol-border-hairline);
  margin-top: 48px;
  padding-top: 32px;
  font-size: 15px;
  color: var(--wosol-muted);
}

[dir="rtl"] .wosol-legal-hero__eyebrow {
  letter-spacing: normal;
}

@media (max-width: 1100px) {
  /* Rail moves above the copy and stops sticking — a sticky block on a short
     viewport eats most of the screen. */
  .wosol-legal__layout {
    grid-template-columns: minmax(0, 760px);
    gap: 48px;
  }

  .wosol-legal__toc {
    position: static;
  }
}

@media (max-width: 900px) {
  .wosol-legal-hero {
    /* Nav shrinks to 60px here, and the shorter hero keeps the photograph
       from taking the whole screen before any copy shows. */
    min-height: 300px;
    padding: 120px 16px 48px;
  }

  .wosol-legal-hero__title {
    font-size: 30px;
  }

  .wosol-legal {
    padding: 48px 16px 72px;
  }

  .wosol-legal__inner h2 {
    font-size: 22px;
  }

  .wosol-legal__inner table {
    display: block;
    overflow-x: auto;
    white-space: normal;
  }

  .wosol-legal__inner tbody td:first-child {
    width: auto;
    min-width: 110px;
  }
}

/* =============================================
   MENU PANEL
   Figma node 17476:115845 (panel spec) and 17516:155361 (in-context)
   Desktop: fixed left panel (~612px wide, full viewport height).
   Mobile:  full-screen (inset:0).
   ============================================= */

.wosol-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #ffffff;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

/* Menu slides in from the start side; reverse in RTL */
[dir="rtl"] .wosol-menu {
  transform: translateX(8px);
}

.wosol-menu[data-open="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wosol-menu[hidden] {
  display: none;
}

.wosol-menu__inner {
  height: 100%;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Desktop: constrain to a start-anchored panel per Figma. */
@media (min-width: 768px) {
  .wosol-menu {
    inset-inline-end: auto;
    width: 25vw;
    box-shadow: 0 30px 60px rgba(16, 26, 40, 0.15);
  }
}

/* Close row and language toggle share the top line; the nav sits below it. */
.wosol-menu__head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.wosol-menu__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.wosol-menu button.wosol-menu__close,
.wosol-menu .wosol-menu__close {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: transparent;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
  color: #000000;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  text-transform: none;
  letter-spacing: normal;
}

.wosol-menu button.wosol-menu__close:hover,
.wosol-menu button.wosol-menu__close:focus,
.wosol-menu button.wosol-menu__close:focus-visible {
  background: transparent;
  background-color: transparent;
  color: #000000;
  outline: none;
  box-shadow: none;
}

.wosol-menu button.wosol-menu__close:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 4px;
}

.wosol-menu__close-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.wosol-menu__close-label {
  display: inline-block;
}

.wosol-menu__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wosol-menu__link {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.48;
  /* Figma's brand colour on these items (#041026) is the theme's navy. */
  color: var(--wosol-navy);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.wosol-menu__link:hover {
  opacity: 0.6;
}

.wosol-menu__lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wosol-menu__lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: #000000;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.wosol-menu__lang-btn.is-active {
  background: #f1f1f1;
}

.wosol-menu__lang-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* The panel's single action, pinned to its foot by __inner's space-between.
   Terms and Privacy used to end the panel; they now live only in the footer. */
.wosol-menu__cta {
  display: flex;
  flex-direction: column;
}

/* .wosol-btn--navy already carries the design's border and skeuomorphic
   shadow; only the label metrics differ from the site-wide button. */
.wosol-menu__cta .wosol-btn {
  padding: 10px 16px;
  font-size: 16px;
  line-height: 24px;
  /* Same all-caps treatment as the header chip this button mirrors; caps at
     normal tracking read cramped, so the site-wide button spacing comes back. */
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

body.wosol-menu-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .wosol-menu__inner {
    padding: 32px;
  }

  .wosol-menu__link {
    font-size: 20px;
  }
}

/* =============================================
   SERVICES HERO — Figma node 17426:127712
   Aerial coastal bg, dual gradient overlay,
   centered flex column: h1 + subhead + two CTAs.
   ============================================= */

.wosol-services-hero {
  position: relative;
  height: 420px;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding-top reserves the nav strip (76px, plus clearance) so `center`
     centres the copy in the space that is actually left, not in the full
     420px. */
  justify-content: center;
  padding-top: 100px;
}

.wosol-services-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 0 24px;
  max-width: 760px;
  width: 100%;
}

.wosol-services-hero__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

.wosol-services-hero__title-lead,
.wosol-services-hero__title-rest {
  display: block;
}

.wosol-services-hero__title-lead {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.wosol-services-hero__subhead {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff;
  opacity: 0.9;
  width: 680px;
  max-width: 100%;
  margin: 0;
}

@media (max-width: 768px) {
  .wosol-services-hero {
    height: auto;
    min-height: 320px;
    padding: 100px 16px 40px;
  }

  .wosol-services-hero__title {
    font-size: 32px;
    white-space: normal;
  }

  .wosol-services-hero__subhead {
    width: auto;
    font-size: 14px;
  }
}

/* =============================================
   SERVICES SEARCH & FILTER — Figma node 17426:127727
   Beige band with search input row + chip row.
   ============================================= */

.wosol-services-filter {
  background: #efebe7;
  border-top: 1px solid #d9dde2;
  border-bottom: 1px solid #d9dde2;
  padding: 60px 80px 40px;
}

.wosol-services-filter__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Search row */
/* One full-width search box now that the Sort & Filter pill is gone. */
.wosol-services-filter__search-row {
  display: flex;
  align-items: center;
}

/* Search box — Figma node 17426:127729. Rectangular text box with
   subtle hairline border. Not a pill — 8px radius per new spec. */
.wosol-services-filter__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #d9dde2;
  border-radius: 8px;
  padding: 16px 24px;
  cursor: text;
}

/* Warm grey per Figma, not the cool #8a9099 the rest of the UI chrome uses. */
.wosol-services-filter__search-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #9d958c;
}

.wosol-services-filter__input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--wosol-font-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--wosol-ink);
  padding: 0;
}

/* Higher-specificity override to beat Astra's generic input reset —
   including focus/hover/active, all of which Astra otherwise forces to
   white bg + blue outline. The visible "box" is the parent .search
   wrapper; the input itself must stay transparent at all times. */
.wosol-services-filter__search .wosol-services-filter__input,
.wosol-services-filter__search .wosol-services-filter__input:hover,
.wosol-services-filter__search .wosol-services-filter__input:focus,
.wosol-services-filter__search .wosol-services-filter__input:focus-visible,
.wosol-services-filter__search .wosol-services-filter__input:active {
  border: 0;
  padding: 0;
  box-shadow: none;
  background: transparent !important;
  background-color: transparent !important;
  font-family: var(--wosol-font-sans);
  font-size: 15px;
  color: var(--wosol-ink);
  outline: none;
  min-width: 0;
  border-radius: 0;
  height: auto;
}

/* Neutralize Chrome/Safari yellow autofill bg for the search field. */
.wosol-services-filter__search .wosol-services-filter__input:-webkit-autofill,
.wosol-services-filter__search .wosol-services-filter__input:-webkit-autofill:hover,
.wosol-services-filter__search .wosol-services-filter__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--wosol-ink);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--wosol-ink);
}

.wosol-services-filter__input::placeholder {
  color: #8a9099;
  font-weight: 400;
}

/* Remove browser search decoration */
.wosol-services-filter__input::-webkit-search-decoration,
.wosol-services-filter__input::-webkit-search-cancel-button {
  display: none;
}

/* Category chips */
.wosol-services-filter__chips {
  display: flex;
  justify-content: center;
  gap: 24px;
}

/*
 * Outlined pill — Figma node 18710:89832. Figma strokes align inside, so the
 * comp's 36px height and "Travel" 72px width are text + 1px border + 7px/13px
 * padding, not padding on top of the border. Hence border-box and the odd-
 * looking 7/13 rather than the token's raw 8/12.
 */
.wosol-services-filter__chip {
  /* Reset button element defaults */
  margin: 0;
  appearance: none;
  box-sizing: border-box;
  /* Chip styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #9d958c;
  border-radius: 8px;
  padding: 7px 13px;
  font-family: var(--wosol-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #9d958c;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/*
 * Astra paints every button blue on :focus as well as :hover
 * (background --ast-global-color-1 #045cb4, white text, blue border). A chip
 * keeps :focus after a mouse click — clicking the selected pill to clear the
 * filter leaves a focused, unselected chip — so :focus has to be neutralised
 * here too, not just :hover.
 */
.wosol-services-filter__chip:focus {
  background: transparent;
  border-color: #9d958c;
  color: #9d958c;
  outline: none;
}

/* Hover tints toward the active fill rather than adopting it, so an idle chip
   never reads as the selected one. Declared after :focus — same specificity,
   and hovering a focused chip should still show the tint. */
.wosol-services-filter__chip:hover {
  background: rgba(157, 149, 140, 0.12);
  border-color: #9d958c;
  color: #9d958c;
  outline: none;
}

/* Astra kills the focus ring on buttons; the pill has no other affordance
   for keyboard users, so put one back as a halo outside the border. */
.wosol-services-filter__chip:focus-visible {
  outline: none;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), 0 0 0 3px rgba(157, 149, 140, 0.4);
}

/*
 * Selected — flat fill, no outline. The border stays at 1px transparent rather
 * than 0 so the pill keeps its 36px height and its width doesn't jump by 2px
 * as the selection moves between chips.
 */
.wosol-services-filter__chip.is-active,
.wosol-services-filter__chip.is-active:hover,
.wosol-services-filter__chip.is-active:focus,
.wosol-services-filter__chip.is-active:focus-visible {
  background: #9d958c;
  border-color: transparent;
  color: #f1eeea;
  outline: none;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

.wosol-services-filter__chip.is-active:focus-visible {
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), 0 0 0 3px rgba(157, 149, 140, 0.4);
}

/* Services filter — hide cards (the wrapper is the grid item) */
.wosol-services-card-wrap.is-hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .wosol-services-filter {
    padding: 40px 24px 32px;
  }

  .wosol-services-filter__chips {
    gap: 16px;
    flex-wrap: wrap;
  }
}

/* =============================================
   SERVICES TILE GRID — Figma node 17426:127747
   3-column grid of service cards, white bg.
   ============================================= */

.wosol-services-grid {
  background: #ffffff;
  padding: 80px 80px;
}

.wosol-services-grid__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 32px;
}

/* Search / filter came back with nothing. Sits outside __inner so it isn't
   a grid item stuck in the first column. */
.wosol-services-grid__empty {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 0 0;
  text-align: center;
  font-family: var(--wosol-font-sans);
  font-size: 15px;
  color: #101a28;
  opacity: 0.6;
}

.wosol-services-grid__empty[hidden] {
  display: none;
}

/* Grid item wrapper — owns reveal + filter motion (see animations.css). */
.wosol-services-card-wrap {
  display: flex;
}

/* Card — presentational, not a link. */
.wosol-services-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
}

/* Media frame clips the image zoom, scrim and light sweep. */
.wosol-services-card__media {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #efebe7;
  isolation: isolate;
}

.wosol-services-card__img {
  width: 100%;
  aspect-ratio: 394 / 360;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.wosol-services-card__meta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e9eaeb;
}

/* Gold rule that draws across the hairline on hover. */
.wosol-services-card__meta::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: #9d958c;
}

.wosol-services-card__kicker {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9d958c;
  margin: 0;
}

.wosol-services-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.wosol-services-card__title {
  font-family: var(--wosol-font-serif);
  font-weight: 500;
  font-size: 24px;
  color: #101a28;
  margin: 0;
  line-height: 1.3;
}

.wosol-services-card__suffix {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .wosol-services-grid {
    padding: 48px 24px;
  }

  .wosol-services-grid__inner {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
  }
}

@media (max-width: 640px) {
  .wosol-services-grid__inner {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   CONTACT HERO — Figma node 17426:127898
   Mirrors .wosol-services-hero layout with contact-specific
   background gradient stack.
   ============================================= */

.wosol-hero-contact {
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding-top reserves the nav strip (76px, plus clearance) so `center`
     centres the copy in the space actually left, now that the CTA row below
     it is gone. */
  justify-content: center;
  padding-top: 100px;
}

.wosol-hero-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: 0 24px;
  max-width: 760px;
  width: 100%;
  margin-top: auto;
}

.wosol-hero-contact__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff;
  opacity: 0.9;
  margin: 0 0 8px;
  max-width: 680px;
}

.wosol-hero-contact__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .wosol-hero-contact {
    min-height: 320px;
    padding: 100px 16px 40px;
  }

  .wosol-hero-contact__title {
    font-size: 40px;
    white-space: normal;
  }

  .wosol-hero-contact__eyebrow {
    font-size: 14px;
  }
}

/* =============================================
   CONTACT SECTION — Figma node 17476:115738
   Cream bg, 120px 80px padding, form card below intro.
   ============================================= */

/* Section: dark bg image (concierge bell photo) with rgba(17,36,59,0.56)
   overlay applied inline. Two-column layout — intro left / form card right. */
.wosol-contact {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  padding: 120px 80px;
}

.wosol-contact__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 600px;
  gap: 80px;
  align-items: start;
}

/* Left column: intro over dark bg */
.wosol-contact__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  padding-top: 24px;
}

.wosol-contact__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}

.wosol-contact__body {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  max-width: 520px;
  margin: 0;
}

/* Icon in its own column, centred against the two-line label/value stack
   beside it (node 18603:158542). */
.wosol-contact__email {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--wosol-font-sans);
  color: #ffffff;
  text-decoration: none;
  margin-top: 8px;
  transition: opacity 0.2s ease;
}

.wosol-contact__email:hover {
  opacity: 0.75;
}

.wosol-contact__email-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.wosol-contact__email-label {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wosol-muted);
}

.wosol-contact__email-value {
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  white-space: nowrap;
}

.wosol-contact__email-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--wosol-gold);
  flex-shrink: 0;
}

/* Right column: white form card */
.wosol-contact__card {
  background: #ffffff;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: 16px;
  padding: 40px;
}

.wosol-contact__card-heading {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 0 0 24px;
}

.wosol-contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.wosol-contact-form__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wosol-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wosol-contact-form__label {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wosol-gold);
}

/* Inputs, selects, textareas */
.wosol-contact-form input[type="text"],
.wosol-contact-form input[type="email"],
.wosol-contact-form input[type="tel"],
.wosol-contact-form select {
  background: #ffffff;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: var(--radius-md, 8px);
  height: 48px;
  padding: 0 16px;
  font-family: var(--wosol-font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--wosol-ink);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.wosol-contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 40px;
  cursor: pointer;
}

/* Select chevron mirrors to the start side in RTL */
[dir="rtl"] .wosol-contact-form select {
  background-position: left 16px center;
  padding-right: 16px;
  padding-left: 40px;
}

.wosol-contact-form textarea {
  background: #ffffff;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: var(--radius-md, 8px);
  min-height: 120px;
  padding: 12px 16px;
  font-family: var(--wosol-font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--wosol-ink);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.wosol-contact-form input::placeholder,
.wosol-contact-form textarea::placeholder {
  color: var(--wosol-muted);
}

.wosol-contact-form input:focus,
.wosol-contact-form select:focus,
.wosol-contact-form textarea:focus {
  outline: none;
  border-color: var(--wosol-navy-2);
  box-shadow: 0 0 0 3px rgba(18, 38, 62, 0.12);
}

/* Error states */
.wosol-contact-form__field.has-error input,
.wosol-contact-form__field.has-error select,
.wosol-contact-form__field.has-error textarea {
  border-color: #c53030;
}

.wosol-contact-form__error {
  font-family: var(--wosol-font-sans);
  font-weight: 400;
  font-size: 12px;
  color: #c53030;
  min-height: 1em;
  display: block;
}

/* Actions row */
.wosol-contact-form__actions {
  display: flex;
  justify-content: flex-start;
}

.wosol-contact-form__submit {
  background: #16304e;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 14px 32px;
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 -2px 0 0 rgba(10, 13, 18, 0.05);
  transition: background 0.2s ease, transform 0.15s ease;
}

.wosol-contact-form__submit:hover {
  background: #101a28;
  transform: translateY(-1px);
}

/* Success message */
.wosol-contact-form__success {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--wosol-ink);
  background: var(--wosol-cream);
  border: 1px solid var(--wosol-border-hairline);
  border-radius: var(--radius-lg, 12px);
  padding: 32px;
}

.wosol-contact-form__success p {
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .wosol-contact__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .wosol-contact__intro {
    padding-top: 0;
  }

  .wosol-contact__card {
    padding: 32px;
  }
}

@media (max-width: 900px) {
  .wosol-contact {
    padding: 80px 24px;
  }

  .wosol-contact__title {
    font-size: 32px;
  }

  .wosol-contact-form__row--two {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   MAP / PRESENCE SECTION — Figma node 17426:127982
   Cream bg, DIFC aerial image + WOSOL pin overlay.
   ============================================= */

.wosol-map-presence {
  background: var(--wosol-cream);
  border-bottom: 1px solid var(--wosol-border-hairline);
  padding: 80px;
}

.wosol-map-presence__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-map-presence__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.wosol-map-presence__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 32px;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-map-presence__map {
  position: relative;
  height: 400px;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  border: 1px solid var(--wosol-border-hairline);
}

.wosol-map-presence__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wosol-map-presence__pin {
  position: absolute;
  left: 50%;
  top: calc(50% - 20px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wosol-map-presence__pin-label {
  display: inline-block;
  background: var(--wosol-ink);
  border: 1px solid var(--wosol-gold);
  padding: 6px 16px;
  border-radius: 100px;
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 12px;
  color: #ffffff;
  white-space: nowrap;
}

.wosol-map-presence__pin-dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wosol-gold);
  box-shadow: 0 0 0 6px rgba(157, 149, 140, 0.28);
}

/* Responsive */
@media (max-width: 900px) {
  .wosol-map-presence {
    padding: 60px 24px;
  }

  .wosol-map-presence__map {
    height: 260px;
  }

  .wosol-map-presence__title {
    font-size: 26px;
  }
}

/* Shared eyebrow used across contact page sections */
.wosol-contact .wosol-eyebrow,
.wosol-map-presence .wosol-eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0;
}

/* =============================================
   CPT SINGLE TEMPLATES
   Used by single-wosol_service.php,
   single-wosol_curated_card.php,
   single-wosol_offer_tile.php
   ============================================= */

.wosol-single__hero {
  position: relative;
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

.wosol-single__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.wosol-single__hero-content {
  position: relative;
  z-index: 2;
  padding: 40px 24px;
  max-width: 800px;
}

.wosol-single__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0 0 16px;
}

.wosol-single__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 20px;
}

.wosol-single__excerpt {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.wosol-single__content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px;
  font-family: var(--wosol-font-sans);
  font-size: 16px;
  line-height: 1.8;
  color: #101a28;
}

.wosol-single__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wosol-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #101a28;
  text-decoration: none;
  border: 1px solid rgba(16, 26, 40, 0.3);
  border-radius: 100px;
  padding: 8px 18px;
  margin-bottom: 40px;
  transition: border-color 0.2s, color 0.2s;
}

.wosol-single__back:hover {
  border-color: var(--wosol-gold);
  color: var(--wosol-gold);
}

@media (max-width: 768px) {
  .wosol-single__title {
    font-size: 32px;
  }

  .wosol-single__content {
    padding: 48px 16px;
  }
}

/* =============================================
   SCROLL-TO-TOP BUTTON
   Overrides Astra's #ast-scroll-top default (small blue square with a
   bright accent) to a WOSOL-brand ink circle with a gold arrow. Astra's
   own JS still owns the show/hide toggle (display:none ↔ display:block)
   and the smooth-scroll click behavior — this stylesheet only skins it.
   ============================================= */

#ast-scroll-top {
  width: 48px !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--wosol-ink, #101a28) !important;
  border: 1px solid var(--wosol-gold, #9d958c) !important;
  color: transparent !important;
  bottom: 32px !important;
  right: 32px !important;
  box-shadow: 0 6px 20px rgba(16, 26, 40, 0.25);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  cursor: pointer;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus-visible {
  background: var(--wosol-gold, #9d958c) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(157, 149, 140, 0.35);
  outline: none;
}

#ast-scroll-top .ast-icon.icon-arrow {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

#ast-scroll-top .ast-icon.icon-arrow svg {
  width: 14px !important;
  height: auto;
  fill: var(--wosol-gold, #9d958c);
  transform: translateY(-1px) rotate(180deg) !important;
  transition: fill 200ms ease;
  vertical-align: middle;
  margin: 0 !important;
}

#ast-scroll-top:hover .ast-icon.icon-arrow svg,
#ast-scroll-top:focus-visible .ast-icon.icon-arrow svg {
  fill: var(--wosol-ink, #101a28);
}

@media (max-width: 480px) {
  #ast-scroll-top {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    bottom: 20px !important;
    right: 20px !important;
  }

  #ast-scroll-top .ast-icon.icon-arrow svg {
    width: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  #ast-scroll-top,
  #ast-scroll-top .ast-icon.icon-arrow svg {
    transition: none;
  }

  #ast-scroll-top:hover,
  #ast-scroll-top:focus-visible {
    transform: none;
  }
}
/* =============================================
   MEMBERSHIP PAGE — Figma node 18167:143159
   Hero, intro, two tier sections, comparison cards.
   The closing CTA band reuses .wosol-membership.
   ============================================= */

.wosol-mship-hero {
  position: relative;
  height: 824px;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 80px 180px;
}

.wosol-mship-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 900px;
  width: 100%;
}

.wosol-mship-hero__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  /* Secondcolor/700 — a lighter warm grey than --wosol-gold, used only on
     the hero where the eyebrow sits on a dark photograph. */
  color: #a79f95;
  margin: 0;
}

.wosol-mship-hero__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.15;
  color: #ffffff;
  max-width: 696px;
  margin: 0;
}

.wosol-mship-hero__lede {
  font-family: var(--wosol-font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--wosol-cream);
  opacity: 0.9;
  max-width: 720px;
  margin: 0;
}

.wosol-mship-intro {
  background: var(--wosol-cream);
  border-bottom: 1px solid var(--wosol-border-hairline);
  padding: 120px 80px;
}

.wosol-mship-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.wosol-mship-intro__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0;
}

.wosol-mship-intro__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--wosol-ink);
  max-width: 800px;
  margin: 0;
}

.wosol-mship-intro__lede {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: var(--wosol-ink);
  opacity: 0.8;
  max-width: 720px;
  margin: 0;
}

.wosol-mship-tier {
  padding: 120px 80px;
}

.wosol-mship-tier--premier {
  background: var(--wosol-cream);
}

.wosol-mship-tier--prestige {
  background: var(--wosol-cream-tint);
}

.wosol-mship-tier__inner {
  display: grid;
  grid-template-columns: 580px 620px;
  gap: 80px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-mship-tier--prestige .wosol-mship-tier__inner {
  grid-template-columns: 620px 580px;
}

.wosol-mship-tier--prestige .wosol-mship-tier__media {
  order: 2;
}

.wosol-mship-tier__image {
  display: block;
  width: 100%;
  height: 680px;
  object-fit: cover;
  border-radius: var(--wosol-radius-image);
}

.wosol-mship-tier__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.wosol-mship-tier__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wosol-mship-tier__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0;
  /* Three authored lines in the comp, so give them room to breathe. */
  line-height: 1.6;
}

.wosol-mship-tier__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-mship-tier__lede {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--wosol-ink);
  opacity: 0.8;
  margin: 0;
}

.wosol-mship-tier__features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wosol-mship-tier__feature {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wosol-border-hairline);
}

.wosol-mship-tier__num {
  flex: 0 0 40px;
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--wosol-gold);
}

.wosol-mship-tier__feature-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wosol-mship-tier__feature-title {
  font-family: var(--wosol-font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--wosol-ink);
}

.wosol-mship-tier__feature-desc {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wosol-muted);
}

.wosol-mship-tier__closing {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-mship-compare {
  background: var(--wosol-cream);
  padding: 120px 80px;
}

.wosol-mship-compare__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.wosol-mship-compare__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  margin-bottom: 64px;
}

.wosol-mship-compare__eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0;
}

.wosol-mship-compare__title {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-mship-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.wosol-mship-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: #ffffff;
  border: 1px solid var(--wosol-border-hairline);
  border-radius: var(--wosol-radius-image);
  padding: 48px;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1);
}

.wosol-mship-card__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wosol-mship-card__label {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wosol-gold);
  margin: 0;
}

.wosol-mship-card__name {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-mship-card__blurb {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wosol-muted);
  margin: 0;
}

.wosol-mship-card__rule {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--wosol-border-hairline);
  margin: 0;
}

.wosol-mship-card__ideal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wosol-mship-card__ideal-label {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wosol-ink);
  margin: 0;
}

.wosol-mship-card__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wosol-mship-card__item {
  position: relative;
  padding-inline-start: 18px;
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--wosol-ink);
}

/* 6px gold dot, vertically centred on the first line of the item. */
.wosol-mship-card__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wosol-gold);
}

/* Pin the CTA to the bottom so both cards align when their bullet
   lists differ in length. */
.wosol-mship-card__cta {
  margin-top: auto;
}

@media (max-width: 1200px) {
  .wosol-mship-tier__inner,
  .wosol-mship-tier--prestige .wosol-mship-tier__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .wosol-mship-hero {
    height: auto;
    min-height: 560px;
    padding: 160px 24px 80px;
  }

  .wosol-mship-hero__title {
    font-size: 44px;
  }

  .wosol-mship-intro,
  .wosol-mship-tier,
  .wosol-mship-compare {
    padding: 80px 24px;
  }

  .wosol-mship-intro__title {
    font-size: 34px;
  }

  /* Stack the tier columns; the image leads in both tiers so the reading
     order stays image → content, and the Prestige order override is undone. */
  .wosol-mship-tier__inner,
  .wosol-mship-tier--prestige .wosol-mship-tier__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .wosol-mship-tier--prestige .wosol-mship-tier__media {
    order: 0;
  }

  .wosol-mship-tier__image {
    height: 420px;
  }

  .wosol-mship-tier__title {
    font-size: 32px;
  }

  .wosol-mship-compare__grid {
    grid-template-columns: 1fr;
  }

  .wosol-mship-compare__title {
    font-size: 32px;
  }

  .wosol-mship-card {
    padding: 32px;
  }
}

@media (max-width: 640px) {
  .wosol-mship-hero {
    padding: 140px 16px 64px;
  }

  .wosol-mship-hero__title {
    font-size: 34px;
  }

  .wosol-mship-hero__lede {
    font-size: 16px;
  }

  .wosol-mship-hero__actions .wosol-btn {
    width: 100%;
  }

  .wosol-mship-intro,
  .wosol-mship-tier,
  .wosol-mship-compare {
    padding: 64px 16px;
  }

  .wosol-mship-intro__title,
  .wosol-mship-tier__title,
  .wosol-mship-compare__title {
    font-size: 28px;
  }

  .wosol-mship-tier__image {
    height: 320px;
  }

  .wosol-mship-card {
    padding: 24px;
  }

  .wosol-mship-card__name {
    font-size: 28px;
  }
}

/* Arabic is cursive — letter-spacing pulls the joined letterforms apart and
   renders the word as disconnected glyphs. The tracking on these eyebrows and
   labels is a Latin display detail, so drop it under RTL. The mixed
   "Premier — للأفراد" eyebrows lose Latin tracking too, which is the right
   trade against broken Arabic. */
[dir="rtl"] .wosol-mship-hero__eyebrow,
[dir="rtl"] .wosol-mship-intro__eyebrow,
[dir="rtl"] .wosol-mship-tier__eyebrow,
[dir="rtl"] .wosol-mship-compare__eyebrow,
[dir="rtl"] .wosol-mship-card__label,
[dir="rtl"] .wosol-mship-card__ideal-label {
  letter-spacing: normal;
}