/* ======================================================================================================================================================================================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1. GLOBAL (baseline)
   2. DESKTOP WIDE      (min-width: 1170px)
   3. DESKTOP STANDARD  (992px - 1169px)
   4. TABLET WIDE       (768px - 991px)
   5. TABLET PORTRAIT   (544px - 767px)
   6. MOBILE            (max-width: 543px)
   ====================================================================================================================================================================================================================================== */


/* ======================================================================================================================================================================================================================================
   1. GLOBAL
   ====================================================================================================================================================================================================================================== */

/* Underline link animation */
.underline-links a {
  position: relative;
  display: inline-block;
}

.underline-links a::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #57FFC4;
  height: 2px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.underline-links a:hover:before {
  right: 0 !important;
}

/* Project meta */
.project-info .is-content p {
  margin-bottom: 0.3rem !important;
}

/* Responsive visibility helper (hidden on large screens) */
.hide-large {
  display: none;
}

/* Homepage project title */
#content_34 .sections smp-section .project-homepage .post-title .pt-title,
.project-homepage .thumb > a.pg-title-link.pg-link > div > div > span {
  letter-spacing: -0.05rem !important;
}

/* Full-width section padding (removes extra padding on smaller screens) */
#content-holder [data-layout=fluid] smp-container smp-row {
  margin-left: calc(0px - var(--smp-grid-gap-desktop)/ 2) !important;
  margin-right: calc(0px - var(--smp-grid-gap-desktop)/ 2) !important;
}

/* Inline hyperlinks (bold) */
.is-content p > a {
  font-variation-settings: 'wght' 600;
  font-family: "Geist", sans-serif;
}

/* Video hover and project panel zoom */
.thumb .thumb-inner:hover video,
.is-frontend .thumb .wrap-focus video {
  transform: scale(1.10);
  transition: all 0.3s ease;
}

.thumb .thumb-inner video,
.is-frontend .thumb .wrap-focus video {
  transition: all 0.3s ease;
}

/* --- Base Mask & Image States --- */
.pp-thumb > a {
  display: block;
  overflow: hidden;
  position: relative;
}

.pp-thumb > a img {
  display: block;
  width: 100%;
  height: auto;
  /* Updated transition speed to 0.3s */
  transition: transform 0.3s ease-in-out;
  backface-visibility: hidden;
}

/* --- The Overlay Layer (Image Only) --- */
.pp-thumb > a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0; 
  /* Updated transition speed to 0.3s */
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}


/* --- Single Hover Animation --- */
.pp-thumb:hover > a img {
  transform: scale(1.10); /* Updated zoom factor to 10% */
}

.pp-thumb:hover > a::after {
  opacity: 1;
}

/* Project panel */
.project-panel .pp-thumb div.pp-title {
  text-align: left !important;
}

.project-panel .panel-label span {
  letter-spacing: -0.1111111111111111rem;
}

/* About section */
.about-experience .is-content .role {
  margin-bottom: 0.4rem !important;
}

.about-experience .is-content .first-role {
  margin-bottom: 0.8rem !important;
}

#column_6c22991a5 h6 {
  margin-bottom: 0.6rem;
}

/* Footer */
.footer-links h1 {
  margin-bottom: 0.2rem !important;
}

/* Animated footer link */
.animated-link {
  display: inline-block !important;
  color: #0E23E4;
  text-decoration: none !important;
  font-weight: 600;
  /* Link remains static, no translation */
  transition: color 300ms cubic-bezier(0.45, 0, 0.55, 1) 50ms !important;
}

/* Target your custom span tag directly */
.animated-link .icon {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  margin-left: 6px !important;
  background-color: #F9F9FC !important;
  /* Initial state: 50% opacity */
  opacity: 0.5 !important;
  /* SVG Mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M1.4 13L0 11.6L9.6 2H1V0H13V12H11V3.4L1.4 13Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M1.4 13L0 11.6L9.6 2H1V0H13V12H11V3.4L1.4 13Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  /* Starting position */
  transform: translateX(0px) rotate(0deg) !important;
  /* Bouncy overshoot curve for the transform, smooth curve for opacity/colour */
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 50ms,
              background-color 300ms cubic-bezier(0.45, 0, 0.55, 1) 50ms,
              opacity 300ms cubic-bezier(0.45, 0, 0.55, 1) 50ms !important;
}

/* Hover states */
.animated-link:hover {
  /* Text color switches to E4D3C4 */
  color: #E4D3C4 !important;
}

.animated-link:hover .icon {
  /* Icon color switches to E4D3C4 and becomes fully opaque */
  background-color: #E4D3C4 !important;
  opacity: 1 !important;
  /* Icon ONLY translates 20px right and spins 405 degrees with the bounce */
  transform: translateX(20px) rotate(45deg) !important;
}

