/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --black:     #000000;
  --dark:      #0d0d0d;
  --dark2:     #141414;
  --grey-sec:  #EDEEEF;
  --white-sec: #FFFFFF;
  --light-sec: #F4F3F1;
  --wire-dark: rgba(255,255,255,0.08);
  --wire-light:rgba(0,0,0,0.10);
  --line-l:    rgba(0,0,0,0.10);
  --orange:    #F58220;
  --orange2:   #D96F16;
  /* Small orange text on light grounds only: #F58220 measures 2.3:1 on --light-sec.
     This darker tone stays in the Elite orange family and clears WCAG AA (4.9:1). */
  --orange-text: #A9500B;
  /* Ink for text sitting on the brand orange: 7.28:1, where white is 2.59:1. */
  --cta-ink:   #14100C;
  --white:     #FFFFFF;
  --off-white: #F0F0F0;
  --dim:       rgba(255,255,255,0.50);
  --dim2:      rgba(255,255,255,0.25);
  --text:      #111111;
  --text-mid:  #4C4546;
  --serif:     "DM Serif Display", Georgia, serif;
  --sans:      "DM Sans", system-ui, sans-serif;
}

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--white-sec);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--orange); }

/* ═══════════════════════════════════════
   SHARED UTILITIES
═══════════════════════════════════════ */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
}
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* Shared hero-navigation treatment for Elite corporate and division pages.
   The official light and dark assets cross-fade; no logo is recolored in CSS. */
.elite-hero-nav #nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;transition:height .35s ease,background-color .42s ease,border-color .42s ease,box-shadow .42s ease}
.elite-hero-nav #nav:not(.scrolled){background-color:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.elite-nav-logo{position:relative;width:142px;height:72px;flex:0 0 142px}.elite-hero-nav .elite-nav-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease}.elite-nav-logo__light{opacity:1}.elite-nav-logo__dark{opacity:0}
.elite-hero-nav #nav .nav-links a,.elite-hero-nav #nav .lang-btn,.elite-hero-nav #nav .lang-sep,.elite-hero-nav #nav .mobile-lang-btn,.elite-hero-nav #nav .mobile-lang-sep{color:rgba(255,255,255,.84)}.elite-hero-nav #nav .lang-btn.active,.elite-hero-nav #nav .mobile-lang-btn.active{color:#fff}.elite-hero-nav #nav .nav-cta{background:transparent;border:1px solid rgba(255,255,255,.62);color:#fff}.elite-hero-nav #nav .hamburger-btn span{background:#fff}.elite-hero-nav #nav .nav-cta:hover{background:rgba(255,255,255,.12)}
.elite-hero-nav #nav.scrolled{background:rgba(255,255,255,.96);border-bottom-color:rgba(0,0,0,.07);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 1px 24px rgba(0,0,0,.06);color:#111}.elite-hero-nav #nav.scrolled .elite-nav-logo__light{opacity:0}.elite-hero-nav #nav.scrolled .elite-nav-logo__dark{opacity:1}.elite-hero-nav #nav.scrolled .nav-links a,.elite-hero-nav #nav.scrolled .lang-btn,.elite-hero-nav #nav.scrolled .lang-sep,.elite-hero-nav #nav.scrolled .mobile-lang-btn,.elite-hero-nav #nav.scrolled .mobile-lang-sep{color:#3e3838}.elite-hero-nav #nav.scrolled .lang-btn.active,.elite-hero-nav #nav.scrolled .mobile-lang-btn.active{color:#111}.elite-hero-nav #nav.scrolled .nav-cta{background:#111;border-color:#111;color:#fff}.elite-hero-nav #nav.scrolled .nav-cta:hover{background:#292525}.elite-hero-nav #nav.scrolled .hamburger-btn span{background:#111}
.d5 { transition-delay: .5s; }

/* ═══════════════════════════════════════
   NAV — white glass (matches screenshot)
═══════════════════════════════════════ */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 94px;
  padding: 0 72px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  transition: height .35s ease, background .35s ease, box-shadow .35s ease;
}
#nav.scrolled {
  height: 76px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 24px rgba(0,0,0,0.06);
}

.nav-logo img {
  height: 88px;
  width: auto;
  display: block;
  transition: opacity .25s ease;
}
.nav-logo img:hover { opacity: .75; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 56px;
}
.nav-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #3a3a3a;
  transition: color .25s;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--orange);
  transition: width .3s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.lang-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
}
/* The active underline is a border reserved (transparent) on every state, not
   added only when active — so EN and FR always occupy the exact same box and
   switching between them causes zero vertical movement. */
.lang-btn {
  display: inline-flex;
  align-items: center;
  color: #888;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  line-height: 1;
  transition: color .2s, border-color .2s;
}
.lang-btn.active {
  color: #000;
  border-bottom-color: var(--orange);
}
.lang-sep { display: inline-flex; align-items: center; color: #ccc; font-size: 12px; line-height: 1; }
.nav-cta {
  padding: 11px 28px;
  background: var(--text);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background .25s, transform .15s;
}
.nav-cta:hover { background: var(--orange); transform: translateY(-1px); }
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 6px 0 6px 8px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  background: none;
  border: none;
}
.hamburger-btn span {
  display: block;
  height: 1px;
  background: var(--text);
  transition: all .3s ease;
  border-radius: 1px;
}
.hamburger-btn span:nth-child(1) { width: 22px; }
.hamburger-btn span:nth-child(2) { width: 16px; opacity: .5; }
.hamburger-btn span:nth-child(3) { width: 20px; }
.hamburger-btn:hover span { background: var(--orange); }
.hamburger-btn:hover span:nth-child(2) { width: 22px; opacity: .8; }

/* Mobile nav right group */
.mobile-nav-right {
  display: none;
  align-items: center;
  gap: 14px;
}
.mobile-lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Same reserved-border technique as the desktop pair: the border is always
   present (transparent when inactive), so the active language never grows
   taller than the inactive one and nothing shifts on switch. */
.mobile-lang-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0,0,0,.35);
  cursor: pointer;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  line-height: 1;
  transition: color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mobile-lang-btn.active {
  color: var(--text);
  border-bottom-color: var(--orange);
}
.mobile-lang-sep {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  color: rgba(0,0,0,.2);
  font-weight: 300;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MENU — one navigation system, every route
   ───────────────────────────────────────────────────────────────────────────
   An editorial index rather than a stack of oversized links: the whole of
   Elite's structure is legible in one composition, so a visitor on any page
   can see every division, the Greece partnership nested under its parent, and
   the employer/candidate actions without expanding anything.

   The global portion is byte-identical on all 17 routes. Only three things
   change per page: which row is marked current, an optional quieter
   contextual group, and an optional contextual action.
   ═══════════════════════════════════════════════════════════════════════════ */
#mobile-menu {
  position: fixed;
  inset: 0;
  background: #050505;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.77,0,.18,1);
}
#mobile-menu.open { transform: none; }

#mobile-menu.open .mm-top  { animation: mmFadeUp .45s .06s both; }
#mobile-menu.open .mm-body { animation: mmFadeUp .45s .14s both; }
#mobile-menu.open .mm-foot { animation: mmFadeUp .45s .24s both; }

@keyframes mmFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #mobile-menu { transition: none; }
  #mobile-menu.open .mm-top,
  #mobile-menu.open .mm-body,
  #mobile-menu.open .mm-foot { animation: none; }
}

/* ── Brand area ───────────────────────────────────────────────────────────
   Navigation, not a second hero: the mark is sized to identify the site and
   then get out of the way of the index below it. */
.mm-top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 13px;
  flex-shrink: 0;
}
.mm-logo { display: block; line-height: 0; }
/* The web-sized derivative, not the 5760px original, for a 54px render. */
.mm-logo img { height: 48px; width: auto; display: block; }
.mm-tagline {
  font-family: var(--sans);
  /* The site's mobile micro-typography floor for contextual labels is 10px;
     the tracking absorbs the extra width. */
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-top: 9px;
  text-align: center;
}
.mm-rule { width: 26px; height: 1px; background: var(--orange); opacity: .8; margin-top: 9px; }

