*, *::before, *::after {
    box-sizing:border-box;

}


@font-face {
  font-family: 'Manrope Variable';

  src: url('../fonts/Manrope/Manrope-VariableFont_wght.woff2') format('woff2-supports-variations');
  
  font-weight: 200 800;
  
  font-style: normal;
  font-display: swap; /* Ensures text is visible immediately while loading */
}

@font-face {
    font-family: 'Bebas';
    src: url("../fonts/Bebas/BebasNeue-Regular.woff2") format('woff2');
    font-style: normal;
    font-weight:800;
}

@font-face {
    font-family: 'Story';
    src: url('../fonts/Story/StoryScript-Regular.woff2');
    font-style:normal;
    font-weight:400;
}


:root {
    --ff-sans: 'Manrope Variable', system-ui, sans-serif;
    --fs-base: 1rem;

    --ff-display: 'Bebas', sans-serif;
    /* Manrope-specific weights */
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;


    
    --color-ink: rgb(11, 22, 35);
    --color-ink-soft: #213142;
    --color-soft: rgb(244, 239, 231);
    --color-pale: rgb(252,252,252);
    --color-white: #ffffff;
    --color-grey: rgb(196, 196, 196);
    --color-stone: #ddd1bc;
    --color-gold: #cba968;
    --color-gold-deep: #9a7441;
    --color-border-soft: #0b16231c;
    --color-border-grey: rgba(170, 170, 170, .3);

    --color-success: rgb(96, 131, 91, .7);
    --color-error: rgb(178, 58, 58, .7);
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-2xl: 40px;

    --space-1: 0.25rem; /*  4px */
    --space-2: 0.5rem;  /*  8px */
    --space-3: 1rem;    /* 16px */
    --space-4: 1.5rem;  /* 24px */
    --space-5: 2rem;    /* 32px */
    --space-6: 3rem;    /* 48px */
}


/* All Sides */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-auto { margin: auto; }

/* Top Only */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* Bottom Only */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Left Only */
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }

/* Right Only */
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }

/* X-Axis (Left & Right) */
.mx-1 { margin-inline: var(--space-1); }
.mx-2 { margin-inline: var(--space-2); }
.mx-3 { margin-inline: var(--space-3); }
.mx-4 { margin-inline: var(--space-4); }
.mx-5 { margin-inline: var(--space-5); }
.mx-6 { margin-inline: var(--space-6); }
.mx-auto { margin-inline: auto; }

/* Y-Axis (Top & Bottom) */
.my-1 { margin-block: var(--space-1); }
.my-2 { margin-block: var(--space-2); }
.my-3 { margin-block: var(--space-3); }
.my-4 { margin-block: var(--space-4); }
.my-5 { margin-block: var(--space-5); }
.my-6 { margin-block: var(--space-6); }




/* All Sides */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

/* Top Only */
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

/* Bottom Only */
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }

/* Left Only */
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }

/* Right Only */
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }

/* X-Axis (Left & Right) */
.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-5 { padding-inline: var(--space-5); }
.px-6 { padding-inline: var(--space-6); }

/* Y-Axis (Top & Bottom) */
.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-5 { padding-block: var(--space-5); }
.py-6 { padding-block: var(--space-6); }

.g-1 {gap:var(--space-1);}
.g-2 {gap:var(--space-2);}
.g-3 {gap:var(--space-3);}
.g-4 {gap:var(--space-4);}
.g-5 {gap:var(--space-5);}
.g-6 {gap:var(--space-6);}



h1,h2,h3,h4,h5,h6,section, div, table, ul, li, p {
    margin:0;
    padding:0;
}
p {
    font-weight: var(--fw-light);
    max-width:60ch;
}

ul,
ol {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

button {
    cursor:pointer;
}
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

.img-fluid {
    filter: brightness(0);
    opacity: 0.05;
}


body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 2;

  color: var(--clr-text);
  background-color: var(--clr-background);
  font-family: var(--ff-sans);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  padding:0;
  margin:0;
}

