/* ==========================================================================
       1. VARIABLES
       ========================================================================== */
    :root {
      --primary-color: #000;
      --mainTypeCol: #4C4B16;
      --typeDetail: orange;
      --text-color: #333;
      --background-color: #f9f7f5;
      --three: #CA8A8B;
      --font-body: 'DM Sans', sans-serif;
      --font-heading: 'Piazzolla', serif;
      --sans: 'DM Sans', sans-serif;
      --serif: 'Piazzolla', serif;
      --captionCol: #4C4B16;
      --ease-custom: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --vibrantlink: #8B004B;
      --buttonhover: black;
      --whitemask: rgba(255, 255, 255, 0.9);
    }

    /* ==========================================================================
       2. RESET & BASE
       ========================================================================== */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  /*text-wrap: balance;*/
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  background-color: var(--background-color);
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  height: auto;
  position: relative;
}

    /* ==========================================================================
       3. TYPOGRAPHY
       ========================================================================== */
    h1, h2, h3, h4 {
      font-family: 'Piazzolla', serif;
      font-weight: 300;
      line-height: 1;
      color: var(--mainTypeCol);
    }

    h1 { font-size: 2.75rem; margin-bottom: 2rem; }
    h2 { font-size: 2rem; margin-bottom: 30px; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.125rem; }

    p {
      font-family: var(--font-body);
      font-size: 1.1rem;
      max-width: 60ch;
      color: var(--mainTypeCol);
      text-wrap: pretty;
    }

    .makeWhite, .makeWhite p, .makeWhite h1, .makeWhite h2, .makeWhite h3, .makeWhite h4 {
      color: white !important;
    }

    .pital {
      font-family: 'Piazzolla', serif;
      font-weight: 300;
      font-size: 1.4rem;
      line-height: 1.2;
      font-style: italic;
    }

    .sansTitle {
      font-family: "DM Sans", sans-serif;
      font-weight: 200;
      letter-spacing: 0.1rem;
    }

    .sansTitleWriting {
color: var(--mainTypeCol);
          font-family: "DM Sans", sans-serif;
      font-weight: 400;
      font-size:1.6rem;
      letter-spacing: 0.1rem;
    }


    .serifBody {
      font-family: 'Piazzolla', serif;
      font-size: 1.1rem;
    }

    ol {
  list-style-type: decimal;
  font-family: var(--font-body);
  font-size: 1.0rem;
  max-width: 60ch;
  color: var(--mainTypeCol);
  text-wrap: pretty;
  padding-left: 2.4rem;
  margin: 1rem 0;
}

