/* scottcanevy.com - built stylesheet.
   Original 2022 sources (root/critical/local) concatenated in cascade
   order, with dead IE10 / old-WebKit prefixes stripped, followed by a
   clearly marked maintenance layer at the bottom. Edit this file. */


/*====================================================================
  root.css  - resets, type, navbar, interior hero, footer
  ====================================================================*/
/*Core Styles*/
/*Mobile*/
@media only screen and (min-width: 0em) {
  body {
    background: linear-gradient(-45deg, #ffebd1, #fbb59e);
  }
  :root {
    --primaryblue: #025373;
    --primarypurple: #BB4ED9;
    --secondarypurple: #756DA6;
    --primarygreen: #2A8C5E;
    --secondarygreen: #a2d989;
    --primaryred: #A60F1B;
    --bodytext: #262526;
    --white: #F2EEEB;
    --bluegradient: linear-gradient(-45deg, #025373, #756da6);
    --backgroundgradient: linear-gradient(-45deg, #ffebd1, #fbb59e);
  }
      body,
  html {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: 'Outfit', Helvetica, sans-serif;
    color: var(--bodytext);
    overflow-x: hidden;
  }
  *,
  *:before,
  *:after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  body {
    transition: background-color 0.3s;
  }
  .container {
    position: relative;
    width: 92%;
    margin: auto;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    color: var(--bodytext);
  }
  p,
  li,
  a {
    font-size: 1.125em;
    line-height: 1.5em;
    margin: 0;
  }
  p,
  li {
    color: var(--bodytext);
  }
  a:hover,
  button:hover {
    cursor: pointer;
  }
  .button-solid {
    font-size: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    width: auto;
    line-height: 3.57142857em;
    height: 3.57142857em;
    text-align: center;
    padding: 0 2.14285714em;
    position: relative;
    z-index: 1;
    border: 2px solid;
    border-color: var(--bodytext);
    background-color: transparent;
    white-space: normal;
    color: var(--bodytext);
    transition: color .3s;
            transition-delay: .1s;
  }
  .button-solid:hover {
    color: var(--white);
  }
  .button-solid:hover:before {
    width: 100%;
  }
  .button-solid:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--bluegradient);
    width: 0;
    transition: width .3s;
  }
  .button-light {
    font-size: 0.875em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    width: auto;
    line-height: 3.57142857em;
    height: 3.57142857em;
    text-align: center;
    padding: 0 2.14285714em;
    position: relative;
    z-index: 1;
    border: 2px solid;
    border-color: var(--white);
    background-color: transparent;
    color: var(--white);
    transition: color .3s;
            transition-delay: .1s;
  }
  .button-light:hover {
    color: var(--white);
  }
  .button-light:hover:before {
    width: 100%;
  }
  .button-light:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--primarygreen);
    width: 0;
    transition: width .3s;
  }
  .skip {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1111111;
  }
}
@media only screen and (min-width: 1024px) {
  body,
  html {
    padding: 0;
    margin: 0;
  }
}
@media only screen and (min-width: 2000px) {
  body,
  html {
    font-size: .85vw;
  }
}
/*Mobile - Top Drop Down */
@media only screen and (max-width: 1023px) {
  #navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    height: auto;
  }
  #navigation .background-color-div {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--white);
    width: 100%;
    height: 100%;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #navigation .container {
    padding: 0.8125em 0;
    width: 96%;
  }
  #navigation .logo {
    display: inline-block;
    height: 1.5em;
    width: auto;
  }
  #navigation .logo img {
    width: auto;
    height: 100%;
  }
  #navigation .hamburger-menu {
    position: absolute;
    right: 0em;
    border: none;
    height: 3em;
    width: 3em;
    z-index: 100;
    display: block;
    background: transparent;
    padding: 0;
    top: 50%;
            transform: translateY(-50%);
    transition: top .3s;
  }
  #navigation .hamburger-menu span {
    height: 2px;
    width: 1.875em;
    background-color: #000;
    display: block;
    position: absolute;
    left: 50%;
            transform: translateY(-50%);
    transition: background-color 0.3s;
  }
  #navigation .hamburger-menu span:before {
    content: '';
    position: absolute;
    display: block;
    height: 2px;
    width: 80%;
    background: #000;
    opacity: 1;
    top: -6px;
    left: 0;
    transition: width .3s, left .3s, top .3s, -webkit-transform .5s;
    transition: width .3s, left .3s, top .3s, transform .5s;
    transition: width .3s, left .3s, top .3s, transform .5s, -webkit-transform .5s;
  }
  #navigation .hamburger-menu span:after {
    content: '';
    position: absolute;
    display: block;
    height: 2px;
    width: 80%;
    background: #000;
    opacity: 1;
    top: 6px;
    left: 0;
    transition: width .3s, left .3s, top .3s, -webkit-transform .3s;
    transition: width .3s, left .3s, top .3s, transform .3s;
    transition: width .3s, left .3s, top .3s, transform .3s, -webkit-transform .3s;
  }
  #navigation #navbar-menu {
    position: fixed;
    right: 0;
    padding: 0;
    width: 100%;
    border-radius: 0 0 0.375em 0.375em;
    z-index: -1;
    overflow: hidden;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background-color: var(--white);
    top: 3em;
    padding-top: 0;
    height: 0;
    transition: height 0.3s, padding-top 0.3s, top 0.3s;
  }
  #navigation #navbar-menu ul {
    padding: 0;
            perspective: 700px;
  }
  #navigation #navbar-menu ul li {
    list-style: none;
    margin-bottom: 1.5em;
    text-align: center;
            transform-style: preserve-3d;
    opacity: 0;
            transform: translateY(-0.4375em) rotateX(90deg);
    transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, transform .5s;
    transition: opacity .5s, transform .5s, -webkit-transform .5s;
  }
  #navigation #navbar-menu ul li:nth-of-type(1) {
            transition-delay: .1s;
  }
  #navigation #navbar-menu ul li:nth-of-type(2) {
            transition-delay: .2s;
  }
  #navigation #navbar-menu ul li:nth-of-type(3) {
            transition-delay: .3s;
  }
  #navigation #navbar-menu ul li:nth-of-type(4) {
            transition-delay: .4s;
  }
  #navigation #navbar-menu ul li:nth-of-type(5) {
            transition-delay: .5s;
  }
  #navigation #navbar-menu ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-size: 1.1875em;
    text-align: center;
    display: inline-block;
    position: relative;
    font-weight: bold;
  }
  #navigation #navbar-menu ul li a.active:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.42105263em;
    background: var(--primaryblue);
    opacity: 1;
    bottom: 0.26315789em;
    border-radius: 0.21052632em;
    left: -0.31578947em;
    right: -0.31578947em;
    z-index: -1;
  }
  #navigation #navbar-menu.open {
    height: 12.5em;
    padding-top: 1.25em;
    z-index: -100;
  }
  #navigation #navbar-menu.open ul li {
    opacity: 1;
            transform: translateY(0) rotateX(0);
  }
}
/* Desktop */
@media only screen and (min-width: 64em) {
  ::-webkit-scrollbar-track {
    background-color: var(--white);
  }
  ::-webkit-scrollbar-track-piece {
    background-color: var(--white);
  }
  ::-webkit-scrollbar {
    width: 0.75em;
    background-color: var(--white);
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 0.625em;
    background: var(--primarygreen);
  }
  body.scroll #navigation .background-color-div {
    height: 100%;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  body.scroll #navigation #navbar-menu ul li a {
    color: var(--bodytext);
  }
  #navigation {
    width: 100%;
    height: 6.25em;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200000;
    padding: 0;
    display: flex;
            align-items: center;
  }
  #navigation .background-color-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    height: 0;
    transition: height .3s;
  }
  #navigation .container {
    max-width: 75em;
    display: flex;
            justify-content: flex-end;
            align-items: center;
  }
  #navigation .logo {
    margin-right: auto;
    height: 1.5em;
    width: auto;
  }
  #navigation .logo img {
    width: auto;
    height: 100%;
  }
  #navigation #navbar-menu ul {
    padding: 0;
    display: flex;
            justify-content: flex-end;
            align-items: center;
  }
  #navigation #navbar-menu ul li {
    list-style: none;
    margin-left: 1.875em;
    padding-top: 0.1875em;
  }
  #navigation #navbar-menu ul li a {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1875em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    color: var(--white);
    transition: color .3s;
  }
  #navigation #navbar-menu ul li a:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.31578947em;
    border-radius: 0.15789474em;
    background: var(--primarygreen);
    opacity: 1;
    bottom: 0.10526316em;
    z-index: -1;
    left: 0;
    width: 0%;
    transition: width .3s;
  }
  #navigation #navbar-menu ul li a:hover:before {
    width: 100%;
  }
  #navigation #navbar-menu ul li a.active:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 0.31578947em;
    background: var(--primaryblue);
    opacity: 1;
    bottom: 0.10526316em;
    border-radius: 0.15789474em;
    left: 0em;
    right: -0.31578947em;
    z-index: -1;
    transition: bottom .3s;
  }
  #navigation .hamburger-menu {
    display: none;
  }
}
/*-- -------------------------- -->
<---   Interior Page Header     -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #int-hero {
    display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
    position: relative;
    z-index: 1;
    min-height: 30vh;
    padding-top: 3.125em;
  }
  #int-hero:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .7;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #int-hero picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
  }
  #int-hero picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
       object-fit: cover;
  }
  #int-hero h1 {
    color: var(--white);
    font-size: 2.13333333em;
    text-align: center;
    margin: 0 auto;
    position: relative;
    width: 96%;
    max-width: 7.8125em;
  }
  #int-hero p {
    color: var(--white);
    text-align: center;
    max-width: 27.77777778em;
    margin: auto;
    padding: 1.77777778em;
    display: block;
    width: 96%;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #int-hero {
    font-size: 16px;
  }
  #int-hero h1 {
    font-size: 4em;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #int-hero {
    min-height: 18.75em;
    height: auto;
    padding-top: 11.25em;
            padding-block-end: 6.25em;
    background-attachment: fixed;
    font-size: inherit;
  }
}
/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .footer-top {
    display: flex;
            flex-direction: row;
        flex-wrap: nowrap;
            justify-content: center;
    width: 96%;
    max-width: 82.5em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -5.3125em;
    padding: 0;
  }
  #footer-bottom {
    background: var(--bluegradient);
    padding: 5.25em 0 1.25em;
    font-size: min(4vw, 1.2em);
  }
  #footer-bottom .left-section {
    margin: auto;
    margin-bottom: 3.125em;
    text-align: center;
  }
  #footer-bottom .left-section .logo {
    display: inline-block;
    margin: auto;
    width: auto;
    height: 1.5em;
    margin-bottom: 1.875em;
    text-align: center;
  }
  #footer-bottom .left-section .logo img {
    width: auto;
    height: 100%;
    display: block;
  }
  #footer-bottom .left-section p {
    font-size: 0.875em;
    line-height: 1.92857143;
    color: #fff;
    opacity: .9;
    text-align: center;
    width: 100%;
    width: 21.92857143em;
    margin: auto;
  }
  #footer-bottom .right-section {
    width: 96%;
    max-width: 25.4375em;
    margin: auto;
  }
  #footer-bottom .right-section .lists {
    display: flex;
            justify-content: space-between;
        flex-wrap: wrap;
    width: 96%;
    max-width: 19.1875em;
    margin: auto;
  }
  #footer-bottom .right-section .lists ul {
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
  }
  #footer-bottom .right-section .lists ul:nth-of-type(3) {
    margin-top: 3.125em;
  }
  #footer-bottom .right-section .lists ul:nth-of-type(3) li {
    display: flex;
            justify-content: flex-start;
            align-items: center;
    margin-bottom: 0.88888889em;
  }
  #footer-bottom .right-section .lists ul:nth-of-type(3) li:last-of-type {
    margin-bottom: 0;
  }
  #footer-bottom .right-section .lists ul li {
    list-style: none;
    margin-bottom: 0.66666667em;
    color: #fff;
    font-size: 1em;
    opacity: .9;
  }
  #footer-bottom .right-section .lists ul li a {
    text-decoration: none;
    color: #fff;
    line-height: 1.16666667;
    transition: color .3s;
  }
  #footer-bottom .right-section .lists ul li a:hover {
    color: var(--primary);
  }
  #footer-bottom .right-section .lists ul h2 {
    color: #fff;
    font-size: 1.125em;
    line-height: 1.16666667;
    margin-bottom: 2.05555556em;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
  }
  #footer-bottom .right-section .lists ul h2:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.11111111em;
    width: 5.38888889em;
    background: #EEBE76;
    opacity: 1;
    bottom: -0.88888889em;
    left: 0;
  }
  #footer-bottom .right-section .buttons {
    display: flex;
            justify-content: center;
  }
  #footer-bottom .right-section .button-solid {
    margin: 0;
    height: 2.94444444em;
    padding-top: 0.16666667em;
    width: 13.88888889em;
  }
  #footer-bottom .credit {
    color: #fff;
    width: 96%;
    margin: auto;
    text-align: center;
    margin-top: 6.25em;
    line-height: 2.25em;
    font-size: 1em;
  }
  #footer-bottom .credit a {
    color: var(--primary);
    text-decoration: none;
    font-size: 1em;
  }
  #footer-bottom .credit a:hover {
    text-decoration: underline;
  }
  #footer-bottom .credit .copyright {
    display: block;
    font-size: 1em;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #footer-bottom {
    font-size: min(1.2vw, 1em);
  }
  #footer-bottom .container {
    display: flex;
            flex-direction: row;
        flex-wrap: nowrap;
            justify-content: space-between;
    width: 96%;
    max-width: 82.5em;
    margin: auto;
    padding: 0;
  }
  #footer-bottom .left-section {
    width: 25.5625em;
    margin: 0;
    text-align: left;
  }
  #footer-bottom .left-section .logo {
    text-align: left;
    margin-left: 0;
    height: 1.5em;
  }
  #footer-bottom .left-section p {
    text-align: left;
    margin-left: 0;
  }
  #footer-bottom .right-section {
    margin: 0;
    width: 38.0625em;
    max-width: none;
  }
  #footer-bottom .right-section .lists {
    width: 96%;
    max-width: 48.0625em;
    margin: 0;
    max-width: initial;
  }
  #footer-bottom .right-section .lists ul:nth-of-type(3) {
    margin-top: 0;
  }
  #footer-bottom .right-section .lists ul:nth-of-type(3) li:first-of-type {
    margin-bottom: 0;
  }
  #footer-bottom .right-section .lists ul li a {
    position: relative;
  }
  #footer-bottom .right-section .lists ul li a:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.11111111em;
    width: 0%;
    background: var(--primary);
    opacity: 1;
    bottom: -0.16666667em;
    left: 0;
    transition: width .3s;
  }
  #footer-bottom .right-section .lists ul li a:hover:before {
    width: 100%;
  }
  #footer-bottom .right-section .buttons {
            justify-content: flex-start;
  }
  #footer-bottom .credit .copyright {
    display: inline-block;
  }
}


/*====================================================================
  critical.css - home + interior page hero type
  ====================================================================*/
