/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
    font-family: inherit;
    font-size: inherit;

}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}
/* ==========================================================================
   Bill Bowden Event Logistics — theme styles
   Shared by every page: tokens, type, buttons, top bar, header, footer.
   Homepage sections live in application/modules/home/css/home.css.
   ========================================================================== */

:root {
    --purple:       #2b1e83;
    --purple-dark:  #23196b;
    --purple-line:  rgba(255, 255, 255, .14);
    --orange:       #ee9a1c;
    --orange-dark:  #d4860f;
    --ink:          #23196b;
    --text:         #4a4560;
    --muted:        #6d6984;
    --grey:         #f1f1f4;
    --rule:         #dddce6;
    --white:        #ffffff;

    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body:    'Barlow', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

    --wrap:   1200px;
    --gutter: clamp(16px, 4vw, 40px);
}

body {
    margin: 0;
    background: var(--white);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: .98;
    text-transform: uppercase;
    color: var(--ink);
    letter-spacing: .005em;
}

.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.kicker {
    margin: 0 0 1.25rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange);
}

.accent { color: var(--orange); }

/* Buttons
   ------------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem;
    padding: 0 1.25rem;
    border: 2px solid transparent;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}

.btn--orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn--orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); }

/* Plane buttons: an icon tile on the left, label on the right. */
.btn--plane { padding-left: 0; }
.btn__icon {
    display: grid;
    place-items: center;
    align-self: stretch;
    width: 3rem;
}
.btn__icon img { width: var(--plane, 1.6rem); transition: opacity .15s; }

/* Header button: the white plane cross-fades to a blue one on hover. */
.btn__icon { position: relative; }
.btn__icon .btn__icon-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.btn--light { border-color: var(--white); color: var(--white); }
.btn--light .btn__icon { background: var(--white); }
.btn--light:hover { background: rgba(255, 255, 255, .12); }

.btn--purple { border-color: var(--purple); background: var(--purple); color: var(--white); }
.btn--purple .btn__icon { background: var(--orange); }

/* Purple buttons turn wholly orange on hover; their plane is blue. */
.btn--purple:hover,
.btn--nav:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn--nav:hover .btn__icon img { opacity: 0; }
.btn--nav:hover .btn__icon .btn__icon-hover { opacity: 1; }

/* On hover the plane shrinks and flies off up to the right, past the
   corner of its tile, fading out along the way.
   --fly is how far it travels; larger tiles set a larger value. */
.btn--light .btn__icon img,
.btn--purple .btn__icon img { transition: opacity .3s ease-in .15s, transform .5s cubic-bezier(.4, 0, .7, .6); }
.btn--light:hover .btn__icon img,
.btn--light:focus-visible .btn__icon img,
.btn--purple:hover .btn__icon img,
.btn--purple:focus-visible .btn__icon img {
    transform: translate(calc(1.6 * var(--fly, .75rem)), calc(-1.6 * var(--fly, .75rem))) scale(.5);
    opacity: 0;
}
/* …and leaves a letter behind, fading in where the plane was. */
.btn--light .btn__icon::before,
.btn--purple .btn__icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/application/themes/default/images/icons/envelope-blue.svg') center / calc(var(--plane, 1.6rem) * .85) auto no-repeat;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s .1s, transform .3s .1s;
}
.btn--light:hover .btn__icon::before,
.btn--light:focus-visible .btn__icon::before,
.btn--purple:hover .btn__icon::before,
.btn--purple:focus-visible .btn__icon::before { opacity: 1; transform: none; }
.btn__icon img { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    .btn__icon img,
    .btn__icon::before { transition: opacity .15s; }
}

.arrow-link {
    font-weight: 600;
    font-size: .9rem;
    color: var(--purple);
    text-underline-offset: .25em;
}

