/* public/css/listing.css
   ---------------------------------------------------------------------------
   The Master Listing Template.

   Navy, white and gold, understated. The photograph carries the premium feel and the
   type stays quiet — a hero that competes with its own image reads as a template, which
   is the thing this page exists to stop looking like.
   --------------------------------------------------------------------------- */

:root {
    /* System fonts.

       Nothing is downloaded, so there is no render-blocking request, no flash of unstyled
       text and no layout shift when a webfont arrives — on a page whose hero is already
       carrying a large photograph, that is the cheapest performance win available.

       The two stacks stay separate because the page still needs the distinction between a
       heading voice and a reading voice. Headings take the platform's UI face, which is
       tighter and more confident at large sizes; body text takes the same family for
       consistency. On Apple devices that is SF Pro, on Windows Segoe UI, on Android Roboto —
       each already tuned for its own screen, which is a quality no single webfont matches
       everywhere. */
    --ml-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    /* Headings share the stack but lean on weight and tighter letter-spacing for
       hierarchy rather than on a contrasting face. */
    --ml-font-head: var(--ml-font);

    --ml-navy:  #0B1626;
    --ml-navy-2:#16243B;

    /* How much navy sits over the hero photograph. Raise it if a particular image set
       proves too busy behind the type; lower it to let the picture through further.
       The three stops below are derived from this rather than set independently. */
    --ml-scrim: .52;
    --ml-gold:  #C9A227;
    --ml-line:  #E3E7EE;
    --ml-muted: #6B7688;
    --ml-soft:  #F7F8FA;
    --ml-ok:    #1F7A5C;
}

.page-listing {
    background: var(--ml-soft);
    font-family: var(--ml-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.ml-hero {
    position: relative;
    background: var(--ml-navy);
    padding: 5.5rem 1.5rem 6.5rem;
    overflow: hidden;
}

/* The photograph. A pseudo-element rather than the section background so the scrim can
   sit above it without a second wrapper, and so a missing image degrades to plain navy
   rather than to a broken box. */
.ml-hero.has-image::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--hero);
    background-size: cover;
    background-position: center;
    /* Held back a little rather than muted. With the lighter scrim the photograph is
       actually visible now, so a touch of desaturation and a slight lift in contrast keep it
       reading as a backdrop instead of competing with the gold. */
    filter: saturate(.9) contrast(1.05);
}

/* A fixed scrim, independent of the photograph.

   Text contrast then does not depend on which image happens to be assigned — the difference
   between a design and a gamble.

   Lightened so roughly half the photograph reads through. It was heavy enough that the
   skyline was barely visible, which wasted the image programme entirely: a hero photograph
   nobody can see is a slow-loading navy rectangle.

   Still graded rather than flat. It is lightest at the top, where there is nothing but sky,
   and heaviest at the bottom behind the lead paragraph and chips — those sit over the
   busiest part of a city photograph and need the most help. A single even tint would either
   wash out the image or lose the text, depending on the picture. */
.ml-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 22, 38, calc(var(--ml-scrim) - .14))  0%,
        rgba(11, 22, 38, var(--ml-scrim))             45%,
        rgba(11, 22, 38, calc(var(--ml-scrim) + .14)) 100%
    );
}

.ml-hero-inner {
    position: relative;
    max-width: 900px; margin: 0 auto;
    text-align: center; color: #fff;
}

.ml-hero-eyebrow {
    font: 600 .74rem/1 var(--ml-font);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ml-gold);
    margin: 0 0 1rem;
}

.ml-hero-title {
    /* 800 rather than 700, and tighter tracking: without a serif face to carry the
       contrast, weight and spacing have to do it instead — otherwise the title reads as
       large body text. */
    font: 800 clamp(1.9rem, 4vw, 3rem)/1.08 var(--ml-font-head);
    letter-spacing: -.028em;
    color: #fff; margin: 0 0 1rem;
    /* Barely visible on a dark frame, and the difference between readable and not on a
       bright one — a white sky behind white type is the case a fixed scrim cannot solve
       on its own. */
    text-shadow: 0 2px 18px rgba(11,22,38,.45);
}

.ml-hero-lead {
    font: 400 clamp(.95rem, 1.5vw, 1.08rem)/1.6 var(--ml-font);
    color: rgba(255,255,255,.9);
    max-width: 60ch; margin: 0 auto 1.6rem;
    text-shadow: 0 1px 12px rgba(11,22,38,.5);
}