/*-- -------------------------- -->
<---          Landing           -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .hero-new {
            order: 2;
    margin: auto;
    margin-top: 4.6875em;
    max-width: 38.1875em;
  }
  .hero-new h1 {
    font-weight: bold;
    font-size: min(12vw, 4em);
    color: var(--bodytext);
    text-align: center;
    line-height: 1.203125;
    margin: auto;
    width: 100%;
    max-width: 14.125em;
    margin-bottom: .5em;
    position: relative;
  }
  .hero-new h1:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.0625em;
    width: 1.515625em;
    background: var(--primaryblue);
    opacity: 1;
    bottom: -0.25em;
    left: 50%;
            transform: translateX(-50%);
  }
  .hero-new p {
    line-height: 1.55em;
    margin: auto;
    margin-bottom: .5em;
    color: var(--bodytext);
    width: 100%;
    text-align: center;
    max-width: 34.27777778em;
    opacity: 1;
  }
}
/* Small Desktop */
@media only screen and (min-width: 1300px) {
  .hero-new {
    padding-top: 17.0625em;
    padding-bottom: 19.1875em;
  }
}


/*====================================================================
  local.css - carousels, galleries, side-by-side sections
  ====================================================================*/
/*-- -------------------------- -->
<---       Sliding Carousel      -->
<--- -------------------------- -*/
.ss-box {
  padding: 4.6875em;
}
.slideshow {
  display: block;
  position: relative;
  margin: auto;
  width: 25em;
  font-size: min(2.4vw, 1em);
  overflow: hidden;
  border: 0px solid #ffffff;
          box-shadow: -1px 5px 15px #000000;
  /*Area of images*/
  /*Animation activated by keyframes*/
}
.slideshow .wrapper {
  width: 100%;
  display: flex;
          animation: slide 18s infinite;
}
.slideshow .wrapper img {
  width: 100%;
  height: 100%;
     object-fit: contain;
}
@keyframes slide {
  0% {
            transform: translateX(0);
  }
  12.5% {
            transform: translateX(-100%);
  }
  25% {
            transform: translateX(-200%);
  }
  37.5% {
            transform: translateX(-300%);
  }
  50% {
            transform: translateX(-400%);
  }
  62.5% {
            transform: translateX(-500%);
  }
  75% {
            transform: translateX(-600%);
  }
  87.5% {
            transform: translateX(-700%);
  }
  100% {
            transform: translateX(-800%);
  }
}
/*-- -------------------------- -->
<---    Email/Web Scroll Feeds  -->
<--- -------------------------- -*/
/*Mobile*/
@media only screen and (min-width: 0em) {
  .response-feed {
    display: block;
    padding: 1.75em;
  }
  .social-scroll {
    display: block;
    position: relative;
    margin: auto;
    width: 96%;
    max-width: 25em;
    max-height: 40.625em;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .social-scroll .feed {
    width: 100%;
    display: flex;
  }
  .social-scroll .feed img {
    width: 100%;
       object-fit: cover;
  }
}
/*-- -------------------------- -->
<---   Brand Card               -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .carousel-container {
    display: block;
    position: relative;
    margin: auto;
    font-size: min(2.4vw, 1em);
    height: 100%;
    max-height: 39.0625em;
    width: 96%;
    max-width: 39.0625em;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    --slide-count: 5;
  }
  .carousel-container h3 {
    line-height: 1.33333333em;
    font-size: 1.55555556em;
    margin: auto;
    text-align: center;
    padding: 0.5em;
  }
  .carousel-container .mobile-tip {
    text-align: center;
    padding: 0.0625em;
  }
  .carousel-container .carousel {
    width: 500%;
    display: flex;
  }
  .carousel-container .carousel .slide {
    scroll-snap-align: start;
  }
  .carousel-container .carousel .slide img {
    width: 100%;
    height: 100%;
       object-fit: contain;
  }
  .carousel-container .carousel .slide video {
    width: 100%;
    height: 100%;
       object-fit: cover;
  }
  .carousel-controls {
    display: none;
  }
  .carousel-controls nav {
    text-align: center;
  }
  .carousel-controls nav a {
    padding: 1.75em;
    display: inline-block;
    margin: auto;
  }
}
/*Desktop*/
@media only screen and (min-width: 1300px) {
  .carousel-controls {
    display: block;
  }
  .carousel-controls nav {
    text-align: center;
  }
  .carousel-controls nav a {
    padding: 1.75em;
    display: inline-block;
    margin: auto;
  }
  .mobile-tip {
    display: none;
  }
}
/*-- -------------------------- -->
<---   Video Cards             -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .video-container {
    height: 100%;
    max-height: 39.0625em;
    margin: auto;
    width: 100%;
    max-width: 25em;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    --slide-count: 3;
  }
  .video-container h3 {
    line-height: 1.33333333em;
    font-size: 1.55555556em;
    margin: auto;
    text-align: center;
    padding: 0.5em;
  }
  .video-container .mobile-tip {
    text-align: center;
    padding: 0.0625em;
  }
  .video-container .vid-carousel {
    width: 300%;
    display: flex;
  }
  .video-container .vid-carousel .vid-slide {
    scroll-snap-align: start;
  }
  .video-container .vid-carousel .vid-slide img {
    width: 100%;
    height: 100%;
       object-fit: cover;
  }
  .video-container .vid-carousel .vid-slide video {
    width: 100%;
    height: 100%;
       object-fit: cover;
  }
  .carousel-controls {
    display: none;
  }
  .carousel-controls nav {
    text-align: center;
  }
  .carousel-controls nav a {
    padding: 1.75em;
    display: inline-block;
    margin: auto;
  }
}
/*Desktop*/
@media only screen and (min-width: 1300px) {
  .carousel-controls {
    display: block;
  }
  .carousel-controls nav {
    text-align: center;
  }
  .carousel-controls nav a {
    padding: 1.75em;
    display: inline-block;
    margin: auto;
  }
  .mobile-tip {
    display: none;
  }
}
/*-- -------------------------- -->
<---   News Cards              -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .news-carousel-container {
    height: 100%;
    max-height: 41.375em;
    margin: auto;
    width: 96%;
    max-width: 25em;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    --slide-count: 5;
  }
  .news-carousel-container h3 {
    line-height: 1.33333333em;
    font-size: 1.55555556em;
    margin: auto;
    text-align: center;
    padding: 0.5em;
  }
  .news-carousel-container .mobile-tip {
    text-align: center;
    padding: 0.0625em;
  }
  .news-carousel-container .news-carousel {
    width: 500%;
    display: flex;
  }
  .news-carousel-container .news-carousel .news-slide {
    scroll-snap-align: start;
  }
  .news-carousel-container .news-carousel .news-slide img {
    width: 100%;
    height: 100%;
       object-fit: contain;
  }
  .news-carousel-container .news-carousel .news-slide video {
    width: 100%;
    height: 100%;
       object-fit: cover;
  }
  .carousel-controls {
    display: none;
  }
  .carousel-controls nav {
    text-align: center;
  }
  .carousel-controls nav a {
    padding: 1.75em;
    display: inline-block;
    margin: auto;
  }
}
/*Desktop*/
@media only screen and (min-width: 1300px) {
  .carousel-controls {
    display: block;
  }
  .carousel-controls nav {
    text-align: center;
  }
  .carousel-controls nav a {
    padding: 1.75em;
    display: inline-block;
    margin: auto;
  }
  .mobile-tip {
    display: none;
  }
}
/*-- -------------------------- -->
<---       Gallery              -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #portfolio-gallery {
    padding-top: 7.5em;
    padding-bottom: 3.125em;
    margin: auto;
  }
  #portfolio-gallery .container {
    width: 96%;
    max-width: 82.5em;
  }
  #portfolio-gallery .gallery {
            box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 25.625em;
    margin: auto;
    margin-bottom: 6.25em;
    border-radius: 0.3125em;
    position: relative;
    background: var(--bluegradient);
    display: flex;
            flex-direction: column;
  }
  #portfolio-gallery .gallery:last-of-type {
    margin-bottom: 0;
  }
  #portfolio-gallery .gallery .project-card {
    display: block;
    background-color: var(--bodytext);
    height: 100%;
    width: 100%;
    margin: auto;
    margin-left: 0;
    margin-bottom: 1em;
    position: static;
    right: 0;
    top: -31.25em;
       object-fit: cover;
  }
  #portfolio-gallery .gallery h3 {
    line-height: 1.33333333em;
    padding: 1.33333333em 1.55555556em;
    font-size: 1.55555556em;
    color: var(--white);
  }
  #portfolio-gallery .gallery p {
    line-height: 1.33333333em;
    text-align: left;
    color: var(--white);
    padding: 1.33333333em 1.55555556em;
  }
  #portfolio-gallery .gallery .view-work {
    padding: 1.33333333em 1.55555556em;
    display: flex;
            justify-content: space-between;
            align-items: center;
        flex-wrap: nowrap;
    margin-top: auto;
  }
  #portfolio-gallery .gallery .view-work .tags {
    color: var(--white);
    background-color: var(--bodytext);
    padding: 1.33333333em 1.55555556em;
    font-weight: 400;
    display: block;
  }
  #portfolio-gallery .gallery .link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
            justify-content: right;
    padding: 1.33333333em 1.55555556em;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #portfolio-gallery {
    padding-top: 9.375em;
    padding-bottom: 3.125em;
  }
  #portfolio-gallery .container {
    font-size: min(1.4vw, 1em);
    display: flex;
            justify-content: center;
        flex-wrap: wrap;
    padding: 0;
    -webkit-column-gap: 1.875em;
            column-gap: 1.875em;
  }
  #portfolio-gallery .gallery {
    margin: 0;
    margin-bottom: 9.375em;
  }
  #portfolio-gallery .gallery:last-of-type {
    margin-bottom: 9.375em;
  }
}
/*-- -------------------------- -->
<---       Single Column      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .one-column {
    padding: 25px, 0;
  }
  .one-column .icon {
    display: block;
    font-size: min(2.4vw, 1em);
    height: 9.375em;
    margin: auto;
    position: relative;
    width: 9.375em;
  }
  .one-column .icon img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
       object-fit: cover;
  }
  .one-column .container {
    display: flex;
            flex-direction: column;
            justify-content: center;
    margin-top: 4.6875em;
    margin: auto;
    max-width: 38.1875em;
  }
  .one-column h2 {
    font-size: 3em;
    margin-bottom: 0.875em;
    margin-top: 0.875em;
  }
  .one-column ul {
    padding-left: 1.25em;
    margin-bottom: 1.25em;
    margin-top: 0.875em;
  }
  .one-column ul li {
    list-style: none;
    display: flex;
            justify-content: flex-start;
            align-items: flex-start;
  }
  .one-column ul li img {
    margin-right: 0.625em;
    margin-top: 0.22222222em;
  }
  .one-column p {
    margin-bottom: 1.11111111em;
  }
  .one-column .button-solid {
    margin-top: 1.78571429em;
    width: 80%;
  }
}
/* Inbetween */
@media only screen and (min-width: 666px) {
  .one-column {
    padding: 3.125em 0;
  }
}
/* Small Desktop */
@media only screen and (min-width: 1300px) {
  .one-column {
    padding: 4.6875em 0;
  }
  .one-column .container {
            align-items: center;
            flex-direction: column;
            justify-content: center;
    margin: auto;
    max-width: 86.9375em;
    width: 66%;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .sidebyside {
    padding: 25px 0;
  }
  .sidebyside .container {
    display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
  }
  .sidebyside h3 {
    font-size: 1.5em;
    margin: auto;
    margin-bottom: 0.875em;
  }
  .sidebyside .example {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: 25em;
       object-fit: cover;
  }
  .sidebyside .content {
            order: 2;
    margin: auto;
    margin-top: 4.6875em;
    max-width: 38.1875em;
  }
  .sidebyside .content h2 {
    font-size: 3em;
    margin-bottom: 0.875em;
  }
  .sidebyside .content h3 {
    font-size: 2.25em;
    margin-bottom: 0.88888889em;
  }
  .sidebyside .content ul {
    padding-left: 1.25em;
    margin-bottom: 1.25em;
  }
  .sidebyside .content ul li {
    list-style: none;
    display: flex;
            justify-content: flex-start;
            align-items: flex-start;
  }
  .sidebyside .content ul li img {
    margin-right: 0.625em;
    margin-top: 0.22222222em;
  }
  .sidebyside .content p {
    margin-bottom: 1.11111111em;
  }
  .sidebyside .content .button-solid {
    margin-top: 1.78571429em;
  }
  .sidebyside .image-box {
    display: block;
    position: relative;
    margin: auto;
    width: 38.1875em;
    height: 53.8125em;
    font-size: min(2.4vw, 1em);
  }
  .sidebyside .image-box img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
       object-fit: cover;
  }
  .sidebyside .video-box {
    display: block;
    position: relative;
    margin: auto;
    width: 38.1875em;
    height: 25em;
    font-size: min(2.4vw, 1em);
  }
  .sidebyside .video-box video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
       object-fit: contain;
  }
}
/* Inbetween */
@media only screen and (min-width: 666px) {
  .sidebyside {
    padding: 3.125em 0;
  }
}
/* Small Desktop */
@media only screen and (min-width: 1300px) {
  .sidebyside {
    padding: 4.6875em 0;
  }
  .sidebyside .container {
    max-width: 86.9375em;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
  }
  .sidebyside .content {
    margin: 0;
    width: 60%;
  }
  .sidebyside .image-box {
    margin: 0;
    margin-right: 10.625em;
  }
}
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .sidebyside-reverse {
    padding: 25px 0;
  }
  .sidebyside-reverse .container {
    display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
  }
  .sidebyside-reverse .content {
            order: 2;
    margin: auto;
    margin-top: 4.6875em;
    max-width: 38.1875em;
  }
  .sidebyside-reverse .content h2 {
    font-size: 3em;
    margin-bottom: 0.875em;
  }
  .sidebyside-reverse .content h3 {
    font-size: 2.25em;
    margin-bottom: 2em;
  }
  .sidebyside-reverse .content p {
    margin-bottom: 1.11111111em;
  }
  .sidebyside-reverse .content ul {
    padding-left: 1.25em;
    margin-bottom: 1.25em;
  }
  .sidebyside-reverse .content ul li {
    list-style: none;
    display: flex;
            justify-content: flex-start;
            align-items: flex-start;
  }
  .sidebyside-reverse .content ul li img {
    margin-right: 0.625em;
    margin-top: 0.22222222em;
  }
  .sidebyside-reverse .content .button-solid {
    margin-top: 1.78571429em;
  }
  .sidebyside-reverse .image-box {
    display: block;
    position: relative;
    margin: auto;
    width: 38.1875em;
    height: 53.8125em;
    font-size: min(2.4vw, 1em);
  }
  .sidebyside-reverse .image-box img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
       object-fit: cover;
  }
}
/* Inbetween */
@media only screen and (min-width: 666px) {
  .sidebyside-reverse {
    padding: 6.25em 0;
  }
}
/* Small Desktop */
@media only screen and (min-width: 1300px) {
  .sidebyside-reverse {
    padding: 4.6875em 0;
  }
  .sidebyside-reverse .container {
    max-width: 86.9375em;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
  }
  .sidebyside-reverse .content {
    margin: 0;
    width: 60%;
            order: 1;
  }
  .sidebyside-reverse .image-box {
    margin: 0;
    margin-left: 10.625em;
            order: 2;
  }
}
/*-- ---------------------------------------------------------------- -->
<---   2026 MAINTENANCE LAYER                                          -->
<---   Responsive + performance fixes. Everything above this banner is -->
<---   the original 2022 stylesheet, unchanged. Overrides live here so -->
<---   it stays obvious what was altered and why.                      -->
<--- ---------------------------------------------------------------- -*/

