:root {

    --white:            #ffffff;
    --black:            #000000;

    /* colour ramps */
    --gray-050: #F6F4F2;
    --gray-100: #E6E4E3;
    --gray-150: #D7D5D4;
    --gray-200: #C7C5C4;
    --gray-300: #B7B5B5;
    --gray-400: #A8A5A6;
    --gray-500: #898688;
    --gray-600: #696669;
    --gray-700: #4A474B;
    --gray-800: #383538;
    --gray-900: #252426;
    --gray-950: #131213;

    --accent-050: #FFF3EF;
    --accent-100: #FEE9E4;
    --accent-150: #FCDAD2;
    --accent-200: #F8C3BB;
    --accent-300: #F5ABA3;
    --accent-400: #f1948b; 
    --accent-500: #E5857E;
    --accent-600: #d87670;
    --accent-700: #C8645F;
    --accent-800: #B9514D;
    --accent-900: #a93f3c;
    --accent-950: #681613;

    --base-050: #FDF7F2;
    --base-100: #F8E8D8;
    --base-150: #f3d9be;
    --base-200: #e5c5a8;
    --base-300: #D3B297;
    --base-400: #c09f86;
    --base-500: #AC8A71;
    --base-600: #99765B;
    --base-700: #856146;
    --base-800: #724D30;
    --base-900: #5e381b;
    --base-950: #3c210e;
    
    --blush-050: #FBF5EE;
    --blush-100: #F7E8D9;
    --blush-150: #EFD4BD;
    --blush-200: #E8BFA0;
    --blush-300: #e0ab84;
    --blush-400: #d39871;
    --blush-500: #B57A59;
    --blush-600: #A46B4F;
    --blush-700: #945D46;
    --blush-800: #834e3c;
    --blush-900: #703D2A;
    --blush-950: #451b0b;
    
    --neutral-050: #f7f0ea;
    --neutral-100: #f0e6de;
    --neutral-150: #E1D6CD;
    --neutral-200: #D2C6BD;
    --neutral-300: #C2B6AC;
    --neutral-400: #b2a69b;
    --neutral-500: #9F9387;
    --neutral-600: #8b7f73;
    --neutral-700: #766A5F;
    --neutral-800: #60554A;
    --neutral-900: #4b4036;
    --neutral-950: #2b2621;

    /* semantic colours */
    --site-bg:          var(--blush-050);
    --color-text:       var(--black);
    --border-default:   var(--blush-100);
    --btn-bg-light:     var(--white);
    --btn-bg:           var(--accent-200);
    --btn-bg-hover:     var(--accent-300);

    --link:             var(--blush-600);
    --link-hover:       var(--black);
    --link-active:      var(--accent-600);

    --border:                   1px solid var(--neutral-200);
    --border-thick:             2px solid var(--black);
    --cta-background:           var(--black);
    --page-title-background:    var(--neutral-100);
    --footer-bg:                var(--white);
    --footer-link:              var(--black);
    --blurb-divider:            var(--neutral-200);
    --nav-active:               var(--black);



    /* @link https://utopia.fyi/clamp/calculator?a=448,1344,3—4|6—8|12—16|16—20|20—24|28—32|36—48|42—64|48—96|64—128&p=space */
    /* 448px --> 1344px */
    --space-tiny: clamp(0.1875rem, 0.1563rem + 0.1116vw, 0.25rem);  /* 3-4px */
    --space-xs: clamp(0.375rem, 0.3125rem + 0.2232vw, 0.5rem);      /* 6-8px */
    --space-sm: clamp(0.75rem, 0.625rem + 0.4464vw, 1rem);          /* 12-16px */
    --space-base: clamp(1rem, 0.875rem + 0.4464vw, 1.25rem);        /* 16-20px */
    --space-md: clamp(1.25rem, 1.125rem + 0.4464vw, 1.5rem);        /* 20-24px */
    --space-lg: clamp(1.75rem, 1.625rem + 0.4464vw, 2rem);          /* 28-32px */
    --space-xl: clamp(2.25rem, 1.875rem + 1.3393vw, 3rem);          /* 36-48px */
    --space-xxl: clamp(2.625rem, 1.9375rem + 2.4554vw, 4rem);       /* 42-64px */
    --space-huge: clamp(3rem, 1.5rem + 5.3571vw, 6rem);             /* 48-96px */
    --space-mega: clamp(4rem, 2rem + 7.1429vw, 8rem);               /* 64-128px */

    /* @link https://utopia.fyi/clamp/calculator?a=400,1440,10—14|15—17|17—20|20—24|24—36|36—54|48—72&p=text */
    /* 400px --> 1440px */
    --text-xs: clamp(0.625rem, 0.5288rem + 0.3846vw, 0.875rem);      /* 10-14 */
    --text-sm: clamp(0.9375rem, 0.8894rem + 0.1923vw, 1.0625rem);    /* 15-17 */
    --text-base: clamp(1.0625rem, 0.9904rem + 0.2885vw, 1.25rem);    /* 17-20 */
    --text-md: clamp(1.25rem, 1.1538rem + 0.3846vw, 1.5rem);         /* 20-24 */
    --text-lg: clamp(1.5rem, 1.2115rem + 1.1538vw, 2.25rem);         /* 24-36 */
    --text-xl: clamp(2.25rem, 1.8173rem + 1.7308vw, 3.375rem);       /* 36-54 */
    --text-xxl: clamp(3rem, 2.4231rem + 2.3077vw, 4.5rem);           /* 48-72 */

    --font-weight-thin: 240;
    --font-weight-regular: 340;
    --font-weight-semibold: 480;
    --font-weight-bold: 560;
    
    --max-narrow:   36rem; /* 576px */
    --max-post:     48rem; /* 768px */
    --max-content:  60rem; /* 960px */
    --max-wide:     84rem; /* 1344px */

    --shadow-sm: 0 0 var(--space-xs) rgba(60, 33, 14, 0.05);
    --shadow-md: 0 var(--space-xs) var(--space-base) rgba(60, 33, 14, 0.05);

    --shadow-card: var(--shadow-sm);
    --shadow-card-hover: var(--shadow-md);

    --radius-sm: var(--space-tiny);
    --radius-base: var(--space-xs);
    --radius-md: var(--space-sm);
    --radius-lg: var(--space-md);
    --radius-xl: var(--space-lg);

    --radius-card: var(--space-xs);

    --gutter: clamp(1rem, -1.5rem + 8.9286vw, 6rem); /* 16px->96px */

    --lh-tighter: 1;
    --lh-tight: 1.154;
    --lh-default: 1.309;
    --lh-loose: 1.618;

    --ls-looser: 0.10em;
    --ls-loose:  0.05em;

    --header-variant-on: 40rem;
    --header-variant-off: 30rem;


}

/*--------------------------------------------------------------------------- */
/* MARK: FONTS
*/



/* Outfit Var */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/outfit-var/outfit-var.woff2') format('woff2-variations'),
            url('/assets/fonts/outfit-var/outfit-var.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
     
}
.font-primary { font-family: 'font-primary', sans-serif; font-style: normal; }
.font-primary-100 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 100; }
.font-primary-200 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 200; }
.font-primary-300 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 300; }
.font-primary-400 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 400; }
.font-primary-500 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 500; }
.font-primary-600 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 600; }
.font-primary-700 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 700; }
.font-primary-800 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 800; }
.font-primary-900 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 900; }



