/* Homepage (index.html and its generated English twin eng/index.html).
   Constellation hero (js/home-hero.js), star-scale loader (js/loader.js), services with photos. */

@font-face { font-family: Beiruti; src: url('../fonts/Beiruti-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: Beiruti; src: url('../fonts/Beiruti-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Beiruti; src: url('../fonts/Beiruti-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Beiruti; src: url('../fonts/Beiruti-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

body.home {
  --navy: #051332;
  --ink: #fff;
  --soft: #b9c4d8;
  --line: rgba(255, 255, 255, .12);
  --gold: #d4af37;
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: Beiruti, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[lang^="en"] body.home { font-family: Inter, Arial, sans-serif; }
body.home *, body.home *::before, body.home *::after { box-sizing: border-box; }
body.home a { color: inherit; text-decoration: none; }

/* ---------- header (same layout as the rest of the site) ---------- */
.hs-top { position: absolute; inset: 0 0 auto; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 22px 36px; }
.hs-nav { display: flex; align-items: center; gap: 30px; font-size: 17px; }
html[lang^="en"] .hs-nav { font-size: 15px; }
.hs-nav-end { justify-content: flex-end; }
.hs-nav a:hover { color: var(--gold); }
.hs-nav [data-account].is-hidden { display: none; }
.hs-logo img { height: 26px; display: block; }
.hs-lang .local-link.w--current { display: none; }
.hs-lang .local-link { border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 2px 12px; font-size: 13px; font-weight: 700; }
@media (min-width: 992px) {
  /* links at the two edges, as before (the language switch no longer sits in the row) */
  .hs-nav a { white-space: nowrap; }
  html[lang^="en"] .hs-nav a { text-transform: uppercase; letter-spacing: .02em; }
  /* language switch: a small pill just under the navbar, on the left */
  .hs-lang { position: absolute; top: calc(100% - 4px); left: 36px; }
  .hs-lang .local-link { display: inline-block; padding: 3px 14px; font-size: 12px; letter-spacing: .06em; background: rgba(5, 19, 50, .45); transition: background .2s, color .2s; }
  .hs-lang .local-link:hover { background: var(--gold); color: var(--navy); }
}
@media (min-width: 992px) and (max-width: 1240px) {
  .hs-top { padding-inline: 24px; gap: 16px; }
  .hs-lang { left: 24px; }
  .hs-nav { gap: 20px; font-size: 15px; }
  html[lang^="en"] .hs-nav { font-size: 13px; gap: 16px; }
}
.hs-top .nav-23wrap { display: none; }
.mobile-menu-container[hidden] { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: center; }
@media (min-width: 992px) { .hero { height: 100vh; height: 100svh; min-height: 620px; } }
#art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hs-copy { position: relative; z-index: 2; width: min(560px, 46vw); margin-inline-start: 7vw; padding-block: 90px 40px; }
.hs-zone { display: none; }
.hero h1 { font-size: clamp(38px, 5vw, 70px); line-height: 1.12; font-weight: 700; margin: 0 0 18px; }
html[lang^="en"] .hero h1 { font-size: clamp(32px, 4vw, 54px); letter-spacing: -.01em; }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(6px); animation: hs-word .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.25s + var(--i) * .12s); }
.hs-sub { color: var(--soft); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; margin: 0 0 30px; opacity: 0; animation: hs-up .8s 1s forwards; }
.hs-sub strong { color: var(--gold); font-weight: 700; }
.hs-sub .hs-line { white-space: nowrap; }
.is-loading .hero h1 .w, .is-loading .hs-sub, .is-loading .hs-ask { animation-play-state: paused; }
@keyframes hs-word { to { opacity: 1; transform: none; filter: none; } }
@keyframes hs-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* the chat's front door */
.hs-ask { position: relative; border-radius: 20px; padding: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); opacity: 0; animation: hs-up .9s 1.25s forwards; }
@property --hs-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hs-ask::before { content: ""; position: absolute; inset: -1px; border-radius: 21px; padding: 1px; background: conic-gradient(from var(--hs-a), transparent 0 70%, var(--gold) 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hs-spin 6s linear infinite; pointer-events: none; }
@keyframes hs-spin { to { --hs-a: 360deg; } }
.hs-ask p { margin: 0 4px 14px; font-size: 16px; line-height: 1.6; color: #dfe6f2; }
.hs-ask form { display: flex; gap: 10px; }
.hs-ask input { flex: 1; min-width: 0; background: rgba(255, 255, 255, .95); border: 0; border-radius: 12px; padding: 15px 16px; font: inherit; font-size: 16px; color: #0b1a38; }
.hs-ask input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.hs-send { flex: none; width: 52px; border: 0; border-radius: 12px; background: var(--gold); color: var(--navy); font-size: 20px; font-weight: 700; cursor: pointer; transition: transform .2s; }
.hs-send:hover { transform: translateY(-2px); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hs-chip { font-size: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 6px 14px; transition: border-color .2s, background .2s; }
.hs-chip:hover { border-color: var(--gold); background: rgba(212, 175, 55, .12); }

/* ---------- services, with their photos ---------- */
.hs-services { position: relative; padding-block: 110px 90px; background:
  radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 82% 12%, rgba(255, 255, 255, .4), transparent),
  radial-gradient(1px 1px at 64% 46%, rgba(212, 175, 55, .6), transparent), radial-gradient(1px 1px at 30% 72%, rgba(255, 255, 255, .35), transparent),
  radial-gradient(1px 1px at 90% 84%, rgba(255, 255, 255, .4), transparent), radial-gradient(60% 50% at 50% 0%, rgba(60, 110, 200, .14), transparent 70%), var(--navy); }
.hs-in { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
.hs-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; margin-bottom: 44px; }
.hs-services h2 { font-size: clamp(34px, 4vw, 54px); font-weight: 700; margin: 0; }
html[lang^="en"] .hs-services h2 { text-transform: capitalize; }
.hs-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--soft); font-size: 15.5px; }
.hs-points li { display: flex; align-items: center; gap: 10px; }
.hs-points li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(212, 175, 55, .15), 0 0 12px rgba(212, 175, 55, .6); }
.hs-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hs-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); isolation: isolate; opacity: 0; transform: translateY(26px); transition: opacity .8s calc(var(--i) * .1s) ease, transform .8s calc(var(--i) * .1s) cubic-bezier(.2, .7, .2, 1), border-color .3s; }
.hs-card.in { opacity: 1; transform: none; }
.hs-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s; filter: saturate(.8) brightness(.9); }
.hs-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 19, 50, .05) 25%, rgba(5, 19, 50, .55) 55%, rgba(5, 19, 50, .96) 100%); }
.hs-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(240, 206, 110, .22) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s ease; pointer-events: none; }
.hs-card:hover, .hs-card:focus-visible { border-color: rgba(212, 175, 55, .6); }
.hs-card:hover img, .hs-card:focus-visible img { transform: scale(1.12); filter: saturate(1) brightness(1); }
.hs-card:hover::after, .hs-card:focus-visible::after { transform: translateX(120%); }
.hs-card-text { position: absolute; inset: auto 0 0 0; padding: 22px 22px 24px; }
.hs-card h3 { font-size: 23px; font-weight: 700; margin: 0 0 8px; }
html[lang^="en"] .hs-card h3 { font-size: 20px; }
.hs-card h3::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 10px; background: var(--gold); transition: width .5s ease; }
.hs-card:hover h3::after { width: 70px; }
.hs-card p { margin: 0; color: #d6deeb; font-size: 15px; line-height: 1.55; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease, margin .5s; }
.hs-card:hover p, .hs-card:focus-visible p { max-height: 90px; opacity: 1; margin-bottom: 12px; }
.hs-more { display: flex; gap: 8px; color: var(--gold); font-size: 14.5px; margin-top: 4px; }
.hs-more::after { content: "←"; }
html[dir="ltr"] .hs-more::after { content: "→"; }
.hs-all { display: table; margin: 44px auto 0; border: 1px solid var(--gold); color: var(--gold) !important; border-radius: 999px; padding: 12px 30px; font-size: 16px; transition: background .25s, color .25s; }
.hs-all:hover { background: var(--gold); color: var(--navy) !important; }
.hs-foot { border-top: 1px solid var(--line); padding: 26px 24px 40px; text-align: center; color: var(--soft); font-size: 13.5px; }

/* the hero card replaces the chat's corner label */
body.home #rights-chat-label { display: none !important; }

@media (hover: none) { .hs-card p { max-height: 90px; opacity: 1; margin-bottom: 12px; } }
@media (max-width: 1000px) { .hs-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) {
  /* one line: logo at the start; language switch and menu button at the end */
  .hs-top { position: relative; grid-template-columns: 1fr auto auto; gap: 10px; padding: 14px 18px; }
  .hs-nav { display: none; }
  .hs-nav.hs-nav-end { display: flex; gap: 0; }
  .hs-nav-end > a { display: none; }
  .hs-logo { grid-column: 1; justify-self: start; }
  .hs-logo img { height: 22px; }
  .hs-top .nav-23wrap { display: flex; align-items: center; height: auto; padding: 0; grid-column: 3; grid-row: 1; }
  .hs-lang .local-link { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; }

  /* the whole first section fits one screen: header, drawing (takes what's left), text */
  .hero { display: flex; flex-direction: column; align-items: stretch; height: 100vh; height: 100svh; min-height: 0; }
  .hs-zone { display: block; flex: 1 1 auto; min-height: 90px; }
  .hs-copy { flex: none; width: auto; margin: 0; padding: 0 18px 18px; }
  /* headline and its line centred under the logo */
  .hero h1 { font-size: clamp(27px, 7.6vw, 36px); margin-bottom: 10px; text-align: center; }
  .hs-sub { text-align: center; }
  html[lang^="en"] .hero h1 { font-size: clamp(24px, 6.6vw, 32px); }
  .hs-sub { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
  .hs-ask { padding: 12px; border-radius: 16px; }
  .hs-ask::before { border-radius: 17px; }
  .hs-ask p { font-size: 14px; line-height: 1.5; margin: 0 2px 10px; }
  .hs-ask input { padding: 12px 14px; }
  .hs-send { width: 46px; }
  .hs-chips { gap: 6px; margin-top: 10px; }
  .hs-chip { font-size: 12.5px; padding: 4px 11px; }
}
@media (max-width: 991px) and (max-height: 640px) {
  .hs-ask p { display: none; } /* very short screens: the placeholder says the same */
}
@media (max-width: 600px) {
  .hs-services { padding-block: 70px 60px; }
  .hs-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -24px; padding: 4px 24px 12px; scrollbar-width: none; }
  .hs-cards::-webkit-scrollbar { display: none; }
  .hs-card { flex: 0 0 78%; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .w, .hs-sub, .hs-ask { animation: none; opacity: 1; transform: none; filter: none; }
  .hs-ask::before { animation: none; }
  .hs-card { opacity: 1; transform: none; transition: none; }
  .hs-card img, .hs-card::after { transition: none; }
  .ld-lines line, .ld-stars g, .ld img { animation-duration: .01ms; animation-delay: 0s; }
}