/* ============================================
   RAELBA — Homepage Styles
   ============================================ */

/* ── Eina02 Font Family ── */
@font-face {
    font-family: 'Eina02';
    src: url('../font/Eina02-font/Eina02-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eina02';
    src: url('../font/Eina02-font/Eina02-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eina02';
    src: url('../font/Eina02-font/Eina02-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eina02';
    src: url('../font/Eina02-font/Eina02-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eina02';
    src: url('../font/Eina02-font/Eina02-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Eina02';
    src: url('../font/Eina02-font/Eina02-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Eina02';
    src: url('../font/Eina02-font/Eina02-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Eina02';
    src: url('../font/Eina02-font/Eina02-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg: #ffffff;
    --card: #f0efed;
    --dark: #1a1a1a;
    --text: #1a1a1a;
    --muted: #555;
    --light: #666;
    --border: #d5d5d5;
    --white: #ffffff;
    --max-w: 1100px;
    --font-sans: 'Eina02', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1;
    letter-spacing: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* ── ANIMATIONS ── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
}
.reveal.from-left { transform: translateX(-30px); }
.reveal.from-right { transform: translateX(30px); }
.reveal.from-scale { transform: scale(1.05); }
.reveal.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ============================================
   HEADER / NAV — Logo centered on top, nav below
   ============================================ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: #fff;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}
.site-header.scrolled {
    background: rgba(255,255,255,0.97);
    border-bottom-color: #e8e6e3;
}
.header-top {
    text-align: center;
    padding: 16px 28px 0;
}
.logo img {
    height: 35px;
    width: auto;
    display: inline-block;
}
.header-nav {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 10px 70px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-left {
    display: flex;
    gap: 28px;
}
.nav-link {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    transition: opacity 0.2s;
}
.nav-link:hover { opacity: 0.5; }
.nav-link.active {
    color: var(--text);
    font-weight: 700;
}
.contact-link {
    font-size: 11px;
}
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    z-index: 110;
}
.hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--dark);
    transition: all 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* Mobile menu overlay */
.mobile-menu {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #fff; z-index: 105;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
    font-size: 16px; font-weight: 500;
    opacity: 0; transform: translateY(12px); transition: all 0.4s ease;
}
.mobile-menu.open a { opacity: 1; transform: translateY(0); }
.mobile-menu.open a:nth-child(1) { transition-delay: 0s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.05s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.1s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.15s; }
.mobile-menu.open a:nth-child(5) { transition-delay: 0.2s; }

/* ============================================
   CONTAINER
   ============================================ */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
}


/* ============================================
   MAIN
   ============================================ */
.main-home {
    background-image: url(../images/background_img_shapes_2.png);
    background-repeat: no-repeat;
    background-size: 1065px auto;
    background-position: calc(50% + 522px) 526px;
}

.main-residency, .main-investing, .main-why-raelba {
    background-image: url(../images/background_img_shapes_2.png);
    background-repeat: no-repeat;
    background-size: 1065px auto;
    background-position: calc(50% + 377px) 200px;
}


/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    padding: 115px 28px 0;
}
.hero-grid {
    display: flex;
    gap: 28px;
    align-items: stretch;
    position: relative;
}
.hero-content {
    background: var(--card);
    border-radius: 30px;
    padding: 90px 70px 60px;
    flex: 0 0 57%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.hero-content h1 {
    font-size: 34px;
    font-weight: 700;
}
.hero-content h1 span {
    display: block;
    font-size: 26px;
    font-weight: 300;
    color: var(--muted);
    margin-top: 4px;
}
.hero-content > p {
    font-size: 15px;
    color: var(--light);
    margin-top: 20px;
}
.hero-chevron {
    margin-top: 28px;
    color: #999;
    text-align: center;
}
.hero-content .btn {
    align-self: center;
}
.btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--font-sans);
    transition: all 0.25s ease;
    cursor: pointer;
}
.btn-dark {
    background: var(--dark);
    color: var(--white);
    margin-top: 14px;
    border: none;
    border-radius: 28px;
}
.btn-dark:hover {
    background: #333;
    transform: translateY(-1px);
}
.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    padding: 12px 28px;
}
.btn-outline:hover {
    background: var(--card);
}

/* Hero image — absolute parent, sized to match Why Romania image column */
.hero-image-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(43% - 28px);
    z-index: 2;
    overflow: visible;
}

/* Overlay: 868×868 — proportionally wider than the main column by 868/728.
   Both images use object-fit:cover at the same scale factor.
   clip-path hides the right 83.87% (728/868) that duplicates the main image,
   leaving only the protruding balcony visible on the left. */
.hero-image-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: calc(100% * 868 / 728);
    z-index: 1;
    clip-path: inset(0 82.87% 0 0);
}
.hero-image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-image-overlay .overlay-mobile { display: none; }

/* Main JPG: 728×868 — fills the column, rounded corners on the IMG */
.hero-image-main {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2;
}
.hero-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 30px;
}

