/*
 * The agent website (Template B), owner-approved 2026-09-06.
 *
 * SERVED FROM public/, NOT BUILT FROM resources/css, and deliberately: the
 * built bundles need `npm run prod` and a committed artifact, and this repo has
 * already shipped a hand-patched bundle that the next real build silently
 * reverted. `public-pages.css` beside it is served the same way for the same
 * reason.
 *
 * IT DEFINES NO COLOUR OF ITS OWN except the two neutral fallbacks at the top
 * and the WhatsApp green. Every other colour resolves from the three brand
 * tokens the white-label partial writes at :root - --brand-orange,
 * --brand-orange-rgb and --brand-navy - which ARE the agency's primary_color
 * and accent_color. That is why one stylesheet dresses every agency and why
 * there is no per-agent CSS anywhere in this feature.
 *
 * WHY --brand-navy IS SAFE AS THE DEEP FIELD IN DARK MODE. brand.css maps it to
 * light ink under [data-bs-theme=dark], but the white-label partial re-declares
 * it at :root and is emitted AFTER brand.css - equal specificity, later wins -
 * so on a copy it is the agency's accent in both themes. The fallback below is
 * what an unresolvable copy gets, and it is dark on purpose: a hero field that
 * turned pale would put white type on white.
 *
 * NO HARDCODED LIGHT SURFACE ANYWHERE. `DarkModeAtPhoneWidthTest` scans every
 * served stylesheet for one, because a light literal here is a screen that
 * stays light in dark mode and nothing in the compiled sweeps can see it.
 */

:root {
    /* The unbranded fallbacks. They mirror WhiteLabelBrand's own, and they are
       overridden by white-label/partials/brand.blade.php on any copy that
       resolves a site row. */
    --brand-orange: #f07822;
    --brand-orange-rgb: 240, 120, 34;
    --brand-navy: #16284b;

    /* WhatsApp is a CHANNEL, not decoration: the button carries the colour
       people recognise it by, in the muted tone the mockup uses rather than
       the neon one. It is the only colour on this page that belongs to
       neither the agency nor the neutrals. */
    --site-wa: #0b6e5f;
    --site-wa-hover: #085548;

    /* Radius scale - deliberate, not "rounded everything": media and cards are
       soft, actions are pills, inputs and tables are nearly square. */
    --site-r-card: 14px;
    --site-r-media: 12px;
    --site-r-input: 10px;

    /* 8px spacing scale. Every margin and padding below is one of these. */
    --site-s1: 8px;
    --site-s2: 16px;
    --site-s3: 24px;
    --site-s4: 32px;
    --site-s6: 48px;
    --site-s8: 64px;
    --site-s10: 80px;

    --site-container: 1200px;

    /* Ink that sits ON the deep brand field. Fixed rather than derived: the
       field is the agency's own dark accent in both themes, so the type on it
       is white in both themes too. */
    --site-on-deep: #ffffff;
    --site-on-deep-muted: rgba(255, 255, 255, 0.76);
    --site-on-deep-faint: rgba(255, 255, 255, 0.56);
    --site-on-deep-line: rgba(255, 255, 255, 0.16);
    --site-on-deep-fill: rgba(255, 255, 255, 0.08);

    /*
     * BRAND INK - the agency's primary used as TEXT rather than as a fill.
     *
     * On light it is the brand colour itself. On dark it cannot be: an agency
     * whose primary is a deep blue (which the approved design's own agency is)
     * puts #163988 text on a #121a2a card, and the kickers, the ghost buttons
     * and the "All hotels" links all but disappear. The dark value mixes the
     * agency's own colour towards white, so it stays THEIR colour and becomes
     * legible - and where `color-mix` is unsupported the declaration is simply
     * invalid and the light value survives, which is a duller button rather
     * than a broken page.
     */
    --site-brand-ink: var(--brand-orange);

    --site-tint: rgba(var(--brand-orange-rgb), 0.10);
    --site-tint-strong: rgba(var(--brand-orange-rgb), 0.16);

    --site-font-head: "Libre Franklin", Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --site-font-body: Karla, Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --site-shadow-card: 0 1px 2px rgba(16, 40, 75, 0.05), 0 12px 28px -20px rgba(16, 40, 75, 0.28);
    --site-shadow-lift: 0 20px 48px -24px rgba(16, 40, 75, 0.45);
}

