/* ============================================================
   EQAR Design System
   ============================================================ */

:root {
  --eqar-ink: #0D5EAF;
  --eqar-ink-deep: #0A2036;
  --eqar-metal: #8B7355;
  --eqar-metal-light: #D9C6A8;
  --eqar-paper: #EEF1F4;
  --eqar-white: #FFFFFF;
  --eqar-line: rgba(10, 32, 54, 0.10);
  --eqar-caption: #556478;
  --eqar-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --eqar-body: "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --eqar-display-ar: "Amiri", "Traditional Arabic", serif;
  --eqar-body-ar: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --eqar-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Arabic / RTL
   Playfair Display and Public Sans have no Arabic glyphs at all, so RTL
   pages swap in an Arabic-native pairing (Amiri for display, Tajawal for
   body) rather than silently falling back to the browser's default serif.
   ============================================================ */

html[dir="rtl"] body {
  font-family: var(--eqar-body-ar);
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .wp-block-post-title,
html[dir="rtl"] .wp-block-site-title,
html[dir="rtl"] .eqar-display-huge,
html[dir="rtl"] .wp-block-navigation-item__content,
html[dir="rtl"] .wp-block-details summary,
html[dir="rtl"] .eqar-founder-name,
html[dir="rtl"] .eqar-spotlight-title,
html[dir="rtl"] .eqar-logo-card h3,
html[dir="rtl"] .eqar-num,
html[dir="rtl"] .eqar-num-label,
html[dir="rtl"] .eqar-marquee-track span,
html[dir="rtl"] .eqar-estimator-value,
html[dir="rtl"] .eqar-glance-item p,
html[dir="rtl"] .eqar-map-popup strong {
  font-family: var(--eqar-display-ar) !important;
}

html[dir="rtl"] p, html[dir="rtl"] li,
html[dir="rtl"] .eqar-eyebrow, html[dir="rtl"] .eqar-kicker,
html[dir="rtl"] .wp-block-button__link,
html[dir="rtl"] .eqar-tab-btn,
html[dir="rtl"] .eqar-founder-role,
html[dir="rtl"] .eqar-mobile-menu-cta,
html[dir="rtl"] .eqar-mobile-menu-whatsapp,
html[dir="rtl"] .eqar-mobile-menu-tagline,
html[dir="rtl"] .wpforms-container * {
  font-family: var(--eqar-body-ar) !important;
}

/* Arabic type wants a touch more line-height and slightly less letter-spacing
   than the Latin system — tracked-caps in particular look cramped/broken in
   Arabic script, which has no concept of "capitals". */
html[dir="rtl"] .eqar-eyebrow,
html[dir="rtl"] .eqar-kicker,
html[dir="rtl"] .wp-block-navigation-item__content,
html[dir="rtl"] .wp-block-button__link,
html[dir="rtl"] .eqar-tab-btn {
  letter-spacing: 0;
  text-transform: none;
}

html[dir="rtl"] body {
  line-height: 1.9;
}

/* Logical-direction fixes for pieces authored with physical left/right
   values. Grid and flex layouts already mirror automatically per the CSS
   spec, so most of the site needs no changes — these are the exceptions
   where a physical value was hardcoded. */
html[dir="rtl"] .eqar-eyebrow,
html[dir="rtl"] .eqar-kicker {
  letter-spacing: 0;
}

html[dir="rtl"] .wp-block-navigation-item__content::after {
  left: auto;
  right: 0;
  transform-origin: right;
}

html[dir="rtl"] .eqar-founder,
html[dir="rtl"] .eqar-mobile-menu-whatsapp,
html[dir="rtl"] .eqar-glance-item svg + p,
html[dir="rtl"] .eqar-quick-actions a svg {
  direction: rtl;
}

html[dir="rtl"] .eqar-spotlight-num,
html[dir="rtl"] .eqar-num-label,
html[dir="rtl"] .eqar-num {
  right: 1.2rem;
  left: auto;
}

/* Forcing direction:ltr here (so "EN  AR" doesn't itself flip to "AR  EN")
   has a side effect: it also makes this element's OWN logical properties
   (margin/padding/border-inline-start) resolve against that local ltr
   direction instead of the page's real rtl flow — so the hairline divider
   meant to sit between the switcher and the nav ends up on the wrong side
   (the outer edge) instead of facing the nav. Override with physical
   values instead of logical ones here. */
html[dir="rtl"] .eqar-lang-switch {
  direction: ltr;
  margin-inline-start: 0 !important;
  padding-inline-start: 0;
  border-inline-start: none;
  margin-right: 1.6rem !important;
  padding-right: 1.6rem;
  border-right: 1px solid var(--eqar-line);
}

/* ---------- Grain texture (subtle, fixed, non-interactive) ---------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* ---------- Header: subtle shadow once the page has scrolled ---------- */

header .wp-block-group.alignfull.eqar-scrolled {
  box-shadow: 0 8px 24px -16px rgba(10, 32, 54, 0.25);
  background: rgba(255, 255, 255, 0.94) !important;
}

/* ---------- Base typography ---------- */

body {
  font-family: var(--eqar-body);
  color: var(--eqar-ink-deep);
  font-size: 17px;
  line-height: 1.7;
}

h1, h2, h3,
.wp-block-post-title,
.wp-block-site-title {
  font-family: var(--eqar-display) !important;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.08; letter-spacing: -0.01em; font-weight: 400; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.16; font-weight: 500; }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.3; font-weight: 600; letter-spacing: 0; }

/* Small-caps label style used alongside headings for a refined, editorial finish */
.eqar-kicker {
  font-family: var(--eqar-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eqar-metal);
}

p, li {
  font-family: var(--eqar-body);
  font-size: 1.05rem;
  line-height: 1.75;
}

.wp-block-post-content > .wp-block-paragraph,
main p {
  max-width: 62ch;
}

.eqar-eyebrow {
  display: inline-block;
  font-family: var(--eqar-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eqar-metal);
  margin-bottom: 1rem;
}

/* ---------- Layout rhythm ---------- */

.wp-block-group, .wp-block-columns {
  --wp--style--block-gap: 2rem;
}

main .wp-block-group.alignwide,
main .wp-block-group.alignfull > * {
  max-width: 1220px;
}

/* ---------- Buttons ----------
   Sharp corners (not pills), small tracked-caps labels, restrained motion —
   reads as private-bank/boutique-advisory rather than SaaS. Primary buttons
   use the brand's bright blue as a background class in content ("eqar-ink");
   we redirect that specific fill to the deeper navy here so every existing
   button goes more premium without touching page content. */

.wp-block-button__link {
  font-family: var(--eqar-body);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 1rem 2.1rem !important;
  transition: transform 240ms var(--eqar-ease), box-shadow 240ms var(--eqar-ease), background-color 240ms ease;
  box-shadow: none;
}

.wp-block-button__link.has-eqar-ink-background-color {
  background-color: var(--eqar-ink-deep) !important;
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -18px rgba(10,32,54,0.45);
}

.wp-block-button__link:active {
  transform: translateY(0) scale(0.99);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border-width: 1px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.1) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link.has-eqar-ink-deep-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-eqar-white-color):hover {
  background: rgba(10,32,54,0.05) !important;
}

