We now need to reorganize this css dedeuping and favorign styles at bottom where deduping is needed follow commenting guidless we've used before

/* =========================================================
   PORTFOLIO SHOWCASE — Scoped Styles
   Notes:
   - Keep everything scoped to #portfolio-showcase
   - Base first, then components, then overrides at bottom
   - The final "Mobile / Tablet Overrides" section is meant to win
========================================================= */

/* =========================================================
   0) Quick tokens (easy tweaks)
========================================================= */
#portfolio-showcase{
  --ps-accent: var(--accent-color, #7D9B00); /* <-- change if needed */
  --ps-accent-soft: color-mix(in srgb, var(--ps-accent), white 20%);
}

/* =========================================================
   1) Base section layout
========================================================= */
#portfolio-showcase{
  position: relative;
  overflow: hidden;
  padding: 0;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
}

/* Title aligned with site grid */
#portfolio-showcase .container{
  position: relative;
  z-index: 2;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: 0;
}

/* Full-bleed slider wrapper */
#portfolio-showcase .showcase-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
}

/* =========================================================
   2) Swiper stage sizing
   Key idea: 16:9 stage prevents embed bars/misalignment
========================================================= */
#portfolio-showcase .swiper{
  width: 100%;
  max-width: none;
  margin: 0;

  height: min(80vh, 56.25vw); /* 16:9 */
  min-height: 420px;
  max-height: 720px;
}

#portfolio-showcase .swiper-wrapper,
#portfolio-showcase .swiper-slide{
  height: 100%;
}

#portfolio-showcase .swiper-slide{
  position: relative;
  width: 100% !important;
  display: grid;
  align-items: end;
  background: #000;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0;
}

/* Optional rounded corners on desktop */
@media (min-width: 992px){
  #portfolio-showcase .showcase-bleed{
    padding-inline: clamp(1rem, 3vw, 2.25rem);
    box-sizing: border-box;
  }
  #portfolio-showcase .swiper-slide{
    border-radius: 18px;
  }
}

/* =========================================================
   3) Media layers (image/video/embed)
========================================================= */
#portfolio-showcase .slide-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden; /* crop window for "cover" embeds */
}

/* Image backgrounds */
#portfolio-showcase .slide-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

/* HTML5 video */
#portfolio-showcase video.slide-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* YouTube/Vimeo embeds
   - Default fill; JS may override with pixel sizing
*/
#portfolio-showcase iframe.slide-embed{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  max-width: none;
  max-height: none;
  transform: none;
}

/* Optional poster behind embeds (if you later use data-poster + JS inserts .embed-poster) */
#portfolio-showcase .embed-poster{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 360ms ease;
  pointer-events: none;
}

/* =========================================================
   4) Overlay for readability
========================================================= */
#portfolio-showcase .slide-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(1200px 700px at 30% 80%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18) 55%, rgba(0,0,0,.10));
}

/* =========================================================
   5) Content + typography
========================================================= */
#portfolio-showcase .slide-content{
  position: relative;
  z-index: 3;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  text-align: left;
  max-width: 72ch;
}

#portfolio-showcase .slide-kicker{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
  opacity: .92;
  margin-bottom: .65rem;
}

#portfolio-showcase .slide-title{
  font-family: "Gloock", Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 2.2vw + 1rem, 2.75rem);
  line-height: 1.08;
  margin: 0 0 .8rem 0;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  color: #fff;
}

#portfolio-showcase .slide-text{
  font-size: clamp(1.05rem, .75vw + .95rem, 1.35rem);
  line-height: 1.55;
  margin: 0 0 1.25rem 0;
  opacity: .96;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  color: #fff;
}

/* Actions */
#portfolio-showcase .slide-actions{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

#portfolio-showcase .slide-actions a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.1rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

#portfolio-showcase .slide-actions a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.40);
}

/* =========================================================
   6) Swiper chrome (ACCENT COLOR)
========================================================= */
#portfolio-showcase .swiper-button-next,
#portfolio-showcase .swiper-button-prev{
  color: var(--ps-accent) !important;               /* accent arrows */
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  z-index: 5;
}

#portfolio-showcase .swiper-button-next:hover,
#portfolio-showcase .swiper-button-prev:hover{
  color: var(--ps-accent-soft) !important;
}

#portfolio-showcase .swiper-pagination{
  z-index: 5;
}

#portfolio-showcase .swiper-pagination-bullet{
  background: color-mix(in srgb, var(--ps-accent), white 15%) !important;
  opacity: .35;
}

#portfolio-showcase .swiper-pagination-bullet-active{
  opacity: 1;
  background: var(--ps-accent) !important;
}

