.hero-section {
    pointer-events: none;
    /* margin-bottom: -10vw; */
}
.hero {
    display: grid !important;
    gap: calc(var(--wp--preset--spacing--resp) * 4);
    
}
.hero .hero-content-a {
    align-self: end;
    gap: calc(var(--wp--preset--spacing--resp) * 2);
    min-width: calc(var(--wp--preset--font-size--5-x-large) * 8);
    justify-content: end;
    min-height:50vh;
}
.hero .hero-content-b > div{
    align-self: flex-end;
    min-height: 30vh;
    justify-content: flex-start;
}
.hero h1 {
    display: flex;
    flex-direction: column;
    gap: .05em;
}
.hero h1 > span {
    display: inline-block;
    font-size:calc(1em + 16px);
    font-weight:900 ;
    font-style: italic;
    letter-spacing: -.05em;
    text-transform: uppercase;
    line-height: 1.1;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}
/* Target Firefox only */
@supports (-moz-appearance: none) {
    /* Firefox-only styles */
  .hero h1 > span  {
    height: .9em;
    margin-top: -.2em; 
  }
}

 .hero h1 .split-char  {
    overflow:hidden;
    font-size: inherit;
    line-height: 1;
    padding-bottom: .03em;
    padding-top: 0.03em;
    padding-right:  0.15em; 
    margin-right: -0.15em;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    transform-origin: center center;
}
.hero h1 .split-char .char-inner {
    display:inline-block;
}
.hero h1 > span:nth-child(2) {
    padding-left:1.1em;
}

.hero h1 > span:last-child {
    font-weight: 400;
    font-size: var(--wp--preset--font-size--large);
    
    text-transform: uppercase;
    align-self: flex-end;
}
.hero .tagline {
    font-weight:450;
    font-size:clamp(16px, 1.145vw, 22px) !important;
    padding-right: var(--wp--preset--spacing--70);
}
.hero .cta  {
    align-self: flex-end;
    position:relative;
    pointer-events: auto;
}
.hero .cta p {
    color:var(--wp--preset--color--base);
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.hero .cta img {
    --right:0px;
    height:90%;
    width:auto;
    aspect-ratio: 1;
    position:absolute;
    right: calc(var(--right) - var(--wp--preset--spacing--20));
    transform: translateX(100%);
    transition: right .2s ease-out;;
}
.hero .cta:hover img {
    --right:-8px;
}
.hero .location p {
    /* text-box-edge: cap alphabetic;
    text-box-trim: trim-both; */
    letter-spacing: -.03em;;
}
.hero .square {
    background-color:var(--wp--preset--color--contrast);
    background: content-box;
    width:8px;
    height:8px;
}
.values * {
    box-sizing: border-box;
}
svg {
  display: block;
  
}
.values .wrapper {
    padding-top: 13vw;
    padding-bottom:11vw;
}
.values .wrapper .content {
    position:relative;
    z-index:3;
}
.values .custom-bgr {
    --parallaxY:0vw;
    bottom:calc(0px + var(--parallaxY)) !important;
    height:100%;
    width:100%;
}
.values .custom-bgr {
    flex-grow:1;
    display:flex;
}
.values .expand {
    position:relative;
    height:100%;
    flex:1 1 auto;
}
.values .svg-container-top svg.main {
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    margin-bottom: -3px;
    height: 100%;
    width: 100%;
    /* z-index:1; */
}
.values .svg-container-top svg.shadow {
    --height-extra:20px;
    position:absolute;
    /* top:-30px; */
    left:0px;
    right:0px;
    bottom:0px;
    height: calc( 100% + var(--height-extra));
    width: 100%;
    /* z-index:0; */
}
.values .svg-container-top svg.stroke {
    position:absolute;
    top:25px;
    left:0px;
    right:0px;
    /* bottom:0px; */
    height: 100%;
    width: 100%;
    
}
.values .svg-container-bottom svg.main {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    margin-top: -3px;
    height: 100%;
    width: 100%;
}
.values .svg-container-bottom svg.shadow-bottom {
    --height-extra:20px;
    position:absolute;
    /* top:-30px; */
    left:0px;
    right:0px;
    top:0px;
    height: calc( 100% + var(--height-extra));
    width: 100%;
}
.values .svg-container-bottom svg.stroke {
    position:absolute;
    /* top:-25px; */
    left:0px;
    right:0px;
    bottom:25px;
    height: 100%;
    width: 100%;
}
.values .svg-container-top {
    --height:17.39vw;
    height:var(--height);
    width:100%;
    margin-bottom:-3px;
    flex:0 0 auto;
}
.values .svg-container-bottom {
    --height:17.717vw;
    height:var(--height);
    width:100%;
    flex:0 0 auto;
}
.values .svg-container-top .fill {
    width:100%;
    height:100%;
    object-fit: fill;
    background-repeat: no-repeat;
    background-size: contain;
}
.values .svg-container-bottom .fill {
    width:100%;
    height:100%;
    object-fit: fill;
    background-repeat: no-repeat;
    background-size: contain;
}
.values .values-container {
    padding-left:5.15vw;
}
.values .values-container .value-card {
    flex-direction:row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--wp--preset--spacing--60);
}
.values .values-container .value-card h3 {
    font-size: var(--wp--preset--font-size--4-x-large);
    font-weight:900 ;
    font-style: italic;
    letter-spacing: -.03em;
    text-transform: uppercase;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}