/* Briallen 400 */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/briallen/briallen-400.woff2') format('woff2'), url('/assets/fonts/briallen/briallen-400.woff') format('woff'), url('/assets/fonts/briallen/briallen-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.font-secondary-400 { font-family: 'font-secondary', sans-serif; font-style: normal; font-weight: 400; }

/* Briallen 400-italic */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/briallen/briallen-400-italic.woff2') format('woff2'), url('/assets/fonts/briallen/briallen-400-italic.woff') format('woff'), url('/assets/fonts/briallen/briallen-400-italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
.font-secondary-400i { font-family: 'font-secondary', sans-serif; font-style: italic; font-weight: 400; }



/*--------------------------------------------------------------------------- */
/* MARK: RESET
*/

/* heavily based on https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
*:focus {
    outline: 3px solid var(--base-300);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
        scroll-behavior: smooth;
    }
    @view-transition {
        navigation: auto;
    }
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
p {
    text-wrap: pretty;
}
strong {
    font-weight: var(--font-weight-bold);
}

/*--------------------------------------------------------------------------- */
/* MARK: HTML/BODY
*/

html {
    padding: 0;
}

body {
    background-color: var(--site-bg);
    color: var(--color-text);
    font-family: 'font-primary', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--lh-loose);
    transition: background-color 0.2s ease-in;
    -webkit-font-smoothing: antialiased;
}

.page {
    align-items: start;
    display: grid;
}



.page > * {
    grid-column: 1 / -1;
    width: 100%;
}

rtb-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
}

[data-max-width] {
    margin-inline: auto;
}


[data-max-width="md"] {
    max-width: var(--max-narrow);
}

[data-max-width="lg"] {
    max-width: var(--max-content);
}

[data-gap="xs"]     { gap: var(--space-xs) }
[data-gap="sm"]     { gap: var(--space-sm) }
[data-gap="base"]   { gap: var(--space-base) }
[data-gap="md"]     { gap: var(--space-md) }
[data-gap="lg"]     { gap: var(--space-lg) }
[data-gap="xl"]     { gap: var(--space-xl) }
[data-gap="xxl"]    { gap: var(--space-xxl) }
[data-gap="huge"]   { gap: var(--space-huge) }

/*--------------------------------------------------------------------------- */
/* MARK: Site HEADER
*/

.site-header {
    align-items: center;
    display: grid;
    grid-template-areas:
        "logo btns"
    ;
    grid-row: 1 / 2;
    justify-content: space-between;
    padding: var(--space-xs) var(--gutter);
    text-align: center;
    position: sticky;
    left: 0; right: 0; top: 0;
    transition: background-color 0.3s ease-in-out;
    z-index: 98;
    width: 100%;
}





.site-header .btns {
    grid-area: btns;
    gap: var(--space-sm);
}
.site-header .logo {
    display: block;
    height: 4rem;
    justify-self: start;
}
.site-header .logo svg {
    height: 100%;
    width: auto;
}

/* booking btn */

.site-header .btn {
    align-items: center;
    border: 0;
    display: flex;
    font-size: var(--text-xs);
    grid-area: book;
    height: 3rem;
    justify-content: center;
    padding: var(--space-sm);
}

.site-header .btn.book {
    margin-left: auto;
    transition: all 0.3s ease-in-out;
}

/* navigation starts here */

.site-nav {
    display: none; /* for mobile */
    font-size: var(--text-xs);
    grid-area: nav;
    z-index: 5;
}

.mobile-nav-toggle {
    align-self: center;
    align-items: center;
    background: var(--black);
    border: 0;
    border-radius: 0;
    color: var(--white);
    cursor: pointer;
    display: flex; /* for mobile */
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    height: 3rem;
    justify-self: end;
    line-height: var(--lh-tighter);
    padding: 0 var(--space-sm);
    text-transform: uppercase;
    width: 3rem;
}

/* the parent menu and primary nav items */
.site-nav > .menu {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    list-style: none;
    padding: 0;
}
.site-nav > .menu.omega-btn > li:last-of-type {
    background-color: var(--accent);
    color: var(--white);
}
.site-nav > .menu > li {
    display: flex;
}
.site-nav > .menu > li.has-submenu {
    /* position: relative; */
}
.site-nav > .menu > li > a {
    border: 0;
    color: var(--link-hover);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    padding: var(--space-md) var(--space-tiny);
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
}

.site-nav > .menu > li > a:hover {
    color: var(--link);
}

.site-nav > .menu > li > a.active::after {
    background-color: var(--nav-active);
    content: '';
    height: 2px;
    left: var(--space-tiny);
    position: absolute;
    right: var(--space-tiny);
    bottom: var(--space-xs);
    width: auto;
}

/* the drop-down menu and kids */
.site-nav .submenu {
    background-color: var(--btn-bg);
    display: none;
    opacity: 0.97;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    left: 0;
    list-style: none;
    padding: var(--space-tiny);
    position: absolute;
    right: 0;
    text-align: center;
    top: 100%;
}

.site-nav .submenu a {
    color: var(--black);
    display: block;
    font-size: var(--text-sm);
    padding: var(--space-sm) var(--space-sm);
    position: relative;
    text-wrap: nowrap;
    text-decoration: none;
    z-index: 2;
}


/* header and nav variations */
.page-title--light.page-title--no-image .site-header {
    background-color: transparent;
}
.page-title--light.page-title--has-image .site-header {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2rem);
}

.page-title--dark .site-header {
    background-color: transparent;
}
.page-title--dark .site-header.is-scrolled,
.page-title--light .site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2rem);
}
.page-title--dark .site-header .logo svg {
    fill: var(--white);
}
.page-title--dark .site-nav > .menu > li > a {
    color: var(--white);
}
.page-title--dark .site-nav > .menu > li > a.active::after {
    background-color: var(--white);
}

/* scrolled sticky header */
.site-header.is-scrolled {
    background: var(--white);
}
.site-header.is-scrolled .btn.book {
    background: var(--black);
    color: var(--white);
}
.site-header.is-scrolled .logo svg {
    fill: var(--black) !important;
}
.site-header.is-scrolled .site-nav > .menu > li > a {
    color: var(--black);
}
.site-header.is-scrolled .site-nav > .menu > li > a.active::after {
    background-color: var(--black);
}


/*--------------------------------------------------------------------------- */
/* MARK: Page Title
*/

.page-title.no-image {
    text-align: center;
}

.page-title.no-image hr {
    margin-inline: auto;
}

.page-title.no-image .lede {
    max-width: var(--max-narrow);
    margin-inline: auto;
}

.page-title.no-image .lede p {
    text-wrap: balance;
}

.page-title.no-image .btn {
    margin-inline: auto;
}

.page-title.no-image .copy {
    padding-top: calc(2.5 * var(--space-huge));
}

.page-title .copy {
    padding: var(--space-huge) var(--gutter);
}

/* kicker! */
.page-title .kicker {
    font-family: 'font-primary';
    font-size: var(--text-sm);
    letter-spacing: var(--ls-loose);
    line-height: var(--lh-tight);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
}

.page-title .headline {
    font-family: 'font-secondary';
    font-size: var(--text-xxl);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: var(--lh-tighter);
    text-wrap: balance;
    text-transform: uppercase;
}

.page-title .lede {
    font-size: var(--text-base);
}

.page-title .image {
    overflow: hidden;
}

.page-title .image img {
    aspect-ratio: 1;
    object-fit: cover;
}

/* page title variations */