[data-bs-theme="dark"] {
    /* The card shadow is the one thing that cannot survive: a shadow on a dark
       ground reads as a smudge, so cards are separated by their border alone. */
    --site-shadow-card: none;
    --site-shadow-lift: none;

    --site-brand-ink: color-mix(in srgb, var(--brand-orange) 42%, #ffffff);
    --site-tint: rgba(var(--brand-orange-rgb), 0.22);
    --site-tint-strong: rgba(var(--brand-orange-rgb), 0.32);
}

/* ---------- page ---------- */

.site {
    background: var(--brand-bg);
    color: var(--brand-text);
    font-family: var(--site-font-body);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

.site *,
.site *::before,
.site *::after { box-sizing: border-box; }

.site h1,
.site h2,
.site h3,
.site h4 {
    margin: 0;
    font-family: var(--site-font-head);
    font-weight: 800;
    letter-spacing: -0.018em;
    color: var(--brand-text);
    text-wrap: pretty;
}

.site p { margin: 0; }
.site a { color: var(--site-brand-ink); text-decoration: none; }
.site a:hover { color: var(--site-brand-ink); text-decoration: underline; }
.site img { max-width: 100%; }

.site-inner {
    width: 100%;
    max-width: var(--site-container);
    margin: 0 auto;
    padding-left: var(--site-s3);
    padding-right: var(--site-s3);
}

.site-sec { padding: var(--site-s10) 0; }
.site-sec--tight { padding: var(--site-s8) 0; }
.site-sec--surface {
    background: var(--brand-surface);
    border-top: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
}
.site-sec--alt { background: var(--brand-surface-2); }

.site-kicker {
    display: block;
    font-family: var(--site-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--site-brand-ink);
}

.site-h2 { font-size: 34px; line-height: 1.16; margin-top: var(--site-s1); }
.site-lead {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--brand-text-muted);
    margin-top: var(--site-s2);
    max-width: 62ch;
}

.site-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--site-s3);
    margin-bottom: var(--site-s4);
}

.site-muted { color: var(--brand-text-muted); }
/*
 * MUTED, NOT FAINT. These are the small uppercase captions over every figure
 * on the page - FROM, PER SEAT, DEPARTS - and at `--brand-text-faint` they
 * measured 2.45:1 on the light theme, well under the 4.5 a 11px label needs.
 * They are not decoration: they are what says whether PKR 588,600 is per
 * person or per seat.
 */
.site-lbl {
    display: block;
    font-family: var(--site-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
}

/* ---------- buttons ---------- */

.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    border: 0;
    font-family: var(--site-font-head);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.site-btn:hover { text-decoration: none; }
/*
 * TWO CLASSES DEEP, AND THAT IS NOT A STYLE PREFERENCE. `.site a` above sets
 * the link colour and scores (0,1,1); a single-class button rule scores
 * (0,1,0) and LOSES to it - so every button that is an anchor rendered its
 * label in the brand link colour, which on the primary and WhatsApp fills is
 * the fill's own colour. The controls looked like unlabelled blobs and the
 * words were there all along.
 */
.site .site-btn--primary { background: var(--brand-orange); color: #ffffff; }
.site .site-btn--primary:hover { background: var(--brand-orange); color: #ffffff; filter: brightness(0.92); }
.site .site-btn--wa { background: var(--site-wa); color: #ffffff; }
.site .site-btn--wa:hover { background: var(--site-wa-hover); color: #ffffff; }
.site .site-btn--ghost {
    background: var(--brand-surface);
    color: var(--site-brand-ink);
    border: 1.5px solid var(--brand-border);
}
.site .site-btn--ghost:hover { background: var(--site-tint); color: var(--site-brand-ink); }
.site .site-btn--on-deep {
    background: var(--site-on-deep-fill);
    color: var(--site-on-deep);
    border: 1px solid var(--site-on-deep-line);
}
.site .site-btn--on-deep:hover { background: var(--site-on-deep-line); color: var(--site-on-deep); }
.site-btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.site-btn--block { width: 100%; }

.site-link-more {
    display: inline-flex;
    align-items: center;
    gap: var(--site-s1);
    margin-top: var(--site-s2);
    font-family: var(--site-font-head);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--site-brand-ink);
}

/* ---------- cards, pills, chips ---------- */

.site-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--site-r-card);
    box-shadow: var(--site-shadow-card);
}

.site-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--site-font-head);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--site-tint);
    color: var(--site-brand-ink);
}
.site-pill--quiet {
    background: var(--brand-surface-2);
    color: var(--brand-text-muted);
}
.site-pill--on-deep {
    background: var(--site-on-deep-fill);
    color: var(--site-on-deep);
}