input,
button,
textarea,
select {
  font: inherit;
  width:100%;
  padding:.5rem; 

  color:var(--color-grey);
  
    background-color:var(--color-white);
  border:.0125rem solid var(--color-border-grey);
  color:var(--color-ink);
  
  &::placeholder {
    color: var(--color-grey);
  }
  &.disabled {
    opacity:.3;
    pointer-events: none;
    cursor: not-allowed;
  }

}
button:disabled {
    opacity:.3;
}
.clear input, 
.clear textarea {
    background-color:var(--color-ink-soft);
  border:.0125rem solid var(--color-border-grey);
  color:var(--color-white) !important;
}

.card.clear.lg-transparent {
  background-color:transparent;
  border:none;
  backdrop-filter: none;
}

@keyframes spin {
    100% {
        rotate:360deg;
    }
}

.spinner {
    position:absolute;
    width:100%;
    height:100%;
    top:0; left:0;
    display:grid; 
    align-items: center;
    justify-content: center;
    &[hidden] {
        display:none;
    }
    & svg {
        width:50px;
        height:50px;
    }
    &.spin svg {
        animation: spin .7s ease-in-out infinite;
    }

}


header {
    width:100%;
    backdrop-filter: blur(var(--blur-2xl));
    background-color:color-mix(in srgb, var(--color-ink) 78%, transparent);
    position:fixed;
    z-index:1001;
    left:0;
    top:0;
    border-bottom:1px solid var(--color-ink-soft);
    & .content {
        width:100%;
        padding:1rem 0;
        display:flex;
        flex-direction: row;
        align-items:center;
        justify-content: space-between;
    
        gap:1rem;
        & ul, & nav {
            display:flex;
            gap:1.25rem;
            flex-direction: row;
            align-items: center;
        }
    }

}
.nav-link {
    text-decoration: none;
    text-transform: uppercase;
    color:var(--color-grey);
    transition: .3s ease-in-out;
    font-size:.85rem;
    letter-spacing: .075rem;
    white-space: nowrap;
    &::hover {
        color:var(--color-gold-deep);
    }
    &.nav-link--active {
        color:var(--color-gold);
    }

}
.nav-logo {
    padding-top:.5rem;
    max-width:70px;
}
header .nav-logo, .mobile-menu .nav-logo {
    filter: brightness(0) invert(1);
}

.mobile-menu .nav-link {
    font-size:1rem;
}

.mobile-menu {
    border-top:1px solid var(--color-border-grey);
    background-color: var(--color-ink);
    display:unset;
    width:100%;
    transition: translate .4s ease-out, opacity .4s ease-out;
    translate: 0 0;
    opacity:1;
    position: fixed;
    top:0;
    height:100%;
    max-height:100%;
    z-index:1002;
    padding-block:1rem;
    & button {
        border:none; 
        padding:1rem;
        background-color: transparent;
    }
    & .menu__body {
        display:grid; 
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        width:100%;
        height:100%;
        gap:1rem;
        justify-content: center;
        text-align:center;
    }
    
}

.mobile-menu.hide {
    translate: 0 -50%;
    opacity:0;
    transition: translate .4s ease-out, opacity .4s ease-out;

}

.mobile-menu.no-display {
    display:none;
    
}

.mobile-nav-toggle:focus {
    outline: 1px solid var(--color-gold);
    outline-offset: .5rem;
}


/* TEXT */

.display {
    text-transform: uppercase;
    line-height: 1;
    font-family: var(--ff-display);
}
.white-text {
    color: var(--color-white);
}
.grey-text {
    color: var(--color-grey);

}
.gold-text {
    color: var(--color-gold);

}
.x-large-text {
    font-size:5rem;
    max-width:10ch;
}
.large-text {
    font-size: 3.7rem;
    max-width: 33ch;
}
.average-text {
    font-size: 1.5rem
}
.semilarge-text {
    font-size:3rem;
    max-width: 23ch;
}
.small-text {
    font-size:.8rem;
}
.spaced-text {
    letter-spacing: 0.125rem;
}
.spacedish-text {
    letter-spacing:0.025rem;
}
.caps {
    text-transform: uppercase;
}

.semi-bold {
    font-weight: var(--fw-semibold);
}

.normal-weight {
    font-weight: var(--fw-normal);
}
.light-weight {
    font-weight: var(--fw-light);
}
.text-center {
    text-align: center;
}
.wrap-pretty {
    text-wrap: balance;
}
/* END TEXT */