/* ---------- Navigation ----------
   Small tracked-caps labels rather than full-size serif — gives the header a
   quieter, more considered register and lets the Playfair wordmark stay the
   one serif moment in the bar. */

.wp-block-navigation-item__content {
  font-family: var(--eqar-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  transition: color 180ms ease;
}

.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.1em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--eqar-ease);
  opacity: 0.7;
}

.wp-block-navigation-item__content:hover::after,
.wp-block-navigation-item__content:focus::after {
  transform: scaleX(1);
}

.wp-block-navigation__container {
  gap: 2.4rem !important;
}

/* Logos nav item: an image icon instead of the word, so all 8 header items
   still fit on one line. Scoped to the closed/desktop bar only — the mobile
   overlay list (.is-menu-open) keeps the real text label, since that list
   isn't width-constrained the way the header row is. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[href$="/logos/"] {
  display: inline-flex;
  align-items: center;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[href$="/logos/"] .wp-block-navigation-item__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[href$="/logos/"]::before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  background-color: var(--eqar-ink-deep);
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%229.5%22%20r%3D%221.5%22/%3E%3Cpath%20d%3D%22M21%2015l-5-5-4%204-3-3-6%206%22/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%229.5%22%20r%3D%221.5%22/%3E%3Cpath%20d%3D%22M21%2015l-5-5-4%204-3-3-6%206%22/%3E%3C/svg%3E');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[href$="/logos/"]:hover::before,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[href$="/logos/"]:focus::before {
  background-color: var(--eqar-ink);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[href$="/logos/"]::after {
  bottom: -0.35em;
}

header .wp-block-group.alignfull {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--eqar-line);
  padding-top: 1.4rem !important;
  padding-bottom: 1.4rem !important;
}

/* ---------- Mobile menu overlay: full-screen navy takeover ---------- */

