@charset "UTF-8";

@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
    -webkit-font-smoothing: subpixel-antialiased;
}

/************************************************************/

/* Variables */

:root {
    /* Colors */
    --beige10: #FFFDFA;
    --beige20: #FFFAF2;
    --beige60: #F2EDE6;
    --beige80: #E5E1DA;
    --beige100: #D9D5CE;
    --dark60: rgba(20,12,10,.30);
    --dark80: rgba(20,12,10,.65);
    --dark90: rgba(20,12,10,.80);
    --dark100: #1A1817;
    --highlight: rgba(242,222,0,.3);
    --pointone: #218241;
    --farmtogether: #043A35;
    --docusign: #0069EC;
    --sling: #00B2F2;
    --roku: #6F2596;
    
    /* Spacing */
    --sp12: 12px;
    --sp18: 18px;
    --sp24: 24px;
    --sp36: 36px;
    --sp48: 48px;
    --sp60: 60px;
    --sp96: 96px;
    --sp120: 120px;
    
    /* Border radius */
    --radius36: 36px;
    --radius48: 48px;
        
    /* Transitions */
    --tran: all 0.15s ease-in-out;
}

/************************************************************/

/* Fonts */

.fine-print {
    font-size: 18px;
    line-height: normal;
}

.body-sm {
    font-size: 20px;
    line-height: normal;
}

.body-lg {
    font-size: 24px;
    line-height: normal;
}

.title-sm {
    font-size: 30px;
    line-height: normal;
}

.title-lg {
    font-size: 36px;
    line-height: normal;
}

.headline-sm {
    font-size: 42px;
    line-height: normal;
}

.emoji {
    font-size: 48px;
    line-height: normal;
}

.headline-lg {
    font-size: 60px;
    line-height: normal;
}

.bold {
    font-weight: 500;
}

.italic {
    font-style: italic;
}

.underlined {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.u-pointone {
    text-decoration-color: var(--pointone);
}

.u-farmtogether {
    text-decoration-color: var(--farmtogether);
}

.u-sling {
    text-decoration-color: var(--sling);
}

.u-roku {
    text-decoration-color: var(--roku);
}

.u-docusign {
    text-decoration-color: var(--docusign);
}

.highlight {
    background-color: var(--highlight);
}

.dark60 {
    color: var(--dark60);
}

.dark80 {
    color: var(--dark80);
}

/************************************************************/

/* Components */

.button {
    width: max-content;
    height: 60px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp18);
    font-size: 24px;
    font-weight: 500;
    border-radius: 10000px;
    padding: 0 24px;
    transition: var(--tran);
}

.button svg {
    transition:  var(--tran);
}

.btn-outlined-light {
    border: 2px solid var(--beige20);
    color: var(--beige20);
}

.btn-outlined-light:hover {
    background-color: var(--beige20);
    color: var(--dark100);
}

.btn-outlined-light:hover svg {
    fill: var(--dark100);
}

.btn-outlined-dark {
    border: 2px solid var(--dark100);
    color: var(--dark100);
}

.btn-outlined-dark:hover {
    background-color: var(--dark100);
    color: var(--beige20);
}

.btn-outlined-dark:hover svg {
    fill: var(--beige20);
}

.btn-filled-light {
    background-color: var(--beige20);
    color: var(--dark100);
}

.btn-filled-light:hover {
    background-color: var(--beige20) !important;
}

.btn-filled-light svg {
    fill: var(--dark100) !important;
}

.btn-filled-dark {
    background-color: var(--dark100);
    color: var(--beige20);
}

.btn-filled-dark:hover {
    background-color: var(--dark90);
}

.btn-outlined-light svg,
.btn-filled-dark svg {
    fill: var(--beige20);
}

.btn-outlined-dark svg,
.btn-filled-light svg {
    fill: var(--dark100);
}

.flowpage .button:hover {
    background-color: var(--beige100);
}

.flowpage .prevnext .button:hover {
    background-color: var(--beige80);
}

/************************************************************/

/* Reset */

* {
    padding: 0;
    margin: 0;
}