.page-title--light .page-title {
    background-color: var(--page-title-background);
}

.page-title--light.page-title--no-image .page-title {
    background-color: transparent;
    background-image: linear-gradient(to bottom, var(--page-title-background) 0%, var(--site-bg) 100%);
}
.page-title--light.page-title--no-image .page-title .copy {
    padding-bottom: 0;
}

.page-title--dark .page-title {
    background-color: var(--black);
    color: var(--white);
}

.page-title--dark .page-title .lede a {
    color: var(--btn-bg-hover);
}

.page-title--dark .page-title hr {
    background-color: var(--btn-bg-hover);
}

.page-title--dark .page-title .image img {
    filter: brightness(0.6) saturate(1.3);
}

.page-title--dark .page-title .btn.outline {
    border-color: var(--btn-bg-hover);
    color: var(--btn-bg-hover);
}

.page-title--dark .page-title .btn.outline:hover {
    color: var(--white);
}

/* start subtle page title entrance animation */

@media (prefers-reduced-motion: no-preference) {
    .page-title .kicker,
    .page-title .headline,
    .page-title .lede,
    .page-title .btns {
        animation: page-title-enter 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
        opacity: 0;
    }

    .page-title hr {
        animation: page-title-rule 680ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
        transform-origin: left center;
    }

    .page-title.no-image hr {
        transform-origin: center;
    }

    .page-title .image img {
        animation: page-title-image-settle 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .page-title .kicker {
        animation-delay: 120ms;
    }

    .page-title .headline {
        animation-delay: 220ms;
    }

    .page-title hr {
        animation-delay: 360ms;
    }

    .page-title .lede {
        animation-delay: 460ms;
    }

    .page-title .btns {
        animation-delay: 560ms;
    }
}

@keyframes page-title-enter {
    from {
        filter: blur(0.25rem);
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes page-title-rule {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes page-title-image-settle {
    from {
        opacity: 0.92;
        transform: scale(1.025);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* end subtle page title entrance animation */



/*--------------------------------------------------------------------------- */
/* MARK: Site MAIN
*/

main {
    display: flex;
    flex-direction: column;
    grid-row: 1 / 2;
}
main > * {
    margin-block: 0;
}


/*--------------------------------------------------------------------------- */
/* MARK: CTA BLOCK
*/

.cta-block {
    background-color: var(--cta-background);
    color: var(--white);
    display: grid;
    gap: var(--space-xl);
    padding: var(--space-xxl) var(--gutter);
    text-align: center;
    transition: background-color 0.2s ease-in;
}

.cta-block .title {
    font-size: var(--text-base);
    font-family: 'font-primary';
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--ls-loose);
}
.cta-block .teaser {
    font-family: 'font-secondary';
    font-size: var(--text-xl);
    line-height: var(--lh-tighter);
    text-wrap: balance;
}
.cta-block .btns {
    justify-content: center;
}
.cta-block .book-at-studio {
    max-width: var(--max-narrow);
}
.cta-block .book-at-studio a {
    display: inline-block;
    color: var(--btn-bg);
    font-weight: var(--font-weight-bold);
    margin-top: var(--space-xs);
    text-transform: uppercase;
    text-decoration: none;
}
.cta-block .book-at-studio a:hover {
    color: var(--btn-bg-hover);
}

.cta-block.inline-cta {
    background-color: var(--black);
    color: var(--white);
    position: relative;
}
.cta-block.inline-cta .copy a {
    color: var(--btn-bg-hover);
}
.cta-block.inline-cta .mobile-teaser {
    max-width: var(--max-content);
    text-wrap: balance;
}
.cta-block.inline-cta .logo {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--site-bg);
    border: var(--border);
    border-radius: 50%;
    display: grid;
    min-width: 10%;
    padding: var(--space-sm);
    pointer-events: none;
    position: absolute;
    rotate: 12deg;
    right: var(--space-base);
    top: calc(-1 * var(--space-xl));
    width: var(--space-huge);
}
.rotate-center {
	-webkit-animation: rotate-center 10s linear infinite both;
	        animation: rotate-center 10s linear infinite both;
}
.pulsate-bck {
	-webkit-animation: pulsate-bck 1s ease-in-out infinite both;
	        animation: pulsate-bck 1s ease-in-out infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-5-3 23:41:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation pulsate-bck
 * ----------------------------------------
 */
 @-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2026-5-3 23:37:3
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------------------- */
/* MARK: Site FOOTER
*/

.site-footer {
    background-color: var(--footer-bg);
    display: grid;
    font-size: var(--text-sm);
    gap: var(--space-xl);
    padding: var(--space-xl) var(--gutter) var(--space-base) var(--gutter);
    position: relative;
    text-align: center;
}
.site-footer :is(h2, h3) {
    font-size: var(--text-sm);
    font-family: 'font-primary';
    letter-spacing: var(--ls-loose);
    margin-bottom: var(--space-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}
.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer a {
    color: var(--footer-link);
}

.site-footer .logo {
    align-self: start;
    display: block;
    margin-inline: auto;
    width: 6.25rem;
}

.site-footer .social-links {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-sm);
}
.site-footer .social-links a {
    text-decoration: none;
}
.site-footer .social-links svg {
    height: var(--space-md);
    width: var(--space-md);
}
.site-copyright {
    font-size: var(--text-xs);
    text-transform: lowercase;
}

.site-footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
    justify-content: space-between;
}


/*--------------------------------------------------------------------------- */
/* MARK: ROWS
*/

.row {
    --bg: transparent;
    --rowPadding: var(--space-huge);
    background-color: var(--bg);
    padding: calc(var(--rowPadding) * 1) var(--gutter); /* top/bottom padding (xl) relates to the more/less classes below */
    position: relative;
}
.row.top-pad-none       { padding-top:      0; }
.row.bot-pad-none       { padding-bottom:   0; }
.row.top-pad-less       { padding-top:      calc(var(--rowPadding) * 0.5); }
.row.bot-pad-less       { padding-bottom:   calc(var(--rowPadding) * 0.5); }
.row.top-pad-more       { padding-top:      calc(var(--rowPadding) * 2) }
.row.bot-pad-more       { padding-bottom:   calc(var(--rowPadding) * 2) }

.row.bot-bdr {
    border-bottom: var(--border-thick);
}

.row.has-bg-image {
    color: white;
}
.row.has-bg-image a {
    color: inherit;
}
.row > * {
    margin-block: 0;
}

.row-bg-image {
    filter: opacity(1) brightness(0.25) contrast(0.9) saturate(1.2);
    height: 100%;
    left: 0; top: 0; bottom: 0; right: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

/*--------------------------------------------------------------------------- */
/* MARK: COLUMNS
*/

.columns {
    display: grid;
    row-gap: var(--space-huge);
    column-gap: var(--space-xl);
    margin-inline: auto;
}

.columns.flip-order > :first-child {
    order: 2;
}

.columns .column {
    /* border: 1px solid powderblue; */
    container-type: inline-size;
    display: flex;
    gap: var(--space-md);
    flex-direction: column;
    position: relative;
    z-index: 2;
}
.columns .column > * {
    margin-block: 0;
    max-width: 100%;
}

/*--------------------------------------------------------------------------- */
/* MARK: Auto-Grid
*/

.auto-grid {
    --max-column-width: 100% / var(--auto-grid-max-columns, infinity) - var(--auto-grid-gap);
    --column-width: max(var(--max-column-width), min(var(--auto-grid-min-size, 10rem), 100%));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
    gap: var(--auto-grid-gap-vertical, var(--auto-grid-gap, 1rem)) var(--auto-grid-gap, 1rem);

    /* defaults - override these as needed */
    --auto-grid-min-size: 16rem;
    --auto-grid-max-columns: 3;
    --auto-grid-gap: var(--space-md);
}


/*--------------------------------------------------------------------------- */
/* MARK: Headings
*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'font-secondary', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-weight: 400;
    line-height: var(--lh-tighter);
}

[data-alignment='center'] {
    text-align: center;
}
[data-alignment='right'] {
    text-align: right;
}

h1 { font-size: var(--text-xxl); }
h2 { font-size: var(--text-xl);  }
h3 { font-size: var(--text-lg); font-weight: var(--font-weight-regular); }
h4 { font-size: var(--text-md); font-weight: var(--font-weight-regular); }
h5 { font-size: var(--text-md); font-weight: var(--font-weight-regular); }
h6 { font-size: var(--text-base); font-weight: var(--font-weight-regular); }

/* .template-is-post .page-title .headline {
    font-size: var(--text-xl);
} */

.kicker {
    font-family: 'font-primary';
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    line-height: var(--lh-tight);
    text-transform: uppercase;
}

.kicker > span {
    border-top: var(--border-thick);
    border-color: var(--blurb-divider);
    display: inline-block;
    padding-top: var(--space-base);
}

/*--------------------------------------------------------------------------- */
/* MARK: Links
*/

a {
    color: var(--link);
}
a:hover {
    color: var(--link-hover);
}
a:active {
    color: var(--link-active);
}


/*--------------------------------------------------------------------------- */
/* MARK: Paragraphs
*/

.lede {
    font-size: var(--text-md);
}
.callout {
    background-color: var(--page-title-background);
    padding: var(--space-base);
}

/*--------------------------------------------------------------------------- */
/* MARK: Lists
*/

ol, ul {
    padding-left: var(--space-lg);
}

/*--------------------------------------------------------------------------- */
/* MARK: Figures/Images
*/

figure figcaption {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    padding-top: var(--space-xs);
    text-align: center;
}

img {
    height: auto;
}

/*--------------------------------------------------------------------------- */
/* MARK: HR
*/

hr {
    border: 0;
    padding: 0;
    height: 2px;
    background-color: var(--black);
    width: 100%;
    max-width: var(--space-huge);
    display: block;
}

/*--------------------------------------------------------------------------- */
/* MARK: Blockquote
*/

blockquote {
    border-left: var(--space-sm) solid var(--neutral-200);
    display: grid;
    gap: var(--space-md);
    padding: var(--space-base);
}

blockquote .quote {
    font-family: 'font-secondary';
    font-size: var(--text-lg);
    line-height: var(--lh-tight);
}

blockquote footer {
    font-size: var(--text-sm);
    letter-spacing: var(--ls-loose);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}


/*--------------------------------------------------------------------------- */
/* MARK: Buttons
*/

.btns {
    display: flex;
    gap: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
    font-size: var(--text-sm);
}

.btns.center {
    justify-content: center;
}

.btn {
    --borderAndBackground: var(--btn-bg);
    --btnRadius: 0;
    appearance: none;
    background-color: var(--borderAndBackground);
    border: 2px solid var(--borderAndBackground);
    border-radius: var(--btnRadius);
    color: var(--black);
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    line-height: var(--lh-default);
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    text-transform: uppercase;
}
.btn.outline {
    --borderAndBackground: var(--black);
    background-color: transparent;
    color: var(--borderAndBackground);
}
.btn.subtle {
    --borderAndBackground: var(--btn-bg-light);
    color: var(--color-text);
}
.btn.simple {
    --borderAndBackground: var(--border-default);
    background-color: transparent;
    color: var(--color-text);
}
.btn:hover {
    --borderAndBackground: var(--btn-bg-hover);
}
.btn.outline:hover,
.btn.simple:hover {
    color: var(--borderAndBackground);
}

/* start fancy button hover enhancements */

.btn {
    overflow: hidden;
    position: relative;
    transform: translateY(0);
    transition:
        background-color 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        color 260ms ease,
        transform 260ms ease;
}

.btn:not(.simple)::after {
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.42) 48%, transparent 72%);
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-120%);
    transition:
        opacity 260ms ease,
        transform 650ms ease;
}

.btn:hover,
.btn:focus-visible {
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
    transform: translateY(-0.125rem);
}

.btn:active {
    box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

.btn:not(.simple):hover::after,
.btn:not(.simple):focus-visible::after {
    opacity: 1;
    transform: translateX(120%);
}

.btn.outline,
.btn.simple {
    box-shadow: inset 0 0 0 0 var(--borderAndBackground);
}

.btn.outline:hover,
.btn.outline:focus-visible {
    background-color: var(--borderAndBackground);
    box-shadow:
        inset 0 -4rem 0 0 var(--borderAndBackground),
        0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
    color: var(--white);
}

.btn.simple {
    padding-inline: 0;
}

.btn.simple::after {
    background-color: currentColor;
    bottom: 0;
    content: '';
    height: 2px;
    left: 0;
    pointer-events: none;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms ease;
    width: 100%;
}

.btn.simple:hover,
.btn.simple:focus-visible {
    box-shadow: none;
}

.btn.simple:hover::after,
.btn.simple:focus-visible::after {
    transform: scaleX(1);
}

.btn.no-motion,
.btn.no-effects {
    transform: none;
    transition: none;
}

.btn.no-motion:hover,
.btn.no-motion:focus-visible,
.btn.no-motion:active,
.btn.no-effects:hover,
.btn.no-effects:focus-visible,
.btn.no-effects:active {
    transform: none;
}

.btn.no-effects,
.btn.no-effects:hover,
.btn.no-effects:focus-visible,
.btn.no-effects:active {
    box-shadow: none;
}

.btn.outline.no-effects:hover,
.btn.outline.no-effects:focus-visible {
    background-color: transparent;
    color: var(--borderAndBackground);
}

.btn.no-effects::after,
.btn.no-motion::after {
    display: none;
}

/* start component-owned button effect exclusions */

.portal .btn,
.blurb .btn {
    box-shadow: none;
    transform: none;
}

.portal .btn::after,
.blurb .btn::after {
    display: none;
}

.portal .btn:hover,
.portal .btn:focus-visible,
.portal .btn:active,
.blurb .btn:hover,
.blurb .btn:focus-visible,
.blurb .btn:active {
    box-shadow: none;
    transform: none;
}

.portal .btn.outline:hover,
.portal .btn.outline:focus-visible,
.blurb .btn.outline:hover,
.blurb .btn.outline:focus-visible {
    background-color: transparent;
    color: var(--borderAndBackground);
}

/* end component-owned button effect exclusions */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn::after {
        transition: none;
    }

    .btn:hover,
    .btn:focus-visible,
    .btn:active {
        transform: none;
    }

    .btn::after {
        display: none;
    }
}

/* end fancy button hover enhancements */

/*--------------------------------------------------------------------------- */
/* MARK: BLOCKS
*/

/* leave a gap here to make the sidebar nav useful */


/*--------------------------------------------------------------------------- */
/* MARK: Random Portfolio Pics
*/

.portfolio-strip {
    --gap: var(--space-base);
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    list-style: none;
    padding: 0;
}

.portfolio-strip .item {
    width: calc(50% - (var(--gap) / 2));
}

.portfolio-strip .image {
    filter: brightness(0.8) saturate(1.1);
    height: 100%;
    object-fit: cover;
    width: 100%;
}




/*--------------------------------------------------------------------------- */
/* MARK: Reviews Testimonials Block
*/

/* start client reviews editorial treatment */

/* container */
.client-reviews {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: 1fr;
}

/* item */
.client-review {
    background-color: var(--white);
    border: 0;
    display: grid;
    gap: var(--space-md);
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    padding: var(--space-lg);
    position: relative;
    transform: translateY(0);
    transition:
        border-color 300ms ease,
        box-shadow 300ms ease,
        transform 300ms ease;
}


.client-review:first-child {
    background-color: var(--page-title-background);
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-xl);
}

.client-review:first-child .copy {
    font-family: 'font-secondary', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-size: var(--text-lg);
    line-height: var(--lh-default);
    padding-right: 0;
    text-wrap: balance;
}

.client-review:first-child footer {
    align-self: end;
    min-width: 3rem;
}

.client-review::before {
    color: var(--btn-bg-hover);
    content: '"';
    font-family: 'font-secondary', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-size: var(--text-xxl);
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: var(--space-md);
    top: var(--space-md);
    transition:
        opacity 300ms ease;
}

.client-review .copy,
.client-review footer {
    position: relative;
    z-index: 2;
}

.client-review .copy {
    font-size: var(--text-base);
    line-height: var(--lh-default);
    padding-right: var(--space-lg);
}

.client-review .copy > :last-child {
    margin-bottom: 0;
}

.client-review footer {
    align-self: end;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    line-height: var(--lh-tight);
    text-align: right;
    text-transform: uppercase;
}

@container (min-width: 44rem) {
    .client-reviews {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (prefers-reduced-motion: reduce) {
    .client-review,
    .client-review::before {
        transition: none;
    }

    .client-review:hover,
    .client-review:focus-within {
        transform: none;
    }

}

/* end client reviews editorial treatment */


/*--------------------------------------------------------------------------- */
/* MARK: Location Choice
*/

.location-choice .column:last-of-type {
    background-color: var(--page-title-background);
    gap: var(--space-base);
    height: 100%;
    justify-content: center;
    padding: var(--space-md);
}

.location-choice .column:last-of-type h2 {
    font-size: var(--text-lg);
}

/*--------------------------------------------------------------------------- */
/* MARK: Brands Block
*/

.brands-row {
    background-color: var(--page-title-background);
    padding: var(--space-md) var(--gutter);
}

.template-is-contact .brands-row {
    background-color: var(--black);
}

.brands-block {
    align-items: center;
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    list-style: none;
    padding: 0;
}

.brands-block .logo {
    filter: brightness(0) grayscale(1);
    display: block;
    margin-inline: auto;
    max-width: 100%;
    width: 4rem;
}
.template-is-contact .brands-block .logo {
    filter: brightness(0) grayscale(1) invert(1);
}

/*--------------------------------------------------------------------------- */
/* MARK: Portal Block
*/

.portal {
    container-type: inline-size;
    display: grid;
    gap: var(--space-md);
    list-style: none;
    padding: 0;
}

/* posts and albums portal style variants */

.portal-for-albums .item-link,
.portal-for-posts .item-link {
    border: 0;
    color: var(--white);
    display: grid;
    grid-template-areas: "stack";
    overflow: hidden;
    text-decoration: none;
}

.portal-for-albums .item-link > *,
.portal-for-posts .item-link > * {
    grid-area: stack;
}

.portal-for-albums .image,
.portal-for-posts .image {
    aspect-ratio: 3/4;
    filter: brightness(0.7) saturate(1.2);
    object-fit: cover;
    height: 100%;
    position: relative;
    z-index: 1;
    width: 100%;
}

.portal-for-albums .copy,
.portal-for-posts .copy {
    align-content: end;
    display: grid;
    gap: var(--space-base);
    padding: var(--space-md);
    position: relative;
    z-index: 2;
}

.portal-for-albums .heading,
.portal-for-posts .heading {
    font-size: var(--text-lg);
    line-height: var(--lh-tight);
}

.portal-for-albums .btn,
.portal-for-posts .btn {
    border: 0;    
    color: var(--btn-bg-hover);
    font-size: var(--text-sm);
    padding: 0;
}

/* start portal-for-posts fancy hover enhancements */

.portal-for-albums .item-link,
.portal-for-posts .item-link {
    isolation: isolate;
    position: relative;
    transform: translateY(0);
    transition:
        box-shadow 300ms ease,
        transform 300ms ease;
}

.portal-for-albums .item-link::before,
.portal-for-albums .item-link::after,
.portal-for-posts .item-link::before,
.portal-for-posts .item-link::after {
    content: '';
    grid-area: stack;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.portal-for-albums .item-link::before,
.portal-for-posts .item-link::before {
    background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.34) 48%, transparent 70%);
    opacity: 0;
    transform: translateX(-120%);
    transition:
        opacity 300ms ease,
        transform 700ms ease;
}

.portal-for-albums .item-link::after,
.portal-for-posts .item-link::after {
    background:
        linear-gradient(180deg, transparent 15%, rgba(0, 0, 0, 0.24) 56%, rgba(0, 0, 0, 0.68) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%);
    opacity: 0.72;
    transition: opacity 300ms ease;
    z-index: 1;
}

.portal-for-albums .image,
.portal-for-posts .image {
    transform: scale(1);
    transition:
        filter 450ms ease,
        transform 700ms ease;
}

.portal-for-albums .copy,
.portal-for-posts .copy {
    transform: translateY(0);
    transition: transform 300ms ease;
}

.portal-for-albums .btn,
.portal-for-posts .btn {
    opacity: 0.76;
    transform: translateY(0.4rem);
    transition:
        color 300ms ease,
        opacity 300ms ease,
        transform 300ms ease;
}

.portal-for-albums .item-link:hover,
.portal-for-albums .item-link:focus-visible,
.portal-for-posts .item-link:hover,
.portal-for-posts .item-link:focus-visible {
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.18);
    transform: translateY(-0.375rem);
}

.portal-for-albums .item-link:hover::before,
.portal-for-albums .item-link:focus-visible::before,
.portal-for-posts .item-link:hover::before,
.portal-for-posts .item-link:focus-visible::before {
    opacity: 1;
    transform: translateX(120%);
}

.portal-for-albums .item-link:hover::after,
.portal-for-albums .item-link:focus-visible::after,
.portal-for-posts .item-link:hover::after,
.portal-for-posts .item-link:focus-visible::after {
    opacity: 0.92;
}

.portal-for-albums .item-link:hover .image,
.portal-for-albums .item-link:focus-visible .image,
.portal-for-posts .item-link:hover .image,
.portal-for-posts .item-link:focus-visible .image {
    filter: brightness(0.68) saturate(1.28);
    transform: scale(1.06);
}

.portal-for-albums .item-link:hover .copy,
.portal-for-albums .item-link:focus-visible .copy,
.portal-for-posts .item-link:hover .copy,
.portal-for-posts .item-link:focus-visible .copy {
    transform: translateY(-0.25rem);
}

.portal-for-albums .item-link:hover .btn,
.portal-for-albums .item-link:focus-visible .btn,
.portal-for-posts .item-link:hover .btn,
.portal-for-posts .item-link:focus-visible .btn {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .portal-for-albums .item-link,
    .portal-for-albums .item-link::before,
    .portal-for-albums .item-link::after,
    .portal-for-albums .image,
    .portal-for-albums .copy,
    .portal-for-albums .btn,
    .portal-for-posts .item-link,
    .portal-for-posts .item-link::before,
    .portal-for-posts .item-link::after,
    .portal-for-posts .image,
    .portal-for-posts .copy,
    .portal-for-posts .btn {
        transition: none;
    }

    .portal-for-albums .item-link:hover,
    .portal-for-albums .item-link:focus-visible,
    .portal-for-albums .item-link:hover .image,
    .portal-for-albums .item-link:focus-visible .image,
    .portal-for-albums .item-link:hover .copy,
    .portal-for-albums .item-link:focus-visible .copy,
    .portal-for-albums .item-link:hover .btn,
    .portal-for-albums .item-link:focus-visible .btn,
    .portal-for-posts .item-link:hover,
    .portal-for-posts .item-link:focus-visible,
    .portal-for-posts .item-link:hover .image,
    .portal-for-posts .item-link:focus-visible .image,
    .portal-for-posts .item-link:hover .copy,
    .portal-for-posts .item-link:focus-visible .copy,
    .portal-for-posts .item-link:hover .btn,
    .portal-for-posts .item-link:focus-visible .btn {
        transform: none;
    }

    .portal-for-albums .item-link::before,
    .portal-for-posts .item-link::before {
        display: none;
    }
}

/* end portal-for-posts fancy hover enhancements */




/* container queries */

@container (min-width: 30rem) {
    .portal {
        grid-template-columns: repeat(2, 1fr);
    }
}
@container (min-width: 45rem) {
    .portal.has-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .portal.has-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@container (min-width: 60rem) {
    .portal.has-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .portal.has-5 {
        grid-template-columns: repeat(3, 1fr);
    }    
    .portal.has-6 {
        grid-template-columns: repeat(3, 1fr);
    }    


}

/*--------------------------------------------------------------------------- */
/* MARK: Services Block
*/

.services-cards {
    align-items: start;
    container-type: inline-size;
    display: grid;
    gap: var(--space-xl);
    list-style: none;
    padding: 0;
}

.services-cards .item {
    align-items: center;
    display: grid;
    gap: var(--space-base);
}

.services-cards .heading {
    font-size: var(--text-lg);
    margin-top: var(--space-xs);
}

.services-cards .meta {
    line-height: var(--lh-tight);
}

.services-cards .desc {
    font-size: var(--text-sm);
}

.services-cards .image-wrap {
    aspect-ratio: 3/4;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.services-cards .image-wrap::after {
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.24) 48%, transparent 72%);
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-120%);
    transition:
        opacity 300ms ease,
        transform 950ms ease;
}