/* 44x44 hit area around a 20px glyph — the target is the button, not the icon. */
.mm-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55);
  background: none; border: none; padding: 0; cursor: pointer;
  transition: color .25s, transform .35s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.mm-close:hover { color: #fff; transform: rotate(90deg); }
.mm-close:focus-visible { color: #fff; outline: 1px solid rgba(245,130,32,.9); outline-offset: -9px; }

/* ── Scrolling index ──────────────────────────────────────────────────────── */
.mm-body { flex: 1; padding: 0 0 4px; }

/* Home is a global utility, not another editorial section, so it is a single
   compact row above the first heading. */
.mm-util {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 46px;
  padding: 0 22px;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  -webkit-tap-highlight-color: transparent;
}

.mm-group { margin-top: 18px; }
.mm-group:first-child { margin-top: 0; }

/* Serif italic heading with the restrained orange vertical accent. */
.mm-group__head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px;
  margin-bottom: 6px;
}
.mm-group__head::before {
  content: '';
  width: 2px; height: 20px;
  background: var(--orange);
  flex-shrink: 0;
}
.mm-group__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.15;
  color: #fff;
}

/* ── Rows ─────────────────────────────────────────────────────────────────
   One row primitive. Divisions add a number, utility rows add an icon, the
   contextual group renders quieter — the geometry is shared so the whole
   index reads as one system. */
.mm-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 6px 22px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s;
}
.mm-row:first-of-type { border-top: 1px solid rgba(255,255,255,.055); }
.mm-row:hover { background: rgba(255,255,255,.02); }

.mm-row__n {
  flex-shrink: 0;
  width: 22px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--orange);
}
.mm-row__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: rgba(255,255,255,.5);
  display: block;
}
.mm-row__label {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  line-height: 1.3;
}
/* Thin orange directional arrow. */
.mm-row__arrow {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1;
  color: var(--orange);
  opacity: .75;
  transition: transform .2s, opacity .2s;
}
.mm-row:hover .mm-row__arrow { transform: translateX(3px); opacity: 1; }

/* Utility/action rows carry an icon and sentence case rather than a number. */
.mm-row--icon .mm-row__label {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 14.5px;
  color: rgba(255,255,255,.92);
}

/* ── Greece, nested under its parent division ─────────────────────────────
   Indented and bracketed by the orange rule so the hierarchy is visible:
   GoGreece is a partner inside Elite Investment, never a seventh division. */
.mm-row--nest {
  min-height: 52px;
  padding-left: 44px;
  gap: 12px;
}
.mm-row--nest::before {
  content: '';
  position: absolute;
  left: 26px; top: 9px; bottom: 9px;
  width: 1px;
  background: rgba(245,130,32,.55);
}
.mm-row--nest .mm-row__label {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 13.5px;
  color: rgba(255,255,255,.86);
  flex: 0 1 auto;
}
/* Held below the division type so the partner reads as supporting, not equal. */
.mm-partner {
  height: 19px;
  width: auto;
  display: block;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Contextual group — deliberately quieter than the global index ───────── */
.mm-group--ctx { margin-top: 20px; }
.mm-group--ctx .mm-group__title { font-size: 17px; color: rgba(255,255,255,.82); }
.mm-group--ctx .mm-group__head::before { height: 16px; background: rgba(245,130,32,.6); }
/* Quieter, but still a full tap target. */
.mm-row--ctx { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.mm-row--ctx .mm-row__label {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}
.mm-row--ctx .mm-row__arrow { font-size: 12px; opacity: .5; }

/* ── Current page ─────────────────────────────────────────────────────────
   A rule, a brighter label and the orange marker — no pill, no block, and the
   link stays live so it can still be used to jump back to the top. */
.mm-util[aria-current="page"] {
  position: relative;
  background: rgba(245,130,32,.05);
  color: #fff;
}
.mm-util[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--orange);
}
.mm-row.is-current::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--orange);
}
.mm-row.is-current { background: rgba(245,130,32,.05); }
.mm-row.is-current .mm-row__label { color: #fff; font-weight: 500; }
.mm-row.is-current .mm-row__n { color: var(--orange); font-weight: 600; }

.mm-row:focus-visible, .mm-util:focus-visible, .mm-action:focus-visible,
.mm-logo:focus-visible, .mm-lang-btn:focus-visible, .mm-social:focus-visible {
  outline: 1px solid var(--orange);
  outline-offset: -2px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.mm-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Restrained contextual action — only where the action is not already a row. */
.mm-action {
  width: 100%;
  min-height: 46px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  border: 1px solid rgba(245,130,32,.55);
  color: var(--orange);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.mm-action:hover { background: var(--orange); color: var(--cta-ink); }

/* Compact by design: social must never push navigation down. */
.mm-socials { display: flex; align-items: center; gap: 2px; }
.mm-social {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: rgba(255,255,255,.32);
  text-decoration: none;
  transition: color .25s;
}
.mm-social:hover { color: var(--orange); }

.mm-lang { display: flex; align-items: center; gap: 10px; }
.mm-lang__globe { width: 16px; height: 16px; color: rgba(255,255,255,.4); flex-shrink: 0; }
.mm-lang-btn {
  min-width: 44px; min-height: 44px;
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
}
.mm-lang-btn.active { color: var(--orange); }
.mm-lang-sep { width: 1px; height: 13px; background: rgba(255,255,255,.16); flex-shrink: 0; }

/* Narrow phones: hold the hierarchy, shed only slack. */
@media (max-width: 360px) {
  .mm-top { padding: 20px 16px 13px; }
  .mm-logo img { height: 46px; }
  .mm-row, .mm-util { padding-left: 16px; padding-right: 16px; }
  .mm-group__head { padding: 0 16px; }
  .mm-row--nest { padding-left: 36px; }
  .mm-row--nest::before { left: 20px; }
  .mm-row__label { font-size: 12.5px; }
  .mm-group__title { font-size: 19px; }
  .mm-partner { height: 17px; }
}

/* Short landscape phones: the index scrolls rather than the brand area eating
   the viewport. */
@media (max-height: 560px) {
  .mm-top { padding: 14px 20px 10px; }
  .mm-logo img { height: 40px; }
  .mm-tagline { display: none; }
}

/* ═══════════════════════════════════════
   HERO — PURE BLACK like screenshot
═══════════════════════════════════════ */
/* Hero spacing system (shared principle with the Talents heroes): the fixed nav
   is reserved inside the hero's own padding-top so content can never collide with
   it, content is centred in the remaining box, and the lower band is deliberately
   larger than the upper lift — which seats the composition in the upper-middle
   without transforms, negative margins or per-viewport pixel offsets. */
#hero {
  --hero-nav: 94px;
  --hero-lift: clamp(22px, 3.6vh, 48px);
  --hero-band: clamp(150px, 22vh, 240px);
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--hero-nav) + var(--hero-lift));
  padding-bottom: var(--hero-band);
  background: var(--black);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/hero-background.jpg");
  background-size: cover;
  background-position: center 34%;
  /* The approved hero asset is a handshake composited over a skyline — the
     recruitment/agency cliché this brand should not lead with. Until an
     approved architectural or operational replacement exists, it is pushed
     toward texture rather than subject: desaturated, and sat under a heavier
     gradient. That also lifts the H1's contrast over the lit areas. */
  filter: grayscale(.62) contrast(1.02);
  opacity: .82;
}
.hero-grad {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.86) 48%, rgba(0,0,0,.76) 100%),
    linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 46%);
}
/* NO grid texture — clean executive look */
.hero-grid { display: none; }
.hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 72px;
  /* max content width ~55% of viewport — refined column */
  max-content-width: 600px;
}
.hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.hero-eyebrow-line { width: 28px; height: 1px; background: var(--orange); opacity: .7; }
.hero-h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.8vw, 68px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--white);
  margin-bottom: 24px;
  max-width: 780px;
}
/* Orange in headline matches brand system exactly — no adjustment needed */
.hero-h1 em {
  font-style: italic;
  color: #F58220;
}
.hero-p {
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255,255,255,.62);
  max-width: 420px;
  margin-bottom: 36px;
  padding-left: 16px;
  border-left: 1px solid rgba(245,130,32,.45);
}
.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: var(--orange);
  /* White on --orange is 2.59:1, below AA on the site's primary action.
     The brand orange is untouched; the ink darkens, giving 7.28:1. */
  color: var(--cta-ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background .25s, transform .2s;
}
.btn-primary, .btn-outline { min-height: 44px; }
.btn-primary:hover { background: var(--orange2); transform: translateY(-2px); }
.btn-primary svg { transition: transform .25s; }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 13px 36px;
  border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: border-color .25s, color .25s;
}
.btn-outline:hover { border-color: rgba(255,255,255,.75); color: var(--white); }

