:root {
    --toa-ink: #171a1f;
    --toa-navy: #101826;
    --toa-navy-2: #172235;
    --toa-gold: #b98a32;
    --toa-gold-2: #d7b56d;
    --toa-stone: #f4efe6;
    --toa-paper: #fffaf1;
    --toa-muted: #69707a;
    --toa-line: rgba(23, 26, 31, .12);
    --toa-shadow: 0 18px 45px rgba(16, 24, 38, .12);
    --toa-radius: 24px;
}

html { scroll-behavior: smooth; }
body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--toa-ink);
    background: #fff;
}

h1, h2, h3, h4, .serif {
    font-family: Georgia, "Times New Roman", serif;
}

p { line-height: 1.7; }
a { color: inherit; }

.toa-navbar {
    background: rgba(16, 24, 38, .96);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.navbar-brand { display: flex; align-items: center; gap: .7rem; font-weight: 700; letter-spacing: .02em; }
.brand-mark {
    width: 42px; height: 42px; border: 1px solid rgba(215, 181, 109, .75); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; color: var(--toa-gold-2);
    font-family: Georgia, serif; font-weight: 700; font-size: .82rem;
}
.brand-text { font-family: Georgia, serif; font-size: 1.18rem; }
.navbar .nav-link { color: rgba(255,255,255,.78); font-size: .94rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff; }

.btn-gold {
    background: var(--toa-gold);
    border-color: var(--toa-gold);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: .72rem 1.1rem;
}
.btn-gold:hover { background: #9e762b; border-color: #9e762b; color: #fff; }
.btn-outline-gold {
    border-color: var(--toa-gold);
    color: var(--toa-gold);
    font-weight: 700;
    border-radius: 999px;
    padding: .72rem 1.1rem;
}
.btn-outline-gold:hover { background: var(--toa-gold); color: #fff; }

.hero {
    min-height: 620px;
    background:
        linear-gradient(90deg, rgba(16,24,38,.94), rgba(16,24,38,.68) 52%, rgba(16,24,38,.38)),
        url('/images/destinations/petra.jpg') center/cover no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
}
.hero-inner { max-width: 820px; padding: 7rem 0; }
.eyebrow {
    color: var(--toa-gold-2);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.hero h1 { font-size: clamp(3rem, 7vw, 6.2rem); line-height: .96; letter-spacing: -.04em; }
.hero .lead { color: rgba(255,255,255,.86); font-size: 1.22rem; max-width: 730px; }
.hero-panel {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px;
    padding: 1.1rem;
    backdrop-filter: blur(8px);
}

.section { padding: 5rem 0; }
.section-soft { background: var(--toa-stone); }
.section-dark { background: var(--toa-navy); color: #fff; }
.section-title { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.025em; }
.section-intro { color: var(--toa-muted); font-size: 1.1rem; max-width: 780px; }
.section-dark .section-intro { color: rgba(255,255,255,.72); }

.stat-card, .feature-card, .filter-panel, .quick-fact, .profile-card, .tour-card, .destination-list-card {
    background: #fff;
    border: 1px solid var(--toa-line);
    border-radius: var(--toa-radius);
    box-shadow: 0 8px 26px rgba(16,24,38,.06);
}
.stat-card { padding: 1.5rem; height: 100%; }
.stat-card strong { font-family: Georgia, serif; font-size: 2rem; display: block; }
.stat-card span { color: var(--toa-muted); }

.feature-card { padding: 1.4rem; height: 100%; }
.feature-card h3 { font-size: 1.45rem; }
.feature-card p { color: var(--toa-muted); }

.filter-panel { padding: 1.25rem; }
.form-control, .form-select {
    border-radius: 16px;
    border-color: rgba(16,24,38,.16);
    padding: .82rem 1rem;
}
.form-control:focus, .form-select:focus { border-color: var(--toa-gold); box-shadow: 0 0 0 .2rem rgba(185,138,50,.14); }

.destination-list-card { overflow: hidden; margin-bottom: 1.5rem; }
.destination-list-card .image-wrap { min-height: 310px; height: 100%; background: var(--toa-navy); }
.destination-list-card img { width: 100%; height: 100%; min-height: 310px; object-fit: cover; display: block; }
.destination-list-card .content { padding: clamp(1.4rem, 3vw, 2.3rem); }
.badge-soft {
    display: inline-flex; align-items: center; gap: .35rem;
    border-radius: 999px; padding: .38rem .7rem;
    background: rgba(185,138,50,.12); color: #7f5b18; font-size: .78rem; font-weight: 800;
}
.tag-pill {
    display: inline-flex; padding: .35rem .65rem; border: 1px solid rgba(16,24,38,.12);
    border-radius: 999px; color: var(--toa-muted); font-size: .8rem; background: #fff;
}
.meta-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.page-hero {
    background: var(--toa-navy);
    color: #fff;
    padding: 5.5rem 0;
    position: relative;
    overflow: hidden;
}
.page-hero::after {
    content: ""; position: absolute; inset: auto -10% -45% auto; width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(215,181,109,.18), transparent 66%); border-radius: 50%;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1; letter-spacing: -.035em; }
.page-hero .lead { color: rgba(255,255,255,.75); max-width: 780px; }

.destination-hero-image {
    height: 520px;
    background: var(--toa-navy);
    overflow: hidden;
}
.destination-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.content-panel {
    background: #fff;
    border: 1px solid var(--toa-line);
    border-radius: var(--toa-radius);
    box-shadow: var(--toa-shadow);
    padding: clamp(1.5rem, 3vw, 2.4rem);
}
.quick-fact { padding: 1rem; margin-bottom: .85rem; }
.quick-fact small { display: block; color: var(--toa-muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; font-weight: 800; }
.quick-fact strong { display: block; margin-top: .25rem; }
.experience-card {
    border-left: 4px solid var(--toa-gold);
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 24px rgba(16,24,38,.06);
}

.tour-card { overflow: hidden; height: 100%; }
.tour-card img { width: 100%; height: 240px; object-fit: cover; }
.tour-card .body { padding: 1.35rem; }
.price { color: var(--toa-gold); font-weight: 900; }

.specialist-card { background: #fff; border: 1px solid var(--toa-line); border-radius: var(--toa-radius); padding: 1.3rem; height: 100%; box-shadow: 0 8px 26px rgba(16,24,38,.06); }
.avatar-placeholder { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--toa-navy), #33415c); color: var(--toa-gold-2); display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-weight: 700; }

.site-footer { background: #0c111c; color: #fff; }
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; display: block; margin-bottom: .55rem; }
.site-footer a:hover { color: #fff; }
.footer-brand { font-family: Georgia, serif; font-size: 1.6rem; color: var(--toa-gold-2); }
.footer-text { color: rgba(255,255,255,.72); }
.footer-bottom { color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.12); font-size: .86rem; }

.alert-toa { border-radius: 18px; border: 1px solid rgba(185,138,50,.28); background: rgba(185,138,50,.09); }

@media (max-width: 991px) {
    .hero { min-height: auto; }
    .hero-inner { padding: 5rem 0; }
    .destination-list-card .image-wrap, .destination-list-card img { min-height: 250px; }
    .destination-hero-image { height: 360px; }
}