/* ============================================
   WHY ROMANIA
   ============================================ */
.why {
    padding: 30px 28px 30px;
}
.why-grid {
    display: flex;
    gap: 28px;
    align-items: center;
}
/* Text left-aligns with hero panel inner text */
.why-text {
    flex: 0 0 57%;
    padding-left: 70px;
    padding-right: 55px;
}
.why-text h2 {
    font-size: 28px;
    font-weight: 300;
}
.why-text h2 strong {
    font-weight: 700;
}
.why-text h2 span {
    font-weight: 300;
    color: var(--muted);
    font-size: 22px;
}
.why-text p {
    font-size: 14px;
    color: var(--light);
    margin-top: 20px;
}
/* Image same width as hero image */
.why-image {
    flex: 1;
    border-radius: 30px;
    overflow: hidden;
    min-height: 350px;
}
.why-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1.0;
}

/* ============================================
   ROMANIA AT A GLANCE
   ============================================ */
.at-a-glance {
    padding: 0 28px;
    margin-bottom: 30px;
}
.at-a-glance-inner {
    background: var(--card);
    border-radius: 30px;
    padding: 60px 70px;
    position: relative;
    overflow: hidden;
}
.at-a-glance-content {
    position: relative;
    z-index: 1;
    max-width: 50%;
}
.at-a-glance-bg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 51%;
    opacity: 1;
    z-index: 0;
}
.at-a-glance-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-title {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 24px;
}
.section-title strong {
    font-weight: 700;
}
.glance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 60px;
}
.glance-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.glance-label {
    font-size: 13px;
    color: var(--light);
}
.glance-value {
    font-size: 13px;
    font-weight: 700;
}
.glance-item-full {
    grid-column: 1 / -1;
}

/* ============================================
   OUR SERVICES
   ============================================ */
.services {
    padding: 40px 28px 60px;
    text-align: center;
}
.services-header {
    margin-bottom: 48px;
}
.services-header h2 {
    font-size: 30px;
    font-weight: 700;
}
.services-header p {
    font-size: 14px;
    color: var(--light);
    margin-top: 16px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 8px;
}

/* Service card */
.service-card {
    position: relative;
    background: var(--card);
    border-radius: 10px;
    padding: 32px 24px 24px;
    margin-top: 16px;
    text-align: left;
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.5s cubic-bezier(.22,1,.36,1);
}
.service-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.service-card h4 {
    font-size: 13px;
    font-weight: 700;
}

/* Diamond icon — sits on top border */
.diamond {
    position: absolute;
    top: -16px;
    left: 24px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diamond-inner {
    width: 26px;
    height: 26px;
    background: var(--dark);
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.diamond-inner span {
    transform: rotate(-45deg);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

/* ============================================
   ROW SHAPES DIVIDER
   ============================================ */
.row-shapes-divider {
    text-align: center;
    padding: 50px 28px 30px;
    max-width: var(--max-w);
    margin: 0 auto;
}
.row-shapes-divider img {
    display: inline-block;
    height: 32px;
    width: auto;
}
.hero-shapes {
    margin-top: 45px;
}
.hero-shapes img {
    height: 25px;
    width: auto;
}

/* ============================================
   READ MORE ABOUT
   ============================================ */
.read-more {
    text-align: center;
    padding: 10px 28px 50px;
}
.read-more h2 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}
.read-more-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
}
.read-more-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.read-more-col .btn {
    min-width: 260px;
    text-align: center;
}

/* ============================================
   SCROLL TO TOP
   ============================================ */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}