.services-cards .image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.services-cards .item:hover .image-wrap::after,
.services-cards .item:focus-within .image-wrap::after {
    opacity: 0.82;
    transform: translateX(120%);
}

@media (prefers-reduced-motion: reduce) {
    .services-cards .image-wrap::after {
        transition: none;
    }

    .services-cards .item:hover .image-wrap::after,
    .services-cards .item:focus-within .image-wrap::after {
        transform: translateX(-120%);
    }
}

/* start services cards subgrid alignment */

@supports (grid-template-rows: subgrid) {
    .services-cards .item {
        align-items: start;
        gap: var(--space-sm);
        grid-row: span 5;
        grid-template-rows: subgrid;
    }
}

/* end services cards subgrid alignment */

/* start services cards entrance animation */

@media (prefers-reduced-motion: no-preference) {
    .services-cards .item {
        animation: services-card-enter 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
        opacity: 0;
    }

    .services-cards .item:nth-child(1) {
        animation-delay: 100ms;
    }

    .services-cards .item:nth-child(2) {
        animation-delay: 200ms;
    }

    .services-cards .item:nth-child(3) {
        animation-delay: 300ms;
    }

    .services-cards .item:nth-child(4) {
        animation-delay: 400ms;
    }

    .services-cards .item:nth-child(5) {
        animation-delay: 500ms;
    }

    .services-cards .item:nth-child(6) {
        animation-delay: 600ms;
    }

    .services-cards .item:nth-child(7) {
        animation-delay: 700ms;
    }

    .services-cards .item:nth-child(8) {
        animation-delay: 800ms;
    }
}

