/* FONTS
font-family: "Inter", sans-serif;
font-family: 'Open Sans', sans-serif;
*/

/*
Colors:

*/


/* Desktop Large */
/*
@media only screen and (max-width: 1140px) {
  h3.head-text-title {
    font-size: 72px;
    font-size: 4.5rem;
  }
}
*/

/* Desktop Medium */
/*
@media only screen and (max-width: 1024px) {
  h3.head-text-title {
    font-size: 64px;
    font-size: 4rem;
  }
}
*/


/* Desktop Small / Tablet Landscape */
/*
@media only screen and (max-width: 900px) {
  h3.head-text-title {
    font-size: 56px;
    font-size: 3.5rem;
  }
}
*/

/* Tablet Portrait */
/*
@media only screen and (max-width: 767px) {
  h3.head-text-title {
    font-size: 48px;
    font-size: 3rem;
  }
}
*/


/* Large Mobile */
/*
@media only screen and (max-width: 600px) {
  h3.head-text-title {
    font-size: 40px;
    font-size: 2.5rem;
  }
}
*/


/* Medium Mobile */
/*
@media only screen and (max-width: 480px) {
  h3.head-text-title {
    font-size: 32px;
    font-size: 2rem;
  }
}
*/


/* Small Mobile */
/*
@media only screen and (max-width: 375px) {
  h3.head-text-title {
    font-size: 28px;
    font-size: 1.75rem;
  }
}
*/


/* Extra Small Mobile */
/*
@media only screen and (max-width: 320px) {
  h3.head-text-title {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
    border-top: 1px solid rgba(230, 230, 230, .3);
}

img {
  max-width: 100%;
  display: block;
    margin: auto;
}

img.logo {
/*    width: 75px;*/
    width: 40px
}

/*
img.leland-imgs {
    max-height: 100%;
  height: auto;
  width: auto;
  display: block;
}
*/

/*
#delayedDiv {
    display: none;
}
*/


/*
@media only screen and (max-width: 992px) {
    .my-divider {
    display: none;
    }
}
*/

h2 {
    font-size: 24px;
    color: #f2f2f2;
    text-align: left;
    margin-top: 7.5px;
    margin-bottom: 12.5px;
    font-weight: 600;
    font-family: "Inter", sans-serif;
}

/*
@media only screen and (max-width: 767px) {
h2 {
    text-align: center;
    }
}
*/

h4 {
    font-weight: 500;
    font-size: 25px;
    color: #1a1a1a;
    margin-bottom: 7.5px;
}

p {
    font-family: "Inter", sans-serif;
    color: #1a1a1a;
    font-size: 14px;
/*    font-size: 0.875rem;*/
    line-height: 1.5;
    text-shadow: none;
    font-weight: 300;
}

a.text-link {
    color: #cf6d47;
}

a.text-link:hover {
    color: #cf6d47 !important;
    text-decoration: underline;
}

.container, .container-sm {
    width: 1140px;
}

/* Layout Container (matches nav & footer width) */
@media only screen and (min-width: 767px) {
.container {
    padding-right: 0px;
    padding-left: 0px;

    }
}

@media only screen and (max-width: 767px) {
.container {
    padding-right: 15px;
    padding-left: 15px;

    }
}


@media only screen and  (max-width: 1200px) {
.container, .container-sm {
    max-width: 90%;
    }
}

.mark, mark {
    padding: 0.2em;
    background-color: limegreen;
}


/* Custom text highlight color */
::selection {
    background: #cf4784; /* your vibe */
    color: #ffffff;       /* text color while highlighted */
}

/* Firefox needs a separate selector */
::-moz-selection {
    background: #cf4784;
    color: #ffffff;
}


/* NAV */
nav {
    position: sticky;
    padding: 10px 0px;
    top: 0;
    background: #1a1a1a;
    z-index: 1000;
    border-bottom: 1px solid rgba(230, 230, 230, .3);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 0;
}

@media only screen and  (max-width: 1200px) {
.container, .container-sm {
    max-width: 90%;
    }
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
}

@media only screen and (min-width: 767px) {
.nav-links  {
    padding-bottom: 0px;
    }
}

.nav-links a, .nav-link-icons a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #cf4784;
}

ul.nav-link-icons {
    display: flex;
    gap: 1rem;
}


/* New wrapper that groups your nav-links + icons on the right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* spacing between links and icons */
    margin-left: auto; /* pushes whole group to the right */
}

/* Make sure nav-links stay horizontal */
.nav-right .nav-links {
    display: flex;
    gap: 1rem;
}

/* Icons stay horizontal too */
.nav-right .nav-link-icons {
    display: flex;
    gap: 1rem;
}

@media (max-width: 767px) {

  /* Stack in the correct order on mobile */
  .nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  /* Icons first, toggle second */
  .nav-link-icons {
    order: 1;
  }

  .menu-toggle {
    order: 2;
    font-size: 28px;
    cursor: pointer;
    display: block;
      padding-left: 1rem;
/*      margin-top: -50px;*/
  }

  /* Hide nav-links until opened */
  .nav-links {
    display: none;
  }

/*
  .nav-links.active {
    display: block;
  }
*/
}

/* Desktop stays the same */
@media (min-width: 767px) {
  .menu-toggle {
    display: none;
  }
}



a.navbar-brand {
    display: inherit;
    padding: 0;
    margin: auto;
    color: #ffffff;
    transition: color 0.3s;
}

a.navbar-brand:hover {
    color: #cf4784;
    transition: color 0.3s;
    transform: scale(1.02);
    text-decoration: underline;
}

nav ul li a.active {
  color: #cf4784;
    font-weight: 700;
}

a.leland.active {
    color: #4B9F00;
}

a.leland:hover {
    color: #cf4784;
}

a.scorpeo.active {
    color: #C24A23;
}

a.scorpeo:hover {
    color: #cf4784;
}

a.nars.active {
    color: #0097A7;
}

a.nars:hover {
    color: #cf4784;
}

a.home.active {
    color: #cf4784;
}

a.home:hover {
    color: #cf4784;
    
}

a.about.active {
    color: #CFAE00;
}

a.about:hover {
    color: #CFAE00;
}


a.design.active {
    color: #0097A7;
}

a.design:hover {
    color: #0097A7;
}


a.work.active {
    color: #C24A23;
}

a.work:hover {
    color: #C24A23;
}

a.contact:hover {
    color: #4B9F00;
}

a.resume:hover {
    color: #4B9F00;
}


/* SECTIONS */
section {
  padding: 3.75rem 0;
    width: 100%;
/*
    max-width: 90%;
    margin: auto;
*/
}


section#overview-section {
    padding: 0;
}



#home {
/*  background: url('../img/just-me.png') no-repeat center center/cover;*/
    height: auto;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
/*    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);*/
    font-size: 32px;
/*    font-size: 2rem;*/
    padding-bottom: 0px;
}


h3.head-text-title {
    font-family: "Inter", sans-serif;
    color: #1a1a1a;
    font-weight: 700;
/*    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);*/
    text-align: left;
}

@media only screen and  (max-width: 1200px) {
    h3.head-text-title {
        font-size: 64px;
/*        font-size: 4rem;*/
    }
}

@media only screen and  (max-width: 1199px) {
    h3.head-text-title {
        font-size: 48px;
/*        font-size: 3rem*/
    }
}


@media only screen and (max-width: 740px) {
    h3.head-text-title {
        font-size: 48px;
/*        font-size: 3rem*/ 
    }
}

@media only screen and (max-width: 600px) {
  h3.head-text-title {
    font-size: 38px;
/*    font-size: 2.375rem;*/
  }
}



/* Medium Mobile */

@media only screen and (max-width: 480px) {
  h3.head-text-title {
    font-size: 34px;
/*    font-size: 2rem;*/
  }
}



/* Small Mobile */

@media only screen and (max-width: 375px) {
  h3.head-text-title {
    font-size: 42px;
/*    font-size: 2.625rem;*/
  }
}



/* Extra Small Mobile */

@media only screen and (max-width: 320px) {
  h3.head-text-title {
    font-size: 42px;
/*    font-size: 2.625rem;*/
  }
}

@media only screen and (max-width: 480px) {
  h3.head-text-title.top-header {
    font-size: 28px;
/*    font-size: 1.5rem;*/
  }
}




@media only screen and (max-width: 767px) {
    h3.head-text-title {
        text-align: center }
}


















/* === Thumbnail Grid === */

.container-show-n-tell-images {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 23px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .container-show-n-tell-images {
        grid-template-columns: 1fr; /* stacked on mobile */
    }
}


.container-show-n-tell-images.two-frames {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 23px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .container-show-n-tell-images.two-frames {
        grid-template-columns: 1fr; /* stacked on mobile */
    }
}

.SNT-item {
    cursor: zoom-in;
    border-radius: 0px;
}

.SNT-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0px !important;
    box-shadow: 0 0px 5px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 992px) {
  .SNT-image {
    max-width: 90%;
  }
}

.SNT-item:hover .SNT-image,
.SNT-item:focus-within .SNT-image {
    transform: translateY(-3px) scale(1.01);
/*    box-shadow: 0 12px 10px rgba(0, 0, 0, 0.25);*/
/*    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);*/
    box-shadow: 6px 6px 10px -2px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
}


.SNT-image.minor-box-shadow {
    box-shadow: none;
}

/*
.SNT-item.minor-box-shadow:hover .SNT-image.minor-box-shadow, .SNT-item.minor-box-shadow:focus-within .SNT-image.minor-box-shadow {
    box-shadow: 6px 6px 10px -2px rgba(0, 0, 0, 0.2);
}
*/