.error-page {
    display: flex; 
    flex-direction: column;
    height:100%; 
    align-items: center;
    justify-content: center;
    gap:2rem;
    text-align:center;
    background-color: var(--color-ink);
    color:var(--color-stone);
    min-height: 600px;
}

.pagination {
    display:flex; 
    align-items: center;
    justify-content: center;
    gap:.5rem;
    margin-bottom:1rem;
    & .btn {
        display:grid; 
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        align-items: center;
        justify-content: center;
        border:2px solid var(--color-gold);
        color:var(--color-gold);
        background-color: transparent;
        text-align: center;
        padding:.15rem .75rem;
        font-weight:bold;
        &.active {
            background-color: var(--color-gold);
            color:var(--color-stone);
        }
    }
}

.content {
    max-width:1250px;
    margin-inline: auto;
    position:relative;
    z-index:1;
}
@media (max-width:1249px) {
    header .content{
        padding-inline:1rem;
    } 
}
.card-stack {
    display:flex;
    flex-direction: column;
    gap:1.125rem;
    max-width:20rem;
    justify-self: end;
    align-self:end;
    margin-top:auto;
    margin-left: auto;
    
}
.review-card p {
    font-family: 'Story';
    line-height: 1.4 !important;
    font-size:1.2rem;
    letter-spacing: 0.025rem;
    position:relative;
    padding-inline:2rem;
    padding-block:.5rem;
    &::before {
        content: '‟';
        position:absolute;
        top:0rem; 
        left:-0.5rem; 
        font-size:6rem; 
        font-family:var(--ff-display);
        opacity:.2;
        line-height: 1;
    }
    &::after {
        content: '„';
        position:absolute;
        bottom:-1rem; 
        right:.25rem; 
        font-size:6rem; 
        font-family:var(--ff-display);
        opacity:.2;
        line-height: 1;
    }

}

.card {
    border:1px solid;
    border-top:none;
    border-right:none;
    position:relative;

    &.clear {
        background-color: color-mix(in srgb, var(--color-ink-soft) 50%, transparent 50%);
        backdrop-filter: blur(var(--blur-sm));
        border-color:var(--color-ink-soft);
    }
    &.white {
        background-color:var(--color-white);
        border-color:var(--color-soft);

    }
    &.soft {
        background-color: var(--color-soft);
        border-color:var(--color-soft);

    }
    & a:any-link {
        all:unset;
        text-decoration: unset;
        color:unset;
        cursor:pointer;
    }
    &.round-1 {
        border-radius:.5rem;
    }
    &.no-border {
        border:none;
    }
}
.card__bg {
    position:absolute; 
    bottom:0;
    left:0;
    width:100%; 
    height:80%;
}

.hero-footer {
    container-type: inline-size; 
    
    container-name: footer-cards;
    background-color: var(--color-ink-soft);
}
.hero-footer__card {
    display: flex; 
    align-items: center;
    gap:2rem;
    & svg {
        height:45px;
    }
    & p {
        line-height:1.5;
    }
    @container footer-cards (max-width: 1024px) {
        flex-direction: column;
        text-align: center;
        gap: 1rem !important;
        padding-block:2rem !important;

    }
}

.card__image {
    width:100%;
    aspect-ratio: 16/9;
    background-color: var(--color-stone);
    position:relative;
    &.short {
        aspect-ratio: 8/2.5;
    }
    & img {
        position: absolute;
        width:100%;
        object-fit: cover;
        height:100%;
        z-index:1;
    }
    &.dark {
        background-color: var(--color-ink-soft);
    }
}
.card__image-overlay {
    position:absolute;
    width:100%;
    height:100%;
    z-index:3;
            background: linear-gradient(-160deg, transparent 75%, rgb(33, 63, 99) 95%);
    
    line-height: 1.1;
    padding:1rem;
    display: flex;
    flex-direction: column;
    gap:.35rem;
    justify-content: flex-end;
    & h2 {
        max-width:27ch;
    }
    &.gentle {
            background: linear-gradient(to bottom right, transparent 25%, rgb(33, 63, 99));
    }
    
}
.no-results {
    display:flex;
    align-items: center;
    justify-content: center;
    & p {

        font-weight: var(--fw-bold);
        color:var(--color-gold);
        font-size: 1.2rem;
    }
}
.card__footer {
    border-top: 1px solid var(--color-border-grey);
    padding-top:1rem;
}
.card__tag {
    display:block; 
    padding:.2rem .35rem;
    font-size: .6rem;
    font-weight: var(--fw-semibold);
    background-color: var(--color-gold);
    line-height: 1;
    border:2px solid var(--color-gold);
    &.alt {
        background-color: transparent;
        color: var(--color-gold);

    }

}
section:not(.no-pad) {
    padding-inline:.65rem;
}
.gallery {
    position:relative !important; min-height:650px;

}
.hero-actions {
    max-width:500px;
}