/* Focus styles (a11y) */
#portfolio-showcase .swiper-button-next:focus-visible,
#portfolio-showcase .swiper-button-prev:focus-visible,
#portfolio-showcase .slide-actions a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ps-accent), white 20%);
  outline-offset: 3px;
}

/* =========================================================
   7) Mobile + Tablet overrides (LOWER WINS)
   Goals:
   - Larger headline
   - Center content in safe area between arrows
   - Keep center of video clearer by pushing subhead/buttons lower
========================================================= */
@media (max-width: 991px){
  /* Content becomes a 3-row grid: kicker/title (top), empty middle, text+buttons (bottom) */
  #portfolio-showcase .slide-content{
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;

    width: min(60ch, calc(100% - 7.5rem)) !important; /* safe zone between arrows */
    margin-inline: auto !important;

    text-align: center !important;
    padding-inline: clamp(1rem, 6vw, 2.75rem) !important;
    padding-top: clamp(1rem, 4vw, 1.9rem) !important;
    padding-bottom: clamp(2.8rem, 8vw, 4rem) !important; /* above dots */
  }

  #portfolio-showcase .slide-kicker{
    justify-content: center !important;
    margin: 0 0 clamp(.55rem, 1.6vw, .9rem) 0 !important;
  }

  #portfolio-showcase .slide-title{
    font-size: clamp(2.35rem, 4.8vw + 1.1rem, 3.6rem) !important;
    line-height: 1.04 !important;
    margin: 0 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
  }

  /* Bottom band */
  #portfolio-showcase .slide-text{
    align-self: end !important;
    margin: 0 0 clamp(.9rem, 2.8vw, 1.35rem) 0 !important;
    max-width: 52ch !important;
    font-size: clamp(1.05rem, 1vw + .95rem, 1.3rem) !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  #portfolio-showcase .slide-actions{
    align-self: end !important;
    justify-content: center !important;
    gap: clamp(.6rem, 2vw, .95rem) !important;
    width: 100% !important;
  }

  #portfolio-showcase .slide-actions a{
    padding: clamp(.78rem, 1.2vw + .65rem, .95rem)
             clamp(1.05rem, 2.6vw + .8rem, 1.45rem) !important;
    border-radius: clamp(12px, 2.2vw, 16px) !important;
  }

  /* Headline color readability on video (requested: headline only) */
  #portfolio-showcase .slide-title{
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 3px 16px rgba(0,0,0,.55) !important;
  }
}

@media (max-width: 767px){
  #portfolio-showcase .swiper{
    height: 62svh;
    min-height: 420px;
    max-height: none;
  }

  #portfolio-showcase .slide-content{
    width: min(44ch, calc(100% - 6.5rem)) !important;
    padding-bottom: clamp(3rem, 10vw, 4.4rem) !important;
  }

  #portfolio-showcase .slide-title{
    font-size: clamp(2.65rem, 7vw + .6rem, 4rem) !important;
  }
}

@media (max-width: 380px){
  #portfolio-showcase .slide-content{
    width: calc(100% - 5.75rem) !important;
  }
}

/* =========================================================
   Swiper arrows — Glass ring + accent arrow + nudge on right
   Paste at bottom so it wins
========================================================= */
#portfolio-showcase .swiper-button-next,
#portfolio-showcase .swiper-button-prev{
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  border-radius: 999px;

  /* glass + contrast field */
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 14px 30px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.10) inset;

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    opacity .22s ease;

  opacity: .95;
}

#portfolio-showcase .swiper-button-next:hover,
#portfolio-showcase .swiper-button-prev:hover{
  background: rgba(0,0,0,.46);
  border-color: rgba(255,255,255,.34);
  transform: translateY(-1px) scale(1.02);
}

/* Swiper arrow glyphs */
#portfolio-showcase .swiper-button-next::after,
#portfolio-showcase .swiper-button-prev::after{
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  color: var(--ps-accent) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* Keep arrows from sitting too close to edges on mobile */
@media (max-width: 767px){
  #portfolio-showcase .swiper-button-next{ right: 10px; }
  #portfolio-showcase .swiper-button-prev{ left: 10px; }
}

/* A11y */
#portfolio-showcase .swiper-button-next:focus-visible,
#portfolio-showcase .swiper-button-prev:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ps-accent), white 25%);
  outline-offset: 4px;
}

/* --- Right arrow "nudge" animation (subtle) --- */
#portfolio-showcase .swiper-button-next{
  transform-origin: center;
  animation: psNudgeRight 3.6s ease-in-out infinite;
}

/* Stop nudging once the user interacts or hovers */
#portfolio-showcase.is-interacted .swiper-button-next,
#portfolio-showcase .swiper-button-next:hover{
  animation: none;
}