html {
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--beige60);
    font-family: "DM Sans", sans-serif;
    color: var(--dark100);
    line-height: 0;
    font-optical-sizing: auto;
    margin: 0;
    overflow-x: hidden;
}

::selection {
	background: var(--dark100);
    color: var(--beige20);
}
::-moz-selection {
	background: var(--dark100);
    color: var(--beige20);
}

img {
	border: 0;
}

a, input, textarea {
	outline: none;
}

a {
    color: var(--dark100);
    text-decoration: none;
    transition:  var(--tran);
}

a:hover {
    color: var(--dark90);
}

button {
    border: 0;
    background: none;
    cursor: pointer;
    outline: none;
}

.animate__animated.animate__fadeIn {
  --animate-duration: 1s;
}

.hide {
  display: none;
}

.show {
  display: block;
}

/************************************************************/

/* Elements */

nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin: var(--sp60) var(--sp48) var(--sp120);
}

nav .logo svg {
    transition: var(--tran);
}

nav .logo:hover svg {
    fill: var(--dark90);
}

header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp48);
    margin: 0 var(--sp48) var(--sp120);
}

header div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: var(--sp18);
}

header .photo-matt {
    width: 240px;
}

header .wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: wave 4s ease-in-out infinite;
  animation-delay: 2s; /* <-- 1 second delay before animation starts */
}
@keyframes wave {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(14deg); }
  20%  { transform: rotate(-8deg); }
  30%  { transform: rotate(14deg); }
  40%  { transform: rotate(-4deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); } /* 2s pause (50%–100%) */
}

header .wave2 {
  display: none;
  transform-origin: 60% 80%; /* makes it pivot around the base of the hand */
    transform: rotate(-38deg);
  animation: wave2 3s ease-in-out infinite;
    position: relative;
    top: -12px;
}
@keyframes wave2 {
  0%   { transform: rotate(-38deg); }
  10%  { transform: rotate(-28deg); }
  20%  { transform: rotate(-48deg); }
  30%  { transform: rotate(-28deg); }
  40%  { transform: rotate(-44deg); }
  50%  { transform: rotate(-30deg); }
  60%  { transform: rotate(-38deg); }
  100% { transform: rotate(-38deg); } /* pause */
}

header .headline-lg {
    line-height: 66px;
}

.value {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp48);
    border-top: 2px solid var(--beige80);
    padding: var(--sp120) var(--sp48) var(--sp48);
    margin: 0 var(--sp48) var(--sp120);
}

.value > div {
    flex: 1;
}

.value p:nth-child(1) {
    margin-bottom: 24px;
}

.value p:nth-child(2) {
    margin-bottom: 4px;
}

.work {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp48);
    margin: 0 var(--sp48) var(--sp120);
}

.work svg {
    fill: var(--beige20);
}

.img-placeholder {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.thumb-pointone {
    background-image: url("/img/thumb-pointone.png");
}

.thumb-pointone2 {
    background-image: url("/img/thumb-pointone2.png");
}

.thumb-pointone3 {
    background-image: url("/img/thumb-pointone3.png");
    background-size: 65%;
}

.thumb-pointone-purchase {
    background-image: url("/img/thumb-pointone-purchase.png");
}

.thumb-pointone-onboarding {
    background-image: url("/img/thumb-pointone-onboarding.png");
}

.thumb-farmtogether {
    background-image: url("/img/thumb-farmtogether.png");
}

.thumb-farmtogether2 {
    background-image: url("/img/thumb-farmtogether2.png");
}

.thumb-farmtogether3 {
    background-image: url("/img/thumb-farmtogether3.png");
    background-size: 65%;
}

.thumb-sling {
    background-image: url("/img/thumb-sling.png");
}

.thumb-roku {
    background-image: url("/img/thumb-roku.png");
}

.thumb-docusign {
    background-image: url("/img/thumb-docusign.png");
}

.work > div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp48);
}

.work > div:nth-child(1) > div {
    width: 50vw;
    height: calc(50vw - 168px); /* 168px = L/R margins 48px + half of 48px gap/24px + T/B padding 96px */
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp48);
    border-radius: var(--radius48);
    padding: var(--sp48);
}