.wp-block-navigation__responsive-container-open {
  color: var(--eqar-ink-deep) !important;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--eqar-line);
  border-radius: 50%;
  transition: border-color 220ms ease;
  position: relative;
  z-index: 41;
}
.wp-block-navigation__responsive-container-open:hover { border-color: var(--eqar-ink); }
.wp-block-navigation__responsive-container-open svg { width: 18px; height: 18px; }

/* The header toggle looks like one button morphing hamburger -> X, but it's
   always the two real, untouched WP buttons underneath — eqar-interactive.js
   moves the actual close button to sit right next to the open button in the
   header, as a normal flex sibling, and toggles which one is displayed via
   inline style (see syncToggleState). Two earlier approaches both failed:
   (1) faking one button by intercepting/re-firing clicks raced WP's own
   Interactivity binding — if it ran first, "open" won and a tap meant to
   close silently reopened the menu instead; (2) leaving the real close
   button inside the overlay and fixed-positioning it over the open button
   got silently clipped, because the overlay's own opening `transform`
   animation makes it the containing block for fixed descendants, and
   combined with its `overflow:hidden` that put the button partly outside
   the overlay's own box. Reparenting it as a plain sibling avoids both. */
.wp-block-navigation__responsive-container-close {
  display: none !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--eqar-ink);
  border-radius: 50%;
  background: transparent;
  color: var(--eqar-ink-deep) !important;
  z-index: 41;
}
.wp-block-navigation__responsive-container-close svg {
  width: 18px; height: 18px;
  fill: var(--eqar-ink-deep) !important;
  stroke: var(--eqar-ink-deep) !important;
}

/* Only force the circular toggle to render as flex where core actually shows it —
   forcing display:flex unconditionally made it appear at desktop width too, alongside
   the already-visible full nav ("two menus" bug). Threshold is wide (1024px) because
   with 8 nav items even tablet landscape doesn't have room for the full horizontal bar. */
@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  /* WP core itself only hides the closed inline nav above a hardcoded 600px
     breakpoint (min-width:600px .wp-block-navigation__responsive-container...
     {display:block}) — without this override the full horizontal nav still
     renders (and wraps) between 600px and our 1024px hamburger threshold. */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* The overlay drops in BELOW the header instead of covering the full viewport,
   so the real header (with the one real logo) stays visible throughout and
   never needs a stand-in logo of its own. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--eqar-ink-deep) !important;
  position: fixed !important;
  top: var(--eqar-header-h, 96px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: calc(100dvh - var(--eqar-header-h, 96px)) !important;
  overflow: hidden !important;
}

/* Decorative watermark — echoes the medallion mark without competing with the
   nav list. Fills the dead space a plain list leaves on wider phones. */