.values .values-container .value-card p {
    font-size:var(--wp--preset--font-size--small);
   text-box-edge: cap alphabetic;
   text-box-trim: trim-both;
   line-height:1.2;
    max-width: 22em;
    text-transform: uppercase;
}
.values .circle {
    border-radius:5000px;
    width:clamp(15px, 1.041vw, 20px);
    height:clamp(15px, 1.041vw, 20px);
    background-color:var(--wp--preset--color--accent-6);
}
.work .title-container {
    overflow: hidden;;
}
.work .headings-track {
    transition: transform 0.5s ease-in-out;
}
.work .title-container h3 {
    font-size: var(--wp--preset--font-size--4-x-large) !important;
    letter-spacing: -.03em;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
     font-weight:900 ;
    font-style: italic;
    letter-spacing: -.05em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity:30%;
    transition: opacity 0.5s ease-in-out, background-color 0.2s ease-in-out;
}

.work .title-container h3.active {
    opacity:100%;
    background-color: var(--wp--preset--color--base-2);
    border-radius: 0px 8px 8px 0px;
}

.work .btn-left img, .work .btn-right img{
   width:clamp(24px, 1.25vw, 40px);
   height:clamp(24px, 1.25vw, 40px);
    transition: transform .1s ease-in-out;
}
.work .btn-left:hover img, .work .btn-right:hover img {
    transform: scale(1.1);
}
.work .btn-left, .work .btn-right {
    --hover-transform: 5%;
    --btn-margin:calc( (100vw - 800px) / 4 );
    box-sizing: border-box;
    aspect-ratio: 1;
    display:inline-flex;
    padding: var(--wp--preset--spacing--50);
    border-radius:5000px;
    background-color: var(--wp--preset--color--contrast);
    top:50%;
    transform: translateY(-50%);
    z-index: 2;
    box-shadow: 0px 0px 0px hsl(from var(--wp--preset--color--accent-2) h s l / 0);
    transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out;
}
.work .btn-left:hover, .work .btn-right:hover {
    cursor: pointer;
    box-shadow: -5px 5px 0px hsl(from var(--wp--preset--color--accent-2) h s l / 0.5);
    
}
.work .btn-left:focus, .work .btn-right:focus {
    outline: solid 2px ;
}
.work .btn-left {
    transform:translate(-50%, -50%);
    left:var(--btn-margin);
    padding-right: calc(var(--wp--preset--spacing--50) + 6px);
    
}
.work .btn-left:hover {
    /* transform: translate( calc( -50% + var(--hover-transform) ), calc( -50% - var(--hover-transform))); */
}
.work .btn-right {
    transform:translate(50%, -50%);
    right:var(--btn-margin);
    padding-left: calc(var(--wp--preset--spacing--50) + 6px);
   
}
.work .btn-right:hover {
     /* transform: translate( calc( 50% + var(--hover-transform) ), calc( -50% - var(--hover-transform))); */
}
.work .tms-carousel-wrapper {
	overflow-x: clip;
	/* flex: 1; */
}
.work .carousel-track {
    transition: transform 0.5s ease-in-out;
}
.work .carousel-track > * {
    flex-shrink: 0;
    width:100vw;
    /* height:451px; */
    /* max-width:1080px; */
    display:flex;
}
.work .carousel-item .embed, .work .carousel-item video {
    height:100%;
    aspect-ratio:1920/1080;
    /* width: 100%; */
    margin-left: auto;
    margin-right: auto;
    display:inline-flex;
    justify-content: center;
    border-radius: 16px;
    max-width: min(800px, 90vw);
}
.work .carousel-item .embed video {
    width:unset !important;
    border-radius: 16px;
}
.work .carousel-item figure {
 
    padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
    border-radius: var(--wp--preset--spacing--40);
}
.work .carousel-item figure img {
    display:block;
}