.work > div:nth-child(2) > div {
    width: 33vw;
    height: calc(33vw - 106px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp24);
    border-radius: var(--radius48);
    padding: var(--sp24);
}

.pointone {
    background-color: var(--pointone);
}

.farmtogether {
    background-color: var(--farmtogether);
}

.work .sling {
    background-color: var(--sling);
}

.work .roku {
    background-color: var(--roku);
}

.work .docusign {
    background-color: var(--docusign);
}

.logos {
    padding: var(--sp48) 0;
    margin: 0 var(--sp48) var(--sp120);
}

.logo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp120);
}

.logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
}

.logo-item img {
    height: 50px;
    width: auto;
}

.stats {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp96);
    margin: 0 var(--sp96) var(--sp120);
}

.stats > div {
    flex: 1;
    text-align: center;
}

.bullets {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp96);
    background-color: var(--beige20);
    border-radius: var(--radius48);
    padding: 0 var(--sp96);
    margin: 0 var(--sp48) var(--sp120);
}

.bullets > div {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp36);
    padding: var(--sp96) 0;
}

.bullets > div > p:nth-child(1) {
    width: fit-content;
}

.bullets > div > div {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp24);
}

.bullets > div > div > div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp12);
}

.bullets .divider {
    width: 2px;
    height: auto;
    display: block;
    background-color: var(--beige60);
}

.recommendations {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: normal;
    row-gap: var(--sp120);
    column-gap: var(--sp96);
    padding-top: var(--sp48);
    margin: var(--sp48) var(--sp96) 168px;
}

.recommendations .quote {
    width: calc(50% - 48px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp24);
}

.recommendations .person {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp18);
}

.recommendations .img-person {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.contact {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp48);
    background-color: var(--beige80);
    border-radius: 10000px;
    padding: var(--sp48);
    margin: 0 var(--sp48) var(--sp48);
}

.contact > span {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap:var(--sp24);
}

/************************************************************/

/* Work Page */

.workpage nav {
    margin-bottom: var(--sp60);
}

.workpage header {
    flex-direction: column;
    align-items: center;
    gap: var(--sp24);
    border-top: 2px solid var(--beige80);
    text-align: center;
    padding: var(--sp120) 0 0;
}

.workpage header svg {
    width: 277.5px;
    height: 75px;
    fill: var(--dark100);
}

.images {
    height: 58vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp48);
    margin: 0 var(--sp48) 168px;
}

.images .images-1-contain {
    width:66vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp48);
}

.images .images-2-lg-right {
    width:33vw;
    background-color: var(--beige80);
}

.images .images-3-lg-top {
    height: calc(50% - 100px);
}

.images .images-4-contain {
    height: 50%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp48);
}

.images .images-4-contain > div {
    width: 50%;
}

.pointonepage .images .images-5-sm-left {
    background-color: var(--beige10);
    background-image: url("/img/thumb-pointone4.png");
    background-size: auto 90%;
    background-repeat: no-repeat;
    background-position: center;
}

