/*
 * site.css — Published site global styles.
 *
 * Loaded by site-templates/layout templates on every generated page.
 * Copied to PUBLISH_PATH by PublishService::copyAssets().
 *
 * Base tokens live in theme-base.css.
 * Generated overrides live in theme.css.
 * Block-specific styles live in blocks.css.
 * This file covers: reset, typography, layout shell, utilities, colours.
 */

/* ── Reset ───────────────────────────────────────────────────────────────── */

.root-canvas *,
.root-canvas *::before,
.root-canvas *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.root-canvas,
.root-canvas h1,
.root-canvas h2,
.root-canvas h3,
.root-canvas h4,
.root-canvas h5,
.root-canvas h6,
.root-canvas ul,
.root-canvas ol,
.root-canvas figure,
.root-canvas blockquote {
    margin: 0;
    padding: 0;
}

/* ── Base ───────────────────────────────────────────────────────────── */

.root-canvas {
    scroll-behavior: smooth;
}

@supports (view-transition-name: root) {
    .root-canvas .site-main {
        view-transition-name: site-main;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }

    ::view-transition-old(site-main) {
        animation: site-main-fade-out 180ms ease forwards;
        mix-blend-mode: normal;
    }

    ::view-transition-new(site-main) {
        animation: site-main-fade-in 350ms ease 250ms both;
        mix-blend-mode: normal;
    }

    @media (prefers-reduced-motion: reduce) {
        .root-canvas .site-main {
            view-transition-name: none;
        }
    }
}