/* Arrows and chevrons in links nudge along on hover (back arrows nudge left). */
.arrow { display: inline-block; }
.arrow,
.chevron { transition: transform .2s ease; }
a:hover .arrow,
a:focus-visible .arrow,
a:hover .chevron,
a:focus-visible .chevron { transform: translateX(.3rem); }
a:hover .arrow--back,
a:focus-visible .arrow--back { transform: translateX(-.3rem); }
@media (prefers-reduced-motion: reduce) {
    .arrow,
    .chevron { transition: none; }
}

/* Top bar
   ------------------------------------------------------------------------ */

.topbar {
    background: var(--purple-dark);
    color: var(--orange);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.topbar__inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .55rem;
}
.topbar p { margin: 0; }
.topbar a { text-decoration: none; }
.topbar__right { color: var(--white); }
.topbar__end { display: flex; align-items: center; gap: 1.25rem; }

/* Social icon links (top bar and footer) */
.social {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.social a { display: block; color: var(--white); opacity: .85; }
.social a:hover { color: var(--orange); opacity: 1; }
.social svg { display: block; }

/* Header + navigation
   ------------------------------------------------------------------------ */

.mainHeader {
    position: relative;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
}
.mainHeader__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
}
.logo img { width: 190px; }

.mainNav {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.mainNav ul {
    display: flex;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
}
.mainNav ul a {
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
}
.mainNav ul a:hover { color: var(--orange-dark); }

.btn--nav {
    padding: 0 1.1rem;
    background: var(--purple);
    color: var(--white);
}
.btn--nav .btn__icon {
    --plane: 1.4rem;
    width: var(--plane);
    align-self: center;
    height: 1.2rem;
}

/* Nav dropdowns (Background, Contact us): open on hover or keyboard
   focus, or via the chevron (js/app.js) for touch screens. */
.navDrop {
    position: relative;
    display: flex;
    align-items: center;
}
.navDrop__toggle {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
}
.navDrop__toggle svg { width: .65rem; transition: transform .15s; }
.navDrop__toggle:hover { color: var(--orange-dark); }

/* The Contact us button carries its chevron in a joined purple block. */
.navDrop--button .navDrop__toggle {
    width: 2.5rem;
    height: auto;
    align-self: stretch;
    border-left: 1px solid rgba(255, 255, 255, .25);
    background: var(--purple);
    color: var(--white);
}
.navDrop--button .navDrop__toggle svg { width: .8rem; }
.navDrop--button .navDrop__toggle:hover { background: var(--orange); color: var(--ink); }
.mainNav .navDrop__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    gap: 0;
    min-width: 100%;
    margin: 0;
    padding: .4rem 0;
    background: var(--white);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--orange);
    box-shadow: 0 12px 24px rgba(20, 14, 60, .14);
}
.mainNav .navDrop__menu a {
    display: block;
    padding: .65rem 1.1rem;
    white-space: nowrap;
}
.mainNav .navDrop__menu a:hover { background: var(--grey); }
.navDrop--button .navDrop__menu { left: auto; right: 0; }
/* Text-link dropdowns hang a little below the link, bridged for hover. */
li.navDrop .navDrop__menu { margin-top: .6rem; }
li.navDrop .navDrop__menu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: .9rem; }
.navDrop:hover .navDrop__menu,
.navDrop:focus-within .navDrop__menu,
.navDrop.is-open .navDrop__menu { display: flex; }
.navDrop:hover .navDrop__toggle svg,
.navDrop.is-open .navDrop__toggle svg { transform: rotate(180deg); }

/* The mobile menu is a CSS-only checkbox toggle. */
.navToggle,
.navToggle__button { display: none; }