/* 1 ---- Global safety nets ---------------------------------------- */
html {
  scroll-padding-top: 7.5rem;      /* anchors clear the fixed navbar   */
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;                /* clip, not hidden: keeps sticky   */
}
body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
.sidebyside > .container > *,
.sidebyside-reverse > .container > * { min-width: 0; max-width: 100%; }

/* 2 ---- Web fonts: show fallback text while the font loads --------- */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/outfit-v6-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url('../fonts/outfit-v6-latin-700.woff2') format('woff2'); }

/* 3 ---- Navbar contrast -------------------------------------------
   The desktop nav painted its links --white over a pale peach page,
   which was all but invisible until you scrolled. Links are now dark
   by default and only go white on the project pages, where they sit
   over the darkened #int-hero image.                                  */
@media only screen and (min-width: 64em) {
  #navigation #navbar-menu ul li a { color: var(--bodytext); }
  body:has(#int-hero) #navigation #navbar-menu ul li a { color: var(--white); }
  body.scroll #navigation #navbar-menu ul li a,
  body.scroll:has(#int-hero) #navigation #navbar-menu ul li a { color: var(--bodytext); }
  #navigation #navbar-menu ul li a.active:before { background: var(--primaryblue); }
}
#navigation .hamburger-menu span,
#navigation .hamburger-menu span:before,
#navigation .hamburger-menu span:after { background: var(--bodytext); }
#navigation .hamburger-menu.clicked span { background: transparent; }
#navigation .hamburger-menu.clicked span:before { top: 0; width: 100%; transform: rotate(45deg); }
#navigation .hamburger-menu.clicked span:after  { top: 0; width: 100%; transform: rotate(-45deg); }

/* 4 ---- Fluid media boxes ------------------------------------------
   These were sized in em with a `font-size: min(2.4vw, 1em)` hack, so
   above 666px they froze at a fixed 611x861px and blew out of their
   flex row. Now they scale with the column and hold their shape with
   aspect-ratio.                                                       */
.sidebyside .image-box, .sidebyside-reverse .image-box {
  font-size: 1rem;
  width: min(100%, 38.1875em);
  height: auto;
  aspect-ratio: 611 / 861;
}
.sidebyside .video-box, .sidebyside-reverse .video-box {
  font-size: 1rem; width: min(100%, 38.1875em); height: auto; aspect-ratio: 611 / 400;
}
.slideshow        { font-size: 1rem; width: min(100%, 25em); }
.carousel-container { font-size: 1rem; width: min(100%, 39.0625em); }
.video-container  { font-size: 1rem; width: min(100%, 25em); height: auto; }
.social-scroll    { width: min(100%, 25em); overscroll-behavior: contain; }
.one-column .icon { font-size: 1rem; }
.sidebyside .example, .sidebyside-reverse .example {
  width: min(100%, 25em); height: auto;
}
.ss-box { padding: clamp(1rem, 5vw, 4.6875em); }

/* Carousels: were hard-coded to `width: 500%` / `300%`, i.e. exactly
   five / three slides. Flex basis makes any number of slides work.    */
.carousel-container .carousel, .video-container .vid-carousel { width: auto; }
.carousel-container .carousel .slide,
.video-container .vid-carousel .vid-slide { flex: 0 0 100%; }
.carousel-container .carousel .slide img { aspect-ratio: 1; }

/* 5 ---- Desktop layout starts where the desktop navbar starts -------
   Content switched to two columns at 1300px but the navbar switched at
   1024px, so every window between the two got a desktop header on top
   of a stacked mobile body.                                           */
@media only screen and (min-width: 64em) {
  .sidebyside, .sidebyside-reverse { padding: 4.6875em 0; }
  .sidebyside > .container, .sidebyside-reverse > .container {
    max-width: 86.9375em;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: clamp(2rem, 5vw, 10.625em);
  }
  /* NB: the original column order is deliberate and is left alone -
     .sidebyside puts the art first, .sidebyside-reverse puts the copy first. */
  .sidebyside .content { width: auto; flex: 1 1 55%; max-width: 38.1875em; margin: 0; }
  .sidebyside-reverse .content {
    order: 1; width: auto; flex: 1 1 55%; max-width: 38.1875em; margin: 0;
  }
  .sidebyside .image-box, .sidebyside-reverse .image-box { margin: 0; flex: 0 1 38.1875em; }
  .sidebyside-reverse .image-box { order: 2; }
  .one-column { padding: 4.6875em 0; }
  .one-column .container { align-items: center; width: 66%; max-width: 55em; }
}

/* 6 ---- Portfolio gallery: real grid instead of a flex-wrap with a
   `font-size: min(1.4vw, 1em)` rule that shrank every card's text to
   11px on a tablet.                                                   */
@media only screen and (min-width: 48em) {
  #portfolio-gallery .container {
    font-size: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 3.75rem 1.875rem;
    column-gap: 1.875rem;
  }
  #portfolio-gallery .gallery,
  #portfolio-gallery .gallery:last-of-type { margin: 0; max-width: none; }
}
#portfolio-gallery .gallery picture,
#portfolio-gallery .gallery > a { display: block; }
#portfolio-gallery .gallery .project-card {
  aspect-ratio: 3 / 4; height: auto; object-fit: cover;
  border-radius: .3125em .3125em 0 0;
}