/* ═══════════════════════════════════════
   CONTACT — light bg with dark form panel
   exact layout from screenshot
═══════════════════════════════════════ */
#contact-sec {
  background: var(--white-sec);
  padding: 120px 0;
}
.contact-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 72px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
}
.contact-eyebrow { margin-bottom: 20px; }
.contact-h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 18px;
}
.contact-desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-mid);
  margin-bottom: 44px;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}
.c-icon {
  width: 20px;
  height: 20px;
  color: var(--orange-text);
  flex-shrink: 0;
  margin-top: 2px;
}
.c-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6B6462;
  margin-bottom: 4px;
}
.c-val {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.6;
}
.c-val a { color: var(--text); transition: color .2s; }
.c-val a:hover { color: var(--orange); }
.c-val-primary {
  font-size: 16px !important;
  font-weight: 500 !important;
}
.c-val-primary a { font-size: 16px; font-weight: 500; }
.c-val-sub {
  font-size: 13px;
  font-weight: 300;
  color: rgba(0,0,0,.62);
  line-height: 1.5;
}
.c-val-sub a { color: rgba(0,0,0,.62); transition: color .2s; }
.c-val-sub a:hover { color: var(--orange-text); }

/* Form panel — greyed container matching screenshot */
.contact-form-panel {
  background: var(--grey-sec);
  padding: 48px;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 2px 32px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.03);
  position: relative;
}
.contact-form-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), rgba(245,130,32,.2));
}
@media(max-width:767px) {
  .contact-form-panel { padding: 28px 20px; }
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 0;
}
.form-field {
  margin-bottom: 28px;
}
.f-label {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}
.f-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid #ccc;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}
.f-input:focus { border-bottom-color: var(--text); }
.f-input::placeholder { color: #bbb; }
/* On a phone these were 34px tall at 14px type: under the comfortable touch
   target, and small enough that iOS Safari zooms the page on focus. */
@media (max-width: 767px) {
  .f-input { font-size: 16px; min-height: 48px; padding: 12px 0; }
  textarea.f-input { min-height: 110px; }
}
select.f-input { appearance: none; cursor: pointer; background: transparent; }
option { background: var(--white-sec); }
.f-submit {
  width: 100%;
  padding: 16px;
  background: var(--text);
  color: var(--white);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.f-submit:hover { background: var(--orange); transform: translateY(-1px); }

/* ═══════════════════════════════════════
   FOOTER — pure black
═══════════════════════════════════════ */
#footer {
  background: var(--black);
  padding: 100px 72px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2.6fr 1fr 1fr 1.6fr;
  gap: 72px;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 72px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-logo {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 22px;
  display: block;
}
.footer-tagline {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.28);
  line-height: 1.85;
  margin-bottom: 28px;
  max-width: 270px;
  font-style: italic;
  letter-spacing: .01em;
}
.footer-social {
  display: flex;
  gap: 22px;
  align-items: center;
}
.f-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: rgba(255,255,255,.28);
  transition: color .25s ease, transform .25s ease;
  text-decoration: none;
  flex-shrink: 0;
  border: none;
  background: none;
}
.f-social-btn:hover {
  color: var(--orange);
  transform: translateY(-2px);
}
.footer-col-title {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 13px; }
.footer-links a {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.38);
  transition: color .25s, padding-left .2s;
  display: block;
  letter-spacing: .01em;
}
.footer-links a:hover {
  color: rgba(255,255,255,.85);
  padding-left: 4px;
}
.footer-hub {
  padding: 20px 20px 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.018);
  position: relative;
  overflow: hidden;
  margin-top: 4px;
}
.footer-hub::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--orange), rgba(245,130,32,.15));
}
.footer-hub-title {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.footer-hub-countries {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,.3);
  line-height: 2;
  letter-spacing: .03em;
}
.footer-mid {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.footer-copy {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,.2);
  letter-spacing: .05em;
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,.2);
  transition: color .2s;
  letter-spacing: .03em;
}
.footer-brand-bar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.footer-brand-bar-copy {
  font-size: 10px;
  font-weight: 300;
  color: rgba(255,255,255,.16);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-brand-bar-tag {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: rgba(245,130,32,.32);
  letter-spacing: .1em;
  font-family: var(--serif);
}
.footer-legal a:hover { color: rgba(255,255,255,.55); }

/* Footer contact block */
.footer-contact-block {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer-contact-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 2px;
}
.footer-contact-val {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .2s;
  display: block;
}
.footer-contact-val:hover { color: var(--white); }
.footer-contact-sub {
  font-size: 12px;
  color: rgba(255,255,255,.3);
}
.footer-contact-sub2 {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,.3);
  line-height: 1.5;
}

/* Wider brand column to fit contact info */
.footer-grid {
  grid-template-columns: 2.6fr 1fr 1fr 1.6fr;
}
@media(max-width:1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; padding-bottom: 56px; }
  #footer { padding: 80px 40px 0; }
}

/* ── MOBILE FOOTER — premium minimalist ── */
@media(max-width:767px) {
  /* Hide desktop footer, show mobile version */
  #footer .footer-grid,
  #footer .footer-mid,
  #footer .footer-brand-bar { display: none; }
  .footer-mobile { display: flex !important; }
  #footer { padding: 0; }
}

/* Mobile footer — hidden on desktop */
.footer-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 56px 24px 44px;
  gap: 0;
  width: 100%;
}
.fm-logo {
  height: 64px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
  margin-bottom: 14px;
}
.fm-tagline {
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  color: rgba(255,255,255,.28);
  letter-spacing: .08em;
  margin-bottom: 32px;
  text-align: center;
}
.fm-divider {
  width: 28px; height: 1px;
  background: var(--orange);
  opacity: .5;
  margin-bottom: 32px;
}
.fm-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}
.fm-contact a {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .2s;
  text-align: center;
}
.fm-contact a:hover { color: var(--white); }
.fm-contact a.fm-primary {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,.62);
}
.fm-socials {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 32px;
}
.fm-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.28);
  transition: color .25s, transform .25s;
  text-decoration: none;
  width: 32px; height: 32px;
}
.fm-social-btn:hover { color: var(--orange); transform: translateY(-2px); }
.fm-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.fm-link {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  text-decoration: none;
  padding: 6px 14px;
  transition: color .2s;
  border-right: 1px solid rgba(255,255,255,.08);
}
.fm-link:last-child { border-right: none; }
.fm-link:hover { color: rgba(255,255,255,.65); }
.fm-copy {
  font-size: 10px;
  font-weight: 300;
  color: rgba(255,255,255,.16);
  letter-spacing: .06em;
  text-align: center;
  line-height: 1.9;
}
.fm-copy a {
  color: rgba(255,255,255,.16);
  text-decoration: none;
  transition: color .2s;
}
.fm-copy a:hover { color: rgba(255,255,255,.4); }

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET 768–1023px
═══════════════════════════════════════ */
@media(max-width:1023px) {
  #nav, #footer { padding-left: 40px; padding-right: 40px; }
  .hero-body, .contact-inner { padding-left: 40px; padding-right: 40px; }
  /* Tablet is where the header already switches to the hamburger menu, so the
     hero stops enforcing a full 100svh screen here too — it was previously
     cinematic-height with a fixed nav var, leaving 300–500px of dead space
     below the CTA before the next section. Content-driven with a moderate
     band keeps it airy without the empty viewport. */
  #hero {
    min-height: auto;
    --hero-lift: clamp(20px, 3vh, 40px);
    --hero-band: clamp(90px, 13vh, 150px);
  }
  .contact-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE < 768px