.contact {
    pointer-events: none;
}
.contact h2 {
    display:flex;
    flex-direction: column;
    gap:var(--wp--preset--spacing--10);
    
}
.contact h2 span {
    font-size:var(--wp--preset--font-size--3-x-large);
    font-weight:900 ;
    font-style: italic;
    letter-spacing: -.05em;
    text-transform: uppercase;
    line-height: 1;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.contact h2 span:nth-child(2) {
    padding-left:1.1em;
    font-size:var(--wp--preset--font-size--4-x-large);
}
.contact .cta-container {
    filter:drop-shadow(-10px 8px 0px var(--wp--preset--color--shadow));
}
.contact .cta-container svg  {
    height: 100%;
    width: 100%;
    position: absolute;
    left:0px;
    transform:rotate(-4deg);
}
.contact .cta {
    pointer-events: auto;
}
.contact .cta img {
    position:relative;
    height:80%;
    width:70px;
    aspect-ratio: 1 !important;
    transform: translateX(0%); /* override the hero */
}

.contact .grid-left, .contact .grid-right {
    display:grid;
    grid-template-columns: 1fr 1fr; /* two equal-width columns */
    grid-template-rows: 1fr 1fr;    /* two equal-height rows */
}
.contact .wrapper {
    width:100%;
    gap:auto;
}
.contact .grid-item {
    --grid-item--length:122px;
    width:var(--grid-item--length);
    height:var(--grid-item--length);
    /* background-color:var(--wp--preset--color--base-2); */
}
.contact .grid-left .grid-item:first-child {
    border-top-right-radius: 8px;
}
.contact .grid-left .grid-item:last-child {
    border-radius: 8px;
    border-top-left-radius:0px;
}
.contact .grid-right .grid-item:nth-child(2) {
    border-top-left-radius: 8px;
}
.contact .grid-right .grid-item:nth-child(3) {
    border-radius: 8px;
    border-top-right-radius: unset;
}
@media (max-width: 1200px) {
     .work .btn-left, .work .btn-right {
        --btn-margin:25vw;
        top:50%;
        z-index: 2;
        top:100% !important;
        transform: translateY(50%);
    }
}
@media (max-width: 1000px) {
    .hero .wrapper {
        /* align-items: center; */
       
    }
    .hero .hero-content > div:last-child {
        align-self: center;
        gap: var(--wp--preset--spacing--40);
    }
    .hero .tagline {
        padding-right:0px;
        align-items: center !important;
    }
    .hero .tagline p {
        text-align: center !important;
    }
    .hero .cta {
        align-self: center;
    }
    .values .values-container {
        padding-left: unset;
    }
    .values .circle {
        margin-top: unset !important;
        margin-bottom: unset !important;
    }
    .values .values-container .value-card  {
        gap: var(--wp--preset--spacing--40) !important;
    }
    /* .hero h1 > span {
        font-size:calc(1em + 12px);
    }
    .hero h1 > span:last-child {
        font-size: var(--wp--preset--font-size--medium);
    } */
    .values .values-container .value-card {
        flex-direction: column !important;
        text-align: center;
    }
    .values .values-container .value-card p {
        /* max-width: unset; */
    }
}
@media (max-width: 600px) {
   .work .btn-left, .work .btn-right {
        padding: var(--wp--preset--spacing--40);
    }
   
    .contact h2 {
        align-items: center;;
    }
     .contact h2 span {
        padding-left: unset !important;
     }
     .contact > :nth-child(2) {
            margin-top: var(--wp--preset--spacing--100) !important;
     }
}