/* --------------------

TABLE OF CONTENTS 

# GLOBALS
    # DEFINE GLOBAL VARIABLES (CUSTOM PROPERTIES)
    # SET GLOBAL COLORS
    # SET GLOBAL TYPOGRAPHY
    # GLOBAL MEDIA (images, video, svg)
    # GLOBAL HELPERS
    # GLOBAL RESETS
        # ENABLE SMOOTH SCROLLING

# LAYOUT
    # CONTAINER
    # GRID SYSTEM (12 column)

# SITE STRUCTURE
    # HEADER
        # LOGO
        # SITE NAV
    # MAIN
        # SECTIONS
    # FOOTER

# UI COMPONENTS
    # BUTTONS
    # CARDS
    # HR (HORIZONTAL RULE)
    # CODE BLOCKS
    # SWIPER SLIDER (CAROUSEL)

    (WE WILL ADD MORE HERE)

# CUSTOM SITE STYLING (OPINIONATED)
    # BODY GRID LAYOUT SYSTEM (header, main, and footer)
    # HEADER ON TOP OF HERO
    # CUSTOM HERO STYLING
    # CUSTOM PAGE LAYOUT - 2 COLUMNS: ASIDE + MAIN CONTENT
    # STICKYBOX
    # NMA TYPE BLOCK

# ANIMATIONS
    # REGULAR ON PAGE LOAD ANIMATIONS
    # SCROLL-TRIGGERED ANIMATIONS

----------------------- */

/* ------------------
        GLOBALS 
--------------------- */

/* DEFINE GLOBAL VARIABLES */
:root {

  /* DEFINE BASE COLORS */
  --color-white: #fff;
  --color-white-90: #F5F5F5;
  --color-whiteblue: rgb(223, 229, 249);
  --color-black: #000;
  --color-black-80: rgb(0 0 0 / .8);
  --color-black-60: #0A0A0D;
  --color-greendark: #06092c;

  --color-grey-100: rgb(0 0 0 / .05);
  --color-grey-200: rgb(0 0 0 / .2);
  --color-grey-300: rgb(0 0 0 / .4);


  --color-pink: #c75c7e;
  /* --color-pink: #CB7E96; */
  --color-blue-30: #C2E4E6;
  --color-teal: #35B6B9;
  --color-teal-200: #b2eaeb;

  --color-blue-GM: #043170;
  --color-gold-GM: #D8A008;
  --color-paleblue-GM: #BEC1D8;
  --color-grayblue-GM: #7f84a9;
  --color-yellow-GM: #FEE3A1;

  --color-salmon-book: rgb(232, 151, 119);
  --color-lightsalmon: rgb(255, 160, 122);
  --color-fushia: rgb(198, 14, 91);

  --color-chocolate: #896644;
  --color-dkbrown: #6a3a06;

  --color-orange: #ff7f50;
  --color-juice: #ffa200;
  --color-fresh: #fa3f3f;

  --color-fit: #ed187c;
  --color-pole: #a46675;
  --color-goddess: #581a1b;

  --color-blue-100: #dbeafe;
  --color-blue-400: #3b82f6;
  --color-blue-800: #3654a8;
  --color-blue-900: #294491;

  --color-green-100: #d1fae5;
  --color-green-200: #a0f2be;
  --color-green-400: #22c55e;
  --color-green-600: #0E9B42;
  --color-green-800: #166534;
  --color-green-900: #004419;

  /* DEFINE SEMANTIC COLORS */
  --color-body-background: var(--color-greendark);
  --color-body-text: var(--color-white-90);
  --color-body-text-dark: var(--color-teal);

  --color-primary: var(--color-blue-400);
  --color-primary-dark: var(--color-blue-900);
  --color-secondary: var(--color-green-400);

  /* ACTION COLORS */
  --color-links: var(--color-pink);
  --color-links-hover: var(--color-teal);
  --color-links-light: var(--color-blue-100);

  /* SECTION SPECIFIC */
  --color-siteheader-background: transparent;
  --color-siteheader-links: var(--color-teal);
  --color-siteheader-links-hover: var(--color-pink);
  --color-sitefooter-background: var(--color-grey-100);
  --color-hero-background: var(--color-blue-100);

  /* BORDERS */
  --color-border: var(--color-grey-200);
  --border-radius: 5px;
  --border-thickness: .5px;

  /* SIZING UNITS */
  --unit-2xs: 0.25rem;
  --unit-xs: 0.5rem;
  --unit-s: 1rem;
  --unit-m: 1.5rem;
  --unit-l: 2rem;
  --unit-xl: 3rem;
  --unit-2xl: 4rem;
  --unit-3xl: 6rem;
  --container-width: 1100px;

  /* GLOBAL FONTS */
  /* --font-body: system-ui, Helvetica, arial, sans-serif;
  --font-headings: Georgia, Times, "Times New Roman", serif; */



  /* GOOGLE FONTS */
  /* <weight>: Use a value from 200 to 800
  <uniquifier>: Use a unique and descriptive class name */

  .bricolage-grotesque {
    font-family: "Bricolage Grotesque", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }

  /* <weight>: Use a value from 100 to 900
 <uniquifier>: Use a unique and descriptive class name */

  .public-sans {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  /* GLOBAL FONTS */

  --font-body: Public Sans,
  Lato,
  arial,
  "helvetica neue",
  sans-serif;

  --font-headings: Bricolage Grotesque,
  serif;

}

/* SET GLOBAL COLORS */
body {
  background-color: var(--color-body-background);
  color: var(--color-body-text);
}

/* HEADINGS */
h1,
h2,
h3 {
  color: var(--color-body-text-dark);

  /* ADD SUPPORT FOR TEXTWRAP BALANCE */
  text-wrap: balance;
}

/* LIMIT THE NUMBER OF CHARACTERS PER LINE FOR ALL PARAGRAPHS */
p {
  max-inline-size: 66ch;
}

/* REMOVE WIDOWS FOR ALL PARAGRAPHS AND LIST ITEMS*/
p,
li {
  text-wrap: pretty;
}

/* LINKS */
a {
  color: var(--color-links);

  /* STYLE THE UNDERLINE */
  text-decoration-color: var(--color-links-light);
  text-underline-offset: .135em;
  text-decoration-thickness: .1em;
}

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

/* GLOBAL TYPOHRAPHY */
body {
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.4;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-headings);
}

/* GLOBAL MEDIA */

/* IMAGES (Responsive)
 Responsive on small screens
 Do not stretch too large (beyond the orignal)
 on large screens */
img {
  max-width: 100%;
  height: auto;
}

/* GLOBAL HELPERS */

.text-centered {
  text-align: center;
}

/* CENTER PARAGRAPHS INSIDE CENTERED PARENTS */
.text-centered p {
  margin-inline: auto;
}

/* HIDE CONTENT VISUALLY (BUT KEEP FOR SEO AND ACCESSIBILITY) */
.hide-visually,
.visually-hidden,
.screen-reader-only {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* GLOBAL RESETS */

/* Remove the default 8pm margin on body */
body {
  margin: 0;
}

/* Set all elements to box sizing border box */
* {
  box-sizing: border-box;
}

/* SMOOTH SCROLLING */
html {
  scroll-behavior: smooth;
}

/* ADD OFFSET TO ALL INLINE ANCHOR LINKS */
:target {
  scroll-margin-top: var(--unit-m);
}


/* ------------------
      LAYOUT 
--------------------- */

/* CONTAINER */

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--unit-s);
}


/* GRID SYSTEM (12 column) */

.row {
  --grid-gap: var(--unit-s);
}

.row>* {
  margin-block-end: var(--grid-gap);
}

/* NEW width SYNTAX (updated from min-width: 768px)  */
@media (width >=768px) {

  .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }

  /* COMMONLY USED SEMANTIC COLUMNS */
  .one-whole {
    grid-column: auto / span 12;
  }

  .one-half {
    grid-column: auto / span 6;
  }

  .one-third {
    grid-column: auto / span 4;
  }

  .two-thirds {
    grid-column: auto / span 8;
  }

  .one-fourth {
    grid-column: auto / span 3;
  }

  .three-fourths {
    grid-column: auto / span 9;
  }

  /* SWAP (REVERSE COLUMNS) - WORKS ONLY w/ 2 COLUMNS */
  .row.swapped>*:first-child {
    order: 2;
  }

  .row.swapped>*:last-child {
    order: 1;
  }

  /* CENTERED COLUMNS */
  .one-half.centered {
    grid-column-start: 4;
  }

  .two-thirds.centered {
    grid-column-start: 3;
  }

  /* 12 COLUMN CLASS-BASED GRID SYSTEM */
  .col-1 {
    grid-column: auto / span 1;
  }

  .col-2 {
    grid-column: auto / span 2;
  }

  .col-3 {
    grid-column: auto / span 3;
  }

  .col-4 {
    grid-column: auto / span 4;
  }

  .col-5 {
    grid-column: auto / span 5;
  }

  .col-6 {
    grid-column: auto / span 6;
  }

  .col-7 {
    grid-column: auto / span 7;
  }

  .col-8 {
    grid-column: auto / span 8;
  }

  .col-9 {
    grid-column: auto / span 9;
  }

  .col-10 {
    grid-column: auto / span 10;
  }

  .col-11 {
    grid-column: auto / span 11;
  }

  .col-12 {
    grid-column: auto / span 12;
  }

  /* PUSHES */
  .push-1 {
    grid-column-start: 2;
  }

  .push-2 {
    grid-column-start: 3;
  }

  .push-3 {
    grid-column-start: 4;
  }

  .push-4 {
    grid-column-start: 5;
  }

  .push-5 {
    grid-column-start: 6;
  }

  .push-6 {
    grid-column-start: 7;
  }

  .push-7 {
    grid-column-start: 8;
  }

  .push-8 {
    grid-column-start: 9;
  }

  .push-9 {
    grid-column-start: 10;
  }

  .push-10 {
    grid-column-start: 11;
  }

  .push-11 {
    grid-column-start: 12;
  }
}