@keyframes services-card-enter {
    from {
        filter: blur(0.2rem);
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0);
    }
}

/* end services cards entrance animation */

/* table */

.services-table {
    border: var(--border);
    container-type: inline-size;
    display: grid;
    list-style: none;
    overflow: hidden;
    padding: 0;
}

.services-table .service {
    border-bottom: 1px solid var(--neutral-200);
    align-items: center;
    display: grid;
    font-size: var(--text-sm);
    gap: var(--space-sm);
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-areas: 
    "heading heading heading"
    "cost length book"
    ;
    padding: var(--space-sm);
}

.services-table .service:last-child {
    border-bottom: 0;
}
.services-table .service.active {
    background-color: var(--white);
}

.services-table .heading {
    font-family: 'font-primary';
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    grid-area: heading;
}
.services-table .heading a {
    color: var(--color-text);
    text-decoration-thickness: 1px;
}

.services-table .cost {
    grid-area: cost;
}
.services-table .length {
    grid-area: length;
}
.services-table .book {
    grid-area: book;
    text-align: right;
}

@container (min-width:  36rem) {
    .services-table .service {
        grid-template-columns: 3fr 1fr 1fr 1fr;
        grid-template-areas: 
        "heading cost length book"
        ;
    }
    .services-table :is(.cost, .length) {
        text-align: right;
    }
}