ol li {
  margin-bottom: 0.6rem;
}

 .smalltextlogo{
      color: white; font-size: 1.8rem; margin-bottom: 0; transform: translateY(30px);
    }

    h3 {
      line-height: 1.2;
    }

    /* ==========================================================================
       4. LAYOUT CONTAINERS
       ========================================================================== */
    .textArea {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 4.5em;
    }

    .textAreaTop {
      display: flex;
      width: 90%;
      gap: 1.5rem;
      align-items: baseline;
    }

     .textAreaTop_c {
      display: flex;
      flex-direction: column;
      width: 90%;
      gap: 1.5rem;
      align-items: baseline;
    }

  

    /* ==========================================================================
       5. RESPONSIVE GRID GALLERY
       ========================================================================== */
    .grid-gallery {
      display: grid;
      width: 100%;
      gap: 0rem;
      padding: 0 1rem;
      grid-template-columns: repeat(3, 1fr);
    }

    .grid-item {
      display: flex;
      flex-direction: column;
      gap: 0rem;
    }

    .grid-item:nth-child(1) { grid-column: span 2; }
    .grid-item:nth-child(2) { grid-column: span 1; }

    .grid-image {
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background-color: #e8e8e8;
    }

    .grid-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .scale-on-scroll img {
      transition: transform 0.1s linear;
      transform: scale(1);
    }

    .pan-on-scroll img {
      transition: transform 0.1s linear;
      transform: translateX(0px);
    }

    .grid-caption {
      font-size: 0.85rem;
      color: var(--captionCol);
      line-height: 1.4;
    }

    .grid-caption-piaz {
      font-family: 'Piazzolla', serif;
      font-weight: 300;
      font-style: italic;
      font-size: 0.85rem;
      color: var(--captionCol);
      line-height: 1.4;
      margin-bottom: 0.2rem;
      padding-left:0.4rem;
    }

    .grid-image.ar-square { aspect-ratio: 1 / 1; }
    .grid-image.ar-landscape { aspect-ratio: 16 / 9; }
    .grid-image.ar-portrait { aspect-ratio: 9 / 16; }
    .grid-image.ar-tall { aspect-ratio: 3 / 4; }
    .grid-image.ar-wide { aspect-ratio: 4 / 3; }

    @media (min-width: 768px) {
      .grid-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 0rem;
        padding: 0 2rem;
      }

      .grid-item:first-child {
        grid-column: 2 / span 2;
      }

      .grid-item:nth-child(2) {
        grid-column: 4 / span 1;
      }
    }

    /* ==========================================================================
       5B. CROSSFADE IMAGE GALLERY
       ========================================================================== */
    .crossfade-gallery {
      display: grid;
      width: 100%;
      gap: 1.5rem;
      margin-top: 4rem;
      grid-template-columns: repeat(3, 1fr);
    }

    .crossfade-item {
      grid-column: span 3;
      display: flex;
      flex-direction: column;
    }

    @media (min-width: 768px) {
      .crossfade-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        padding: 0 4rem;
      }

      .crossfade-item {
        grid-column: 2 / span 3;
      }
    }

    .crossfade-container.ar-square { aspect-ratio: 1 / 1; }
    .crossfade-container.ar-landscape { aspect-ratio: 16 / 9; }

    .crossfade-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      background-color: #e8e8e8;
    }

    .crossfade-container .image-base {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 1;
    }

    .crossfade-container .image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 2;
      opacity: 1;
      transition: opacity 0.1s linear;
    }

    .crossfade-caption {
      font-size: 0.85rem;
      color: var(--mainTypeCol);
      padding: 0 0.5rem;
      line-height: 1.4;
    }

    /* ==========================================================================
       6. HEADER
       ========================================================================== */
    .header {
      position: fixed;
      top: -80px;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.95);
      padding: 1.5rem 4rem;
      display: flex;
      justify-content: space-between;
      align-items: start;
      z-index: 1000;
      opacity: 0;
      transition: top 0.8s ease, opacity 0.8s ease;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

     @media (max-width: 767px) {
    .header {
        padding: 1.5rem 1.4rem;

      }
    }

    .header.visible {
      top: 0;
      opacity: 1;
    }

    .header-logo h4 {
      font-size: 1.2rem;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--mainTypeCol);

    }

    .languages {
      display: flex;
      justify-content: flex-start;
    }

    .languagebutton {

      font-family: var(--font-body);
      color: var(--mainTypeCol);
      font-size: 1.0rem;
      letter-spacing: 0.08em;
      background: none;
      margin-top: 16px;
      border: 0.5px solid var(--mainTypeCol);
      padding: 0.2rem 0.2rem;
      cursor: pointer;
      margin-right:10px;
      display: inline-flex;
  align-items: center;

    }


    .languagebutton:hover {
      color: darkgoldenrod;
      border-color: darkgoldenrod;
      opacity: 1;
    }

    


    /* ==========================================================================
       7. MENU TOGGLE
       ========================================================================== */
    .menu-toggle {
      display: flex;
      align-items: center;
      gap: 14px;
      cursor: pointer;
    }

    .menu-toggle .hamburger {
      position: relative;
      width: 26px;
      height: 16px;
      flex-shrink: 0;
      transform: translateY(5px);
    }

    .menu-toggle .hamburger span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #68423d;
      border-radius: 2px;
      transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  background-color 0.3s ease;
    }

    .menu-toggle .hamburger span:nth-child(1) { top: 0; }
    .menu-toggle .hamburger span:nth-child(2) { top: 14px; }

    .menu-toggle .menu-label {
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--mainTypeCol);
      transition: color 0.3s ease;
      margin: 0;
    }

    .menu-toggle:hover .hamburger span,
    .menu-toggle.active:hover .hamburger span {
      background-color: darkgoldenrod;
    }

    .menu-toggle:hover .menu-label {
      color: darkgoldenrod;
    }

    /* Morph into an X when active */
    .menu-toggle.active .hamburger span:nth-child(1) {
      top: 7px;
      transform: rotate(45deg);
    }

    .menu-toggle.active .hamburger span:nth-child(2) {
      top: 7px;
      transform: rotate(-45deg);
    }


 /* ==========================================================================
       7. MY MENU STYLING QWE
       ========================================================================== */