/* FOR DEMO PURPOSES ONLY */
.row.demo>* {
  background-color: #eee;
  text-align: center;
  padding: var(--unit-s);
}

/* ------------------
  SITE STRUCTURE 
--------------------- */

/* SITE HEADER */
.site-header {
  background-color: var(--color-siteheader-background);
  padding-block: var(--unit-s);
  padding-inline: var(--unit-s);

  /* DISPLAY LOGO ON LEFT AND NAV ON RIGHT */
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  gap: var(--unit-s);
  flex-wrap: wrap;
}

/* REMOVE HEADER PADDING IF IT HAS A CONTAINER */
.site-header:has(.container) {
  padding-inline: 0;
}

/* LOGO STYLING */
.site-header .logo {
  display: flex;
  align-items: center;
  gap: var(--unit-s);
}

.site-header .logo svg {
  max-height: 50px;
  min-width: 50px;
}

/* CHRS COYIER'S FIX FOR GAP UNDR INLINE IMAGES AND SVG*/
.site-header .logo img,
.site-header .logo svg {
  vertical-align: middle;
}

.site-header .logo h1 {
  font-size: 1.3125rem;
  margin: 0;
}

.site-header .logo a {
  text-decoration: none;
}

/* MAIN SITE NAV */

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--unit-s);
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--color-siteheader-links);
  text-decoration: none;
  font-weight: bold;
  display: block;
  padding: var(--unit-xs);
  padding-block-start: calc(var(--unit-xs) + .1em);

}

.site-nav a:hover {
  color: var(--color-siteheader-links-hover);
  text-decoration: underline;
  text-decoration-color: var(--color-links);
  text-underline-offset: .5em;
  text-decoration-thickness: .1em;
}

/* SHOW MENU BUTTON ON HIGHER LAYER WHEN NAV IS OPEN */
.site-nav .menubutton {
  position: relative;
  z-index: 100;
  border: none;
  font-size: inherit;
  font-family: inherit;
  padding: var(--unit-xs);
  margin-block-start: var(--unit-xs);
  background-color: transparent;
}

/* SMALL SCREENS: SHOW MENU BUTTON, HIDE NAV */
.site-nav .menubutton {
  display: block;
}

.site-nav ul {
  display: none;
}

/* BIG SCREENS:  HIDE MENU BUTTON, SHOW NAV*/
@media (width >=768px) {
  .site-nav .menubutton {
    display: none;
  }

  .site-nav ul {
    display: flex;
  }
}

/* SMALL SCREENS ONLY: ENABLE OVERLAY NAV */
@media (width < 768px) {

  .site-nav[data-menustate] ul {
    display: grid;
    align-content: center;
    justify-content: center;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    /* transition: translate 0.3s ease-out; */
  }

  .site-nav[data-menustate] a {
    color: var(--color-white);
  }

  .site-nav[data-menustate="open"] ul {
    translate: 0 0;
    animation: openMenuAnimation 0.3s forwards;
  }

  .site-nav[data-menustate="closed"] ul {
    translate: 100% 0;
    animation: closeMenuAnimation 0.3s forwards;
  }

  @keyframes openMenuAnimation {
    0% {
      translate: 100% 0;
    }

    100% {
      translate: 0 0;
    }
  }

  @keyframes closeMenuAnimation {
    0% {
      translate: 0 0;
    }

    100% {
      translate: 100% 0;
    }
  }

  /* ENABLE SVG ANIMATION FOR THE NAVICON */
  .site-nav svg.simple-navicon rect {
    transition: all .3s ease-out;
    fill: var(--color-primary);
  }

  /* CHANGE COLOR OF THE SVG NAVICON WHEN MENU IS OPEN */
  .site-nav[data-menustate="open"] svg.simple-navicon rect {
    fill: var(--color-white);
  }

  /* ANIMATE NAVICON LINES TO AN X WHEN OPEN */
  .site-nav .simple-navicon {
    display: block;

  }

  .site-nav .simple-navicon rect {
    transform-origin: center;
    width: 100%;
  }

  .site-nav[data-menustate="open"] .simple-navicon {
    position: fixed;
    top: calc(var(--unit-s) + var(--unit-s));
    right: calc(var(--unit-s) + var(--unit-xs));
  }

  .site-nav[data-menustate="open"] .simple-navicon-top {
    rotate: 45deg;
    translate: -21% 24%;
  }

  .site-nav[data-menustate="open"] .simple-navicon-middle {
    opacity: 0;
  }

  .site-nav[data-menustate="open"] .simple-navicon-bottom {
    rotate: -45deg;
    translate: -21% -24%;
  }

}


/* SITE MAIN */
.site-main {
  background-color: transparent;
}

/* STYLING FOR ALL SECTIONS */
section {
  padding-block: var(--unit-2xl);
}

.hero {
  background-color: var(--color-hero-background);
  padding-block: var(--unit-xl);
  padding-inline: var(--unit-s);
}

.hero:has(.container) {
  padding-inline: 0;
}


/* SITE FOOTER */
.site-footer {
  background-color: var(--color-sitefooter-background);
  padding-block: var(--unit-2xl);
  padding-inline: var(--unit-s);
}

/* REMOVE FOOTER PADDING IF IT HAS A CONTAINER */
.site-footer:has(.container) {
  padding-inline: 0;
}

/* ------------------
  UI COMPONENTS 
--------------------- */

/* BUTTONS */
.button {
  background-color: var(--color-links);
  color: var(--color-white);
  padding: var(--unit-s) var(--unit-m);
  margin-block: var(--unit-2xs);
  display: inline-block;
  text-decoration: none;
  border-radius: var(--border-radius);
  line-height: 1;
}

.button:hover {
  background-color: var(--color-links-hover);
  color: var(--color-white);
}

/* CARDS */
.card {
  border: var(--border-thickness) solid var(--color-border);
  display: inline-block;
  padding: var(--unit-s);
  border-radius: var(--border-radius);
}

.color-swatch {
  --_swatch-color: grey;
  background-color: var(--_swatch-color);
  width: 150px;
  height: 150px;
}

/* HR */
hr {
  border: none;
  border-bottom: var(--border-thickness) solid var(--color-border);
  margin: var(--unit-xl) 0;
}

/* Code Blocks */
pre:has(code) {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-inline: var(--unit-m);
  border-radius: var(--border-radius);
  white-space: pre-wrap;
}

/* SWIPER CSS STYLING */

.swiper {
  padding-block-end: 2rem;
  text-align: center;
}


.swiper-wrapper {}

/* MOVE SWIPER ARROWS OUTSIDE OF SWIPER */
.swiper-button-prev,
.swiper-button-next {
  background-color: var(--color-white);
  padding: var(--unit-xs);
  border-radius: 100%;

}

/* TEMP WAY TO MOVE ARROWS OUTSIDE OF SWIPER */
.swiper {
  padding-inline: 50px;
}

/* TEMP SOLUTION COVERS THE CONTENT WITH A WHITE BG, FIX IN THE FUTURE IF THERE IS TIME */
.swiper-button-prev {
  translate: -4px -50%;
  background-color: white;
  height: 100%;
  border-radius: 0;
  top: 0;
  left: 0;
}

.swiper-button-next {
  translate: 4px -50%;
  background-color: white;
  height: 100%;
  border-radius: 0;
  top: 0;
  right: 0;
}

/* REMOVE COLOR CARD WIDTHS AND HEIGHTS WHEN INSIDE A SWIPER SLIDE */
.swiper-slide .card {
  display: block;
}

.swiper-slide .color-swatch {
  width: 100%;
  min-height: 150px;
}

/* ------------------
  CUSTOM SITE STYLING 
--------------------- */

/* PUSH THE FOOTER TO THE BOTTOM BY DEFAULT */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

/* TO FIX OVERFLOW WORD BREAK */
body>* {
  min-width: 0;
}