/* === Lightbox Overlay === */

.snt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 900; /* below your nav (1000) and footer (9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.snt-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Backdrop */
.snt-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    cursor: zoom-out;
}

/* Dialog shell */
.snt-lightbox__dialog {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    width: 100%;
/*    height: 100vh;*/
    box-sizing: border-box;
/*    background: rgba(0, 0, 0, 0.85);*/
    background-color: #1a1a1a;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 40px 40px 40px 40px;
    border-radius: 8px;
}

/* Main image row */
.snt-lightbox__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Zoomed image */
.snt-lightbox__image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
    background: #000;
}

/* Nav arrows */
.snt-lightbox__nav {
    border: none;
/*    background: rgba(255, 255, 255, 0.12);*/
    color: #cccccc;
    font-size: 26px;
    width: 0px;
    height: 0px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s ease;
    transform: translateY(0px) scale(1);
    margin-top: 0px;
}

.snt-lightbox__nav:hover {
    transform: translateY(0px) scale(1.1);
    transition: background 0.3s ease, transform 0.3s ease;
}

/* Close button */
.snt-lightbox__close {
    position: absolute;
    top: 9px;
    right: 9px;
    border: none;
    color: #cccccc;
    font-size: 30px;
    width: 0px;
    height: 0px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    margin-top: 0px;
    transform: translateY(0px) scale(1);
}

.snt-lightbox__close:hover {
    transform: translateY(0px) scale(1.1);
    transition: background 0.3s ease, transform 0.3s ease;
}

/* Meta row: caption + counter */
.snt-lightbox__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #cccccc;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* so caption can use its own height */
    gap: 12px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #cccccc;
}

.snt-lightbox__caption {
    flex: 1 1 auto;
    line-height: 1.4;
    min-height: 4.2em;  /* ~3 lines */
    max-height: 4.2em;  /* lock it so lightbox doesn't grow/shrink */
    overflow: hidden;   /* hide extra text if it runs long */
}

.snt-lightbox__counter {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Thumbnails inside lightbox */
.snt-lightbox__thumbs {
    display: flex;
    gap: 8px;
    /* keep thumbs in a single row */
    flex-wrap: nowrap;

    /* scroll horizontally when there are many */
    overflow-x: auto;
    overflow-y: hidden;

    padding-top: 4px;
    padding-bottom: 0;

    /* cap the height so it doesn't blow up the dialog */
    max-height: 90px; /* roughly thumb height + a bit of padding */
}

.snt-lightbox__thumbs img {
    width: 80px;
    height: auto;
    object-fit: cover;
    border-radius: 2px;
    opacity: 0.8;
    border: 2px solid transparent;
    cursor: pointer;
    flex: 0 0 auto; /* don't shrink or stretch vertically */
    transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}


.snt-lightbox__thumbs img:hover {
    /* transition: opacity 0.25s ease; */
    transform: translateY(0px) scale(1.02);
    box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.2);
    opacity: 1;
    transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.snt-lightbox__thumbs img.is-active {
    opacity: 1;
    border-color: #cf4784;
    transform: translateY(-1px);
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .snt-lightbox__dialog {
        max-width: 100%;
        height: auto;
        /*    margin: 0 8px;*/
/*        padding: 16px 12px 12px;*/
        padding: 50px 12px 12px 12px;
        padding: 40px 40px 20px 40px;
        border-radius: 0;
    }

    .snt-lightbox__main {
        gap: 6px;
    }

    .snt-lightbox__close {
        width: 0px;
        height: 0px;
        font-size: 24px;
        right: 14px;
    }
    
    .snt-lightbox__nav {
        width: 0px;
        height: 0px;
        font-size: 20px;
    }

    .snt-lightbox__thumbs img {
        width: 60px;
    }
    
    .snt-lightbox__image {
        max-height: 60vh;
    }

    .snt-lightbox__meta {
        flex-direction: column;
        align-items: flex-start;
        font-size: 14px;
    }
}



/* Hide chrome (meta, controls, thumbs) while a slide is loading */
.snt-lightbox.snt-loading .snt-lightbox__meta,
.snt-lightbox.snt-loading .snt-lightbox__thumbs,
.snt-lightbox.snt-loading .snt-lightbox__nav,
.snt-lightbox.snt-loading .snt-lightbox__close {
  visibility: hidden;
}


















/* Media queries for scaling text and container width */

/* Large desktop */
@media only screen and (min-width: 991px) {
  .image-text-container.left,
  .image-text-container.right {
    max-width: 315px;
  }


  .head-text-title {
/*    font-size: 72px;*/
    font-size: 60px;
/*    font-size: 4.5rem;*/
  }

  .head-text-tagline {
    font-size: 18px;
/*    font-size: 1.125rem;*/
  }
}

/* Desktop / Large tablet */
@media only screen and (min-width: 992px) {
  .image-text-container.left {
    max-width: 310px;
      position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0%, -64%);
    padding: 1rem;
    text-align: left;
    z-index: 10;
  }

  .image-text-container.right {
    max-width: 310px;
      position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0%, -71%);
    padding: 1rem;
    text-align: left;
    z-index: 10;
  }



  .head-text-tagline {
    font-size: 16px;
/*    font-size: 1rem;*/
  }
}

/* Tablet */
@media only screen and (max-width: 991px) {
  .image-text-container.left,
  .image-text-container.right {
    max-width: 305px;
  }
}

@media only screen and (max-width: 864px) {
  .image-text-container.left,
  .image-text-container.right {
    max-width: 250px;
}
    
    
  .head-text-title {
    font-size: 32px;
/*    font-size: 2rem;*/
  }

  .head-text-tagline {
    font-size: 14.4px;
/*    font-size: 0.9rem;*/
  }
}

/* Small tablets and large mobiles */
@media only screen and (max-width: 767px) and (min-width: 481px) {
  .head-text-title {
      font-size: 28px;
/*    font-size: 1.75rem; */
  }

  .head-text-tagline {
    font-size: 14px;
/*    font-size: 0.875rem; */
  }
}

/* Mobile */
@media only screen and (max-width: 480px) {
  .head-text-title {
    font-size: 14px;
/*    font-size: 1.5rem;*/
  }

  .head-text-tagline {
    font-size: 13px;
/*    font-size: 0.8rem;*/
  }
}


h3.head-text-title.center {
    text-align: center;
}

p.head-text-tagline {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #404040;
    text-shadow: none;
    text-align: left;
    line-height: 1.5;
    font-weight: normal;
}


.process-bullet-contaianer {
    margin-top: 40px;
}

.process-bullet-contaianer:first-child {
    margin-top: 0px;
}


p.bullet-text.process {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #404040;
    text-shadow: none;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 5px;
    font-weight: normal;
}

p.bullet-text.process:last-child {
  margin-bottom: 0;
}


@media only screen and (max-width: 767px) {
p.head-text-tagline.top-header {
    display: none;
    }
}


p.head-text-tagline.list {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    text-shadow: none;
    text-align: left;
    line-height: 2;
    font-weight: normal;
}



/* Base styles from before */
/*
.col-lg-6, .col-md-6, .col-sm-6, .col-6, .col-lg-3, .col-md-3, .col-sm-3, .col-3 {
  position: relative;
  padding: 0;
}
*/




p.head-text-tagline.about-me {
/*    display: contents;*/
    color: #cccccc;
/*    font-weight: 500;*/
}

.section-content.about-me {
    text-align: left;
}



@media only screen and (min-width: 1199px) {
span.about-mobile {
    display: none;
    }
}

@media only screen and (max-width: 1199px) {
span.about-mobile {
    display: contents;
    }
}

@media only screen and (min-width: 1199px) {
span.about-desktop {
    display: contents;
    }
}

@media only screen and (max-width: 1199px) {
span.about-desktop {
    display: none;
    }
}


.image-text-container.left {
  position: absolute;
  left: 0;
  top: 45%;
  transform: translate(0%, -64%);
  padding: 1rem;
  text-align: left;
  z-index: 10;
    
}

.image-text-container.right {
  position: absolute;
  right: 0;
  top: 45%;
  transform: translate(0%, -64%);
  padding: 1rem;
  text-align: left;
  z-index: 10;
}

@media only screen and  (max-width: 1199px) {
    .image-text-container.right, .image-text-container.left {
        transform: translate(0%, -80%);
    }
}

@media only screen and  (max-width: 860px) {
    .image-text-container.right {
/*        right: -25px;*/
    }
}


@media only screen and (max-width: 767px) {
    .image-text-container.right, .image-text-container.left {
       transform: translate(0%, -100%);
    }
}

@media only screen and (max-width: 600px) {
    .image-text-container.right, .image-text-container.left {
       transform: translate(0%, -110%);
    }
}



@media only screen and (max-width: 600px) {
    .image-text-container.right {
       right: 0px;
    }
}



img.img-me-left-home {
  float: none !important;
    display: block;
    margin-left: auto;
    margin-right: 0;
    max-width: 40%;
    border-radius: 0px !important;
}

img.img-me-right-home {
  float: none !important;
    display: block;
    margin-right: auto;
    margin-left: 0;
    max-width: 40%;
    border-radius: 0px !important;
}

@media only screen and (max-width: 768px) {
    img.img-me-right-home, img.img-me-left-home {
        max-width: 60%;
    }
}

@media only screen and (max-width: 600px) {
  .section-content img.img-me-right-home, .section-content img.img-me-left-home {
    margin-top: -25px;
  }
}


