.scroll-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer  {
    background: var(--dark);
    color: var(--white);
    position: relative;
    overflow: hidden;
    padding: 60px 28px 30px;
    margin-top: 20px;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../images/background_img_shapes_2.png);
    background-repeat: no-repeat;
    background-size: 1065px auto;
    background-position: calc(50% + 522px) -84px;
    opacity: 0.1;
    z-index: 0;
}
.footer-bg-shapes {
    position: absolute;
    right: -40px;
    top: 0;
    bottom: 0;
    width: 400px;
    opacity: 0.25;
}
.footer-bg-shapes img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
}
.footer-logo {
    margin-bottom: 18px;
}
.footer-logo img {
    height: 28px;
    margin: 0 auto;
    filter: invert(1);
}
.footer-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 30px;
}
.footer-social a {
    display: inline-block;
}
.footer-social img {
    width: 18px;
    height: 18px;
}
.footer-columns {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 30px;
    text-align: left;
}
.footer-col h4 {
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 10px;
}
.footer-col a {
    display: block;
    font-size: 11px;
    color: #aaa;
    margin-bottom: 4px;
    transition: color 0.3s;
}
.footer-col a:hover {
    color: var(--white);
}
.footer-copyright {
    font-size: 10px;
    color: #777;
    margin-top: 20px;
}

/* ── Staggered item animation (residency) ── */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(.22,1,.36,1), transform 0.5s cubic-bezier(.22,1,.36,1);
}
.stagger-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESIDENCY PAGE — Circle Icon
   ============================================ */
.circle-icon {
    width: 18px;
    height: 18px;
    background: var(--dark);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

/* ============================================
   RESIDENCY PAGE — Hero Override
   ============================================ */
.hero-residency .hero-content {
    background: none;
    flex: 0 0 43%;
    padding: 20px 20px 0 70px;
}
.hero-residency .hero-content h1 {
    font-size: 27px;
}
.hero-residency .hero-content h1 span {
    color: var(--text);
    font-weight: 400;
    font-size: 22px;
    margin-top: 8px;
}
.hero-residency .hero-image-wrap {
    position: relative;
    flex: 1;
    width: auto;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    overflow: hidden;
    border-radius: 30px;
    min-height: 300px;
}
.hero-residency .hero-image-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 30px;
}

/* ============================================
   RESIDENCY PAGE — Pathways
   ============================================ */
.pathways {
    padding: 40px 28px 40px;
}
.pathways-grid {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.pathways-text {
    flex: 0 0 43%;
    padding-left: 70px;
    padding-right: 20px;
}
.pathway-item {
    margin-top: 28px;
}
.pathway-item .circle-icon {
    margin-bottom: 8px;
}
.pathway-item h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}
.pathway-item .pathway-subtitle {
    font-size: 13px;
    font-style: italic;
    color: var(--light);
    margin-bottom: 8px;
}
.pathway-item p {
    font-size: 13px;
    color: var(--light);
    margin-bottom: 8px;
}
.pathway-item ul {
    list-style: none;
    padding: 0;
}
.pathway-item ul li {
    font-size: 13px;
    color: var(--light);
    padding-left: 14px;
    position: relative;
    margin-bottom: 4px;
}
.pathway-item ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--dark);
}

/* Step by Step */
.pathway-steps {
    flex: 1;
}
.pathway-steps-inner {
    background: var(--card);
    border-radius: 30px;
    padding: 40px 36px;
}
.step-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
}
.step-item {
    display: flex;
    flex-direction: column;
}
.step-item .circle-icon {
    margin-bottom: 8px;
}
.step-item h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}
.step-item p {
    font-size: 13px;
    color: var(--light);
}
/* step-item-full removed — step 7 uses normal half-width grid cell */

/* ============================================
   RESIDENCY PAGE — Alternative Routes
   ============================================ */