@media (max-width: 860px) {
    .navToggle__button {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
    }
    .navToggle__button span,
    .navToggle__button span::before,
    .navToggle__button span::after {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--ink);
        position: relative;
        content: '';
    }
    .navToggle__button span::before { position: absolute; top: -7px; }
    .navToggle__button span::after  { position: absolute; top: 7px; }

    .mainNav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem var(--gutter) 1.5rem;
        background: var(--white);
        border-bottom: 1px solid var(--rule);
    }
    .mainNav ul { flex-direction: column; gap: 0; }
    .mainNav ul a { display: block; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
    .navToggle:checked ~ .mainNav { display: flex; }
    .btn--nav { justify-content: center; flex: 1; }

    /* In the mobile menu the forms are listed under the button instead. */
    .navDrop { flex-wrap: wrap; align-items: stretch; }
    li.navDrop .navDrop__menu { margin-top: 0; }
    li.navDrop > a { flex: 1; }
    .navDrop__toggle { display: none; }
    .mainNav .navDrop__menu {
        position: static;
        display: flex;
        flex-basis: 100%;
        padding: .25rem 0 0;
        border: 0;
        box-shadow: none;
    }
    .mainNav .navDrop__menu a { padding-inline: 0; border-bottom: 1px solid var(--rule); }
    .mainNav .navDrop__menu a::before { content: '\2192\00a0\00a0'; color: var(--orange); }
    .topbar__right { display: none; }
}

/* Standard (non-fullwidth) pages
   ------------------------------------------------------------------------ */

body:not(.fullwidth) .content { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
body:not(.fullwidth) .content h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 1.5rem; }

/* Footer: contact band + legal line
   ------------------------------------------------------------------------ */

.siteFooter {
    background: var(--purple);
    color: rgba(255, 255, 255, .85);
}
.contactBand {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding-block: clamp(3rem, 8vw, 5.5rem) 4rem;
}
.contactBand h2 {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    color: var(--white);
    max-width: 11ch;
}
.contactBand p { margin: 1.25rem 0 1.5rem; font-size: .9rem; }
.essa { width: 118px; }

.contactBand__details {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    gap: 1.1rem 2rem;
    margin: .5rem 0 0;
}
.contactBand__details dt {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
    padding-top: .35rem;
}
.contactBand__details dd {
    margin: 0;
    font-size: 1.15rem;
    color: var(--white);
}
.contactBand__details a { text-decoration: none; }
.contactBand__details a:hover { text-decoration: underline; }

.footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block: 1.5rem 2rem;
    border-top: 1px solid var(--purple-line);
    font-size: .72rem;
}
.footer p { margin: 0; }
.footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}
@media (max-width: 760px) {
    .contactBand { grid-template-columns: 1fr; gap: 2rem; }
}

/* Desktop: the footer runs larger, matching the design at full width.
   Kept last so these overrides win. */
@media (min-width: 1100px) {
    .contactBand {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        padding-block: 7rem 5.75rem;
    }
    .contactBand h2 { font-size: 4.2rem; max-width: none; }
    .contactBand p { margin: 1.75rem 0 2rem; font-size: 1.2rem; letter-spacing: .03em; }
    .essa { width: 197px; }

    .contactBand__details {
        grid-template-columns: 9rem 1fr;
        align-items: baseline;
        gap: 1.6rem 0;
        margin-top: .75rem;
    }
    .contactBand__details dt { padding-top: 0; font-size: .9rem; }
    .contactBand__details dd { font-size: 1.35rem; letter-spacing: .03em; }

    .footer { padding-block: 2.5rem 4rem; font-size: .95rem; }
    .footer__links { gap: 2rem; }
}

/* ==========================================================================
   Inner pages — header band, body copy and the content blocks page bodies
   are built from. Tokens and buttons come from the theme's css/app.css.
   Also loaded by the contact module.
   ========================================================================== */

/* Header band
   ------------------------------------------------------------------------ */

.pageHeader {
    position: relative;
    background: var(--purple) url('/application/themes/default/images/photos/web/hero-background.jpg') center 65% / cover no-repeat;
    color: rgba(255, 255, 255, .88);
}
.pageHeader .wrap { padding-block: clamp(3rem, 7vw, 5rem); }
.pageHeader h1 {
    max-width: 18ch;
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    color: var(--white);
}
.pageHeader__lead {
    max-width: 40rem;
    margin: 1.5rem 0 0;
    font-size: 1.05rem;
    line-height: 1.75;
}
.pageHeader--form h1 { max-width: none; }
/* A short title kept on one line: on phones it shrinks to fit (the text
   is about 9.4em wide) rather than wrapping. */
