/* ---------------------------------------------------------------------------
   ICONS
   ---------------------------------------------------------------------------
   The public layout does not load system.css, so when the product moved to the
   Lucide sprite every icon out here rendered as a large black triangle: an SVG
   with no size and a default fill. These are the same four declarations
   system.css makes, scoped to the public site.
   --------------------------------------------------------------------------- */
.i {
    width: 1.25rem; height: 1.25rem;
    flex: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.i-sm { width: 1rem;   height: 1rem;   stroke-width: 2; }
.i-lg { width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }
.i-xl { width: 2rem;   height: 2rem;   stroke-width: 1.4; }

/* =============================================================================
   THE UMRAH STORE — PUBLIC SITE
   =============================================================================
   The marketing site's design system. Loaded after design-tokens.css and
   public-site.css, and authoritative over both.

   WHY THE PUBLIC SITE LOOKS DIFFERENT FROM THE CRM

   They share a brand and nothing else. The CRM is a dense tool somebody uses
   for eight hours: tight type, small controls, information per square inch.
   The public site is read once by somebody deciding whether to trust this
   company with a pilgrimage they have saved years for. It gets serif
   headlines, generous space, and far less on screen at a time.

   ON PHOTOGRAPHY

   There is none. Not on disk, not in the database - the only image in the
   product is the logo. Rather than fill the page with stock photographs of
   somebody else's Makkah, this design is built to be handsome with no imagery
   at all, and to improve the moment real photography is added:

     - hotel and package cards already render database images when present and
       fall back to a composed plate when not;
     - .site-plate is the editorial image slot, styled so an empty one reads as
       a deliberate surface rather than a missing picture;
     - every image slot is a <picture> with width, height and lazy loading, so
       adding photography does not cost layout stability or speed.

   LEGACY VARIABLES

   public-site.css declares its own --emerald-* palette, used by the Build Your
   Trip wizard, the flight search and the hotel directory. Those names are
   repointed at the new tokens at the end of this file, so ten pages that are
   not being rewritten still move to the new palette.
   ============================================================================= */

/* =============================================================================
   1. BASE
   ============================================================================= */
body {
    background: var(--canvas);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
}

.site-display,
.site-h1, .site-h2, .site-h3 {
    font-family: var(--font-serif);
    font-weight: var(--fw-normal);
    letter-spacing: -.015em;
    line-height: 1.12;
    color: var(--ink-900);
}

.site-h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.site-h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.site-h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

.site-lede {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 62ch;
}

.site-eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass-600);
}
.site-eyebrow::before {
    content: ""; width: 26px; height: 1px; background: var(--brass-400);
}

.site-shell { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
@media (max-width: 575.98px) { .site-shell { padding: 0 var(--sp-4); } }

/* The skip link. The public layout does not load Bootstrap, so the utility
   class it used has no styling here - without this the link is simply visible
   at the top of every page. Off-screen until focused, which is the whole
   point of it. */
.visually-hidden-focusable {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.visually-hidden-focusable:focus {
    position: fixed; left: var(--sp-4); top: var(--sp-4);
    width: auto; height: auto; z-index: 200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--ink-900); color: #fff;
    border-radius: var(--r-md); text-decoration: none;
    box-shadow: var(--shadow-lg);
}

/* Small helpers the public pages need and Bootstrap would otherwise supply. */
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.d-block { display: block; }
.mt-5 { margin-top: var(--sp-8); }

/* =============================================================================
   2. SECTIONS — an editorial rhythm, not a stack of card grids
   ============================================================================= */
.site-section { padding: clamp(var(--sp-16), 9vw, var(--sp-24)) 0; }
.site-section--tight { padding: clamp(var(--sp-10), 6vw, var(--sp-16)) 0; }
.site-section--tint { background: var(--stone-100); }
.site-section--ink { background: var(--ink-900); color: var(--stone-200); }
.site-section--ink .site-h2, .site-section--ink .site-h3 { color: #fff; }
.site-section--ink .site-lede { color: rgba(255,255,255,.66); }
.site-section--ink .site-eyebrow { color: var(--brass-300); }
.site-section--ink .site-eyebrow::before { background: var(--brass-400); }

/* Adjacent same-toned sections need a seam, because sections hide themselves
   when they have no data and the intended alternation cannot be relied on. */
.site-section--tint + .site-section--tint { border-top: 1px solid var(--stone-200); }
.site-section--ink + .site-section--ink { border-top: 1px solid rgba(255,255,255,.1); }

.site-section-head { max-width: 62ch; margin-bottom: clamp(var(--sp-8), 5vw, var(--sp-12)); }
.site-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.site-section-head .site-h2 { margin: var(--sp-4) 0 var(--sp-4); }

/* =============================================================================
   3. HEADER
   =============================================================================
   Transparent over the hero, solid once scrolled. Brand left, navigation
   centre, one clear action right - nothing else.
   ============================================================================= */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--stone-50) 90%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--stone-50); } }