/* Email & phone links */
/* --- THE LINKS --- */
.email-link, .phone-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #0E23E4;
  text-decoration: none !important;
  font-weight: 600;
  transition: color 300ms cubic-bezier(0.45, 0, 0.55, 1) 100ms !important; /* Delayed to match icon entry */
}

/* --- THE ICONS --- */
.email-link .icon, .phone-link .icon {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  display: inline-block !important;
  margin: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0 !important;
  transform: translateY(-50%) translateX(-20px) rotate(-45deg) !important;
  /* 100ms delay applied to all properties for synchronous movement */
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms,
              background-image 300ms cubic-bezier(0.45, 0, 0.55, 1) 100ms,
              opacity 300ms cubic-bezier(0.45, 0, 0.55, 1) 100ms !important;
}

/* --- GEOMETRY & DEFAULT GRAPHICS (#F9F9FC) --- */
.email-link .icon {
  width: 24px !important;
  height: 19.2px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='19.2' viewBox='0 0 24 20' fill='none'%3E%3Cpath d='M2.4 19.2C1.74 19.2 1.175 18.965 0.705 18.495C0.235 18.025 0 17.46 0 16.8V2.4C0 1.74 0.235 1.175 0.705 0.705C1.175 0.235 1.74 0 2.4 0H21.6C22.26 0 22.825 0.235 23.295 0.705C23.765 1.175 24 1.74 24 2.4V16.8C24 17.46 23.765 18.025 23.295 18.495C22.825 18.965 22.26 19.2 21.6 19.2H2.4ZM21.6 4.8L12.63 10.41C12.53 10.47 12.425 10.515 12.315 10.545C12.205 10.575 12.1 10.59 12 10.59C11.9 10.59 11.795 10.575 11.685 10.545C11.575 10.515 11.47 10.47 11.37 10.41L2.4 4.8V16.8H21.6V4.8ZM12 8.4L21.6 2.4H2.4L12 8.4Z' fill='%23F9F9FC'/%3E%3C/svg%3E") !important;
}

.phone-link .icon {
  width: 21.6px !important;
  height: 21.6px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.6' height='21.6' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M20.34 21.6C17.84 21.6 15.37 21.055 12.93 19.965C10.49 18.875 8.27 17.33 6.27 15.33C4.27 13.33 2.725 11.11 1.635 8.67C0.545 6.23 0 3.76 0 1.26C0 0.9 0.12 0.6 0.36 0.36C0.6 0.12 0.9 0 1.26 0H6.12C6.4 0 6.65 0.095 6.87 0.285C7.09 0.475 7.22 0.7 7.26 0.96L8.04 5.16C8.08 5.48 8.07 5.75 8.01 5.97C7.95 6.19 7.84 6.38 7.68 6.54L4.77 9.48C5.17 10.22 5.645 10.935 6.195 11.625C6.745 12.315 7.35 12.98 8.01 13.62C8.63 14.24 9.28 14.815 9.96 15.345C10.64 15.875 11.36 16.36 12.12 16.8L14.94 13.98C15.12 13.8 15.355 13.665 15.645 13.575C15.935 13.485 16.22 13.46 16.5 13.5L20.64 14.34C20.92 14.42 21.15 14.565 21.33 14.775C21.51 14.985 21.6 15.22 21.6 15.48V20.34C21.6 20.7 21.48 21 21.24 21.24C21 21.48 20.7 21.6 20.34 21.6ZM3.63 7.2L5.61 5.22L5.1 2.4H2.43C2.53 3.22 2.67 4.03 2.85 4.83C3.03 5.63 3.29 6.42 3.63 7.2ZM14.37 17.94C15.15 18.28 15.945 18.55 16.755 18.75C17.565 18.95 18.38 19.08 19.2 19.14V16.5L16.38 15.93L14.37 17.94Z' fill='%23F9F9FC'/%3E%3C/svg%3E") !important;
}

/* --- HOVER STATES & HOVER GRAPHICS (#E4D3C4) --- */
.email-link:hover, .phone-link:hover {
  color: #E4D3C4 !important;
}