.bigwrapper {
    position: absolute;
    background-color: var(--background-color);
  top: 0px;
  left:0px;
  width:100%;
  height:100%;
}

.navcontainer {
  width:95%;
  max-width: 100%;
  margin-top: 8rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
  }

  .col-left {
    align-items: flex-end;   /* right-aligned links */
  }

  .col-right {
    align-items: flex-start; /* left-aligned links */
  }

  .col-lines {
    align-items: center;
  }

  .divider {
    width: 1px;
    height: 24px;       /* matches line-height of a link row */
    background-color: #999;
  }

  .navcontainer a {
    font-family: var(--sans);
    font-size: 1.4rem;
    color: var(--mainTypeCol);
    text-decoration: none;
    color: #333;
    line-height: 24px;
    transition: all 0.3s ease;
  }

  .navcontainer a:hover {
    color: darkgoldenrod;
  }

.locationstrip {

  width:100%;
    display: flex;
    justify-content: center;
    gap: 2rem;
  font-family: var(--sans);
  color: var(--mainTypeCol);
  font-size: 1.1rem;
  margin-top: 6rem;
  margin-bottom: 2rem;
  }

  .locationstripPage {

  width:100%;
    display: flex;
    justify-content: start;
    gap: 2rem;
  font-family: var(--sans);
  color: var(--mainTypeCol);
  font-size: 1.1rem;
  margin-top: 6rem;
  margin-bottom: 2rem;
  width: 100%;
        padding-left:2rem;
        pading-right:4rem;
  }

.socialstrip {

  left:0px;
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
gap: 4rem;
}

.social-icon-wrapper {
  width: 30px;
  height: 30px;
}

.social-icon-wrapper svg {
  width: 100%;
  height: 100%;
}


.icon-wrapper {
  width: 60px;
  height: 60px;
}

.icon-wrapper svg {
  width: 100%;
  height: 100%;
}


.icon-link .icon {
  color: var(--mainTypeCol); /* sets the SVG's color via currentColor */
  transition: color 0.2s ease;
}