@keyframes site-main-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes site-main-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---- Canvas is used for container width queries ---- */
.root-canvas {
    display: flex;
    flex-direction: column;
    font-family: var(--font-primary);
    line-height: var(--line-height-normal);
    color: var(--main-text-colour);
    background: var(--main-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    container-type: inline-size;
    container-name: root-canvas;
    overflow-x: clip;
}


.root-canvas::-webkit-scrollbar,
.root-canvas *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.root-canvas::-webkit-scrollbar-track {
    background: var(--main-brand);
}

body.root-canvas::-webkit-scrollbar-thumb {
    background: var(--main-accent);
    border-radius: 10px;
    border: 2px solid var(--main-brand);
}

body.root-canvas::-webkit-scrollbar-thumb:hover {
    background: var(--feature-brand);
}

.root-canvas a {
    color: var(--main-link-colour);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.root-canvas a:hover {
    color: var(--main-link-hover);
}

.root-canvas button,
.root-canvas input,
.root-canvas select,
.root-canvas textarea {
    font: inherit;
}

.root-canvas img,
.root-canvas picture,
.root-canvas video {
    max-width: 100%;
    display: block;
}

/* ── Layout shell ────────────────────────────────────────────────────────── */

.root-canvas {
    --site-header-translucent-background: color-mix(in srgb, var(--main-background) 88%, transparent);
}

.root-canvas .site-header {
    z-index: 40;
    padding: var(--space-xs) var(--page-gutter);
    border-bottom: 1px solid color-mix(in srgb, var(--main-border-subtle) 6%, transparent);
    background: var(--site-header-translucent-background);
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    backdrop-filter: blur(6px) saturate(110%);
}

.root-canvas .site-header--sticky {
    position: sticky;
    top: 0;
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.root-canvas .site-header--sticky.is-scrolled {
    border-bottom-color: color-mix(in srgb, var(--main-border-subtle) 6%, transparent);
    background: var(--site-header-translucent-background);
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    backdrop-filter: blur(6px) saturate(110%);
}

.root-canvas .site-header--inline {
    margin-bottom: 0;
}

.root-canvas .site-header--floating {
    background: transparent;
    border-bottom: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    position: absolute;
    top: 0;
    width: 100%;
    transition:
        transform 0.28s ease,
        background-color 0.28s ease,
        border-bottom-color var(--transition-fast),
        backdrop-filter var(--transition-fast);
    will-change: transform;
}

.root-canvas .site-header--floating.is-scrolled {
    background: var(--site-header-translucent-background);
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    backdrop-filter: blur(6px) saturate(110%);
}

.root-canvas .site-header--floating:not(.site-header--static) {
    position: sticky;
    top: 0;
    margin-bottom: calc((var(--header-height) + calc(var(--space-xs) *2)) * -1);
}

.root-canvas {
    --floating-header-clearance: calc(var(--header-height) + (var(--space-xs) * 2));
}

.root-canvas .site-header--floating + .site-main > :first-child {
    padding-top: var(--floating-header-clearance);
}


.root-canvas .site-header--floating:not(.site-header--static).is-scroll-hidden {
    transform: translate3d(0, calc(-100% - var(--space-xs)), 0);
}

.root-canvas.site-nav-open .site-header--floating:not(.site-header--static) {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .root-canvas .site-header--floating {
        transition: none;
    }
}

.root-canvas .site-header--floating .site-header__inner {
    z-index: 1;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
}

.root-canvas .site-shell {
    width: min(100%, var(--block-width-contained));
    margin: 0 auto;
}

.root-canvas .site-header__inner {
    display: grid;
    align-items: center;
    gap: var(--space-md);
    position: relative;
    min-height: var(--header-height);
}

.root-canvas .site-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: inherit;
    min-width: 0;
    mix-blend-mode: normal;
}

.root-canvas .site-brand:hover {
    color: inherit;
}

.root-canvas .site-brand__logo-wrap {
    flex: 0 0 auto;
    display: block;
    width: clamp(96px, 18vw, 180px);
    max-width: 100%;
    min-width: 1px;
    filter: brightness(1) invert(0);
    transform: scale(1);
    transform-origin: center;
    transition: filter 0.28s ease, transform 0.28s ease;
}

.root-canvas .site-header--floating.has-first-block-media:not(.is-scrolled) .site-brand {
    mix-blend-mode: difference;
}

.root-canvas .site-header--floating.has-first-block-media:not(.is-scrolled) .site-brand__logo-wrap,
.root-canvas .site-header--floating.has-first-block-dark:not(.is-scrolled) .site-brand__logo-wrap {
    filter: brightness(0) invert(1);
}

.root-canvas .site-header--floating:not(.is-scrolled) .site-brand__logo-wrap {
    transform: scale(1.2);
}

.root-canvas .site-header--floating.is-scrolled .site-brand,
.root-canvas.site-nav-open .site-header--floating .site-brand {
    mix-blend-mode: normal;
}

.root-canvas .site-header--floating.is-scrolled .site-brand__logo-wrap {
    filter: brightness(1) invert(0);
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .root-canvas .site-brand__logo-wrap {
        transition: none;
    }
}

.root-canvas .site-brand__logo {
    width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
    display: block;
}

.root-canvas .site-nav {
    min-width: 0;
}

.root-canvas .site-nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.root-canvas .site-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    color: var(--main-heading-colour);
    font-weight: 600;
}

.root-canvas .site-nav__button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.root-canvas .site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

@container root-canvas (max-width: 640px) {
    .root-canvas .site-nav-toggle__label
    {
        display: none;
    }
}

.root-canvas .site-nav-toggle__icon {
    display: block;
    width: 22px;
    height: 24px;
    position: relative;
}

.root-canvas .site-nav-toggle__icon span {
    display: block;
    width: 22px;
    height: 1px;
    border-radius: 999px;
    background: currentColor;
    position: absolute;
    left: 0;
    transition: all var(--transition-normal);
}
.root-canvas .site-nav-toggle__icon span:nth-child(1) {
  top: 5px;
}

.root-canvas .site-nav-toggle__icon span:nth-child(2),
.root-canvas .site-nav-toggle__icon span:nth-child(3) {
  top: 12px;
}

.root-canvas .site-nav-toggle__icon span:nth-child(4) {
  top: 19px;
}

.root-canvas.site-nav-open .site-nav-toggle__icon span:nth-child(2) {
  transform: rotate(45deg);
}

.root-canvas.site-nav-open .site-nav-toggle__icon span:nth-child(3) {
  transform: rotate(-45deg);
}

.root-canvas.site-nav-open .site-nav-toggle__icon span:nth-child(1),
.root-canvas.site-nav-open .site-nav-toggle__icon span:nth-child(4) {
  top: 12px;
  width: 0;
  left: 50%;
}

.root-canvas .site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    min-width: 0;
}

