body {
    overflow-x: hidden;
}

h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
    margin: 0;
    padding: 0;
}

select option {
  color: black !important;
  padding: 5px 10px !important;
}

.bard p, .bard h1, .bard h2, .bard h3, .bard h4, .bard h5, .bard h6 {
    margin-bottom: 10px;
}

#alpha-section {
    display: none;
}

.bard p {
    margin-bottom: 15px;
}

.bard h1 {
    margin-bottom: 30px;
}

.bard h2,
.bard h3 {
    margin-bottom: 20px;
}

.bard h4,
.bard h5 {
    margin-bottom: 10px;
}

.bard h6 {
    margin-bottom: 5px;
}

.vimeo-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10000;
    top: 0;
}

.text-light {
    color: white;
}

.overlay--wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: none; /* Keep this for your JS logic */
}

/* Fade in */
.overlay--wrapper.active {
    opacity: 1;
    visibility: visible;
    display: flex;
}

/* Fade out */
.overlay--wrapper.fading-out {
    opacity: 0;
    visibility: hiddenwak;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.news-card .flex-image-link-wrapper {
    pointer-events: none;
}

.news-card .news-card-text {
    pointer-events: none;
}

.dropcapped > p:first-of-type::first-letter,
.dropcapped p:first-of-type:not(li p)::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
    font-family: Saoldisplay, sans-serif;
    font-size: 70px;
    font-weight: 500;
    margin-right: 10px;
}

.pop-up--overlay.active {
  display: flex;
}

html {
    height: auto;
}

.pop-up--overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: none;
  display: none;
}

.pop-up--overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex;
}

.swiper {
    overflow: visible !important;
}

.left {
  transform: rotate(180deg);
}

.no-cursor {
  cursor: default !important;
}

.body-cta-wrapper p {
    margin-bottom: 0;
}

.grid-item .flex-image-link-wrapper {
    pointer-events: auto;
}

.grid-item .news-card-text {
    pointer-events: auto;
}


.nav-features .w--current{
    color: #0e1b2c !important;
}


.scroll-to--panel .w--current{
    color: #0e1b2c !important;
}

@media (max-width: 478px) {
    .col {
        grid-template-columns: 1fr !important;
    }
}

/* Brands of Tomorrow: click-to-reveal class cards (see /js/bot-class.js).
   The cards use .bot-class-card-static (not .bot-class-card) so the Webflow
   scroll interaction bound to .bot-class-card no longer applies to them.
   These rules replicate the original .bot-class-card sizing. */
.bot-class-card-static {
    width: 100%;
    min-height: 100vh;
    padding-top: 75px;
}

@media screen and (max-width: 991px) {
    .bot-class-card-static {
        border-top: 1px solid var(--thin-line-colours--thin-line);
        min-height: auto;
        padding-top: 20px;
    }
}

/* Hide every card until its nav link is clicked, then cross-fade it in. */
.bot-class-card-static {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bot-class-card-static.is-visible {
    opacity: 1;
}

.bot-class-nav-link.active {
    color: var(--colours--coral);
}

/* Mobile: show all cards stacked and disable the click-to-reveal/fade.
   !important overrides the inline display/opacity the JS may have set. */
@media screen and (max-width: 767px) {
    .bot-class-card-static {
        display: block !important;
        opacity: 1 !important;
    }
    .bot-class-nav-link.active {
        color: inherit;
    }
}

/* Text + spreads grid (body_widget_text_spreads_grid)

   The four images share one grid row. `.bbl-spread-grid` was height:100% and its
   wrapper is stretched to the full height of the section (._100vh-section-wrapper
   is min-height:100vh), so the single `auto` row stretched with it. Images 01-03
   are align-self:start and sat at the top of that tall track while 04 is
   align-self:end and was pinned to the very bottom of it. Narrowing the viewport
   shrinks the image column but not the 100vh track, so the gap kept growing.

   Sizing the grid to its own content makes 04 bottom-align against image 02 (the
   tallest item) instead of against the section, which is the intended staggered
   collage, and the flex wrapper keeps the whole group centred in the column. */
.bbl-spread-grid {
    height: auto;
    align-content: center;
}

/* Book of British Luxury editions grid (body_widget_bbl_editions)

   The cover images were only width-constrained, so each card's height came from
   that cover's own aspect ratio. The covers are near-A4 but not identical (one
   is 735x1024 = 0.718 against the others' 1000x1419 = 0.705), which left the
   cards in a row visibly uneven and pushed the titles out of line.

   Locking the wrapper to the A4 ratio and letting the image cover it makes every
   card the same height at any column width. The crop on the odd cover is under
   2% of its height, so nothing meaningful is lost off the edge. */
.bbl-card-image-wrapper {
    aspect-ratio: 1000 / 1419;
    min-height: 0;
    overflow: hidden;
}

.bbl-image {
    height: 100%;
    object-fit: cover;
    display: block;
}





@media screen and (min-width: 992px) {
  .awards--grid {
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  #w-node-c7b2acd1-081b-d340-1f0c-f794835653b1-c49bfd5c {
    grid-row: span 5;
  }
}