.site-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--site-s1);
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text);
}

.site-icobox {
    width: 52px;
    height: 52px;
    border-radius: var(--site-r-media);
    background: var(--site-tint);
    color: var(--site-brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.site-icobox--sm { width: 44px; height: 44px; border-radius: 11px; }

.site-ico { width: 24px; height: 24px; display: block; }
.site-ico--sm { width: 18px; height: 18px; }
.site-ico--lg { width: 34px; height: 34px; }

.site-price {
    white-space: nowrap;
    font-family: var(--site-font-head);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand-text);
}
.site-price--sm { font-size: 19px; }
.site-price small {
    font-family: var(--site-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-text-muted);
}
.site-price--onreq { font-size: 19px; color: var(--brand-text-muted); }

.site-stars { display: inline-flex; gap: 2px; color: var(--site-brand-ink); }

/* ---------- top bar + header ---------- */

.site-topbar {
    background: var(--brand-navy);
    color: var(--site-on-deep-muted);
    font-size: 13.5px;
}
.site-topbar .site-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-s3);
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
    flex-wrap: wrap;
}
.site-topbar-item { display: inline-flex; align-items: center; gap: var(--site-s1); }
.site-topbar-item svg { color: var(--site-on-deep-faint); }
.site-topbar a { color: var(--site-on-deep-muted); }
.site-topbar a:hover { color: var(--site-on-deep); }
.site-topbar-group { display: flex; align-items: center; gap: var(--site-s3); flex-wrap: wrap; }

.site-header {
    background: var(--brand-surface);
    border-bottom: 1px solid var(--brand-border);
}
/*
 * THE HEADER WRAPS RATHER THAN BREAKING WORDS, and that is sizing for every
 * agency rather than for the mockup's one. The approved design carries six
 * short captions beside a short brand name and fits on one row; an agency
 * that buys all seven services and is called "Hafiz G Travel & Tours" needs
 * about 730px of nav in 590px of space, and the nav then broke every caption
 * in half - "Umrah / Packages", "Ziarat & / Transport".
 *
 * `flex-wrap` plus a nav that asks for 420px means the row stays exactly as
 * approved whenever it fits and drops the nav to a full-width second row when
 * it does not, instead of shredding it. Nothing here depends on how many
 * services this agency bought or on how long its name is.
 */
.site-header .site-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--site-s2) var(--site-s3);
    min-height: 88px;
    padding-top: var(--site-s1);
    padding-bottom: var(--site-s1);
}
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; max-width: 320px; }
.site-brand:hover { text-decoration: none; }
.site-brand-mark { height: 44px; width: auto; }
.site-brand-name {
    display: block;
    font-family: var(--site-font-head);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--site-brand-ink);
    line-height: 1.1;
}
.site-brand-sub {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
    margin-top: 3px;
}

/*
 * `[hidden]` IS ONLY A UA `display:none`, AND `.site-nav` OVERRIDES IT. The
 * collapse script sets `nav.hidden = true` on a phone and the menu stayed
 * open, which is the dead-control shape with the control right beside it.
 */
.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 420px;
    gap: 18px;
    row-gap: var(--site-s1);
    flex-wrap: wrap;
}
.site-nav[hidden] { display: none; }
.site-nav a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--brand-text);
    white-space: nowrap;
}
.site-nav a:hover { color: var(--site-brand-ink); text-decoration: none; }

.site-burger { display: none; }
.site-header-actions { display: flex; align-items: center; gap: var(--site-s1); flex: 0 0 auto; }

/* ---------- hero ---------- */