@keyframes psNudgeRight{
  0%, 74%   { transform: translateX(0); }
  80%       { transform: translateX(4px); }
  86%       { transform: translateX(0); }
  92%       { transform: translateX(3px); }
  100%      { transform: translateX(0); }
}

/* =========================================================
   PORTFOLIO SHOWCASE — remove inline styles by moving them here
   (keeps the same “force visible + white + shadow” behavior)
========================================================= */
#portfolio-showcase .slide-text{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: 1rem !important;
  color: #fff !important;
  font-size: 1.5rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.6) !important;
}

/* MOBILE + TABLET ONLY: clamp overlay typography so video stays visible */
@media (max-width: 991px){
  #portfolio-showcase .slide-content{
    padding: clamp(0.9rem, 1.2vw + 0.6rem, 1.4rem) !important;
  }

  #portfolio-showcase .slide-title{
    font-size: clamp(1.55rem, 1.05rem + 2.2vw, 2.35rem) !important;
    line-height: 1.06 !important;
    max-width: 18ch !important;
    margin: 0 !important;
  }

  #portfolio-showcase .slide-text{
    font-size: clamp(0.98rem, 0.88rem + 0.6vw, 1.15rem) !important;
    line-height: clamp(1.32, 1.22 + 0.35vw, 1.5) !important;
    max-width: 52ch !important;
    margin-top: clamp(0.4rem, 0.35rem + 0.6vw, 0.8rem) !important;
  }
}

/* MOBILE + TABLET: glass behind headline + darker glass behind description */
@media (max-width: 991px){
  /* Headline glass (lighter) */
  #portfolio-showcase .slide-title{
    display: inline-block !important;
    padding: .35rem .6rem !important;
    border-radius: .85rem !important;
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
  }

  /* Description glass (darker) */
  #portfolio-showcase .slide-text{
    display: inline-block !important;
    padding: .7rem .85rem !important;
    border-radius: 1rem !important;
    background: rgba(0,0,0,.32) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.28) !important;
  }
}

/* MOBILE + TABLET: tighten the headline glass height so it doesn’t hog the frame */
@media (max-width: 991px){
  #portfolio-showcase .slide-title{
    /* tighter vertical + line-height */
    padding: .22rem .6rem !important;
    line-height: 1.05 !important;

    /* prevent it from stretching full width */
    max-width: 92% !important;
    margin: 0 auto .45rem !important;

    /* keep rounding but a touch tighter */
    border-radius: .8rem !important;
  }
}

/* MOBILE + TABLET ONLY — shrink the light “headline glass” vertically */
@media (max-width: 991px){
  #portfolio-showcase .swiper-slide .slide-content .slide-title{
    display: inline-block !important;   /* prevents full-width glass */
    width: auto !important;
    max-width: 92% !important;

    padding: .18rem .65rem !important;  /* <-- vertical shrink */
    line-height: 1.02 !important;       /* <-- tighter */
    margin: 0 auto .45rem !important;   /* centered + a little gap */

    border-radius: .9rem !important;    /* keeps the “glass” shape */
  }
}

/* Portfolio Showcase — Glass pill for the kicker */
#portfolio-showcase .slide-kicker{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: .38rem .7rem !important;
  border-radius: 999px !important;

  font-size: .85rem !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.14) !important; /* glass */
  border: 1px solid rgba(255,255,255,.22) !important;

  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.16) inset
    !important;

  /* keeps it readable over bright frames */
  text-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}

/* Optional: slightly tighter on small phones */
@media (max-width: 480px){
  #portfolio-showcase .slide-kicker{
    font-size: .8rem !important;
    padding: .34rem .62rem !important;
  }
}

/* MOBILE/TABLET — prevent kicker from stretching full width */
@media (max-width: 991px){
  #portfolio-showcase .slide-kicker{
    display: inline-flex !important;
    width: fit-content !important;     /* shrink to text */
    max-width: 92% !important;         /* safety on tiny screens */
    padding-inline: .75rem !important; /* keeps pill comfy */
    margin: 0 auto .5rem !important;   /* center without stretching */
    white-space: nowrap !important;    /* keep it one line */
  }
}

/* DESKTOP + TABLET — add “glass” to <p class="slide-text"> */
@media (min-width: 768px){
  #portfolio-showcase .slide-text{
    display: inline-block !important;
    max-width: 92% !important;
    margin: .5rem auto 0 !important;
    padding: .9rem 1.05rem !important;

    border-radius: 1.05rem !important;

    background: rgba(0,0,0,.40) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.35) !important;

    line-height: 1.45 !important;
  }
}

/* Add breathing room under the paragraph so it never crowds the buttons */
#portfolio-showcase .slide-content{
  padding-bottom: 1.25rem !important;
}