═══════════════════════════════════════ */
@media(max-width:767px) {
  /* NAV */
  #nav { padding: 0 20px; height: 58px; }
  #nav.scrolled { height: 50px; }
  .nav-logo img { height: 52px; }

  /* HERO — full-bleed on phones too: fills the viewport like the desktop
     hero, using the same lift-smaller-than-band + centered-content
     mechanism so the composition sits in the upper-middle rather than
     dead-center, and the background image carries the extra height. */
  #hero {
    --hero-nav: 58px;
    --hero-lift: clamp(18px, 3vh, 30px);
    --hero-band: clamp(56px, 9vh, 96px);
    min-height: 100svh;
    align-items: center;
  }
  .hero-body { padding: 0 20px; }
  .hero-h1 { font-size: clamp(36px, 10vw, 54px); margin-bottom: 20px; }
  .hero-p { font-size: 14px; padding-left: 14px; margin-bottom: 32px; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-outline { width: 100%; justify-content: center; padding: 16px 20px; }


  /* CONTACT */
  #contact-sec { padding: 80px 0; }
  .contact-inner { padding: 0 24px; grid-template-columns: 1fr; gap: 48px; }
  .contact-h2 { font-size: 28px; }
  .contact-form-panel { padding: 28px 20px; }
  .form-row-2 { grid-template-columns: 1fr; gap: 0; }

  /* FOOTER */
  #footer { padding: 56px 20px 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
  .footer-logo { height: 48px; }

}

@media(max-width:479px) {
  .hero-h1 { font-size: clamp(30px, 9vw, 44px); }
}

@media (max-width:700px){
  .elite-nav-logo{width:92px;height:52px;flex-basis:92px}
  .elite-hero-nav .elite-nav-logo img{height:52px!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION BREAKPOINT SYSTEM
   The desktop nav needs room for logo + links + language/CTA group. Measured
   intrinsic requirement (nowrap, with comfortable gutters):
       Home EN 962px · Home FR 1027px · Talents 1056px · Investment 1218px
   The links gap and nav padding tighten below 1200px, which lowers the real
   requirement to ~899 / ~928 / ~1090. The desktop nav is therefore kept down
   to 1024px for Home and Talents, and to 1100px for Investment, whose labels
   ("Greece Golden Visa", "Private consultation") are genuinely longer.
   Below its own threshold each variant uses the existing mobile menu — a
   hamburger on a tablet beats a compressed or overlapping desktop bar.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1200px) and (min-width:1024px){
  #nav{padding-left:44px;padding-right:44px}
  .nav-links{gap:38px}
  .nav-right{gap:20px}
  .nav-cta{padding-left:20px;padding-right:20px}
}
/* Home + Talents: mobile menu below 1024px */
@media (max-width:1023px){
  .nav-links,.nav-right{display:none}
  .mobile-nav-right{display:flex}
}
/* Investment: longer labels need until 1100px */
@media (max-width:1099px){
  .investment-site .nav-links,.investment-site .nav-right{display:none}
  .investment-site .mobile-nav-right{display:flex}
}
@media (max-width:1099px) and (min-width:1024px){
  .investment-site #nav{padding-left:44px;padding-right:44px}
}

/* ── "Our divisions" desktop menu ──────────────────────────────────────────
   An elegant list of the six divisions, presented as equal members of the
   ecosystem. Opens on hover and on keyboard focus (:focus-within), so it needs
   no JS, and the trigger stays a real link to the divisions section for anyone
   who clicks straight through. */
.nav-has-menu{position:relative;display:flex;align-items:center;align-self:stretch}
.nav-menu-trigger{display:inline-flex;align-items:center;gap:7px}
.nav-menu-chevron{width:9px;height:9px;flex:0 0 9px;transition:transform .25s ease;opacity:.75}
.nav-has-menu:hover .nav-menu-chevron,
.nav-has-menu:focus-within .nav-menu-chevron{transform:rotate(180deg)}
.nav-menu{
  position:absolute;top:100%;left:-22px;z-index:20;
  min-width:264px;padding:14px 0;
  background:var(--white);border:1px solid var(--line-l);
  box-shadow:0 22px 52px rgba(0,0,0,.13);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .24s ease,transform .24s ease,visibility .24s;
}
.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
/* .elite-hero-nav #nav .nav-links a is (1,3,1) — these must outrank it, since
   the panel stays light even when the nav is transparent over a dark hero. */
.elite-hero-nav #nav .nav-links .nav-menu .nav-menu-item,
#nav .nav-links .nav-menu .nav-menu-item{
  position:relative;display:block;padding:11px 26px;
  font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text);line-height:1.4;transition:color .22s ease,padding-left .22s ease;
}
/* A hairline that draws in from the left on hover — the same restrained accent
   the Talents pathway rail uses. */
#nav .nav-links .nav-menu .nav-menu-item::before{
  content:"";position:absolute;left:26px;top:50%;transform:translateY(-50%);
  width:0;height:1px;background:var(--orange);transition:width .26s ease;
}
.elite-hero-nav #nav .nav-links .nav-menu a.nav-menu-item:hover,
.elite-hero-nav #nav .nav-links .nav-menu a.nav-menu-item:focus-visible,
#nav .nav-links .nav-menu a.nav-menu-item:hover,
#nav .nav-links .nav-menu a.nav-menu-item:focus-visible{color:var(--orange-text);padding-left:44px}
#nav .nav-links .nav-menu a.nav-menu-item:hover::before,
#nav .nav-links .nav-menu a.nav-menu-item:focus-visible::before{width:12px}
#nav .nav-links .nav-menu a.nav-menu-item::after{display:none}
#nav .nav-links .nav-menu a.nav-menu-item:focus-visible{outline:1px solid var(--orange);outline-offset:-2px}

/* ── Featured opportunity nested under Elite Investment ────────────────────
   Greece is a flagship opportunity inside Elite Investment, not a seventh
   division — so it reads as a child of that row: indented, on a hairline,
   with a small FEATURED label. Restrained on purpose; no badge, no fill. */
.nav-menu-featured{
  display:block;position:relative;
  margin:2px 26px 6px 40px;padding:10px 0 11px 14px;
  border-left:1px solid rgba(245,130,32,.42);
  transition:border-color .22s ease;
}
.nav-menu-featured:hover,.nav-menu-featured:focus-visible{border-left-color:var(--orange)}
.nav-menu-featured:focus-visible{outline:1px solid var(--orange);outline-offset:3px}
#nav .nav-links .nav-menu a.nav-menu-featured::after{display:none}
.nav-menu-featured__tag{
  display:block;font-size:8.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-text);margin-bottom:6px;
}
.nav-menu-featured__name{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--serif);font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--text);line-height:1.2;
}
.nav-menu-featured__arrow{
  font-family:var(--sans);font-size:13px;color:var(--orange);
  transition:transform .24s ease;flex:0 0 auto;
}
.nav-menu-featured:hover .nav-menu-featured__arrow{transform:translateX(4px)}
.nav-menu-featured__partner{
  display:block;margin-top:5px;
  font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#6C6567;
}
/* The panel is light in every nav state, so pin the colours past the
   transparent-over-dark-hero rules that outrank a bare class. */
.elite-hero-nav #nav .nav-links .nav-menu .nav-menu-featured .nav-menu-featured__name,
#nav .nav-links .nav-menu .nav-menu-featured .nav-menu-featured__name{color:var(--text)}
.elite-hero-nav #nav .nav-links .nav-menu .nav-menu-featured .nav-menu-featured__tag,
#nav .nav-links .nav-menu .nav-menu-featured .nav-menu-featured__tag{color:var(--orange-text)}
.elite-hero-nav #nav .nav-links .nav-menu .nav-menu-featured .nav-menu-featured__partner,
#nav .nav-links .nav-menu .nav-menu-featured .nav-menu-featured__partner{color:#6C6567}
.nav-menu-featured:hover .nav-menu-featured__name{color:var(--orange-text)}

/* ── Legal links that have no published document yet ───────────────────────
   Marked as forthcoming rather than left as href="#", which navigates nowhere. */
.footer-legal .is-pending{color:rgba(255,255,255,.34);cursor:default}

/* ── Small orange text on light grounds ────────────────────────────────────
   Brand orange is unchanged for display type, buttons, rules, icons and every
   dark-background use. Only small orange text sitting on a light ground takes
   the darker tone, so these selectors name the light sections explicitly
   rather than darkening globally and undoing it again. */