#about {
  background-color: #1a1a1a;
}


.head-text.about-me {
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
}

/*
@media (max-width: 991px) {
  .head-text.about-me {
    padding-bottom: 20px;
  }
}
*/


/*
h3.head-text-title.about-me {
    text-align: left;
}
*/







@media only screen and (max-width: 767px) {
    .head-text.about-me {
    padding-left: 0;
    width: 100%;
    margin: auto;
    top: inherit;
    transform: none;
    margin-bottom: 25px;
    }
}


img.about-me-left {
    /* margin: 0 2% 0 0; */
    padding: 1%;
    box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
    background-color: #f2f2f2;
}

@media only screen and (max-width: 767px) {
    img.about-me-left {
        /* margin: 0 2% 0 0; */
        padding: 1%;
        box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.2);
        background-color: #f2f2f2;
        margin: 0px 15px;
        margin: auto;
        /* margin: 0px 15px; */
        width: 95%;
    }
}


img.collage {
    transition: transform 0.3s ease;
    background-color: #ffffff;
    padding: 5px;
}


img.collage:hover {
    background-clip: padding-box;
    transform: scale(.995);
    transition: transform 0.3s ease;
}



.row.list-pie_chart {
    margin-bottom: 48px;
    margin-top: 50px
}


.pie-chart {
    width: 100%;
    height: auto;
    display: block;
}

.contain-pie-chart {
    position: relative;
}

.pie-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 50%;
    margin: auto;
}

@media only screen and (max-width: 992px) {
    .pie-container {
    width: 45%;
    }
}



.contain-pie-chart-human {
    width: 50%;
    position: absolute;
    top: 3%;
    left: 63%;
}

.middle-content-left {
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
    position: relative;
    float: left;
    text-align: left;
}

.middle-content-right {
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
    position: relative;
    float: right;
    text-align: left;
}

/*
.row.about-me-top-section {
    padding-bottom: 2.5rem;
}
*/

img.about-me-right.collage {
    width: 100%;
}

.col-pie-container {
    width: 100%;
    margin: auto;
}

@media only screen and (max-width: 992px) {
    .middle-content-left {
        transform: none;
        position: relative;
        float: none;
        text-align: center;
        top: 10%;
        margin-top: 0px;
    }
    
    .middle-content-right {
        transform: none;
        position: relative;
        float: none;
        text-align: center;
        top: 10%;
        margin-top: 10px;
        margin-bottom: 16px;
    }
    
    div.pie-chart-bulelts {
        padding-left: 22px;
        width: fit-content;
        text-align: left;
        margin: auto;
}
    
    .middle-content-left {
        margin-bottom: 60px;
    }
    
    .pie-chart-bulelts {
        text-align: center;
        width: fit-content;
        margin: auto;
        margin-bottom: 13px;
    }
    
    .row.list-pie_chart {
        padding-top: 0;
        margin-top: 0px;
    }
    
    .row.about-me-top-section {
        padding-bottom: 0;
    }
    
    img.about-me-right.collage {
        width: 100%;
        max-width: 75%;
    }
    
    .col-pie-container {
        width: 100%;
        max-width: 75%;
    }
}

@media only screen and (max-width: 792px) {
    .col-pie-container {
        width: 100%;
        max-width: 100%;
    }
    
    img.about-me-right.collage {
        width: 100%;
        max-width: 100%;
    }
}


.middle-content-left-all {
    transform: none;
    position: relative;
    float: none;
    text-align: left;
    top: 0;
}








.about-list {
    margin-top: 15px;
    font-size: 16px;
/*    font-size: 1rem;*/
    color: #1a1a1a;
    line-height: 1.5;
}

ol, ul {
    list-style: none;
}

.about-list li {
    line-height: 2;
}













#design {
    background-color: #ffffff;
}




p.work-title {
/*    text-align: center;*/
    font-family: "Inter", sans-serif;
    color: #1a1a1a;
    font-weight: 400;
    font-size: 25px;
    margin: 0;
}


.process-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px;
    margin-top: 25px;
    margin-bottom: 20px;
}

.process-item {
    flex: 1 1 18%;       /* ~5 items per row when wide */
    max-width: fit-content;
    display: flex;
    flex-direction: column;  
    align-items: center;
}

.process-content {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
}

.process-content img.work-image {
    width: 124px;
    height: auto;
    flex-shrink: 0;
    margin: auto;
    transform: none;
}


@media (max-width: 1199px) {
    .process-content img.work-image {
        width: 150px;
        padding-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .process-content img.work-image {
        width: 125px;
        padding-bottom: 50px;
    }
}

.process-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    transform: translate(0%, 20%);
}

.process-text p {
    margin: 0;
}

.process-item h2 {
    margin: 0 0 25px 0;
    color: #333333;
}

.process-item.work-item {
    align-items: inherit;
}

/*
.process-item.work-item h2 {
    margin: 0 0 25px 0;
    color: #f2f2f2;
    font-size: 18px;
    margin: 15px 0px;
        margin: 15px 0px 10px 0px;
}
*/



/* When screen < 1200px, stack items vertically */
@media (max-width: 992px) {
    
    p.head-text-tagline.about-me.work-item {
    text-align: center;
}
    
  .process-container {
    flex-direction: column;
    align-items: center;
      margin-bottom: 0px;
  }
  .process-item {
    flex: 1 1 100%;
    max-width: 600px; /* keeps them from stretching too wide */
  }
  .process-item.work-item {
    flex: 1 1 100%;
    max-width: 400px; /* keeps them from stretching too wide */
  }
  .process-content {
    flex-direction: row; /* image left, text right */
    align-items: flex-start;
  }
  .process-text {
    align-items: flex-start;
    transform: none; /* reset offset */
    transform: translate(0%, -115%);
  }
    
  .process-text.desktop {
    display: none;
  }
    
  .process-text.mobile {
    display: flex;
  }
}

@media (min-width: 1199px) {
  .process-text.desktop {
/*    display: contents;*/
  }
}


@media (min-width: 1199px) {
  .process-text.mobile {
    display: none;
  }
}

@media (max-width: 1199px) {
  .process-text p.head-text-tagline.list.about-me {
    font-size: 18px;
  }
}

@media (max-width: 1199px) {
  .process-item h2 {
    font-size: 24px;
      margin-bottom: 15px;
    }
}




/* When screen < 1200px, stack items vertically */
@media (max-width: 400px) {
    
  .process-item.work-item {
    flex: 1 1 100%;
    max-width: 90%; /* keeps them from stretching too wide */
  }

}

h2.work-item.header {
    /* margin: 0 0 25px 0; */
    color: #f2f2f2;
    font-size: 18px;
    /* margin: 15px 0px; */
    margin: 17px 0px 10px 0px;
}

h2.work-item.label {
    /* margin: 0 0 25px 0; */
    color: #cccccc;
    font-size: 16px;
    /* margin: 15px 0px; */
    margin: 0px 0px 13px 0px;
}

p.work-item.text-p {
    display: inherit;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #cccccc;
    text-shadow: none;
    text-align: left;
    line-height: 1.5;
    font-weight: normal;
    margin-top:0px;
}

@media only screen and  (max-width: 992px) {
    p.work-item.text-p {
        text-align: center;
    }
}

.text-white {
    color: #cccccc !important;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    text-shadow: none;
    text-align: left;
    line-height: 1.5;
    font-weight: normal;
}


#skills {
    background-color: #1a1a1a;
}



#work {
    background-color: #1a1a1a;
/*    padding-bottom: 240px;*/
}

/*
@media (max-width: 1100px) {
    #work {
        padding-bottom: 160px;
    }
}
*/

#about {
    background-color: #1a1a1a;
    padding-bottom: 200px;
}

@media (max-width: 1100px) {
    #about {
        padding-bottom: 160px;
    }
}

img.work-image {
/*
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
*/
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}


/*
@media only screen and  (max-width: 992px) {
    img.work-image {
        width: 80%;
    }
}
*/



img.work-image:hover {
    transition: transform 0.3s ease;
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 1px 10px rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}



img.work-image.process {
    width: 50px;
    height: 50px;
    transition: none !important;
    box-shadow: none;
    transform: none !important;
}

img.work-image.process.aws-img {
    border: 1px solid rgba(230, 230, 230, .3);
}





#contact {
    background-color: #f2dede;
}

.section-content {
    text-align: center;
    max-width: 1140px;
    margin: auto;
    padding-right: 0;
    padding-left: 0;
}

@media only screen and  (max-width: 1200px) {
.section-content {
    max-width: 90%;
    }
}

.section-content.home {
/*    margin-bottom: 0;*/
    margin-top: 0;
}


.section-content img {
    margin-top: 0px;
    border-radius: 8px;
}

img.mock-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0px 5px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img.company-logo {
    display: inline-flex;
    width: 20px;
    border-radius: 0px;
}

button {
    border-radius: 5px;
    background-color: #1a1a1a;
    border: none;
    color: #f2f2f2;
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    padding: 10px;
    width: 175px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 50px 0 0 0;
    font-family: '"Inter", sans-serif', sans-serif;
}



.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button span:after {
    content: '\f105';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
    font-size: 15px;
    color: #f2f2f2;
}

.button:hover span {
  padding-right: 25px;
    color: #cccccc;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
    color: #cccccc;
}

button:focus {
    outline: none;
}

/*
.back-button {
    margin-bottom: 200px;
}
*/