.pointonepage .images .images-6-sm-mid {
    background-image: url("/img/thumb-pointone5.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.farmtogetherpage .images .images-5-sm-left {
    background-color: var(--beige10);
    background-image: url("/img/thumb-farmtogether4.png");
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.farmtogetherpage .images .images-6-sm-mid {
    background-image: url("/img/thumb-farmtogether5.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.images .images-2-lg-right,
.images .images-3-lg-top, 
.images .images-5-sm-left, 
.images .images-6-sm-mid {
    border-radius: var(--radius48);
    padding: var(--sp48);
}

.flows {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: 168px;
    margin: 0 var(--sp96) 168px;
}

.flows .flow {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp60);
}

.flows .flow .image {
    width: 33.5%;
}

.flows .flow .img-placeholder {
    height: unset;
    padding-bottom: 56.25%;
}

.flows .flow .copy {
    width: 66.5%;
}

.flows .flow .copy p:nth-child(1) {
    margin-bottom: 4px;
}

.flows .flow .copy p:nth-child(2) {
    margin-bottom: var(--sp36);
}

.flows .flow .copy a {
    display: inline-block;
}

.workpage .recommendations .quote {
    width: 100%;
}

.workpage .contact {
    width: calc(50vw - 168px);
    height: calc(50vw - 168px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp48);
    border-radius: var(--sp48);
}

.workpage .contact > span {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    text-align: center;
}

.workpage .endcap {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: normal;
    gap: var(--sp48);
    margin: 0 var(--sp48) var(--sp48);
}

.workpage .endcap > div {
    width: 50vw;
    height: calc(50vw - 168px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp48);
    border-radius: var(--radius48);
    padding: var(--sp48);
    margin: 0;
}

/************************************************************/

/* Flow Page */

.flowpage {
    background-color: var(--beige80);
}

.flowpage nav {
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: 4px;
    padding: 0 var(--sp60);
    margin: var(--sp24);
    position: relative;
    text-align: center;
}

.flowpage nav > a {
    position: absolute;
    top: calc(50% - 24px);
    left: 0;
}

.flowpage nav .button {
    width: 48px;
    height: 48px;
    justify-content: center;
    padding: 0;
}

.flowpage nav .button svg {
  transform: scaleX(-1);
}

.flowpage nav .pointonelogo {
    width: 110px;
    height: 30px;
    fill: var(--dark100);
}

.flowpage nav .farmtogetherlogo {
    width: 115px;
    height: 30px;
    fill: var(--dark100);
}

.flowpage nav .body-lg,
.flowpage .fine-print {
    font-size: 16px;
}

.flowpage .controls {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding-top: var(--sp24);
    margin:0 var(--sp24) var(--sp24);
    border-top: 2px solid var(--beige60);
}

.flowpage .controls .button,
.flowpage .carousel .button {
    width: 48px;
    height: 48px;
    justify-content: center;
    padding: 0;
}

.flowpage .controls .platform,
.flowpage .carousel .prevnext {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp12);
}

.flowpage .carousel .prevnext {
    gap: 4px;
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--beige60);
    border: 1px solid var(--dark60);
    border-radius: 10000px;
}

.flowpage .controls .platform svg {
    fill: var(--dark80);
}

.flowpage .carousel .prevnext > button:nth-child(1) svg {
  transform: scaleX(-1);
}

.flowpage .carousel .prevnext .index-indicator {
    font-size: 12px;
    color: var(--dark80);
    line-height: normal;
    text-align: center;
}

.flowpage .carousel .prevnext .index-indicator .index-current {
    border-bottom: 1px solid var(--dark80);
    padding-bottom: 3px;
    margin-bottom: 3px;
}

.flowpage .carousel {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp24);
    margin:0 var(--sp24) 80px;
}

.flowpage .carousel img {
    box-shadow: 0 4px 24px 0 rgba(26, 24, 23, 0.10);
}

.flowpage .carousel .mobile {
    max-width: 390px;
    width: 100%;
}

.flowpage .carousel .desktop {
    max-width: 1440px;
    width: 100%;
}

.flowpage .carousel .caption {
    text-align: center;
}

/************************************************************/

/* Responsive */

@media only screen and (min-width: 2100px) {
    
    .logo-row {
        gap: 180px;
    }

}

@media only screen and (min-width: 1729px) {
    
    .value {
        gap: var(--sp96);
    }
    
    .workpage .contact .title-lg {
        font-size: 48px;
    }

}

@media only screen and (max-width: 1502px) {
    
    .logo-row {
        max-width: 969px;
        margin: 0 auto;
        row-gap: var(--sp48);
    }

}

@media only screen and (max-width: 1065px) {
    
    .logo-row {
        max-width: 654px;
        margin: 0 auto;
    }

}