.site-header.is-stuck { border-bottom-color: var(--stone-200); }

.site-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-6); height: 76px;
}

.site-brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.site-brand:hover { text-decoration: none; }
.site-brand img { height: 40px; width: auto; display: block; }

/* On a phone the header carries a lockup, a sign-in link, a call to action
   and a menu button. Something has to give, and it is the size of the mark -
   not the tap target of the menu, which was being pushed off the screen. */
@media (max-width: 575.98px) {
    .site-brand img { height: 30px; }
    .site-header-inner { gap: var(--sp-2); }
}
.site-brand-name {
    font-family: var(--font-serif);
    font-size: 1.12rem; line-height: 1.1;
    color: var(--ink-900);
}
.site-brand-name small {
    display: block; font-family: var(--font-ui);
    font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 2px;
}

.site-nav { display: flex; align-items: center; gap: var(--sp-6); }
.site-nav a {
    font-size: var(--fs-md); font-weight: var(--fw-medium);
    color: var(--text-secondary); text-decoration: none;
    padding: var(--sp-2) 0; position: relative;
    transition: color var(--t-fast) var(--ease);
}
.site-nav a:hover { color: var(--ink-900); text-decoration: none; }
.site-nav a.active { color: var(--ink-900); }
.site-nav a.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--brass-400); border-radius: 2px;
}
@media (max-width: 1023.98px) { .site-nav { display: none; } }

.site-header-actions { display: flex; align-items: center; gap: var(--sp-3); }

.site-burger {
    display: none; width: 42px; height: 42px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid var(--stone-300);
    border-radius: var(--r-md); color: var(--ink-900);
    font-size: 1.2rem; cursor: pointer;
}
@media (max-width: 1023.98px) { .site-burger { display: inline-flex; } }

.site-mobile-nav {
    display: none; flex-direction: column;
    padding: var(--sp-2) 0 var(--sp-6);
    border-top: 1px solid var(--stone-200);
}
.site-mobile-nav.is-open { display: flex; }
.site-mobile-nav a {
    padding: var(--sp-3) 0; font-size: var(--fs-lg);
    color: var(--text-secondary); text-decoration: none;
    border-bottom: 1px solid var(--stone-100);
}
.site-mobile-nav a:last-of-type { border-bottom: none; }
.site-mobile-nav .site-btn { margin-top: var(--sp-4); justify-content: center; }
@media (min-width: 1024px) { .site-mobile-nav { display: none !important; } }

/* =============================================================================
   4. BUTTONS
   ============================================================================= */
.site-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: .78rem 1.5rem;
    border-radius: var(--r-md);
    font-family: var(--font-ui);
    font-size: var(--fs-md); font-weight: var(--fw-semibold);
    letter-spacing: .005em;
    border: 1px solid transparent;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.site-btn:hover { text-decoration: none; transform: translateY(-1px); }
.site-btn:active { transform: translateY(0); }
.site-btn--sm { padding: .5rem 1rem; font-size: var(--fs-sm); }
.site-btn--lg { padding: .95rem 1.9rem; font-size: var(--fs-base); }

