/* ============ Portz local replica additions ============ */

/* Rollover text: smooth slide between the two stacked copies */
.framer-ReF6l .framer-z62eye,
.framer-ReF6l .framer-7sba3,
.framer-oIoiV .framer-1fzphh3,
.framer-oIoiV .framer-j9ardr,
.framer-PRDdO .framer-i7n54e,
.framer-PRDdO .framer-t959c9 {
  transition: transform .5s cubic-bezier(.22, 1.6, .36, 1);
  will-change: transform;
}

/* FAQ answer expand/collapse */
.framer-McuZS .framer-1mvt1ft {
  max-height: 0;
  overflow: hidden;
  transition: max-height .7s cubic-bezier(.22, 1, .36, 1);
}
.framer-McuZS[data-framer-name="FAQ Open"] .framer-1mvt1ft {
  max-height: 600px;
}

/* Infinite marquee rows (testimonials + tickers + client logos) */
@keyframes portz-marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes portz-marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
[data-framer-name="Testimonial Slide"] ul {
  animation: portz-marquee-left 90s linear infinite;
}
[data-framer-name="Ticker 1"] ul {
  animation: portz-marquee-right 45s linear infinite;
}
[data-framer-name="Ticker 2"] ul {
  animation: portz-marquee-left 45s linear infinite;
}
.framer-6f2ggm-container > section > ul {
  animation: portz-marquee-left 38s linear infinite;
}

/* Hero subtitle 24h icon */
.framer-1htut1x-container svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Video fills its container */
.framer-1szwbm-container video {
  object-fit: cover;
}

/* Work covers: adapt to the uploaded image's own aspect ratio (no forced crop) */
.framer-sYGxJ [data-framer-name="Top"] {
  aspect-ratio: auto !important;
  height: auto !important;
}
.framer-sYGxJ [data-framer-name="Cover Image"] {
  flex: none !important;
  width: 100% !important;
  height: auto !important;
}
.framer-sYGxJ [data-framer-name="Cover Image"] > div {
  position: relative !important;
}
.framer-sYGxJ [data-framer-name="Cover Image"] img,
.framer-sYGxJ [data-framer-name="Cover Image"] video {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.framer-sYGxJ:hover [data-framer-name="Cover Image"] img,
.framer-sYGxJ:hover [data-framer-name="Cover Image"] video {
  transform: scale(1.05);
}

/* Process & About images: adapt to the image ratio (no forced crop) */
.framer-1kdg7l8,
.framer-1iq9agt {
  height: auto !important;
}
.framer-1iq9agt {
  aspect-ratio: 3 / 4 !important;
}
.framer-1lgmwp8 {
  height: auto !important;
  overflow: visible !important;
}
.framer-1kdg7l8 > div,
.framer-1iq9agt > div {
  position: relative !important;
}
.framer-1kdg7l8 img,
.framer-1iq9agt img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Process image: show the full original image (no crop, no stretch) */
.framer-1kdg7l8 {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}
.framer-1kdg7l8 > div,
.framer-1kdg7l8 img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.framer-1lgmwp8 {
  height: auto !important;
}

/* Work Honors: tighten the gap with the About section above */
.framer-7ql89 {
  padding-top: 20px !important;
}

/* Banner video: remove the 1.25x zoom transform that softens the image */
.framer-4jy4o1 {
  transform: none !important;
}

/* Work cards keep the original interaction cursor behavior */
.framer-sYGxJ {
  cursor: none;
}
.portz-pcard {
  cursor: none;
}

/* Custom cursor (visible mouse effect) */
@media (hover: hover) and (pointer: fine) {
  body.portz-cursor-on,
  body.portz-cursor-on * {
    cursor: none !important;
  }
}
.portz-dot,
.portz-ring {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483000;
  will-change: transform;
}
.portz-dot {
  width: 10px;
  height: 10px;
  background: #b8ff34;
}
.portz-ring {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: transform .18s linear, width .25s ease, height .25s ease, border-color .25s ease, background-color .25s ease;
}
body.portz-cursor-big .portz-ring {
  width: 60px;
  height: 60px;
  border-color: #b8ff34;
  background: rgba(184, 255, 52, 0.08);
}

/* Singles lightbox */
.portz-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 2147482000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.portz-lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7);
}
.portz-lightbox .portz-lb-close {
  position: absolute;
  top: 22px;
  right: 28px;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  background: none;
  border: none;
}
.portz-lightbox .portz-lb-title {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 600;
}