.pageHeader--oneLine h1 {
    font-size: min(clamp(2.6rem, 6vw, 4.5rem), calc((100vw - 2 * var(--gutter)) / 9.4));
    white-space: nowrap;
}
.pageHeader time { display: block; margin-top: 1rem; font-size: .85rem; }

/* Body copy
   ------------------------------------------------------------------------ */

.pageBody { padding-block: clamp(3rem, 7vw, 5.5rem); overflow-x: clip; }

.prose > * + * { margin-top: 1.25rem; }
.prose p,
.prose li { max-width: 46rem; }
.prose p { margin-bottom: 0; line-height: 1.75; }
.prose h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-top: 3rem; }
.prose h3 { font-size: 1.5rem; margin-top: 2rem; }
.prose h2 + *,
.prose h3 + * { margin-top: 1rem; }
.prose a:not(.btn) { color: var(--purple); font-weight: 600; text-underline-offset: .2em; }
.prose a:not(.btn):hover { color: var(--orange-dark); }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: .4rem; }
.prose strong { color: var(--ink); }

.prose .lead {
    max-width: 48rem;
    font-size: 1.15rem;
    color: var(--ink);
}

/* Orange-tick checklist, optionally in two columns. */
.prose .ticks {
    padding: 0;
    list-style: none;
}
.prose .ticks li {
    position: relative;
    padding-left: 1.9rem;
}
.prose .ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45em;
    width: .9rem;
    height: .5rem;
    border-left: 3px solid var(--orange);
    border-bottom: 3px solid var(--orange);
    transform: rotate(-45deg);
}
.prose .ticks--cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: .9rem 2.5rem;
}
.prose .ticks--cols li + li { margin-top: 0; }

/* Customer quote. */
.prose blockquote {
    max-width: 46rem;
    margin-inline: 0;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--orange);
    background: var(--grey);
}
.prose blockquote p { font-size: 1.05rem; font-style: italic; color: var(--ink); }
.prose blockquote cite {
    display: block;
    margin-top: .6rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-dark);
}
.prose .quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}
.prose .quotes blockquote { margin: 0; }

/* Call to action strip at the end of a block or page. */
.prose .cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 2rem;
}
.prose .cta p { margin: 0; font-weight: 500; color: var(--ink); }
.prose .cta .btn--purple { padding-left: 1.25rem; }

/* Full-bleed grey band inside the body, breaking out of the .wrap. */
.prose .band {
    margin-inline: calc(50% - 50vw);
    padding: clamp(2.5rem, 6vw, 4.5rem) calc(50vw - 50%);
    background: var(--grey);
}
.prose .band > * + * { margin-top: 1.25rem; }
.prose .band > :first-child { margin-top: 0; }
/* Breathing room either side of a band. */
.prose > * + .band { margin-top: clamp(3rem, 7vw, 5rem); }
.prose .band:first-child { margin-top: 0; }
.prose > .band + * { margin-top: clamp(3rem, 7vw, 5rem); }

/* Service blocks: name + intro on the left, what's included on the right.
   Each block has an id so the homepage list can link straight to it. */
.prose .service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem clamp(2rem, 5vw, 4rem);
    padding-top: 3rem;
    margin-top: 3rem;
    border-top: 2px solid var(--purple);
    scroll-margin-top: 1.5rem;
}
.prose .service > * { margin: 0; }
.prose .service h2 { margin: 0 0 1rem; }
.prose .service__intro > * + * { margin-top: 1rem; }
.prose .service__list h3 { margin: 0 0 1rem; font-size: 1.25rem; }
.prose .service .badge { font-size: .65rem; vertical-align: .6em; }
.prose .service .cta { grid-column: 1 / -1; margin-top: .5rem; }