.site-btn--primary { background: var(--ink-900); color: #fff; }
.site-btn--primary:hover { background: var(--ink-800); color: #fff; }

.site-btn--accent { background: var(--brass-500); color: #fff; }
.site-btn--accent:hover { background: var(--brass-600); color: #fff; }

.site-btn--ghost { background: transparent; border-color: var(--stone-300); color: var(--ink-900); }
.site-btn--ghost:hover { border-color: var(--ink-900); background: transparent; color: var(--ink-900); }

.site-btn--on-ink { background: #fff; color: var(--ink-900); }
.site-btn--on-ink:hover { background: var(--stone-100); color: var(--ink-900); }
.site-btn--on-ink-ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.site-btn--on-ink-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }

/* =============================================================================
   5. HERO
   =============================================================================
   Type-led. With no photography available this has to carry itself on
   composition, and it is built so a background image can be dropped in later
   without the layout changing.
   ============================================================================= */
.site-hero {
    position: relative;
    background: var(--ink-900);
    color: #fff;
    overflow: hidden;
}
/* --- Hero media ---------------------------------------------------------
   The photograph is always there; the video sits on top of it and fades in
   when it can play. Two scrims, not one: a vertical wash so the copy has a
   ground, and a horizontal one so the right-hand panel stays readable over
   whatever part of the frame happens to be behind it. */
.site-hero-media { position: absolute; inset: 0; overflow: hidden; }
.site-hero-media::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, rgba(12,12,9,.92) 0%, rgba(12,12,9,.78) 45%, rgba(12,12,9,.62) 100%),
        linear-gradient(to top, rgba(12,12,9,.85) 0%, transparent 55%);
}
.site-hero-poster,
.site-hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.site-hero-video { opacity: 0; transition: opacity 900ms ease; }
.site-hero-video.is-playing { opacity: .55; }

/* Nobody who has asked the system to stop moving things wants a looping
   video behind their reading. The photograph is the whole design here. */
@media (prefers-reduced-motion: reduce) {
    .site-hero-video { display: none; }
}

.site-hero::after {
    /* A quiet brass wash, not a decorative gradient sweep. */
    content: ""; position: absolute; inset: auto -10% -40% auto;
    width: 720px; height: 720px; border-radius: 50%;
    background: radial-gradient(circle, rgba(194,147,72,.14) 0%, transparent 65%);
    pointer-events: none; z-index: 1;
}
.site-hero-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(var(--sp-8), 6vw, var(--sp-16));
    align-items: center;
    padding: clamp(var(--sp-16), 10vw, 7rem) 0 clamp(var(--sp-16), 10vw, 7rem);
}
@media (max-width: 991.98px) {
    .site-hero-inner { grid-template-columns: 1fr; padding: var(--sp-12) 0; }
}

.site-hero .site-h1 { color: #fff; margin: var(--sp-5) 0 var(--sp-5); }
.site-hero .site-h1 em { font-style: normal; color: var(--brass-300); }
.site-hero .site-lede { color: rgba(255,255,255,.72); }
.site-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
@media (max-width: 575.98px) { .site-hero-actions .site-btn { width: 100%; } }

/* Facts, not invented statistics. */
.site-hero-facts {
    display: flex; flex-wrap: wrap; gap: clamp(var(--sp-6), 4vw, var(--sp-10));
    margin-top: clamp(var(--sp-8), 5vw, var(--sp-12));
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255,255,255,.14);
}
.site-hero-fact strong {
    display: block; font-family: var(--font-serif);
    font-size: 1.3rem; color: #fff; line-height: 1.2;
}
.site-hero-fact span {
    display: block; margin-top: 2px;
    font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}

/* ---- The enquiry panel that sits in the hero ---- */
.site-hero-panel {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--r-2xl);
    padding: clamp(var(--sp-6), 3vw, var(--sp-8));
    backdrop-filter: blur(8px);
}
.site-hero-panel h2 {
    font-family: var(--font-serif); font-size: 1.4rem; color: #fff;
    margin-bottom: var(--sp-2); font-weight: var(--fw-normal);
}
.site-hero-panel p { color: rgba(255,255,255,.62); font-size: var(--fs-md); margin-bottom: var(--sp-5); }
.site-hero-points { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-3); }
.site-hero-points li {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    font-size: var(--fs-md); color: rgba(255,255,255,.84);
}
.site-hero-points i { color: var(--brass-300); margin-top: .18rem; flex-shrink: 0; }