.alt-routes {
    padding: 40px 28px;
}
.alt-routes-grid {
    display: flex;
    gap: 28px;
    align-items: stretch;
}
.alt-routes-image {
    flex: 0 0 45%;
    border-radius: 30px;
    overflow: hidden;
}
.alt-routes-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.alt-routes-content {
    flex: 1;
    padding: 30px 0;
}
.alt-routes-content .section-subtitle {
    display: block;
    font-size: 14px;
    font-weight: 700;
}
.alt-routes-items {
    display: flex;
    gap: 28px;
    margin-top: 20px;
}
.alt-route-item {
    flex: 1;
}
.alt-route-item .circle-icon {
    margin-bottom: 8px;
}
.alt-route-item h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}
.alt-route-item .alt-route-subtitle {
    font-size: 13px;
    font-style: italic;
    color: var(--light);
    margin-bottom: 8px;
}
.alt-route-item p {
    font-size: 13px;
    color: var(--light);
    margin-bottom: 8px;
}
.alt-route-item ul {
    list-style: none;
    padding: 0;
}
.alt-route-item ul li {
    font-size: 13px;
    color: var(--light);
    padding-left: 14px;
    position: relative;
    margin-bottom: 4px;
}
.alt-route-item ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--dark);
}

/* ============================================
   RESIDENCY PAGE — Managed Section
   ============================================ */
.managed {
    padding: 40px 28px;
}
.managed-grid {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.managed-text {
    flex: 0 0 57%;
}
.managed-columns {
    display: flex;
    gap: 40px;
    margin-top: 20px;
}
.managed-col {
    flex: 1;
}
.managed-col h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}
.managed-col h4 span {
    font-weight: 400;
    color: var(--light);
}
.managed-col p {
    font-size: 13px;
    color: var(--light);
    margin-bottom: 16px;
}
.managed-col ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
.managed-col ul li {
    font-size: 13px;
    color: var(--light);
    padding-left: 14px;
    position: relative;
    margin-bottom: 4px;
}
.managed-col ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--dark);
}
.managed-image {
    flex: 1;
}
.managed-image img {
    width: 100%;
    height: auto;
    border-radius: 30px;
}

/* ============================================
   WHY RAELBA PAGE — Hero
   ============================================ */



.hero-why-raelba .hero-content {
    background: none;
    flex: 0 0 40%;
    padding: 20px 20px 0 70px;
}
.hero-why-raelba .hero-content h1 {
    font-size: 27px;
}
.hero-why-raelba .hero-content h1 span {
    color: var(--text);
    font-weight: 400;
    font-size: 22px;
    margin-top: 4px;
}
.hero-why-raelba .hero-content > p {
    font-size: 14px;
    color: var(--light);
    margin-top: 18px;
}
.hero-why-raelba .hero-image-wrap {
    position: relative;
    flex: 1;
    width: auto;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    overflow: hidden;
    border-radius: 30px;
    min-height: 300px;
    margin-right: -28px;
}
.hero-why-raelba .hero-image-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 30px;
}

/* ============================================
   WHY RAELBA PAGE — Services (Dark Section)
   ============================================ */
.wr-services {
    padding: 0 28px;
    margin-top: 40px;
}
.wr-services-grid {
    background: var(--dark);
    border-radius: 30px;
    padding: 48px 44px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 28px;
    max-width: var(--max-w);
    margin: 0 auto;
}
.wr-service-item {
    color: #fff;
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.5s cubic-bezier(.22,1,.36,1);
}
.wr-service-item.visible {
    opacity: 1;
    transform: translateY(0);
}
.wr-icon-pair {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.wr-num {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: var(--dark);
    flex-shrink: 0;
}
.wr-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    overflow: hidden;
}
.wr-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: invert(1);
}
.wr-service-item h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}
.wr-service-item p {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

/* ============================================
   WHY RAELBA PAGE — Why Now
   ============================================ */
.why-now {
    padding: 50px 0 50px 28px;
    max-width: calc(var(--max-w) + 56px);
    margin: 0 auto;
}
.why-now-grid {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.why-now-image {
    flex: 0 0 38%;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    min-height: 500px;
}
.why-now-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.why-now-text {
    flex: 1;
    padding: 0 28px 0 44px;
}
.why-now-text h2 {
    font-size: 27px;
    font-weight: 700;
}
.why-now-text h2 span {
    display: block;
    font-size: 19px;
    font-weight: 400;
    color: var(--text);
    margin-top: 4px;
}
.why-now-intro {
    display: flex;
    gap: 28px;
    margin-top: 20px;
    margin-bottom: 28px;
}
.why-now-intro p {
    flex: 1;
    font-size: 13px;
    color: var(--light);
}
.why-now-text h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}
.why-timing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
}
.why-timing-item h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}
.why-timing-item p {
    font-size: 13px;
    color: var(--light);
}
.why-timing-closing p.closing-text {
    font-size: 13px;
    color: var(--text);
    font-weight: 400;
}