.wp-block-navigation__responsive-container.is-menu-open::before {
  content: "";
  position: absolute;
  right: -18vw;
  bottom: -18vw;
  width: 62vw;
  height: 62vw;
  max-width: 480px;
  max-height: 480px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.wp-block-navigation__responsive-container.is-menu-open::after {
  content: "EQ";
  position: absolute;
  right: 2vw;
  bottom: -7vw;
  font-family: var(--eqar-display);
  font-size: 26vw;
  line-height: 1;
  color: rgba(255,255,255,0.045);
  pointer-events: none;
  z-index: 0;
}

/* height:100% doesn't reliably reach -container-content — it's nested two
   unstyled wrapper divs deep (-responsive-close > -responsive-dialog), and
   percentage heights need every ancestor in that chain to have a definite
   height. Chain flex instead so the content pane actually fills the overlay
   and its own overflow-y:auto can work, rather than silently overflowing
   past a hard-clipped parent with no way to reach the rest of the menu. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  color: var(--eqar-white) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--eqar-display);
  font-size: clamp(1.4rem, 6.5vw, 2rem);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.5em 0 !important;
  width: 100%;
  display: flex !important;
  align-items: baseline;
  justify-content: flex-start !important;
  text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  counter-reset: eqar-menu-item;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  counter-increment: eqar-menu-item;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
  content: counter(eqar-menu-item, decimal-leading-zero);
  font-family: var(--eqar-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--eqar-metal-light, #D9C6A8);
  margin-right: 1.2rem;
  flex: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
  background: var(--eqar-metal);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0 !important;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  width: 100%;
  max-width: 420px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  outline: none !important;
  color: var(--eqar-metal) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
  border-bottom: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  opacity: 0;
  animation: eqar-menu-item-in 480ms var(--eqar-ease) forwards;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 60ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 110ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 160ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 210ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 260ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 310ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 360ms; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 410ms; }

@keyframes eqar-menu-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: none; opacity: 1; }
}

/* This lives inside .wp-block-navigation__responsive-container-content, which
   WP core also renders as the plain closed-state inline content at desktop
   width (that's how the horizontal nav bar itself works) — so without this,
   the CTA/tagline meant only for the full-screen mobile takeover leaks onto
   the desktop header on every page. */
.eqar-mobile-menu-foot {
  display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .eqar-mobile-menu-foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.eqar-mobile-menu-tagline {
  font-family: var(--eqar-body);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  margin: 0 0 0.2rem;
}

.eqar-mobile-menu-cta {
  font-family: var(--eqar-body);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eqar-ink-deep) !important;
  background: var(--eqar-metal-light, #D9C6A8);
  padding: 1rem 1.8rem;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  transition: transform 220ms var(--eqar-ease);
}

.eqar-mobile-menu-cta:hover { transform: translateY(-1px); }

.eqar-mobile-menu-whatsapp {
  font-family: var(--eqar-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--eqar-white) !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0.85;
}

.eqar-mobile-menu-whatsapp svg { width: 17px; height: 17px; flex: none; }

/* The floating quick-actions bar would otherwise sit on top of / clash with
   the menu's own CTA — hide it while the mobile nav is open. */
body.eqar-menu-open .eqar-quick-actions {
  display: none;
}

@media (max-width: 1024px) {
  .eqar-quick-actions { z-index: 45; }

  .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    padding: 0.5rem 1.6rem 1.6rem !important;
  }
  /* WP core adds its own padding-top: calc(2rem + 24px) here (~56px), meant
     to clear its default top-right close button — our toggle lives in the
     header instead, so that clearance just pushes the first nav item down
     for no reason. */
  .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
    padding-top: 0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column;
    height: 100%;
  }
}

/* ---------- Video hero ---------- */

.eqar-video-hero {
  position: relative;
  min-height: 92dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.eqar-video-hero video,
.eqar-video-hero .eqar-hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.eqar-video-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,32,54,0.55) 0%, rgba(10,32,54,0.35) 45%, rgba(10,32,54,0.75) 100%);
  z-index: 1;
}

.eqar-video-hero .eqar-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 0 1.5rem;
}

.eqar-video-hero h1 {
  color: #fff;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin-bottom: 1.1rem;
}

.eqar-video-hero p {
  color: rgba(255,255,255,0.92);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 46ch;
  margin: 0 auto 2rem;
}

.eqar-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 12px;
}

.eqar-scroll-cue::before {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 6px;
  margin-left: -1.5px;
  background: #fff;
  border-radius: 2px;
  animation: eqar-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes eqar-scroll-cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(10px); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Cards ---------- */

.eqar-card {
  background: var(--eqar-paper);
  border: none;
  border-radius: 2px;
  box-shadow: none;
  transition: transform 300ms var(--eqar-ease), box-shadow 300ms var(--eqar-ease), background-color 300ms ease;
}

.eqar-card:hover {
  transform: translateY(-4px);
  background: var(--eqar-white);
  box-shadow: 0 24px 48px -22px rgba(10,32,54,0.22);
}

/* ---------- Media captions / gallery ---------- */

.eqar-media-frame {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.eqar-media-frame img,
.eqar-media-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--eqar-ease);
}

.eqar-media-frame:hover img,
.eqar-media-frame:hover video {
  transform: scale(1.06);
}

.eqar-media-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(10,32,54,0.82));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------- Scroll reveal ---------- */

.eqar-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--eqar-ease), transform 700ms var(--eqar-ease);
}