/* =============================================================================
   6. THE IMAGE SLOT
   =============================================================================
   Used wherever photography belongs. With a real <img> inside it is a framed
   photograph; with none it is a composed plate that reads as a surface rather
   than a hole. Sized with an aspect ratio so adding an image later cannot
   shift the layout.
   ============================================================================= */
.site-plate {
    position: relative; overflow: hidden;
    border-radius: var(--r-xl);
    background: linear-gradient(155deg, var(--stone-200) 0%, var(--stone-100) 100%);
    border: 1px solid var(--stone-200);
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
}
.site-plate img, .site-plate picture {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.site-plate--wide { aspect-ratio: 16 / 9; }
.site-plate--tall { aspect-ratio: 3 / 4; }

/* The empty state: a mark and a rule, deliberately quiet. */
.site-plate-mark {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    color: var(--stone-400);
}
.site-plate-mark i { font-size: 1.9rem; }
.site-plate-mark span {
    font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase;
}
.site-plate--ink { background: var(--ink-800); border-color: rgba(255,255,255,.1); }
.site-plate--ink .site-plate-mark { color: rgba(255,255,255,.28); }

/* =============================================================================
   7. CONTENT BLOCKS
   ============================================================================= */

/* A feature row: number, heading, body. No boxes. */
.site-features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(var(--sp-6), 4vw, var(--sp-10));
}
.site-feature { position: relative; padding-top: var(--sp-5); border-top: 2px solid var(--ink-900); }
.site-section--ink .site-feature { border-top-color: var(--brass-400); }
.site-feature h3 {
    font-family: var(--font-serif); font-size: 1.16rem; font-weight: var(--fw-normal);
    margin-bottom: var(--sp-3); color: inherit;
}
.site-feature p { font-size: var(--fs-md); color: var(--text-secondary); margin: 0; line-height: 1.7; }
.site-section--ink .site-feature p { color: rgba(255,255,255,.62); }

/* Numbered process steps. */
.site-steps { counter-reset: step; display: grid; gap: var(--sp-8); }
.site-steps--row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-step { position: relative; padding-left: var(--sp-12); }
.site-step::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    position: absolute; left: 0; top: -2px;
    font-family: var(--font-serif); font-size: 1.6rem;
    color: var(--brass-400); line-height: 1;
}
.site-step h3 {
    font-family: var(--font-serif); font-size: 1.1rem; font-weight: var(--fw-normal);
    margin-bottom: var(--sp-2);
}
.site-step p { font-size: var(--fs-md); color: var(--text-secondary); margin: 0; }
.site-section--ink .site-step p { color: rgba(255,255,255,.62); }

/* Service list: a bordered grid, one hairline shared between cells. */
.site-services {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    border-top: 1px solid var(--stone-200);
    border-left: 1px solid var(--stone-200);
}
.site-service {
    padding: clamp(var(--sp-5), 3vw, var(--sp-8));
    border-right: 1px solid var(--stone-200);
    border-bottom: 1px solid var(--stone-200);
    text-decoration: none; color: inherit;
    transition: background var(--t-base) var(--ease);
}
.site-service:hover { background: var(--surface); text-decoration: none; color: inherit; }
.site-service i { font-size: 1.4rem; color: var(--brass-500); }
.site-service h3 {
    font-family: var(--font-serif); font-size: 1.08rem; font-weight: var(--fw-normal);
    margin: var(--sp-4) 0 var(--sp-2);
}
.site-service p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; line-height: 1.65; }

/* Package and hotel cards. */
.site-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }
.site-card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--stone-200);
    border-radius: var(--r-xl);
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.site-card:hover { border-color: var(--stone-400); transform: translateY(-2px); text-decoration: none; color: inherit; }
.site-card .site-plate { border-radius: 0; border: none; border-bottom: 1px solid var(--stone-200); }
.site-card-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.site-card-body h3 {
    font-family: var(--font-serif); font-size: 1.14rem; font-weight: var(--fw-normal);
    margin-bottom: var(--sp-3);
}
.site-card-meta {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-3);
}
.site-card-meta span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.site-card-foot {
    margin-top: auto; padding-top: var(--sp-4);
    border-top: 1px solid var(--stone-100);
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
}
.site-price { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink-900); line-height: 1.1; }
.site-price small {
    display: block; font-family: var(--font-ui); font-size: var(--fs-2xs);
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px;
}