/* ============================================
   CONTACT PAGE — Hero Override
   ============================================ */
.main-contact {
    background-image: url(../images/background_img_shapes_2.png);
    background-repeat: no-repeat;
    background-size: 1065px auto;
    background-position: calc(50% + 377px) 200px;
}

.hero-contact .hero-content {
    background: none;
    flex: 0 0 43%;
    padding: 20px 20px 0 70px;
}
.hero-contact .hero-content h1 {
    font-size: 27px;
}
.hero-contact .hero-content > p {
    font-size: 14px;
    color: var(--light);
    margin-top: 18px;
}
.hero-contact .hero-image-wrap {
    position: relative;
    flex: 1;
    width: auto;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    overflow: hidden;
    border-radius: 30px;
    min-height: 300px;
}
.hero-contact .hero-image-wrap > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 30px;
}

/* Contact sub-headings */
.contact-subheading {
    font-size: 14px;
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 10px;
}

/* Contact services bullet list */
.contact-services-list {
    list-style: none;
    padding: 0;
}
.contact-services-list li {
    font-size: 13px;
    color: var(--light);
    padding-left: 14px;
    position: relative;
    margin-bottom: 4px;
}
.contact-services-list li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: var(--dark);
}

/* Contact form */
.contact-form {
    display: flex;
    flex-direction: column;
}
.contact-input {
    width: 100%;
    padding: 14px 18px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: transparent;
    outline: none;
    margin-bottom: 10px;
    margin-left: -18px;
    width: calc(100% + 18px);
    transition: border-color 0.2s;
}
.contact-input::placeholder {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}
.contact-input:focus {
    border-color: var(--dark);
}
.contact-textarea {
    resize: vertical;
    min-height: 120px;
    border-radius: 12px;
}

/* Contact checkboxes */
.contact-checkboxes {
    margin-top: 6px;
    margin-bottom: 4px;
}
.contact-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 4px;
    cursor: pointer;
}
.contact-checkbox input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--dark);
}
.contact-checkbox a {
    text-decoration: underline;
}

/* Contact chevron + button */
.contact-chevron {
    text-align: center;
    margin-top: 10px;
}
.contact-form .btn {
    align-self: center;
    min-width: 200px;
    text-align: center;
}

/* Form validation */
.form-field {
    position: relative;
}
.form-error {
    display: none;
    font-size: 10px;
    color: #c0392b;
    margin-top: -6px;
    margin-bottom: 6px;
    padding-left: 4px;
}
.form-error.active {
    display: block;
}
.contact-input.invalid {
    border-color: #c0392b;
}
.form-error-checkbox {
    margin-top: 2px;
    padding-left: 20px;
}
.contact-checkbox.invalid span {
    color: #c0392b;
}

/* Honeypot — invisible to humans */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* Form status messages */
.form-status {
    text-align: center;
    font-size: 12px;
    margin-top: 12px;
    min-height: 18px;
}
.form-status-error {
    color: #c0392b;
}
.form-status-success {
    color: #27ae60;
}

/* Submit button loading state */
#contactSubmit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Contact success message */
.contact-success {
    text-align: center;
    padding: 40px 0;
}
.contact-success h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}
.contact-success p {
    font-size: 14px;
    color: var(--light);
}

