/* 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; }
}

/* ==========================================================================
   Homepage sections — hero, services, Europe band, cards.
   Tokens and shared components come from the theme's css/app.css.
   ========================================================================== */

/* Hero
   ------------------------------------------------------------------------ */

.hero {
    position: relative;
    background: var(--purple) var(--hero-bg) center / cover no-repeat;
    color: rgba(255, 255, 255, .88);
    overflow: hidden;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}
.hero h1 {
    font-size: clamp(2.75rem, 6.2vw, 4.75rem);
    color: var(--white);
}
.hero__lead {
    max-width: 34rem;
    margin: 1.75rem 0 2.25rem;
    font-size: 1rem;
    line-height: 1.75;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.hero__photo {
    margin: 0;
    border: 2px solid var(--orange);
    box-shadow: 0 24px 48px rgba(10, 4, 50, .35);
}
.hero__photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Hero slider: the photos stack in one cell and cross-fade, with the dots
   underneath; app.js moves .is-active along and shows the dots. */
.slider__track { display: grid; }
.slider__slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity .8s ease;
}
.slider__slide.is-active { opacity: 1; }
.slider__dots {
    display: flex;
    justify-content: center;
    gap: .15rem;
    margin-top: .75rem;
}
.slider__dots[hidden] { display: none; }
.slider__dot {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.slider__dot::before {
    content: '';
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    transition: background-color .2s, transform .2s;
}
.slider__dot:hover::before { background: var(--white); }
.slider__dot[aria-current="true"]::before { background: var(--orange); transform: scale(1.25); }
.slider__dot:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
    .slider__slide { transition: none; }
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    padding-block: 0;
    border-top: 1px solid var(--purple-line);
    text-align: center;
}
.stats li {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.5rem 1rem 1.75rem;
}
.stats li + li { border-left: 1px solid var(--purple-line); }
.stats strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.1;
}
.stats span { font-size: .75rem; }

/* Services
   ------------------------------------------------------------------------ */

.services {
    isolation: isolate;
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    overflow: hidden;
    /* Faint paper-plane streaks behind the section (Tom's artwork). */
    background: var(--white) url('/application/themes/default/images/photos/web/gray-plain-background.svg') center bottom / cover no-repeat;
}
.services__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
    gap: clamp(2rem, 5vw, 4rem);
}
.services__intro h2 {
    font-size: clamp(2.25rem, 4vw, 2.9rem);
    max-width: 10ch;
}
.services__intro p:not(.kicker) {
    margin: 1.5rem 0;
    max-width: 22rem;
    font-size: .88rem;
}

.services__list {
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--purple);
}
.services__list li { border-bottom: 1px solid var(--rule); }
.services__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--purple);
}
.services__list a:hover { color: var(--orange-dark); }
.chevron { flex: none; width: .7rem; height: 1.2rem; }

.badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .4rem;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: .6rem;
    font-style: normal;
    letter-spacing: .08em;
    vertical-align: middle;
}

/* Europe band
   ------------------------------------------------------------------------ */

.europe {
    position: relative;
    /* Tom's orange artwork: paper-plane streaks and a star. */
    background: var(--orange) url('/application/themes/default/images/photos/web/orange-bg.svg') center bottom / cover no-repeat;
    color: var(--ink);
    overflow: hidden;
}
.europe__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    padding-block: clamp(3rem, 7vw, 4.5rem);
}
.europe h2 {
    font-size: clamp(2.1rem, 4vw, 2.75rem);
    color: var(--purple);
}
.europe p {
    margin: 0 0 1.5rem;
    font-size: .88rem;
    line-height: 1.75;
}
/* The button turns orange on hover but keeps its blue border. */
.europe .btn--purple:hover { border-color: var(--purple); }

/* Cards
   ------------------------------------------------------------------------ */

.cards {
    background: var(--grey);
    padding-block: clamp(3rem, 7vw, 4.5rem) clamp(3.5rem, 8vw, 5.5rem);
}
.cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0 auto;
}
.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--rule);
}
.card__media { position: relative; }
.card__image {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}
.card__image--placeholder {
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(135deg, #e4e3ec 0 12px, #ecebf2 12px 24px);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
/* Title set over the photo, as on the Book of Events card. */
.card__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1rem;
    background: rgba(20, 14, 60, .2);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    color: var(--white);
    line-height: 1;
}
.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.4rem 1.1rem 1.6rem;
}
.card h3 { font-size: 1.5rem; }
.card p {
    margin: .6rem 0 1.4rem;
    font-size: .8rem;
    color: var(--muted);
}
.card__link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: auto;
    align-self: flex-start;
    padding-bottom: .25rem;
    border-bottom: 2px solid var(--purple);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
.card__link:hover { color: var(--orange-dark); }

/* Desktop: every homepage section runs larger, matching the design at full width.
   Kept after the section rules above so these overrides win. */
@media (min-width: 1100px) {
    .hero .kicker { margin-bottom: 1.5rem; font-size: .83rem; }
    .hero h1 { font-size: clamp(4.75rem, 5.6vw, 5.1rem); }
    .hero__lead { font-size: 1.1rem; line-height: 1.85; margin-block: 2rem 2.5rem; }
    .hero .btn,
    .europe .btn { min-height: 3.8rem; padding-inline: 1.6rem; font-size: 1.15rem; }
    .hero .btn--plane,
    .europe .btn--plane { padding-left: 0; }
    .hero .btn__icon,
    .europe .btn__icon { width: 3.75rem; }
    .hero .btn__icon,
    .europe .btn__icon { --plane: 2rem; --fly: 1rem; }
    .stats li { padding: 2rem 1rem 2.25rem; }
    .stats strong { font-size: 1.85rem; }
    .stats span { font-size: 1rem; }

    .services .kicker { font-size: .83rem; }
    /* Wider intro column so the heading breaks as in the design:
       Everything / between your / door and the show / floor. */
    .services__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr); }
    .services__intro h2 { font-size: 3.6rem; max-width: 26.5rem; }
    .services__intro p:not(.kicker) { max-width: 26.5rem; font-size: 1.2rem; line-height: 1.7; letter-spacing: .03em; }
    .services .arrow-link { font-size: 1.3rem; }
    /* Bigger text, less padding: rows stay about the same height. */
    .services__list a { padding-block: 1.05rem; font-size: 2.1rem; }
    .services__list .badge { font-size: .7rem; }
    .chevron { width: .9rem; height: 1.6rem; }

    .europe__inner { padding-block: 6rem; }
    .europe h2 { font-size: 3.6rem; }
    .europe p { margin-bottom: 2rem; font-size: 1.2rem; line-height: 1.7; letter-spacing: .03em; }

    .cards { padding-block: 6.5rem; }
    .cards__grid { gap: 1.5rem; }
    .card__body { padding: 2rem 1.75rem 2.75rem; }
    .card h3 { font-size: 1.9rem; }
    .card p { margin: .75rem 0 1.75rem; font-size: 1rem; line-height: 1.65; letter-spacing: .03em; }
    .card__link { padding-bottom: .5rem; font-size: 1.05rem; }
    .card__link .chevron { width: .7rem; height: 1.2rem; }
}

/* Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .hero__inner,
    .services__inner,
    .europe__inner { grid-template-columns: 1fr; }
    .services__intro h2 { max-width: none; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stats li:nth-child(3) { border-left: 0; }
    .stats li:nth-child(n + 3) { border-top: 1px solid var(--purple-line); }
    .cards__grid { grid-template-columns: 1fr; max-width: 560px; }
}