section.hero {
    padding-top:5rem;
    position:relative;
    &:not(.short) {
    min-height:max(100svh, 768px);
    overflow-x: clip;
    }
    & .heor__body {
        overflow:clip;
    }

    & .hero__body h1, & .hero__body h3 {
        opacity:1; 
        translate: 0px 0px;
        transition: opacity .7s .5s ease-in, translate .7s .5s ease-in;
        @starting-style {
            opacity: 0;
            translate: 0 50px; 
        }
    }

    & .hero__body  p {
        opacity:1; 
        translate: 0px 0px;
        transition: opacity .9s .9s ease-in, translate .9s .7s ease-in;
        @starting-style {
            opacity: 0;
            translate: 0 50px; 
        }
    }
    & .slider {
        width:100%;
        height:100%;
        position:absolute;
        z-index: 0;
        top:0;
        left:0;

        &::after {
            content:'';
            position:absolute;
            top:0;
            left:0;
            width:100%; height:100%;
            
        }
        &.dark {
            background-color:var(--color-ink);
        } 
        &.light {
            background-color:var(--color-soft);
        }
        &.dark::after {
            background-color: color-mix(in srgb, var(--color-ink) 60%, transparent 40%) ;
            background-image:linear-gradient(var(--color-ink), transparent, var(--color-ink));

        }
        &.light::after {
             background-color: color-mix(in srgb, var(--color-soft) 60%, transparent 40%) ;
            background-image:linear-gradient(var(--color-soft), transparent, var(--color-soft));
        }
        & img, & picture {
            width:100%;
            height:100%;
            position:relative;
            object-fit: cover;
            opacity:1;
            transition: opacity .9s .7s ease-in;
            @starting-style {
                opacity: 0;
            }
        }        
    }
    & .card, & a.cta {
        transition: opacity .6s ease-in, translate .7s ease-in;
        opacity:1;
        overflow:clip;
        translate: 0 0;
        max-width:350px;
        &:nth-of-type(1) {
            transition-delay: 1.3s;
        }
        &:nth-of-type(2) {
            transition-delay: 1.5s;
        }
            &:nth-of-type(3) {
            transition-delay: 1.7s;
        }
        @starting-style {
            opacity:0;
            translate: 0 20px;
        }
        
    }
}

footer {
    border-top:1px solid var(--color-border-grey);
    & a:any-link {
        color:unset;
        text-decoration: unset;
    }
}

section.dark, footer.dark {
    background-color: var(--color-ink);
    color: var(--color-soft);
}
section.soft {
    background-color: var(--color-soft);
    color: var(--color-ink);
}
section.pale {
    background-color: var(--color-pale);
    color: var(--color-ink);

}