.root-canvas .site-header__cta {
    white-space: nowrap;
}

.root-canvas .site-header--nav-inline .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'brand nav actions';
}

.root-canvas .site-header--nav-inline .site-brand {
    grid-area: brand;
}

.root-canvas .site-header--nav-inline .site-nav {
    grid-area: nav;
    justify-self: end;
}

.root-canvas .site-header--nav-inline .site-nav__list {
    justify-content: flex-end;
}

.root-canvas .site-header--nav-inline .site-header__actions {
    grid-area: actions;
    justify-self: end;
}

.root-canvas .site-header--logo-center.site-header--nav-inline .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: 'nav brand actions';
}

.root-canvas .site-header--logo-center.site-header--nav-inline .site-brand {
    justify-self: center;
    justify-content: center;
}

.root-canvas .site-header--logo-center.site-header--nav-inline .site-nav {
    justify-self: start;
}

.root-canvas .site-header--logo-center.site-header--nav-inline .site-nav__list {
    justify-content: flex-start;
}

.root-canvas .site-header--nav-below .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'brand actions'
        'nav nav';
    align-items: start;
    row-gap: var(--space-sm);
}

.root-canvas .site-header--nav-below .site-brand {
    grid-area: brand;
}

.root-canvas .site-header--nav-below .site-header__actions {
    grid-area: actions;
    justify-self: end;
}

.root-canvas .site-header--nav-below .site-nav {
    grid-area: nav;
    padding-top: var(--space-xs);
}

.root-canvas .site-header--nav-below .site-nav__list {
    justify-content: flex-start;
}

.root-canvas .site-header--logo-center.site-header--nav-below .site-header__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
        'brand'
        'actions'
        'nav';
    justify-items: center;
    text-align: center;
}

.root-canvas .site-header--logo-center.site-header--nav-below .site-brand,
.root-canvas .site-header--logo-center.site-header--nav-below .site-nav,
.root-canvas .site-header--logo-center.site-header--nav-below .site-header__actions {
    justify-self: center;
}

.root-canvas .site-header--logo-center.site-header--nav-below .site-brand {
    justify-content: center;
}

.root-canvas .site-header--logo-center.site-header--nav-below .site-nav__list {
    justify-content: center;
}

.root-canvas .site-header--nav-slide-in .site-header__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'brand';
    width: 100%;
}

.root-canvas .site-header--nav-slide-in .site-brand {
    grid-area: brand;
    justify-self: start;
}

.root-canvas .site-header--nav-slide-in .site-header__actions {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 100;
}

.root-canvas .site-header--nav-slide-in .site-nav-toggle {
    display: inline-flex;
}

.root-canvas .site-header--nav-slide-in .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    height: 100dvh;
    padding: calc(var(--space-xl) + 1rem) var(--space-lg) var(--space-lg);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--main-background);
    box-shadow: -32px 0 72px color-mix(in srgb, var(--main-shadow-colour) 16%, transparent);
    transform: translate3d(calc(100% + 96px), 0, 0);
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
    backface-visibility: hidden;
    will-change: transform;
    z-index: 60;
}

.root-canvas .site-header--nav-slide-in .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xxs);
}

.root-canvas .site-header--nav-slide-in .site-nav__item {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
    transition:
        opacity 0.42s ease-out,
        transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0ms;
}

.root-canvas .site-header--nav-slide-in .site-nav.is-open .site-nav__item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: var(--site-nav-item-delay, 80ms);
}

.root-canvas .site-header--nav-slide-in .site-nav.is-open {
    transform: translate3d(0, 0, 0);
}

.root-canvas .site-header--logo-center.site-header--nav-slide-in .site-header__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'brand';
}

.root-canvas .site-header--logo-center.site-header--nav-slide-in .site-brand {
    justify-self: center;
    justify-content: center;
}

.root-canvas .site-main {
    min-height: 60vh;
}
.site-main > section {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}