.services-mobile {
    display: grid;
    gap: var(--space-tiny);
}

.service.accordion > .question {
    align-items: center;
    font-size: var(--text-base);
    line-height: 1;
    padding: var(--space-sm);
}
.service.accordion > .answer {
    display: grid;
    gap: var(--space-base);
    padding: var(--space-sm);
}

.service.accordion > .answer .item {
    display: grid;
    gap: var(--space-xs)
}

.location-rates-grid .block-heading {
    font-size: var(--text-lg);
    letter-spacing: var(--ls-loose);
    text-transform: uppercase;
}


/*--------------------------------------------------------------------------- */
/* MARK: Albums / Lookbook / Photo Galleries
*/

.album {
    align-items: center;
    display: grid;
    gap: var(--space-xxl);
    grid-template-columns: repeat(1, 1fr);
    padding: 0;
}

.album .image {
    box-shadow: var(--shadow-card);
    margin-inline: auto;
    max-width: 48rem;
    transition: all 0.3s ease-out;
    width: 100%;
}


@container (min-width: 28rem) {
    .album {
        grid-template-columns: repeat(2, 1fr);
    }
    .album :nth-child(3n) {
        grid-column: 1 / -1;
    }

}


/*--------------------------------------------------------------------------- */
/* MARK: Blurbs Block
*/

.blurbs-block {
    display: grid;
    gap: var(--gutter);
    row-gap: var(--space-huge);
}

.blurb {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
}

.blurb .icon {
    aspect-ratio: 1;
    margin-inline: auto;
    position: relative;
    width: var(--space-xxl);
}

.blurb .icon svg {
    aspect-ratio: 1;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 2;
}

.blurb .heading {
    font-size: var(--text-md);
    letter-spacing: var(--ls-looser);
    margin-top: var(--space-md);
    text-transform: uppercase;
}