.icon-link:hover .icon {
  color: darkgoldenrod;
}

    /* ==========================================================================
       8. FULLSCREEN MENU
       ========================================================================== */
    .fullscreen-menu {
      position: fixed;
      inset: 0;
      /*background-image: url('images/catrinBed.jpg');*/
      background-color: #fff;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      z-index: 2000;
      opacity: 0;
      visibility: hidden;
      display: flex;
      overflow: hidden;
      transition: opacity 0.6s ease, visibility 0.6s;
      background-color: var(--background-color);
    }

    .fullscreen-menu.active {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
    }

    .fullscreen-menu .menu-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 1.5rem 4rem;
      display: flex;
      justify-content: space-between;
      align-items: top;
      z-index: 10;
    }

     @media (max-width: 767px) {
    .fullscreen-menu .menu-header{
        padding: 1.5rem 1.4rem;

      }
    }

   


    
    .fullscreen-menu .menu-toggle .hamburger span { background-color: black; }
    .fullscreen-menu .menu-toggle:hover .hamburger span { background-color: darkgoldenrod; }
    .fullscreen-menu h4, .fullscreen-menu .header-logo { color: var(--mainTypeCol); }

    .menu-content {
      display: flex;
      align-items: start;
      margin-top: 20vh;
      height: 100%;
      padding-left: 10%;
      position: relative;
    }

    .menu-main {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .menu-item {
      font-size: 1.4rem;
      font-family: 'Piazzolla', serif;
      font-weight: 400;
      color: var(--mainTypeCol);
      margin: 1rem 0;
      cursor: pointer;
      letter-spacing: 0.05em;
      transition: opacity 0.3s ease;
      opacity: 1;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    /*.menu-item::after {
      content: '—';
      display: inline-block;
      margin-left: 1rem;
      font-weight: 200;
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }*/

.menu-item:hover{
  color: darkgoldenrod;
}

    .menu-item:hover, .menu-item.active { opacity: 1; }
    .menu-item:hover::after, .menu-item.active::after {
      color: darkgoldenrod;
      opacity: 1;
      transform: translateX(0);
    }

    .submenu-panel {
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateX(30px);
      transition: all 0.3s ease;
      pointer-events: none;
      position: absolute;
    }

    .submenu-panel.active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: all;
    }

    .submenu-item {
      font-size: 1.4rem;
      font-weight: 400;
      font-family: "DM Sans", sans-serif;
      color: white;
      margin: 0.8rem 0;
      cursor: pointer;
      letter-spacing: 0.05em;
      opacity: 0.6;
      transition: opacity 0.3s ease;
    }
    .submenu-item:first-child { margin-top: 0; }
    .submenu-item:hover { opacity: 1; }

    /* ==========================================================================
       HERO SECTION - PARALLAX WITH FULL WIDTH TINT
       ========================================================================== */
   .hero-section {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transform: scale(1) translateY(0);
  transition: transform 6s var(--ease-custom);
  display: block;
  opacity: 0;
}

.hero-image-writing {
  position: absolute; 
  right:0px; 
  top:0px; 
  width: 400px;
  /*aspect-ratio: 3 / 4;*/
}

.hero-section.show .hero-image {
  opacity: 1;
  transform: scale(1.07) translateY(0);
}

.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.45);
  padding: 2rem;
  min-height: 60%;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero-content.show {
  opacity: 1;
}

    .hero-text-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 1.5rem;
      margin-top: 0rem;
      pointer-events: none;
      padding: 1rem 0;
    }

    .hero-text-wrapper .scene-final__text {
      font-size: 2.75rem;
      color: white;
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 1.4s ease 0.5s, transform 1.4s var(--ease-custom) 0.5s;
      margin: 0;
      font-weight: 200;
      letter-spacing: 0.04em;
    }

    .hero-text-wrapper .scene-final__text.show {
      opacity: 1;
      transform: translateY(0px);
    }

    .hero-text-wrapper .under-text {
      color: white;
      font-size: clamp(1.1rem, 1.3rem, 1.5rem);
      line-height: 1.6;
      opacity: 0;
      transition: opacity 1.4s ease 0.6s;
      margin: 0;
      font-weight: 200;
      font-style: italic;
      font-family: var(--font-heading);
      width: 100%;
    }

    .hero-text-wrapper .under-text.show {
      opacity: 1;
    }

    .writing-reveal{
      opacity: 0;
            transition: opacity 1.4s ease 0.6s;
    }

     .writing-reveal.show{
      opacity: 1;
    }

    .hero-text-wrapper .btn-group {
      pointer-events: all;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-top: 1rem;
    }

    .hero-text-wrapper .continue-btn,
    .hero-text-wrapper .continue-btn2 {
      font-family: var(--font-heading);
      color: white;
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      background: none;
      border: 0.5px solid white;
      padding: 0.8rem 2rem;
      cursor: pointer;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 1s ease, transform 2s ease;
      pointer-events: none;
    }

    .hero-text-wrapper .continue-btn.show,
    .hero-text-wrapper .continue-btn2.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }

    .hero-text-wrapper .continue-btn:hover,
    .hero-text-wrapper .continue-btn2:hover {
      color: orange;
      border-color: orange;
      opacity: 0.8;
    }

    /* Mobile */
    @media (max-width: 767px) {
      .hero-content {
        padding: 2rem;
        min-height: 60%;
      }

      .hero-text-wrapper {
        margin-top: 0rem;
      }

      .hero-text-wrapper .under-text {
        width: 100%;
      }
    }

    /* Desktop */
    @media (min-width: 768px) {
      .hero-content {
        padding: 4rem;
        padding-left: 4rem;
      }

      .hero-text-wrapper {
        margin-top: 0rem;
        max-width: 700px;
      }

      .hero-text-wrapper .scene-final__text {
        font-size: 3rem;
      }

      .hero-text-wrapper .under-text {
        font-size: 1.4rem;
        width: 50%;
      }

      .hero-text-wrapper .btn-group {
        flex-direction: row;
        gap: 1.5rem;
      }
    }


      /* =============================
       WORKSHOP INFO SECTIONS &&&&&&&&&&&&&&&&&&
       ============================= */

       .workshopsection {
        width: 90%;
        padding-top:4rem;
        padding-left:4rem;
        pading-right:4rem;
        /*background: rgba(255,0,0,0.1);*/
       }

       .workshopsection h2 {
        margin-bottom: 3rem; !important
       }

       .workshopsection h3 {
        font-weight: 500;
        margin-bottom:1.4rem;
       }

       .workshopsection p{
        /*min-width: 60ch;*/
        max-width: 60ch;
        margin-bottom: 0.6rem;
        padding-left: 2rem;
        padding-right:0.5rem;
       }

      

       .ital {
        font-style: italic;
        font-weight: 500;
       }

       .bolder {
        margin-top:1.5rem;
        font-weight: 400;
        margin-left:2rem;
                font-style: italic;

       }

      /* .workshopsection p{
        padding-left:0rem;
       }*/
      

        .workshopimgrow {
          margin-top: 2rem;
          margin-bottom: 3rem;
          width: 100%;
          display: flex;
          align-items: top;
          height: auto;

        }

        .left {
          justify-content: start;
        }

        .centre{
          justify-content: center;
        }

        .right {
          justify-content: end;
          padding-right: 8rem;
        }

        .workshopimage {
          /*aspect-ratio: 1 /1 ;*/
          overflow: hidden;
          object-fit: fill;
        }

        .workshopimage.rect {
          aspect-ratio: 3 /4 ;

        }

        .workshopimage.rectlan {
          aspect-ratio: 4 / 3 ;

        }

         .workshopimage.square {
          aspect-ratio: 1 /1 ;

        }





        .workshopimage img{
          height:100%;
        }


       @media (max-width: 767px) {
        .workshopsection {
        width: 100%;
        padding-top:4rem;
        padding-left:1rem;
        padding-right:1rem;
        /*background: rgba(255,0,0,0.1);*/
       }
}

    /* ==========================================================================
       10. BUTTONS
       ========================================================================== */
    .btn-group {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      pointer-events: all;
    }

    .continue-btn, .continue-btn2 {
      font-family: var(--font-heading);
      color: whitesmoke;
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      background: none;
      border: 0.5px solid whitesmoke;
      padding: 0.8rem 2rem;
      cursor: pointer;
    }

    .continue-btn:hover, .continue-btn2:hover {
      color: orange;
      border-color: orange;
      opacity: 0.6;
    }

    .continue-btn3{
      margin-top: 2rem;
      margin-bottom: 2rem;
      font-family: var(--font-heading);
      color: var(--vibrantlink);
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      background: none;
      border: 1px solid var(--vibrantlink);
      border-radius: 0rem;
      padding: 0.8rem 2rem;
      cursor: pointer;
            transition: color 0.4s ease;

    }

    .continue-btn3:hover{
      color: var(--buttonhover);
      border: 1px solid var(--buttonhover);
    }