/*
@media (max-width: 1100px) {
    .back-button {
        display: flex;
        justify-content: center;   
        align-items: center;        
        flex-wrap: wrap;
        width: 100%;               
        margin-top: 32px;
        margin-bottom: 110px;
    }
}
*/


.scroll-back-link {
  color: #0097A7;
  text-decoration: none;
  display: inline-block;       
  transition: transform 0.3s ease, color 0.3s ease;
}

.scroll-back-link:hover {
  color: #0097A7;
  transform: scale(1.02);   /* slightly more noticeable */
}







/* Shared row container */
.case-nav-buttons {
    display: flex;
    flex-direction: row;
    gap: 16px;              /* space between the buttons */
    justify-content: flex-end; /* desktop = right */
    margin-bottom: 120px;
}

/* Mobile: center the whole row */
@media (max-width: 1100px) {
    .case-nav-buttons {
        justify-content: center;
        margin-bottom: 130px;
        margin-top: 50px;
    }
}



a.button.in-right {
    border-radius: 5px;
    background-color: #1a1a1a;
    border: none;
    color: #f2f2f2;
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    padding: 10px;
    width: 180px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 45px 0 0 0;
    font-family: '"Inter", sans-serif', sans-serif;
    float: right;
}

@media (max-width: 1100px) {
    a.button.in-right {
        margin: 0px;
    }
}


a.button.in-right span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

a.button.in-right span:after {
    content: '\f105';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
    font-size: 15px;
    color: #f2f2f2;
}

a.button.in-right:hover span {
  padding-right: 25px;
    color: #cccccc;
}

a.button.in-right:hover span:after {
  opacity: 1;
  right: 0;
    color: #cccccc;
}

a.button.in-right:focus {
    outline: none;
}





.section-btn {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    background: #1a1a1a;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
    transition: transform 0.3s ease;
}

.section-btn:hover {
    background-clip: padding-box;
    transform: scale(.995);
    transition: transform 0.3s ease;
    text-decoration: none;
    background: #1a1a1a;
    color: #ffffff;
}










.case-study-card {
   border-radius: 8px;
    background-color: #fff;
    font-family: "Inter", sans-serif;
    color: #1a1a1a;
    text-align: left;
}



.view-case-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #d32f2f;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.view-case-btn:hover {
  background-color: #b71c1c;
}

p.card-header {
    font-weight: 600;
    font-size: 25px;
    color: #1a1a1a;
    background-color: inherit;
    border-bottom: none;
    padding: 0px;
}

p.card-title {
    font-weight: 600;
    font-size: 20px;
    color: #4d4d4d;
    margin-bottom: 0px;
    text-align: left;
}

p.card-content {
    font-family: "Inter", sans-serif;
    color: #1a1a1a;
    font-size: 18px;
/*    font-size: 1.125rem;*/
    line-height: 1.5;
    font-weight: 700;
}



.case-study-content {
    border-radius: 8px;
    background-color: #fff;
    font-family: "Inter", sans-serif;
    color: #1a1a1a;
    text-align: left;
}

.green-bold {
  color: #4B9F00;
}


.leland-bold { 
    color: #006837; 
}


.leland-caption {
    font-size: 20px;
/*    font-size: 1.25rem;*/
    font-weight: 600;
    color: #404040;
    margin: 0px 0px 5px 0px;
    margin-bottom: 10px;
}

.leland-image-wrapper {
    display: flex;
    justify-content: center;  
    align-items: center;      
    height: 100%;           
    text-align: center;
    flex-direction: column;
/*    margin-top: 112.5px;*/
}

.leland-before-after {
    display: block;
    width: 100%;
    height: auto;            
    object-fit: contain;
    object-position: center;
    max-width: 100%;        
    margin: 0 auto;
}

@media (max-width: 992px) {
    .leland-image-wrapper {
        align-items: center;    
        justify-content: flex-start;
    }
    
    .process-item:nth-child(2) .leland-image-wrapper {
        margin-top: 0px;
    }
}



/* === NARS Tags === */

.nars-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top:25px;
}

.nars-tags .tag {
    font-size: 13px;
    padding: 6px 12px;
    background-color: #E6F5FF;
    border: 1px solid #01426A;
    background-color: #f5f5f5;
    border: 1px solid #BFBFBF;
    border-radius: 20px;
/*    color: #333333;*/
    color: #1a1a1a;
    font-weight: 500;
    font-family: "Inter", sans-serif;
/*    box-shadow: 0 0px 5px rgba(0,0,0,0.04);*/
}


/* === NARS Stat Cards === */

.nars-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 23px;
    margin: 30px 0px 0px 0px
}

/* Lock into 2 columns from 1160px downward */
@media (max-width: 1160px) {
  .nars-stats-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Lock into 2 columns from 1160px downward */
@media (max-width: 992px) {
  .nars-stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
}


.nars-stats-container.two-frames {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 23px;
    margin: 30px 0px 0px 0px
}


/* Lock into 2 columns from 1160px downward */
@media (max-width: 1160px) {
  .nars-stats-container.two-frames {
    grid-template-columns: repeat(2, 1fr);
  }
}



.nars-stat-card {
    background: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(51,51,51, .25);
    box-shadow: 0 0px 5px rgba(0,0,0,0.04);
}

.nars-stat-value {
    font-size: 22px;
/*    font-size: 1.375rem;*/
    font-weight: 600;
    color: #01426a;
    /*  margin: 0 0 4px;*/
    font-family: "Inter", sans-serif;
}

.nars-stat-label {
    font-weight: 600;
    color: #404040;
    margin: 0 0 7px;
    font-size: 16px;
/*    font-size: 1rem;*/
    line-height: 1.5;
}

.nars-stat-desc {
    color: #404040;
    font-weight: normal;
}

.quote-container {
    border-left: 3px solid #bfbfbf;
    border-left: 2px solid #01426a;
    padding-left: 23px;
}




/* --- Container --- */
.interview-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 23px;
  margin-top: 30px;
}

/* --- Cards --- */
.interview-card {
    flex: 1 1 calc(50% - 12px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(51,51,51, .25);
    box-shadow: 0 0px 5px rgba(0,0,0,0.04);
}

p.card-label {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 18px;
/*    font-size: 1.125rem;*/
    line-height: 1.5;
    border-bottom: 1px solid #bfbfbf;
    background-color: #f5f5f5;
    border-radius: 8px 8px 0px 0px;
    padding: 13px 20px;
}

.interview-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding-bottom: 6px;
}

.interview-card--junior .interview-card-title {
    color: #47C1CF; /* Your cyan tone */
}

.interview-card--senior .interview-card-title {
    color: #CF6D47; /* Your orange tone */
}


ul.text-list.cards {
    padding: 13px 20px 13px 40px;
}


/* --- Responsiveness (stack on mobile) --- */
@media (max-width: 992px) {
  .interview-card {
    flex: 1 1 100%;
  }
}







.journey-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.journey-column {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
}

.journey-column-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 8px;
  color: #555;
}

@media (max-width: 1024px) {
  .journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .journey-grid {
    grid-template-columns: 1fr;
  }
}




















/* --- Personas Layout --- */
.process-container.nars-personas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 23px;
    gap: 23px;
}


.process-container.nars-personas .process-item {
    flex: 1 1 45%;
    display: flex;
    justify-content: center;
}

.persona-image-wrapper {
    /*  max-width: 380px;*/
    width: 100%;
}

img.journey-map, img.color-palette, img.typography {
    border-radius: 0px;
}



@media (max-width: 1100px) {
    img.discovery-workshop {
        border-radius: 0px;
        width: 100%;
    }
}

img.typography {
    width: 65%;
    margin-left: 0;
    margin-top: 10px;
}

@media (max-width: 1100px) {
    img.typography {
        width: 100%;
    }
}

img.persona-card {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(51,51,51, .25);
    box-shadow: 0 0px 5px rgba(0,0,0,0.04);
    padding: 0px;
/*    border: 1px solid #a6a6a6;*/
/*    box-shadow: 0 0 1px 1px rgba(1, 66, 106, .25);*/
}

@media (max-width: 992px) {
    img.persona-card  {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .process-container.nars-personas {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .process-container.nars-personas .process-item {
        flex: 1 1 100%;
        max-width: 80%;
/*        max-width: 420px;*/
    }
    
}






/* Grid for multiple personas */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 23px;
  margin-top: 30px;
}

/* Card shell */
.persona-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #bfbfbf;
    border-radius: 8px;
    box-shadow: 0 0px 5px rgba(0,0,0,0.04);
    padding: 23px;
}

/* Top: image + summary */
.persona-card_top {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 23px;
  align-items: center;
}

.persona-card_photo img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  object-fit: cover;
        box-shadow: 0 0px 5px rgba(0,0,0,0.04);
}

.persona-card_name {
    margin: 0 0 4px;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 18px;
/*    font-size: 1.125rem;*/
    line-height: 1.5;
    font-family: "Inter", sans-serif;
}

.persona-card_role {
    margin: 0 0 8px;
    font-family: "Inter", sans-serif;
    color: #404040;
    font-size: 14px;
/*    font-size: 0.875rem;*/
    line-height: 1.5;
    text-shadow: none;
    font-weight: normal;
}

.persona-card_quote {
    font-style: italic;
    font-weight: 500;
    margin: 0 0 10px;
    font-family: "Inter", sans-serif;
    color: #01426a;
}

.persona-card_summary {
  display: flex;
  flex-direction: column;
}

.persona-card_profile {
    line-height: 1.5;
    font-size: 14px;
/*    font-size: 0.875rem;*/
    font-weight: normal;
    color: #404040;
    font-family: "Inter", sans-serif;
}