/* NUDGE THE NAV ITEMS DOWN TO ALIGN WITH IMAGE LOGO TEXT */
.site-header .site-nav a {
  padding-block-start: calc(var(--unit-xs) + .35em);
}

/* RENDER HEADER ON TOP OF HERO */
.site-header.on-top-of-hero {
  position: absolute;
  width: 100%;
}

.site-header.on-top-of-hero+.site-main .hero {
  padding-block-start: calc(var(--unit-3xl) + var(--unit-xl));
}

/* CUSTOM HERO STYLING */
@media (width >1400px) {
  .hero {
    padding-inline: calc((100vw - var(--container-width)) / 2);
  }
}



.hero h1 {
  font-size: clamp(2.5em, 4vw, 4em);
  margin-block: 0;
  overflow-wrap: break-word;
}

.hero p {
  text-wrap: balance;
}

.hero-portfolio {
  display: grid;
  grid-template-columns: 1em repeat(12, 1fr) 1em;
  grid-template-rows: repeat(7, 100px);
}

.hero-main-content {
  /* padding: var(--unit-xl); */
  grid-column: 2 / 7;
  grid-row: 3 / 5;
  z-index: 60;
  /* border: 1px solid blue; */
}

.hero-title {
  font-size: var(--unit-2xl);
  /* font-size: clamp(2.5rem, 5vw, 5rem); */
  /* margin: 0; */
  line-height: 1.1;
  grid-column: 3 / 6;
  grid-row: 3 / 5;
  /* border: 1px solid purple; */
  text-transform: uppercase;
  font-weight: lighter;
  letter-spacing: 13px;
  color: var(--color-whiteblue);
}

.hero-title-jackie-text {
  font-weight: bold;
  letter-spacing: 2px;
}

.hero-text {
  grid-column: 9 / 14;
  grid-row: 7 / 9;
  z-index: 90;
  /* border: 1px solid red; */

}

.hero-eyebrow {
  font-size: .875rem;
  font-weight: bold;
  text-transform: uppercase;
  opacity: .5;
  line-height: 1;
  color: var(--color-pink);
}

/* .button.resume {
  grid-column: 2 / 4;
  grid-row: 8 / 8;
  align-content: center;
  background-color: var(--color-teal);
  text-transform: uppercase;
  color: var(--color-greendark);
} */

.button.contact {
  grid-column: 5 / 7;
  grid-row: 8 / 9;
  /* border: 1px solid seagreen; */
  align-content: center;
  background-color: var(--color-teal);
  /* font-size: 1em; */
  text-transform: uppercase;
  /* padding: var(--unit-s) var(--unit-l); */
  color: var(--color-greendark);
}

.button.contact:hover {
  background-color: var(--color-pink);
}




@keyframes banner-change {
  0% {
    right: -200vw;
    filter: brightness(0.7) grayscale(0.6);
  }

  20.5% {
    right: -200vw;
    filter: brightness(0.7) grayscale(0.6);
  }

  22.5% {
    right: -200vw;
    filter: brightness(0) grayscale(0.6);
  }

  23% {
    right: -100vw;
    filter: brightness(0) grayscale(0.6);
  }

  25% {
    right: -100vw;
    filter: brightness(0.7) grayscale(0.6);
  }

  45.5% {
    right: -100vw;
    filter: brightness(0.7) grayscale(0.6);
  }

  47.5% {
    right: -100vw;
    filter: brightness(0) grayscale(0.6);
  }

  48% {
    right: 0vw;
    filter: brightness(0) grayscale(0.6);
  }

  50% {
    right: 0vw;
    filter: brightness(0.7) grayscale(0.6);
  }

  70.5% {
    right: 0vw;
    filter: brightness(0.7) grayscale(0.6);
  }

  72.5% {
    right: 0vw;
    filter: brightness(0) grayscale(0.6);
  }

  73% {
    right: 100vw;
    filter: brightness(0) grayscale(0.6);
  }

  75% {
    right: 100vw;
    filter: brightness(0.7) grayscale(0.6);
  }

  95.5% {
    right: 100vw;
    filter: brightness(0.7) grayscale(0.6);
  }

  97.5% {
    right: 100vw;
    filter: brightness(0) grayscale(0.6);
  }

  98% {
    right: 200vw;
    filter: brightness(0) grayscale(0.6);
  }

  100% {
    right: 200vw;
    filter: brightness(0.7) grayscale(0.6);
  }
}



@media (width <=768px) {
  /* .hero {
    padding-inline: var(--unit-s);
  } */

  .hero-portfolio {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(10, 70px);
  }

  .hero-main-content {
    /* padding: var(--unit-xl); */
    grid-column: 2 / 9;
    grid-row: 5 / 8;
    z-index: 60;
    /* border: 1px solid white; */

  }

  .hero-title {
    font-size: 2em;
    line-height: 1.1;
    grid-column: 3 / 6;
    grid-row: 3 / 5;
    /* border: 1px solid purple; */
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 5px;
    color: var(--color-whiteblue);
  }

  .hero-title-jackie-text {
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1.3em;
  }

  .hero-text {
    grid-column: 2 / 9;
    grid-row: 8 / 10;
    z-index: 90;
    /* border: 1px solid red; */
  }

  .hero-eyebrow {
    font-size: .875rem;
    font-weight: bold;
    text-transform: uppercase;
    opacity: .5;
    line-height: 1;
    color: var(--color-pink);

  }

  .gallery-container {
    grid-column: 2 / 13;
    grid-row: 6 / 7;
  }



  .button.resume {
    grid-column: 2 / 6;
    grid-row: 10 / 11;
  }

  .button.contact {
    grid-column: 8 / 12;
    grid-row: 10 / 11;
    z-index: 60;
  }

}

.button.contact {
  background-color: var(--color-teal);
}

.button.contact:hover {
  background-color: var(--color-pink);
}

/* CUSTOM PAGE LAYOUT - 2 COLUMNS: ASIDE + MAIN CONTENT */


@media (width >=768px) {

  .pagelayout-wrapper-twocolumn {
    display: flex;
    gap: var(--unit-l);
  }

  .pagesection-aside {
    width: 25%;
  }

  .pagesection-maincontent {
    width: 75%;
  }

}

/* STICKYBOX */
/* NOTE NEEDED ON SMALL SCREENS, SO IT IS SET INSIDE OF A MEDIA QUERY SO IT ALLOWS THE OVERLAY MENU TO RENDER ON TOP ON SMALL SCREENS */
@media (width >=768px) {
  .stickybox {
    position: sticky;
    top: var(--unit-m);
  }
}

/* NMA TYPE BLOCK */

.nma-eyebrow {
  font-size: .875rem;
  font-weight: bold;
  text-transform: uppercase;
  opacity: .5;
  line-height: 1;
}

.nma-headline {
  font-size: 3rem;
  margin-block: var(--unit-s);
  line-height: 1.1;
}

.nma-subheadline {
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  margin-block: var(--unit-xs);
  opacity: .7;
  line-height: 1.2;
}


/* ------------------
      ANIMATIONS 
--------------------- */

/* REGULAR ON PAGE LOAD ANIMATIONS */

.slide-from-top-and-fade-in {
  animation-name: slide-from-top-and-fade-in;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, .5, .5, 1);
  animation-fill-mode: forwards;
  opacity: 0;
  translate: 0 -40px;
}

@keyframes slide-from-top-and-fade-in {
  0% {
    opacity: 0;
    translate: 0 -40px;
  }

  100% {
    opacity: 1;
    translate: 0 0;
  }
}


.slide-from-left-and-fade-in {
  animation-name: slide-from-left-and-fade-in;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0, 1, 0, 1);
  animation-fill-mode: forwards;
  opacity: 0;
  translate: -20px 0;
}

@keyframes slide-from-left-and-fade-in {
  0% {
    opacity: 0;
    translate: -20px 0;
  }

  100% {
    opacity: 1;
    translate: 0 0;
  }
}

.delay-0 {
  animation-delay: 0s;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.2s;
}

.delay-3 {
  animation-delay: 0.3s;
}

.delay-4 {
  animation-delay: 0.5s;
}

.delay-5 {
  animation-delay: 0.7s;
}

.delay-6 {
  animation-delay: 0.9s;
}


/* SCROLL-TRIGGERED ANIMATION */

/* FIX SCROLL BAR ON ALL SCROLL ANIMATION SECTIONS */
section:has(.observe-me) {
  overflow-x: clip;
}

/* on scroll slide-in from the left */
.observe-me.onscroll-slide-in-from-left {

  /* Simple way */
  opacity: 0;
  translate: -20px 0;
  transition: all .5s ease-out .2s;

  /* Complicated way */
  /* --duration: .5s;
  --delay: .2s;
  opacity: 0;
  translate: -20px 0;
  transition: 
      translate var(--duration) ease-out var(--delay), 
      opacity var(--duration) linear var(--delay); */

}

.observe-me[data-viewstate="active"].onscroll-slide-in-from-left {
  opacity: 1;
  translate: 0 0;
}