/* CONTACT NOW hover (restores original lime background) */
.framer-VJjti {
  transition: background-color .45s cubic-bezier(.22, 1, .36, 1);
}
.framer-VJjti:hover,
.framer-VJjti.hover {
  background-color: #b8ff34 !important;
}

/* Three portrait motion works in one horizontal row */
.portz-portrait-row {
  display: flex;
  flex-direction: row;
  gap: 30px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 6px;
}
.portz-pcard {
  flex: 0 0 calc(33.333% - 20px);
  text-decoration: none;
  color: #fff;
  min-width: 220px;
}
.portz-pcard .portz-pcover {
  overflow: hidden;
  background: #000;
}
.portz-pcard .portz-pcover video {
  display: block;
  width: 100%;
  height: auto;
  cursor: none;
}
.portz-pcard .portz-pbottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 4px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.portz-pleft {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portz-price {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
.portz-price:empty {
  display: none;
}
.portz-title {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -.3px;
}
.portz-pcat {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  white-space: nowrap;
}
.portz-pnum {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 809.98px) {
  .portz-pcard { flex: 0 0 82%; }
}

/* Commercial carousel section */
.portz-commercial {
  background: #000;
  color: #fff;
  padding: 100px 40px 120px;
  width: 100%;
}
.portz-commercial-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: 1360px;
  margin: 0 auto 44px;
}
.portz-commercial-title {
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}
.portz-commercial-title span {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  letter-spacing: .05em;
}
.portz-all-btn {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 40px;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
  white-space: nowrap;
}
.portz-all-btn:hover {
  background-color: #b8ff34;
  color: #000;
  border-color: #b8ff34;
}
.portz-carousel {
  overflow: hidden;
  max-width: 1360px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
}
.portz-carousel-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: portz-marquee-left 160s linear infinite;
}
.portz-citem,
.portz-single {
  flex: 0 0 340px;
  height: 250px;
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}
.portz-citem img,
.portz-single img {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.portz-citem:hover img,
.portz-single:hover img {
  transform: scale(1.04);
}
.portz-clabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 16px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  font-size: 15px;
  font-weight: 700;
}
@media (max-width: 809.98px) {
  .portz-commercial { padding: 60px 0 80px; }
  .portz-commercial-head { padding: 0 20px; }
  .portz-citem,
  .portz-single { flex-basis: 230px; }
}

/* "Made in Framer" badge entrance */
.__framer-badge p[style*="scale(0.001)"] {
  will-change: transform;
}

/* Banner video sound toggle hint */
.portz-sound-hint {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  pointer-events: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 30px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  user-select: none;
}

/* Clean social row */
.portz-social {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .02em;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: color .3s ease, border-color .3s ease;
  display: inline-block;
}
.portz-social:hover {
  color: #b8ff34;
  border-color: #b8ff34;
}
.portz-contact-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}
#contact {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.portz-contact-big {
  color: #fff;
  font-size: clamp(46px, 6vw, 84px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
  margin: 0 0 14px;
  text-align: left;
}
.portz-contact-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .03em;
  margin: 0 0 40px;
}
.portz-contact-line {
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 6px;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  transform-origin: left center;
  will-change: transform;
}
.portz-contact-line:hover {
  transform: scale(1.06);
}
.portz-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
}

/* Process work-honors award text */
.portz-award {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 0;
}
.framer-qsb3o2 {
  justify-content: center !important;
}
.framer-F9oX7 {
  gap: 6px !important;
  padding-bottom: 6px !important;
}

/* Company icons: fill the square container edge-to-edge with rounded corners */
.framer-12ho6tn .framer-18ymuva img {
  object-fit: cover !important;
}

/* About: balance English line breaks so no line is left with a single word */
.framer-1yhd9go p {
  text-wrap: balance !important;
  text-wrap: pretty !important;
}

/* Tablet and up: About image + text in one row, top aligned.
   Simple flex layout that every browser (including in-app WebViews)
   renders reliably — the image stays visible and tops line up. */