.cta, a.cta {
    padding: .35rem 1rem;
    font-size:.9rem;
    border:1px solid;
    font-size:.8rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 1px;
    text-align:center;
    text-decoration: none;
    display:flex;
    align-items: center;
    justify-content: center;
        white-space: no-wrap;

    gap:1rem;
    &.primary {
        border-color:var(--color-gold);
        background-color:var(--color-gold);
        color:var(--color-ink);
    }
    &.secondary {
        background-color:transparent;
        border-color:var(--color-grey);
        color:var(--color-grey);
    }
    &.ternary {
        background-color:transparent;
        border-color:var(--color-gold-deep);
        color:var(--color-gold-deep);

    }
    &.no-border {
        border:none;
    }
    &.full-width {
        width:100%;
        display:block;
    }
}
.icon-block {
    width:40px;
    border-radius: 5px;
    aspect-ratio: 1/1;

    background-color: var(--color-soft);
    display:flex;
    align-items: center;
    justify-content: center;
    
    &.pale {
        background-color:var(--color-pale);
    }
}
ol.process {
    counter-reset: process;
    margin-left:0;
    padding-left:0;
    & li {
        position: relative;
        padding-left:4rem;
        padding-block:1rem;
        &::after {
            content: "";
            
            position:absolute; left:0; top:1.2rem;
           
            background-color:var(--color-gold);
            width:30px; height:30px; border-radius: 15px;;
            font-weight:var(--fw-semibold);
            border:5px solid var(--color-gold-deep);

        }
        &:not(:last-of-type)::before {
            content: '';
            position:absolute; left:12px; top:2.05rem;
            width:5px; 
            height:100%;
            background-color: var(--color-gold);

        }
        & span {
            font-size:1.5rem;
        }
    } 
   
}

.sticky-top {
    position:sticky;
    top:7rem;
}

.flex {
    display:flex;
    &.col {
        flex-direction: column;
    }
    &.row {
        flex-direction: row;
    }
    &.align-start {
        align-items: start;
    }
    &.align-end {
        align-items: end;
    }
    &.align-center {
        align-items: center;
    }
    &.space-between {
        justify-content: space-between;
    }
    &.justify-end {
        justify-content: flex-end;
    }
    &.justify-center {
        justify-content:center;
    }
    &.wrap {
        flex-wrap: wrap;
    }
    &.no-shrink {
        flex-shrink: 0;
    }

}

.grid {
    display:grid;
    
    &.center-y {
        align-items: center;
    }
    &.justify-center {
        justify-content: center;
    }
    &.full-height {
        height:100%;
    }
}
.grid.col-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid.col-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid.col-2--right {
    grid-template-columns: .45fr .65fr;

}
.grid.col-2--left {
    grid-template-columns: .65fr .45fr;

}
.grid.col-4 {
    grid-template-columns: repeat(4, 1fr);
}

.thin-stack {
    display:flex; 
    flex-direction:column;
    gap:1rem;
}

.shadow-3 {
    box-shadow: 
    0 1px 2px rgba(11, 22, 35, 0.06),
    0 6px 11px rgba(11, 22, 35, 0.08),
    0 16px 27px rgba(11, 22, 35, 0.12);
}

.shadow-4 {
    box-shadow: 
    0 1px 3px rgba(11, 22, 35, 0.06),
    0 6px 16px rgba(11, 22, 35, 0.08),
    0 16px 40px rgba(11, 22, 35, 0.12);
}

.socials {
    width:100%;
    align-items: center;
    justify-content: center;
    padding-block:4rem;
}
.footer-socials {
    padding-block:2rem;
    & svg {
        scale:.75;
    }

}

.socials svg, .footer-socials svg {
    width:32px;
    aspect-ratio: 1/1;
    fill:inherit;
    stroke: inherit;
    & path {

        fill:inherit;
        stroke: inherit;
    }
}


.inline-auto {
    margin-inline:auto;
}



@keyframes messageFadeOut {
    100% {
        opacity: 0;
        translate: 50% 0;
    }
}


@starting-style {
    .message-list .message {

        opacity:0;
        translate: -50% 0;
    }
}


.message-list {
    position: fixed;
    top:7rem;
    display:flex;
    flex-direction: column;
    gap:1rem;
    padding:1rem;
    z-index:999;
    
    & .message {
        padding:1rem;
        max-width:min(100%, 350px);
        font-size:.9rem;
        font-weight: var(--fw-semibold);
        color:var(--color-white);
        opacity:1;
        translate:0 0;
        transition: .3s ease-in;
        backdrop-filter: blur(var(--blur-2xl));
        border-radius: .5rem;
        &.message-success {
            background-color:var(--color-success);
        }
        &.message-error {
            background-color: var(--color-error);
        }
        &.fade-out {
            animation: messageFadeOut 1s 0s  forwards ease-out;
        }
        
    }
}