.blurb .text {
    margin-bottom: var(--space-base);
}

.blurb .btn {
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;

    font-size: var(--text-sm);
    margin-top: auto;
    margin-inline: auto;
    padding: 0 0 var(--space-xs) 0;
    width: auto;
}


/*--------------------------------------------------------------------------- */
/* MARK: Image Block
*/

.image-block img {
    aspect-ratio: var(--ratio);
    height: auto;
    object-fit: contain;
    width: 100%;
}
.image-block img[data-crop=""] {
    object-fit: cover;
}

.op-right-top          { object-position: right top;       }
.op-right-center       { object-position: right center;    }    
.op-right-bottom       { object-position: right bottom;    }
.op-center-top         { object-position: center top;      }
.op-center-center      { object-position: center center;   }
.op-center-bottom      { object-position: center bottom;   }
.op-left-top           { object-position: left top;        }
.op-left-center        { object-position: left center;     }
.op-left-bottom        { object-position: left bottom;     }

/*--------------------------------------------------------------------------- */
/* MARK: Gallery Block
*/

.gallery-block .gallery {
    --auto-grid-min-size: 8rem;
    --auto-grid-max-columns: 4;
    --auto-grid-gap: var(--space-sm);
    align-items: center;
    list-style: none;
    padding: 0;
}
.gallery-block .gallery img {
    aspect-ratio: var(--ratio);
    background-color: var(--white);
    height: auto;
    object-fit: contain;
    width: 100%;
}
.gallery-block .gallery img[data-crop=""] {
    object-fit: cover;
}

/*--------------------------------------------------------------------------- */
/* MARK: Accordions Block / FAQs
*/

summary {
    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
}

.accordions {
    display: grid;
    gap: var(--space-xs);
}

/* details element */
.accordion {
    background-color: var(--page-title-background);
}
.accordion[open] {
    background-color: var(--black);
    color: var(--white);
}

/* summary element */
.accordion > .question {
    display: flex;
    font-size: var(--text-base);
    justify-content: space-between;
    list-style: none;
    padding: var(--space-base);
    position: relative;
}
.accordion > .question::after {
    content: '+';
    font-family: 'font-primary';
    font-style: normal;
    text-align: right;
}
.accordion[open] > .question::after {
    content: '×'
}

.accordion > .question::-webkit-details-marker {
    display: none;
}

.accordion > .answer {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-base);
}

/* start native details accordion animation */

@supports selector(details::details-content) {
    @media (prefers-reduced-motion: no-preference) {
        .accordion-animated::details-content {
            opacity: 0;
            transform: translateY(-0.25rem);
            transition:
                opacity 240ms ease,
                transform 240ms ease,
                content-visibility 240ms allow-discrete;
        }

        .accordion-animated[open]::details-content {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    @media (prefers-reduced-motion: no-preference) {
        .accordion-animated {
            overflow: clip;
        }

        .accordion-animated::details-content {
            block-size: 0;
            transition:
                block-size 280ms ease,
                opacity 220ms ease,
                transform 240ms ease,
                content-visibility 280ms allow-discrete;
        }

        .accordion-animated[open]::details-content {
            block-size: auto;
        }
    }
}

/* end native details accordion animation */





/* let's DRY this one and use throughout blocks where it makes sense */
.block-heading {
    font-size: var(--text-xl);
    text-align: center;
}

/*--------------------------------------------------------------------------- */
/* MARK: Location Pages
*/

.mobile-travel-policy-block {
    border: var(--border);
    padding: var(--space-xl);
}

.mobile-travel-policy-block__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mobile-steps-block {
    align-items: start;
    display: grid;
    gap: var(--space-lg);
}

.mobile-steps-block__intro {
    display: grid;
    gap: var(--space-base);

}

.mobile-steps-block__list {
    align-items: start;
    display: grid;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
}

.mobile-steps-block__item {
    align-content: start;
    background-color: var(--black);
    color: var(--white);
    display: grid;
    gap: var(--space-sm);
    height: 100%;
    padding: var(--space-md);
}

.mobile-steps-block__item .number {
    color: var(--base-200);
    font-family: 'font-secondary', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-size: var(--text-xxl);
    line-height: var(--lh-tighter);
    margin-bottom: var(--space-xs);
}

.mobile-steps-block__item:nth-child(2) .number {
    color: var(--accent-300);
}
.mobile-steps-block__item:nth-child(3) .number {
    color: var(--blush-300);
}

.mobile-steps-block__item h3 {
    font-family: 'font-primary';
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-loose);
    line-height: var(--lh-tight);
    text-transform: uppercase;
}



.columns .column > * + .mobile-areas {
    margin-top: var(--space-lg);
}

.mobile-areas {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-area {
    aspect-ratio: 1;
    background-color: var(--black);
    display: grid;
    grid-template-areas: "stack";
}
.mobile-area.is-active {
    background-color: var(--accent-800);
}
.mobile-area > * {
    grid-area: stack;
    height: 100%;
    width: 100%;
}

.mobile-area .link {
    color: var(--white);
    display: grid;
    overflow: hidden;
    place-items: center;
    position: relative;
    text-decoration: none;
    z-index: 2;
}
.mobile-area .heading {
    text-transform: uppercase;
    letter-spacing: var(--ls-loose);
}
.mobile-area .image {
    filter: grayscale(1) contrast(0.8) brightness(0.8);
    position: relative;
    z-index: 1;
}

.mobile-area:hover .image {
    filter: grayscale(0) contrast(1) brightness(0.8);
}

/* start mobile area portal hover enhancements */

.mobile-area {
    isolation: isolate;
    overflow: hidden;
    transform: translateY(0);
    transition:
        box-shadow 300ms ease,
        transform 300ms ease;
}

.mobile-area::before,
.mobile-area::after {
    content: '';
    grid-area: stack;
    pointer-events: none;
    position: relative;
}

.mobile-area::before {
    background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.26) 48%, transparent 70%);
    opacity: 0;
    transform: translateX(-120%);
    transition:
        opacity 300ms ease,
        transform 850ms ease;
    z-index: 3;
}

.mobile-area::after {
    background:
        linear-gradient(180deg, transparent 18%, rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.68) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 42%);
    opacity: 0.74;
    transition: opacity 300ms ease;
    z-index: 2;
}

.mobile-area.is-active {
    box-shadow: inset 0 0 0 4px var(--btn-bg-hover);
}

.mobile-area.is-active::after {
    background:
        linear-gradient(180deg, rgba(248, 195, 187, 0.1) 0%, rgba(0, 0, 0, 0.28) 58%, rgba(0, 0, 0, 0.78) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 42%);
    opacity: 0.96;
}

.mobile-area.is-active .heading::after {
    background-color: var(--btn-bg-hover);
    content: '';
    display: block;
    height: 3px;
    margin: var(--space-xs) auto 0;
    width: var(--space-xxl);
}

.mobile-area .link {
    z-index: 4;
}

.mobile-area .image {
    transform: scale(1);
    transition:
        filter 450ms ease,
        transform 700ms ease;
}

.mobile-area:hover,
.mobile-area:focus-within {
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.18);
    transform: translateY(-0.375rem);
}

.mobile-area.is-active:hover,
.mobile-area.is-active:focus-within {
    box-shadow:
        inset 0 0 0 4px var(--btn-bg-hover),
        0 1.25rem 2.5rem rgba(0, 0, 0, 0.18);
}