/* Branch cards. */
.site-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); }
.site-branch {
    padding: clamp(var(--sp-5), 3vw, var(--sp-8));
    background: var(--surface); border: 1px solid var(--stone-200); border-radius: var(--r-xl);
}
.site-branch h3 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: var(--fw-normal); margin: var(--sp-3) 0; }
.site-branch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.site-branch li { display: flex; gap: var(--sp-3); font-size: var(--fs-md); color: var(--text-secondary); }
.site-branch li i { color: var(--brass-500); margin-top: .2rem; flex-shrink: 0; }

/* FAQ. */
.site-faq { max-width: 780px; margin: 0 auto; }
.site-faq details {
    border-bottom: 1px solid var(--stone-200);
}
.site-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
    padding: var(--sp-5) 0; cursor: pointer; list-style: none;
    font-family: var(--font-serif); font-size: 1.08rem; color: var(--ink-900);
}
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after {
    content: "\f4fe"; font-family: bootstrap-icons; font-size: 1rem;
    color: var(--brass-500); transition: transform var(--t-base) var(--ease); flex-shrink: 0;
}
.site-faq details[open] summary::after { transform: rotate(45deg); }
.site-faq-body { padding-bottom: var(--sp-5); color: var(--text-secondary); font-size: var(--fs-md); line-height: 1.75; }

/* Empty states, used when the catalogue has nothing in it yet. */
.site-empty {
    text-align: center; padding: clamp(var(--sp-10), 6vw, var(--sp-16)) var(--sp-5);
    border: 1px dashed var(--stone-300); border-radius: var(--r-xl);
    background: var(--surface);
}
.site-empty i { font-size: 2rem; color: var(--stone-400); }
.site-empty h3 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: var(--fw-normal); margin: var(--sp-4) 0 var(--sp-3); }
.site-empty p { color: var(--text-secondary); max-width: 52ch; margin: 0 auto var(--sp-5); }

/* =============================================================================
   8. ENQUIRY
   ============================================================================= */
.site-cta {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--sp-8), 5vw, var(--sp-12));
    align-items: start;
}
@media (max-width: 900px) { .site-cta { grid-template-columns: 1fr; } }

.site-contact-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); }
.site-contact-links a {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-md); font-weight: var(--fw-medium);
    color: var(--brass-300); text-decoration: none;
}
.site-contact-links a:hover { color: #fff; text-decoration: none; }

.site-form {
    background: var(--surface);
    border: 1px solid var(--stone-200);
    border-radius: var(--r-2xl);
    padding: clamp(var(--sp-5), 3vw, var(--sp-8));
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
@media (max-width: 575.98px) { .site-form { grid-template-columns: 1fr; } }
.site-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-field--full { grid-column: 1 / -1; }
.site-field label {
    font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.site-field input, .site-field select, .site-field textarea {
    padding: .7rem .85rem;
    border: 1px solid var(--stone-300); border-radius: var(--r-md);
    background: var(--surface); color: var(--text-primary);
    font-family: var(--font-ui); font-size: var(--fs-md);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.site-field textarea { resize: vertical; min-height: 104px; }
.site-field input:focus, .site-field select:focus, .site-field textarea:focus {
    outline: none; border-color: var(--brass-400);
    box-shadow: 0 0 0 3px var(--brass-50);
}
.site-form .site-btn { grid-column: 1 / -1; }
.site-form-note { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }
.site-field-error { font-size: var(--fs-xs); color: var(--critical-500); }

/* The honeypot. Off-screen rather than display:none - the better bots skip
   what is obviously hidden, and this needs to look real to them while never
   being seen or focused by a person. */
.site-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* =============================================================================
   9. FOOTER
   ============================================================================= */
.site-footer {
    background: var(--ink-900);
    color: rgba(255,255,255,.6);
    padding: clamp(var(--sp-12), 7vw, var(--sp-20)) 0 var(--sp-8);
}
.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(var(--sp-6), 4vw, var(--sp-10));
    padding-bottom: clamp(var(--sp-8), 5vw, var(--sp-12));
    border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 900px) { .site-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer-grid { grid-template-columns: 1fr; } }

.site-footer-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); text-decoration: none; }
.site-footer-brand img { height: 38px; width: auto; }
.site-footer-brand span { font-family: var(--font-serif); font-size: 1.1rem; color: #fff; }
.site-footer-about p { font-size: var(--fs-md); line-height: 1.75; max-width: 38ch; color: rgba(255,255,255,.55); }

.site-footer h4 {
    font-family: var(--font-ui);
    font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--brass-300); margin-bottom: var(--sp-5);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.site-footer a { color: rgba(255,255,255,.6); text-decoration: none; font-size: var(--fs-md); }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer-contact li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-md); line-height: 1.6; }