.email-link:hover .icon {
  opacity: 1 !important;
  /* Shifted 2px down from vertical centre */
  transform: translateY(calc(-50% + 2px)) translateX(0px) rotate(0deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='19.2' viewBox='0 0 24 20' fill='none'%3E%3Cpath d='M2.4 19.2C1.74 19.2 1.175 18.965 0.705 18.495C0.235 18.025 0 17.46 0 16.8V2.4C0 1.74 0.235 1.175 0.705 0.705C1.175 0.235 1.74 0 2.4 0H21.6C22.26 0 22.825 0.235 23.295 0.705C23.765 1.175 24 1.74 24 2.4V16.8C24 17.46 23.765 18.025 23.295 18.495C22.825 18.965 22.26 19.2 21.6 19.2H2.4ZM21.6 4.8L12.63 10.41C12.53 10.47 12.425 10.515 12.315 10.545C12.205 10.575 12.1 10.59 12 10.59C11.9 10.59 11.795 10.575 11.685 10.545C11.575 10.515 11.47 10.47 11.37 10.41L2.4 4.8V16.8H21.6V4.8ZM12 8.4L21.6 2.4H2.4L12 8.4Z' fill='%23E4D3C4'/%3E%3C/svg%3E") !important;
}

.phone-link:hover .icon {
  opacity: 1 !important;
  /* Shifted 2px down from vertical centre */
  transform: translateY(calc(-50% + 2px)) translateX(0px) rotate(0deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.6' height='21.6' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M20.34 21.6C17.84 21.6 15.37 21.055 12.93 19.965C10.49 18.875 8.27 17.33 6.27 15.33C4.27 13.33 2.725 11.11 1.635 8.67C0.545 6.23 0 3.76 0 1.26C0 0.9 0.12 0.6 0.36 0.36C0.6 0.12 0.9 0 1.26 0H6.12C6.4 0 6.65 0.095 6.87 0.285C7.09 0.475 7.22 0.7 7.26 0.96L8.04 5.16C8.08 5.48 8.07 5.75 8.01 5.97C7.95 6.19 7.84 6.38 7.68 6.54L4.77 9.48C5.17 10.22 5.645 10.935 6.195 11.625C6.745 12.315 7.35 12.98 8.01 13.62C8.63 14.24 9.28 14.815 9.96 15.345C10.64 15.875 11.36 16.36 12.12 16.8L14.94 13.98C15.12 13.8 15.355 13.665 15.645 13.575C15.935 13.485 16.22 13.46 16.5 13.5L20.64 14.34C20.92 14.42 21.15 14.565 21.33 14.775C21.51 14.985 21.6 15.22 21.6 15.48V20.34C21.6 20.7 21.48 21 21.24 21.24C21 21.48 20.7 21.6 20.34 21.6ZM3.63 7.2L5.61 5.22L5.1 2.4H2.43C2.53 3.22 2.67 4.03 2.85 4.83C3.03 5.63 3.29 6.42 3.63 7.2ZM14.37 17.94C15.15 18.28 15.945 18.55 16.755 18.75C17.565 18.95 18.38 19.08 19.2 19.14V16.5L16.38 15.93L14.37 17.94Z' fill='%23E4D3C4'/%3E%3C/svg%3E") !important;
}

/* Button icon */
/* --- THE BUTTON ICON (Default State) --- */
.smp-button [data-effect="slide-left-to-right"] img[src*="arrow_downward_rounded"] {
  /* Rotate -90 degrees anti-clockwise by default */
  transform: rotate(-90deg) !important;
  /* Smooth transition for the spin back to 0 */
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 50ms !important;
}

/* --- THE BUTTON ICON (Hover State) --- */
.smp-button [data-effect="slide-left-to-right"]:hover img[src*="arrow_downward_rounded"] {
  /* Snap back to the default position (0deg) with a bouncy overshoot */
  transform: rotate(0deg) !important;
}

/* Project panel - Project title */
.project-panel .pp-title a {
  font-size: 1.2222222222222223rem;
  line-height: 1.5555555555555556rem;
  letter-spacing: -0.011111111111111112rem;
}


/* ======================================================================================================================================================================================================================================
   2. DESKTOP WIDE
   Default / baseline. Applies to screens 1170px and up.
   ====================================================================================================================================================================================================================================== */
@media screen and (min-width: 1170px) {
  /* Your wide desktop overrides here */
}


/* ======================================================================================================================================================================================================================================
   3. DESKTOP STANDARD
   Targets viewports between 992px and 1169px.
   ====================================================================================================================================================================================================================================== */
@media screen and (max-width: 1169px) and (min-width: 992px) {
  /* Homepage project title */
  #content_34 .sections smp-section .project-homepage .post-title .pt-title,
  .project-homepage .thumb > a.pg-title-link.pg-link > div > div > span {
    font-size: 32px !important;
    line-height: 38px !important;
  }

  /* Project panel - Title H1 */
  .project-panel .panel-label span {
    font-size: 3.11rem;
  }

  /* Project panel - Project title */
  .project-panel .pp-title a {
    font-size: 1.11rem;
    line-height: 1.44rem;
    letter-spacing: -0.011111111111111112rem;
  }  

}


/* ======================================================================================================================================================================================================================================
   4. TABLET WIDE (Landscape)
   Targets viewports between 768px and 991px.
   ====================================================================================================================================================================================================================================== */
@media screen and (max-width: 991px) and (min-width: 768px) {
  /* Full-width section padding */
  #content-holder [data-layout=fluid] smp-container smp-row {
    margin-left: calc(0px - var(--smp-grid-gap-mobile)/ 2) !important;
    margin-right: calc(0px - var(--smp-grid-gap-mobile)/ 2) !important;
  }

  /* Homepage project title */
  #content_34 .sections smp-section .project-homepage .post-title .pt-title,
  .project-homepage .thumb > a.pg-title-link.pg-link > div > div > span {
    font-size: 28px !important;
    line-height: 30px !important;
  }

  .is-content > a.pg-title-link.pg-link > div > div.pt-category.font_pcbzfodxw {
    padding-top: 0 !important;
  }

  /* Project panel title H1 */
  .project-panel .panel-label span {
    font-size: 2.44rem;
  }

  /* Project panel - Project title */
  .project-panel .pp-title a {
    font-size: 1.06rem;
    line-height: 1.44rem;
    letter-spacing: -0.011111111111111112rem;
  }  
}


/* ======================================================================================================================================================================================================================================
   5. TABLET PORTRAIT
   Targets viewports between 544px and 767px.
   ====================================================================================================================================================================================================================================== */
@media screen and (max-width: 767px) and (min-width: 544px) {
  /* Full-width section padding */
  #content-holder [data-layout=fluid] smp-container smp-row {
    margin-left: calc(0px - var(--smp-grid-gap-mobile)/ 2) !important;
    margin-right: calc(0px - var(--smp-grid-gap-mobile)/ 2) !important;
  }

  /* Homepage project title */
  #content_34 .sections smp-section .project-homepage .post-title .pt-title,
  .project-homepage .thumb > a.pg-title-link.pg-link > div > div > span {
    font-size: 28px !important;
    line-height: 30px !important;
  }

  .is-content > a.pg-title-link.pg-link > div > div.pt-category.font_pcbzfodxw {
    padding-top: 0 !important;
  }

  /* Project panel title H1 */
  .project-panel .panel-label span {
    font-size: 2.44rem;
  }

  /* Project panel - Project title */
  .project-panel .pp-title a {
    font-size: 1.06rem;
    line-height: 1.44rem;
    letter-spacing: -0.011111111111111112rem;
  }  
 

}