@media only screen and (max-width: 1024px) {
    
    .value {
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: normal;
        row-gap: var(--sp60);
        column-gap: var(--sp48);
    }

    .value > div {
        width: calc(50% - 24px);
    }
    
    .value p:nth-child(1) {
        margin-bottom: 12px;
    }
    
    .work > div:nth-child(1) > div {
        height: unset;
    }
    
    .work > div:nth-child(2) {
        flex-flow: row wrap;
    }
    
    .work > div:nth-child(2) > div {
        width: calc(50vw - 168px);
        height: calc(50vw - 168px);
        gap: var(--sp48);
        padding: var(--sp48);
    }
    
    .work > div:nth-child(1) .img-placeholder {
        padding-bottom:56.25%;
    }
    
    .stats {
        flex-direction: column;
    }
    
    .bullets {
        flex-direction: column;
        gap: unset;
        padding: 0;
    }
    
    .bullets > div {
        padding: var(--sp96);
    }
    
    .bullets .divider {
        width: auto;
        height: 2px;
    }
    
    .contact {
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--sp48);
        border-radius: var(--sp48);
    }

    .contact > span {
        flex-direction: column;
        gap: 0;
        text-align: center;
    }

    .workpage .images {
        height: unset;
    }

    .workpage .images .images-1-contain {
        width: calc(50vw - 72px);
    }
    
    .workpage .images .images-2-lg-right {
        width: calc(50vw - 108px);
        height: calc(50vw - 168px);
        background-color: var(--beige80);
    }

    .workpage .images .images-3-lg-top {
        height: calc(50vw - 168px);
    }

    .workpage .images .images-4-contain {
        width: calc(100vw - 96px);
        height: calc(50vw - 72px);
    }

    .workpage .images .images-4-contain > div {
        width: 50vw;
    }
    
    .thumb-pointone3,
    .thumb-farmtogether3 {
        background-size: contain;
    }
    
    .flows .flow {
        flex-flow: column nowrap;
        align-items: flex-start;
        gap: var(--sp60);
    }
    
    .flows .flow .image {
        width: 50%;
    }
    
    .flows .flow .copy {
        width: 100%;
    }
    
    .workpage .endcap > div {
        height: unset;
    }
    
    .workpage .endcap .img-placeholder {
        width: 100%;
        height: unset;
        padding-bottom:56.25%;
    }

}

@media only screen and (max-width: 878px) {
    
    .value {
        flex-direction: column;
    }
    
    .value > div {
        width: 100%;
    }
    
    .logo-row {
        gap: var(--sp60);
    }
    
    .recommendations .quote {
        width: 100%;
    }

}

@media only screen and (max-width: 844px) {
    
    .work > div {
        flex-direction: column;
    }
    
    .work > div:nth-child(1) > div {
        width: calc(100vw - 192px);
    }

    .work > div:nth-child(2) > div {
        width: 100vw;
        height: calc(100vw - 192px);
    }

    .workpage .images,
    .workpage .images .images-4-contain {
        height: unset;
        flex-flow: column nowrap;
    }
    
    .workpage .images .images-1-contain {
        width: 100%;
    }
    
    .workpage .images .images-4-contain > div,
    .workpage .images .images-2-lg-right {
        width: calc(100% - 96px);
    }
    
    .workpage .images .images-4-contain > div,
    .workpage .images .images-2-lg-right,
    .workpage .images .images-3-lg-top {
        height: calc(100vw - 192px);
    }
    
    .workpage .images .images-6-sm-mid {
        display: none;
    }
    
    .workpage .endcap {
        flex-flow: column nowrap;
    }
    
    .workpage .endcap > div {
        width: calc(100vw - 192px);
        height: unset;
    }
    
    .workpage .endcap .contact {
        order: 2;
        height: unset;
    }
    
    .workpage .endcap .farmtogther {
        order: 1;
    }

}

@media only screen and (max-width: 830px) {
    
    header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .flows .flow .image {
        width: 75%;
    }

}

@media only screen and (max-width: 750px) {
    
    .logo-row {
        max-width: 494px;
        margin: 0 auto;
    }

}

@media only screen and (max-width: 590px) {
    
    .logos {
        margin: 0 var(--sp24) var(--sp120);
;
    }

}