.site-footer-contact i { color: var(--brass-400); margin-top: .22rem; flex-shrink: 0; }

.site-footer-bottom {
    padding-top: var(--sp-6);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    font-size: var(--fs-xs); color: rgba(255,255,255,.4);
}

/* =============================================================================
   10. PAGE HEADER (inner pages)
   ============================================================================= */
.site-pagehead {
    background: var(--ink-900); color: #fff;
    padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0 clamp(var(--sp-10), 6vw, var(--sp-12));
}
.site-pagehead .site-h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: var(--sp-4) 0 var(--sp-4); }
.site-pagehead .site-lede { color: rgba(255,255,255,.68); }

.site-flash {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
    font-size: var(--fs-md); margin: var(--sp-6) 0;
}
.site-flash--ok   { background: var(--positive-50); color: var(--positive-600); }
.site-flash--bad  { background: var(--critical-50); color: var(--critical-600); }

/* =============================================================================
   11. LEGACY PALETTE BRIDGE
   =============================================================================
   public-site.css declares --emerald-*, --gold, --ink* and friends, and the
   Build Your Trip wizard, the flight search, the hotel directory and the visa
   catalogue are all painted with them. Repointing the names here moves those
   ten pages onto the new palette without rewriting them, and they can be
   migrated properly one at a time later.
   ============================================================================= */
:root {
    --emerald-950: var(--ink-900);
    --emerald-900: var(--ink-850);
    --emerald-800: var(--harbour-600);
    --emerald-700: var(--harbour-600);
    --emerald-500: var(--harbour-500);
    --emerald-300: var(--harbour-300);
    --emerald-100: var(--harbour-100);
    --emerald-050: var(--harbour-50);
    --gold:        var(--brass-500);
    --gold-soft:   var(--brass-200);
    --ivory:       var(--stone-50);
    --ink:         var(--text-primary);
    --ink-soft:    var(--text-secondary);
    --ink-faint:   var(--text-muted);
    --border:      var(--stone-200);
    --font-body:   var(--font-ui);
}

/* --- Hero panel list ----------------------------------------------------- */
.site-hero-points li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.site-hero-points .i { margin-top: .15em; color: var(--brass-300); }
.site-btn--block { width: 100%; justify-content: center; }

/* --- Quiet panel: a state, not a result ---------------------------------- */
.site-panel--quiet {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    gap: var(--sp-3);
    max-width: 34rem;
    margin: var(--sp-8) auto;
    padding: var(--sp-10) var(--sp-6);
    background: #fff;
    border: 1px solid var(--line, #e4e4df);
    border-radius: 16px;
}
.site-panel--quiet .i { color: var(--brass-500, #a8791f); }
.site-panel--quiet h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.site-panel--quiet p { margin: 0; color: #55554e; line-height: 1.55; }
.site-panel--quiet .site-btn { margin-top: var(--sp-2); }

/* An affiliate price is what somebody was quoted recently, not a live seat.
   Saying when it was seen is the difference between a quote and a claim. */
.flight-priced-at {
    display: block;
    margin-top: var(--sp-2);
    font-size: .8125rem;
    color: #857c6e;
}