/* Contact overlay on image */
.contact-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
    border-radius: 0 0 30px 30px;
    color: #fff;
    z-index: 2;
}
.contact-overlay h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.contact-info-item + .contact-info-item,
.contact-info-item + .contact-info-link {
    margin-top: 6px;
}
.contact-info-link {
    color: #fff;
    text-decoration: none;
}
.contact-info-item img {
    width: 16px;
    height: 16px;
}
.contact-info-item span {
    font-size: 13px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .site-header { z-index: 110; }
    .header-top { position: relative; padding-bottom: 15px;}
    .header-nav { padding: 0 28px 0; }
    .nav-left, .nav-right { display: none; }
    .hamburger {
        display: flex;
        position: absolute;
        right: 28px;
        top: 24px;
        z-index: 2;
    }

    .hero { padding: 90px 16px 0; }
    .hero-grid { flex-direction: column; gap: 0; }
    .hero-content {
        flex: none;
        padding: 36px 28px 30px;
        border-radius: 30px 30px 0 0;
    }
    .hero-content h1 { font-size: 24px; }
    .hero-content h1 span { font-size: 19px; }
    .hero-image-wrap {
        position: relative;
        width: 100%;
        height: auto;
    }
    .hero-image-overlay {
        display: block;
        position: relative;
        width: 100%;
        clip-path: none;
        border-radius: 0 0 30px 30px;
        overflow: hidden;
        background: var(--card);
    }
    .hero-image-overlay .overlay-desktop { display: none; }
    .hero-image-overlay .overlay-mobile {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0 0 30px 30px;
    }
    .hero-image-main { display: none; }
    .hero-image-main img {
        border-radius: 0 0 30px 30px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .why { padding: 48px 16px; }
    .why-grid { flex-direction: column; gap: 24px; }
    .why-text { flex: none; padding-left: 0; padding-right: 0; }
    .why-text h2 { font-size: 22px; }
    .why-text h2 span { font-size: 17px; }
    .why-image { flex: none; min-height: 220px; }

    .at-a-glance { padding: 0 16px; }
    .at-a-glance-inner { padding: 28px 24px; }
    .glance-grid { grid-template-columns: 1fr; }

    .services { padding: 32px 16px 48px; }
    .services-header { margin-bottom: 28px; }
    .services-header h2 { font-size: 22px; }
    .services-grid { grid-template-columns: 1fr; gap: 8px; }

    .read-more-buttons { flex-direction: column; align-items: center; }

    /* Residency mobile */
    .hero-residency .hero-content { flex: none; padding: 36px 28px 30px; }
    .hero-residency .hero-image-wrap { min-height: 250px; }

    .pathways { padding: 24px 16px; }
    .pathways-grid { flex-direction: column; }
    .pathways-text { flex: none; padding-right: 0; }
    .pathway-steps-inner { padding: 28px 20px; }
    .step-grid { grid-template-columns: 1fr; }

    .alt-routes { padding: 24px 16px; }
    .alt-routes-grid { flex-direction: column; }
    .alt-routes-image { flex: none; min-height: 220px; }
    .alt-routes-items { flex-direction: column; }

    .managed { padding: 24px 16px; }
    .managed-grid { flex-direction: column; }
    .managed-text { flex: none; }
    .managed-columns { flex-direction: column; gap: 20px; }
    .managed-image { flex: none; min-height: 220px; }

    .site-footer { padding: 40px 20px 24px; }

    /* Why Raelba mobile */
    .hero-why-raelba .hero-content { flex: none; padding: 36px 28px 30px; }
    .hero-why-raelba .hero-image-wrap { min-height: 250px; }

    .wr-services { padding: 0 16px; margin-top: 24px; }
    .wr-services-grid { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }

    .why-now { padding: 32px 16px; }
    .why-now-grid { flex-direction: column; }
    .why-now-image { flex: none; min-height: 280px; }
    .why-now-text { padding: 24px 0 0; }
    .why-now-text h2 { font-size: 22px; }
    .why-now-intro { flex-direction: column; gap: 12px; }
    .why-timing-grid { grid-template-columns: 1fr; }

    /* Contact mobile */
    .hero-contact .hero-content { flex: none; padding: 36px 28px 30px; }
    .hero-contact .hero-image-wrap { min-height: 350px; }
    .hero-contact .hero-image-wrap > img { object-position: center bottom; }
}

/* ============================================
   INVESTING PAGE — Hero
   ============================================ */
.hero-investing .hero-grid {
    align-items: center;
}
.hero-investing .hero-left {
    flex: 0 0 43%;
    padding: 20px 20px 20px 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.hero-investing .hero-left h1 {
    font-size: 27px;
    font-weight: 700;
}
.hero-investing .hero-left h1 span {
    display: block;
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
    margin-top: 4px;
}
.hero-investing .hero-left > p {
    font-size: 14px;
    color: var(--light);
    margin-top: 18px;
}
.beyond-title {
    font-size: 22px;
    font-weight: 400;
    margin-top: 32px;
    margin-bottom: 16px;
}
.beyond-item h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}
.beyond-item p {
    font-size: 13px;
    color: var(--light);
    margin-bottom: 12px;
}
.hero-investing .hero-right {
    flex: 1;
    background: var(--card);
    border-radius: 30px;
    padding: 44px 40px;
}
.hero-investing .hero-right h2 {
    font-size: 27px;
    font-weight: 700;
    margin-bottom: 28px;
}
.why-investors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
}
.why-item .circle-icon {
    margin-bottom: 8px;
}
.why-item h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}
.why-item p {
    font-size: 13px;
    color: var(--light);
}