#contact-sec .eyebrow{color:var(--orange-text)}
/* Form labels were #888 on #EDEEEF (3.05:1); this clears AA and stays neutral. */
.f-label{color:#666666}

/* ── Touch targets ─────────────────────────────────────────────────────────
   The icons keep their refined proportions; only the invisible hit area grows,
   using padding and negative margin so surrounding layout is unaffected. These
   controls are hidden on desktop anyway, so the rules need no breakpoint and
   apply wherever the mobile menu is in use (up to 1099px on Investment). */
.hamburger-btn{padding:15px 12px 15px 16px;margin-right:-8px}
.mobile-lang-btn{padding:17px 9px;margin:-17px 0}
.mobile-lang-toggle{gap:2px}
.fm-contact a{display:inline-block;padding:7px 0}

/* ── Mobile micro-typography floor ─────────────────────────────────────────
   Contextual labels carry real information (division attribution, section
   context), so they get a readable floor; letter-spacing absorbs the width. */
@media (max-width:700px){
  .footer-hub-title{font-size:10px;letter-spacing:.16em}
  .f-label{font-size:10px;letter-spacing:.1em}
  .btn-primary,.btn-outline,.f-submit,.nav-cta{font-size:11px;letter-spacing:.14em}
}

/* Visually hidden, still announced by assistive technology. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fm-copy .is-pending{color:rgba(255,255,255,.34)}


/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE ARCHITECTURE — discovery → interest → trust → action
   ──────────────────────────────────────────────────────────────────────────
   The homepage is a router, not an encyclopedia. Its rhythm alternates
   deliberately — dark hero, warm off-white ecosystem index, white Talents
   segmentation, deep-navy Investment/Greece, off-white Why Elite, near-black
   router — so no two consecutive screens read the same. Shared tokens and
   the existing button system carry through; nothing here restyles a
   division page.
   ══════════════════════════════════════════════════════════════════════════ */

:root { --navy: #0A1420; --navy2: #0E1C2C; --paper: #F4F3F1; }

.home-shell { max-width: 1400px; margin: 0 auto; padding: 0 72px; }

/* ── Hero ──────────────────────────────────────────────────────────────────
   The H1 carries the entity name and the category in one heading: a small
   letter-spaced line for "Elite International Services", the display line
   underneath. One H1, and it says what the company is. */
.hero-h1__entity {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 18px;
}
.hero-h1__claim { display: block; }

/* ── Ecosystem index — a typographic division index, not a card wall ───────
   Six editorial rows on a warm ground: number, name, discipline, one
   concrete line, and a small image window. Rules between rows do the work
   that six rectangles used to. */
#divisions-sec {
  background: var(--paper) !important;
  color: var(--text) !important;
  padding: clamp(72px, 9vw, 120px) 0 !important;
  overflow: hidden;
}
#divisions-sec .eco-head { max-width: 1400px; margin: 0 auto 8px; padding: 0 72px; }
#divisions-sec .eyebrow { color: var(--orange-text); font-size: 10px; font-weight: 500; letter-spacing: .22em; }
.eco-h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 20px;
}
.eco-h2 em { font-style: italic; color: var(--orange-text); }
.eco-lead {
  max-width: 560px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
  margin-bottom: 8px;
}
.eco-index { list-style: none; max-width: 1400px; margin: 0 auto; padding: 0 72px; }
.eco-row { border-top: 1px solid rgba(0,0,0,.13); }
.eco-row:last-child { border-bottom: 1px solid rgba(0,0,0,.13); }
.eco-row__link {
  display: grid;
  grid-template-columns: 58px 176px minmax(0,1fr) 252px;
  grid-template-areas: "num thumb main go";
  gap: 0 36px;
  align-items: center;
  padding: 28px 0;
  position: relative;
  transition: background .3s ease;
}
.eco-row__num   { grid-area: num; }
.eco-row__thumb { grid-area: thumb; }
.eco-row__main  { grid-area: main; }
.eco-row__go    { grid-area: go; }
.eco-row__link::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.eco-row__link:hover::before, .eco-row__link:focus-visible::before { transform: scaleX(1); }
.eco-row__num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--orange-text);
  align-self: center;
}
.eco-row__name {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 0 0 6px;
  transition: transform .35s ease;
}
.eco-row__link:hover .eco-row__name { transform: translateX(6px); }
.eco-row__disc {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6B6462;
  margin-bottom: 10px;
}
.eco-row__desc {
  display: block;
  max-width: 520px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--text-mid);
}
.eco-row__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  line-height: 1.45;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-text);
  text-align: right;
}
.eco-row__go span { transition: transform .3s ease; }
.eco-row__link:hover .eco-row__go span { transform: translateX(5px); }
.eco-row__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: #ddd;
}
.eco-row__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02) brightness(.94);
  transform: scale(1.01);
  transition: filter .55s ease, transform .55s ease;
}
.eco-row__link:hover .eco-row__thumb img { filter: grayscale(0) contrast(1.05); transform: scale(1.05); }

/* The Investment row names its flagship opportunity permanently — a
   hairline and one line of type, its own link, never nested inside the
   division link. New opportunities slot in here without a redesign. */
.eco-row__feature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px 94px;
  padding: 13px 0;
  border-top: 1px solid rgba(245,130,32,.45);
  min-height: 44px;
}
.eco-row__feature-tag {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange-text); white-space: nowrap;
}
.eco-row__feature-name {
  flex: 1 1 auto;
  font-size: 14px; font-weight: 400; color: var(--text);
}
.eco-row__feature-name .eco-row__fx { color: #6B6462; font-size: 13px; }
.eco-row__feature-arrow { flex: 0 0 auto; color: var(--orange-text); font-size: 15px; transition: transform .3s ease; }
.eco-row__feature:hover .eco-row__feature-arrow { transform: translateX(4px); }
.eco-row__feature:hover .eco-row__feature-name { color: var(--orange-text); }

/* ── Elite Talents — segmentation, not a service list ──────────────────── */
#talents-sec { background: var(--white-sec); padding: clamp(72px, 9vw, 120px) 0; }
.tal-head { max-width: 1400px; margin: 0 auto 48px; padding: 0 72px; }
#talents-sec .eyebrow { color: var(--orange-text); }
.tal-h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.tal-h2 em { font-style: italic; color: var(--orange-text); }
.tal-lead { max-width: 640px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--text-mid); }
.tal-body { max-width: 1400px; margin: 0 auto; padding: 0 72px; }
.tal-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.tal-path {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 3px;
  padding: 32px 32px 30px;
  display: flex; flex-direction: column;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.tal-path:hover { border-color: rgba(0,0,0,.24); box-shadow: 0 16px 44px rgba(0,0,0,.06); }
.tal-path__tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange-text); margin-bottom: 14px;
}
.tal-path__tag::before { content: ""; width: 22px; height: 1px; background: var(--orange); }
.tal-path__title {
  font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); font-weight: 400;
  line-height: 1.14; letter-spacing: -.015em; margin-bottom: 16px;
}
.tal-path__list { list-style: none; margin-bottom: 24px; }
.tal-path__list li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--text-mid);
}
.tal-path__list li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 1px; background: var(--orange);
}
.tal-path__desc { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--text-mid); margin-bottom: 24px; }
.tal-path__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.tal-path__alt {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); border-bottom: 1px solid rgba(0,0,0,.22);
  transition: color .25s, border-color .25s;
}
.tal-path__alt:hover { color: var(--orange-text); border-color: var(--orange); }

/* ── Elite Investment × the featured opportunity ───────────────────────────
   The visual shift: deep navy, one large architectural image, editorial
   type. Investment is the frame; the opportunity block is a repeatable
   pattern, so a second country or programme drops in beneath it. */