.breadcrumbs {
    display: none;
    background-color: var(--color-soft);
    padding-inline:1rem;
    & a:any-link {
        text-decoration: none;
        color:var(--color-ink);
        font-weight:var(--fw-semibold);
        position:relative;
        &::after {
            content: '/';
            position:absolute;
            right: -1rem;
            top:0;

        }
    }
}
section:has(div.slider.light) ~ .breadcrumbs {
    background-color: var(--color-ink-soft);
    & a:any-link, span {
        color: var(--color-white);
    }
}
.md-show {
    display:none;
}


@media (prefers-reduced-motion: no-preference) {
    
    .animate-on-scroll {
        opacity:0; 
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.9s ease-out, transform 0.9s ease-out;
        will-change: opacity, transform; 
        &.in-frame {
            opacity: 1;
            transform: translateY(0);
        }
    }
}



@media(min-width:1035px) {
    .lg-hide {
        display:none !important;
    }
}
@media (max-width:1024px) {
    .md-hide {
        display: none !important;
    }
    .md-show {
        display:unset;
    }
    .col-2.md-collapse,
    .grid.col-2--left.md-collapse,
    .grid.col-2--right.md-collapse,
    .grid.col-3.md-collapse {
        grid-template-columns: 1fr ;
    }
    .grid.col-3.md-col-2 {
        grid-template-columns: 1fr 1fr;
    }
    .content, header.content {
        max-width:980px !important;

    }
    .card-stack {
        justify-self: stretch;
        gap:2rem;
        padding-bottom:2rem;
    }
}

@media (max-width:768px) {
    .gallery {
        min-height: 270px;
    }
    .x-large-text {
        font-size:3rem;
    }
    .large-text {
        font-size:2rem;
        text-wrap:balance;
    }
    .sm-hide {
        display:none !important;
    }
    .sm-inline-auto {
        margin-inline:auto;
    }

    .grid.col-2, .grid.col-2--left, .grid.col-2--right, .grid.col-3,
    .grid.col-3.md-col-2 {
        grid-template-columns : 1fr;
    }
    .nav-logo {
    max-width: 100px;
    }
    .p-6.sm-p-3, .p-5.sm-p-3, .p-4.sm-p-3, .sm-p-3 {
    padding:var(--space-3) !important;
    }
    .py-6.sm-py-3, .py-5.sm-py-3, .py-4.sm-py-3, .sm-py-3 {
    padding-block:var(--space-3) !important;
    }

    .p-6.sm-p-0, .p-5.sm-p-0, .p-4.sm-p-0, .sm-p-0 {
    padding:0 !important;
    }
    
    .shadow-4.sm-shadow-0 {
        box-shadow: none;
    }
    .my-6.sm-my-3 {
        margin-block:var(--space-3) !important;
    }
    .g-6.sm-g-3, .g-5.sm-g-3, .g-4.sm-g-3 {
        gap: var(--space-3) !important;
    }
    .g-6.sm-g-2, .g-5.sm-g-2, .g-4.sm-g-2 {
        gap: var(--space-2) !important;
    }
    .sm-text-center {
        text-align: center !important;
    }
    .sm-transparent {
        border:none;
        background-color: transparent !important;
    }
    .card.sm-inline {
        display: grid; 
        grid-template-columns: repeat(2, 1fr);
        max-width:100%;
        & .card__image {
            aspect-ratio: unset;
        }
    }
    .text-section {
        padding-inline:.5rem;
    }

    .grid.col-4 {
        grid-template-columns: 1fr 1fr;
    }

    .hero__body p:not(.review) {
        padding-right:1.5rem;
    }
    .welcome {
        padding-top:1rem;
    }
    .welcome-sub {
        padding-inline:1rem !important;
        padding-block: 5rem 0;
        margin-bottom:0;
    }
    section .cta, form .cta {
        width:100%;
        max-width:350px; 
        margin-inline:auto;
    }
    section.hero {
        padding-top:6.5rem;
        padding-inline:1rem;
    }
    .hero__body {
        position: relative;
        height:100%;
    }
    .hero-actions {
        padding-top:2rem;
    }
    .short {
        padding-bottom:2rem;
    }
    .card-stack {
        margin-inline:auto;
    }
    form, header {
        padding-inline:1rem;
    }
    h2.display.large-text {
        max-width:25ch;
    }
    
}