/* on scroll slide-in from the right */
.observe-me.onscroll-slide-in-from-right {
  opacity: 0;
  translate: 20px 0;
  transition: all .5s ease-out .2s;
}

.observe-me[data-viewstate="active"].onscroll-slide-in-from-right {
  opacity: 1;
  translate: 0 0;
}

.observe-me.delay-0 {
  transition-delay: 0s;
}

.observe-me.delay-1 {
  transition-delay: 0.1s;
}

.observe-me.delay-2 {
  transition-delay: 0.2s;
}

.observe-me.delay-3 {
  transition-delay: 0.3s;
}

.observe-me.delay-4 {
  transition-delay: 0.5s;
}

.observe-me.delay-5 {
  transition-delay: 0.7s;
}

.observe-me.delay-6 {
  transition-delay: 0.9s;
}

/* PORTFOLIO */



.projects-title {
  text-transform: uppercase;
  /* border: 1px solid red; */
  color: var(--color-black-60);
  background-color: var(--color-pink);
  padding: var(--unit-xs) var(--unit-m);
  padding-left: 13.4em;
  margin-left: -50%;
  text-align: right;
  font-size: 2em;
  letter-spacing: 5px;

}

.project-h3-title {
  font-size: 3em;
  /* border: 1px solid red; */
  text-transform: uppercase;
  margin-block: 0;
}

.box-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(5, 90px);


}

.box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* LAYOUT 1*/
.box-layout-1 {
  .box-text {
    grid-column: 1 / 8;
    grid-row: 1 / 6;
    z-index: 60;
    padding: 3em;
    padding-top: 4em;
    /* border: 1px solid red; */
  }

  .box-image {
    grid-column: 6 / 13;
    grid-row: 1 / 6;
    z-index: 50;
    /* border: 1px solid green; */
  }

  .box-description {
    margin-left: 40px;
    line-height: 2;
    /* border: 1px solid white; */
  }

  .button-layout {
    margin-left: 40px;
    text-transform: uppercase;
    /* border: 1px solid yellow; */
  }
}


/* LAYOUT 2*/
.box-layout-2 {
  .box-text {
    grid-column: 7 / 13;
    grid-row: 1 / 6;
    z-index: 60;
    padding: 3em;
    padding-top: 4em;
    /* border: 1px solid red; */
  }

  .box-image {
    grid-column: 1 / 9;
    grid-row: 1 / 7;
    z-index: 50;
    /* border: 1px solid green; */
  }

  .box-description {
    margin-left: 40px;
    line-height: 2em;
    /* border: 1px solid white; */
  }

  .button-layout {
    text-transform: uppercase;
    margin-left: 40px;
    /* border: 1px solid yellow; */
  }
}




@media (width <=768px) {

  .box-layout {
    display: grid;
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-template-rows: repeat(15, 50px);


  }

  .projects-title {
    text-transform: uppercase;
    color: var(--color-black-60);
    background-color: var(--color-pink);
    display: inline-block;
    /* padding: var(--unit-xs) var(--unit-m); */
    /* padding-left: 13.4em; */
    /* margin-left: -50%; */
    /* text-align: left; */
    font-size: 2em;
    letter-spacing: 5px;

  }

  .project-h3-title {
    font-size: 1.5em;
    /* border: 1px solid red; */
    text-transform: uppercase;
  }

  .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  .box-layout-1,
  .box-layout-2 {
    .box-text {
      grid-column: 1 / 15;
      grid-row: 6 / 10;
      z-index: 60;
      padding: 3em;
      padding-top: 4em;
      /* border: 1px solid red; */
    }

    .box-image {
      grid-column: 1 / 15;
      grid-row: 1 / 8;
      z-index: 50;
      /* border: 1px solid green; */
    }

    .box-description {
      /* margin-left: 40px; */
      line-height: 1.6;
      grid-column: 1 / 13;
      grid-row: 9 / 16;
      /* border: 3px solid white; */
    }

    .button-layout {
      /* margin-left: 40px; */
      text-transform: uppercase;
      /* border: 1px solid yellow; */
    }
  }

}




/* FOOTER */

.footer {
  width: 100%;
  position: relative;
  height: auto;
  background-color: var(--color-white);
  padding: 2em;

}

.footer.home-footer {
  width: 100%;
  position: relative;
  height: auto;
  background-color: transparent;
  padding: 2em;

}

.footer .col {
  width: 190px;
  height: auto;
  float: left;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 0px 20px 20px 20px;
}

.footer .col h1 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 17px;
  padding: 20px 0px 5px 0px;
  color: #ab5e82;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.250em;

}

.footer .col ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.footer .col ul li a {
  color: #999999;
  font-size: 14px;
  font-family: "Public Sans", sans-serif;
  font-weight: bold;
  padding: 5px 0px 5px 0px;
  cursor: pointer;
  transition: .2s;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  text-decoration: none;
}

.social ul li a {
  display: inline-block;
  padding-right: 5px !important;
}

.footer .col ul li a:hover {
  color: #ab5e82;
  transition: .1s;
  -webkit-transition: .1s;
  -moz-transition: .1s;
}

.clearfix {
  clear: both;
}

@media only screen and (min-width: 1280px) {
  .contain {
    width: 1200px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 1139px) {
  .contain .social {
    width: 1000px;
    display: block;
  }

  .social h1 {
    margin: 0px;
  }
}

@media only screen and (max-width: 950px) {
  .footer .col {
    width: 33%;
  }

  .footer .col h1 {
    font-size: 14px;
  }

  .footer .col ul li {
    font-size: 13px;
  }
}

@media only screen and (max-width: 500px) {
  .footer .col {
    width: 50%;
  }

  .footer .col h1 {
    font-size: 14px;
  }

  .footer .col ul li {
    font-size: 13px;
  }
}

@media only screen and (max-width: 340px) {
  .footer .col {
    width: 100%;
  }
}


/* SPIN TEXT IN HERO */

.spin {
  color: var(--color-pink);
}

.spin:after {
  content: "";
  animation: spin 12s linear infinite;
  /* animation-duration: 10s; */
}

@keyframes spin {
  0% {
    content: "web designer/devloper";
  }

  25% {
    content: "massage therapist";
  }

  50% {
    content: "graphic designer";
  }

  75% {
    content: "philomath";
  }

  100% {
    content: "tattoo lover";
  }
}

/* SPIN GALLERY IN HERO */
.gallery {
  color: var(--color-pink);
}

.gallery-container {
  max-width: 100%;
  height: auto;
  grid-column: 5 / 11;
  grid-row: 2 / 10;
  z-index: 50;
  clip-path: circle(50%);
  animation-name: gallery;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.gallery:after {
  content: "";
  animation: gallery 10s linear infinite;

}

@keyframes gallery {
  0% {
    /* opacity: 1; */
    content: url('../images-2026/jackie-code.jpg');
  }

  25% {
    /* opacity: 0; */
    content: url('../images-2026/Jackie-treatment-code2.jpg');
  }

  50% {
    /* opacity: 0; */
    content: url('../images-2026/jackie-cupping3.jpg');
  }

  75% {
    /* opacity: 0; */
    content: url('../images-2026/jackie-folding3.jpg');
  }

  100% {
    /* opacity: 1; */
    content: url('../images-2026/jackie-tracing-gray.jpg');
  }

}


.list-icon {
  list-style: none;


  li {
    position: relative;
    padding-left: 40px;
    line-height: 1.2;
    margin-block: 20px;
    text-wrap: balance;
  }

  img {
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -5px;
    left: 0;

  }
}


/* HERO SUBPAGE */

.site-main.subpage {
  background-color: var(--color-white);
  color: var(--color-black-80);
  padding-block: var(--unit-2xl);
  padding-inline: var(--unit-l);
}

.hero-subpage {
  /* background-color: var(--color-blue-100); */
  /* border: 1px solid orchid; */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* grid-template-rows: repeat(10, 100px); */
}

.hero-subpage-content {
  grid-column: 3 / 11;
  grid-row: 2 / 4;
  display: inline;

  /* z-index: 60; */
  /* padding: 2em; */
  /* border: 5px solid orange; */


  .hero-subpage-title {
    font-size: 4em;
    /* display: inline; */
    color: var(--color-grayblue-GM);
    text-transform: uppercase;
    letter-spacing: .5vw;
    font-size: 6vw;
    min-width: fit-content;
    margin: 0;
    white-space: nowrap;
    /* text-align: center; */
    /* border: 3px solid purple; */
    /* margin-top: 1.5em; */
    grid-column: 4 / 11;
    grid-row: 2 / 4;
  }

  .hero-sub-eyebrow {
    text-align: right;
    /* margin-right: 210px; */
    /* display: inline; */
    text-transform: capitalize;
    /* margin-bottom: -120px; */
    color: var(--color-black-60);
    /* border: 1px solid yellow; */

  }

  .lower-title {
    /* text-align: left;
    margin-left: 200px;
    margin-top: -55px; */
    display: inline;
    color: var(--color-black-60);
    /* border: 1px solid green; */
  }

}


.case-study {
  grid-column: 1 / 3;
  font-size: 1em;
  margin-top: 0;
  /* text-align: center; */
  padding: 15px 10px 5px;
  text-transform: uppercase;
  /* background-color: var(--color-paleblue-GM); */
  color: var(--color-blue-GM);
  letter-spacing: 2px;
  display: inline;
  border-top: 10px solid var(--color-blue-GM);
}

.hero-subpage-text {
  background-color: var(--color-white);
  line-height: 1.6;
  padding: 2em;
  grid-column: 8 / 13;
  grid-row: 4 / 8;
  z-index: 60;

  /* border: 1px solid purple; */

}

.hero-subpage-images {
  grid-column: 2 / 12;
  grid-row: 5 / 11;
  z-index: 50;
  /* border: 1px solid purple; */
}

.paleblue-box {
  background-color: var(--color-paleblue-GM);
  grid-column: 1 / 13;
  grid-row: 8 / 9;
}



/* MOBILE SUBPAGE HERO */
@media (width <=768px) {

  .hero-subpage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, 50px);
  }

  .hero-subpage-images {
    grid-column: 1 / 13;
    grid-row: 2 / 6;
    z-index: 50;
    /* border: 1px solid purple; */
  }

  .hero-subpage-content {
    grid-column: 1 / 13;
    grid-row: 2 / 4;
    z-index: 60;
    padding: 2em;
    /* border: 1px solid green; */


    .hero-subpage-title {
      font-size: 2.2em;
      color: var(--color-white);
      text-transform: uppercase;
      letter-spacing: 3px;

      text-align: center;
      /* border: 3px solid blue; */
      /* margin-top: 1.5em; */
    }

    .hero-sub-eyebrow {
      /* text-align: center; */
      margin-right: 0px;
      text-transform: capitalize;
      /* margin-bottom: -80px; */
      color: var(--color-white);
      /* border: 1px solid yellow; */

    }

    .lower-title {
      text-align: center;
      margin-left: 0px;
      margin-top: -40px;
      color: var(--color-white);
      /* border: 1px solid green; */
    }
  }

  .case-study {
    grid-column: 1 / 6;
    font-size: 1em;
    margin-top: 0;
    text-align: center;
    padding: 15px 10px 5px;
    text-transform: uppercase;
    background-color: var(--color-gold-GM);
    color: var(--color-white);
    letter-spacing: 2px;
    /* border: 1px solid red; */
  }


  .hero-subpage-text {
    /* background-color: var(--color-white); */
    display: flex;
    justify-content: flex-end;
    line-height: 1.6;
    padding: 3em;
    grid-column: 1 / 13;
    grid-row: 6 / 13;
    z-index: 60;
    /* border: 1px solid hotpink; */
    padding: 1em;
  }
}