.root-canvas .site-footer {
    margin-top: auto;
    padding: var(--space-xl) var(--page-gutter) 0;
    border-top: 1px solid color-mix(in srgb, var(--main-border-subtle) 6%, transparent);
    font-size: var(--font-size-h6);
    color: var(--main-text-colour);
    background: var(--feature-background);
}

.root-canvas .site-footer__inner {
    padding-bottom: var(--space-lg);
}

.root-canvas .site-footer__blocks {
    display: grid;
    gap: var(--space-lg);
}

.root-canvas .site-footer--grid .site-footer__blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.root-canvas .site-footer--stacked .site-footer__blocks {
    grid-template-columns: 1fr;
}

.root-canvas .site-footer__block {
    display: grid;
    gap: var(--space-md);
    align-content: start;
    min-height: 100%;
    padding: var(--space-lg);
    border: 1px solid color-mix(in srgb, var(--main-border-subtle) 6%, transparent);
    border-radius: var(--border-radius-lg);
    background: color-mix(in srgb, var(--feature-background) 42%, transparent);
}

.root-canvas .site-footer__block--logo {
    place-items: center;
    justify-items: center;
    text-align: center;
}

.root-canvas .site-footer__contact {
    display: grid;
    gap: var(--space-xs);
}

.root-canvas .site-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.root-canvas .site-footer--grid .site-footer__block:nth-child(even) {
    justify-items: end;
    text-align: right;
}

.root-canvas .site-footer--grid .site-footer__block:nth-child(even) .site-footer__socials {
    justify-content: flex-end;
}

.root-canvas .site-footer__logo {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 80px;
    object-fit: contain;
    display: block;
}

.root-canvas .site-footer__contact p,
.root-canvas .site-footer__block p {
    white-space: pre-line;
}

.root-canvas .site-footer__heading {
    margin-bottom: 0;
    font-size: var(--font-size-h5);
}

.root-canvas .site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--main-border-subtle) 6%, transparent);
    color: var(--main-heading-colour);
    background: color-mix(in srgb, var(--feature-background) 68%, transparent);
}

.root-canvas .site-footer__social-icon {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: currentColor;
    flex: 0 0 auto;
}


/* ── Typography ──────────────────────────────────────────────────────────── */

.root-canvas h1,
.root-canvas h2,
.root-canvas h3,
.root-canvas h4,
.root-canvas h5,
.root-canvas h6 {
    max-inline-size: 100%;
    font-family: var(--font-heading);
    color: var(--main-heading-colour);
    line-height: var(--line-height-tight);
    font-weight: 400;
    overflow-wrap: anywhere;
    text-wrap: balance;
    hyphens: auto;
}

.root-canvas h1 { font-size: var(--font-size-h1); }
.root-canvas h2 { font-size: var(--font-size-h2); }
.root-canvas h3 { font-size: var(--font-size-h3); }
.root-canvas h4 { font-size: var(--font-size-h4); }
.root-canvas h5 { font-size: var(--font-size-h5); }
.root-canvas h6 { font-size: var(--font-size-h6); }

.root-canvas p,
.root-canvas li,
.root-canvas input,
.root-canvas select,
.root-canvas textarea {
    font-size: var(--font-size-paragraph);
}