.site-hero {
    position: relative;
    background: var(--brand-navy);
    color: var(--site-on-deep);
    overflow: hidden;
}
.site-hero-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}
.site-hero-scene--photo { opacity: 0.32; }
.site-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--brand-navy) 0%, rgba(0, 0, 0, 0) 82%);
}
.site-hero-scrim--photo { background: linear-gradient(90deg, var(--brand-navy) 4%, rgba(0, 0, 0, 0.25) 100%); }
.site-hero .site-inner {
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--site-s3);
    padding-top: var(--site-s8);
    padding-bottom: 110px;
}
.site-hero h1 {
    font-size: 52px;
    line-height: 1.08;
    color: var(--site-on-deep);
    max-width: 17ch;
}
.site-hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--site-on-deep-muted);
    max-width: 54ch;
}
.site-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- search card ---------- */

.site-search { position: relative; z-index: 2; margin-top: -78px; }
.site-search-card {
    padding: var(--site-s3);
    border-radius: 18px;
    box-shadow: var(--site-shadow-lift);
}
.site-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-s2);
    margin-bottom: var(--site-s2);
    flex-wrap: wrap;
}
.site-search-note { font-size: 13.5px; color: var(--brand-text-muted); }
.site-search-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1fr 1fr 0.9fr auto;
    gap: 12px;
    align-items: stretch;
}

/*
 * A GRID ITEM DEFAULTS TO `min-width: auto`, SO IT CANNOT SHRINK BELOW ITS
 * CONTENT - and a native `<input type="date">` has an intrinsic width wider
 * than a 390px column. Without this the search card pushed the whole page 6px
 * wider than the viewport and the document scrolled sideways, which on a phone
 * is the first thing anybody notices.
 */
.site-search-grid > * { min-width: 0; }
.site-field input,
.site-field select { min-width: 0; }
.site-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: var(--site-r-input);
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
}
.site-field input,
.site-field select {
    border: 0;
    background: transparent;
    color: var(--brand-text);
    font-family: var(--site-font-body);
    font-size: 15.5px;
    font-weight: 600;
    padding: 0;
    width: 100%;
    min-height: 24px;
}
.site-field input:focus,
.site-field select:focus { outline: none; }
.site-field:focus-within {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px var(--site-tint);
}
.site-search-grid .site-btn { min-height: 100%; border-radius: var(--site-r-input); }

/* ---------- trust strip ---------- */

.site-trust { padding: var(--site-s4) 0 0; }
.site-trust .site-inner {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- grids ---------- */

.site-grid { display: grid; gap: var(--site-s3); }
.site-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--site-s2); }
.site-grid--visa { grid-template-columns: 0.9fr repeat(3, minmax(0, 1fr)); }

/* ---------- service cards ---------- */

.site-service {
    padding: var(--site-s3) var(--site-s3) var(--site-s3);
    display: block;
    color: inherit;
}
.site-service:hover { text-decoration: none; border-color: var(--brand-orange); }
.site-service h3 { font-size: 20px; margin-top: var(--site-s2); }
.site-service p { font-size: 15px; margin-top: var(--site-s1); color: var(--brand-text-muted); }

/* ---------- media panels on cards ---------- */

.site-media {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--brand-surface-2);
}
.site-media--sm { height: 140px; }
.site-media--blank {
    /* A flat brand tint, never a drawing: an empty image slot must read as
       "no photograph on this row", not as decoration standing in for one. */
    background-color: var(--site-tint);
}

.site-cardbody { padding: var(--site-s3); }
.site-cardbody--sm { padding: var(--site-s2); }
.site-cardfoot .site-btn { flex: none; }
.site-cardfoot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--site-s2);
    margin-top: var(--site-s2);
    padding-top: var(--site-s2);
    border-top: 1px solid var(--brand-border);
}

/* ---------- group flight cards ---------- */

.site-route {
    font-family: var(--site-font-head);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand-text);
}
.site-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--site-s2);
    margin-top: var(--site-s2);
}
.site-fact-value { font-size: 15.5px; font-weight: 600; }

/* ---------- about ---------- */

.site-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--site-s8);
    align-items: center;
}
.site-about-panel {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--brand-navy);
    min-height: 360px;
}
.site-about-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.site-about p + p { margin-top: var(--site-s2); }
.site-about-actions { display: flex; gap: 12px; margin-top: var(--site-s4); flex-wrap: wrap; }

/* ---------- enquiry ---------- */