.ml-hero-meta { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

.ml-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font: 500 .8rem/1 var(--ml-font);
    color: rgba(255,255,255,.9);
    background: rgba(11,22,38,.35);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
    padding: .42rem .85rem; border-radius: 40px;
}
.ml-chip-ok { color: #A9E9CB; border-color: rgba(169,233,203,.35); background: rgba(31,122,92,.25); }
.ml-flag { border-radius: 2px; display: block; }

.ml-hero-cta {
    display: inline-block; margin-top: 1.8rem;
    background: var(--ml-gold); color: #1A1204;
    font: 700 .92rem/1 var(--ml-font);
    padding: .85rem 1.7rem; border-radius: 8px; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ml-hero-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,162,39,.32); }

/* Photographer credit. A licence condition on stock imagery, so it has to be visible —
   but it is legal small print, not content, so it sits in the corner at low contrast. */
.ml-hero-credit {
    position: absolute; right: 1rem; bottom: .6rem;
    margin: 0; z-index: 2;
    font: 400 .68rem/1 var(--ml-font);
    color: rgba(255,255,255,.42);
    letter-spacing: .02em;
}
.ml-hero-credit a { color: inherit; text-decoration: none; }
.ml-hero-credit a:hover { color: rgba(255,255,255,.75); text-decoration: underline; }

/* ── At a Glance + enquiry ────────────────────────────────────────────────── */

.ml-top { padding: 0 1.5rem; }
.ml-top-inner {
    max-width: 1060px; margin: -3.5rem auto 0;   /* lifted over the hero */
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start;
}
@media (max-width: 860px) { .ml-top-inner { grid-template-columns: 1fr; } }

.ml-card {
    background: #fff; border: 1px solid var(--ml-line);
    border-radius: 14px; padding: 1.6rem 1.8rem;
    box-shadow: 0 14px 38px rgba(11,22,38,.08);
}
.ml-card h2 { font: 700 1.1rem/1.2 var(--ml-font-head); color: var(--ml-navy); margin: 0 0 1.1rem; letter-spacing: -.01em; }

.ml-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; margin: 0; }
@media (max-width: 520px) { .ml-facts { grid-template-columns: 1fr; } }
.ml-facts dt {
    font: 600 .7rem/1.3 var(--ml-font); letter-spacing: .05em;
    text-transform: uppercase; color: var(--ml-muted); margin-bottom: .2rem;
}
.ml-facts dd { font: 600 .95rem/1.35 var(--ml-font); color: var(--ml-navy); margin: 0; }