.eqar-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.eqar-reveal-stagger.is-visible > * {
  transition-delay: calc(var(--eqar-i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .eqar-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Tabs (Services) ---------- */

.eqar-tabs { margin: 2rem 0; }

.eqar-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--eqar-line);
  margin-bottom: 2.5rem;
}

.eqar-tab-btn {
  font-family: var(--eqar-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eqar-caption);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.9rem 1.1rem;
  position: relative;
  transition: color 200ms ease;
}

.eqar-tab-btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--eqar-ink);
  transform: scaleX(0);
  transition: transform 260ms var(--eqar-ease);
}

.eqar-tab-btn:hover { color: var(--eqar-ink-deep); }

.eqar-tab-btn.is-active {
  color: var(--eqar-ink-deep);
}

.eqar-tab-btn.is-active::after { transform: scaleX(1); }

.eqar-tab-panel { display: none; }
.eqar-tab-panel.is-active {
  display: block;
  animation: eqar-fade-in 400ms var(--eqar-ease);
}

@keyframes eqar-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- FAQ (details/summary) ---------- */

.wp-block-details {
  border: none;
  border-bottom: 1px solid var(--eqar-line);
  padding: 1.3rem 0;
}

.wp-block-details summary {
  font-family: var(--eqar-display);
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
  content: "+";
  font-family: var(--eqar-body);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--eqar-metal);
  flex: none;
  transition: transform 260ms var(--eqar-ease);
}

.wp-block-details[open] summary::after {
  transform: rotate(45deg);
}

.wp-block-details p {
  margin-top: 1rem;
  color: var(--eqar-caption);
  max-width: 68ch;
}

/* ---------- Investment estimator ---------- */

.eqar-estimator {
  background: var(--eqar-paper);
  border-radius: 2px;
  padding: clamp(1.8rem, 4vw, 3rem);
}

.eqar-estimator input[type="range"] {
  width: 100%;
  accent-color: var(--eqar-ink);
  margin: 1.2rem 0;
}

.eqar-estimator-value {
  font-family: var(--eqar-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--eqar-ink);
}

.eqar-estimator-result {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--eqar-line);
  font-size: 0.95rem;
  color: var(--eqar-caption);
}

/* ---------- WhatsApp floating cue ---------- */

.eqar-whatsapp-fab {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--eqar-ink-deep);
  color: #fff;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--eqar-body);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 12px 28px -8px rgba(10,32,54,0.45);
  transition: transform 220ms var(--eqar-ease);
}

.eqar-whatsapp-fab:hover { transform: translateY(-3px); color: #fff; }

@media (max-width: 600px) {
  .eqar-whatsapp-fab span { display: none; }
  .eqar-whatsapp-fab { padding: 0.85rem; }
}

/* ---------- Quick-action sidebar (replaces single WhatsApp fab) ---------- */

.eqar-quick-actions {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.eqar-quick-actions a {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--eqar-ink-deep);
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  transition: background 220ms var(--eqar-ease), width 220ms var(--eqar-ease);
}

.eqar-quick-actions a:hover {
  background: var(--eqar-ink);
  width: 64px;
}

.eqar-quick-actions a svg { width: 22px; height: 22px; flex: none; }

/* ---------- Footer ---------- */

.eqar-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--eqar-line);
}

/* Same watermark device as the mobile menu takeover — a quiet, recurring
   signature rather than a one-off effect. */
.eqar-footer::after {
  content: "EQ";
  position: absolute;
  left: -3vw;
  bottom: -9vw;
  font-family: var(--eqar-display);
  font-size: 18vw;
  line-height: 1;
  color: rgba(10, 32, 54, 0.028);
  pointer-events: none;
  z-index: 0;
}

.eqar-footer > * {
  position: relative;
  z-index: 1;
}

.eqar-footer-brand {
  max-width: 30ch;
}

.eqar-footer-tagline {
  color: var(--eqar-caption) !important;
  font-size: 0.95rem !important;
  margin-top: 1rem !important;
}

.eqar-footer nav .wp-block-navigation__container {
  gap: 0.6rem 2.2rem !important;
}

.eqar-footer-bottom {
  border-top: 1px solid var(--eqar-line);
  padding-top: 1.8rem !important;
  margin-top: 3.5rem !important;
}