.mobile-area:hover::before,
.mobile-area:focus-within::before {
    opacity: 1;
    transform: translateX(120%);
}

.mobile-area:hover::after,
.mobile-area:focus-within::after {
    opacity: 0.9;
}

.mobile-area:hover .image,
.mobile-area:focus-within .image {
    filter: grayscale(0) contrast(1.04) brightness(0.82);
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .mobile-area,
    .mobile-area::before,
    .mobile-area::after,
    .mobile-area .image {
        transition: none;
    }

    .mobile-area:hover,
    .mobile-area:focus-within,
    .mobile-area:hover .image,
    .mobile-area:focus-within .image {
        transform: none;
    }

    .mobile-area::before {
        display: none;
    }
}

/* end mobile area portal hover enhancements */


@container (min-width: 42rem) {
    .mobile-steps-block {
        grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.25fr);
    }
    .mobile-areas {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container (min-width: 58rem) {
    .mobile-steps-block__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@container (min-width: 82rem) {
    .mobile-areas {
        grid-template-columns: repeat(5, 1fr);
    }

}





/*--------------------------------------------------------------------------- */
/* MARK: Map Block
*/

.map-block {
    background-color: var(--white);
    border: var(--border);
    height: 100%;
}
.map-block iframe {
    height: 100%;
    min-height: 16rem;
    min-width: 100%;
    width: 100%;
}

/*--------------------------------------------------------------------------- */
/* MARK: Eyebrow Block
*/

.eyebrow-block {

}

/*--------------------------------------------------------------------------- */
/* MARK: Lede Block
*/

.lede-block {
    
}

/*--------------------------------------------------------------------------- */
/* MARK: Posts & Blog
*/

.post-byline {
    background-color: var(--black);
    color: var(--white);
    flex-direction: row;
    justify-content: center;
    padding: var(--space-base) var(--gutter);
}

/*--------------------------------------------------------------------------- */
/* MARK: Forms
*/

.uniform__potty {
    position: absolute;
    left: -9999px;
}

.rtbform {
    container-type: inline-size;
    display: grid;
    gap: var(--space-xl);
    line-height: 1.309;
    text-align: left;
}

.rtbform legend,
.rtbform fieldset {
    border: 0;
    display: block;
    padding: 0;
    width: 100%;
}

.rtbform fieldset {
    display: grid;
    gap: var(--space-md);
}

.rtbform legend {
    font-family: 'font-secondary';
    font-size: var(--text-xl);
    margin-bottom: var(--space-base);
}

.rtbform :is(
    textarea,
    [type="text"],
    [type="search"],
    [type="number"],
    [type="email"],
    [type="tel"],

    ) {
    background: var(--white);
    border: var(--border);
    border-radius: 0;
    color: var(--black);
    font-family: inherit;
    font-size: inherit;
    padding: var(--space-sm);
}

.rtbform textarea {
    min-height: 8rem;
}

.rtbform *::placeholder {
    color: var(--gray-300);
}

.rtbform label {
    cursor: pointer;
    display: block;
    font-size: var(--text-base);
}

.rtbform select {
    background-color: var(--white);
    border: var(--border);
    padding: var(--space-sm);
}

.rtbform .checkboxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.rtbform .checkboxes label {
    border: var(--border);
    background-color: var(--white);
    font-size: var(--text-base);
    padding: var(--space-base);
}

.rtbform input[type="file"] {
    background-color: var(--white);
    border: var(--border);
    font-size: var(--text-sm);
    padding: var(--space-xs);
}

.rtbform .checkboxes label:has(input:checked):nth-child(1) {
    background-color: var(--accent-200);
}
.rtbform .checkboxes label:has(input:checked):nth-child(2) {
    background-color: var(--blush-200);
}
.rtbform .checkboxes label:has(input:checked):nth-child(3) {
    background-color: var(--base-200);
}
.rtbform .checkboxes label:has(input:checked):nth-child(4) {
    background-color: var(--neutral-200);
}

.rtbform .checkbox-label {
    align-items: center;
    background-color: var(--white);
    border: var(--border);
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.rtbform .checkbox-label input {
    min-width: 2.25rem;
}


.rtbform .checkbox-label:has(input:checked) {
    background-color: var(--accent-100);
}


.rtbform .help {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.form-pairs {
    align-items: start;
    display: grid;
    gap: var(--space-md);
}

.rtbform > fieldset:last-of-type .form-pairs {
    align-items: end;
}

.form-pair {
    display: grid;
    gap: var(--space-xs);
}

@container (min-width: 72rem) {
    .form-pairs {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-pairs.offset {
        grid-template-columns: 1fr 2fr;
    }
    .form-pairs.trio {
        grid-template-columns: repeat(3, 1fr);
    }
    .form-pairs.trio .help {
        grid-column: 1 / -1;
    }
    .rtbform .btn {
        justify-self: end;
    }
}

/*--------------------------------------------------------------------------- */
/* MARK: Utility Classes
*/

.grayscale {
    filter: grayscale(1);
}

.skiplink {
	position: absolute;
	transform: translateX(-100%);
	background-color: white;
	z-index: 10;
	left: 0;
	top: 0;
	padding: var(--space-base);
}
.skiplink:focus {
    transform: translateX(0);
}

.trim > :first-child    { margin-top: 0; }
.trim > :last-child     { margin-bottom: 0; }

.screen-reader-text     { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

.text-left                      { text-align: left; }
.text-right                     { text-align: right; }
.text-center                    { text-align: center; }

.text-xxl                       { font-size: var(--text-xxl); }
.text-xl                        { font-size: var(--text-xl); }
.text-lg                        { font-size: var(--text-lg); }
.text-md                        { font-size: var(--text-md); }
.text-base                      { font-size: var(--text-base); }
.text-sm                        { font-size: var(--text-sm); }

.list-none                      { list-style: none; padding-left: 0; }

.justify-content-start          { justify-content: start; }
.justify-content-center         { justify-content: center; }
.justify-content-end            { justify-content: end; }

.justify-items-start            { justify-items: start; }
.justify-items-center           { justify-items: center; }
.justify-items-end              { justify-items: end; }

.align-items-center             { align-items: center; }
.align-items-end                { align-items: end; }
.align-items-start              { align-items: start; }

.max-narrow                     { max-width: var(--max-narrow); }
.max-post                       { max-width: var(--max-post); }
.max-content                    { max-width: var(--max-content); }
.max-wide                       { max-width: var(--max-wide); }

.none                           { display: none; }

.spacer {
    display: block;
    height: calc( 1 * var(--space-huge) );
}

.swatches {
    display: grid;
    gap: var(--space-xs);
}

.swatch-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.swatches .swatch {
    font-size: 12px;
    padding: var(--space-xxl) var(--space-base);
}

.all-images {
    background-color: var(--site-bg);
    border: var(--border);
    margin-inline: auto;
    margin-block: var(--space-lg);
    max-width: 42rem;
    padding: var(--space-md);    
}

.all-images-item {
    border-top: var(--border);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
}

.all-images-item:first-of-type {
    border: 0;
    margin-top: 0;
    padding-top: 0;
}

.all-images input[type=text] {
    border-width: 1px;
    font-size: 16px;
    padding: var(--space-xs);
    width: 100%;
}

.all-images ol ol {
    padding-left: 0;
}

.all-images label {
    display: none;
}

.all-images img {
    width: 200px;
}
.all-images li {
    padding-top: var(--space-sm);
}