/* Numbered common issues. */
.prose .issues {
    counter-reset: issue;
    padding: 0;
    list-style: none;
}
.prose .issues > li {
    counter-increment: issue;
    position: relative;
    max-width: none;
    padding: 2rem 0 2rem 4.5rem;
    border-top: 1px solid var(--rule);
}
.prose .issues > li + li { margin-top: 0; }
.prose .issues > li::before {
    content: counter(issue, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.9rem;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--orange);
}
.prose .issues h2 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.prose .issues p + p { margin-top: .75rem; }

/* Team cards. */
.prose .team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    padding: 0;
    list-style: none;
}
.prose .team > li {
    max-width: none;
    margin: 0;
    padding: 1.5rem;
    background: var(--white);
    border: 1px solid var(--rule);
}
.prose .team h3 { margin: 0; font-size: 1.6rem; }
.prose .team .role {
    margin: .25rem 0 1rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-dark);
}
.prose .team dl { margin: 0; font-size: .9rem; }
.prose .team dt { margin-top: .6rem; font-weight: 600; color: var(--ink); }
.prose .team dd { margin: 0; }

.prose figure { margin-inline: 0; }
.prose figure img { width: 100%; }
/* Wide photo strip, e.g. the team photo on Background. */
.prose figure.wide img { aspect-ratio: 5 / 2; object-fit: cover; }

/* Long legal text. */
.legal h2 { font-size: 1.9rem; }
.legal h3 { font-size: 1.25rem; }
.legal p,
.legal li { font-size: .95rem; }

/* Contact page: form beside the details
   ------------------------------------------------------------------------ */

.contactPage {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}
.contactPage h2 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 1.5rem; }

/* 12-column form grid: fields span the row unless sized by class.
   Equipment rows: qty 1 + description 3 + dimensions 2 + 3 x 2 = 12. */
.enquiryForm {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
}
.enquiryForm > * { grid-column: 1 / -1; }
.enquiryForm .form-group { display: flex; flex-direction: column; gap: .4rem; }
.enquiryForm .form-group.half    { grid-column: span 6; }
.enquiryForm .form-group.third   { grid-column: span 4; }
.enquiryForm .form-group.quarter { grid-column: span 3; }
.enquiryForm .form-group.item-qty   { grid-column: span 1; }
.enquiryForm .form-group.item-desc  { grid-column: span 3; }
.enquiryForm .form-group.item-dims  { grid-column: span 2; }
.enquiryForm .form-group.item-small { grid-column: span 2; }
.enquiryForm label { overflow-wrap: anywhere; }
/* Dropdowns: drop the browser's own styling so they match the text boxes,
   with a purple chevron drawn in. The framework's empty .form-arrow span
   is not needed. */
.enquiryForm select {
    width: 100%;
    padding: .85rem 2.75rem .85rem 1rem;
    border: 1px solid var(--rule);
    border-bottom: 2px solid var(--purple);
    border-radius: 0;
    background: var(--grey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%232b1e83' stroke-width='2.5'/%3E%3C/svg%3E") right 1rem center / .85rem auto no-repeat;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    cursor: pointer;
}
.enquiryForm select:focus { outline: 2px solid var(--orange); outline-offset: 1px; background-color: var(--white); }
/* A required dropdown still on "Please choose" reads like a placeholder. */
.enquiryForm select:invalid { color: var(--muted); }
.enquiryForm select option { color: var(--ink); }
.enquiryForm .form-arrow { display: none; }
.enquiryForm .formSection {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--purple);
    font-size: 1.6rem;
}
.enquiryForm .formSection:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.enquiryForm .formNote { margin: -.5rem 0 0; max-width: 46rem; line-height: 1.7; }

/* Equipment cells sit on a common baseline even if a heading wraps,
   and the narrow quantity box drops the number spinner. */