/* Behaviors row */
.persona-card_behaviors {
    margin-top: 23px;
    padding: 13px 15px;
    border-radius: 5px;
    border: 1px solid #e6e6e6;
    background-color: #f5f5f5;
/*    box-shadow: 0 0px 5px rgba(0,0,0,0.04);*/
}

.persona-card_label {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1a1a1a;
    flex-shrink: 0;
    font-size: 15px;
/*    font-size: 0.938rem;*/
    line-height: 1.5;
    text-shadow: none;
    font-weight: 600;
    font-family: "Inter", sans-serif;
}

.persona-card_behaviors-text {
    line-height: 1.5;
    font-size: 14px;
/*    font-size: 0.875rem;*/
    font-weight: normal;
    font-family: "Inter", sans-serif;
    margin-top: 5px;
    color: #404040;
}

/* Bottom: frustrations + goals panels */
.persona-card_bottom {
    margin-top: 23px;
    display: flex;
    gap: 23px;
    align-items: stretch;
}

.persona-panel {
  flex: 1 1 0;
}

.persona-panel h4 {
    margin: 0px; 
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1a1a1a;
    flex-shrink: 0;
    font-size: 15px;
/*    font-size: 0.938rem;*/
    line-height: 1.5;
    text-shadow: none;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    margin-bottom: 5px;
}

.text-list.personas {
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
    line-height: 1.5;
    font-size: 14px;
/*    font-size: 0.875rem;*/
    font-weight: normal;
    font-family: "Inter", sans-serif;
    margin: 0;
}

.text-list.personas li {
    font-size: 14px;
/*    font-size: 0.875rem;*/
    line-height: 1.5;
    text-shadow: none;
    font-weight: normal;
    font-family: "Inter", sans-serif;
}

/* Optional subtle color accents if you want different tints */
.persona-panel-frustrations {
    padding: 13px 15px;
    border-radius: 5px;
    border: 1px solid #e6e6e6;
    background-color: #FEE7E9;
/*    box-shadow: 0 0px 5px rgba(0,0,0,0.04);*/
}

.persona-panel-goals {
    padding: 13px 15px;
    border-radius: 5px;
    border: 1px solid #e6e6e6;
    background-color: #EAFBEF;
/*    box-shadow: 0 0px 5px rgba(0,0,0,0.04);*/
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .persona-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .persona-card_top {
    grid-template-columns: 1fr;
  }

  .persona-card_photo img {
    max-width: 260px;
    margin: 0 auto;
    display: block;
  }

  .persona-card_bottom {
    flex-direction: column;
  }
}

/* Reserve enough room for the profile blurb so cards line up */
/*
@media (min-width: 992px) {
  .persona-card_profile {
    min-height: 84px;
  }
}
*/






/* ============================
   COLOR PALETTE SECTION
   ============================ */

.color-palette-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    margin-top: 28px;
    margin-bottom: 35px;
    flex-wrap: nowrap; /* stay in one row on desktop */
}

/* Make sure the container doesn't center captions */
.color-palette-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* keeps caption + image left aligned */
}

.color-palette-img {
    width: 100%;
    height: auto;
    display: block;
}

.nars-color-caption {
    color: #1a1a1a;
    color: #404040;
    text-align: left;
    font-size: 18px;
/*    font-size: 1.125rem;*/
    font-weight: 600;
    margin: 0px 0px 5px 0px;
}

/* ----- Mobile: stack them ----- */
@media (max-width: 767px) {
    .color-palette-container {
        flex-direction: column;
        gap: 48px;
    }

    .color-palette-item {
        max-width: 100%;
        margin: auto;
    }

    .color-palette-img {
        width: 100%;
        max-width: 80%; /* optional: keeps them from becoming huge */
        margin: 0 auto;
    }
    
    .nars-color-caption {
        margin: auto;
        margin-bottom: 10px;
    }
}






/*
img.journey-map {
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(51,51,51, .25);
    border: 1px solid #a6a6a6;
}
*/






/* ===== PERSONA HTML CARDS ===== */
/*
:root{
  --card-bg: #ffffff;
  --panel-bg: #f2f2f2;
  --ink: #1a1a1a;
  --muted: #666666;
  --shadow: 0 2px 12px rgba(0,0,0,0.12);
  --radius-lg: 12px;
  --radius-sm: 10px;

  --base-w: 1040px;
  --base-h: 620px;
}


.persona-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

@media (max-width: 1200px){
  .persona-grid{
    grid-template-columns: 1fr; 
  }
}


.persona-wrap{
  container-type: inline-size;    
  width: 100%;

}

.persona-wrap{

  --s: min(1, calc(100cqw / var(--base-w)));
}


.persona-sizer{
  inline-size: calc(var(--base-w) * var(--s));
  block-size: calc(var(--base-h) * var(--s));
  position: relative;
}


.persona-card--nars{
  position: absolute;
  inset: 0;
  inline-size: var(--base-w);
  block-size: var(--base-h);
  transform: scale(var(--s));
  transform-origin: top left;

  background: var(--card-bg);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 28px 32px;
  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.persona-top{
  display: grid;
  grid-template-columns: 1fr 1.7fr; 
  gap: 28px;
  align-items: start;
}

.persona-photo img{
  width: 360px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}


.persona-name{
  margin: 0 0 6px 0;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
}
.persona-subtitle{
  margin: 0 0 14px 0;
  font-size: 18px;
  color: var(--muted);
}
.persona-quote{
  margin: 0 0 14px 0;
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
}
.persona-body{
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #2a2a2a;
}


.persona-bottom{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.persona-panel{
  background: var(--panel-bg);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
.persona-panel h4{
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 700;
  color: #333;
}
.persona-panel ul{
  margin: 0;
  padding-left: 22px;
}
.persona-panel li{
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 6px;
}
*/






















.scorpeo-bold { 
    color: #f4633a; 
}

b.nars { 
    font-weight: 600;
    color: #01426a;
}

.nars-bold { 
    color: #01426a;
/*    font-weight: 600;*/
}

.my-bold-black { 
    color: #1a1a1a;
    font-weight: 600;
}


p.text-header {
    font-weight: 600;
    font-size: 24px;
/*    font-size: 1.5rem;*/
    color: #1a1a1a;
    background-color: inherit;
    border-bottom: none;
    padding: 0px;
/*    margin: 10px 0px;*/
}

p.text-header.title {
    margin-bottom: 2.5px;
    font-weight: 600 !important;
    font-family: "Inter", sans-serif;
    font-size: 22px;
/*    font-size: 1.375rem;*/
    line-height: 1.5;
    text-shadow: none;
}

p.text-header.title.leland {
    color: #006837;
}

p.text-title {
    font-weight: 600;
    font-size: 22px;
/*    font-size: 1.375rem;*/
    color: #1a1a1a;
    margin: 0px 0px 10px 0px;
    text-align: left;
}

p.text-title.section-label {
    font-weight: 600;
/*    margin-top: 100px;*/
    max-width: fit-content;
    border-bottom: 5px solid #bfbfbf;
    border-bottom: 5px solid #cccccc;
/*
    border-bottom: 5px solid #d9d9d9;
    border-bottom: 5px solid rgba(204,204,204, .8);
*/
/*    border-bottom: #dddddd solid 5px;*/
/*    border-left: 5px solid #bfbfbf;*/
/*
    border-left: 3px solid #1a1a1a;
    padding-left: 5px;
*/
    
    font-weight: 600;
    /* margin-top: 100px; */
    max-width: fit-content;
    border: 1px solid #bdbdbd;
    border-bottom: 5px solid #bdbdbd;
    border: 1px solid #a6a6a6;
    border-bottom: 5px solid #a6a6a6;
    /* border-bottom: 3px solid #cccccc; */
    /* border-bottom: 3px solid #bdbdbd; */
    /* border-bottom: #dddddd solid 5px; */
    /* border-left: 5px solid #bfbfbf; */
    /* color: #01426a;*/
}



p.text-title.section-label.thank-you {
    text-align: center;
    margin-top: 0px;
    text-transform: inherit;
    letter-spacing: inherit;
    border: none;
    max-width: inherit;
    background-color: transparent !important;
    font-family: "Baloo 2", sans-serif;
    font-size: 22px;
/*    font-size: 1.375rem;*/
    margin-bottom: 0;
    padding: 0;
}


p.text-title.section-label {

    
        /* margin-top: 64px; */
         font-weight: 600;
/*     margin-top: 100px; */
    max-width: fit-content;
    border-bottom: 5px solid #bfbfbf;
    border-bottom: 5px solid #cccccc;
    /* border-bottom: #dddddd solid 5px; */
    /* border-left: 5px solid #bfbfbf; */
    font-weight: 600;
     margin-top: 100px; 
    max-width: inherit;
    border-bottom: 5px solid #a6a6a6;
    /* border-bottom: 3px solid #cccccc; */
    /* border-bottom: 3px solid #bdbdbd; */
    /* border-bottom: #dddddd solid 5px; */
    /* border-left: 5px solid #bfbfbf; */
    background-color: rgba(191, 191, 191, 0.3);
    background-color: rgba(224, 224, 224, 0.5);
    background-color: #fafafa;
    border-radius: 8px;
    padding: 5px 10px 2px 10px;
    padding: 5px 10px 2px 10px;
    /* max-width: inherit;
/*
    border-bottom: #dddddd solid 1px;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;*/

}