.root-canvas small {
    font-size: var(--font-size-small);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.root-canvas .button {
    background: var(--main-button-background);
    color: var(--main-button-colour);
    font-size: var(--font-size-button);
    padding: var(--button-padding-y) var(--button-padding-x);
    border-radius: var(--border-radius-md);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.root-canvas .button:hover {
    background: var(--main-button-hover-background);
    color: var(--main-button-colour);
}

.root-canvas .button-lite {
    background: transparent;
    box-shadow: 0 0 0 1px var(--main-button-background);
    color: var(--main-button-background);
    font-size: var(--font-size-button);
    padding: var(--button-padding-y) var(--button-padding-x);
    border-radius: var(--border-radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.root-canvas .button-lite:hover {
    background: var(--main-button-background);
    color: var(--main-button-colour);
}

/* ── Background utilities ────────────────────────────────────────────────── */

.root-canvas .bak_primary   { background-color: var(--main-brand); }
.root-canvas .bak_secondary { background-color: var(--feature-brand); }


/* ── Containers & Sections ───────────────────────────────────────────────── */

.root-canvas {
    --section-text-colour: var(--main-text-colour);
    --section-heading-colour: var(--main-heading-colour);
    --section-eyebrow-colour: var(--main-eyebrow-colour);
    --section-link-colour: var(--main-link-colour);
    --section-link-hover: var(--main-link-hover);
    --section-button-background: var(--main-button-background);
    --section-button-colour: var(--main-button-colour);
    --section-button-hover-background: var(--main-button-hover-background);
    --section-brand: var(--main-brand);
    --section-accent: var(--main-accent);
    --section-border-colour: var(--main-border-colour);
    --section-border-subtle: var(--main-border-subtle);
    --section-shadow-colour: var(--main-shadow-colour);
}

.root-canvas .block-wrapper {
    --section-background: Transparent;
    background-color: var(--section-background);
    color: var(--section-text-colour);
}

.root-canvas > .block-wrapper {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

.root-canvas .block-theme--main {
    --section-background: var(--main-background);
    --section-text-colour: var(--main-text-colour);
    --section-heading-colour: var(--main-heading-colour);
    --section-eyebrow-colour: var(--main-eyebrow-colour);
    --section-link-colour: var(--main-link-colour);
    --section-link-hover: var(--main-link-hover);
    --section-button-background: var(--main-button-background);
    --section-button-colour: var(--main-button-colour);
    --section-button-hover-background: var(--main-button-hover-background);
    --section-brand: var(--main-brand);
    --section-accent: var(--main-accent);
    --section-border-colour: var(--main-border-colour);
    --section-border-subtle: var(--main-border-subtle);
    --section-shadow-colour: var(--main-shadow-colour);
}

.root-canvas .block-theme--feature {
    --section-background: var(--feature-background);
    --section-text-colour: var(--feature-text-colour);
    --section-heading-colour: var(--feature-heading-colour);
    --section-eyebrow-colour: var(--feature-eyebrow-colour);
    --section-link-colour: var(--feature-link-colour);
    --section-link-hover: var(--feature-link-hover);
    --section-button-background: var(--feature-button-background);
    --section-button-colour: var(--feature-button-colour);
    --section-button-hover-background: var(--feature-button-hover-background);
    --section-brand: var(--feature-brand);
    --section-accent: var(--feature-accent);
    --section-border-colour: var(--feature-border-colour);
    --section-border-subtle: var(--feature-border-subtle);
    --section-shadow-colour: var(--feature-shadow-colour);
}

.root-canvas .block-theme--contrast {
    --section-background: var(--contrast-background);
    --section-text-colour: var(--contrast-text-colour);
    --section-heading-colour: var(--contrast-heading-colour);
    --section-eyebrow-colour: var(--contrast-eyebrow-colour);
    --section-link-colour: var(--contrast-link-colour);
    --section-link-hover: var(--contrast-link-hover);
    --section-button-background: var(--contrast-button-background);
    --section-button-colour: var(--contrast-button-colour);
    --section-button-hover-background: var(--contrast-button-hover-background);
    --section-brand: var(--contrast-brand);
    --section-accent: var(--contrast-accent);
    --section-border-colour: var(--contrast-border-colour);
    --section-border-subtle: var(--contrast-border-subtle);
    --section-shadow-colour: var(--contrast-shadow-colour);
}

.root-canvas .block-wrapper h1,
.root-canvas .block-wrapper h2,
.root-canvas .block-wrapper h3,
.root-canvas .block-wrapper h4,
.root-canvas .block-wrapper h5,
.root-canvas .block-wrapper h6 {
    color: var(--section-heading-colour);
}

.root-canvas .block-wrapper a {
    color: var(--section-link-colour);
}

.root-canvas .block-wrapper a:hover {
    color: var(--section-link-hover);
}

.root-canvas .block-wrapper .button {
    background: var(--section-button-background);
    color: var(--section-button-colour);
}

.root-canvas .block-wrapper .button:hover {
    background: var(--section-button-hover-background);
    color: var(--section-button-colour);
}

.root-canvas .block-wrapper .button-lite {
    box-shadow: 0 0 0 1px var(--section-button-background);
    color: var(--section-button-background);
}

.root-canvas .block-wrapper .button-lite:hover {
    background: var(--section-button-background);
    color: var(--section-button-colour);
}

.root-canvas .block-wrapper.block-width--full .site-shell {
    width: 100%;
    max-width: none;
}

.root-canvas .theme-hero-band {
    position: relative;
    min-height: 25dvh;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--main-shadow-colour) 8%, transparent), color-mix(in srgb, var(--main-border-subtle) 6%, transparent)),
        var(--feature-background);
}

.root-canvas .theme-hero-band__image {
    display: block;
    width: 100%;
    height: 25dvh;
    min-height: 180px;
    object-fit: cover;
    object-position: center;
}

.root-canvas .theme-stack,
.root-canvas .theme-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.root-canvas .theme-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.root-canvas .theme-card {
    flex: 1 1 320px;
    padding: var(--space-lg);
    border-radius: var(--border-radius-lg);
    background: color-mix(in srgb, var(--feature-background) 48%, transparent);
    border: 1px solid color-mix(in srgb, var(--main-border-subtle) 6%, transparent);
}

.root-canvas .theme-radius-chip {
    display: block;
    width: min(100%, 112px);
    height: var(--space-md);
    border-radius: var(--border-radius-sm);
    background: color-mix(in srgb, var(--main-brand) 28%, transparent);
}

.root-canvas .theme-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.root-canvas [id^="block-"] {
    scroll-margin-top: var(--space-lg, 2rem);
}

.root-canvas .site-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: var(--space-md);
}

.root-canvas .site-modal[hidden] {
    display: none;
}

.root-canvas .site-modal__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--main-text-colour) 68%, transparent);
}