#investment-sec {
  background: var(--navy);
  color: var(--white);
  padding: clamp(72px, 9vw, 120px) 0;
  overflow: hidden;
}
.inv-lede { max-width: 1400px; margin: 0 auto 64px; padding: 0 72px; }
#investment-sec .eyebrow { color: var(--orange); }
.inv-h2 {
  font-family: var(--serif); font-size: clamp(30px, 4vw, 54px); font-weight: 400;
  line-height: 1.06; letter-spacing: -.02em; color: var(--white); margin-bottom: 20px; max-width: 15ch;
}
.inv-h2 em { font-style: italic; color: var(--orange); }
.inv-lead { max-width: 620px; font-size: 16px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.74); margin-bottom: 26px; }
.inv-go {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white); border-bottom: 1px solid rgba(245,130,32,.6);
  transition: color .25s, border-color .25s;
}
.inv-go:hover { color: var(--orange); border-color: var(--orange); }
.inv-go span { transition: transform .3s ease; }
.inv-go:hover span { transform: translateX(5px); }

.opportunity {
  max-width: 1400px; margin: 0 auto; padding: 0 72px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.opportunity__media { position: relative; border-radius: 3px; overflow: hidden; }
.opportunity__media img { width: 100%; height: auto; display: block; }
.opportunity__media::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 2px; background: var(--orange);
}
.opportunity__tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 16px;
}
.opportunity__tag::before { content: ""; width: 26px; height: 1px; background: var(--orange); }
.opportunity__title {
  font-family: var(--serif); font-size: clamp(34px, 4.6vw, 62px); font-weight: 400;
  line-height: 1.02; letter-spacing: -.025em; color: var(--white); margin-bottom: 20px;
}
.opportunity__title em { font-style: italic; color: var(--orange); }
.opportunity__lead { max-width: 480px; font-size: 16px; font-weight: 300; line-height: 1.72; color: rgba(255,255,255,.76); margin-bottom: 22px; }
.opportunity__points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 26px; }
.opportunity__points li {
  position: relative; padding-left: 15px;
  font-size: 13px; font-weight: 400; letter-spacing: .04em; color: rgba(255,255,255,.9);
}
.opportunity__points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 1px; background: var(--orange); }
.opportunity__mark { border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; margin-bottom: 28px; }
.opportunity__x {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--white); margin-bottom: 7px;
}
.opportunity__x em { font-style: normal; color: var(--orange); padding: 0 3px; }
.opportunity__role { display: block; font-size: 12px; font-weight: 300; letter-spacing: .04em; color: rgba(255,255,255,.62); }
.opportunity__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.opportunity__actions .btn-primary span[aria-hidden],
.opportunity__actions .btn-outline span[aria-hidden] { font-size: 14px; line-height: 1; }

/* ── Why Elite — the consolidated trust section ───────────────────────────
   Replaces the former About, Trust and Methodology sections: their useful
   substance, none of the corporate filler, plus the group facts and the
   sectors served that Industries used to carry as icons. */
#why-sec { background: var(--paper); padding: clamp(72px, 9vw, 120px) 0; }
.why-head { max-width: 1400px; margin: 0 auto 52px; padding: 0 72px; }
#why-sec .eyebrow { color: var(--orange-text); }
.why-h2 {
  font-family: var(--serif); font-size: clamp(30px, 4vw, 54px); font-weight: 400;
  line-height: 1.06; letter-spacing: -.02em; margin-bottom: 18px;
}
.why-h2 em { font-style: italic; color: var(--orange-text); }
.why-lead { max-width: 620px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--text-mid); }
.why-grid {
  max-width: 1400px; margin: 0 auto 64px; padding: 0 72px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.why-item { border-top: 1px solid rgba(0,0,0,.16); padding-top: 20px; }
.why-item__num { font-size: 12px; font-weight: 500; letter-spacing: .18em; color: var(--orange-text); margin-bottom: 14px; }
.why-item h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.18; margin-bottom: 12px; }
.why-item p { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--text-mid); }
.why-foot {
  position: relative;
  max-width: 1400px; margin: 0 auto; padding: 34px 72px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
}
/* The rule is drawn inside the gutters, not across them — a border on the
   padded box would run out past the text column. */
.why-foot::before {
  content: ""; position: absolute; top: 0; left: 72px; right: 72px;
  height: 1px; background: rgba(0,0,0,.16);
}
.why-foot__label {
  display: block; font-size: 10px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: #6B6462; margin-bottom: 12px;
}
.why-foot__block p { font-size: 15px; font-weight: 300; line-height: 1.66; color: var(--text); }
.why-foot__geo { letter-spacing: .02em; }

/* ── The router — the last decision before contact ────────────────────── */
#router-sec { background: #0A0A0A; color: var(--white); padding: clamp(72px, 9vw, 116px) 0; }
.router-shell { max-width: 1400px; margin: 0 auto; padding: 0 72px; }
#router-sec .eyebrow { color: var(--orange); }
.router-h2 {
  font-family: var(--serif); font-size: clamp(30px, 4.2vw, 56px); font-weight: 400;
  line-height: 1.05; letter-spacing: -.02em; color: var(--white); margin-bottom: 40px;
}
.router-list { display: grid; border-top: 1px solid rgba(255,255,255,.16); }
.router-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 76px; padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  transition: padding-left .35s cubic-bezier(.4,0,.2,1), background .3s ease;
}
.router-row:hover, .router-row:focus-visible { padding-left: 16px; background: rgba(255,255,255,.03); }
.router-row__q {
  display: block; font-family: var(--serif); font-size: clamp(20px, 2.3vw, 30px);
  font-weight: 400; line-height: 1.15; letter-spacing: -.015em; color: var(--white); margin-bottom: 6px;
}
.router-row__dest {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}
.router-row__arrow { font-size: 26px; line-height: 1; color: var(--orange); transition: transform .3s ease; }
.router-row:hover .router-row__arrow { transform: translateX(7px); }

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .home-shell, #divisions-sec .eco-head, .eco-index, .tal-head, .tal-body,
  .inv-lede, .opportunity, .why-head, .why-grid, .why-foot, .router-shell { padding-left: 40px; padding-right: 40px; }
  .eco-row__link { grid-template-columns: 44px 128px minmax(0,1fr) 190px; gap: 0 22px; }
  .eco-row__feature { margin-left: 72px; }
  .tal-paths { grid-template-columns: 1fr; gap: 20px; }
  .opportunity { grid-template-columns: 1fr; gap: 32px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .why-foot { grid-template-columns: 1fr 1fr; }
  .why-foot::before { left: 40px; right: 40px; }
}

/* Portrait tablets at desktop widths (1024x1366 and friends) still matched the
   base 100svh hero, which left ~500px of empty ground below the CTA. The
   landscape desktop hero is unchanged — this only catches tall viewports. */
@media (min-width: 1024px) and (max-aspect-ratio: 1/1) {
  #hero { min-height: auto; --hero-band: clamp(110px, 12vh, 190px); }
}

/* ── Mobile ──────────────────────────────────────────────────────────────
   The mobile page is composed, not stacked: the hero is content-driven
   (no forced viewport height and the dead space it produced), the index
   rows keep their thumbnail so each screen still changes visually, and
   every row and route clears a 44px target. */