.site-enquiry { background: var(--brand-navy); color: var(--site-on-deep); }
.site-enquiry .site-inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--site-s8);
    align-items: center;
}
.site-enquiry h2 { color: var(--site-on-deep); font-size: 34px; }
.site-enquiry .site-kicker { color: var(--site-on-deep-faint); }
.site-enquiry-lead { color: var(--site-on-deep-muted); font-size: 16.5px; line-height: 1.7; margin-top: var(--site-s2); max-width: 46ch; }
.site-contact-list { display: flex; flex-direction: column; gap: 14px; margin-top: var(--site-s4); }
.site-contact-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--site-on-deep); }
.site-contact-list svg { color: var(--site-on-deep-faint); flex: none; }
.site-contact-list a { color: var(--site-on-deep); }

.site-form-card { padding: var(--site-s4); border-radius: 18px; }
.site-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--site-s2) var(--site-s3); }
.site-form-full { grid-column: 1 / -1; }
.site-form-field { display: flex; flex-direction: column; gap: 6px; }
.site-form-field > label {
    font-family: var(--site-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-text-muted);
}
.site-form-field input,
.site-form-field textarea {
    width: 100%;
    min-height: 48px;
    border-radius: var(--site-r-input);
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    font-family: var(--site-font-body);
    font-size: 15px;
    padding: 12px 14px;
}
.site-form-field textarea { min-height: 122px; resize: vertical; }
.site-form-field input:focus,
.site-form-field textarea:focus {
    outline: none;
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px var(--site-tint);
}
.site-form-error { font-size: 13px; color: #b91c1c; }
[data-bs-theme="dark"] .site-form-error { color: #f87171; }
.site-form-field input[aria-invalid="true"],
.site-form-field textarea[aria-invalid="true"] { border-color: #b91c1c; }
.site-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-s3);
    margin-top: var(--site-s3);
    flex-wrap: wrap;
}
.site-form-note { font-size: 12.5px; color: var(--brand-text-muted); line-height: 1.5; max-width: 40ch; }
.site-thanks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--site-s2);
}
.site-thanks h3 { font-size: 22px; }

/* ---------- whatsapp band ---------- */

.site-wa-band { background: var(--site-wa); color: #ffffff; }
.site-wa-band .site-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-s4);
    padding-top: var(--site-s4);
    padding-bottom: var(--site-s4);
    flex-wrap: wrap;
}
.site-wa-title {
    font-family: var(--site-font-head);
    font-size: 21px;
    font-weight: 800;
    color: #ffffff;
}
.site-wa-sub { font-size: 15px; color: rgba(255, 255, 255, 0.82); margin-top: 2px; }
.site .site-wa-band .site-btn {
    background: var(--site-on-deep);
    color: var(--site-wa);
    min-height: 50px;
}
.site .site-wa-band .site-btn:hover { background: var(--site-on-deep); color: var(--site-wa); filter: brightness(0.95); }

/* ---------- footer ---------- */