.root-canvas .site-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 960px);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    border-radius: var(--border-radius-lg, 1rem);
    background: var(--feature-background);
    box-shadow: 0 2rem 5rem color-mix(in srgb, var(--main-shadow-colour) 8%, transparent);
}

.root-canvas .site-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--main-border-colour) 12%, transparent);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.root-canvas .site-modal__content {
    padding: 3.5rem 1.25rem 1.25rem;
}

.root-canvas .site-modal__iframe {
    width: 100%;
    min-height: min(75vh, 720px);
    border: none;
}

.root-canvas .booking-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm, 0.75rem);
}

.root-canvas .booking-option-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm, 0.75rem);
    min-height: 7rem;
    padding: var(--space-md, 1.25rem);
    border: 1px solid color-mix(in srgb, var(--feature-border-colour, var(--main-border-colour)) 18%, transparent);
    border-radius: var(--border-radius-md, 0.5rem);
    background: color-mix(in srgb, var(--feature-background) 86%, var(--colour-white));
    color: var(--feature-text-colour, var(--main-text-colour));
    text-decoration: none;
    box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--main-shadow-colour) 5%, transparent);
    transition: border-color var(--transition-fast, 0.15s ease), box-shadow var(--transition-fast, 0.15s ease), transform var(--transition-fast, 0.15s ease);
}

.root-canvas .booking-option-card:hover,
.root-canvas .booking-option-card:focus-visible {
    border-color: color-mix(in srgb, var(--feature-brand, var(--main-brand)) 46%, transparent);
    color: var(--feature-text-colour, var(--main-text-colour));
    box-shadow: 0 1.25rem 3rem color-mix(in srgb, var(--main-shadow-colour) 9%, transparent);
    transform: translateY(-2px);
}

.root-canvas .booking-option-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--feature-brand, var(--main-brand)) 26%, transparent);
    outline-offset: 3px;
}

.root-canvas .booking-option-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--border-radius-md, 0.5rem);
    background: color-mix(in srgb, var(--feature-brand, var(--main-brand)) 16%, transparent);
    color: var(--feature-brand, var(--main-brand));
}

.root-canvas .booking-option-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 1.8;
}

.root-canvas .booking-option-card__body {
    display: grid;
    gap: 0.25rem;
}

.root-canvas .booking-option-card strong {
    color: var(--feature-heading-colour, var(--main-heading-colour));
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: var(--line-height-tight);
}