/* ======================================================================================================================================================================================================================================
   6. MOBILE (Portrait & Landscape)
   Targets viewports 543px and below.
   ====================================================================================================================================================================================================================================== */
@media screen and (max-width: 543px) {
  /* Project meta */
  .project-info .is-content p {
    margin-bottom: 0rem !important;
    display: inline-block !important;
  }

  .project-info .is-content p.project-meta {
    margin-left: 6px;
  }

  .project-info smp-subrow smp-content {
    padding-bottom: 0.1rem !important;
  }

  /* Responsive visibility helper */
  .hide-large {
    display: block !important;
  }

  /* Full-width section padding */
  #content-holder [data-layout=fluid] smp-container smp-row {
    margin-left: calc(0px - var(--smp-grid-gap-mobile)/ 2) !important;
    margin-right: calc(0px - var(--smp-grid-gap-mobile)/ 2) !important;
  }

  /* Homepage project title */
  #content_34 .sections smp-section .project-homepage .post-title .pt-title,
  .project-homepage .thumb > a.pg-title-link.pg-link > div > div > span {
    font-size: 24px !important;
    line-height: 26px !important;
  }

  #content_34 .sections smp-section .project-homepage .post-title .pt-category {
    padding-top: 30rem !important;
  }

  .is-content > a.pg-title-link.pg-link > div > div.pt-category.font_pcbzfodxw {
    padding-top: 0.2rem !important;
    padding-right: 10% !important;
  }

  /* Project panel - Title H1 */
  .project-panel .panel-label span {
    font-size: 2rem;
    letter-spacing: -0.06rem;
  }

  /* Project panel - Project title */
  .project-panel .pp-title a {
    font-size: 1rem;
    line-height: 1.33rem;
    letter-spacing: -0.011111111111111112rem;
  }  

}


/* ======================================================================================================================================================================================================================================
   NOTE ON SPECIFICITY & OVERRIDES:
   Semplice outputs a massive amount of dynamic utility classes. If a rule
   isn't taking effect within these queries, avoid defaulting to !important.
   Instead, increase selector specificity by prefixing your classes with
   the main wrapper ID `#semplice` or the specific WordPress body class
   (e.g., `.page-id-XXXX .your-class`).
   ====================================================================================================================================================================================================================================== */