p.text-label {
    font-family: "Inter", sans-serif;
    color: #1a1a1a;
    font-size: 16px;
/*    font-size: 1rem;*/
    line-height: 1.5;
    font-weight: 600;
}

p.text-par {
    font-family: "Inter", sans-serif;
    color: #404040;
    font-size: 16px;
/*    font-size: 1rem;*/
    line-height: 1.5;
    font-weight: normal;
}

p.text-par.sub-label {
    margin-top: 50px;
    font-size: 18px;
/*    font-size: 1.125rem;*/
    margin-bottom: 13px;
    border-bottom: 3px solid #bfbfbf;
    max-width: fit-content;
    padding: 0px 0px 2.5px 0px;
    color: #1a1a1a;
}

p.text-par a {
   color: #4f7f99;
    text-decoration: underline;
    font-weight: 600;
    font-size: 18px;
/*    font-size: 1.125rem;*/
}

p.text-par a:hover {
  text-decoration: underline;
}

span.text-par {
    font-family: "Inter", sans-serif;
    color: #404040;
    font-size: 16px;
/*    font-size: 1rem;*/
    line-height: 1.5;
    font-weight: normal;
}


span.card-content-text {
    font-weight: normal;
}

span.card-content-text-bold {
    font-weight: 600;
}

img.thank-you {
    width: 40%;
    max-width: 50%;
    /* max-width: 40%; */
    width: 225px;
/*    margin-top: 60px;*/
/*    margin-bottom: 15px;*/
}







.sections-container {
/*    border: 1px solid #f2f2f2; */
    /* border: 1px solid #e6e6e6; */
    /* border: 1px solid #e0e0e0; */
    /* border: 1px solid rgba(191, 191, 191, 0.3); */
    /* border: 1px solid #e6e6e6; */
    /* background-color: #fafafa; */
    /* border-radius: 8px; */
    margin: 100px 0;
    /* padding: 5px 10px 2px 10px; */
    /* padding: 10px 15px 7px 15px;*/
}

p.text-title.section-label {
    font-weight: 600;
    margin-top: 0;
    max-width: fit-content;
    border-bottom: 5px solid #a6a6a6;
    /* background-color: rgba(191, 191, 191, 0.3); */
    /* background-color: rgba(224, 224, 224, 0.5); */
    /* background-color: #fafafa; */
     background-color: white; 
    border-radius: 0;
    padding: 0px 10px 0px 0px;
    /* padding: 10px 15px 7px 0px; */
    border: none;
    margin-bottom: 13px;
    /* border-bottom: 5px solid #e6e6e6; */
    border-bottom: 5px solid #bfbfbf;
    /* border-bottom: 5px solid #d9d9d9; */
    /* border-bottom: 5px solid #cccccc; */
    /* border-bottom: 5px solid #e0e0e0;*/
}


.sections-content {
/*    padding: 7px 15px 20px 15px;*/
}


/*
.section-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4rem auto;
    border-bottom: 3px solid #01426a;
    width: 35%;
}

.section-divider .dots {
    letter-spacing: 7px;
    color: #a6a6a6;
    user-select: none;
    font-size: 16px;
    font-size: 1rem;
    user-select: none;
}
*/










/* ===== Grid rows: desktop 2-up, mobile stacked ===== */
.survey-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 60px;
}
.survey-row.single {
  grid-template-columns: 1fr;
}

/* Each question container */
/*
.survey-item {
  background: transparent;      
  border: 0;
  padding: 0;
}
*/

.survey-item.center {
  max-width: 920px;
  margin: 0 auto;
}

/* Body: answers left, pie right */
.survey-body {
  display: flex;
  align-items: center;           /* vertically center legend with pie */
  justify-content: space-between;
  gap: 20px;
  margin-top: 15px;               /* space under question text */
}

/* Legend (answers) */
.survey-legend {
  flex: 1 1 auto;
  text-align: left;
    color: #404040;
}

.legend-list {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
    color: #404040;
}

.legend-list li {
  font-size: 16px;
/*    font-size: 1rem;*/
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
    font-family: "Inter", sans-serif;
    font-weight: normal;
    color: #404040;
}


.text-list {
    list-style: disc;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    gap: 7px;
    padding-left: 50px;
    color: #404040;
}

.text-list li {
    list-style: disc;
    font-size: 16px;
/*    font-size: 1rem;*/
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Inter", sans-serif;
    display: list-item; /* crucial! restores the bullet */
  list-style-type: disc;
    font-weight: normal;
    color: #404040;
}


ul.text-list.top-content {
    padding-left: 20px;
}

/*
li.no-list-type {
    list-style-type: none;
}
*/