/* ============================================
   INVESTING PAGE — Investment Confidence
   ============================================ */
.invest-confidence {
    padding: 30px 28px;
    overflow: visible;
}
.invest-confidence-grid {
    display: flex;
    gap: 28px;
    align-items: stretch;
}
.invest-confidence-text {
    flex: 0 0 43%;
    padding-left: 70px;
}
.invest-confidence-text .section-title {
    margin-bottom: 16px;
}
.invest-confidence-text p {
    font-size: 13px;
    color: var(--light);
    margin-bottom: 14px;
}
.invest-confidence-image {
    flex: 1;
    border-radius: 30px;
    overflow: hidden;
}
.invest-confidence-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

/* ============================================
   INVESTING PAGE — Romania's Investment Edge
   ============================================ */
.invest-edge {
    padding: 0 28px;
    margin-top: 30px;
}
.invest-edge-grid {
    background: var(--dark);
    color: var(--white);
    border-radius: 30px;
    padding: 50px 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
}
.invest-edge-title {
    grid-row: 1;
    grid-column: 1;
}
.invest-edge-title .section-title {
    font-size: 26px;
    margin-bottom: 16px;
    color: var(--white);
}
.invest-edge-title p {
    font-size: 13px;
    color: #aaa;
}
.edge-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-bottom: 6px;
    filter: invert(1);
}
.edge-item h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--white);
}
.edge-item p {
    font-size: 13px;
    color: #aaa;
}

/* ============================================
   INVESTING PAGE — The Investment Process
   ============================================ */
.invest-process {
    padding: 40px 100px;
}
.invest-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 28px 28px;
}
.invest-process-intro {
    grid-row: 1 / 3;
}
.invest-process-intro .section-title {
    font-size: 28px;
    margin-bottom: 8px;
}
.process-subtitle {
    font-size: 19px !important;
    font-weight: 400 !important;
    margin-bottom: 14px;
}
.invest-process-intro > p {
    font-size: 13px;
    color: var(--light);
    margin-bottom: 12px;
}
.step-icons {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.step-icon-img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.process-step h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}
.process-step p {
    font-size: 13px;
    color: var(--light);
}

/* ============================================
   INVESTING PAGE — Featured Opportunities
   ============================================ */
.featured {
    padding: 40px 28px;
}
.featured-grid {
    display: flex;
    gap: 28px;
    align-items: center;
}
.featured-image {
    flex: 0 0 45%;
    border-radius: 30px;
    overflow: hidden;
}
.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.featured-content {
    flex: 1;
}
.featured-content .section-title {
    margin-bottom: 12px;
}
.featured-content .section-subtitle {
    display: block;
    font-size: 20px;
    font-weight: 400;
    padding-right: 100px;
}
.featured-content > p {
    font-size: 13px;
    color: var(--light);
    margin-bottom: 20px;
}
.featured-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 20px 24px;
}
.featured-item h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}
.featured-item p {
    font-size: 13px;
    color: var(--light);
}