.enquiryForm [class*="item-"].form-group { justify-content: flex-end; }
.enquiryForm .item-qty input { -moz-appearance: textfield; appearance: textfield; text-align: center; }
.enquiryForm .item-qty input::-webkit-outer-spin-button,
.enquiryForm .item-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Equipment rows: on wide screens only the first row shows its labels. */
@media (min-width: 761px) {
    .enquiryForm .item-more label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .enquiryForm .item-more { margin-top: -.6rem; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.enquiryForm label {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
}
.enquiryForm input,
.enquiryForm textarea {
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--rule);
    border-bottom: 2px solid var(--purple);
    background: var(--grey);
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
}
.enquiryForm textarea { min-height: 10rem; resize: vertical; }
.enquiryForm input:focus,
.enquiryForm textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; background: var(--white); }
.enquiryForm .error input,
.enquiryForm .error textarea,
.enquiryForm [aria-invalid="true"] { border-color: #c0392b; border-bottom-color: #c0392b; }
.enquiryForm .error,
.enquiryForm .form-error { color: #c0392b; font-size: .85rem; }
.enquiryForm button { grid-column: 1 / -1; justify-self: start; cursor: pointer; }

.formAlert {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid #c0392b;
    background: #fdf0ee;
    color: var(--ink);
}
.enquiry__done {
    padding: 2rem;
    border-left: 4px solid var(--orange);
    background: var(--grey);
}
.enquiry__done h2 { margin-bottom: 1rem; }
.enquiry__done p { margin: 0; line-height: 1.75; }

.contactDetails {
    padding: 2rem;
    background: var(--purple);
    color: rgba(255, 255, 255, .88);
}
.contactDetails h2 { color: var(--white); font-size: 1.9rem; }
.contactDetails h3 {
    margin: 2rem 0 .5rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--orange);
}
.contactDetails dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem 1.5rem;
    margin: 0;
    align-items: baseline;
}
.contactDetails dt {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
}
.contactDetails dd { margin: 0; font-size: 1.1rem; color: var(--white); }
.contactDetails a { text-decoration: none; }
.contactDetails a:hover { text-decoration: underline; }
.contactDetails address { font-style: normal; line-height: 1.7; }
.contactDetails .note { margin: .75rem 0 0; font-weight: 600; color: var(--white); }

/* Wide forms: the form takes the full width, details sit in a strip below. */
.contactPage--wide { grid-template-columns: 1fr; }
.contactPage--wide .contactDetails {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem 2.5rem;
}
.contactPage--wide .contactDetails h3 { margin-top: 0; }

.otherForms { margin: 0; padding: 0; list-style: none; }
.otherForms li + li { margin-top: .4rem; }
.otherForms a { font-weight: 600; color: var(--white); }

/* Tick boxes: a plain box beside its sentence (the framework's switch
   slider is not used on this site). */
.enquiryForm .form-group.consent { flex-direction: row; align-items: flex-start; gap: .75rem; }
.enquiryForm .consent .switch { flex: none; padding-top: .15rem; }
.enquiryForm .consent .slider { display: none; }
.enquiryForm .consent input {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    accent-color: var(--purple);
    cursor: pointer;
}
.enquiryForm .consent .label { font-size: .95rem; line-height: 1.6; }

/* Book download: the sign-up beside the book's cover. */
.bookPage .prose { margin-bottom: 2rem; }
.bookPage .enquiry__done .btn { margin-top: 1.5rem; }
.bookCover img {
    width: 100%;
    max-width: 22rem;
    height: auto;
    border: 1px solid var(--rule);
    box-shadow: 0 18px 40px rgba(20, 14, 60, .14);
}