/* Colored dots to mirror chart palette */
.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
      border: 1px solid rgba(51,51,51, .25);
}
.dot-blue  { background: #E6F5FF; }  /* light blue */
.dot-green { background: #EAFBEF; }  /* light green */
.dot-yellow{ background: #FCF7E8; }  /* pale yellow */
.dot-pink  { background: #FEE7E9; }  /* soft pink */

/* Pie chart image: fixed width, centered vertically */
.survey-chart-img img {
  width: 175px;                 /* requested fixed size */
  height: auto;
  display: block;
}

/* ===== Responsiveness ===== */
@media (max-width: 992px) {
  .survey-row {
    grid-template-columns: 1fr;  /* stack rows on tablet/mobile */
  }
  .survey-body {
    flex-direction: column;      /* legend above pie on small screens */
    align-items: center;
  }
    
  p.text-par.survey-Q {
    text-align: center;
  }
/*
  .survey-chart-img img {
    width: 240px;
  }
*/
}

/*
@media (max-width: 480px) {
  .legend-list li {
    font-size: 15px;
  }
  .survey-chart-img img {
    width: 220px;
  }
}
*/

.accessibility-note {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
}

.accessibility-note.green {
    background-color: #EAFBEF;
    border-left: 5px solid #219C46;
    margin-top: 28px;
}

.accessibility-note.blue {
    background-color: #E6F5FF;
    border-left: 5px solid #01426A;
}

.accessibility-note.red {
    background-color: #FEE7E9;
    border-left: 5px solid #B6091A;
}

.accessibility-note.black {
    background-color: #f5f5f5;
    border-left: 5px solid #333333;
}

.note-block {
  background: #f7f7f7;
  padding: 14px 18px;
  border-left: 4px solid #4F7F99; /* subtle NARS blue accent */
  border-radius: 6px;
  margin: 20px 0;
}

.note-inline {
/*  padding: 12px 0;*/
    font-size: 16px;
/*  font-size: 1rem;*/
  color: #333;
  opacity: 0.9;
}



/* If you use a fixed header, this prevents anchors hiding under it. */
.anchor-target {
  scroll-margin-top: var(--header-h, 80px);
  outline: none;
}

/* Quick visual cue after jump */
@keyframes anchorFlash {
  0%   { background-color: rgba(207, 177, 71, 0.25); }
  100% { background-color: transparent; }
}
.flash-highlight {
  animation: none;
}

/* Optional global smooth scrolling for non-JS anchor clicks */
/*html { scroll-behavior: smooth; }*/





















/* --- SECTION LABEL STYLE --- */
.section-label {
/*
  color: #01426a;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
*/
/*
  border-left: 4px solid #1a1a1a;
  padding-left: 10px;
  margin-bottom: 20px;
*/
}








/* FOOTER */
footer {
    color: white;
    padding: 1.5rem 0;
    background: #1a1a1a;
    /* z-index: 1000; */
    border-top: 1px solid rgba(230, 230, 230, .3);
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #1a1a1a; /* your background color */
  color: #ffffff;
  padding: 22.5px 0;
  z-index: 9999;
}


.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
/*    text-align: center;*/
    position: relative;
    z-index: 1;
    padding-right: 0px;
    padding-left: 0px;
}




p.copyright-text {
    color: #f2f2f2;
    font-size: 16px;
/*    font-size: 1rem;*/
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease;
}

a.navbar-brand.footer {
    display: inline-block;
    font-size: 16px;
    transition: color 0.3s;
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-right {
    display: flex;
    gap: 1rem;
}

.footer-right a {
    color: #f2f2f2;
    font-size: 16px;
/*    font-size: 1rem;*/
    text-decoration: none;
    transition: color 0.3s;
}

.footer-right a:hover {
    color: #cf4784;
    transition: color 0.3s;
}

.footer-right a i.fa-brands.fa-linkedin {
    text-decoration: none;
    transition: color 0.3s;
}

.footer-right a i.fa-brands.fa-linkedin:hover {
    color: #0097A7;
    text-decoration: none;
    transition: color 0.3s;
}

i.fa-brands.fa-linkedin:hover {
    color: #0097A7;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-right a i.fa.fa-envelope {
    text-decoration: none;
    transition: color 0.3s;
}

.footer-right a i.fa.fa-envelope:hover {
    color: #CFAE00;
    text-decoration: none;
    transition: color 0.3s;
}

i.fa.fa-envelope:hover {
    color: #CFAE00;
    text-decoration: none;
    transition: color 0.3s;
}



footer .gradient-white {
    position: absolute;
    width: 100%;
    height: 50px;
    top: -50px;
    left: 0px;
}


footer a.back-to-top {
    background-color: #1a1a1a;
    border-top: 1px solid rgba(230, 230, 230, .3);
    border-radius: 50% 50% 0 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -55px;
    margin-left: -50px;
    text-indent: 0;
    color: white;
    font-size: 40px;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
}

footer a.back-to-top:hover {
    transform: translateY(-5px);
    background-color: #1a1a1a;
    color: #4B9F00;
}

footer a.back-to-top::before {
    content: "\f106";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    margin-top: -25px;
}


.footer-sep {
  color: #cf4784; /* or your green or blue */
  margin: 0 4px;
  font-weight: 600;
}

.footer-by {
  color: #cccccc;
    font-weight:300;
}
.footer-sep-text {
/*    color: #cf4784;*/
    color: #CFAE00;
}




/* Hide mobile footer by default, show desktop */
.copyright-text.mobile {
    display: none;
}

.copyright-text.desktop {
    display: block;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    .copyright-text.desktop {
        display: none; /* hide desktop line */
    }
    .copyright-text.mobile {
        display: block; /* show cleaner mobile line */
        text-align: center;
    }
}




@media only screen and (max-width: 768px) { 
    footer a.back-to-top {
    width: 70px;
    height: 70px;
    bottom: -42px;
    font-size: 24px;
        left: 52.5%;
}

footer a.back-to-top:hover {
    transform: translateY(-5px);
    background-color: #1a1a1a;
    color: #4B9F00;
}

footer a.back-to-top::before {
    content: "\f106";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    margin-top: -25px;
}

}




/* Responsive */
@media only screen and (max-width: 767px) {
  .nav-links {
    list-style: none;
    flex-direction: column;
    background: #1a1a1a;
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    padding: 0 0 20px 0;
      border-bottom: 1px solid rgba(230, 230, 230, .3);
    
    /* NEW: animated state */
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
/*
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      max-height 0.25s ease;
*/
    transition:
      opacity 0.6s ease,
      transform 0.6s ease,
      max-height 0.6s ease;

  }

  .nav-links.active {
    /* NEW: visible state */
    opacity: 1;
    transform: translateY(0);
    max-height: 300px; /* big enough to show all links */
    pointer-events: auto;
  }

  .menu-toggle {
    display: block;
    cursor: pointer;
    color: white;
      font-size: 24px;
/*    font-size: 1.5rem;*/
  }

  nav ul.nav-links li a {
    width: 90%;
    margin: auto;
    display: flex;
  }

  nav ul.nav-links li a.leland.active {
    color: #4B9F00;
    font-weight: 700;
  }
    
    nav ul.nav-links li a.scorpeo.active {
    color: #C24A23;
    font-weight: 700;
  }
    
nav ul.nav-links li a.scorpeo.active {
    color: #C24A23;
    font-weight: 700;
  }
}

.nav-link-icons i {
  visibility: hidden;
}
.icons-ready .nav-link-icons i {
  visibility: visible;
}





.col-pie-container {
    position: relative; 
    text-align: center; 
}

.middle-content-middle.pie-container {
    position: relative;
    display: inline-block; 
    margin: 0 auto;
    margin-right: 20px;
}






  .closing-tagline b {
    position: relative;
    display: inline-block;
    color: #333333;
    transition: color 0.4s ease;
  }

  .closing-tagline b::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #cfb147; /* gold accent */
    transform: translateX(-50%);
    transition: width 0.4s ease;
  }

  .closing-tagline b:hover {
    color: #01426a; /* deep NARS blue */
  }

  .closing-tagline b:hover::after {
    width: 100%;
  }























/* Light page background behind cards */
/*
body.nars-page {
  background-color: #f5f5f7;
}
*/

/* Case Study main container (optional but cleaner) */
/*
.case-study-content.NARS {
  max-width: 980px;
  margin: 0 auto;
}
*/

/* SECTION CARD */
.case-block {
  background: #ffffff;
  border-radius: 10px;
  padding: 28px 32px;
  margin: 32px 0;
  box-shadow: 0 0 0 1px rgba(51, 51, 51, .2);
    box-shadow:
    5px 5px 10px rgba(0, 0, 0, 0.1),
    1px 0 0 0 rgba(51, 51, 51, 0.2) inset;
  position: relative;
  overflow: hidden;
}

/* Soft “glow” accent */
.case-block::before,
.case-block::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 0;
}

/*
.case-block::before {
  top: -70px;
  left: -40px;
  background: radial-gradient(
    circle at top left,
    rgba(1, 66, 106, 0.8),
    transparent 60%
  );
}

.case-block::after {
  bottom: -80px;
  right: -40px;
  background: radial-gradient( 
      circle at bottom right, 
      rgba(1, 66, 106, 0.8), 
      transparent 60% );
}
*/

/* Ensure content stays above glow */
.case-block > * {
  position: relative;
  z-index: 1;
}

/* Section Label Styling */
.text-title.section-label {
/*
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 6px;
*/
}

/* First paragraph spacing refinement */
.case-block .text-par:first-of-type {
  margin-top: 4px;
}


























/* COLOR SPLATS */


.splatter-paint {
    width: 8%;
}

.splatterPurple {
    position: absolute;
    width: 7.5%;
/*    left: 60px;*/
    left: 29%;
/*    bottom: 10px;*/
    bottom: 3%;
    /* top: 84%; */
    z-index: 799;
    transform: rotate(40deg);
    animation: zoomIn .5s;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 3s;
    animation-delay: 1s; 
}

@keyframes zoominoutsinglefeatured1 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterPurple {
    left: 26%;
    /* top: 425px; */
    bottom: 3%;
    width: 7%;
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterPurple {
    left: 34%;
    top: 205px;
    }
}
*/

.splatterBlue {
    position: absolute;
    width: 7.5%;
    /* top: 75%; */
/*    bottom: 150px;*/
    bottom: 20%;
/*    left: 100px;*/
    left: 38%;
    transform: rotate(20deg);
    z-index: 799;
    animation: zoomIn 1s;
    /*-webkit-animation-name: zoomIn;
    animation-name: zoomIn;*/
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 5s;
    animation-delay: 3s; 
}

@keyframes zoominoutsinglefeatured3 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterBlue {
    left: 32%;
    /* top: 390px; */
    bottom: 19%;
    width: 7%;
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterBlue {
    left: 55%;
    top: 175px;
    }
}
*/

.splatterGreen {
    position: absolute;
/*    width: 10%;*/
    /* top: 80%; */
    bottom: 13%;
/*    left: 180px;*/
    left: 47%;
    z-index: 799;
    transform: rotate(-18deg);
    animation: zoomIn 1.5s;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 4s;
    animation-delay: 2s; 
}

@keyframes zoominoutsinglefeatured2 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterGreen {
    left: 40%;
    /* top: 5%; */
    bottom: 13.5%;
    width: 7%;
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterGreen {
    left: 46%;
    top: 190px;
    }
}
*/

.splatterOrange {
    position: absolute;
/*    width: 10%;*/
    /* top: 83%; */
/*    left: 130px;*/
    left: 40%;
/*    bottom: 40px;*/
    bottom: 5%;
    z-index: 799;
    transform: rotate(-45deg);
    animation: zoomIn 2s;
    /*animation: zoominoutsinglefeatured4 .1s infinite;*/
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 6s;
    animation-delay: 4s; 
}

@keyframes zoominoutsinglefeatured4 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterOrange {
    left: 35%;
    /* top: 405px; */
    bottom: 6%;
/*    width: 12%;*/
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterOrange {
    left: 36%;
    top: 185px;
    }
}
*/

.splatterYellow {
    position: absolute;
/*    width: 12%;*/
    /* top: 77%; */
/*    bottom: 90px;*/
    bottom: 13%;
/*    left: 50px;*/
    left: 31%;
    transform: rotate(-280deg);
    z-index: 799;
    animation: zoomIn 2s;
    /*animation: zoominoutsinglefeatured4 .1s infinite;*/
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 6s;
    animation-delay: 5s; 
}

@keyframes zoominoutsinglefeatured4 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1,1);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.splatterYellow {
    left: 26%;
    /* top: 385px; */
    bottom: 13%;
/*    width: 12%;*/
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterYellow {
    left: 46%;
    top: 168px;
    }
}
*/



/* EMOJIS */

p.human-emoji {
    font-size: 35px;
}

@media only screen and (max-width: 959px) {
    p.human-emoji {
    font-size: 24px;
    }
}

@media only screen and (max-width: 600px) {
    p.human-emoji {
    font-size: 18px;
    }
}

@media only screen and (max-width: 440px) {
    p.human-emoji {
    font-size: 10px;
    }
}

.human-emoji.emoji-beach {
    position: absolute;
    width: 10%;
/*    left: 60px;*/
    left: 54%;
/*    bottom: 10px;*/
    bottom: 2.5%;
    /* top: 84%; */
    z-index: 799;
    transform: rotate(40deg);
    animation: zoomIn .5s;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 3s;
    animation-delay: 1s; 
}

@keyframes zoominoutsinglefeatured1 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.human-emoji.emoji-beach {
    left: 61%;
    /* top: 425px; */
    bottom: 3%;
/*    width: 11%;*/
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterPurple {
    left: 34%;
    top: 205px;
    }
}
*/

.human-emoji.emoji-cooking {
    position: absolute;
    width: 10%;
    /* top: 75%; */
/*    bottom: 150px;*/
    bottom: 18%;
/*    left: 100px;*/
    left: 57%;
    transform: rotate(270deg);
    z-index: 799;
    animation: zoomIn 1s;
    /*-webkit-animation-name: zoomIn;
    animation-name: zoomIn;*/
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 5s;
    animation-delay: 3s; 
}

@keyframes zoominoutsinglefeatured3 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.human-emoji.emoji-cooking {
    left: 65%;
    /* top: 390px; */
    bottom: 18%;
/*    width: 11%;*/
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterBlue {
    left: 55%;
    top: 175px;
    }
}
*/

.human-emoji.emoji-church {
    position: absolute;
    width: 10%;
    /* top: 80%; */
    bottom: 11%;
/*    left: 180px;*/
    left: 63%;
    z-index: 799;
    transform: rotate(20deg);
    animation: zoomIn 1.5s;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 4s;
    animation-delay: 2s; 
}

@keyframes zoominoutsinglefeatured2 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.human-emoji.emoji-church {
    left: 70%;
    /* top: 5%; */
    bottom: 11%;
/*    width: 12%;*/
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterGreen {
    left: 46%;
    top: 190px;
    }
}
*/

.human-emoji.emoji-painting {
    position: absolute;
    width: 10%;
    /* top: 83%; */
/*    left: 130px;*/
    left: 66%;
/*    bottom: 40px;*/
    bottom: 1.5%;
    z-index: 799;
    transform: rotate(360deg);
    animation: zoomIn 2s;
    /*animation: zoominoutsinglefeatured4 .1s infinite;*/
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 6s;
    animation-delay: 4s; 
}

@keyframes zoominoutsinglefeatured4 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.human-emoji.emoji-painting {
    left: 72%;
    /* top: 405px; */
    bottom: 2%;
/*    width: 12%;*/
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterOrange {
    left: 36%;
    top: 185px;
    }
}
*/

.human-emoji.emoji-legos {
    position: absolute;
    width: 12%;
    /* top: 77%; */
/*    bottom: 90px;*/
    bottom: 12%;
/*    left: 50px;*/
    left: 47%;
    transform: rotate(250deg);
    z-index: 799;
    animation: zoomIn 2s;
    /*animation: zoominoutsinglefeatured4 .1s infinite;*/
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
    -webkit-animation-delay: 6s;
    animation-delay: 5s; 
}

@keyframes zoominoutsinglefeatured4 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1,1);
    }
    100% {
        transform: scale(0,0);
    }
}