/* Legal pages */
.legal-page {
    padding: 130px 28px 80px;
    max-width: var(--max-w);
    margin: 0 auto;
}
.legal-page h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}
.legal-page .legal-updated {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 40px;
}
.legal-page h2 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 16px;
}
.legal-page p {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 14px;
}
.legal-page ul,
.legal-page ol {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 14px;
    padding-left: 24px;
}
.legal-page li {
    margin-bottom: 8px;
}
.legal-page a {
    color: var(--text);
    text-decoration: underline;
}
.legal-page a:hover {
    color: var(--muted);
}
.legal-table-wrap {
    overflow-x: auto;
    margin-bottom: 14px;
}
.legal-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.legal-page th,
.legal-page td {
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--border);
}
.legal-page th {
    font-weight: 700;
    background: var(--card);
}

/* ============================================
   MOBILE / TABLET — Fixes for sections defined
   after the first @media block
   ============================================ */
@media (max-width: 768px) {
    /* Global: prevent fixed-position header overflow */
    html { overflow-x: hidden; }

    /* Homepage hero — clip overflow from animation start offset */
    .main-home .hero { overflow: hidden; }

    /* Homepage hero — custom mobile animations (scoped to .main-home) */
    .main-home .hero-content.reveal.from-left {
        transform: translateY(20px);
    }
    .main-home .hero-content.reveal.from-left.visible {
        transform: translateY(0);
    }
    .main-home .hero-image-wrap.reveal.from-scale {
        transform: scale(1.05) translateY(-120px);
        transition: opacity 1.6s cubic-bezier(.22,1,.36,1), transform 1.6s cubic-bezier(.22,1,.36,1);
    }
    .main-home .hero-image-wrap.reveal.from-scale.visible {
        transform: scale(1) translateY(0);
    }

    /* Homepage — At a Glance: full-width text, shapes as background texture */
    .at-a-glance-content { max-width: 100%; }
    .at-a-glance-bg { width: 100%; left: 42vw; opacity: 0.7;}

    /* Investing — Hero columns */
    .hero-investing .hero-left { padding: 20px 16px; flex: none; }
    .hero-investing .hero-right { padding: 32px 24px; }
    .why-investors-grid { grid-template-columns: 1fr; }

    /* Investing — Investment Confidence */
    .invest-confidence { padding: 24px 16px; }
    .invest-confidence-grid { flex-direction: column; }
    .invest-confidence-text { flex: none; padding-left: 0; }
    .invest-confidence-image { flex: none; min-height: 220px; }

    /* Investing — Romania's Investment Edge */
    .invest-edge { padding: 0 16px; }
    .invest-edge-grid {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 28px;
    }
    .invest-edge-title { grid-row: auto; grid-column: auto; }

    /* Investing — The Investment Process */
    .invest-process { padding: 24px 16px; }
    .invest-process-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 24px;
    }
    .invest-process-intro { grid-row: auto; }

    /* Investing — Featured Opportunities */
    .featured { padding: 24px 16px; }
    .featured-grid { flex-direction: column; }
    .featured-image { flex: none; min-height: 220px; }
    .featured-content .section-subtitle { padding-right: 0; }
    .featured-items {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    /* Residency — Pathways left padding */
    .pathways-text { padding-left: 0; }

    /* Why Raelba — Hero image negative margin */
    .hero-why-raelba .hero-image-wrap { margin-right: 0; }

    /* Background pattern: reduce opacity on inner pages */
    .main-residency,
    .main-investing,
    .main-why-raelba,
    .main-contact {
        background-image: none;
        position: relative;
    }
    .main-residency::before,
    .main-investing::before,
    .main-why-raelba::before,
    .main-contact::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url(../images/background_img_shapes_2.png);
        background-repeat: no-repeat;
        background-size: 1065px auto;
        background-position: calc(50% + 377px) 200px;
        opacity: 0.5;
        z-index: 0;
        pointer-events: none;
    }

    /* Investing — Image 1 (confidence) taller to match image 2 */
    .invest-confidence-image { min-height: 300px; height: 300px; }

    /* Residency — Alt routes image less cropped */
    .alt-routes-image { min-height: 280px; height: 280px; }

    /* Contact — Input fields white background */
    .contact-input {
        background: rgba(255, 255, 255, 0.7);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { transition: none; }
    .service-card { transition: none; }
}