/* Extra safety: if your layout is tight on desktop/tablet, add a little more */
@media (min-width: 768px){
  #portfolio-showcase .slide-content{
    padding-bottom: 1.75rem !important;
  }
}

/* Also add spacing between the text block and the buttons */
#portfolio-showcase .slide-text{
  margin-bottom: 1rem !important;
}

@media (min-width: 768px){
  #portfolio-showcase .slide-text{
    margin-bottom: 1.15rem !important;
  }
}

  /* RIGHT (next): always visible */
  #portfolio-showcase .swiper-button-next{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* LEFT (prev): hidden by default */
  #portfolio-showcase .swiper-button-prev{
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
  }

  /* Show LEFT when the user interacts with the showcase area */
  #portfolio-showcase:hover .swiper-button-prev{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Show LEFT for keyboard users */
  #portfolio-showcase .swiper-button-prev:focus,
  #portfolio-showcase .swiper-button-prev:focus-visible{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Mobile/tablet: show LEFT while user is touching inside the slider */
  #portfolio-showcase .swiper:active .swiper-button-prev{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

   /* =========================================================
   MOBILE + TABLET ONLY
   - Light glass behind HEADLINE (ps-headline)
   - Darker glass behind DESCRIPTION (slide-text)
   - Uses !important to beat existing styles
========================================================= */
@media (max-width: 991px){

@media (max-width: 991px){

  /* Headline — glow + a little shadow (no glass) */
  #portfolio-showcase .slide-title.ps-headline{
    position: relative !important;
    top: 10vh !important; /* <-- lower headline (try 8vh–14vh) */

    display: inline-block !important;
    width: auto !important;
    max-width: 92% !important;

    padding: .18rem .65rem !important;
    line-height: 1.02 !important;
    margin: 0 auto .45rem !important;

    border-radius: .95rem !important;

    /* keep it clean */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* glow + a little shadow */
    text-shadow:
      0 2px 10px rgba(0,0,0,.70),
      0 0 18px rgba(255,255,255,.28),
      0 0 34px rgba(255,255,255,.18)
      !important;
  }

}
 @media (max-width: 991px){

  /* Darker "description glass" — keeps paragraph readable */
  #portfolio-showcase .slide-text{
    position: relative !important;
    top: -4.5vh !important; /* <-- move UP (try -1vh to -4vh) */

    display: inline-block !important;
    max-width: 92% !important;
    margin: .5rem auto 0 !important;
    padding: .85rem 1rem !important;

    border-radius: 1.05rem !important;

    background: rgba(0,0,0,.46) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow: 0 14px 30px rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.14) !important;

    line-height: 1.45 !important;
  }

}

@media (max-width: 991px){

  /* Headline — stronger contrast on bright frames (no glass) */
  #portfolio-showcase .slide-title.ps-headline{
    text-shadow:
      0 3px 14px rgba(0,0,0,.85),
      0 0 2px rgba(0,0,0,.90),
      0 0 8px rgba(0,0,0,.55)
      !important;

    -webkit-text-stroke: 1px rgba(0,0,0,.55) !important; /* “outline” */
    paint-order: stroke fill !important;                 /* stroke behind fill */
  }

}


/* Hero mission line — force override inside .section-title */
.section-title .hero-mission-line{
  margin: .5rem auto 0 !important;
  max-width: 62ch !important;
  text-align: center !important;

  color: #2C2C2C !important;
  font-size: 1.5rem !important;
  line-height: 1.6 !important;

  opacity: .92 !important;
  text-wrap: pretty !important;

  /* hard reset in case .section-title p adds stuff */
  letter-spacing: normal !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

@media (max-width: 480px){
  .section-title .hero-mission-line{
    font-size: 1.25rem !important;
  }
}
/* REAL SPACE between Portfolio Showcase and the next section */
#portfolio-showcase{
  padding-bottom: clamp(1.25rem, 2.5vw, 2.75rem) !important;
}

/* Your full-bleed wrapper is what sits right before the next section */
#portfolio-showcase .showcase-bleed{
  padding-bottom: clamp(1.25rem, 2.5vw, 2.75rem) !important;
}

/* Extra safety: give the Swiper block an actual bottom margin */
#portfolio-showcase .swiper{
  margin-bottom: clamp(1rem, 2vw, 2.25rem) !important;
}

/* Keep dots slightly higher so they don't kiss the edge */
#portfolio-showcase .swiper-pagination{
  bottom: 18px !important; /* tweak 12–26 */
}

/* If the CTA is still visually too tight, push it down too */
.call-to-action{
  margin-top: clamp(1rem, 2vw, 2.25rem) !important;
}