/* GUIDED MASSAGE */

.subpage-GM {
  color: var(--color-gold-GM);
  text-transform: uppercase;
}

.scope-color {
  color: var(--color-grayblue-GM);
  line-height: 1.6;
  /* border: 1px solid orange; */
}

.box-layout-GM {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(12, 70px);
}

.box-layout-GM-1 {

  .div-1 {
    grid-column: 1 / 5;
    grid-row: 1 / 4;
    /* border: 1px solid red; */
  }

  .div-2 {
    grid-column: 1 / 5;
    grid-row: 5 / 8;
    /* border: 1px solid green; */
    margin-right: 3em;
  }

  .div-3 {
    grid-column: 1 / 5;
    grid-row: 9 / 12;
    /* border: 1px solid blue; */
    margin-right: 3em;

  }

  .div-4 {
    grid-column: 6 / 7;
    grid-row: 1 / 5;

    /* border: 1px solid purple; */

    video {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  .text.section1 {
    background-color: var(--color-paleblue-GM);
    color: var(--color-blue-GM);
    grid-column: 4 / 8;
    grid-row: 10 / 12;
    padding: 2em;
  }

}


.subpage-GM.subtitle {
  text-align: right;
}

.text.section-branding {
  background-color: var(--color-paleblue-GM);
  color: var(--color-blue-GM);
  /* padding: 2em; */
  /* margin-left: -90px;
  margin-top: -23px; */
  padding: 2em;
  /* padding-left: 90px; */

}

/* two column row */
@media (width < 768px) {
  .row.two-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
  }

}


/* MOBILE GM  */
@media (width <=768px) {
  /* margin-bottom: var(--unit-m); */

  .box-layout-GM {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(20, 70px);
  }

  .box-layout-GM-1 {

    .div-1 {
      grid-column: 1 / 13;
      grid-row: 1 / 5;
      /* border: 1px solid red; */
    }

    .div-2 {
      grid-column: 1 / 13;
      grid-row: 6 / 10;
      /* border: 1px solid green; */
      /* margin-right: 3em; */
    }

    .div-3 {
      grid-column: 1 / 13;
      grid-row: 11 / 15;
      /* border: 1px solid blue; */
      /* margin-right: 3em; */

    }

    .div-4 {
      grid-column: 1 / 13;
      grid-row: 16 / 21;
      /* border: 1px solid purple; */

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .text.section1 {
      background-color: var(--color-paleblue-GM);
      color: var(--color-blue-GM);
      grid-column: 1 / 13;
      grid-row: 21 / 23;
      padding: 2em;
    }

  }


}

/* BEFORE AND AFTER IMAGE SLIDER */

#gallery {
  position: relative;
  width: 350px;
  height: 750px;
  /* max-width: 1000px; */
  aspect-ratio: 1000/700;
  overflow: hidden;
  border: .5px solid var(--color-blue-GM);
}

.image-compare {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Layers */
.before-layer,
.after-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.before-layer img,
.after-layer img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
  display: none;
}

/* show only current slide */
.before-layer img.active,
.after-layer img.active {
  display: block;
}

.after-layer {
  clip-path: inset(0 50% 0 0);
  /* half by default */
}

#dragger {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 100%;
  background: var(--color-yellow-GM);
  cursor: pointer;
  z-index: 2;
  transform: translateX(-50%);
  /* animation: animatedragger 10s ease-in-out infinite both; */
}

/* @keyframes animatedragger {
  0% {
    left: 0%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 0%;
  }

} */

.caption-container {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.caption {
  display: none;
  /* background: var(--color-gold-GM);
  padding: 10px; */
  /* border-radius: 4px; */
  font-size: 1.1em;
  color: var(--color-blue-GM);
}

.caption.active {
  display: block;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

.newPic {
  background: var(--color-paleblue-GM);
  border: 2px solid var(--color-blue-GM);
  border-radius: 4px;
  padding: 6px 18px;
  margin: 5px;
  cursor: pointer;
  font-size: 1.1em;
  color: 043170;
}

.newPic:hover {
  background: var(--color-yellow-GM);
}

@media (max-width:600px) {
  .newPic {
    font-size: 1em;
    padding: 5px 15px;
  }

  #dragger {
    width: 25px;
  }
}

.text.section-wireframes {
  background-color: var(--color-paleblue-GM);
  color: var(--color-blue-GM);
  /* padding: 2em; */
  /* margin-left: -90px;
  margin-top: -23px; */
  padding: 2em;

  /* padding-left: 90px; */

}


.icons {
  color: var(--color-blue-GM);

}


/* BOOK COVER */


.text.section-book {
  background-color: var(--color-black-60);
  color: var(--color-white);
  padding: 2em;
}

.site-main.subpage {
  background-color: var(--color-white);
  color: var(--color-black-80);
  padding-block: var(--unit-2xl);
  padding-inline: var(--unit-l);
}

.hero-subpage.book {
  /* background-color: var(--color-blue-100); */
  /* border: 1px solid orchid; */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 100px);
}

.hero-subpage-content.book {
  grid-column: 3 / 11;
  grid-row: 2 / 4;
  display: inline;

  /* z-index: 60; */
  /* padding: 2em; */
  /* border: 5px solid orange; */


  .hero-subpage-title.book {
    font-size: 3em;
    /* display: inline; */
    color: var(--color-salmon-book);
    text-transform: uppercase;
    letter-spacing: 8px;
    text-align: center;
    /* border: 3px solid purple; */
    /* margin-top: 1.5em; */
    grid-column: 4 / 11;
    grid-row: 2 / 4;
  }

  .hero-sub-eyebrow.book {
    /* text-align: right; */
    /* margin-right: 210px; */
    /* display: inline; */
    text-transform: capitalize;
    /* margin-bottom: -120px; */
    color: var(--color-black-60);
    /* border: 1px solid yellow; */

  }

}


.case-study.book {
  grid-column: 1 / 4;
  font-size: 1em;
  margin-top: 0;
  text-align: center;
  padding: 15px 10px 5px;
  text-transform: uppercase;
  background-color: var(--color-lightsalmon);
  color: var(--color-white);
  letter-spacing: 2px;
  display: inline;
  /* border: 1px solid red; */
}