.ml-enquire { border-top: 3px solid var(--ml-gold); }
.ml-enquire-kicker {
    display: block; font: 700 .72rem/1 var(--ml-font);
    letter-spacing: .12em; text-transform: uppercase; color: var(--ml-gold); margin-bottom: .6rem;
}
.ml-price { font: 800 1.65rem/1.1 var(--ml-font-head); color: var(--ml-navy); margin: 0 0 .3rem; letter-spacing: -.02em; }
.ml-price-note { font: 400 .82rem/1.5 var(--ml-font); color: var(--ml-muted); margin: 0 0 1rem; }
.ml-enquire-body { font: 400 .9rem/1.6 var(--ml-font); color: #33405A; margin: 0 0 1.1rem; }

.ml-ticks { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.ml-ticks li {
    position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
    font: 400 .88rem/1.5 var(--ml-font); color: #33405A;
}
.ml-ticks li::before {
    content: "✓"; position: absolute; left: 0; color: var(--ml-ok); font-weight: 700;
}

.ml-btn {
    display: inline-block; width: 100%; text-align: center;
    background: var(--ml-navy); color: #fff;
    font: 700 .92rem/1 var(--ml-font);
    padding: .9rem 1.4rem; border-radius: 8px; text-decoration: none;
}
.ml-btn:hover { background: var(--ml-navy-2); color: #fff; }
.ml-btn-light { background: var(--ml-gold); color: #1A1204; width: auto; padding: .9rem 2rem; }

.ml-provider { font: 400 .78rem/1.5 var(--ml-font); color: var(--ml-muted); margin: .9rem 0 0; text-align: center; }

/* ── Sections ─────────────────────────────────────────────────────────────── */

.ml-section { padding: 3rem 1.5rem 0; }
.ml-section-inner { max-width: 1060px; margin: 0 auto; }
.ml-section h2 { font: 700 1.5rem/1.2 var(--ml-font-head); color: var(--ml-navy); margin: 0 0 1.1rem; letter-spacing: -.02em; }
.ml-section-lead { font: 400 .92rem/1.6 var(--ml-font); color: var(--ml-muted); margin: -.6rem 0 1.4rem; max-width: 70ch; }

.ml-prose { font: 400 1rem/1.75 var(--ml-font); color: #33405A; max-width: 72ch; }
.ml-prose p { margin: 0 0 1.15em; }
.ml-prose p:last-child { margin-bottom: 0; }
/* The opening proposition — larger and a touch heavier, so the Overview reads like an
   advisory page rather than a printed field. */
.ml-prose .ml-lead {
    font: 500 1.22rem/1.6 var(--ml-font); color: var(--ml-navy, #0B1626);
    margin: 0 0 1.1em; letter-spacing: -.01em;
}
@media (max-width: 640px) { .ml-prose .ml-lead { font-size: 1.12rem; } }

.ml-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.ml-fact {
    background: #fff; border: 1px solid var(--ml-line); border-left: 3px solid var(--ml-gold);
    border-radius: 10px; padding: 1.1rem 1.3rem;
}
.ml-fact p { margin: 0; font: 400 .92rem/1.6 var(--ml-font); color: #33405A; }

.ml-steps { list-style: none; counter-reset: step; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.ml-steps li {
    background: #fff; border: 1px solid var(--ml-line); border-radius: 10px;
    padding: 1.1rem 1.3rem; font: 400 .92rem/1.55 var(--ml-font); color: #33405A;
}
.ml-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ml-navy); color: #fff;
    font: 700 .8rem/1 var(--ml-font); margin-right: .6rem;
}

.ml-tick-list, .ml-list { list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem 1.4rem; }
.ml-tick-list li, .ml-list li {
    position: relative; padding-left: 1.5rem;
    font: 400 .93rem/1.6 var(--ml-font); color: #33405A;
}
.ml-tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ml-ok); font-weight: 700; }
.ml-list li::before { content: "•"; position: absolute; left: .3rem; color: var(--ml-gold); }

.ml-faqs details {
    background: #fff; border: 1px solid var(--ml-line); border-radius: 10px;
    padding: .9rem 1.2rem; margin-bottom: .6rem;
}
.ml-faqs summary { font: 600 .95rem/1.4 var(--ml-font); color: var(--ml-navy); cursor: pointer; }
.ml-faqs details > div { margin-top: .7rem; font: 400 .92rem/1.65 var(--ml-font); color: #33405A; }

/* ── Snapshot ─────────────────────────────────────────────────────────────── */

.ml-snap-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px; background: var(--ml-line); border: 1px solid var(--ml-line);
    border-radius: 12px; overflow: hidden; margin: 0 0 1.2rem;
}
.ml-snap-grid > div { background: #fff; padding: 1.1rem 1.3rem; }
.ml-snap-grid dt {
    font: 600 .7rem/1.3 var(--ml-font); letter-spacing: .05em;
    text-transform: uppercase; color: var(--ml-muted); margin-bottom: .25rem;
}
.ml-snap-grid dd { font: 600 1rem/1.35 var(--ml-font); color: var(--ml-navy); margin: 0; }

.ml-more {
    display: inline-block; font: 600 .9rem/1 var(--ml-font);
    color: var(--ml-gold); text-decoration: none; margin-top: .4rem;
}
.ml-more:hover { text-decoration: underline; }

/* ── Complete your setup ──────────────────────────────────────────────────── */

.ml-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; }
.ml-setup-item {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    background: #fff; border: 1px solid var(--ml-line); border-radius: 10px;
    padding: .95rem 1.2rem; text-decoration: none;
    font: 600 .92rem/1.35 var(--ml-font); color: var(--ml-navy);
}
.ml-setup-item:hover { border-color: var(--ml-gold); color: var(--ml-navy); }
.ml-setup-item.is-current { background: #F3F7F4; border-color: #CBE6D8; }
.ml-setup-tick { color: var(--ml-ok); font-weight: 700; }
.ml-setup-arrow { color: var(--ml-gold); }

/* ── Guides and similar ───────────────────────────────────────────────────── */

.ml-guide-grid, .ml-similar-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem;
    margin-bottom: 1rem;
}
.ml-guide {
    background: #fff; border: 1px solid var(--ml-line); border-radius: 10px;
    padding: 1.2rem 1.3rem; text-decoration: none; display: block;
}
.ml-guide:hover { border-color: var(--ml-gold); }
.ml-guide-kind {
    font: 700 .66rem/1 var(--ml-font); letter-spacing: .1em;
    text-transform: uppercase; color: var(--ml-gold);
}
.ml-guide h3 { font: 600 1rem/1.35 var(--ml-font); color: var(--ml-navy); margin: .5rem 0 .4rem; }
.ml-guide p { font: 400 .85rem/1.55 var(--ml-font); color: var(--ml-muted); margin: 0; }

.ml-similar-card {
    background: #fff; border: 1px solid var(--ml-line); border-radius: 10px;
    overflow: hidden; text-decoration: none; display: block;
}
.ml-similar-card:hover { border-color: var(--ml-gold); }
.ml-similar-card img { width: 100%; height: 140px; object-fit: cover; display: block; background: var(--ml-soft); }
.ml-similar-body { padding: .9rem 1.1rem; }
.ml-similar-where { font: 600 .7rem/1 var(--ml-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ml-muted); }
.ml-similar-card h3 { font: 600 .96rem/1.35 var(--ml-font); color: var(--ml-navy); margin: .4rem 0 0; }

/* ── Final CTA ────────────────────────────────────────────────────────────── */

.ml-final { background: var(--ml-navy); margin-top: 3.5rem; padding: 3.5rem 1.5rem; }
.ml-final-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.ml-final h2 { font: 800 1.7rem/1.2 var(--ml-font-head); color: #fff; margin: 0 0 .8rem; letter-spacing: -.02em; }
.ml-final p { font: 400 .96rem/1.7 var(--ml-font); color: rgba(255,255,255,.78); margin: 0 0 1.6rem; }

/* The reference, kept but quiet — §2. */
.ml-ref {
    font: 400 .72rem/1 var(--ml-font) !important;
    color: rgba(255,255,255,.35) !important;
    margin: 1.8rem 0 0 !important; letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
    .ml-hero-cta { transition: none; }
    .ml-hero-cta:hover { transform: none; }
}

/* ── Overriding the global heading rules ──────────────────────────────────────
   tl.css sets a site-wide h1–h6 rule: Manrope with a Georgia serif fallback,
   uppercase, and letter-spacing. Manrope is not being served, so every heading on
   this page fell back to Georgia — which is why they render as serif capitals
   rather than in the system stack set above.

   Scoped to .page-listing and stated explicitly rather than left to load order:
   which stylesheet wins depends on where the layout puts @stack('styles'), and a
   design that depends on file order is one that breaks the next time the layout
   is touched.

   Not !important. The specificity of two classes is enough to beat a bare element
   selector, and reaching for !important here would only make the NEXT override
   harder to write.
   -------------------------------------------------------------------------- */

.page-listing h1,
.page-listing h2,
.page-listing h3,
.page-listing h4 {
    font-family: var(--ml-font-head);
    text-transform: none;
    letter-spacing: -.02em;
}

.page-listing .ml-hero-title { font-weight: 800; letter-spacing: -.028em; }
.page-listing .ml-section h2 { font-weight: 700; font-size: 1.5rem; }
.page-listing .ml-card h2    { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.page-listing .ml-final h2   { font-weight: 800; font-size: 1.7rem; }

/* The eyebrow and section kickers are the one place uppercase is wanted — small,
   tracked out, and deliberate rather than inherited. */
.page-listing .ml-hero-eyebrow,
.page-listing .ml-enquire-kicker,
.page-listing .ml-guide-kind,
.page-listing .ml-similar-where,
.page-listing .ml-facts dt,
.page-listing .ml-snap-grid dt {
    text-transform: uppercase;
}

/* Body copy inherits the same stack, since tl.css sets a font on body too. */
.page-listing,
.page-listing p,
.page-listing li,
.page-listing dd,
.page-listing summary { font-family: var(--ml-font); }