@media only screen and (max-width: 550px) {
    
    nav .underlined {
        text-decoration-thickness: 2px;
    }

    nav {
        margin: var(--sp24) var(--sp24) var(--sp96);
    }
    
    nav .body-lg {
        font-size: 20px;
    }
    
    .contact .title-lg,
    .workpage header .title-lg {
        font-size: 30px;
    }

    header .headline-lg {
        font-size: 47px;
    }
    
    header {
        gap: var(--sp36);
        margin: 0 var(--sp24) var(--sp96);
    }
    
    header .photo-matt {
        width: 180px;
    }
    
    .value {
        gap: var(--sp60);
        padding: var(--sp120) 0 0;
        margin: 0 var(--sp24) var(--sp120);
    }

    .work {
        gap: var(--sp24);
        margin: 0 var(--sp24) var(--sp120);
    }

    .work > div {
        gap: var(--sp24);
    }

    .work > div:nth-child(1) > div {
        width: calc(100vw - 96px);
        /*height: calc(100vw - 96px);*/
        gap: var(--sp36);
        border-radius: var(--radius36);
        padding: var(--sp24);
    }

    .work > div:nth-child(2) > div {
        width: 100vw;
        height: calc(100vw - 96px);
        gap: var(--sp24);
        border-radius: var(--radius36);
        padding: var(--sp24);
    }

    .stats {
        margin: 0 var(--sp24) var(--sp120);
    }    

    .bullets {
        gap: unset;
        border-radius: var(--radius36);
        padding: 0;
        margin: 0 var(--sp24) 168px;
    }

    .bullets > div {
        padding: var(--sp60) var(--sp36);
    }

    .bullets > div > div {
        gap: var(--sp18);
    }

    .recommendations {
        padding-top: unset;
        row-gap: var(--sp96);
        margin: 0 var(--sp24) 168px;
    }

    .contact {
        gap:var(--sp36);
        border-radius: var(--radius36);
        padding: var(--sp24);
        margin: 0 var(--sp24) var(--sp24);
    }
    
    .workpage nav {
        margin-bottom: var(--sp24);
    }
    
    .workpage header {
        padding-top: var(--sp96);
    }
    
    .workpage header svg {
        width: 231.25px;
        height: 62.5px;
    }
    
    .workpage .images {
        gap: var(--sp24);
        margin:0 var(--sp24) 168px;
    }
    
    .workpage .images .images-4-contain > div,
    .workpage .images .images-2-lg-right,
    .workpage .images .images-3-lg-top {
        height: calc(100vw - 96px);
    }
    
    .workpage .images .images-4-contain > div,
    .workpage .images .images-2-lg-right {
        width: calc(100% - 48px);
    }
    
    .workpage .images .images-1-contain,
    .workpage .images .images-4-contain {
        gap: var(--sp24);
    }
    
    .workpage .images .images-2-lg-right,
    .workpage .images .images-3-lg-top,
    .workpage .images .images-5-sm-left,
    .workpage .images .images-6-sm-mid {
        border-radius: var(--radius36);
        padding: var(--sp24);
    }
    
    .workpage .images .images-4-contain {
        width: unset;
    }
    
    .flows {
        padding: 0;
        margin: 0 var(--sp24) 168px;
    }
    
    .flows .flow  {
        gap: var(--sp36);
    }
    
    .flows .flow .image {
        width: 80%;
    }
    
    .workpage .quote .emoji {
        font-size: 36px;
    }
    
    .workpage .endcap {
        gap: var(--sp24);
        margin: 0 var(--sp24) var(--sp24);
    }
    
    .workpage .endcap > div {
        width: calc(100vw - 96px);
        gap:var(--sp36);
        border-radius: var(--radius36);
        padding: var(--sp24);
    }
    
    .flowpage .carousel {
        gap: var(--sp24);
        margin: 0 0 80px;
    }
    
    .flowpage .carousel .caption {
        padding: 0 var(--sp24);
    }

}

@media only screen and (max-width: 434px) {
    
    .logos {
        margin: 0 var(--sp12) var(--sp120);
    }
    
    .logo-row {
        gap: var(--sp36);
    }

}