.eqar-footer-bottom p {
  color: var(--eqar-caption) !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}

/* ---------- Language switcher ---------- */

.eqar-lang-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: 1.6rem !important;
  padding-inline-start: 1.6rem;
  border-inline-start: 1px solid var(--eqar-line);
}

.eqar-lang-switch-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--eqar-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--eqar-caption);
  text-decoration: none;
  padding: 0.35rem 0.55rem;
  border-radius: 2px;
  border: 1px solid transparent;
  opacity: 0.55;
  transition: opacity 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.eqar-lang-switch-item img {
  display: block;
  width: 16px;
  height: auto;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(10,32,54,0.12);
}

.eqar-lang-switch-item:hover {
  opacity: 0.85;
}

.eqar-lang-switch-item.is-active {
  opacity: 1;
  color: var(--eqar-ink-deep);
  background: var(--eqar-paper);
  border-color: var(--eqar-line);
}

.wp-block-navigation__responsive-container.is-menu-open .eqar-lang-switch {
  margin-inline-start: 0 !important;
  margin-top: 1.6rem;
  padding-inline-start: 0;
  border-inline-start: none;
}
.wp-block-navigation__responsive-container.is-menu-open .eqar-lang-switch-item {
  color: rgba(255,255,255,0.65);
}
.wp-block-navigation__responsive-container.is-menu-open .eqar-lang-switch-item.is-active {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

@media (max-width: 700px) {
  .eqar-quick-actions { top: auto; bottom: 0; transform: none; flex-direction: row; width: 100%; }
  .eqar-quick-actions a { width: 100%; height: 52px; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.14); }
  .eqar-quick-actions a:hover { width: 100%; }
}

/* ---------- Decorative accents ---------- */

.eqar-decor-arc {
  position: absolute;
  border: 1px solid var(--eqar-line);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.eqar-decor-arc.is-light { border-color: rgba(255,255,255,0.14); }

.eqar-decor-wrap { position: relative; overflow: hidden; }

/* ---------- Bold display headline (Domi-style scale) ---------- */

.eqar-display-huge {
  font-family: var(--eqar-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 6.2vw, 5.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.eqar-accent { color: var(--eqar-metal); font-style: italic; font-weight: 500; }

/* ---------- Numbered media card ---------- */

.eqar-numbered-card {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.eqar-numbered-card img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--eqar-ease);
}

.eqar-numbered-card:hover img { transform: scale(1.06); }

.eqar-numbered-card .eqar-num {
  position: absolute;
  top: 1.2rem; left: 1.2rem;
  font-family: var(--eqar-display);
  font-size: 1.3rem;
  color: #fff;
  background: rgba(10,32,54,0.55);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  backdrop-filter: blur(4px);
}

.eqar-numbered-card .eqar-num-label {
  position: absolute;
  left: 1.2rem; bottom: 1.2rem;
  color: #fff;
  font-family: var(--eqar-display);
  font-size: 1.2rem;
}

/* ---------- Marquee ticker ---------- */

.eqar-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--eqar-line);
  border-bottom: 1px solid var(--eqar-line);
  padding: 1.4rem 0;
}

.eqar-marquee-track {
  display: inline-flex;
  gap: 3rem;
  animation: eqar-marquee 28s linear infinite;
}

.eqar-marquee-track span {
  font-family: var(--eqar-display);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--eqar-caption);
  white-space: nowrap;
}

.eqar-marquee-track span.eqar-dot::after {
  content: "\2022";
  margin-left: 3rem;
  color: var(--eqar-metal);
}

@keyframes eqar-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .eqar-marquee-track { animation: none; }
}

/* ---------- Founders ---------- */

.eqar-founders {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

@media (max-width: 780px) {
  .eqar-founders { grid-template-columns: 1fr; gap: 2.5rem; }
}

.eqar-founder {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}

.eqar-founder-avatar {
  flex: none;
  width: 84px;
  height: 84px;
  transition: transform 400ms var(--eqar-ease);
}

.eqar-founder:hover .eqar-founder-avatar {
  transform: rotate(8deg);
}

.eqar-founder-name {
  font-family: var(--eqar-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--eqar-ink-deep);
  margin: 0 0 0.15rem;
}

.eqar-founder-role {
  font-family: var(--eqar-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eqar-metal);
  margin: 0 0 0.7rem;
}

.eqar-founder p:last-child {
  color: var(--eqar-caption);
  font-size: 0.98rem;
  margin: 0;
}

/* ---------- Region spotlight (hover-reveal caption) ---------- */

.eqar-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.eqar-spotlight-card {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4/5;
}

.eqar-spotlight-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--eqar-ease);
}