@media (max-width: 767px) {
  #hero {
    --hero-lift: clamp(16px, 2.4vh, 26px);
    --hero-band: clamp(48px, 7vh, 72px);
    min-height: clamp(500px, 70svh, 624px);
    padding-top: calc(var(--hero-nav) + 26px);
  }
  .hero-h1__entity { font-size: 10px; letter-spacing: .26em; margin-bottom: 14px; }
  .hero-h1 { font-size: clamp(32px, 8.8vw, 46px); margin-bottom: 18px; }
  .hero-p { margin-bottom: 26px; }

  .home-shell, #divisions-sec .eco-head, .eco-index, .tal-head, .tal-body,
  .inv-lede, .opportunity, .why-head, .why-grid, .why-foot, .router-shell { padding-left: 20px; padding-right: 20px; }

  #divisions-sec { padding: 64px 0 !important; }
  #divisions-sec .eco-head { margin-bottom: 4px; }
  .eco-lead { font-size: 15px; }
  .eco-row__link {
    grid-template-columns: 64px minmax(0,1fr);
    grid-template-areas: "thumb main" "go go";
    gap: 0 16px;
    align-items: start;
    padding: 20px 0;
    min-height: 96px;
  }
  .eco-row__thumb { aspect-ratio: 1 / 1; align-self: start; margin-top: 4px; }
  .eco-row__thumb img { filter: grayscale(.55) contrast(1.04) brightness(.95); }
  .eco-row__num {
    grid-area: auto;
    position: absolute; right: 0; top: 21px;
    font-size: 11px; color: #6B6462;
  }
  .eco-row__name { font-size: 22px; margin-bottom: 4px; padding-right: 34px; }
  .eco-row__disc { font-size: 10px; letter-spacing: .12em; margin-bottom: 7px; }
  .eco-row__desc { font-size: 14px; line-height: 1.55; }
  .eco-row__go { justify-self: start; margin-top: 14px; min-height: 24px; font-size: 11px; }
  .eco-row__feature { margin: 0 0 18px 0; flex-wrap: wrap; gap: 6px 12px; padding: 12px 0 14px; }
  .eco-row__feature-tag { flex: 0 0 100%; font-size: 10px; }
  .eco-row__feature-name { font-size: 15px; }

  #talents-sec { padding: 64px 0; }
  .tal-head { margin-bottom: 26px; }
  .tal-lead { font-size: 15px; }
  .tal-path { padding: 26px 22px 24px; }
  .tal-path__list li, .tal-path__desc { font-size: 14.5px; }
  .tal-path__actions { gap: 14px; }
  .tal-path__actions .btn-primary { width: 100%; justify-content: center; }

  #investment-sec { padding: 64px 0; }
  .inv-lede { margin-bottom: 40px; }
  .inv-lead { font-size: 15px; }
  .opportunity__lead { font-size: 15px; }
  .opportunity__actions .btn-primary, .opportunity__actions .btn-outline { width: 100%; justify-content: center; }

  #why-sec { padding: 64px 0; }
  .why-head { margin-bottom: 30px; }
  .why-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 38px; }
  .why-item h3 { font-size: 19px; }
  .why-item p { font-size: 14.5px; }
  .why-foot { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
  .why-foot::before { left: 20px; right: 20px; }
  .why-foot__block p { font-size: 14.5px; }

  #router-sec { padding: 60px 0; }
  .router-h2 { margin-bottom: 26px; }
  .router-row { min-height: 76px; padding: 18px 0; }
  .router-row__q { font-size: 20px; }
  .router-row__dest { font-size: 10px; letter-spacing: .12em; }
}

@media (max-width: 380px) {
  .eco-row__link { grid-template-columns: 56px minmax(0,1fr); }
  .eco-row__name { font-size: 20px; }
}

/* Reduced motion: nothing here should animate a visitor into waiting.
   The division pages already neutralised the reveal system; the homepage and
   the shared base never did, so scroll-reveal content simply appears. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .eco-row__link, .eco-row__link::before, .eco-row__name, .eco-row__thumb img,
  .eco-row__go span, .router-row, .router-row__arrow, .tal-path, .inv-go span { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   LEAD FUNNEL — intent router, division actions, enquiry panel
   ──────────────────────────────────────────────────────────────────────────
   The conversion architecture stays invisible until the visitor expresses
   intent: editorial rows, no boxes, no badges, and one short form that only
   appears for the visitor who cannot place themselves.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Elite Investment: two text actions, so the navy buttons below stay the
      loudest thing in the section ── */
.inv-actions { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; }
.inv-go--quiet { color: rgba(255,255,255,.66); border-bottom-color: rgba(255,255,255,.24); }
.inv-go--quiet:hover { color: var(--white); border-bottom-color: rgba(255,255,255,.55); }

/* ── Greece: the property link sits below the two buttons as the quietest of
      the three intent levels ── */
.opportunity__projects {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.66);
  border-bottom: 1px solid rgba(255,255,255,.22);
  transition: color .25s, border-color .25s;
}
.opportunity__projects:hover { color: var(--white); border-bottom-color: rgba(255,255,255,.55); }

/* ── The router ─────────────────────────────────────────────────────────── */
.router-row {
  width: 100%;
  text-align: left;
  gap: 20px;
  font: inherit;
  color: inherit;
}
.router-row__n {
  flex: 0 0 auto;
  align-self: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  color: rgba(255,255,255,.58);
}
.router-row__body { flex: 1 1 auto; min-width: 0; }
.router-row:hover .router-row__n, .router-row:focus-visible .router-row__n { color: var(--orange); }
.router-row__arrow--toggle { transition: transform .3s ease; }
.router-row--open[aria-expanded="true"] .router-row__arrow--toggle { transform: rotate(90deg); }
.router-row:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.router-aside {
  margin-top: 26px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.62);
}
.router-aside a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  border-bottom: 1px solid rgba(245,130,32,.55);
  transition: color .25s, border-color .25s;
}
.router-aside a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* ── The one enquiry on the homepage ────────────────────────────────────── */
.router-enquiry {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.router-enquiry[hidden] { display: none; }
.enquiry-lede {
  max-width: 560px;
  margin-bottom: 26px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,.74);
}
.enquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; }
.enquiry-grid .form-field--full { grid-column: 1 / -1; }
.router-enquiry .f-label { color: rgba(255,255,255,.62); }
.router-enquiry .f-label { margin-bottom: 4px; }
.router-enquiry .f-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.28);
  color: var(--white);
  border-radius: 0;
  transition: border-color .25s;
}
.router-enquiry .f-input:focus { outline: none; border-bottom-color: var(--orange); }
.router-enquiry select.f-input option { color: #111; }

/* A honeypot must be unreachable by a person and by assistive technology,
   without display:none, which some bots read as a signal. Same technique as
   .gv-hp on the Golden Visa page, and its input keeps the form's normal
   control metrics so it is indistinguishable from a real field to a bot. */
.enquiry-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.enquiry-hp input { min-height: 48px; font-size: 16px; }

.enquiry-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  cursor: pointer;
}
.enquiry-consent input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 18px; accent-color: var(--orange); }
.router-enquiry .enquiry-consent { color: rgba(255,255,255,.74); }

.enquiry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 26px;
}
.enquiry-wa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.24);
  transition: color .25s, border-color .25s;
}
.enquiry-wa:hover { color: var(--white); border-bottom-color: rgba(255,255,255,.6); }
.contact-wa { color: var(--text-mid); border-bottom-color: rgba(0,0,0,.2); margin-top: 18px; }
.contact-wa:hover { color: var(--orange-text); border-bottom-color: var(--orange); }