.hero-subpage-text.book {
  background-color: var(--color-white);
  line-height: 1.6;
  padding: 2em;
  grid-column: 8 / 13;
  grid-row: 5 / 8;
  z-index: 60;

  /* border: 1px solid purple; */

}

.hero-subpage-images.book {
  grid-column: 2 / 12;
  grid-row: 6 / 12;
  z-index: 50;
  /* border: 1px solid purple; */
}

.gray-box {
  background-color: var(--color-lightsalmon);
  grid-column: 1 / 13;
  grid-row: 8 / 9;
}



/* BOOK COVER MOBILE */

/* SUB HEADER */
@media (width <=768px) {

  .hero-subpage.book {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, 50px);
  }

  .hero-subpage-images.book {
    grid-column: 1 / 13;
    grid-row: 2 / 6;
    z-index: 50;
    /* border: 1px solid purple; */
  }

  .hero-subpage-content.book {
    grid-column: 1 / 13;
    grid-row: 2 / 4;
    z-index: 60;
    padding: 2em;
    /* border: 1px solid green; */


    .hero-subpage-title.book {
      font-size: 2.2em;
      color: var(--color-white);
      text-transform: uppercase;
      letter-spacing: 3px;

      text-align: center;
      /
      /* margin-top: 1.5em; */
    }

    .hero-sub-eyebrow.book {
      /* text-align: center; */
      margin-right: 0px;
      text-transform: capitalize;
      /* margin-bottom: -80px; */
      color: var(--color-white);
      /* border: 1px solid yellow; */

    }
  }

  .case-study.book {
    grid-column: 1 /8;
    font-size: 1em;
    margin-top: 0;
    text-align: center;
    padding: 15px 10px;
    text-transform: uppercase;
    background-color: var(--color-lightsalmon);
    color: var(--color-white);
    letter-spacing: 2px;
    /* border: 1px solid red; */
  }


  .hero-subpage-text.book {
    /* background-color: var(--color-white); */
    display: flex;
    justify-content: flex-end;
    line-height: 1.6;
    padding: 3em;
    grid-column: 1 / 13;
    grid-row: 6 / 13;
    z-index: 60;
    /* border: 1px solid hotpink; */
    padding: 1em;
  }
}

/* SUB PAGE BODY */

.subpage-book {
  color: var(--color-fushia);
  text-transform: uppercase;
}

.scope-book {
  color: var(--color-salmon-book);
  line-height: 1.6;
}

.box-layout-GM {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(11, 70px);
}

.box-layout-GM-2 {

  .div-1 {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    padding-right: 2em;
  }

  .div-2 {
    grid-column: 1 / 4;
    grid-row: 5 / 8;
    /* border: 1px solid green; */
    margin-right: 3em;
  }

  .div-3 {
    grid-column: 1 / 4;
    grid-row: 8 / 12;
    /* border: 1px solid blue; */
    margin-right: 1em;

  }

  .div-4 {
    grid-column: 4 / 7;
    grid-row: 1 / 10;
    /* border: 1px solid purple; */

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  .text.section-book {
    background-color: var(--color-lightsalmon);
    color: var(--color-black-60);
    grid-column: 4 / 8;
    grid-row: 10 / 12;
    padding: 2em;
  }

}

.subpage-book.subtitle {
  text-align: right;
}

.text.section-branding.book {
  background-color: var(--color-gold-GM);
  color: var(--color-white);
  /* padding: 2em; */
  /* margin-left: -90px;
  margin-top: -23px; */
  padding: 2em;
  /* padding-left: 90px; */

}

.book-titles {
  color: var(--color-salmon-book);
  font-weight: bold;
}

.button.book {
  background-color: var(--color-salmon-book);
  color: var(--color-white);
  text-transform: uppercase;
}

.button.book:hover {
  background-color: var(--color-fushia);
  color: var(--color-white);
  text-transform: uppercase;
}

.book-swiper {
  margin-top: 6em;
}

/* BOOK COVER MOBILE  */
@media (width <=768px) {
  .hero-subpage.book {
    margin-bottom: var(--unit-s);
  }


  .box-layout-GM {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(44, 70px);

  }

  .subpage-book {
    margin: .2em;
  }

  .text-book {
    margin: .2em;
  }

  .book-final-section {
    margin-bottom: 2em;
  }

  .book-final-text {
    padding-block: 2em;
  }

  .book-swiper {
    margin-top: 4em;
  }

  .box-layout-GM-2 {

    .div-1 {
      grid-column: 1 / 13;
      grid-row: 1 / 9;
      /* border: 1px solid red; */
    }

    .div-2 {
      grid-column: 1 / 13;
      grid-row: 10 / 15;
      /* border: 1px solid green; */
      /* margin-right: 3em; */
    }

    .div-3 {
      grid-column: 1 / 13;
      grid-row: 16 / 28;
      /* border: 1px solid blue; */
      /* margin-right: 3em; */

    }

    .div-4 {
      grid-column: 1 / 13;
      grid-row: 29 / 44;
      /* border: 1px solid purple; */

      img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
    }


  }


}

/* SALZBURG */

/* SPIN GALLERY SALZBURG */
/* .gallery {
  color: var(--color-pink);
} */

/* .gallery-container-salzburg {
  max-width: 100%;
  height: auto;
  grid-column: 5 / 11;
  grid-row: 2 / 10;
  z-index: 50;
  animation-name: gallery;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;


  .gallery-container-salzburg:after {
    content: "";
    animation: gallery 10s linear infinite;

  }

  @keyframes gallery {
    0% {
     
      content: url('../images-2026/thebull-dkbrown.png');
    }

    25% {
      
      content: url('../images-2026/thebull-lightbrown.png');
    }

    50% {
     
      content: url('../images-2026/thebull-lightestbrown.png');
    }

    75% {
      
      content: url('../images-2026/thebull-medbrown.png');
    }

    100% {
      
      content: url('../images-2026/thebull-mochabrown.png');
    }

  }
} */

.site-main.subpage {
  background-color: var(--color-white);
  color: var(--color-black-80);
  padding-block: var(--unit-2xl);
  padding-inline: var(--unit-l);
}

.hero-subpage {
  /* background-color: var(--color-blue-100); */
  /* border: 1px solid orchid; */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 100px);
}

.hero-subpage-content.salzburg {
  grid-column: 3 / 11;
  grid-row: 2 / 4;
  display: inline;

  /* z-index: 60; */
  /* padding: 2em; */
  /* border: 5px solid orange; */


  .hero-subpage-title {
    font-size: 4em;
    /* display: inline; */
    color: var(--color-dkbrown);
    text-transform: uppercase;
    letter-spacing: 8px;
    text-align: center;
    /* border: 3px solid purple; */
    /* margin-top: 1.5em; */
    grid-column: 4 / 11;
    grid-row: 2 / 4;
  }

  .hero-sub-eyebrow {
    /* text-align: right; */
    /* margin-right: 210px; */
    /* display: inline; */
    text-transform: capitalize;
    /* margin-bottom: -120px; */
    color: var(--color-black-60);
    /* border: 1px solid yellow; */

  }

  .lower-title {
    /* text-align: left;
    margin-left: 200px;
    margin-top: -55px; */
    display: inline;
    color: var(--color-black-60);
    /* border: 1px solid green; */
  }

}


.case-study.salzburg {
  grid-column: 1 / 3;
  font-size: 1em;
  margin-top: 0;
  text-align: center;
  padding: 15px 10px 5px;
  text-transform: uppercase;
  background-color: var(--color-dkbrown);
  color: var(--color-white);
  letter-spacing: 2px;
  display: inline;
  /* border: 1px solid red; */
}

.hero-subpage-text {
  background-color: var(--color-white);
  line-height: 1.6;
  padding: 2em;
  grid-column: 8 / 13;
  grid-row: 4 / 8;
  z-index: 60;

  /* border: 1px solid purple; */

}

.hero-subpage-images {
  grid-column: 2 / 12;
  grid-row: 5 / 11;
  z-index: 50;
  /* border: 1px solid purple; */
}

.salzburg-box {
  background-color: var(--color-dkbrown);
  grid-column: 1 / 13;
  grid-row: 8 / 9;
}


.subpage-GM.salzburg {
  color: var(--color-dkbrown);
  text-transform: uppercase;
}

.scope-color.salzburg {
  color: var(--color-chocolate);
  line-height: 1.6;
  /* border: 1px solid orange; */
}

.box-layout-GM {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(12, 70px);
}