.site-footer {
    background: var(--brand-navy);
    color: var(--site-on-deep-muted);
    padding-top: var(--site-s8);
}
.site-footer a { color: var(--site-on-deep-muted); }
.site-footer a:hover { color: var(--site-on-deep); text-decoration: none; }
.site-footer-cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--site-s6);
    padding-bottom: var(--site-s6);
}
.site-footer-h {
    font-family: var(--site-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--site-on-deep);
}
.site-footer-list { display: flex; flex-direction: column; gap: 11px; margin-top: var(--site-s2); font-size: 14.5px; }
.site-footer-brand { display: flex; align-items: center; gap: 12px; }
.site-footer-brand-name { font-family: var(--site-font-head); font-size: 18px; font-weight: 800; color: var(--site-on-deep); }
.site-footer-blurb { font-size: 14.5px; line-height: 1.7; margin-top: var(--site-s2); max-width: 42ch; }
.site-social { display: flex; gap: 10px; margin-top: var(--site-s3); }
.site-social a {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--site-on-deep-fill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-on-deep-muted);
}
.site-social a:hover { background: var(--site-on-deep-line); color: var(--site-on-deep); }
.site-social a.is-wa { background: var(--site-wa); color: #ffffff; }
.site-footer-legal {
    border-top: 1px solid var(--site-on-deep-line);
    padding: var(--site-s3) 0 var(--site-s4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-s3);
    font-size: 13px;
    color: var(--site-on-deep-faint);
    flex-wrap: wrap;
}

/* ---------- inner pages wearing the site chrome ---------- */

.site-page-head { padding: var(--site-s6) 0 var(--site-s3); }
.site-page-head h1 { font-size: 34px; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .site-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-grid--visa { grid-template-columns: 1fr 1fr; }
    .site-search-grid { grid-template-columns: 1fr 1fr 1fr; }
    .site-search-grid .site-btn { grid-column: 1 / -1; min-height: 50px; }
}

@media (max-width: 900px) {
    .site-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-about,
    .site-enquiry .site-inner { grid-template-columns: 1fr; gap: var(--site-s4); }
    .site-footer-cols { grid-template-columns: 1fr 1fr; gap: var(--site-s4); }
    .site-hero h1 { font-size: 42px; }
}

@media (max-width: 767px) {
    .site-inner { padding-left: var(--site-s2); padding-right: var(--site-s2); }
    .site-sec { padding: var(--site-s6) 0; }
    .site-sec--tight { padding: var(--site-s4) 0; }
    .site-h2 { font-size: 26px; }
    /* THE UTILITY BAR IS DESKTOP FURNITURE. On a 390px frame the address, the
       hours and the email stack into three rows above the logo and push the
       whole page down; all three are in the footer, and the approved phone
       design has no utility bar at all. */
    .site-topbar { display: none; }

    /* The pill keeps its mark and drops the number: at this width the digits
       are half the header. The number is still one tap away in the footer and
       in the enquiry block. */
    .site-header-actions .site-btn--wa { padding: 0; width: 46px; min-height: 46px; }
    .site-btn-label { display: none; }
    .site-header .site-inner { min-height: 68px; }
    .site-brand-mark { height: 36px; }
    .site-brand-name { font-size: 16px; }
    .site-brand-sub { font-size: 9px; letter-spacing: 0.14em; }

    .site-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 999px;
        background: var(--site-tint);
        color: var(--site-brand-ink);
        border: 0;
        cursor: pointer;
    }
    .site-nav {
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: var(--site-s1);
    }
    .site-nav a {
        padding: 12px 4px;
        border-top: 1px solid var(--brand-border);
    }
    .site-header .site-inner { flex-wrap: wrap; }
    

    .site-hero .site-inner {
        min-height: 340px;
        justify-content: flex-end;
        padding-top: var(--site-s6);
        padding-bottom: var(--site-s4);
    }
    .site-hero h1 { font-size: 31px; max-width: none; }
    .site-hero-sub { font-size: 15.5px; }
    .site-hero-scrim { background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, var(--brand-navy) 88%); }
    .site-hero-scrim--photo { background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, var(--brand-navy) 92%); }
    .site-hero-actions .site-btn { flex: 1 1 100%; }

    .site-search { margin-top: -24px; }
    .site-search-card { padding: var(--site-s2); }
    .site-search-grid { grid-template-columns: 1fr 1fr; }
    .site-search-grid > .site-field:nth-child(1),
    .site-search-grid > .site-field:nth-child(2),
    .site-search-grid > .site-field:nth-child(5) { grid-column: 1 / -1; }

    .site-trust { padding: var(--site-s3) 0 0; }
    .site-trust .site-inner { justify-content: flex-start; }
    .site-chip { font-size: 13px; padding: 8px 14px; }

    .site-grid--3,
    .site-grid--4,
    .site-grid--visa { grid-template-columns: 1fr; }
    .site-head-row { flex-direction: column; align-items: flex-start; gap: var(--site-s2); }

    .site-service { padding: var(--site-s2); display: flex; align-items: center; gap: var(--site-s2); }
    .site-service-text h3 { font-size: 17.5px; margin-top: 0; }
    .site-service-text p { font-size: 14px; }
    .site-service .site-link-more { display: none; }

    .site-cardfoot { flex-direction: column; align-items: stretch; gap: var(--site-s2); }
    .site-cardfoot .site-btn { width: 100%; }

    .site-form-grid { grid-template-columns: 1fr; }
    .site-form-card { padding: var(--site-s3); }
    .site-form-foot { flex-direction: column; align-items: stretch; }
    .site-form-foot .site-btn { width: 100%; }

    .site-enquiry h2 { font-size: 26px; }
    .site-wa-band .site-inner { flex-direction: column; align-items: flex-start; gap: var(--site-s2); }
    .site-wa-band .site-btn { width: 100%; }
    .site-footer-cols { grid-template-columns: 1fr; }
    .site-about-panel { min-height: 220px; }
}