.enquiry-status:empty { display: none; }
.form-status[data-state] { margin-top: 20px; font-size: 14px; line-height: 1.6; }
.form-status[data-state="ok"] { color: #1F7A46; }
.form-status[data-state="error"] { color: #B3261E; }
.router-enquiry .form-status[data-state="ok"] { color: #6FD69B; }
.router-enquiry .form-status[data-state="error"] { color: #FF9E93; }
.form-status a { text-decoration: underline; }

.field-error {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.5;
  color: #B3261E;
}
.router-enquiry .field-error { color: #FF9E93; }
.f-input[aria-invalid="true"] { border-bottom-color: #B3261E; }
.router-enquiry .f-input[aria-invalid="true"] { border-bottom-color: #FF9E93; }

/* ── Tablet ─────────────────────────────────────────────────────────────── */
/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .inv-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .opportunity__projects { margin-top: 18px; font-size: 14px; }
  .router-row { gap: 14px; align-items: flex-start; }
  .router-row__n { align-self: flex-start; padding-top: 5px; font-size: 10px; }
  .router-row__arrow { align-self: center; }
  .router-aside { font-size: 14px; }
  .enquiry-grid { grid-template-columns: 1fr; gap: 14px; }
  .enquiry-actions { gap: 14px; }
  .enquiry-actions .btn-primary { width: 100%; justify-content: center; }
  .router-enquiry .f-input { font-size: 16px; min-height: 48px; padding: 12px 0; }
  .router-enquiry textarea.f-input { min-height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .opportunity__projects,
  .router-row__arrow--toggle, .inv-go--quiet, .enquiry-wa { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ROUTER DENSITY REFINEMENT
   The seven defined needs read as one scannable index; the uncertain visitor
   is deliberately outside it, because a specific need goes to a specialist and
   an unclear one goes to an adviser.
   ══════════════════════════════════════════════════════════════════════════ */

.router-unsure {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.router-unsure__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 56px;
  padding: 8px 0;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: padding-left .35s cubic-bezier(.4,0,.2,1);
}
.router-unsure__btn:hover { padding-left: 12px; }
.router-unsure__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.router-unsure__q {
  display: block;
  font-size: 13px; font-weight: 300; letter-spacing: .01em;
  color: rgba(255,255,255,.62);
  margin-bottom: 5px;
}
.router-unsure__cta {
  display: block;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.15; letter-spacing: -.015em;
  color: var(--white);
}
.router-unsure__btn:hover .router-unsure__cta { color: var(--orange); }
.router-unsure__arrow {
  flex: 0 0 auto;
  font-size: 22px; line-height: 1; color: var(--orange);
  transition: transform .3s ease;
}
.router-unsure__btn[aria-expanded="true"] .router-unsure__arrow { transform: rotate(90deg); }

@media (max-width: 767px) {
  /* One line per need. The destination line is real information on a wide
     screen and repetition on a narrow one, where the label already names the
     division — so it is the thing that goes, not the type size. */
  .router-row { min-height: 60px; padding: 11px 0; gap: 12px; align-items: center; }
  .router-row__dest { display: none; }
  .router-row__q { font-size: 19px; margin-bottom: 0; }
  .router-row__n { align-self: center; padding-top: 0; }
  .router-row__arrow { font-size: 22px; }
  .router-unsure { margin-top: 22px; padding-top: 20px; }
  .router-unsure__q { font-size: 12.5px; }
  .router-unsure__cta { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .router-unsure__btn, .router-unsure__arrow { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PARTNER BRANDING — GoGreece
   ──────────────────────────────────────────────────────────────────────────
   Two approved assets are supplied: the original colour lockup and an
   all-white one. The correct file is chosen per background rather than
   filtering one into the other, so the brand always renders as issued.
   Intrinsic ratio is preserved everywhere (auto height, never object-fit),
   and width/height attributes on the tag reserve the box so nothing shifts.
   ══════════════════════════════════════════════════════════════════════════ */

.partner-logo {
  display: block;
  width: var(--partner-logo-w, 180px);
  height: auto;
  max-width: 100%;
}

/* A standalone supporting mention, not part of an × lockup. */
.partner-logo--sm { --partner-logo-w: 140px; }

/* The tagline under the wordmark stops being comfortably legible below about
   150px, and the brief rules out cropping it, so the floor holds on phones
   rather than shrinking the asset into illegibility. */
@media (max-width: 767px) {
  .partner-logo--sm { --partner-logo-w: 138px; }
}

/* An × lockup: both houses shown as their own issued marks. Sizing is by
   height rather than width, because the two have different aspect ratios
   (Elite 2.13:1, GoGreece 3.73:1) and matching widths would set them at
   wildly different sizes. */
.partner-lockup {
  --elite-h: 42px;
  --partner-h: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Not equal heights: the Elite mark stacks three lines and a tagline into its
   box where GoGreece uses one wordmark and one tagline, so matching heights
   would render Elite's type at roughly half the size. Height is set per mark
   so the two read at the same optical weight, with Elite never the smaller. */
.partner-lockup__mark {
  display: block;
  width: auto;
  max-width: 100%;
}
.partner-lockup__mark--elite   { height: var(--elite-h); }
.partner-lockup__mark--partner { height: var(--partner-h); }
.partner-lockup__x {
  font-size: 14px;
  line-height: 1;
  color: var(--orange);
}
.partner-lockup--md { --elite-h: 42px; --partner-h: 28px; }
.partner-lockup--lg { --elite-h: 50px; --partner-h: 34px; }

/* The relationship line always sits directly under the lockup, so the marks
   need their own space rather than butting into the type. */
.opportunity__mark .partner-lockup,
.greece-id .partner-lockup { margin-bottom: 12px; }

@media (max-width: 767px) {
  .partner-lockup--md { --elite-h: 38px; --partner-h: 25px; }
  .partner-lockup--lg { --elite-h: 42px; --partner-h: 28px; }
  .partner-lockup { gap: 11px; }
}
@media (max-width: 380px) {
  .partner-lockup--md, .partner-lockup--lg { --elite-h: 34px; --partner-h: 23px; }
}

/* Elite Digital has no approved photograph, so its ecosystem thumbnail is the
   division's own drawn motif on its navy ground rather than stock imagery. */
.eco-row__thumb--digital {
  display: block;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(160deg, #0E1C2C, #0A1420 60%, #070E17);
}
.eco-row__thumb--digital svg { display: block; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — ELITE DIGITAL SPOTLIGHT
   Sits on white between the navy Investment spotlight and Why Elite, so the
   page keeps alternating grounds. Four editorial service entries under a rule,
   not boxed cards: the same index language as the rest of the homepage.
   ═══════════════════════════════════════════════════════════════════════════ */
#digital-sec { background: var(--white-sec); padding: clamp(72px, 9vw, 120px) 0; }
.dgx-shell { max-width: 1400px; margin: 0 auto; padding: 0 72px; }
#digital-sec .eyebrow { color: var(--orange-text); }
.dgx-lede { max-width: 760px; margin-bottom: 52px; }
.dgx-h2 {
  font-family: var(--serif); font-weight: 400; color: var(--text);
  font-size: clamp(34px, 4vw, 58px); line-height: 1.06; letter-spacing: -.015em;
  margin: 18px 0 22px; text-wrap: balance;
}
.dgx-h2 em { font-style: italic; color: var(--orange-text); }
.dgx-lead { font-size: 16.5px; line-height: 1.8; font-weight: 300; color: var(--text-mid); max-width: 64ch; margin-bottom: 26px; }
.dgx-actions { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.dgx-go {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px;
  transition: color .25s;
}
.dgx-go--lead { color: var(--text); text-decoration-color: var(--orange-text); }
.dgx-go--lead span { color: var(--orange-text); }
.dgx-go--quiet { color: var(--text-mid); text-decoration-color: var(--line-l); }
.dgx-go:hover { color: var(--orange-text); }

.dgx-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px;
  border-top: 1px solid var(--line-l);
}
.dgx-card {
  position: relative; display: block; padding: 28px 28px 30px 0;
  text-decoration: none; color: inherit;
}
.dgx-card + .dgx-card { padding-left: 0; }
.dgx-card__n { display: block; font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--orange-text); margin-bottom: 16px; }
.dgx-card__t { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.22; color: var(--text); margin-bottom: 10px; }
.dgx-card__d { font-size: 14px; line-height: 1.7; font-weight: 300; color: var(--text-mid); }
.dgx-card__go { position: absolute; top: 26px; right: 0; color: var(--orange-text); transition: transform .2s; }
.dgx-card:hover .dgx-card__t { color: var(--orange-text); }
.dgx-card:hover .dgx-card__go { transform: translateX(3px); }

/* Contact section: the direct route for systems enquiries. */
.contact-digital {
  display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 18px;
  font-size: 13.5px; color: var(--text); text-decoration: underline;
  text-decoration-color: var(--orange-text); text-underline-offset: 6px;
}
.contact-digital:hover { color: var(--orange-text); }

@media (max-width: 1100px) {
  .dgx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dgx-card { border-bottom: 1px solid var(--line-l); }
}
@media (max-width: 767px) {
  #digital-sec { padding: 56px 0; }
  .dgx-shell { padding: 0 24px; }
  .dgx-lede { margin-bottom: 26px; }
  .dgx-h2 { font-size: clamp(29px, 7.6vw, 34px); margin: 14px 0 16px; }
  .dgx-lead { font-size: 15px; line-height: 1.65; margin-bottom: 18px; }
  .dgx-actions { gap: 0 24px; }
  .dgx-cards { grid-template-columns: 1fr; }
  /* The number sits beside the title rather than on its own line: four
     entries, four lines saved, nothing removed. */
  .dgx-card {
    display: grid; grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px; padding: 16px 32px 16px 0;
  }
  .dgx-card__n { grid-row: 1; margin: 5px 0 0; }
  .dgx-card__t { grid-column: 2; font-size: 19px; margin-bottom: 4px; }
  .dgx-card__d { grid-column: 2; line-height: 1.55; }
  .dgx-card__go { top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .dgx-card__go, .dgx-go { transition: none; } }