.root-canvas .booking-option-card span {
    color: color-mix(in srgb, var(--feature-text-colour, var(--main-text-colour)) 76%, transparent);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.root-canvas.site-modal-open {
    overflow: hidden;
}

/* this breaks sticky nav on drawer nav open
.root-canvas.site-nav-open {
    overflow: hidden;
}
*/

@container root-canvas (max-width: 768px) {
    .root-canvas {
        --floating-header-clearance: calc(var(--header-height) + (var(--space-sm) * 2));
    }

    /*
    .root-canvas .site-header {
        padding: var(--space-sm) var(--page-gutter);
    }
*/
    .root-canvas .site-header--floating {
        margin-bottom: calc((var(--header-height) + var(--space-xs)) * -1);
    }

    .root-canvas .site-header__inner,
    .root-canvas .site-header--nav-inline .site-header__inner,
    .root-canvas .site-header--nav-below .site-header__inner,
    .root-canvas .site-header--nav-slide-in .site-header__inner,
    .root-canvas .site-header--logo-center.site-header--nav-inline .site-header__inner,
    .root-canvas .site-header--logo-center.site-header--nav-below .site-header__inner,
    .root-canvas .site-header--logo-center.site-header--nav-slide-in .site-header__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'brand';
        align-items: center;
        justify-items: stretch;
        text-align: left;
        padding-left: 0;
        padding-right: clamp(7.5rem, 34vw, 15rem);
    }

    .root-canvas .site-header .site-brand {
        grid-area: brand;
        justify-self: start;
        justify-content: flex-start;
    }

    .root-canvas .site-header--logo-center.site-header--nav-inline .site-brand,
    .root-canvas .site-header--logo-center.site-header--nav-below .site-brand,
    .root-canvas .site-header--logo-center.site-header--nav-slide-in .site-brand {
        justify-self: center;
        justify-content: center;
    }

    .root-canvas .site-header .site-header__actions {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 100;
    }

    .root-canvas .site-header .site-nav-toggle {
        display: inline-flex;
    }

    .root-canvas .site-header .site-brand__logo {
        max-width: 144px;
        max-height: 56px;
    }

    .root-canvas .site-header .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100dvh;
        width: min(400px, 100vw);
        padding: calc(var(--space-xl) + 1rem) var(--space-lg) var(--space-lg);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: var(--main-background);
        box-shadow: -32px 0 72px color-mix(in srgb, var(--main-shadow-colour) 16%, transparent);
        transform: translate3d(calc(100% + 96px), 0, 0);
        transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
        backface-visibility: hidden;
        will-change: transform;
        z-index: 60;
    }

    .root-canvas .site-header .site-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xxs);
    }

    .root-canvas .site-header .site-nav__item {
        opacity: 0;
        transform: translate3d(24px, 0, 0);
        transition:
            opacity 0.42s ease-out,
            transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: 0ms;
    }

    .root-canvas .site-header .site-nav.is-open .site-nav__item {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: var(--site-nav-item-delay, 80ms);
    }

    .root-canvas .site-header .site-nav.is-open {
        transform: translate3d(0, 0, 0);
    }

    .root-canvas .theme-cards {
        flex-direction: column;
    }

    .root-canvas .site-modal {
        padding: 0.75rem;
    }

    .root-canvas .site-modal__content {
        padding: 3.5rem 0.75rem 0.75rem;
    }

    .root-canvas .booking-options {
        grid-template-columns: 1fr;
    }

    .root-canvas .booking-option-card {
        min-height: 6rem;
        padding: var(--space-sm, 0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .root-canvas .site-nav,
    .root-canvas .site-nav__item {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

@container root-canvas (max-width: 640px) {
    .root-canvas .site-footer--grid .site-footer__blocks {
        grid-template-columns: 1fr;
    }

    .root-canvas .site-footer--grid .site-footer__block:nth-child(even) {
        justify-items: start;
        text-align: left;
    }

    .root-canvas .site-footer--grid .site-footer__block:nth-child(even) .site-footer__socials {
        justify-content: flex-start;
    }
}