/* ============================================================
   NEW-PORTO — RESPONSIVE FIXES
   Fixes identified issues across all breakpoints
   ============================================================ */

/* ── NAV LOGO — Moved to left next to name ───────────────────── */
.cont-name-logo {
  gap: 0.5rem !important;
}
.nav-logo-link {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.nav-logo-left.jm-icon {
  width: 28px !important;
  height: 28px !important;
}

/* ── HERO NAME SVG — Figma-designed "I'm Trisna" ─────────────── */
.hero-name-svg {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* ── 0. NAVBAR — Z-index + center pill fix ──────────────────── */
.container-2 {
  z-index: 9990 !important;  /* Always on top of all content */
  transition: color 0.3s ease !important;
}

/* Center nav pills: match the right-side social links with
   a frosted glass backdrop so they're always visible on top of content */
.nav-link {
  -webkit-backdrop-filter: blur(11px) !important;
  backdrop-filter: blur(11px) !important;
  background-color: rgba(100, 100, 100, 0.08) !important;
}

.nav-link:hover {
  background-color: rgba(100, 100, 100, 0.25) !important;
}

.nav-link.w--current {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

.nav-link.is-peach {
  background-color: rgba(80, 80, 80, 0.20) !important;
}

/* When over dark hero section → all nav text turns white */
.container-2.nav--dark {
  /* No background — stays transparent */
}

.container-2.nav--dark .nav-name-jm {
  color: #ffffff !important;
}

.container-2.nav--dark .dot-jm {
  background-color: #ffffff !important;
}

.container-2.nav--dark .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.container-2.nav--dark .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.container-2.nav--dark .nav-link.w--current {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
}

.container-2.nav--dark .nav-social-link {
  color: rgba(255, 255, 255, 0.85) !important;
}

.container-2.nav--dark .nav-social-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Mobile nav logo also goes white on dark */
.container-2.nav--dark .jm-icon {
  filter: brightness(0) invert(1);
}

/* ── 1. FONT FALLBACK (Goga not available locally) ──────────── */
/* Goga is a paid custom font. Until font files are added,
   we use a Google Fonts import as a close match. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Override font-family stack site-wide as fallback */
body,
.heading, .click-scroll-text, .service-headline,
.service-h2, .body-copy, .body-copy-cta,
.h2-headline-step1-1, .h2-headline-step1-2, .h2-headline-step1-3,
.h2-benefit-1, .h2-benefit-2, .he-bulltet,
.heading-cta, .name-footer, .body-footer,
.nav-name-jm, .nav-link, .nav-social-link, .nav-link-mobile,
.text-wrapper-cta, .headline-bio, .headline-project,
.tag-text, .pill-service, .pill-year, .footer-social-link {
  font-family: Goga, 'Inter', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 2. GLOBAL — Prevent horizontal overflow ─────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── 3. NAVIGATION — Fix mobile nav z-index and overlap ─────── */

/* Mobile bottom nav should clear content */
@media screen and (max-width: 767px) {
  .container-2 {
    flex-flow: row;            /* Keep logo + icon in a row */
    justify-content: center;
    align-items: center;
    width: 100vw;
    margin-top: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;      /* Let logo link still work */
  }

  .cont-name-logo {
    pointer-events: auto;
    justify-content: center;
    width: auto;
    padding: 3vw 4vw;
    background: rgba(250, 246, 239, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10vw;
    top: 3vw;
  }

  /* Bottom mobile nav pill — HIDDEN, replaced by hamburger menu */
  .nav-menu-mobile {
    display: none !important;
  }

  /* Ensure main content has padding at top so logo doesn't overlap */
  .wrapper-hero {
    padding-top: 0;
  }

  /* Hero content on mobile: keep vertical layout */
  .conter-content-hero {
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 4vw;
  }

  .hero-top {
    width: 100%;
    margin-top: 15vw;
  }

  .hero-bottom {
    width: 100%;
    align-items: flex-start;
  }

  .heading {
    font-size: 6vw;
    line-height: 105%;
  }

  .heading.right {
    text-align: left;
  }

  /* Name lottie takes full width on mobile */
  .name-mouse-lottie {
    display: none; /* Hidden on mobile — too large */
  }

  /* Hero right paragraph */
  .heading.right {
    font-size: 4vw;
  }
}

/* ── 4. HERO — Desktop heading size increase ─────────────────── */
@media screen and (min-width: 768px) {
  .heading {
    font-size: 2.2rem;
  }
}

/* ── 5. CLICK/SCROLL SECTION — Better mobile sizing ─────────── */
@media screen and (max-width: 479px) {
  .click-scroll-height {
    height: 220vw;
    padding-top: 16vw;
  }

  .wrapper-cont-50 {
    width: 80%;
  }

  .click-scroll-text {
    font-size: 9.5vw;
    letter-spacing: -.3vw;
    line-height: 108%;
  }
}

/* ── 6. SERVICES SECTION — Reduce excessive mobile padding ────── */
@media screen and (max-width: 767px) {
  .service-headline-wrapper {
    width: 88vw;
    padding: 0 4vw;
  }

  .service-headline {
    font-size: 9vw;
    letter-spacing: -.3vw;
    line-height: 95%;
  }

  .tag-text {
    font-size: 3.2vw;
    letter-spacing: .05rem;
  }

  /* Each service block */
  .service-wrapper {
    padding-top: 18vw; /* Was 25vw — too much */
    padding-bottom: 8vw;
    padding-left: 4vw;
    padding-right: 4vw;
    gap: 8vw;
  }

  .service-wrapper:not(:last-child) {
    border-bottom: 1px solid rgba(61, 59, 57, 0.15);
  }

  .cont-text-service {
    width: 60%;
    align-items: flex-start;
  }

  .service-h2 {
    font-size: 6.5vw;
    text-align: left;
    letter-spacing: -.1vw;
  }

  .body-copy.home-work {
    text-align: left;
    font-size: 3.2vw;
    max-width: none;
  }

  /* Image grid — 2-column, reasonable aspect */
  .cont-imgs-service {
    grid-template-columns: 1fr 1fr;
    gap: .8vw;
    width: 40%;
  }
}

@media screen and (max-width: 479px) {
  .service-wrapper {
    padding-top: 20vw; /* Was 30vw — too much */
    flex-flow: column;
    align-items: flex-start;
  }

  .cont-text-service {
    width: 100%;
    align-items: flex-start;
  }

  .cont-imgs-service {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .service-h2 {
    font-size: 7vw;
  }

  .body-copy {
    font-size: 3.5vw;
  }
}

/* ── 7. WORK CTA (folder) — Show on tablet, hide on mobile ──── */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .work-cta-wrapper {
    display: flex;
    height: auto;
    padding: 12vw 0;
  }
}

/* ── 8. BENEFITS SECTION — Fix mobile display ───────────────── */
@media screen and (max-width: 767px) {
  .benefits-main-wrapper {
    width: 100vw;
    overflow: hidden;
  }

  /* The sticky scroll container should not be sticky on mobile */
  .bg-benefits-wrapper {
    position: relative;
    height: auto;
    min-height: 60vw;
    padding: 12vw 4vw 16vw;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
  }

  /* Show the "Good design" headline block on mobile (simplified) */
  .main-cont-step1 {
    display: flex !important;
    position: relative;
    width: 92vw;
    margin: 0 auto;
    padding-bottom: 8vw;
  }

  .text-wrapper-align-benefit {
    margin-top: 0;
  }

  .h2-headline-step1-1,
  .h2-headline-step1-2 {
    font-size: 16vw;
    letter-spacing: -.5vw;
  }

  .h2-headline-step1-3 {
    font-size: 4.5vw;
    margin-top: 3vw;
  }

  /* Benefits step 2 */
  .main-cont-step2 {
    position: relative;
    width: 92vw;
    margin: 0 auto;
    padding-top: 8vw;
  }

  .step2-headline-wrapper {
    width: 100%;
    margin-bottom: 6vw;
  }

  .h2-benefit-1 {
    font-size: 4vw;
  }

  .h2-benefit-2 {
    font-size: 11vw;
    letter-spacing: -.4vw;
  }

  .list-benefits {
    width: 100%;
  }

  .he-bulltet {
    font-size: 3.8vw;
    line-height: 140%;
  }

  .check-icon {
    width: 4vw;
    margin-top: 1vw;
    flex-shrink: 0;
  }

  .cont-cta-benefitc {
    opacity: 1 !important; /* Force visible */
    margin-top: 8vw;
  }

  /* Scroll height spacers not needed on mobile */
  .benefits-height-1step,
  .benefits-height-2step {
    display: none;
  }

  /* Person photo: scale appropriately */
  .dark-jm-img {
    width: 55%;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    opacity: .25; /* Ghosted so text is readable over it */
  }

  .jm-siluete-img {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .bg-benefits-wrapper {
    padding-bottom: 20vw;
  }

  .h2-benefit-2 {
    font-size: 12vw;
    line-height: 100%;
  }

  .he-bulltet {
    font-size: 3.5vw;
  }
}

/* ── 9. CTA SECTION — Fix button size & text ─────────────────── */
@media screen and (max-width: 991px) {
  .cta-button-wrapper {
    height: auto;
    min-height: 18vw;
    padding: 5vw 7vw;
  }

  .heading-cta {
    font-size: 7vw;
    letter-spacing: -.2vw;
  }

  .heading-cta.main {
    font-size: 7vw;
    width: 85%;
    line-height: 105%;
  }

  .body-copy-cta {
    font-size: 2.2vw;
    line-height: 160%;
  }

  .cont-icon-cta {
    width: 9vw;
    height: 9vw;
    flex-shrink: 0;
  }
}

@media screen and (max-width: 767px) {
  .content-cta-wrapper {
    width: 90vw;
    margin: 12vw auto;
    border-radius: 6vw;
  }

  .cta-text-wrapper {
    padding: 8vw 6vw;
  }

  .heading-cta.main {
    font-size: 8vw;
    width: 100%;
  }

  .body-copy-cta {
    font-size: 3.2vw;
    line-height: 150%;
  }

  .cta-button-wrapper {
    padding: 6vw 7vw;
    min-height: 20vw;
    height: auto;
  }

  .heading-cta {
    font-size: 8vw;
  }

  .cont-icon-cta {
    width: 10vw;
    height: 10vw;
  }

  .email-cta {
    font-size: 7vw;
  }
}

@media screen and (max-width: 479px) {
  .content-cta-wrapper {
    width: 92vw;
    margin: 14vw auto;
  }

  .cta-text-wrapper {
    padding: 10vw 6vw 6vw;
  }

  .heading-cta.main {
    font-size: 9vw;
    letter-spacing: -.3vw;
    line-height: 100%;
  }

  .body-copy-cta {
    font-size: 3.5vw;
    font-weight: 500;
    margin-top: 2vw;
  }

  .cta-button-wrapper {
    padding: 7vw 6vw;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
  }

  .heading-cta {
    font-size: 9vw;
    letter-spacing: -.3vw;
    flex: 1;
  }

  .email-cta {
    font-size: 6.5vw;
    letter-spacing: -.2vw;
  }
}

/* ── 10. FOOTER — Fix excessive padding-top ─────────────────── */
@media screen and (max-width: 767px) {
  .section.footer {
    height: auto;
    min-height: 100vh;
  }

  .main-wrapper-footer {
    padding-bottom: 18vw;
    padding-top: 6vw;
  }

  /* Remove the massive 55vh top padding — it's meant for sticky scroll,
     but since bg-benefits-wrapper is no longer sticky on mobile, 
     the first footer wrapper doesn't need it */
  .wrapper-content-footer._1 {
    padding-top: 8vw !important; /* Was 55vh — completely broken on mobile */
    margin-bottom: 6vw;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .wrapper-content-footer._2 {
    margin-bottom: 4vw;
  }

  /* Footer name text — show a smaller version */
  .name-footer {
    display: block;
    font-size: 12vw;
    width: 100%;
    letter-spacing: -.4vw;
    line-height: 80%;
  }

  .wrapper-content-footer._2 {
    flex-flow: row;
    align-items: flex-end;
  }

  .body-footer.big {
    display: block !important;
    font-size: 3.5vw;
    opacity: .8;
  }

  .wrapper-column {
    gap: 4vw;
  }

  .body-footer.fade,
  .body-footer.right {
    font-size: 3vw;
  }

  .footer-social-link {
    font-size: 3vw;
    line-height: 200%;
  }

  .wrapper-item-column {
    margin-bottom: 2vw;
  }
}

@media screen and (max-width: 479px) {
  .wrapper-content-footer._1 {
    padding-top: 10vw !important;
  }

  .name-footer {
    font-size: 10vw;
  }

  .body-footer.big {
    font-size: 3.8vw;
  }

  .footer-social-link {
    font-size: 3.5vw;
  }

  .body-footer.fade,
  .body-footer.right {
    font-size: 3.2vw;
  }
}

/* ── 11. BUTTON COMPONENTS — Fix mobile sizes ────────────────── */
@media screen and (max-width: 767px) {
  .main-cont-button {
    gap: 2vw;
  }

  .text-wrapper-cta {
    font-size: 3vw;
    padding: 2.5vw 4vw;
    border-radius: 10vw;
  }

  .icon-wrapper-cta {
    width: 8vw;
    height: 8vw;
    border-radius: 8vw;
    flex-shrink: 0;
  }

  .arrow-cion {
    height: 2.5vw;
  }
}

/* ── 12. MISC — Section spacing & padding consistency ────────── */
@media screen and (max-width: 767px) {
  .section {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  /* Ensure images don't bleed out */
  img {
    max-width: 100%;
  }

  /* Video containers */
  .video-cont-p2.home {
    width: 100%;
  }

  .code-video {
    width: 100%;
  }
}

/* ── 13. TABLET (768-991px) — General improvements ───────────── */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .service-wrapper {
    padding-top: 12vw;
  }

  .cont-text-service {
    width: 40%;
  }

  .body-copy.home-work {
    max-width: 260px;
  }

  .h2-benefit-1 {
    font-size: 2.5vw;
  }

  .h2-benefit-2 {
    font-size: 10vw;
  }

  .main-cont-step2 {
    width: 86vw;
  }

  .wrapper-content-footer._1 {
    padding-top: 4vw;
  }

  .name-footer {
    font-size: 15vw;
  }
}

/* ── 14. LARGE SCREENS (1440px+) — Scale up nicely ───────────── */
@media screen and (min-width: 1440px) {
  .heading {
    font-size: 2.8rem;
  }

  .service-headline {
    font-size: 7.5vw;
  }

  .body-copy {
    font-size: 1rem;
  }

  .body-copy-cta {
    font-size: 1.3vw;
  }
}

/* ── 15. LOADER / INTRO — Ensure it overlays correctly ──────── */
.container-loader {
  pointer-events: none;
}

/* ── 16. SCROLL ANIMATION SHAPES — Better mobile positions ───── */
@media screen and (max-width: 479px) {
  .pill-scroll {
    width: 38vw;
    top: 10vw;
    left: 32%;
  }

  .circle-left-scroll {
    width: 65vw;
    top: -6vw;
    left: -30vw;
  }

  .hex-scroll {
    width: 65vw;
    top: -5vw;
    right: -22%;
  }

  .circle-center-scroll {
    width: 75vw;
    top: 55vw;
    right: 10%;
  }

  .circle-plus-scroll {
    width: 28vw;
    top: 58vw;
    right: 1%;
  }

  .square-scroll {
    width: 30vw;
    top: 125vw;
    left: 2vw;
  }
}

/* ── 17. CUSTOM COLOR OVERRIDE — Dark brand color ───────────── */
/* Override Webflow's rgb(150, 144, 141) color with our dark brand */
.service-headline,
h1.service-headline {
  color: #3d3b39 !important;
}

/* Force override any inline styles or JS animations */
.service-headline[style*="color"] {
  color: #3d3b39 !important;
}

/* ── 18. SERVICE TITLE WIDTH — Prevent excessive wrapping ────── */
/* Desktop: wider container so titles don't wrap unnecessarily */
.cont-text-service {
  width: 45% !important;
}

.service-h2 {
  max-width: none !important;
  white-space: normal;
}

/* Tablet adjustments */
@media screen and (max-width: 991px) {
  .cont-text-service {
    width: 50% !important;
  }
}

/* Mobile: allow natural wrapping */
@media screen and (max-width: 767px) {
  .cont-text-service {
    width: 60% !important;
  }
}

@media screen and (max-width: 479px) {
  .cont-text-service {
    width: 100% !important;
  }
}

/* ── 19. WORK TEXT — Keep horizontal ─────────────────────────── */
.work-big-text {
  white-space: nowrap !important;
  width: auto !important;
  min-width: 100vw;
}

/* ── 20. BENEFITS TEXT — Force visibility & white color ─────── */
/* Override Webflow animation hiding and set white color */
.h2-headline-step1-1,
.h2-headline-step1-2,
.h2-headline-step1-3 {
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

.h2-benefit-1,
.h2-benefit-2 {
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

.he-bulltet,
.list-benefits,
.item-benefits-cont {
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

.text-wrapper-align-benefit,
.line.step1,
.main-cont-step2,
.cont-cta-benefitc {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make all text inside benefits section white */
.main-cont-step1 *,
.main-cont-step2 * {
  color: #ffffff !important;
}

/* Fix benefits section height to show all content */
.bg-benefits-wrapper {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  position: relative !important;
  padding: 8vw 0 !important;
}

.benefits-main-wrapper {
  overflow: visible !important;
}

/* ── 19. NAV LOGO — SVG hover animation ─────────────────────── */
img.jm-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

img.jm-icon:hover {
  transform: rotate(12deg) scale(1.15);
}

/* ── DESIGN STACK SECTION ─────────────────────────────────────── */
.design-stack-section {
  padding: 10vw 0 8vw !important;
  background: #faf6ef !important;
  overflow: visible !important;
  width: 100vw !important;
}
.design-stack-wrapper {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 4vw !important;
}
.design-stack-title {
  display: block !important;
  text-align: center !important;
  margin-bottom: 2vw !important;
  overflow: hidden !important;
  perspective: 900px;
}
.design-stack-title .service-h2 {
  font-family: Goga, Arial, sans-serif !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 600 !important;
  line-height: 110% !important;
  letter-spacing: -0.02em !important;
  color: #3d3b39 !important;
  text-transform: none !important;
}

.design-stack-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  margin-bottom: 3vw !important;
}
.ds-label-title {
  font-family: Goga, Arial, sans-serif !important;
  font-size: .95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(61,59,57,0.55) !important;
  max-width: 28rem !important;
}
.ds-label-desc {
  font-family: Goga, Arial, sans-serif !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  letter-spacing: .03rem !important;
  line-height: 140% !important;
  color: #3d3b3980 !important;
}

.design-stack-grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: #3d3b3925 !important;
}

.ds-highlight {
  pointer-events: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 30 !important;
  background: #3d3b39 !important;
  opacity: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}

.tech-item {
  position: relative !important;
  cursor: pointer !important;
  padding: 2vw 1.8vw !important;
}
.tech-item-bg {
  position: absolute !important;
  inset: 0 !important;
  background: #f5f1eb !important;
  z-index: 0 !important;
  transition: background 0.3s ease !important;
}
.tech-item-content {
  position: relative !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.design-stack-section svg.tech-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  color: #3d3b39 !important;
  transition: color 0.2s !important;
  overflow: visible !important;
}
.tech-info {
  min-width: 0 !important;
}
.design-stack-section .tech-name {
  display: block !important;
  font-family: Goga, Arial, sans-serif !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  letter-spacing: .03rem !important;
  line-height: 140% !important;
  color: #3d3b39 !important;
  transition: color 0.2s !important;
}
.design-stack-section .tech-cat {
  display: block !important;
  font-family: Goga, Arial, sans-serif !important;
  margin-top: 2px !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  letter-spacing: .03rem !important;
  color: #3d3b3980 !important;
  transition: color 0.2s !important;
}

/* Hover state — glassmorphism grey with white text */
.tech-item.is-active .tech-item-bg {
  background: rgba(61, 59, 57, 0.35) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 12px !important;
}
.tech-item.is-active svg.tech-icon { color: #fff !important; }
.tech-item.is-active .tech-name { color: #fff !important; }
.tech-item.is-active .tech-cat { color: rgba(255,255,255,0.7) !important; }

@media screen and (max-width: 991px) {
  .design-stack-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tech-item { padding: 20px 16px !important; }
  .ds-word { font-size: 10vw !important; }
}
@media screen and (max-width: 479px) {
  .design-stack-grid { grid-template-columns: 1fr !important; }
  .design-stack-wrapper { padding: 0 5vw !important; }
  .design-stack-section { padding: 15vw 0 10vw !important; }
  .ds-word { font-size: 13vw !important; }
  .design-stack-title { gap: 2vw !important; }
  .tech-item { padding: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES — Batch
   ══════════════════════════════════════════════════════════════ */

/* ── FIX 1: Hero name "I'm Trisna" cut off on mobile ─────────── */
@media screen and (max-width: 767px) {
  .hero-name-row {
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 0 2vw !important;
  }
  .hero-name-text {
    font-size: 16vw !important;
    line-height: 1 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  .hero-name-im {
    font-size: 16vw !important;
  }
  .hero-name-trisna {
    font-size: 16vw !important;
  }
  .hero-video-slot {
    width: 22vw !important;
    height: 12vw !important;
    flex-shrink: 0 !important;
  }
  .hero-bottom {
    overflow: visible !important;
    padding: 0 4vw !important;
  }
}
@media screen and (max-width: 479px) {
  .hero-name-text {
    font-size: 14vw !important;
  }
  .hero-name-im {
    font-size: 14vw !important;
  }
  .hero-name-trisna {
    font-size: 14vw !important;
  }
  .hero-video-slot {
    width: 18vw !important;
    height: 10vw !important;
  }
}

/* FIX 2 removed — old bottom mobile nav is now fully replaced by hamburger menu */


/* ── FIX 3: Align "vision" pill with "into" in tagline ────────── */
@media screen and (max-width: 767px) {
  .click-scroll-text {
    font-size: 9vw !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
  .cont-click {
    width: 28vw !important;
    height: 10vw !important;
    top: 20.8vw !important;
    left: -1vw !important;
  }
  .click {
    font-size: 9vw !important;
  }
}
@media screen and (max-width: 479px) {
  .click-scroll-text {
    font-size: 10vw !important;
  }
  .click {
    font-size: 10vw !important;
  }
}

/* ── FIX 4: Design Stack — 2 columns on mobile, not 1 ────────── */
@media screen and (max-width: 479px) {
  .design-stack-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── FIX 5: CTA footer overlay — stack vertically on mobile ───── */
@media screen and (max-width: 767px) {
  .cta-button-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3vw !important;
    padding: 6vw !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  .heading-cta {
    font-size: 7vw !important;
    position: relative !important;
    overflow: visible !important;
    white-space: normal !important;
    width: 100% !important;
  }
  .email-cta {
    font-size: 4.5vw !important;
    position: relative !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-all !important;
    width: 100% !important;
    opacity: 0.6;
  }
  .cont-icon-cta {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 10vw !important;
    height: 10vw !important;
    margin-bottom: 2vw !important;
  }
  .hover-main-cta {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .cta-button-wrapper {
    padding: 7vw 5vw !important;
    gap: 2vw !important;
  }
  .heading-cta {
    font-size: 8vw !important;
  }
  .email-cta {
    font-size: 4vw !important;
  }
}

/* ── FIX 6: Footer — prevent text overlap, fix layout ─────────── */
@media screen and (max-width: 767px) {
  .section.footer {
    overflow: hidden !important;
  }
  .main-wrapper-footer {
    overflow: hidden !important;
  }
  .name-footer {
    font-size: 10vw !important;
    overflow: hidden !important;
    word-break: break-word !important;
    line-height: 100% !important;
  }
  .body-footer {
    font-size: 3vw !important;
    overflow: hidden !important;
  }
  .list-footer {
    gap: 1vw !important;
  }
  .footer-social-link {
    font-size: 3.2vw !important;
  }
}

/* ── FIX 7: About hero — responsive on mobile ─────────────────── */
@media screen and (max-width: 767px) {
  .abt-hero-section {
    min-height: 60vh !important;
    padding: 6rem 0 4rem !important;
  }
  .abt-hero-h1 {
    font-size: 8vw !important;
    text-align: left !important;
  }
  .abt-hero-sub {
    font-size: 3vw !important;
    text-align: left !important;
  }
  .abt-hero {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* ── FIX 8: Work page — project cards responsive ──────────────── */
@media screen and (max-width: 479px) {
  .project-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2vw !important;
  }
  .pill-services-cont {
    flex-wrap: wrap !important;
  }
  .pill-service {
    font-size: 3vw !important;
  }
}

/* ── FIX 9: General overflow prevention ───────────────────────── */
@media screen and (max-width: 767px) {
  body {
    overflow-x: hidden !important;
  }
  .main {
    overflow-x: hidden !important;
  }
  .section {
    overflow-x: hidden !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   HAMBURGER MOBILE NAV
   ══════════════════════════════════════════════════════════════ */

/* Hamburger pill wrapper — matches .cont-name-logo frosted glass style */
.hamburger-wrapper {
  display: none;
  background: rgba(250, 246, 239, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 100px;
  padding: 6px;
  position: relative;
}
.hamburger-wrapper.nav--dark {
  background: rgba(10, 10, 9, 0.5) !important;
}

/* Hamburger button inside wrapper */
.hamburger-btn {
  display: flex;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: #3d3b39;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Dark mode hamburger lines */
.hamburger-wrapper.nav--dark .hamburger-line {
  background: #ffffff !important;
}

/* X animation when open */
.hamburger-btn.is-active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Dropdown panel — appended to body, hidden by default */
.mobile-nav-dropdown {
  display: none;
  position: fixed;
  min-width: 220px;
  background: rgba(250, 246, 239, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  z-index: 99999;
  flex-direction: column;
  gap: 8px;
}

/* Dark mode dropdown */
.mobile-nav-dropdown.nav--dark {
  background: rgba(10, 10, 9, 0.92) !important;
}

/* Show dropdown when .is-visible */
.mobile-nav-dropdown.is-visible {
  display: flex !important;
}

/* Nav links inside dropdown */
.mobile-nav-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  border-bottom: 1px solid rgba(61, 59, 57, 0.1);
  padding-bottom: 12px !important;
}

.mobile-nav-dropdown.nav--dark .mobile-nav-links {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.mobile-nav-links .cont-social-link {
  list-style: none !important;
}

.mobile-nav-links .nav-link {
  display: block !important;
  padding: 10px 12px !important;
  font-family: Goga, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #3d3b39 !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  transition: background 0.2s ease !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.mobile-nav-links .nav-link:hover {
  background: rgba(61, 59, 57, 0.08) !important;
}

.mobile-nav-dropdown.nav--dark .mobile-nav-links .nav-link {
  color: #ffffff !important;
}
.mobile-nav-dropdown.nav--dark .mobile-nav-links .nav-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Social links inside dropdown */
.mobile-nav-social {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mobile-nav-social .cont-social-link {
  list-style: none !important;
}

.mobile-nav-social .nav-social-link {
  display: inline-block !important;
  padding: 6px 12px !important;
  font-family: Goga, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #3d3b3980 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  background: transparent !important;
}
.mobile-nav-social .nav-social-link:hover {
  background: rgba(61, 59, 57, 0.08) !important;
  color: #3d3b39 !important;
}
.mobile-nav-dropdown.nav--dark .mobile-nav-social .nav-social-link {
  color: rgba(255, 255, 255, 0.5) !important;
}
.mobile-nav-dropdown.nav--dark .mobile-nav-social .nav-social-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ── Mobile: Show hamburger, hide original links ──────────────── */
@media screen and (max-width: 767px) {
  /* CRITICAL: Override Webflow's flex-flow:column back to row */
  .container-2 {
    flex-flow: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    margin-top: 0 !important;
    padding: 16px 4vw !important;
    z-index: 990 !important;
  }

  /* Hide original desktop nav links + social */
  .container-2 > .nav-menu,
  .container-2 > .nav-social-wrapper {
    display: none !important;
  }

  /* Show hamburger wrapper */
  .hamburger-wrapper {
    display: block !important;
  }

  /* Hide the bottom mobile nav bar */
  .nav-menu-mobile,
  ul:has(> li > .nav-link-mobile) {
    display: none !important;
  }
}


/* ── Mobile Hero Layout ──────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Push hero content higher and align left */
  .wrapper-hero-home {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 5vw 40px !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
  }

  .conter-content-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: flex-start !important;
  }

  .hero-top,
  .hero-bottom {
    width: 100% !important;
    text-align: left !important;
  }

  /* Heading size for mobile */
  .wrapper-hero .heading {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }

  /* Name row: wrap so video goes below */
  .hero-name-row {
    flex-wrap: wrap !important;
    gap: 0 10px !important;
    align-items: baseline !important;
  }

  /* "I'm" and "Trisna" on same line */
  .hero-name-im {
    flex: 0 0 auto !important;
    font-size: 3.5rem !important;
    line-height: 1.1 !important;
    order: 1 !important;
  }

  .hero-name-trisna {
    flex: 0 0 auto !important;
    font-size: 3.5rem !important;
    line-height: 1.1 !important;
    order: 2 !important;
  }

  /* Video goes below the name, full width */
  .hero-video-slot {
    flex: 0 0 100% !important;
    order: 3 !important;
    width: 100% !important;
    height: 200px !important;
    border-radius: 12px !important;
    margin-top: 12px !important;
  }


  /* Subtitle left aligned */
  .wrapper-hero .hero-subtitle {
    font-size: 0.9rem !important;
    margin-top: 8px !important;
    text-align: left !important;
  }
}

/* ── Mobile Services Section ─────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* More spacing above each service block */
  .service-wrapper {
    padding-top: 48px !important;
    padding-bottom: 32px !important;
  }

  /* Title: more spacing + better sizing */
  .service-h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  .cont-title-service {
    margin-bottom: 8px !important;
  }

  .cont-text-service {
    padding: 0 5vw !important;
    margin-bottom: 24px !important;
  }

  /* Image grid: full container width, edge to edge */
  .cont-imgs-service {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 5vw !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .mask-img-service {
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .mask-img-service .img-service {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .mask-img-service .video-cont-p2 {
    width: 100% !important;
    height: 100% !important;
  }

  /* Service description text */
  .body-copy.home-work {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
}