.eqar-spotlight-card:hover img { transform: scale(1.08); }

.eqar-spotlight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,32,54,0.88) 100%);
  opacity: 0.75;
  transition: opacity 400ms ease;
}

.eqar-spotlight-card:hover::after { opacity: 0.94; }

.eqar-spotlight-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 1.3rem 1.3rem 1.4rem;
  color: #fff;
}

.eqar-spotlight-num {
  display: block;
  font-family: var(--eqar-display);
  font-size: 0.85rem;
  color: var(--eqar-metal-light, #D9C6A8);
  margin-bottom: 0.3rem;
}

.eqar-spotlight-title {
  font-family: var(--eqar-display);
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
}

.eqar-spotlight-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.82);
  max-width: 34ch;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 420ms var(--eqar-ease), opacity 300ms ease;
}

.eqar-spotlight-card:hover .eqar-spotlight-desc,
.eqar-spotlight-card:focus-within .eqar-spotlight-desc {
  max-height: 4.5rem;
  opacity: 1;
}

/* ---------- At-a-glance band ---------- */

.eqar-glance-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 900px) {
  .eqar-glance-band { grid-template-columns: repeat(2, 1fr); }
}

.eqar-glance-item {
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.eqar-glance-item svg {
  width: 26px;
  height: 26px;
  color: var(--eqar-metal-light, #D9C6A8);
  margin-bottom: 1rem;
}

.eqar-glance-item p {
  color: #fff;
  font-family: var(--eqar-display);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.35;
}

/* ---------- Logo review grid ---------- */

.eqar-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.eqar-logo-card {
  padding: 2.4rem 1.8rem;
  text-align: center;
}

.eqar-logo-card-mark {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.eqar-logo-card-mark svg {
  max-width: 100%;
  max-height: 100%;
}

.eqar-logo-card h3 {
  font-family: var(--eqar-display);
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.eqar-logo-card p {
  font-size: 0.9rem;
  color: var(--eqar-caption);
  line-height: 1.55;
  margin: 0;
}

/* ---------- WPForms (Contact + Ambassador application) ----------
   WPForms drives its own look through CSS custom properties on the container
   — overriding those (rather than fighting individual field rules) brings
   every form on the site onto the same brand system in one place. */

.wpforms-container {
  --wpforms-field-border-radius: 2px;
  --wpforms-field-border-color: var(--eqar-line);
  --wpforms-field-background-color: var(--eqar-white);
  --wpforms-field-text-color: var(--eqar-ink-deep);
  --wpforms-label-color: var(--eqar-ink-deep);
  --wpforms-label-sublabel-color: var(--eqar-caption);
  --wpforms-button-border-radius: 2px;
  --wpforms-button-background-color: var(--eqar-ink-deep);
  --wpforms-button-border-color: var(--eqar-ink-deep);
  --wpforms-button-text-color: #fff;
  --wpforms-page-break-color: var(--eqar-ink);
}

.wpforms-container * {
  font-family: var(--eqar-body) !important;
}

.wpforms-container .wpforms-field-label {
  font-weight: 600;
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.1rem !important;
  transition: transform 240ms var(--eqar-ease), box-shadow 240ms var(--eqar-ease) !important;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -18px rgba(10,32,54,0.45);
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--eqar-ink) !important;
  box-shadow: 0 0 0 1px var(--eqar-ink) !important;
}

/* ---------- Map ---------- */

.eqar-map-wrap {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}

.eqar-map-wrap .leaflet-container {
  font-family: var(--eqar-body);
  background: var(--eqar-paper);
}

.eqar-map-pin {
  background: var(--eqar-ink-deep);
  color: #fff;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px -4px rgba(10,32,54,0.5);
  font-family: var(--eqar-display);
  font-size: 0.95rem;
}

.eqar-map-popup {
  font-family: var(--eqar-body);
}

.eqar-map-popup strong {
  font-family: var(--eqar-display);
  font-size: 1.05rem;
  display: block;
  margin-bottom: 0.2rem;
}