.box-layout-GM-1 {

  .div-1 {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    /* border: 1px solid red; */
  }

  .div-2 {
    grid-column: 1 / 4;
    grid-row: 5 / 8;
    /* border: 1px solid green; */
    margin-right: 3em;
  }

  .div-3 {
    grid-column: 1 / 4;
    grid-row: 9 / 12;
    /* border: 1px solid blue; */
    margin-right: 3em;

  }

  .div-4 {
    grid-column: 4 / 7;
    grid-row: 1 / 10;
    /* border: 1px solid purple; */

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .text.section1 {
    background-color: var(--color-paleblue-GM);
    color: var(--color-blue-GM);
    grid-column: 4 / 8;
    grid-row: 10 / 12;
    padding: 2em;
  }

}

.subpage-GM.subtitle {
  text-align: right;
}

.text.section-branding {
  background-color: var(--color-paleblue-GM);
  color: var(--color-blue-GM);
  /* padding: 2em; */
  /* margin-left: -90px;
  margin-top: -23px; */
  padding: 2em;
  /* padding-left: 90px; */

}

/* two column row */
@media (width < 768px) {
  .row.two-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
  }

}


/* MOBILE SALZBURG  */

/* SUB HEADER */
@media (width <=768px) {

  .hero-subpage.salzburg {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, 50px);
    padding-bottom: 1em;
  }

  .hero-subpage-images.salzburg {
    grid-column: 1 / 13;
    grid-row: 2 / 6;
    z-index: 50;
    /* border: 1px solid purple; */
  }

  .hero-subpage-content.salzburg {
    grid-column: 1 / 13;
    grid-row: 2 / 4;
    z-index: 60;
    padding: 2em;
    /* border: 1px solid green; */


    .hero-subpage-title.salzburg {
      font-size: 2.2em;
      color: var(--color-white);
      text-transform: uppercase;
      letter-spacing: 3px;

      text-align: center;
      display: none;
      /* margin-top: 1.5em; */
    }

    .hero-sub-eyebrow.salzburg {
      /* text-align: center; */
      margin-right: 0px;
      text-transform: capitalize;
      /* margin-bottom: -80px; */
      color: var(--color-white);
      /* border: 1px solid yellow; */

    }
  }

  .case-study.salzburg {
    grid-column: 1 /8;
    font-size: 1em;
    margin-top: 0;
    text-align: center;
    padding: 15px 10px;
    text-transform: uppercase;
    background-color: var(--color-dkbrown);
    color: var(--color-white);
    letter-spacing: 2px;
    /* border: 1px solid red; */
  }


  .hero-subpage-text.salzburg {
    /* background-color: var(--color-white); */
    display: flex;
    justify-content: flex-end;
    line-height: 1.6;
    padding: 3em;
    grid-column: 1 / 13;
    grid-row: 6 / 13;
    z-index: 60;
    /* border: 1px solid hotpink; */
    padding: 1em;
  }

  .salzburg-box {
    display: none;
  }
}



@media (width <=768px) {

  /* margin-bottom: var(--unit-m); */

  .box-layout-GM.salzburg {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(35, 30px);
  }

  .subpage-GM.salzburg {
    margin-bottom: .2em;
  }

  .box-layout-GM-1.salzburg {

    .div-1 {
      grid-column: 1 / 13;
      grid-row: 1 / 7;
      /* border: 1px solid red; */
    }

    .div-2 {
      grid-column: 1 / 13;
      grid-row: 9 / 17;
      /* border: 1px solid green; */
      /* margin-right: 3em; */
    }

    .div-3 {
      grid-column: 1 / 13;
      grid-row: 19 / 27;
      /* border: 1px solid blue; */
      /* margin-right: 3em; */

    }

    .div-4 {
      grid-column: 1 / 13;
      grid-row: 29 / 41;


      video {
        width: 50%;
        height: auto;
        /* border: 3px solid purple; */
      }
    }

    .text.section1 {
      background-color: var(--color-paleblue-GM);
      color: var(--color-blue-GM);
      grid-column: 1 / 13;
      grid-row: 21 / 23;
      padding: 2em;
    }

  }

  .option {
    margin-bottom: .2em;
    /* border: 1px solid red; */
  }

  .container-img {
    /* border: 1px solid blue; */

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  .one-third.column.salzburg {
    margin-bottom: var(--unit-2xl);
  }
}

.salburg-finalist {
  color: var(--color-chocolate);
  font-weight: bold;
  text-transform: uppercase;
}

.option {
  color: var(--color-grey-300);
}


/* FANCY FRESH FOOD SHOP */


.site-main.subpage {
  background-color: var(--color-white);
  color: var(--color-black-80);
  padding-block: var(--unit-2xl);
  padding-inline: var(--unit-l);
}

.hero-subpage {
  /* background-color: var(--color-blue-100); */
  /* border: 1px solid orchid; */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 100px);
}

.hero-subpage-content.juice {
  grid-column: 3 / 11;
  grid-row: 2 / 4;
  display: inline;

  /* z-index: 60; */
  /* padding: 2em; */
  /* border: 5px solid orange; */


  .hero-subpage-title {
    font-size: 4em;
    /* display: inline; */
    color: var(--color-fresh);
    text-transform: uppercase;
    letter-spacing: 8px;
    text-align: center;
    /* border: 3px solid purple; */
    /* margin-top: 1.5em; */
    grid-column: 4 / 11;
    grid-row: 2 / 4;
  }

  .hero-sub-eyebrow {
    /* text-align: right; */
    /* margin-right: 210px; */
    /* display: inline; */
    text-transform: capitalize;
    /* margin-bottom: -120px; */
    color: var(--color-black-60);
    /* border: 1px solid yellow; */

  }

  .lower-title {
    /* text-align: left;
    margin-left: 200px;
    margin-top: -55px; */
    display: inline;
    color: var(--color-black-60);
    /* border: 1px solid green; */
  }

}


.case-study.juice {
  grid-column: 1 / 3;
  font-size: 1em;
  margin-top: 0;
  text-align: center;
  padding: 15px 10px 5px;
  text-transform: uppercase;
  background-color: var(--color-fresh);
  color: var(--color-white);
  letter-spacing: 2px;
  display: inline;
  /* border: 1px solid red; */
}

.hero-subpage-text {
  background-color: var(--color-white);
  line-height: 1.6;
  padding: 2em;
  grid-column: 8 / 13;
  grid-row: 5 / 8;
  z-index: 60;

  /* border: 1px solid purple; */

}

.hero-subpage-images {
  grid-column: 2 / 12;
  grid-row: 6 / 11;
  z-index: 50;
  /* border: 1px solid purple; */
}

.juice-box {
  background-color: var(--color-fresh);
  grid-column: 1 / 13;
  grid-row: 8 / 9;
}


.subpage-GM.juice {
  color: var(--color-fresh);
  text-transform: uppercase;
}

.scope-color.juice {
  color: var(--color-juice);
  line-height: 1.6;
  /* border: 1px solid orange; */
}

.box-layout-GM {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(12, 70px);
}

.box-layout-GM-1 {

  .div-1 {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    /* border: 1px solid red; */
  }

  .div-2 {
    grid-column: 1 / 4;
    grid-row: 5 / 8;
    /* border: 1px solid green; */
    margin-right: 3em;
  }

  .div-3 {
    grid-column: 1 / 4;
    grid-row: 9 / 12;
    /* border: 1px solid blue; */
    margin-right: 3em;

  }

  .div-4 {
    grid-column: 4 / 7;
    grid-row: 1 / 10;
    /* border: 1px solid purple; */

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .text.section1.juice {
    background-color: var(--color-juice);
    color: var(--color-black-60);
    grid-column: 4 / 8;
    grid-row: 10 / 12;
    padding: 2em;
  }

}

.subpage-GM.subtitle {
  text-align: right;
}

.text.section {
  background-color: var(--color-juice);
  color: var(--color-blue-GM);
  /* padding: 2em; */
  /* margin-left: -90px;
  margin-top: -23px; */
  padding: 2em;
  /* padding-left: 90px; */

}

/* two column row */
@media (width < 768px) {
  .row.two-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
  }

}

.juice-finalist {
  color: var(--color-orange);
  font-weight: bold;
  text-transform: uppercase;
}


/* MOBILE FANCY FRESH FOOD SHOP  */

/* SUB HEADER */
@media (width <=768px) {

  .hero-subpage.juice {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, 50px);
    padding-bottom: 1em;
  }

  .hero-subpage-images.juice {
    grid-column: 1 / 13;
    grid-row: 2 / 6;
    z-index: 50;
    /* border: 1px solid purple; */
  }

  .hero-subpage-content.juice {
    grid-column: 1 / 13;
    grid-row: 2 / 4;
    z-index: 60;
    padding: 2em;
    /* border: 1px solid green; */


    .hero-subpage-title.juice {
      font-size: 2.2em;
      color: var(--color-white);
      text-transform: uppercase;
      letter-spacing: 3px;
      text-align: center;
      /* margin-top: 1.5em; */
    }

    .hero-sub-eyebrow.juice {
      /* text-align: center; */
      margin-right: 0px;
      text-transform: capitalize;
      /* margin-bottom: -80px; */
      color: var(--color-white);
      /* border: 1px solid yellow; */

    }
  }

  .case-study.juice {
    grid-column: 1 /8;
    font-size: 1em;
    margin-top: 0;
    text-align: center;
    padding: 15px 10px;
    text-transform: uppercase;
    background-color: var(--color-dkbrown);
    color: var(--color-white);
    letter-spacing: 2px;
    /* border: 1px solid red; */
  }


  .hero-subpage-text.juice {
    /* background-color: var(--color-white); */
    display: flex;
    justify-content: flex-end;
    line-height: 1.6;
    padding: 3em;
    grid-column: 1 / 13;
    grid-row: 6 / 13;
    z-index: 60;
    /* border: 1px solid hotpink; */
    padding: 1em;
  }

  .salzburg-box {
    display: none;
  }
}