@media only screen and (max-width: 768px) {
.human-emoji.emoji-legos {
    left: 55%;
    /* top: 385px; */
    bottom: 12%;
/*    width: 12%;*/
    }
}

/*
@media only screen and (max-width: 480px) {
    .splatterYellow {
    left: 46%;
    top: 168px;
    }
}
*/










.paintbrush {
  position: absolute;
  width: 7%;
  top: 50%;
  left: 30%;
  z-index: 799;
  animation: zoominoutsinglefeatured5 .1s infinite;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; 
  -webkit-animation-delay: 1s;
  animation-delay: 1s; 
}

@keyframes zoominoutsinglefeatured5 {
    0% {
        transform: scale(0,0);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(0,0);
    }
}



@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

.zoomOut {
  -webkit-animation-name: zoomOut;
          animation-name: zoomOut;
}




/* FADE ANIAMTION */


/*in-down*/
@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-down {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .9s;
    -moz-animation-duration: .9s;
    -o-animation-duration: .9s;
    animation-duration: .9s;
    
}




/*in-up*/
@-webkit-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity:0;
        -webkit-transform: translatey(+10px);
        -moz-transform: translatey(+10px);
        -o-transform: translatey(+10px);
        transform: translatey(+10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-up {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .6s;
    -moz-animation-duration: .6s;
    -o-animation-duration: .6s;
    animation-duration: .6s;
}



/* in-left */
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 1;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes fadeInLeft {
    from {
        opacity: 1;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 1;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

.in-left {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;

    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;

    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

/* in-right */
@-webkit-keyframes fadeInRight {
    from {
        opacity: 1;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes fadeInRight {
    from {
        opacity: 1;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 1;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

.in-right {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;

    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;

    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
}







/* Base state for scroll-reveal blocks */
.scroll-reveal {
  opacity: 0;
  transform: translateY(12px);  /* small offset so fadeInUp looks natural */
  will-change: opacity, transform;
/*
    border-bottom: 10px solid red;
    border-bottom-color: green;
*/
}

/* When JS adds these, your existing keyframes kick in */
.scroll-reveal.in-up {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;

    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;

    -webkit-animation-duration: .6s;
    -moz-animation-duration: .6s;
    -o-animation-duration: .6s;
    animation-duration: .6s;
}

.scroll-reveal.in-down {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;

    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;

    -webkit-animation-duration: .6s;
    -moz-animation-duration: .6s;
    -o-animation-duration: .6s;
    animation-duration: .6s;
}

@media (max-width: 767px) {
  .scroll-reveal.in-up,
  .scroll-reveal.in-down {
    animation-duration: 0.4s; /* faster on mobile */
  }
}


/*
@media (max-width: 767px) {
    #scale-page-wrapper {
        transform-origin: 0 0;
        transform: scale(0.75);
        width: calc(100% / 0.75);
    }
}
*/
/*
@media (max-width: 767px) {
  #scale-page-wrapper {
    zoom: 0.75;
  }
}
*/

.mobile-scale-scorpeo {
    margin-top: 50px;
}

@media (max-width: 1440px) {
    html, body {
        margin: 0;
        padding: 0;
    }

    body {
        position: relative;
    }

    #scale-page-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: top left;
        transform: scale(0.90);
        width: calc(100% / 0.90);
    }

    .section-content {
        width: 100%;
/*        max-width: 1340px;*/
/*        max-width: 83%;*/
        max-width: 80%;
    }
    
    .mobile-scale {
        margin-top:75px !important;
  }
    
    .mobile-scale-scorpeo {
        margin-top: 123px;
    }
}




@media (max-width: 1200px) {
    .section-content {
        width: 100%;
/*        max-width: 1340px;*/
/*        max-width: 83%;*/
        max-width: 90%;
    }

}







/* ===== Core Competencies ===== */

/* Desktop: 5 items in a row, whole block centered under heading */
.grid-competencies {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px;
  margin: 27px auto 0;      /* centers the whole grid container */
  max-width: 1140px;        /* optional: keeps it from stretching super wide */
}

/* Each competency: emoji left, text right */
.grid-item.compentencies {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Emoji column */
.grid-emoji {
    flex: 0 0 auto;
    font-size: 32px;
    line-height: 1;
    top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Text */
.grid-item.compentencies .head-text-tagline.about-me {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
    text-align: left;
}


.grid-competencies.tech-stack {
    gap: 0;
    max-width: 80%;
}


/* ===== Tablet & below: switch to flex so partial rows center ===== */
@media (max-width: 1100px) {
  .grid-competencies {
    display: flex;              /* swap from grid → flex */
    flex-wrap: wrap;
    justify-content: center;    /* centers all rows + partial rows */
    gap: 20px;
  }
    
    .grid-competencies.tech-stack {
        max-width: 100%;
        gap: 50px;
    }

  /* 3 items per row → first row 3, second row 2 (centered) */
  .grid-item.compentencies {
    flex: 0 1 calc(33.333% - 20px);
    max-width: 200px;
  }
    h2.align-center {
    text-align: center;
}
}

/* Mobile: 2 per row → 2 / 2 / 1 (last one centered) */
@media (max-width: 700px) {
  .grid-item.compentencies {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    flex: inherit;
      margin-left: 15px;
/*    max-width: inherit;*/
  }
    
    .grid-competencies.tech-stack {
        max-width: 100%;
        gap: 25px;
    }
}

@media (max-width: 400px) {
    
    .grid-competencies.tech-stack {
        max-width: 100%;
        gap: 20px;
    }
}



/*
.me-section-break {
    margin: auto;
    margin-bottom: 15px;
    width: 37%;
    margin-top: 65px;
}
*/






/* --- Override your grid behavior (add-only) ---
   Your current CSS swaps to grid/1-col under 992px. We force carousel layout. */
.container-show-n-tell-images,
.container-show-n-tell-images.two-frames {
  display: block !important;
}

/* Arrow buttons injected by JS */
.snt-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(51,51,51,.25);
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.snt-arrow:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.snt-arrow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(207, 71, 132, .35);
}

.snt-arrow.left  { left: 8px; }
.snt-arrow.right { right: 8px; }

/* Disable look */
.snt-arrow[disabled] {
  opacity: .35;
  cursor: not-allowed;
  transform: translateY(-50%) scale(1);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}



/* Default (non-carousel) layout restored unless JS says it's ready */
.container-show-n-tell-images:not([data-snt-carousel-ready="true"]) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 23px !important;
  align-items: stretch !important;
}

@media (max-width: 992px) {
  .container-show-n-tell-images:not([data-snt-carousel-ready="true"]) {
    grid-template-columns: 1fr !important;
  }
}

/* Carousel mode only when ready */
.container-show-n-tell-images[data-snt-carousel-ready="true"] {
  position: relative;
  overflow: hidden;
  display: block !important;
}

.container-show-n-tell-images[data-snt-carousel-ready="true"] .snt-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 23px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.container-show-n-tell-images[data-snt-carousel-ready="true"] .snt-track::-webkit-scrollbar {
  display: none;
}

.container-show-n-tell-images[data-snt-carousel-ready="true"] .SNT-item {
  flex: 0 0 calc((100% - (23px * 2)) / 3);
  scroll-snap-align: start;
}

@media (max-width: 992px) {
  .container-show-n-tell-images[data-snt-carousel-ready="true"] .SNT-item {
    flex: 0 0 calc((100% - 23px) / 2);
  }
}

@media (max-width: 600px) {
  .container-show-n-tell-images[data-snt-carousel-ready="true"] .SNT-item {
    flex: 0 0 100%;
  }
}