/* ==========================================================================
   Baggage & Luggage: site styles.

   Every visual rule lives here. There is no inline style anywhere in the views,
   and the HTML sanitiser strips style attributes from article bodies, so this file
   is the only thing that decides how the site looks.

   THE DIVISION OF LABOUR, which is the rule to keep:

     Bootstrap owns LAYOUT.  container, row, col-*, d-flex, flex-*, gap-*,
                             justify-*, align-*, the spacing scale, the grid
                             breakpoints, table-responsive, img-fluid, sticky-top.
     This file owns SKIN.    colour, border, radius, shadow, type scale,
                             bespoke spacing values the Bootstrap scale has no
                             step for, and Bootstrap's own --bs-* variables.

   So a flex row is written `class="d-flex flex-wrap gap-3"` in the view, not
   `display: flex` in here. Two systems laying out the same element is how a page
   ends up responsive in one place and not the other.

   COLOUR comes from the logo: sky blue #02acfd, red #f60203, navy #0b0f1b.
   White on the logo's bright blue is only 2.5:1, so text-bearing blue uses a deeper
   shade of it (#0070b8, 5.2:1 with white) and the bright blue only ever carries
   navy text (7.5:1). The same goes for red: buttons use #d10a0a (5.6:1 with white),
   and the logo red itself is kept for icons and decoration.
   ========================================================================== */

:root {
    --brand:              #0070b8;
    --brand-dark:         #00528a;
    --brand-accent:       #02acfd;
    --brand-accent-dark:  #0295da;
    --brand-red:          #f60203;
    --cta:                #d10a0a;
    --cta-dark:           #a80707;
    --good:               #0b7a3b;
    --brand-contrast:     #ffffff;
    --brand-ring:         rgba(0, 112, 184, .22);

    --ink:                #0b0f1b;
    --ink-muted:          #4d5b6a;
    --rule:               #dbe7f0;
    --field-border:       #c3d4e1;
    --surface:            #ffffff;
    --surface-alt:        #f3f9fd;
    --sky:                #eaf8ff;
    --sky-strong:         #cdefff;
    --blush:              #fdecec;

    --radius:             .75rem;
    --radius-lg:          1.25rem;
    --radius-pill:        999px;
    --shadow-sm:          0 1px 2px rgba(11, 15, 27, .06), 0 1px 3px rgba(11, 15, 27, .05);
    --shadow-md:          0 10px 30px rgba(0, 82, 138, .12);
    --shadow-lg:          0 24px 60px rgba(0, 82, 138, .18);

    --measure:            68ch;

    /* Bootstrap component overrides, so buttons and links pick up the brand. */
    --bs-primary:         var(--brand);
    --bs-link-color:      var(--brand);
    --bs-link-hover-color: var(--brand-dark);
    --bs-body-color:      var(--ink);
    --bs-border-color:    var(--rule);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    color: var(--ink);
    background: var(--surface);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.01em; text-wrap: balance; }

/* Postcode fields show capitals as they are typed; the placeholder stays readable. */
.text-uppercase::placeholder { text-transform: none; }

a { text-underline-offset: .15em; }

/* --- icons -----------------------------------------------------------------
   Inline SVG from the sprite (Html.Icon). 1em square, so an icon takes the size
   and colour of the text around it. */

.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex-shrink: 0; }

.icon-bubble {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--sky);
    color: var(--brand);
    font-size: 1.35rem;
}
.icon-bubble-sm  { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; }
.icon-bubble-lg  { width: 4rem; height: 4rem; font-size: 1.85rem; }
.icon-bubble-red { background: var(--blush); color: var(--cta); }
.icon-bubble-navy{ background: var(--ink); color: #fff; }

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

.btn { --bs-btn-font-weight: 700; --bs-btn-border-radius: var(--radius-pill); }
.btn-lg { --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: .8rem; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}

/* The one call to action: the logo's red, deepened so white text clears 4.5:1. */
.btn-cta {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cta);
    --bs-btn-border-color: var(--cta);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cta-dark);
    --bs-btn-hover-border-color: var(--cta-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cta-dark);
    --bs-btn-active-border-color: var(--cta-dark);
    --bs-btn-focus-shadow-rgb: 209, 10, 10;
    box-shadow: 0 6px 18px rgba(209, 10, 10, .25);
}