.continue-btn3 .arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  margin-left: 6px;
  transition: all 0.2s ease;
}
.continue-btn3:hover .arrow {
  opacity: 1;
  transform: translateX(0);
}

    /* ==========================================================================
       11. VIDEO SECTION
       ========================================================================== */
    .vimeo_one {
      width: 100%;
      padding-left: 7rem;
      padding-top: 2rem;
    }

    .video-container {
      width: 60%;
      aspect-ratio: 9 / 16;
      margin-right: auto;
      overflow: clip;
    }

    .video-container iframe {
      width: 100%;
      height: 100%;
    }

    /* ==========================================================================
       12. FOOTER
       ========================================================================== */
    footer {
      width: 100%;
      padding: 48px 0 32px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      border-top: 1px solid #e8e8e8;
    }

    .footer-icons {
      display: flex;
      gap: 32px;
      align-items: center;
    }

    .footer-icons a {
      color: #111;
      transition: color 0.3s ease;
      display: flex;
      align-items: center;
    }
    .footer-icons a:hover { color: #a0856c; }

    .footer-icons svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .icon-email svg {
      fill: currentColor;
      stroke: none;
    }

    .footer-copy {
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      color: #999;
      text-transform: uppercase;
    }

    /* ==========================================================================
       13. UTILITIES
       ========================================================================== */
    .w-30vw {
      width: 50vw;
    }

    .poem-container {
      /* Animated via JavaScript */
    }

.continue-btn3Div {
  display: flex;
  justify-content: center;
      grid-column: span 1;
    }
    /* ==========================================================================
       14. FADE-IN ANIMATIONS
       ========================================================================== */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1s ease, transform 1s ease;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ==========================================================================
       15. WIPE-IN ANIMATIONS
       ========================================================================== */
    .wipe-in {
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 1s ease, transform 1s ease;
    }

    .wipe-in.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .wipe-in.delay {
      transition-delay: 0.5s;
    }

    /* =============================
       SLIDER
       ============================= */
    .slider-wrapper {
      position: relative;
      width: 100%;
      height: 70vh;
      overflow: hidden;
    }

    .slider-track {
      display: flex;
      width: 100%;
      height: 100%;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .slider-track::-webkit-scrollbar { display: none; }

    .slide {
      position: relative;
      flex: 0 0 100%;
      height: 100%;
      scroll-snap-align: start;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .slide img {
      position: relative;
      width: 100%;
      height: 50%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.08);
      transition: transform 1s var(--ease-custom);
      flex-shrink: 0;
    }

    .slide.active img { transform: scale(1); }

    .slide-content {
      position: relative;
      z-index: 2;
      height: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.75rem;
      padding: 1.5rem calc(46px + 1.8rem);
    }

    .slide-content .eyebrow {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    }

    .slide-content h3 {
      font-size: clamp(1.6rem, 3.5vw, 2.8rem);
      line-height: 1.15;
      color: #fff;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.45s ease 0.2s, transform 0.45s ease 0.2s;
    }

    .slide-content p {
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.72);
      max-width: min(480px, 70%);
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.45s ease 0.32s, transform 0.45s ease 0.32s;
    }

    .slide-content .cta {
      display: inline-block;
      margin-top: 0.4rem;
      color: #fff;
      font-weight: 300;
      text-decoration: none;
      align-self: flex-start;
      backdrop-filter: blur(4px);
      background: rgba(255, 255, 255, 0.08);
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      border: 1px solid #fff;
      padding: 0.8rem 2rem;
      cursor: pointer;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.45s ease 0.42s, transform 0.45s ease 0.42s, border-color 0.3s ease;
      margin-top: 2rem;
      max-width: 50%;
    }

    .slide-content .cta:hover {
      color: darkorange;
      border-color: darkorange;
    }

    .slide.active .slide-content .eyebrow,
    .slide.active .slide-content h3,
    .slide.active .slide-content p,
    .slide.active .slide-content .cta {
      opacity: 1;
      transform: translateY(0);
    }

    .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      background: rgba(0, 0, 0, 0.15);
      border: none;
      color: #fff;
      width: 46px;
      height: 20%;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      transition: background 0.2s;
    }

    .slider-btn:hover { background: rgba(0, 0, 0, 0.55); }
    .slider-btn.prev { left: 0; }
    .slider-btn.next { right: 0; }

    .slider-dots {
      position: absolute;
      bottom: 1.4rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 9px;
      z-index: 20;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      border: 1.5px solid rgba(255, 255, 255, 0.6);
      cursor: pointer;
      padding: 0;
      transition: background 0.25s, width 0.3s;
    }

    .dot.active {
      background: #fff;
      width: 26px;
      border-radius: 4px;
    }

    .slide-counter {
      position: absolute;
      bottom: 1.3rem;
      right: calc(46px + 1rem);
      z-index: 20;
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.8rem;
      letter-spacing: 0.1em;
    }

    .slide-counter span { color: #fff; font-weight: 600; }

    #tempslider {
      display: flex;
      justify-content: center;
      padding: 0 2rem;
      margin-top: 8rem;
      margin-bottom: 8rem;
    }


 /* ==========================================================================
       MOBILE MOBILE MOBILE
       ========================================================================== */

    @media (max-width: 767px) {
  .slide-content {
    padding: 1.5rem 1rem 1.5rem 1rem;
    gap: 0.5rem;
  }

  .slide-content h3 {
    font-size: 1.4rem;
  }

  .slide-content p {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .slide-content .cta {
    max-width: 100%;
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
    margin-top: 0.75rem;
  }

  .w-30vw {
      width: 70vw;
    }
    .smalltextlogo {
      font-size: 1.6rem;
    }

}


 /* ==========================================================================
       15. MY MISC
       ========================================================================== */

.test {
  color: var(----mainTypeCol);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}
.test:hover {
  color: darkgoldenrod;
}

.endquote {
  margin-top: 10rem;
  margin-bottom: 12rem;
  padding-left: 10rem;
  padding-right: 10rem;
}

.paraboost {
    font-family: var(--serif);
font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 0px;
  padding-bottom: 0px;
  padding-right: 10rem;
}

.paraboostcol {
  position: relative;
    font-family: var(--serif);
    display: inline-block;
font-size: 1.6rem;
line-height: 1.3;
  font-weight: 400;
  font-style: italic;
  color: darkgoldenrod;
    /*padding-left: 40px*/

}

.paraboost {
    font-family: var(--serif);
font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 0px;
  padding-bottom: 0px;
}


.paraboost a{
  color: darkgoldenrod;
  text-decoration: underline solid darkgoldenrod 1px;
  text-underline-offset: 7px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.paraboost a:hover{
  color: black;
    text-decoration: underline solid black 1px;

  
}



.contexth1{
}

.contexth1 h1{
    font-style: italic;
  color: darkgoldenrod;
  line-height: 1.2;
}




.contexth1 h2{
    font-style: italic;
  color: darkgoldenrod;
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.endquote h2{
  color: darkgoldenrod;
  max-width: 25ch;
  font-style: italic;
  line-height: 1.4;
  font-size: 2.2rem;
}


.ectawrapper {
  position: relative;
  width:100%;
  display: flex;
  flex-direction: row;
justify-content: center;
gap: 2rem;
align-items: center;
margin: 2rem 0px;
}

.flyer {
  height: 20rem;
}

 @media (max-width: 767px) {
        .endquote {
  margin-top: 10rem;
  margin-bottom: 12rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.endquote h2{
  font-size: 1.8rem;
  color: darkgoldenrod;
  max-width: 45ch;
  font-style: italic;
  line-height: 1.4;
}

.paraboost {
  font-weight: 500;
  font-style: italic;
  margin-bottom: 0px;
  padding-right: 0px;
}

.grid-gallery{
  padding: 0 0;
}

.contexth1 h1{
  font-size:2.4rem;
    font-style: italic;
  color: darkgoldenrod;
  line-height: 1.2;
}

.ectawrapper {
  position: relative;
  width:100%;
  display: flex;
  flex-direction: column;
justify-content: center;
gap: 2rem;
align-items: center;
margin: 2rem 0px;
}

.flyer {
  height: 20rem;
}

}


/* NEW SLIDER START*/

    /* ─── WRAPPER ────────────────────────────────────────────── */
    .slider-wrapper {
      position: relative;
      width: 100%;
      height: 70vh;
      overflow: hidden;
    }

    /* ─── TRACK ──────────────────────────────────────────────── */
    .slider-track {
      display: flex;
      width: 100%;
      height: 100%;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .slider-track::-webkit-scrollbar { display: none; }

    /* ─── SLIDE ──────────────────────────────────────────────── */
    .slide {
      position: relative;
      flex: 0 0 100%;
      height: 100%;
      scroll-snap-align: start;
      overflow: hidden;
    }

    /* ─── FULL-SCREEN IMAGE ──────────────────────────────────── */
    .slide img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.08);
      transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .slide.active img {
      transform: scale(1);
    }

    /* ─── GRADIENT OVERLAY ───────────────────────────────────── */
    .slide::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0.05) 100%
      );
      z-index: 1;
    }

    /* ─── TEXT BLOCK ─────────────────────────────────────────── */
    /*
      Arrow buttons are 46px wide and sit flush to the edge.
      We add that width + a comfortable gap (1.2rem) as the left offset
      so text never sits behind an arrow.
    */
    .slide-content {
      position: absolute;
      z-index: 2;
      left: calc(46px + 1.8rem);   /* arrow width + breathing room */
      top: 50%;
      transform: translateY(-50%);
      max-width: min(480px, 50vw);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    /* ─── EYEBROW ────────────────────────────────────────────── */
    .slide-content .eyebrow {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    }

    /* ─── HEADING ────────────────────────────────────────────── */
    .slide-content h3 {
      font-size: clamp(1.6rem, 3.5vw, 2.8rem);
      line-height: 1.15;
      color: #fff;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.45s ease 0.2s, transform 0.45s ease 0.2s;
    }

    /* ─── PARAGRAPH ──────────────────────────────────────────── */
    .slide-content p {
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.72);
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.45s ease 0.32s, transform 0.45s ease 0.32s;
    }

    /* ─── CTA ────────────────────────────────────────────────── */
    .slide-content .cta {
      display: inline-block;
      margin-top: 0.4rem;
      color: #fff;
      font-weight: 300;
      text-decoration: none;
      border-radius: 0px;
      align-self: flex-start;
      backdrop-filter: blur(4px);
      background: rgba(255,255,255,0.08);
      opacity: 0;
      transform: translateY(18px);
        font-size: 1.1rem;
    letter-spacing: 0.08em;
    background: none;
    border: 1px solid #fff;
    padding: 0.8rem 2rem;
    cursor: pointer;
    transition: opacity 1s ease, transform 1s ease, border-color 0.3s ease;
    max-width:50%;
    margin-top: 2rem;


    }

    .slide-content .cta:hover {
      /*background: #fff; */
      color: darkorange;
      border: 1px solid darkorange;
    }

    /* ─── ACTIVE: reveal text ────────────────────────────────── */
    .slide.active .slide-content .eyebrow,
    .slide.active .slide-content h3,
    .slide.active .slide-content p,
    .slide.active .slide-content .cta {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─── ARROWS — flush to screen edges ─────────────────────── */
    .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      background: rgba(0, 0, 0, 0.15);
      border: none;
      color: #fff;
      width: 46px;
      /* stretch full height so the hit target is generous */
      height: 20%;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      transition: background 0.2s;
    }
    .slider-btn:hover { background: rgba(0,0,0,0.55); }

    /* pin to the very edge — no margin, no offset */
    .slider-btn.prev { left:  0; }
    .slider-btn.next { right: 0; }

    /* ─── DOTS ───────────────────────────────────────────────── */
    .slider-dots {
      position: absolute;
      bottom: 1.4rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 9px;
      z-index: 20;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      border: 1.5px solid rgba(255,255,255,0.6);
      cursor: pointer;
      padding: 0;
      transition: background 0.25s, width 0.3s;
    }
    .dot.active {
      background: #fff;
      width: 26px;
      border-radius: 4px;
    }

    /* ─── COUNTER ────────────────────────────────────────────── */
    .slide-counter {
      position: absolute;
      bottom: 1.3rem;
      /* keep counter away from the right arrow too */
      right: calc(46px + 1rem);
      z-index: 20;
      color: rgba(255,255,255,0.5);
      font-size: 0.8rem;
      letter-spacing: 0.1em;
    }
    .slide-counter span { color: #fff; font-weight: 600; }

    @media (max-width: 767px) {
      .slide-content {
        max-width: calc(100% - 92px - 1.6rem);
        left: calc(46px + 0.8rem);
        gap: 0.5rem;
      }
      .slide-content .cta {
        max-width: 100%;
        width: auto;
        white-space: normal;
        font-size: 0.95rem;
        padding: 0.6rem 1.2rem;
        margin-top: 0.75rem;
      }
    }

/* **END** NEW SLIDER*/


/* IMAGE CARD FOR WORKSHOPS */


  .card-section {
    padding: 2rem;
    display: flex;
    justify-content: center;
  }

  .card {
    position: relative;
    display: block;
    width: 400px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0px;
    text-decoration: none;
    isolation: isolate; /* keeps overlay/text compositing clean */
  }

  .card__image {
    position: absolute;
    inset: 0;
    background-image: url("images/chickenwire.jpg");
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: 0;
  }

  /* subtle scrim so text stays legible over any image */
  .card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 55%);
    z-index: 1;
    pointer-events: none;
  }

  .card__text {
    position: absolute;
    left: 1.25rem;
    bottom: 2.25rem;
    z-index: 2;
    color: #fff;
    font-family: var(--serif);
font-size: 2.6rem;
line-height: 1.1;
  font-weight: 300;
  /*font-style: italic;*/
    transition: color 0.3s ease;
  }

  .card:hover .card__image {
    transform: scale(1.01);
  }

  .card:hover .card__text {
    color: darkgoldenrod;
  }

  .card:focus-visible {
    outline: 2px solid #e2802a;
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .card__image,
    .card__text {
      transition: none;
    }
  }

a.nodec{
  text-decoration: none;
}