@media (max-width: 1439.98px) {
  .framer-lh6beu {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .framer-lh6beu .framer-1tw6ku9 {
    flex: 0 0 130px !important;
    width: 130px !important;
    max-width: 38% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    min-height: 260px !important;
  }
  .framer-lh6beu .framer-1tw6ku9 img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    object-fit: cover !important;
  }
  .framer-lh6beu .framer-19obklo {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }
}

/* Tablet: the About image should fill its container so its top edge
   aligns with the text column (no flex-centering overflow) */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .framer-lh6beu .framer-1iq9agt {
    height: 100% !important;
    aspect-ratio: auto !important;
  }
}

/* Mobile/tablet: About image + text on one row, scaled down */
@media (max-width: 1199.98px) {
  .framer-lh6beu {
    flex-direction: row !important;
    gap: 18px !important;
    padding: 50px 0 30px !important;
  }
  .framer-lh6beu .framer-1tw6ku9 {
    flex: 0 0 130px !important;
    width: 130px !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }
  .framer-lh6beu .framer-1tw6ku9 img {
    height: auto !important;
  }
  .framer-lh6beu .framer-1iq9agt {
    height: 100% !important;
    aspect-ratio: auto !important;
  }
  .framer-lh6beu .framer-19obklo {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .framer-lh6beu .framer-1yhd9go {
    width: 100% !important;
    min-width: 0 !important;
  }
  .framer-lh6beu .framer-1yhd9go p {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .framer-lh6beu .framer-1yhd9go p {
    font-size: 10.5px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
  }
}

/* Mobile: work card bottom label stays on one row */
@media (max-width: 809.98px) {
  [data-framer-name="Hero Section"],
  [data-framer-name="Banner Section"] {
    padding-top: 52px !important;
  }
  /* uniform spacing between stacked project cards on mobile */
  [data-framer-name="Work Lists"] {
    gap: 48px !important;
    row-gap: 48px !important;
  }
  .framer-sYGxJ.framer-v-sy4s1u .framer-wd60xe {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .framer-sYGxJ.framer-v-sy4s1u .framer-wd60xe .framer-text {
    font-size: 11px !important;
    white-space: normal !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }
  .framer-sYGxJ.framer-v-sy4s1u .framer-wd60xe .framer-d9e7vr,
  .framer-sYGxJ.framer-v-sy4s1u .framer-wd60xe .framer-7sc74y,
  .framer-sYGxJ.framer-v-sy4s1u .framer-wd60xe .framer-1ymz51d {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* Ending static image */
.portz-ending {
  background: #000;
  line-height: 0;
  padding-top: 260px;
}
.portz-ending img {
  display: block;
  width: 100%;
  height: auto;
}

/* About section: shrink the portrait image and top-align it with the text block */
@media (min-width: 1200px) {
  .framer-lh6beu {
    align-items: flex-start !important;
  }
  .framer-1tw6ku9 {
    flex: 0 1 380px !important;
    width: 380px !important;
  }
}

/* Card text spacing after removing the price label */
.framer-sYGxJ [data-framer-name="Bottom"] {
  padding-top: 4px;
}
.framer-sYGxJ {
  gap: 10px !important;
}

/* Footer logo: keep on one horizontal line */
.framer-jfuxm9 h2 {
  white-space: nowrap;
  font-size: min(190px, 12.5vw) !important;
  line-height: 1 !important;
}

/* ============ Extra motion & interactivity ============ */

/* 1. Text hover: underline sweep + color shift */
.framer-text {
  transition: color .35s ease;
}
a:hover .framer-text,
.framer-ReF6l:hover .framer-text,
.framer-oIoiV:hover .framer-text,
.framer-PRDdO:hover .framer-text {
  color: #b8ff34 !important;
}

/* section headings get a subtle letter-spacing widen on hover */
.framer-148yc03 h2:hover,
.framer-roq8s h2:hover,
.framer-6851l1 h2:hover,
.framer-14knvhx h2:hover,
.framer-1p1wu38 h2:hover,
.portz-contact-big:hover,
.framer-19sqi4i h1:hover,
.framer-pvd3l7 h1:hover {
  letter-spacing: 0.02em !important;
  transition: letter-spacing .45s cubic-bezier(.22, 1, .36, 1);
}

/* 2. Auto-scrolling marquee text strip */
.portz-marquee {
  width: 100%;
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
}
.portz-marquee-track {
  display: flex;
  width: max-content;
  animation: portz-marquee-scroll 36s linear infinite;
  will-change: transform;
}
.portz-marquee:hover .portz-marquee-track {
  animation-play-state: paused;
}
.portz-marquee-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, 0.82);
  padding: 0 18px;
  text-transform: uppercase;
}
.portz-marquee-item .dot {
  color: #b8ff34;
  margin: 0 26px;
  font-size: 18px;
}
@keyframes portz-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 3. Image hover: expanding horizontal strip (Delane-style) + zoom */
.framer-sYGxJ [data-framer-name="Top"],
.portz-pcover {
  position: relative !important;
  overflow: hidden !important;
}

/* long strip: a thin line at the cover center expands into a dark VIEW bar on hover */
.framer-sYGxJ [data-framer-name="Top"]::after,
.portz-pcover::after,
.portz-citem::after,
.portz-single::after {
  content: "VIEW";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .32em;
  text-indent: .32em;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-50%);
  transition: height .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
  pointer-events: none;
  z-index: 4;
}
.framer-sYGxJ:hover [data-framer-name="Top"]::after {
  height: 34px;
  opacity: 1;
}
.portz-pcard:hover .portz-pcover::after {
  height: 40px;
  opacity: 1;
}
.portz-citem:hover::after,
.portz-single:hover::after {
  height: 26px;
  opacity: 1;
}

/* zoom the cover media on hover */
.framer-sYGxJ [data-framer-name="Cover Image"] video,
.framer-sYGxJ [data-framer-name="Cover Image"] img,
.portz-pcover video,
.portz-citem img,
.portz-single img {
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.framer-sYGxJ:hover [data-framer-name="Cover Image"] video,
.framer-sYGxJ:hover [data-framer-name="Cover Image"] img,
.portz-pcard:hover .portz-pcover video,
.portz-citem:hover img,
.portz-single:hover img {
  transform: scale(1.06);
}

/* commercial carousel cards get a dim overlay + label lift */
.portz-citem {
  position: relative;
  overflow: hidden;
}
.portz-citem .portz-clabel {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .3s ease;
}
.portz-citem:hover .portz-clabel {
  transform: translateY(-4px);
  color: #b8ff34;
}

/* Hero heading: Portfolio / Resume each on one line */
.framer-19sqi4i h1,
.framer-pvd3l7 h1 {
  white-space: nowrap;
  font-size: min(122px, 7.6vw) !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
}

/* EXPERIENCE heading: wider letter spacing */
.framer-1p1wu38 h2 {
  letter-spacing: 0.05em !important;
}

/* Work section header: one word per line, fully displayed */
.framer-6nnpdz h2 {
  white-space: nowrap;
  font-size: min(80px, 5.2vw) !important;
  line-height: 1 !important;
}

/* Work description: right aligned */
.framer-l0s3qk {
  text-align: right;
}
.framer-l0s3qk p {
  text-align: right !important;
}

/* Hero right description: smaller text */
.framer-tq5ssi p {
  font-size: 11px !important;
}
.framer-tq5ssi {
  width: 225px !important;
}

/* "Made in Framer" badge geometry (styles normally injected by the Framer runtime) */
.__framer-badge {
  pointer-events: auto;
  display: block;
  position: relative;
  width: 140px;
  height: 38px;
  text-decoration: none;
}
.__framer-badge [data-framer-name="Backdrop"] {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  display: block;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0.6021873017743928px 1.5656869846134214px -1.5px rgba(0, 0, 0, 0.17),
    0px 2.288533303243457px 5.950186588432988px -3px rgba(0, 0, 0, 0.14),
    0px 10px 26px -4.5px rgba(0, 0, 0, 0.02);
}
.__framer-badge [data-framer-name="Content"] {
  position: absolute;
  top: 19px;
  right: -49px;
  bottom: 3px;
  left: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.__framer-badge [data-framer-name="Logo"] {
  position: absolute;
  top: -2px;
  right: -6px;
  bottom: -2px;
  left: 6px;
  width: 12px;
  background-color: rgb(0, 0, 0);
  -webkit-mask: url("../assets/badge-logo.svg") center / contain no-repeat;
  mask: url("../assets/badge-logo.svg") center / contain no-repeat;
}
.__framer-badge [data-framer-name="Text"] {
  position: relative;
  width: 97px;
  height: 10px;
  margin-left: 12px;
  background-color: rgb(0, 0, 0);
  -webkit-mask: url("../assets/badge-text.svg") center / contain no-repeat;
  mask: url("../assets/badge-text.svg") center / contain no-repeat;
}
.__framer-badge [data-framer-name="Bottom"],
.__framer-badge [data-framer-name="Border"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 11px;
  box-shadow: inset 0px 0px 0px 1px rgb(0, 0, 0);
  pointer-events: none;
}
.__framer-badge [data-framer-name="Bottom"] {
  opacity: 0.06;
  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 1) 100%);
  mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 1) 100%);
}
.__framer-badge [data-framer-name="Border"] {
  opacity: 0.04;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

/* ============ Forced mobile layout ============
   Real phones/tablets get this layout even when the browser reports a
   desktop-width viewport (desktop mode, in-app WebViews). */
html.portz-mobile [data-framer-name="Hero Section"],
html.portz-mobile [data-framer-name="Banner Section"] {
  padding-top: 52px !important;
}

html.portz-mobile .framer-lh6beu {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 16px !important;
  padding: 50px 0 30px !important;
}
html.portz-mobile .framer-lh6beu .framer-1tw6ku9 {
  flex: 0 0 130px !important;
  width: 130px !important;
  max-width: 38% !important;
  height: auto !important;
  min-height: 260px !important;
  aspect-ratio: auto !important;
}
html.portz-mobile .framer-lh6beu .framer-1tw6ku9 img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  object-fit: cover !important;
}
html.portz-mobile .framer-lh6beu .framer-19obklo {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
html.portz-mobile .framer-lh6beu .framer-1yhd9go p {
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

html.portz-mobile [data-framer-name="Work Lists"] {
  gap: 48px !important;
  row-gap: 48px !important;
}

html.portz-mobile .framer-sYGxJ .framer-wd60xe {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}
html.portz-mobile .framer-sYGxJ .framer-wd60xe .framer-text {
  font-size: 11px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  letter-spacing: 0 !important;
}

/* Tighten the oversized section gaps on phones */
html.portz-mobile .framer-1i6n4a5 {
  padding-top: 40px !important;
}
html.portz-mobile .portz-ending {
  padding-top: 60px !important;
}
html.portz-mobile [data-framer-name="Work Section"] {
  padding-top: 30px !important;
}
html.portz-mobile .framer-19obklo {
  overflow: visible !important;
}

/* Big headings: never clip on small screens */
html.portz-mobile .framer-19sqi4i h1,
html.portz-mobile .framer-pvd3l7 h1,
html.portz-mobile .framer-6nnpdz h2,
html.portz-mobile .framer-148yc03 h2,
html.portz-mobile .framer-roq8s h2,
html.portz-mobile .framer-6851l1 h2,
html.portz-mobile .framer-14knvhx h2,
html.portz-mobile .framer-1p1wu38 h2 {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  font-size: min(64px, 11vw) !important;
  line-height: 1.05 !important;
}

/* ============ v31 fixes ============
   1) Desktop hero heading: PORTFOLIO text + the green circle were being
      clipped by the heading container at 1440px+ widths. */
@media (min-width: 1440px) {
  .framer-xtkd8e {
    overflow: visible !important;
  }
  .framer-yb4cxz {
    overflow: visible !important;
  }
}

/* 2) About on desktop-mode phones: the image wrapper had a fixed smaller
      height, pushing the photo 43px lower than the [ ABOUT ME ] heading and
      cutting the bottom off. Make the wrapper fill the image column. */
html.portz-mobile .framer-lh6beu .framer-1iq9agt {
  height: 100% !important;
  aspect-ratio: auto !important;
  top: 0 !important;
  margin-top: 0 !important;
}

/* 2b) About on desktop: show the full portrait (no top/bottom crop) and
      line its top edge up with the [ ABOUT ME ] heading. */
@media (min-width: 1200px) {
  .framer-lh6beu .framer-1tw6ku9 {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }
}

/* 3) Keep a clear gap between CONTACT and the ending image on phones. */
html.portz-mobile .portz-ending {
  padding-top: 110px !important;
}

/* 4) Project card labels: never clip the title/category when the text
      wraps on small screens. */
html.portz-mobile .framer-sYGxJ .framer-wd60xe {
  height: auto !important;
  min-height: 0 !important;
}
html.portz-mobile .framer-sYGxJ .framer-wd60xe > div {
  height: auto !important;
  min-height: 0 !important;
}
html.portz-mobile .framer-sYGxJ .framer-wd60xe .framer-text {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.5 !important;
}

/* ============ v32 fixes ============
   5) About: the [ ABOUT ME ] label's font leading made its glyphs sit a few
      pixels below the photo top on real devices. Pin the label to the top
      (no leading, no extra margin/padding) on phones AND desktops. */
html.portz-mobile .framer-lh6beu .framer-1tw6ku9,
html.portz-mobile .framer-lh6beu .framer-19obklo,
html.portz-mobile .framer-lh6beu .framer-m9twe7 {
  padding-top: 0 !important;
  margin-top: 0 !important;
  top: 0 !important;
}
html.portz-mobile .framer-lh6beu .framer-m9twe7 p {
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (min-width: 1200px) {
  .framer-lh6beu .framer-1tw6ku9,
  .framer-lh6beu .framer-19obklo,
  .framer-lh6beu .framer-m9twe7 {
    padding-top: 0 !important;
    margin-top: 0 !important;
    top: 0 !important;
  }
  .framer-lh6beu .framer-m9twe7 p {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* 9) Desktop about: the portrait fills the text column height so the image
      and the text block share the same top and bottom edge (no mismatch). */
@media (min-width: 1200px) {
  .framer-lh6beu {
    align-items: stretch !important;
  }
  .framer-lh6beu .framer-1tw6ku9 {
    align-self: stretch !important;
    height: auto !important;
  }
  .framer-lh6beu .framer-1tw6ku9 img {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 470px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}
@media (min-width: 1600px) {
  .framer-lh6beu .framer-1tw6ku9 img {
    max-height: 400px !important;
  }
}
@media (min-width: 1629px) {
  .framer-lh6beu .framer-1tw6ku9 img {
    max-height: 360px !important;
  }
}

/* 6) Card bottom text: let the label row breathe and never clip on wrap. */
html.portz-mobile .framer-sYGxJ .framer-wd60xe {
  overflow: visible !important;
}
html.portz-mobile .framer-sYGxJ .framer-wd60xe > div,
html.portz-mobile .framer-sYGxJ .framer-wd60xe .framer-text {
  overflow: visible !important;
}

/* ============ v33 fixes ============
   7) About on phones: the portrait now fills the whole text column height
      (top AND bottom edges line up with the text block on every device). */
html.portz-mobile .framer-lh6beu .framer-1tw6ku9 {
  align-self: stretch !important;
  min-height: 0 !important;
}
html.portz-mobile .framer-lh6beu .framer-1iq9agt,
html.portz-mobile .framer-lh6beu .framer-1iq9agt > div {
  height: 100% !important;
}
html.portz-mobile .framer-lh6beu .framer-1tw6ku9 img {
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* 8) Project cards in desktop-mode phones: the desktop label design stacks
      the title vertically and leaves huge empty space, which looks like
      broken/cut text. Force the compact horizontal label on phones. */
html.portz-mobile .framer-sYGxJ .framer-wd60xe > div {
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
  gap: 10px !important;
}
html.portz-mobile .framer-sYGxJ .framer-wd60xe .framer-text {
  white-space: normal !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

/* ============ v34 fixes ============
   10) Project card labels: make clipping IMPOSSIBLE on every phone/tablet
       rendering. The card never clips, the label row always grows with its
       text, and wrapped text is fully visible. */
@media (max-width: 1199.98px) {
  .framer-sYGxJ,
  html.portz-mobile .framer-sYGxJ {
    overflow: visible !important;
  }
  .framer-sYGxJ .framer-wd60xe,
  html.portz-mobile .framer-sYGxJ .framer-wd60xe {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-items: center !important;
    padding-bottom: 12px !important;
  }
  .framer-sYGxJ .framer-wd60xe > div,
  .framer-sYGxJ .framer-wd60xe .framer-text,
  html.portz-mobile .framer-sYGxJ .framer-wd60xe > div,
  html.portz-mobile .framer-sYGxJ .framer-wd60xe .framer-text {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}

/* Portrait cards (闪光骑士/王子/公主) labels: same guarantee. */
@media (max-width: 1199.98px) {
  .portz-pcard .portz-pbottom {
    overflow: visible !important;
    height: auto !important;
  }
}