:root {
  --black: #080909;
  --white: #f4f4f0;
  --soft: #d7d8d4;
  --line-dark: rgba(255,255,255,.2);
  --line-light: rgba(8,9,9,.18);
  --font: "Onest", Arial, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}
body.modal-open { overflow:hidden; }
img { display:block;max-width:100%; }
a { color:inherit; }
button,input { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--white);outline-offset:4px; }

.skip-link {
  position:fixed;left:16px;top:12px;z-index:300;
  padding:9px 12px;background:var(--white);color:var(--black);
  transform:translateY(-160%);
}
.skip-link:focus { transform:translateY(0); }

.site-nav {
  position:fixed;inset:0 0 auto;z-index:100;
  height:76px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 36px;
  color:var(--white);
}
.site-nav.scrolled { background:rgba(8,9,9,.92);backdrop-filter:blur(12px); }
.brand {
  grid-column:2;justify-self:center;text-decoration:none;font-size:16px;font-weight:600;
}
.nav-home { grid-column:1;grid-row:1;justify-self:start;text-decoration:none;font-size:13px; }
.nav-actions { grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:18px; }
.nav-text { text-decoration:none;font-size:13px; }
.menu-button {
  width:42px;height:42px;border:1px solid rgba(255,255,255,.42);
  border-radius:50%;background:transparent;color:inherit;font-size:20px;
}
.menu-button:active { transform:scale(.96); }

.mobile-nav {
  position:fixed;inset:0;z-index:90;display:none;
  place-content:center;gap:14px;padding:90px 28px;
  background:var(--black);text-align:center;
}
.mobile-nav.open { display:grid; }
.mobile-nav a { padding:8px;text-decoration:none;font-size:30px;font-weight:400; }

.hero {
  position:relative;min-height:94svh;overflow:hidden;
  display:flex;align-items:flex-end;padding:140px 5vw 64px;
}
.hero-image {
  position:absolute;inset:0;
  background:url("assets/stock/dubai-skyline-shinzan-murray.jpg") center 53% / cover no-repeat;
  transform:scale(1.035);
  animation:hero-image-in 1500ms cubic-bezier(.22,1,.36,1) forwards;
}
.hero-image::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 55%),
    linear-gradient(90deg,rgba(0,0,0,.3),transparent 52%);
}
@keyframes hero-image-in {
  from { transform:scale(1.09); }
  to { transform:scale(1.035); }
}
.hero-content {
  position:relative;z-index:2;width:min(820px,100%);
  opacity:0;transform:translateY(22px);
  animation:hero-copy-in 800ms 220ms cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes hero-copy-in {
  to { opacity:1;transform:translateY(0); }
}
.hero-kicker { margin:0 0 18px;font-size:14px;color:rgba(255,255,255,.78); }
h1,h2,h3,p { margin-top:0; }
h1 {
  margin-bottom:20px;font-size:68px;font-weight:400;line-height:1.02;letter-spacing:0;
}
.hero-copy {
  max-width:610px;margin-bottom:28px;color:rgba(255,255,255,.84);
  font-size:18px;line-height:1.55;
}
.cta-link {
  min-height:48px;display:inline-flex;align-items:center;gap:26px;
  padding:0 18px;border:1px solid currentColor;border-radius:0;
  background:transparent;color:inherit;text-decoration:none;font-weight:550;
  transition:background 160ms ease-out,color 160ms ease-out;
}
.cta-link::after { content:"→";font-size:19px; }
.cta-link:hover { background:var(--white);color:var(--black); }
.hero-scroll {
  position:absolute;right:36px;bottom:34px;z-index:2;
  writing-mode:vertical-rl;color:rgba(255,255,255,.66);font-size:11px;
}

.routes {
  min-height:100svh;display:flex;background:var(--black);
}
.route-panel {
  position:relative;display:block;min-width:0;flex:1 1 50%;min-height:100svh;
  overflow:hidden;color:var(--white);text-decoration:none;
}
.route-panel:first-child { border-right:1px solid var(--line-dark); }
.route-image {
  position:absolute;inset:0;background-position:center;background-size:cover;
  transform:scale(1.035);transition:transform 800ms cubic-bezier(.22,1,.36,1),filter 400ms ease-out;
}
.route-panel:hover .route-image { transform:scale(1); }
.mortgage .route-image { background-image:url("assets/user-photos/IMG_9738.jpg"); }
.installment .route-image { background-image:url("assets/stock/dubai-construction-pexels-3367920.jpg"); }
.route-image::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.82),transparent 65%);
}
.route-content {
  position:absolute;inset:auto 42px 42px;z-index:2;
}
.route-number { display:block;margin-bottom:12px;color:rgba(255,255,255,.64);font-size:12px; }
.route-content h2 { margin-bottom:12px;font-size:48px;font-weight:400;line-height:1.06; }
.route-content p { max-width:430px;margin-bottom:24px;color:rgba(255,255,255,.76);font-size:15px; }
.route-action { display:inline-flex;align-items:center;gap:20px;font-size:13px; }
.route-action::after { content:"→";font-size:18px;transition:transform 180ms ease-out; }
.route-panel:hover .route-action::after { transform:translateX(5px); }