@media (max-width: 900px) {
    .contactPage { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .enquiryForm .form-group.half,
    .enquiryForm .form-group.third,
    .enquiryForm .form-group.quarter,
    .enquiryForm .form-group.item-desc,
    .enquiryForm .form-group.item-dims { grid-column: 1 / -1; }
    .enquiryForm .form-group.item-qty,
    .enquiryForm .form-group.item-small { grid-column: span 3; }
    .enquiryForm .form-group.item-qty { margin-top: 1rem; }
}

@media (max-width: 760px) {
    .prose .service { grid-template-columns: 1fr; }
    .prose .issues > li { padding-left: 3.25rem; }
    .prose .issues > li::before { font-size: 1.9rem; }
}

/* Desktop: larger body text, matching the homepage sizing. Kept last. */
@media (min-width: 1100px) {
    .pageHeader .wrap { padding-block: 6rem 5.5rem; }
    .pageHeader__lead { font-size: 1.2rem; letter-spacing: .03em; }
    .prose p,
    .prose li { font-size: 1.1rem; letter-spacing: .02em; }
    .prose .lead { font-size: 1.3rem; }
    .prose h2 { font-size: 3rem; }
    .legal p,
    .legal li { font-size: 1rem; }
}

/* ==========================================================================
   Blog — post cards, pagination and the single post layout.
   The header band and body copy come from pages/css/pages.css.
   ========================================================================== */

/* Listing
   ------------------------------------------------------------------------ */

.postGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}
.postCard { display: flex; }
.postCard__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--rule);
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.postCard__link:hover { border-color: var(--purple); box-shadow: 0 10px 24px rgba(20, 14, 60, .1); }
.postCard__image {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: var(--grey);
}
.postCard__image--none {
    display: grid;
    place-items: center;
    background: var(--purple);
}
.postCard__image--none img { width: 3.5rem; opacity: .5; }
.postCard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .6rem;
    padding: 1.5rem 1.5rem 1.75rem;
}
.postCard time {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-dark);
}
.postCard__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--ink);
}
.postCard__intro { font-size: .92rem; line-height: 1.6; }
.postCard__more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: .5rem;
    font-weight: 600;
    color: var(--purple);
}
.postCard__more .chevron { width: .55rem; height: 1rem; }
.postCard__link:hover .postCard__title,
.postCard__link:hover .postCard__more { color: var(--orange-dark); }

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.5rem;
    margin-top: 3rem;
}
.pager ol {
    display: flex;
    gap: .35rem;
    margin: 0;
    padding: 0;
}
.pager a,
.pager span {
    display: grid;
    place-items: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 .5rem;
    border: 1px solid var(--rule);
    font-weight: 600;
    color: var(--purple);
    text-decoration: none;
}
.pager a:hover { border-color: var(--purple); }
.pager [aria-current] { background: var(--purple); border-color: var(--purple); color: var(--white); }
.pager .pager__step { border: 0; }

/* Single post
   ------------------------------------------------------------------------ */

.blogPost .pageHeader h1 { max-width: 24ch; }
.blogPost .kicker a { color: inherit; text-decoration: none; }
.blogPost .kicker a:hover { text-decoration: underline; }

.blogPost__wrap { max-width: calc(52rem + 2 * var(--gutter)); }
.blogPost__image { margin: 0 0 2.5rem; }
.blogPost__image img { width: 100%; max-height: 32rem; object-fit: cover; }

/* X "Post" share button, styled like X's own */
.share { margin: 2rem 0 0; }
.share__x {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}
.share__x:hover { background: #333; color: #fff; }

.blogPost__body img { height: auto; margin-block: 1rem; }
.blogPost__body h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.blogPost__body .video { position: relative; aspect-ratio: 16 / 9; }
.blogPost__body .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blogPost__body table { border-collapse: collapse; }
.blogPost__body td,
.blogPost__body th { padding: .4rem .75rem; border: 1px solid var(--rule); }

.postNav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--purple);
}
.postNav a {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}
.postNav a:hover { color: var(--orange-dark); }
.postNav span {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    color: var(--orange-dark);
}
.postNav__newer { grid-column: 2; text-align: right; }
.postNav__all { margin: 2rem 0 0; text-align: center; }
.postNav__all a { font-weight: 600; color: var(--purple); }

@media (max-width: 600px) {
    .postNav { grid-template-columns: 1fr; }
    .postNav__newer { grid-column: auto; text-align: left; }
}