@media (width <=768px) {

  /* margin-bottom: var(--unit-m); */

  .box-layout-GM.juice {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(35, 30px);
  }

  .subpage-GM.juice {
    margin-bottom: .2em;
  }

  .box-layout-GM-1.juice {

    .div-1 {
      grid-column: 1 / 13;
      grid-row: 1 / 7;
      /* border: 1px solid red; */
    }

    .div-2 {
      grid-column: 1 / 13;
      grid-row: 9 / 17;
      /* border: 1px solid green; */
      /* margin-right: 3em; */
    }

    .div-3 {
      grid-column: 1 / 13;
      grid-row: 19 / 27;
      /* border: 1px solid blue; */
      /* margin-right: 3em; */

    }

    .div-4 {
      grid-column: 1 / 13;
      grid-row: 29 / 41;


      video {
        width: 50%;
        height: auto;
        /* border: 3px solid purple; */
      }
    }

    .text.section1 {
      background-color: var(--color-paleblue-GM);
      color: var(--color-blue-GM);
      grid-column: 1 / 13;
      grid-row: 21 / 23;
      padding: 2em;
    }

  }

  .option {
    margin-bottom: .2em;
    /* border: 1px solid red; */
  }

  .container-img {
    /* border: 1px solid blue; */

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  .one-third.column.juice {
    margin-bottom: var(--unit-2xl);
  }
}


.option {
  color: var(--color-grey-300);
}


/* FIT FOR A GODDESS */


.site-main.subpage {
  background-color: var(--color-white);
  color: var(--color-black-80);
  padding-block: var(--unit-2xl);
  padding-inline: var(--unit-l);
}

.hero-subpage {
  /* background-color: var(--color-blue-100); */
  /* border: 1px solid orchid; */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 100px);
}

.hero-subpage-content.fit {
  grid-column: 3 / 11;
  grid-row: 2 / 4;
  display: inline;

  /* z-index: 60; */
  /* padding: 2em; */
  /* border: 5px solid orange; */


  .hero-subpage-title.fit {
    font-size: 4em;
    /* display: inline; */
    color: var(--color-fit);
    text-transform: uppercase;
    letter-spacing: 8px;
    text-align: center;
    /* border: 3px solid purple; */
    /* margin-top: 1.5em; */
    grid-column: 4 / 11;
    grid-row: 2 / 4;
  }

  .hero-sub-eyebrow {
    /* text-align: right; */
    /* margin-right: 210px; */
    /* display: inline; */
    text-transform: capitalize;
    /* margin-bottom: -120px; */
    color: var(--color-black-60);
    /* border: 1px solid yellow; */

  }

  .lower-title {
    /* text-align: left;
    margin-left: 200px;
    margin-top: -55px; */
    display: inline;
    color: var(--color-black-60);
    /* border: 1px solid green; */
  }

}


.case-study.fit {
  grid-column: 1 / 3;
  font-size: 1em;
  margin-top: 0;
  text-align: center;
  padding: 15px 10px 5px;
  text-transform: uppercase;
  background-color: var(--color-fit);
  color: var(--color-white);
  letter-spacing: 2px;
  display: inline;
  /* border: 1px solid red; */
}

.hero-subpage-text {
  background-color: var(--color-white);
  line-height: 1.6;
  padding: 2em;
  grid-column: 8 / 13;
  grid-row: 5 / 8;
  z-index: 60;

  /* border: 1px solid purple; */

}

.hero-subpage-images {
  grid-column: 2 / 12;
  grid-row: 5 / 11;
  z-index: 50;
  /* border: 1px solid purple; */
}

.fit-box {
  background-color: var(--color-fit);
  grid-column: 1 / 13;
  grid-row: 8 / 9;
}


.subpage-GM.juice {
  color: var(--color-fit);
  text-transform: uppercase;
}

.scope-color.juice {
  color: var(--color-pole);
  line-height: 1.6;
  /* border: 1px solid orange; */
}

.box-layout-GM {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(12, 70px);
}

.box-layout-GM-1 {

  .div-1 {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    /* border: 1px solid red; */
  }

  .div-2 {
    grid-column: 1 / 4;
    grid-row: 5 / 8;
    /* border: 1px solid green; */
    margin-right: 3em;
  }

  .div-3 {
    grid-column: 1 / 4;
    grid-row: 9 / 12;
    /* border: 1px solid blue; */
    margin-right: 3em;

  }

  .div-4 {
    grid-column: 4 / 7;
    grid-row: 1 / 10;
    /* border: 1px solid purple; */

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .text.section1.juice {
    background-color: var(--color-juice);
    color: var(--color-black-60);
    grid-column: 4 / 8;
    grid-row: 10 / 12;
    padding: 2em;
  }

}

.subpage-GM.subtitle {
  text-align: right;
}

.text.section {
  background-color: var(--color-juice);
  color: var(--color-blue-GM);
  /* padding: 2em; */
  /* margin-left: -90px;
  margin-top: -23px; */
  padding: 2em;
  /* padding-left: 90px; */

}

/* two column row */
@media (width < 768px) {
  .row.two-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
  }

}

.juice-finalist {
  color: var(--color-orange);
  font-weight: bold;
  text-transform: uppercase;
}


/* MOBILE FANCY FRESH FOOD SHOP  */

/* SUB HEADER */
@media (width <=768px) {

  .hero-subpage.juice {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, 50px);
    padding-bottom: 1em;
  }

  .hero-subpage-images.juice {
    grid-column: 1 / 13;
    grid-row: 2 / 6;
    z-index: 50;
    /* border: 1px solid purple; */
  }

  .hero-subpage-content.juice {
    grid-column: 1 / 13;
    grid-row: 2 / 4;
    z-index: 60;
    padding: 2em;
    /* border: 1px solid green; */


    .hero-subpage-title.juice {
      font-size: 2.2em;
      color: var(--color-white);
      text-transform: uppercase;
      letter-spacing: 3px;
      text-align: center;
      /* margin-top: 1.5em; */
    }

    .hero-sub-eyebrow.juice {
      /* text-align: center; */
      margin-right: 0px;
      text-transform: capitalize;
      /* margin-bottom: -80px; */
      color: var(--color-white);
      /* border: 1px solid yellow; */

    }
  }

  .case-study.juice {
    grid-column: 1 /8;
    font-size: 1em;
    margin-top: 0;
    text-align: center;
    padding: 15px 10px;
    text-transform: uppercase;
    background-color: var(--color-dkbrown);
    color: var(--color-white);
    letter-spacing: 2px;
    /* border: 1px solid red; */
  }


  .hero-subpage-text.juice {
    /* background-color: var(--color-white); */
    display: flex;
    justify-content: flex-end;
    line-height: 1.6;
    padding: 3em;
    grid-column: 1 / 13;
    grid-row: 6 / 13;
    z-index: 60;
    /* border: 1px solid hotpink; */
    padding: 1em;
  }

  .salzburg-box {
    display: none;
  }
}



@media (width <=768px) {

  /* margin-bottom: var(--unit-m); */

  .box-layout-GM.juice {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(35, 30px);
  }

  .subpage-GM.juice {
    margin-bottom: .2em;
  }

  .box-layout-GM-1.juice {

    .div-1 {
      grid-column: 1 / 13;
      grid-row: 1 / 7;
      /* border: 1px solid red; */
    }

    .div-2 {
      grid-column: 1 / 13;
      grid-row: 9 / 17;
      /* border: 1px solid green; */
      /* margin-right: 3em; */
    }

    .div-3 {
      grid-column: 1 / 13;
      grid-row: 19 / 27;
      /* border: 1px solid blue; */
      /* margin-right: 3em; */

    }

    .div-4 {
      grid-column: 1 / 13;
      grid-row: 29 / 41;


      video {
        width: 50%;
        height: auto;
        /* border: 3px solid purple; */
      }
    }

    .text.section1 {
      background-color: var(--color-paleblue-GM);
      color: var(--color-blue-GM);
      grid-column: 1 / 13;
      grid-row: 21 / 23;
      padding: 2em;
    }

  }

  .option {
    margin-bottom: .2em;
    /* border: 1px solid red; */
  }

  .container-img {
    /* border: 1px solid blue; */

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  .one-third.column.juice {
    margin-bottom: var(--unit-2xl);
  }
}


.option {
  color: var(--color-grey-300);
}