/* The logo's sky blue, always with navy text. */
.btn-accent {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--brand-accent);
    --bs-btn-border-color: var(--brand-accent);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--brand-accent-dark);
    --bs-btn-hover-border-color: var(--brand-accent-dark);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--brand-accent-dark);
    --bs-btn-active-border-color: var(--brand-accent-dark);
}

.btn-white {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--sky);
    --bs-btn-hover-border-color: var(--sky);
}

/* --- focus and touch ------------------------------------------------------
   Keyboard users need to see where they are. :focus-visible rather than :focus
   so a mouse click does not leave a ring behind. */

:focus-visible {
    outline: 3px solid var(--brand-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* A finger is about 9mm. On a touch screen every control gets a 44px target. */
@media (pointer: coarse) {
    .btn,
    .nav-link,
    .page-link,
    .form-control,
    .form-select {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 40px;
        padding-inline: .875rem;
    }
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1080;
    padding: .5rem .875rem;
    background: var(--brand);
    color: var(--brand-contrast);
    border-radius: var(--radius);
}

/* --- header ------------------------------------------------------------- */

/* A thin strip in the logo's colours above the header. Decorative only. */
/* The group line above the header ("Part of ..."), on the footer's navy. */
.group-bar {
    background: var(--ink);
    color: rgba(255, 255, 255, .85);
    font-size: .8125rem;
    line-height: 1.2;
    padding: .4rem 0;
}
.group-bar a { color: #fff; font-weight: 600; text-decoration: none; }
.group-bar a:hover,
.group-bar a:focus-visible { text-decoration: underline; }

/* The same line under the footer logo. */
.footer-group { font-weight: 700; font-size: .9375rem; }
.site-footer .footer-group a { color: #fff; }

.topbar {
    height: 5px;
    background: linear-gradient(90deg, var(--brand-accent) 0%, var(--brand) 55%, var(--brand-red) 100%);
}

.site-header {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 2px 12px rgba(11, 15, 27, .04);
}
.site-header .navbar { padding-block: .5rem; }

/* 300 x 100 artwork, shown at 54 to 64px tall: legible, and a compact header. */
.site-logo { height: clamp(54px, 6vw, 64px); width: auto; }

.navbar-brand { font-weight: 800; color: var(--brand); }
@media (max-width: 1199px) {
    .site-header .navbar-brand { min-width: 0; max-width: calc(100% - 80px); white-space: normal; line-height: 1.25; }
    .site-header .site-logo { max-width: 100%; height: auto; max-height: 64px; }
}
.site-header .nav-link {
    font-weight: 600;
    color: var(--ink);
    border-radius: var(--radius-pill);
    padding-inline: .9rem;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus { color: var(--brand); background: var(--sky); }
.site-header .nav-link.active { color: var(--brand); }

.nav-cta { white-space: nowrap; }

@media (min-width: 992px) {
    .navbar .nav-link { white-space: nowrap; }
}

.breadcrumb-bar {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--rule);
    padding: .55rem 0;
    font-size: .875rem;
}
.breadcrumb-bar .breadcrumb-item a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb-bar .breadcrumb-item a:hover { color: var(--brand); text-decoration: underline; }

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

/* The light band at the top of inner pages: title, a line of intro, an icon. */
.page-head {
    background:
        radial-gradient(circle at 92% 10%, rgba(2, 172, 253, .22), transparent 40%),
        linear-gradient(180deg, var(--sky) 0%, #fff 100%);
    padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
}

.section        { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-tight  { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.section-alt    { background: var(--surface-alt); }
.section-sky    { background: var(--sky); }

.section-eyebrow {
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cta);
    margin-bottom: .5rem;
}
.section-heading { font-size: clamp(1.6rem, 3.5vw, 2.25rem); font-weight: 800; line-height: 1.2; margin-bottom: .75rem; }
.section-lead    { font-size: 1.125rem; color: var(--ink-muted); max-width: 60ch; }

.page-title { font-size: clamp(1.85rem, 4.5vw, 2.75rem); font-weight: 800; line-height: 1.15; margin-bottom: .6rem; }
.page-intro { font-size: 1.125rem; color: var(--ink-muted); max-width: var(--measure); margin-bottom: 0; }
.empty-state{ color: var(--ink-muted); padding: 2rem 0; }

/* --- home: hero ------------------------------------------------------------ */

.home-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(2, 172, 253, .28), transparent 42%),
        radial-gradient(circle at 4% 96%, rgba(246, 2, 3, .06), transparent 30%),
        linear-gradient(180deg, var(--sky) 0%, #fff 100%);
    padding-block: clamp(2.5rem, 7vw, 5rem);
}

.hero-badge {
    background: #fff;
    border: 1px solid var(--sky-strong);
    border-radius: var(--radius-pill);
    color: var(--brand-dark);
    font-size: .875rem;
    font-weight: 700;
    padding: .35rem .85rem;
    box-shadow: var(--shadow-sm);
}
.hero-badge .icon { color: var(--brand-red); }

.hero-title {
    font-size: clamp(2.2rem, 5.2vw, 3.6rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 1rem 0;
}
.hero-title-accent {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: var(--brand-red);
    text-decoration-thickness: .12em;
    text-underline-offset: .12em;
}
.hero-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-muted); max-width: 52ch; }

.trust-item { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.trust-item .icon { color: var(--good); font-size: 1.15rem; }

/* The quick price card in the hero. */
.quick-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.25rem, 3vw, 1.85rem);
}
.quick-card-title { font-size: 1.35rem; font-weight: 800; margin-bottom: .25rem; }
.quick-card-note  { font-size: .875rem; color: var(--ink-muted); }

/* --- home: cards and tiles -------------------------------------------------- */

.step-card,
.feature-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.step-number {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
    color: var(--sky-strong);
}
.step-title,
.feature-title { font-size: 1.15rem; font-weight: 800; margin: 1rem 0 .35rem; }
.step-card p,
.feature-card p { color: var(--ink-muted); margin-bottom: 0; }

/* A whole card as one link (the other services on the home page). */
.feature-card-link { color: var(--ink); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.feature-card-link:hover,
.feature-card-link:focus-visible { color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-card-link > span:last-child { color: var(--brand); }

.item-tile {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1rem;
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.item-tile:hover,
.item-tile:focus { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-accent); color: var(--ink); }
.item-tile-name { font-weight: 800; margin-top: .75rem; line-height: 1.25; }
.item-tile-size { font-size: .8125rem; color: var(--ink-muted); }

.dest-chip {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-weight: 700;
    padding: .55rem 1rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, color .15s ease;
}
.dest-chip .icon { color: var(--brand-red); }
.dest-chip:hover,
.dest-chip:focus { border-color: var(--brand); color: var(--brand); }

/* A deep blue band with the call to action. */
.cta-band {
    background:
        radial-gradient(circle at 90% 0%, rgba(2, 172, 253, .45), transparent 45%),
        linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: var(--shadow-md);
}
.cta-band-title { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; margin-bottom: .35rem; }
.cta-band p     { color: rgba(255, 255, 255, .9); margin-bottom: 0; }

/* --- FAQ -------------------------------------------------------------------- */

.faq-item {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
}
.faq-question { font-size: 1.0625rem; font-weight: 800; margin: 0 0 .4rem; }
.faq-answer p { color: var(--ink-muted); margin-bottom: 0; }

/* --- reviews ----------------------------------------------------------------- */

.review-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.35rem;
}
/* Gold on white is under 3:1, so the stars are a darker amber; they are decoration
   either way, because the rating is also spelled out for screen readers. */
.review-stars      { font-size: 1.25rem; letter-spacing: .1em; color: #b45309; line-height: 1; }
.review-stars-off  { color: var(--rule); }
.review-body       { font-size: 1rem; color: var(--ink); }
.review-body p     { margin-bottom: .5rem; }
.review-meta       { font-size: .875rem; color: var(--ink-muted); }
.review-meta strong{ color: var(--ink); }

.rating-picker legend { float: none; }
.rating-option {
    border: 1px solid var(--field-border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    padding: .4rem .9rem .4rem 2.1rem;
}
.rating-option-stars { color: #b45309; letter-spacing: .08em; }
.rating-option:has(.form-check-input:checked) { border-color: var(--brand); box-shadow: 0 0 0 .2rem var(--brand-ring); }

/* --- article cards ------------------------------------------------------- */

.article-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.article-card-media img {
    display: block;
    width: 100%;
    /* height: auto, or the img's height attribute fixes the height and the ratio is
       ignored, cropping the words on the covers. The ratio is the covers' own (1200 x
       630), and reserving the box stops the card shifting as images load. */
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

.article-card-body   { padding: 1.125rem 1.25rem 1.25rem; }
.article-card-category {
    display: inline-block;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cta);
    text-decoration: none;
    margin-bottom: .5rem;
}
.article-card-title  { font-size: 1.1875rem; font-weight: 800; line-height: 1.3; margin-bottom: .5rem; }
.article-card-title a{ color: var(--ink); text-decoration: none; }
.article-card-title a:hover { color: var(--brand); }
.article-card-excerpt{ color: var(--ink-muted); font-size: .9375rem; margin-bottom: 1rem; }
.article-card-meta   { font-size: .8125rem; color: var(--ink-muted); margin: auto 0 0; }
.article-card-sep    { margin: 0 .4rem; opacity: .6; }

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

.article-detail  { max-width: 1320px; }
.article-header  { margin-bottom: 1.5rem; }
.article-category{
    display: inline-block;
    font-size: .8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cta);
    text-decoration: none;
    margin-bottom: .625rem;
}
.article-title   { font-size: clamp(1.9rem, 4.5vw, 2.75rem); font-weight: 900; line-height: 1.15; margin-bottom: .75rem; }
.article-meta    { font-size: .9375rem; color: var(--ink-muted); }
.article-meta-sep{ margin: 0 .45rem; opacity: .6; }

.article-figure       { margin: 0 0 2rem; }
.article-figure img   { width: 100%; height: auto; border-radius: var(--radius-lg); aspect-ratio: 1200 / 630; object-fit: cover; }

.article-body { font-size: 1.0625rem; max-width: none; }
.article-body figure,
.article-body .table-responsive,
.article-body > img,
.article-body pre { max-width: none; }

.article-standfirst {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: none;
    margin: 0 0 1rem;
}

/* --- contents ------------------------------------------------------------- */

.article-contents {
    position: sticky;
    top: 6rem;
    border-left: 3px solid var(--sky-strong);
    padding: .25rem 0 .25rem 1rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}
.article-contents-heading {
    font-size: .6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin-bottom: .5rem;
}
.article-contents-list { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.article-contents-list li { margin-bottom: .4rem; line-height: 1.35; }
.article-contents-list a { font-size: .8125rem; color: var(--ink-muted); text-decoration: none; }
.article-contents-list a:hover { color: var(--brand); text-decoration: underline; }
.article-contents-l3 { padding-left: .75rem; }
.article-contents-l3 a { font-size: .75rem; }

.article-contents-inline {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: .625rem .875rem;
    margin-bottom: 1.5rem;
    background: var(--surface-alt);
}
.article-contents-inline summary { cursor: pointer; font-weight: 700; font-size: .875rem; color: var(--brand); }
.article-contents-inline .article-contents-list { margin-top: .625rem; }

/* Anchored headings must not land under the sticky header when jumped to. */
.article-body h2,
.article-body h3,
[id] { scroll-margin-top: 6rem; }

.article-footer {
    border-top: 1px solid var(--rule);
    margin-top: 2.5rem;
    padding-top: 1rem;
    max-width: none;
}
.article-footer-dates { font-size: .8125rem; color: var(--ink-muted); }
.article-body > * + * { margin-top: 1.125rem; }
.article-body h2 { font-size: 1.5rem;   font-weight: 800; margin-top: 2.25rem; line-height: 1.3; }
.article-body h3 { font-size: 1.25rem;  font-weight: 800; margin-top: 1.75rem; line-height: 1.35; }
.article-body h4 { font-size: 1.0625rem;font-weight: 800; margin-top: 1.5rem; }
.article-body ul,
.article-body ol { padding-left: 1.35rem; }
.article-body li + li { margin-top: .4rem; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.article-body a   { color: var(--brand); }
.article-body blockquote {
    border-left: 4px solid var(--brand-accent);
    padding: .25rem 0 .25rem 1.125rem;
    color: var(--ink-muted);
    font-style: italic;
}
.article-body table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.article-body th,
.article-body td    { border: 1px solid var(--rule); padding: .55rem .7rem; text-align: left; }
.article-body thead th { background: var(--surface-alt); font-weight: 700; }

.related { margin-top: 3.5rem; }

/* --- pagination ---------------------------------------------------------- */

.pagination-nav { margin-top: 2.5rem; }
.pagination .page-link { color: var(--brand); }
.pagination .page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
}

/* --- forms --------------------------------------------------------------- */

.form-label   { font-weight: 700; font-size: .9375rem; color: var(--ink); margin-bottom: .35rem; }
.form-hint    { font-size: .8125rem; color: var(--ink-muted); margin: .35rem 0 0; }
.field-error  { display: block; color: #b42318; font-size: .8125rem; margin-top: .25rem; }
.search-form  { max-width: 30rem; margin-bottom: 2rem; }
.auth-form,
.admin-form   { margin-top: 1.5rem; }

.form-control,
.form-select {
    border-color: var(--field-border);
    border-radius: .65rem;
    padding: .62rem .9rem;
}
.form-control-lg,
.form-select-lg { border-radius: .8rem; }
.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem var(--brand-ring);
}
.form-control::placeholder { color: #8796a5; }

/* A labelled field with an icon inside it, on the left. */
.input-icon { position: relative; }
.input-icon > .icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand);
    pointer-events: none;
}
.input-icon > .form-control,
.input-icon > .form-select { padding-left: 2.5rem; }

/* Each part of a form is a card with a numbered heading. Colour is never the only
   signal: the steps are numbered too. */
.form-section {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
/* Bootstrap's reboot floats a legend full width (and clears what follows), which is
   what keeps it inside the card rather than sitting on its top border. */
.form-legend {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 1rem;
    padding: 0;
}
.step-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
}

.form-legend-optional {
    font-weight: 600;
    font-size: .75rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--surface-alt);
    border-radius: var(--radius-pill);
    padding: .15rem .55rem;
}

/* One item on the quote form. */
.quote-item {
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: .85rem 1rem 1rem;
}
.quote-form .form-label { font-size: .875rem; }

/* Required-field marker. Colour is never the only signal: each marked label also
   carries a visually-hidden "required". */
.required-mark { color: var(--cta); font-weight: 800; margin-left: .15rem; }
.form-required-note { font-size: .875rem; color: var(--ink-muted); }
.form-required-note .required-mark { margin-left: 0; margin-right: .15rem; }

/* Honeypot. Off-screen rather than display:none, because some bots skip anything
   that is not rendered. Real people never reach it. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Side panel beside a form: other ways to get in touch, what happens next. */
.side-card {
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.35rem;
}
.side-card-title { font-size: 1.05rem; font-weight: 800; margin-bottom: .75rem; }
/* Clear of the sticky header when it sticks beside a long form. */
.side-card.sticky-lg-top { top: 6.5rem; }
.side-card .tick-list li + li { margin-top: .6rem; }
.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list .icon { color: var(--good); margin-right: .5rem; }

/* Postcode boxes: the suggestion list under the box, and the note after a check. A
   postcode the official list does not know gets a note, not an error (the form still
   sends); a known one gets a quiet confirmation. */
.postcode-anchor { position: relative; }
.postcode-list {
    position: absolute;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: .25rem;
    background: #fff;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    max-height: 16rem;
    overflow-y: auto;
}
.postcode-list li { padding: .5rem .75rem; border-radius: .5rem; cursor: pointer; font-weight: 600; color: var(--ink); }
.postcode-list li:hover,
.postcode-list li.active { background: var(--sky); color: var(--brand); }
.postcode-note { color: #8a4b00; margin-top: .35rem; }
.postcode-note.is-found { color: var(--good); }

/* --- currency exchange request ------------------------------------------- */

.currency-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--brand-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.35rem;
    scroll-margin-top: 6.5rem;
}
.currency-card-title { font-size: 1.25rem; font-weight: 800; margin-bottom: .35rem; }
.currency-card-title .icon { color: var(--brand); }
/* Inside the card, a section is a group of fields, not a card of its own. */
.currency-card .form-section { padding: 0; border: 0; box-shadow: none; margin-bottom: 1.25rem; }
.currency-card .form-legend { font-size: 1.05rem; }

/* --- quote comparison ------------------------------------------------------ */

.quote-route {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    line-height: 1.2;
}
.quote-route .icon { color: var(--brand-red); }

.quote-pieces .badge {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--rule);
    font-weight: 600;
    font-size: .875rem;
    padding: .45rem .7rem;
    border-radius: var(--radius-pill);
}

.quote-verdict {
    background: #fff;
    border: 1px solid var(--sky-strong);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.quote-verdict .icon { font-size: 1.25rem; }

.quote-option {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 5px solid var(--brand-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.35rem 1.4rem;
    transition: box-shadow .15s ease, transform .15s ease;
}
.quote-option:hover { box-shadow: var(--shadow-md); }
.quote-option-cheapest { border-top-color: var(--good); box-shadow: var(--shadow-md); }
.quote-option-title { font-size: 1.2rem; font-weight: 900; margin: 0; }
.quote-option-sub   { font-size: .875rem; color: var(--ink-muted); }
.quote-option-price { font-size: clamp(2.2rem, 4vw, 2.75rem); font-weight: 900; line-height: 1; margin: 1rem 0 .4rem; color: var(--ink); letter-spacing: -.02em; }
.quote-option-meta  { font-size: .9rem; color: var(--ink-muted); }
.quote-option-unavailable { background: var(--surface-alt); border-top-color: var(--rule); box-shadow: none; }
.quote-option-unavailable .quote-option-title { color: var(--ink-muted); }
.quote-option-airline { border-style: dashed; border-top-style: solid; border-top-color: var(--ink-muted); background: var(--surface-alt); }
.quote-option-breakdown summary { font-size: .875rem; font-weight: 700; color: var(--brand); cursor: pointer; }
.quote-option-breakdown dl { font-size: .875rem; margin-top: .5rem; }
.quote-option-breakdown dt { font-weight: 400; color: var(--ink-muted); }

.quote-badge { font-weight: 800; border-radius: var(--radius-pill); padding: .4rem .7rem; }
.quote-badge-cheapest { background: var(--good); color: #fff; }
.quote-badge-fastest  { background: var(--brand-accent); color: var(--ink); }

/* --- booking form -------------------------------------------------------------
   Choices are real radio buttons and checkboxes inside their labels, so they work
   with a keyboard, a screen reader and no script. :has() styles the picked one. */

.date-chip {
    min-width: 4.6rem;
    padding: .55rem .5rem .5rem;
    background: #fff;
    border: 2px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 1.15;
    transition: border-color .12s ease, background-color .12s ease;
}
.date-chip:hover { border-color: var(--brand-accent); }
.date-chip-day   { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.date-chip-num   { font-size: 1.45rem; font-weight: 900; color: var(--ink); }
.date-chip-month { font-size: .8rem; font-weight: 600; color: var(--ink-muted); }
.date-chip-later .icon { font-size: 1.35rem; color: var(--brand); margin-bottom: .2rem; }
.date-chip:has(input:checked) { background: var(--brand); border-color: var(--brand); }
.date-chip:has(input:checked) span,
.date-chip:has(input:checked) .icon { color: #fff; }
.date-chip:has(input:focus-visible),
.choice-card:has(input:focus-visible) { outline: 3px solid var(--brand-ring); outline-offset: 2px; }

.choice-card {
    background: #fff;
    border: 2px solid var(--rule);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.choice-card:hover { border-color: var(--brand-accent); }
.choice-card:has(input[type="radio"]:checked) { border-color: var(--brand); background: var(--sky); }
.choice-card-title { font-weight: 800; color: var(--ink); }
.choice-card-price { font-weight: 800; color: var(--brand); white-space: nowrap; }
.choice-card-icon  { font-size: 1.35rem; color: var(--brand); }
.packing-qty { width: 5.5rem; }

/* The included cover: a statement, styled as information rather than a choice. */
.included-cover {
    background: var(--sky);
    border: 1px solid var(--sky-strong);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    font-size: .9375rem;
}
.included-cover-icon { font-size: 1.4rem; color: var(--good); }

.packing-row {
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: .75rem .9rem .8rem;
}
.item-check:empty { display: none; }
.item-check {
    margin-top: .6rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: .875rem;
    line-height: 1.45;
}
.item-check-block { background: var(--blush); color: #8a1212; border: 1px solid #f5c2c2; }
.item-check-warn  { background: #fff7e6; color: #6b4a00; border: 1px solid #f3dca8; }
.packing-row:has(.item-check-block) { border-color: #f5c2c2; }

.deliver-country .icon { color: var(--brand-red); }
.blocked-list summary { font-weight: 700; color: var(--brand); cursor: pointer; }
.blocked-list summary .icon { color: var(--cta); }
.blocked-list ul { font-size: .9rem; }

.pay-later {
    background: var(--sky);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    font-size: .9375rem;
}
.pay-later .icon { color: var(--brand); font-size: 1.15rem; }

.summary-piece {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--rule);
    font-weight: 600;
    font-size: .8125rem;
    padding: .4rem .65rem;
    border-radius: var(--radius-pill);
}
.summary-lines { font-size: .9375rem; }
.summary-lines > div + div { margin-top: .4rem; }
.summary-lines dt { font-weight: 400; color: var(--ink-muted); }
.summary-lines dd { font-weight: 700; white-space: nowrap; }
.summary-total {
    border-top: 2px solid var(--rule);
    padding-top: .6rem;
    margin-top: .7rem !important;
    font-size: 1.15rem;
}
.summary-total dt, .summary-total dd { color: var(--ink); font-weight: 900; }
.booking-total-line { font-size: 1.1rem; color: var(--ink-muted); }
.booking-total-line strong { color: var(--ink); font-size: 1.35rem; font-weight: 900; }

/* --- the customer's booking page ------------------------------------------- */

.booked-banner {
    background: #eaf7ef;
    border: 1px solid #bfe3cc;
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
}
.icon-bubble-good { background: var(--good); color: #fff; }

.status-badge { font-weight: 800; border-radius: var(--radius-pill); padding: .45rem .75rem; font-size: .875rem; background: var(--sky); color: var(--brand-dark); }
.status-confirmed { background: var(--brand); color: #fff; }
.status-collected,
.status-intransit { background: var(--brand-accent); color: var(--ink); }
.status-delivered { background: var(--good); color: #fff; }
.status-onhold    { background: #fff1cc; color: #6b4a00; }
.status-cancelled { background: var(--blush); color: #8a1212; }

.status-step { position: relative; font-size: .8125rem; font-weight: 700; line-height: 1.25; color: var(--ink-muted); }
/* The line between steps, drawn from each step to the one before it. */
.status-step + .status-step::before {
    content: "";
    position: absolute;
    top: 1.15rem;
    right: 50%;
    width: 100%;
    height: 3px;
    background: var(--rule);
    z-index: 0;
}
.status-step-done + .status-step::before,
.status-step-done + .status-step-done::before { background: var(--good); }
.status-dot {
    position: relative;
    z-index: 1;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--rule);
    color: var(--ink-muted);
    margin-bottom: .35rem;
}
.status-step-done .status-dot    { background: var(--good); border-color: var(--good); color: #fff; }
.status-step-current .status-dot { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 5px var(--brand-ring); }
.status-step-current .status-label { color: var(--ink); }

.next-step {
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-left: 5px solid var(--brand);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
}
.next-step .icon { color: var(--brand); }

.detail-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.detail-card-title { font-size: 1.05rem; font-weight: 800; margin-bottom: .75rem; }
.detail-card-title .icon { color: var(--brand); }
.booking-table { font-size: .9375rem; }

.timeline { border-left: 3px solid var(--rule); padding-left: 1.1rem; }
.timeline-item { position: relative; }
.timeline-item + .timeline-item { margin-top: 1rem; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -1.55rem;
    top: .35rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid #fff;
}
.timeline-when { display: block; font-size: .8125rem; color: var(--ink-muted); }

/* --- what can and cannot be sent ------------------------------------------- */

.rule-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-left: 5px solid var(--cta);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
}
.rule-card-warn { border-left-color: #e0a100; }

/* --- admin --------------------------------------------------------------- */

.admin-subnav .btn   { white-space: nowrap; }
.admin-input-narrow  { width: 4.5rem; }
.admin-input-money   { width: 5.5rem; }
.price-grid-off      { opacity: .5; }

.admin-table   { font-size: .9375rem; }
.admin-slug    { display: block; font-size: .8125rem; color: var(--ink-muted); }
.admin-panel   {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.125rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--surface-alt);
}
.admin-panel-title { font-size: .9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin-bottom: 1rem; }
.code-area     { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; line-height: 1.5; }

.badge.status-published { background: #0f7b40; }
.badge.status-draft     { background: #8a6d1f; }
.badge.status-archived  { background: #5a6a78; }

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

.site-footer {
    background: var(--ink);
    color: rgba(255, 255, 255, .78);
    padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
    margin-top: clamp(3rem, 6vw, 5rem);
}
/* The logo has a navy outline, so on the navy footer it sits on a white tile. */
.footer-logo {
    background: #fff;
    border-radius: var(--radius);
    padding: .5rem .75rem;
}
.footer-logo img { height: 48px; width: auto; }
.footer-heading { font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 1rem; }
.footer-text    { font-size: .9375rem; font-style: normal; }
.footer-list    { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.footer-list li + li { margin-top: .55rem; }
.site-footer a  { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .btn-cta,
.site-footer .btn-cta:hover { color: #fff; text-decoration: none; }
.footer-contact .icon { color: var(--brand-accent); }
.footer-bottom  {
    border-top: 1px solid rgba(255, 255, 255, .14);
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .62);
}

/* --- print --------------------------------------------------------------- */

@media print {
    .topbar, .site-header, .site-footer, .breadcrumb-bar,
    .related, .pagination-nav, .js-print { display: none !important; }
    .detail-card, .side-card { box-shadow: none; break-inside: avoid; }
    .article-body { max-width: none; }
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .article-card:hover,
    .item-tile:hover { transform: none; }
}