.advisor {
  min-height:92svh;display:grid;grid-template-columns:1fr 1fr;
  background:var(--white);color:var(--black);
}
.advisor-image {
  min-height:92svh;background:url("assets/user-photos/IMG_1785.jpg") center 30% / cover no-repeat;
}
.advisor-copy {
  display:flex;flex-direction:column;justify-content:center;padding:90px 8vw;
}
.section-kicker { margin-bottom:24px;font-size:13px;color:#666; }
.advisor h2 {
  max-width:650px;margin-bottom:28px;font-size:52px;font-weight:400;line-height:1.08;
}
.advisor-text {
  max-width:580px;margin-bottom:40px;color:#4e5050;font-size:18px;line-height:1.6;
}
.proof-lines { margin:0 0 38px;padding:0;list-style:none;border-top:1px solid var(--line-light); }
.proof-lines li {
  display:flex;justify-content:space-between;gap:28px;
  padding:15px 0;border-bottom:1px solid var(--line-light);font-size:13px;
}
.proof-lines span { color:#666; }
.advisor .cta-link { width:max-content; }

.contact-scene {
  position:relative;min-height:92svh;overflow:hidden;
  display:flex;align-items:flex-end;padding:100px 5vw 64px;
}
.contact-image {
  position:absolute;inset:0;
  background:url("assets/user-photos/IMG_9820.jpg") center / cover no-repeat;
}
.contact-image::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.06) 70%);
}
.contact-content { position:relative;z-index:2;width:min(760px,100%); }
.contact-content h2 { margin-bottom:18px;font-size:58px;font-weight:400;line-height:1.06; }
.contact-content p { max-width:540px;margin-bottom:28px;color:rgba(255,255,255,.78);font-size:17px; }

footer {
  display:flex;justify-content:space-between;gap:30px;align-items:center;
  min-height:110px;padding:28px 36px;background:var(--black);
  border-top:1px solid var(--line-dark);font-size:12px;color:#aaa;
}
.footer-brand { color:var(--white);font-size:14px;font-weight:600; }
.footer-links { display:flex;gap:24px; }
.footer-links a { text-decoration:none; }

.modal-overlay {
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.82);
}
.modal-overlay.open { display:flex; }
.modal {
  position:relative;width:min(680px,100%);max-height:calc(100vh - 40px);overflow:auto;
  padding:36px;background:var(--white);color:var(--black);
}
.modal-close {
  position:absolute;right:12px;top:10px;width:42px;height:42px;
  border:0;background:transparent;font-size:28px;
}
.modal h2 { max-width:500px;margin:0 48px 8px 0;font-size:30px;font-weight:500;line-height:1.15; }
.modal-sub { margin-bottom:24px;color:#666; }
.quiz { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.field.full { grid-column:1/-1; }
.field label { display:block;margin-bottom:7px;font-size:12px; }
.field input {
  width:100%;min-height:48px;padding:0 12px;border:1px solid #bbb;
  border-radius:0;background:#fff;
}
.choice-group { display:grid;grid-template-columns:repeat(2,1fr);gap:6px; }
.choice {
  min-height:44px;padding:8px 10px;border:1px solid #bbb;border-radius:0;
  background:#fff;text-align:left;
}
.choice.selected { background:var(--black);color:var(--white);border-color:var(--black); }
.modal-submit {
  width:100%;min-height:50px;margin-top:20px;border:1px solid var(--black);
  border-radius:0;background:var(--black);color:var(--white);font-weight:600;
}
.modal-note { margin:10px 0 0;color:#777;font-size:11px; }

@media(max-width:820px) {
  .site-nav { height:66px;padding:0 18px;grid-template-columns:1fr auto 1fr; }
  .nav-home,.nav-text { display:none; }
  .hero { min-height:92svh;padding:118px 20px 42px; }
  .hero-image { background-position:56% center; }
  h1 { font-size:44px; }
  .hero-copy { font-size:16px; }
  .hero-scroll { display:none; }
  .routes { display:block; }
  .route-panel {
    min-height:76svh;flex:none;
  }
  .route-panel:first-child { border-right:0;border-bottom:1px solid var(--line-dark); }
  .route-content { inset:auto 20px 28px; }
  .route-content h2 { font-size:40px; }
  .advisor { grid-template-columns:1fr; }
  .advisor-image { min-height:68svh; }
  .advisor-copy { padding:70px 20px; }
  .advisor h2 { font-size:38px; }
  .advisor-text { font-size:16px; }
  .contact-scene { min-height:82svh;padding:80px 20px 42px; }
  .contact-content h2 { font-size:41px; }
  footer { align-items:flex-start;flex-direction:column;padding:28px 20px; }
  .footer-links { flex-wrap:wrap; }
  .modal { padding:28px 18px; }
  .quiz { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .choice-group { grid-template-columns:1fr; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important;transition-duration:1ms!important; }
  .hero-content { opacity:1;transform:none; }
  .hero-image,.route-image { transform:none; }
}