/* 7 ---- Footer ------------------------------------------------------
   `font-size: min(1.2vw, 1em)` made the whole footer 12px on a 1024px
   laptop. The heading styles also targeted h2 while the markup uses h3. */
@media only screen and (min-width: 64em) { #footer-bottom { font-size: 1rem; } }
#footer-bottom .right-section .lists ul h3 {
  color: #fff; font-size: 1.125em; line-height: 1.16666667;
  margin-bottom: 2.05555556em; text-transform: uppercase; font-weight: bold;
  position: relative;
}
#footer-bottom .right-section .lists ul h3:before {
  content: ''; position: absolute; display: block;
  height: .11111111em; width: 5.38888889em; background: #EEBE76;
  opacity: 1; bottom: -.88888889em; left: 0;
}
#footer-bottom .credit { margin-top: 3.125em; }
.footer-top img { width: auto; height: auto; max-height: 10em; }

/* 8 ---- Odds and ends ----------------------------------------------- */
.one-column { padding: 25px 0; }        /* was `25px, 0` - invalid, ignored */
#int-hero { background-attachment: scroll; }   /* no bg image to fix     */
#int-hero h1 { max-width: 20ch; }
.skip { position: absolute; left: -9999px; opacity: 0; }
.skip:focus {
  position: fixed; left: 0; top: 0; opacity: 1; z-index: 100001;
  padding: 1rem 1.5rem; background: var(--white); color: var(--bodytext);
}
:focus-visible { outline: 3px solid var(--primaryblue); outline-offset: 2px; }
::-webkit-scrollbar { height: .75em; }

/* 9 ---- Respect reduced-motion preferences -------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .slideshow .wrapper { animation: none; }
}

/* 10 --- The other two carousels had the same hard-coded widths ------ */
.news-carousel-container { font-size: 1rem; width: min(100%, 25em); }
.news-carousel-container .news-carousel { width: auto; }
.news-carousel-container .news-carousel .news-slide { flex: 0 0 100%; }
@media only screen and (min-width: 64em) { .carousel-controls { display: block; } }

/* The horizontal carousels have no arrows on most pages, so make the
   scrollbar an obvious affordance rather than an invisible one. */
.carousel-container, .video-container, .news-carousel-container {
  scrollbar-width: thin;
  scrollbar-color: var(--primarygreen) rgba(0, 0, 0, .08);
  padding-bottom: .5rem;
}
.carousel-container::-webkit-scrollbar,
.video-container::-webkit-scrollbar,
.news-carousel-container::-webkit-scrollbar { height: .6em; }
.carousel-container::-webkit-scrollbar-thumb,
.video-container::-webkit-scrollbar-thumb,
.news-carousel-container::-webkit-scrollbar-thumb {
  background: var(--primarygreen); border-radius: .3em;
}