/* =======================================
       RESPONSIVE: Show/Hide layouts
    ======================================= */
    .desktop-view { display: block; }
    .mobile-view { display: none; }

    @media (max-width: 768px) {
      .desktop-view { display: none !important; }
      .mobile-view { display: block !important; }
      body { width: 100%; max-width: 393px; margin: 0 auto; }
    }

    /* =======================================
       DESKTOP STYLES
    ======================================= */
    
    :root {
      --main-color: #c6fca6;
      --default-white: #fff;
      --default-black: #000;
      --body-gray: rgba(255,255,255,0.8);
      --nav-gray: #595959;
      --gradient-green: linear-gradient(122deg, #c6fca6 0%, rgba(167,252,238,0.74) 100%);
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; }
    body { background:#fff; overflow-x:hidden; font-family:'Inter',sans-serif; }

    .page-wrapper {
      width: 1728px; margin: 0 auto;
      position: relative; min-height: 2600px; overflow-x: hidden;
    }

    /* ===================== LOADER ===================== */
    .loader-overlay {
      position: fixed; inset: 0; background: #fff;
      z-index: 9999; display: flex; align-items: center; justify-content: center;
      pointer-events: none;
    }
    .loader-overlay.done {
      animation: loader-exit 1.1s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes loader-exit {
      0%   { opacity:1; }
      60%  { opacity:0.3; }
      100% { opacity:0; pointer-events:none; }
    }
    .loader-overlay.done .loader-text {
      animation: loader-text-exit 1.1s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes loader-text-exit {
      0%   { transform:translateX(0) scale(1); opacity:1; }
      100% { transform:translateX(-350px) scale(0.95); opacity:0; filter:blur(2px); }
    }
    .loader-text {
      font-family:'Manrope',sans-serif; font-weight:500;
      font-size:72.543px; line-height:83.878px; letter-spacing:-0.7254px;
      color:#000; text-align:center; max-width:764px;
    }
    .loader-word {
      display:inline; opacity:0;
      animation: loader-word-in 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes loader-word-in {
      0%   { opacity:0; filter:blur(6px); transform:translateY(20px); }
      40%  { opacity:0.5; filter:blur(3px); }
      100% { opacity:1; filter:blur(0); transform:translateY(0); }
    }

    /* ===================== STICKY HEADER + BLUR ===================== */
    .header-zone {
      position: fixed; top: 0; left: 50%; transform: translateX(-50%);
      width: 1728px; height: 120px; z-index: 100; pointer-events: none;
    }
    .blur-layer {
      position: absolute; top: -30px; left: -60px; right: -60px; height: 140px;
      border-radius: 60px;
      backdrop-filter: blur(44px) saturate(1.2);
      -webkit-backdrop-filter: blur(44px) saturate(1.2);
      background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
      mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, black 50%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 40%, black 50%, transparent 100%);
      z-index: 0;
    }
    .header {
      position: absolute; top: 20px; left: 54px;
      width: 1619px; height: 64px; background: #fff;
      border-radius: 32px; display: flex; align-items: center;
      gap: 33px; padding-left: 20px; padding-right: 12px;
      box-shadow: 0px 4px 16.8px rgba(0,0,0,0.15);
      z-index: 10; pointer-events: all;
    }
    .logo { display:flex; align-items:center; gap:5px; flex-shrink:0; }
    .logo img { width:39px; height:22px; }
    .logo-text { font-family:'Montserrat',sans-serif; line-height:0.84; color:#000; white-space:nowrap; }
    .logo-text .bold { font-weight:600; font-size:19.2px; display:block; }
    .logo-text .light { font-weight:400; font-size:17.37px; display:block; }
    .header-line { flex-shrink:0; width:1010px; height:0; position:relative; align-self:center; }
    .header-line img { position:absolute; top:-0.5px; left:0; width:100%; height:1px; }
    .navigation {
      background:var(--default-black); border-radius:23.346px;
      display:flex; align-items:center; gap:21px; padding:2px;
      width:196px; flex-shrink:0; position:relative; cursor:pointer;
    }
    .nav-selector { width:104.409px; height:38.262px; background:#fff; border-radius:21.356px; flex-shrink:0; }
    .nav-label { font-family:'Inter',sans-serif; font-size:12.351px; letter-spacing:3.9525px; font-weight:400; color:#fff; white-space:nowrap; }
    .nav-label-about { position:absolute; left:24.64px; top:13.62px; font-family:'Inter',sans-serif; font-size:12.351px; letter-spacing:3.9525px; font-weight:400; color:#000; white-space:nowrap; }
    .get-in-touch {
      position:relative; width:159.899px; height:38.107px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      filter:drop-shadow(-1px 2px 6.15px rgba(0,0,0,0.3));
    }
    .get-in-touch-bg { position:absolute; inset:0; background:#fff; border:0.374px solid rgba(86,86,86,0.4); border-radius:21.356px; }
    .get-in-touch span { position:relative; font-family:'Poppins',sans-serif; font-weight:500; font-size:12.351px; letter-spacing:1.2351px; color:#000; white-space:nowrap; }

    /* ===================== HERO LAYERS ===================== */
    .hero-container { position:relative; width:100%; height:1020px; overflow:visible; }

    .hero-bg-layer {
      position:absolute; top:300px; left:-5px; width:1733px; height:796px;
      overflow:hidden; z-index:0; will-change:transform;
    }
    .hero-bg-layer img { position:absolute; top:0; left:0; width:100%; height:186%; }

    .hero-fg-layer {
      position:absolute; top:-48px; left:574px; width:1396px; height:1165px;
      z-index:1; will-change:transform;
    }
    .hero-fg-layer img { width:100%; height:102.39%; transform:rotate(180deg) scaleY(-1); }

    .hero-text {
      position:absolute; top:186px; left:-10px; width:969px;
      display:flex; flex-direction:column; align-items:center; gap:23px;
      z-index:2; will-change:transform;
    }
    .hero-intro {
      width:748.101px; font-family:'Space Grotesk',sans-serif; font-weight:500;
      font-size:29.8px; line-height:34.456px; letter-spacing:-0.298px; color:#929292;
    }
    /* Fix 2: Animate intro words one by one */
    .intro-word {
      display:inline; opacity:0;
      animation: intro-word-in 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes intro-word-in {
      0%   { opacity:0; filter:blur(3px); transform:translateY(8px); }
      50%  { opacity:0.7; filter:blur(1px); }
      100% { opacity:1; filter:blur(0); transform:translateY(0); }
    }
    .hero-heading {
      width:764.743px; font-family:'Manrope',sans-serif; font-weight:500;
      font-size:72.543px; line-height:83.878px; letter-spacing:-0.7254px; color:#000;
    }
    /* Word-by-word animation */
    .hero-word {
      display: inline;
      opacity: 0;
      animation: word-slide-home 1.6s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes word-slide-home {
      0%   { opacity:0; filter:blur(4px); }
      25%  { opacity:0.6; filter:blur(2px); }
      60%  { opacity:0.9; filter:blur(0.5px); }
      100% { opacity:1; filter:blur(0); }
    }
    .hero-stats {
      width:764.033px; height:103.83px; display:flex; align-items:center;
      font-family:'Space Grotesk',sans-serif; font-weight:500;
      font-size:29.8px; line-height:34.456px; letter-spacing:-0.298px; color:#929292;
      opacity:0; animation: fade-in 0.8s ease 3.6s forwards;
    }
    .hero-stats .stat-left { flex:1; }
    .hero-stats .stat-mid { width:283.508px; }
    .hero-stats .stat-right { width:182.834px; text-align:right; }
    @keyframes fade-in { 0%{opacity:0; transform:translateY(15px);} 100%{opacity:1; transform:translateY(0);} }

    /* ===================== INFORMATION BOX ===================== */
    .info-box-wrapper {
      position:absolute; top:955px; left:-9px; width:1744px;
      display:flex; flex-direction:column; align-items:center;
      z-index:4; will-change:transform;
    }
    /* Logo Lip is now PART of the information box */
    .information-box {
      width:100%; background:#fff;
      border-top:11px solid #fff; border-left:11px solid #fff; border-right:11px solid #fff;
      box-shadow:0px -15px 20.4px rgba(0,0,0,0.25);
      overflow:visible; position:relative;
      padding-top: 0;
    }
    .logo-lip-attached {
      position:absolute; top:-96px; left:50%; transform:translateX(-50%);
      width:174.541px; height:105.041px; z-index:5;
    }
    .logo-lip-attached img {
      position:absolute; top:-8.66%; left:-1.2%; width:102.4%; height:108.66%;
    }
    .info-inner {
      position:relative; overflow:hidden; height:1775px;
    }

    .bg-grid { position:absolute; top:0; left:0; width:1737px; height:1598.479px; z-index:0; will-change:transform; }
    .bg-grid img { width:100%; height:100%; }

    /* ===================== EXPERIENCE SECTION ===================== */
    .experience-section {
      position:absolute; top:136px; right:274px; width:1212px; height:569px;
      padding:17px 47px; z-index:3;
    }
    .experience-bg { position:absolute; top:-19px; left:-0.02px; width:1212.014px; height:584px; }
    .experience-bg img { width:1242.214px; height:614.2px; }
    .experience-content {
      position:relative; display:flex; gap:116px; align-items:center; height:511px; width:1119px; z-index:1;
    }
    .experience-title { width:316px; flex-shrink:0; padding-bottom:373px; }
    .section-label {
      font-family:'Inter',sans-serif; font-weight:600; font-size:20px;
      color:var(--main-color); text-transform:uppercase; line-height:1.3; margin-bottom:10px;
    }
    .section-heading {
      font-family:'Poppins',sans-serif; font-weight:500; font-size:40px;
      color:var(--default-white); letter-spacing:-0.8px; line-height:1.2;
    }
    .experience-entries { flex:1; display:flex; flex-direction:column; gap:41px; padding-top:11px; }
    .experience-entry { display:flex; gap:52px; align-items:flex-start; }
    .entry-data { width:290px; flex-shrink:0; }
    .entry-role { font-family:'Manrope',sans-serif; font-weight:500; font-size:18px; color:#fff; line-height:1; margin-bottom:16px; }
    .entry-role .highlight { color:var(--main-color); }
    .entry-role .gradient-text {
      background:linear-gradient(159deg, #c6fca6 0%, rgba(167,252,238,0.74) 99%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .entry-meta { font-family:'Inter',sans-serif; font-weight:400; font-style:italic; font-size:14px; color:rgba(255,255,255,0.8); line-height:1; }
    .entry-desc { width:308.89px; flex-shrink:0; }
    .entry-desc p { font-family:'Inter',sans-serif; font-weight:400; font-size:14px; color:#fff; line-height:22px; }
    .collab-label { font-family:'Inter',sans-serif; font-weight:300; font-style:italic; font-size:14px; color:#fff; margin-top:15px; margin-bottom:12px; }
    .collab-avatars { display:flex; gap:6px; align-items:flex-end; }
    .collab-avatars img { width:42px; height:42px; border-radius:50%; }
    .entry-divider { width:650.89px; height:0; }
    .entry-divider img { width:100%; height:1px; }

    /* Ball Element */
    .ball-element {
      position:absolute; top:508px; right:1286px;
      width:237px; height:237px; z-index:6;
    }
    .ball-element img {
      width:100%; height:100%;
      will-change:transform;
    }

    /* Services Fan */
  /* ===== NEW SERVICES FAN (glass + selector + mouse follow) ===== */
  .services-fan{
    position:absolute; top:573px; right:68px; width:237px; height:248px;
    z-index:5; transform:scale(0.9); transform-origin:top right;
  }
  .sf-base{
    position:absolute; left:11px; top:0; width:216px; height:248px;
    border-radius:10.14px; border:1px solid #fff;
    box-shadow:11px 14px 39.432px 5.633px rgba(0,0,0,0.18);
    backdrop-filter:blur(2.3px);
    background:
      radial-gradient(120% 90% at 50% 115%, rgba(246,192,115,1) 0%, rgba(237,210,171,0.75) 30%, rgba(227,227,227,0.5) 62%, rgba(227,227,227,0.35) 100%);
  }
  .sf-selector{
    position:absolute; left:0; top:53px; width:237px; height:46px;
    border-radius:10.14px; border:1px solid #fff;
    box-shadow:0 4px 11.8px rgba(0,0,0,0.1);
    backdrop-filter:blur(2px);
    background:linear-gradient(94.5deg, rgba(231,225,225,0.4) 1.4%, rgba(153,153,153,0.4) 93.8%);
    transition:top .5s cubic-bezier(0.22,1,0.36,1);
  }
  .sf-item{
    position:absolute; left:29px; white-space:nowrap;
    font-family:'Inter',sans-serif; font-weight:400; font-size:16px;
    color:#595959; transition:font-size .35s ease, font-weight .35s ease, color .35s ease;
  }
  .sf-item[data-i="0"]{top:17px;}
  .sf-item[data-i="1"]{top:64px;}
  .sf-item[data-i="2"]{top:111px;}
  .sf-item[data-i="3"]{top:158px;}
  .sf-item[data-i="4"]{top:205px;}
  .sf-item.focus{
    font-weight:500; font-size:18px; color:#575757;
  }
  .sf-cursor{
    position:absolute; right:-6px; top:60px;
    pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25));
    transition:top .5s cubic-bezier(0.22,1,0.36,1);
  }
  

    /* ===================== WORK SECTION + BUTTONS ===================== */
    .work-section {
      position:absolute; top:737px; right:274px; width:1212px; height:319px;
      padding:76px 47px 63px; z-index:2;
    }
    .work-bg { position:absolute; top:0; left:0.01px; width:1212px; height:319px; }
    .work-bg img { width:1242.2px; height:349.2px; }
    .work-content {
      position:relative; display:flex; gap:141px; align-items:center;
      height:168px; padding:0 7px; width:1113.541px; z-index:1;
    }
    .work-title { width:271px; flex-shrink:0; }
    .work-title .so-far {
      font-family:'Inter',sans-serif; font-weight:600; font-size:20px;
      color:var(--main-color); text-transform:lowercase; text-align:center;
      width:73px; line-height:1.3; margin-top:10px;
    }
    .work-buttons { flex:1; display:flex; gap:16px; align-items:center; }

    /* Buttons: thin even outline matching Figma */
    .work-btn {
      position:relative; border:1.107px solid rgba(198,252,166,0.5);
      border-radius:17.71px; padding:26px 38px;
      font-family:'Manrope',sans-serif; font-weight:500;
      font-size:20px; color:var(--default-white); line-height:30.45px;
      white-space:nowrap; background:transparent; cursor:pointer;
      overflow:hidden; transition: border-color 0.4s ease;
    }
    /* Subtle corner gradients on hover — top-right and bottom-left */
    .work-btn::before,
    .work-btn::after {
      content:''; position:absolute; width:120px; height:120px;
      border-radius:50%; opacity:0;
      transition: opacity 0.5s ease;
      pointer-events:none;
    }
    .work-btn::before {
      top:-40px; right:-40px;
      background:radial-gradient(circle, rgba(198,252,166,0.12) 0%, transparent 70%);
    }
    .work-btn::after {
      bottom:-40px; left:-40px;
      background:radial-gradient(circle, rgba(198,252,166,0.12) 0%, transparent 70%);
    }
    .work-btn:hover {
      border-color:rgba(198,252,166,0.8);
    }
    .work-btn:hover::before,
    .work-btn:hover::after { opacity:1; }

    /* ===================== BEYOND PORTFOLIO ===================== */
    .beyond-section {
      position:absolute; top:1087.96px; right:274px; width:1212px; height:687px;
      padding:17px 47px; z-index:1;
    }
    .beyond-bg {
      position:absolute; top:15.21px; left:0;
      width:1212.014px; height:672px;
    }
    .beyond-bg img {
      width:1242.214px; height:702.2px;
      border-radius:35px;
    }
    .beyond-inner { position:relative; z-index:1; width:100%; height:100%; }
    .beyond-header { position:relative; height:234px; width:100%; }
    .beyond-title-text {
      position:absolute; top:38.54px; left:0; width:342px;
      display:flex; flex-direction:column; gap:15.226px; justify-content:center;
    }
    .beyond-title-text .section-heading { line-height:48.217px; }

    /* Tech Stack Bar */
    .tech-stack-bar {
      position:absolute; top:38px; left:356px; width:762px; height:157px;
      background:rgba(0,0,0,0.14); border:1.107px solid rgba(113,113,113,0.16);
      border-radius:17.71px; overflow:hidden;
      display:flex; gap:30.429px; align-items:flex-start;
      padding:39px 30.533px 19px 23px;
    }
    .tech-stack-glow {
      position:absolute; width:121.601px; height:205.557px;
    }
    .tech-stack-glow img {
      position:absolute; top:-68%; left:-114.94%; width:329.88%; height:236%;
    }
    .tech-stack-glow-tl { left:-91.11px; top:-111.19px; }
    .tech-stack-glow-br { left:699.89px; top:70.81px; }
    .tech-stack-info { display:flex; flex-direction:column; gap:10.151px; flex-shrink:0; position:relative; }
    .tech-stack-title { display:flex; gap:10.151px; align-items:center; }
    .tech-stack-title .icon-wrap { width:30.453px; height:30.453px; position:relative; }
    .tech-stack-title .icon-wrap img { width:100%; height:100%; }
    .tech-stack-title span { font-family:'Manrope',sans-serif; font-weight:600; font-size:20px; color:#fff; line-height:30.453px; white-space:nowrap; }
    .tech-stack-desc { font-family:'Inter',sans-serif; font-weight:400; font-size:16px; color:rgba(255,255,255,0.5); line-height:22.84px; width:290.571px; }
    .tech-stack-icons { display:flex; gap:26.646px; flex:1; position:relative; }
    .tech-icon-box { width:76.132px; height:76.132px; background:rgba(0,0,0,0.14); border:1.269px solid rgba(255,255,255,0.2); border-radius:10.151px; display:flex; align-items:center; justify-content:center; padding:12.689px; flex-shrink:0; }
    .tech-icon-box img { max-width:100%; max-height:100%; }
    .tech-icon-plain { width:76.132px; height:76.132px; flex-shrink:0; position:relative; }
    .tech-icon-plain img { position:absolute; inset:0; width:100%; height:100%; }

    /* Compliments — 4 horizontal marquee rows */
    .compliments-wrap { position:relative; height:385px; overflow:hidden; width:1139px; }
    .compliment-row {
      display:flex; gap:20.391px; width:max-content;
      margin-bottom:20.391px;
    }
    .compliment-row:nth-child(1) { animation: marquee-left 35s linear infinite; }
    .compliment-row:nth-child(2) { animation: marquee-left 45s linear infinite; }
    .compliment-row:nth-child(3) { animation: marquee-left 30s linear infinite; }
    .compliment-row:nth-child(4) { animation: marquee-left 40s linear infinite; }
    @keyframes marquee-left {
      0% { transform:translateX(0); }
      100% { transform:translateX(-50%); }
    }
    .compliment-card {
      border:1px solid #2f3a2c; border-radius:6.02px; overflow:hidden;
      position:relative; flex-shrink:0; height:70px;
    }
    .compliment-card img {
      height:100%; width:auto; display:block; border-radius:6.02px;
    }

    /* ===================== FOOTER ===================== */
    .footer { position:relative; left:3px; width:1271px; height:270px; z-index:4; overflow:hidden; flex-shrink:0; margin-top:5px; margin-left:auto; margin-right:auto; }
    .footer-bg {
      position:absolute; inset:0;
    }
    .footer-bg img {
      width:100%; height:100%;
    }
    .footer-email {
      position:absolute; top:65.08px; left:71px; z-index:2;
      font-family:'Manrope',sans-serif; color:#1e4235;
    }
    .footer-email .label { font-weight:500; font-size:33.264px; line-height:0.99; display:block; margin-bottom:4px; }
    .footer-email .address { font-weight:700; font-size:38.656px; line-height:0.99; display:block; }
    .footer-credit {
      position:absolute; top:45.08px; right:108px;
      font-family:'Manrope',sans-serif; font-size:19.154px; color:#177006;
      text-align:right; width:314px; line-height:normal; z-index:2;
    }
    .footer-credit .medium { font-weight:500; }
    .footer-credit .extrabold { font-weight:800; }
    .footer-socials {
      position:absolute; top:141.08px; left:1246px; width:100.238px; height:23px; z-index:2;
    }
    .footer-socials img { width:calc(100% + 1%); height:calc(100% + 8.7%); position:absolute; top:-4.35%; left:0; }
    .footer-schedule {
      position:absolute; top:122.08px; left:1380px; width:207px; height:49px; z-index:2;
      display:flex; align-items:center; padding:11.645px 24px 11.645px 38.818px;
      filter:drop-shadow(-1.294px 2.588px 7.958px rgba(0,0,0,0.3));
    }
    .footer-schedule-bg {
      position:absolute; top:0; left:10px; width:197px; height:49px;
      background:#fff; border:0.483px solid rgba(86,86,86,0.4); border-radius:27.634px;
    }
    .footer-schedule span {
      position:relative; font-family:'Poppins',sans-serif; font-weight:500;
      font-size:15.982px; letter-spacing:1.5982px; color:#000; white-space:nowrap;
    }
  

    /* =======================================
       MOBILE STYLES
    ======================================= */
    
    :root {
      --main-color: #c6fca6;
      --default-white: #fff;
      --default-black: #000;
      --gradient-green: linear-gradient(122deg, #c6fca6 0%, rgba(167,252,238,0.74) 100%);
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
    body{background:#fff;overflow-x:hidden;font-family:'Inter',sans-serif;margin:0 auto;}

    /* ===== HEADER NAV ===== */
    .mobile-header{
      position:fixed;top:0;left:50%;transform:translateX(-50%);
      width:393px;height:100px;z-index:100;pointer-events:none;
    }
    .mobile-blur{display:none;
      position:absolute;top:-20px;left:-30px;right:-30px;height:110px;
      backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
      background:linear-gradient(180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
      mask-image:radial-gradient(ellipse 90% 100% at 50% 40%,black 50%,transparent 100%);
      -webkit-mask-image:radial-gradient(ellipse 90% 100% at 50% 40%,black 50%,transparent 100%);
    }
    .mobile-logo{
      position:absolute;top:30px;left:16px;display:flex;align-items:center;gap:3px;
      pointer-events:all;
    }
    .mobile-logo img{width:25.746px;height:14.557px;}
    .mobile-logo-text{font-family:'Montserrat',sans-serif;line-height:0.84;color:#000;}
    .mobile-logo-text .bold{font-weight:600;font-size:12.665px;display:block;}
    .mobile-logo-text .light{font-weight:400;font-size:11.458px;display:block;}

    .mobile-nav{
      position:absolute;top:19px;left:105px;width:276px;height:44px;
      background:var(--default-white);border-radius:26px;
      display:flex;align-items:center;gap:20px;padding:5px 5.915px 5px 5px;
      pointer-events:all;
    }
    .nav-toggle{
      position:relative;flex-shrink:0;
      width:130.222px;height:37.778px;box-sizing:border-box;
      background:var(--default-black);border:1.056px solid var(--default-white);
      border-radius:20.777px;pointer-events:all;cursor:pointer;
    }
    .nav-toggle-pill{
      position:absolute;left:2px;top:1px;width:61.222px;height:33.778px;
      background:#fff;border-radius:19.006px;
      transition:transform .45s cubic-bezier(0.22,1,0.36,1);will-change:transform;
    }
    body.m-show-work .nav-toggle-pill{transform:translateX(64px);}
    body.m-show-work{background:#fff;}
    body.m-show-work .mobile-logo-text{color:#000;}
    body.m-show-work .mobile-logo img{filter:none;}
    .nt-item{position:absolute;transition:opacity .3s ease .1s;}
    /* State A: person icon in pill + WORK text */
    .nt-icon-person{left:24.39px;top:8.56px;width:13.333px;height:15.833px;} /* 26.39/10.56 incl 2px border */
    .nt-text-work{
      left:71.22px;top:11.24px;width:55px;
      font-family:'Inter',sans-serif;font-weight:400;font-size:10.992px;
      letter-spacing:3.5174px;color:#fff;line-height:normal;
    }
    /* State B: ABOUT text + briefcase in pill */
    .nt-text-about{
      left:7px;top:11.24px;width:52px;
      font-family:'Inter',sans-serif;font-weight:400;font-size:10.392px;
      letter-spacing:3.3256px;color:#fff;line-height:normal;opacity:0;
    }
    .nt-icon-case{left:88px;top:9.89px;width:16.549px;height:13.54px;opacity:0;}
    body.m-show-work .nt-icon-person{opacity:0;}
    body.m-show-work .nt-text-work{opacity:0;}
    body.m-show-work .nt-text-about{opacity:1;}
    body.m-show-work .nt-icon-case{opacity:1;}
    .nav-connect{
      position:relative;flex-shrink:0;width:117px;height:34px;margin-left:3px;
      filter:drop-shadow(2.013px 0.671px 9.53px rgba(0,0,0,0.3));
      pointer-events:all;cursor:pointer;
    }
    .nav-connect-bg{
      position:absolute;top:-2px;left:3.78px;width:110px;height:38px;
      background:#fff;border:0.336px solid rgba(86,86,86,0.4);border-radius:19.183px;
    }
    .nav-connect span{
      position:absolute;left:3.78px;top:0;width:110px;height:34px;
      display:flex;align-items:center;justify-content:center;
      font-family:'Poppins',sans-serif;font-weight:500;font-size:11.094px;
      letter-spacing:1.1094px;text-indent:1.1094px;color:#000;white-space:nowrap;
    }

    /* ===== HERO TEXT ===== */
    .mobile-hero-text{
      position:absolute;top:98px;left:-56px;right:0;
      padding:0 40.371px;padding-bottom:222px;
      display:flex;flex-direction:column;align-items:center;gap:15.882px;
      z-index:2;will-change:transform;
    }
    .m-hero-word{
      display:inline;opacity:0;
      animation:word-slide-home 1.6s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    .mobile-hero-stats{opacity:0;animation:intro-word-in 0.9s cubic-bezier(0.22,1,0.36,1) 1.35s forwards;}
    .mobile-hero-heading{
      font-family:'Manrope',sans-serif;font-weight:500;
      font-size:36.301px;line-height:41.973px;letter-spacing:-0.363px;
      color:#000;width:256px;
    }
    .mobile-hero-stats{
      display:flex;align-items:center;justify-content:space-between;
      width:256px;
      font-family:'Space Grotesk',sans-serif;font-weight:500;
      font-size:15.486px;line-height:17.905px;letter-spacing:-0.1549px;
      color:#929292;overflow:hidden;
    }
    .mobile-hero-stats .stat-right{text-align:right;width:93.066px;}

    /* ===== HERO LAYERS (parallax) ===== */
    .mobile-hero-bg{
      position:absolute;top:356.92px;left:-397px;
      width:825.302px;height:379.077px;overflow:hidden;
      z-index:0;will-change:transform;
    }
    .mobile-hero-bg img{position:absolute;top:0;left:0;width:100%;height:186.04%;}

    .mobile-hero-fg{
      position:absolute;top:223px;left:-18px;
      width:636.288px;height:531px;
      z-index:1;will-change:transform;
    }
    .mobile-hero-fg img{width:100%;height:102.39%;transform:rotate(180deg) scaleY(-1);}

    /* ===== INFORMATION SECTION ===== */
    .mobile-info{
      position:absolute;top:711px;left:-198px;width:798px;height:2056px;
      z-index:4;will-change:transform;
      background:var(--default-white);
    }
    .mobile-logo-lip{
      position:absolute;top:-43px;left:359.07px;width:79.865px;height:48.063px;
    }
    .mobile-logo-lip img{
      position:absolute;top:-8.66%;left:-1.2%;width:calc(100% + 2.4%);height:calc(100% + 8.66%);
    }

    /* Green vector decoration */
    .mobile-vector{
      position:absolute;top:5px;left:125px;width:540px;height:1220px;
      z-index:0;pointer-events:none;
    }
    .mobile-vector img{position:absolute;left:50%;top:50%;width:1220px;height:540px;transform:translate(-50%,-50%) rotate(90deg) scaleY(-1);}

    /* ===== EXPERIENCE SECTION (manual scroll + magnet snap) ===== */
    .mobile-experience{
      position:absolute;top:35px;left:198px;width:393px;
    }
    .mobile-exp-label{
      text-align:center;
      font-family:'Inter',sans-serif;font-weight:600;font-size:12.468px;
      color:#177006;text-transform:uppercase;line-height:1.3;margin-bottom:8px;
    }
    .mobile-exp-heading{
      text-align:center;
      font-family:'Poppins',sans-serif;font-weight:500;font-size:24.937px;
      color:var(--default-black);letter-spacing:-0.4987px;line-height:1.2;
    }
    .mobile-exp-scrub{
      position:relative;width:108px;height:3px;margin:14px auto 14px;
      border-radius:2px;background:rgba(0,0,0,0.10);overflow:hidden;
    }
    .mobile-exp-scrub-fill{
      position:absolute;left:0;top:0;height:100%;width:10%;
      border-radius:2px;background:#177006;transition:width .05s linear;
    }
    .mobile-exp-strip{
      width:393px;overflow-x:auto;overflow-y:hidden;
      display:flex;
      scrollbar-width:none;-ms-overflow-style:none;
      -webkit-overflow-scrolling:touch;
    }
    .mobile-exp-strip::-webkit-scrollbar{display:none;}
    /* SVG at 90% of native (528 -> 475px tall) */
    .mexp-img{
      height:475px;width:auto;flex-shrink:0;display:block;
      user-select:none;-webkit-user-drag:none;pointer-events:none;
    }

    /* ===== OFFERING SCROLL (marquee) ===== */
    .mobile-offering{
      position:absolute;top:720px;left:198px;
      overflow:hidden;width:780px;height:40px;
    }
    .mobile-offering-track{
      display:flex;gap:10.496px;align-items:center;
      animation:marquee-scroll 15s linear infinite;
      width:max-content;
    }
    @keyframes marquee-scroll{
      0%{transform:translateX(0);}
      100%{transform:translateX(-50%);}
    }
    .mobile-offering-pill{
      padding:6.482px 23.768px;border-radius:35.652px;
      background:var(--gradient-green);white-space:nowrap;flex-shrink:0;
    }
    .mobile-offering-pill span{
      font-family:'Manrope',sans-serif;font-weight:600;
      font-size:15.326px;color:#151515;line-height:25.928px;
    }

    /* ===== WORK BOX ===== */
    .mobile-work{
      position:absolute;top:813px;left:197px;width:387px;height:1393.5px;
      padding:31.565px 25.995px;
    }
    .mobile-work-content{position:relative;top:-15px;z-index:1;display:flex;flex-direction:column;gap:9.284px;align-items:center;text-align:center;}
    .mobile-work-label{
      font-family:'Inter',sans-serif;font-weight:600;font-size:11.576px;
      color:#177006;text-transform:uppercase;line-height:1.3;
    }
    .mobile-work-heading{
      font-family:'Poppins',sans-serif;font-weight:500;font-size:23.151px;
      color:var(--default-black);letter-spacing:-0.463px;line-height:1.2;
      margin:6px 0;
    }
    .mobile-work-sofar{
      font-family:'Inter',sans-serif;font-weight:600;font-size:11.576px;
      color:#177006;text-transform:uppercase;line-height:1.3;
      margin-bottom:22.281px;
    }
    .mobile-work-grid{
      display:grid;grid-template-columns:1fr 1fr;
      gap:12.069px 13.926px;width:328.652px;height:166.183px;
    }
    .mobile-work-btn{
      background:rgba(0,0,0,0.14);border:1.028px solid #c6fca6;
      border-radius:16.442px;overflow:hidden;position:relative;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;
    }
    .mobile-work-btn span{
      font-family:'Manrope',sans-serif;font-weight:600;font-size:18.568px;
      color:var(--default-black);line-height:28.272px;
    }
    .mobile-work-btn .glow1,.mobile-work-btn .glow2{opacity:0;transition:opacity 0.18s ease;}
    .mobile-work-btn:active .glow1,.mobile-work-btn:active .glow2{opacity:1;}
    .mobile-work-btn .glow1{
      position:absolute;bottom:63.03px;left:-62.3px;width:129.975px;height:191.249px;
    }
    .mobile-work-btn .glow1 img{
      position:absolute;top:-67.85%;left:-99.84%;width:calc(100% + 199.68%);height:calc(100% + 135.7%);
    }
    .mobile-work-btn .glow2{
      position:absolute;bottom:-128.22px;left:122.45px;width:97.481px;height:143.901px;
    }
    .mobile-work-btn .glow2 img{
      position:absolute;top:-90.18%;left:-133.12%;width:calc(100% + 266.24%);height:calc(100% + 180.36%);
    }

    /* ===== BEYOND PORTFOLIO ===== */
    .mobile-beyond{
      position:absolute;left:18px;top:364px;width:350px;height:599.388px;box-sizing:border-box;
      background:#000;border:11.774px solid #fff;border-radius:22.5px;
      box-shadow:1.07px -3.211px 12.416px 0 rgba(0,0,0,0.25);
      overflow:hidden;
    }
    .mobile-beyond-text{
      position:absolute;left:19.27px;top:32.11px;width:259.021px;
      display:flex;flex-direction:column;gap:11.532px;justify-content:center;
    }
    .mobile-beyond-label{
      font-family:'Inter',sans-serif;font-weight:600;font-size:15.147px;
      color:#c6fca6;text-transform:uppercase;line-height:1.3;
    }
    .mobile-beyond-heading{
      font-family:'Poppins',sans-serif;font-weight:500;font-size:30.295px;
      color:#fff;letter-spacing:-0.6059px;line-height:36.518px;
    }
    .mobile-tech{
      position:absolute;left:50%;transform:translateX(-50%);top:154.13px;
      width:290.061px;height:80.739px;
    }
    .mobile-tech-title{
      position:absolute;left:40.47px;top:12.96px;
      font-family:'Manrope',sans-serif;font-weight:600;font-size:19.935px;
      color:#fff;line-height:30.355px;white-space:nowrap;
    }
    .mobile-tech-sub{
      position:absolute;left:40.87px;top:43.86px;width:249.193px;
      font-family:'Inter',sans-serif;font-weight:400;font-size:15.948px;
      color:rgba(255,255,255,0.5);line-height:22.766px;white-space:nowrap;
    }
    .mobile-tech-icon{
      position:absolute;left:0;top:28.9px;width:30.399px;height:27.444px;
      -webkit-mask-image:url('assets/fx/fx-asset-2.svg');
      mask-image:url('assets/fx/fx-asset-2.svg');
      -webkit-mask-size:30.399px 27.444px;mask-size:30.399px 27.444px;
      -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    }
    .mobile-tech-icon img{position:absolute;inset:0;width:100%;height:100%;}
    .mobile-compliment{
      position:absolute;left:19.27px;top:274.01px;width:893.731px;height:302.095px;overflow:hidden;
    }
    .mobile-comp-row{
      display:flex;gap:16px;width:max-content;margin-bottom:16px;
    }
    .mobile-comp-row:nth-child(1){animation:marquee-left 35s linear infinite;}
    .mobile-comp-row:nth-child(2){animation:marquee-left 45s linear infinite;}
    .mobile-comp-row:nth-child(3){animation:marquee-left 30s linear infinite;}
    .mobile-comp-row:nth-child(4){animation:marquee-left 40s linear infinite;}
    .mobile-comp-row .comp{
      position:relative;border:0.785px solid #2f3a2c;border-radius:4.724px;overflow:hidden;
      flex-shrink:0;height:56px;
    }
    .mobile-comp-row .comp img{height:100%;width:auto;display:block;border-radius:4.724px;}

    /* ===== MOBILE FOOTER ===== */
    .mobile-footer{
      position:absolute;left:18px;top:978px;width:350px;height:255px;box-sizing:border-box;
      border:11.774px solid #fff;border-radius:22.5px;
      background:linear-gradient(190.074deg,#ffffff 6.5083%,#aad4a6 98.873%);
      box-shadow:1.07px -3.211px 12.416px 0 rgba(0,0,0,0.25);
      overflow:hidden;
      display:flex;flex-direction:column;gap:23.513px;align-items:center;
      padding:22.477px 17.53px 0 19.266px;
    }
    .mobile-footer-text{
      display:flex;flex-direction:column;gap:33.18px;align-items:center;
      text-align:right;width:100%;
    }
    .mobile-footer-credit{
      font-family:'Manrope',sans-serif;font-weight:500;font-size:16.233px;
      color:#177006;width:312.538px;
    }
    .mobile-footer-credit strong{font-weight:800;}
    .mobile-footer-mail{
      font-family:'Manrope',sans-serif;font-weight:500;font-size:17.402px;
      color:#1e4235;line-height:0.99;width:100%;
    }
    .mobile-footer-mail strong{font-weight:700;font-size:20.223px;}
    .mobile-footer-row{
      display:flex;gap:28.613px;align-items:center;padding:0 12.106px;width:100%;box-sizing:border-box;
    }
    .mobile-footer-socials{width:84.95px;height:19.492px;flex-shrink:0;position:relative;}
    .mobile-footer-socials img{position:absolute;top:-4.35%;left:0;width:101%;height:108.7%;}
    .mobile-footer-btn{
      position:relative;flex:1 0 0;height:41.527px;min-width:1px;
      display:flex;align-items:center;gap:10.966px;
      padding:9.869px 20.34px 9.869px 32.898px;box-sizing:border-box;
      filter:drop-shadow(-1.097px 2.193px 6.744px rgba(0,0,0,0.3));cursor:pointer;
    }
    .mobile-footer-btn .btn-bg{
      position:absolute;left:8.47px;top:0;width:166.954px;height:41.527px;
      background:#fff;border:0.41px solid rgba(86,86,86,0.4);border-radius:23.419px;
    }
    .mobile-footer-btn span{
      position:relative;font-family:'Poppins',sans-serif;font-weight:500;
      font-size:13.544px;letter-spacing:1.3544px;color:#000;white-space:nowrap;
    }

    /* ===== MOBILE WORK PAGE — folder containers ===== */
    .mobile-work-page{display:none;position:relative;width:393px;min-height:100vh;background:#fff;}
    .mobile-work-page.visible{display:block;}
    .m-folder-outer{
      position:relative;width:396px;height:743px;margin:85px 0 30px -1.5px;
      transform:scale(0.97);transform-origin:top center;overflow:visible;
    }
    .m-folder-svg{
      position:absolute;top:0;left:0;width:396px;height:743px;z-index:1;overflow:visible;
      pointer-events:none;filter:grayscale(1) brightness(0.4);transition:filter 0.4s ease;
    }
    .m-folder-svg.active{z-index:3;filter:grayscale(0) brightness(1);}
    .m-folder-svg.bounce{animation:tabBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;}
    .m-tabs-row{position:absolute;top:0;left:0;right:0;height:38px;z-index:6;}
    .m-tab-label{
      position:absolute;top:13px;background:none;border:none;
      font-family:'Manrope',sans-serif;font-weight:800;font-size:9px;letter-spacing:2.6px;
      color:transparent;cursor:pointer;white-space:nowrap;z-index:6;
      transform:translateX(-50%);padding:0 8px 10px;
    }
    .m-tab-label.active{color:transparent;}
    .m-tab-design,.m-tab-merch{color:transparent;}
    .m-tab-design.active,.m-tab-merch.active{color:transparent;}
    .m-tab-merch{left:50px;}.m-tab-design{left:142px;}.m-tab-motion{left:234px;}.m-tab-product{left:337px;}

    /* ===== PRODUCT TAB — card deck ===== */
    .m-deck{position:absolute;left:0;top:0;width:396px;height:743px;z-index:4;display:none;pointer-events:none;overflow:hidden;}
    .m-deck.active{display:block;}
    .m-deck.bounce{animation:tabBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;transform-origin:center;}
    .m-card{
      position:absolute;pointer-events:auto;cursor:pointer;box-sizing:border-box;
      border:none;border-radius:17.713px;
      background:radial-gradient(ellipse 140% 190% at 5.7% -44%, rgba(54,54,54,1) 0%, rgba(26,26,26,0.27) 100%);
      -webkit-backdrop-filter:blur(11.64px);backdrop-filter:blur(11.64px);
      overflow:hidden;
      transition:transform .55s cubic-bezier(0.34,1.56,0.64,1),
                 width .55s cubic-bezier(0.34,1.56,0.64,1),
                 height .55s cubic-bezier(0.34,1.56,0.64,1),
                 left .55s cubic-bezier(0.34,1.56,0.64,1);
    }
    /* revealed back cards grow one size up */
    .m-card.c-ftv2.revealed{left:12px;width:372px;height:301.4px;}
    .m-card.c-duels.revealed{left:16px;width:364px;height:295px;}
    /* gradient glass stroke */
    .m-card::before{
      content:'';position:absolute;inset:0;border-radius:inherit;padding:0.709px;
      background:linear-gradient(105deg,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.077) 32.6%,
        rgba(255,255,255,0.221) 69.6%,
        rgba(255,255,255,0.021) 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;
      pointer-events:none;z-index:3;
    }
    /* stack centered vertically in container, same relative offsets */
    .m-card.c-duels{left:20px;top:158px;width:356px;height:288px;z-index:1;}
    .m-card.c-ftv2{left:16px;top:202px;width:364px;height:295px;z-index:2;}
    .m-card.c-ftv1{left:12px;top:249px;width:372px;height:301.4px;z-index:3;}
    .m-card.dropped{transform:translateY(255px);}
    .m-card-label{
      position:absolute;left:15.55px;top:21.3px;
      font-family:'Manrope',sans-serif;font-weight:800;font-size:8.054px;
      letter-spacing:2.5773px;color:var(--main-color,#c6fca6);text-transform:uppercase;
      white-space:nowrap;z-index:2;
    }
    .m-card-btn{
      position:absolute;right:13px;top:12px;width:80.36px;height:28.57px;
      border-radius:55px;box-sizing:border-box;z-index:2;border:none;
      background:linear-gradient(25.44deg, rgba(26,29,25,0.5) 28.6%, rgba(62,62,62,0.5) 97.6%);
    }
    .m-card-btn::before{
      content:'';position:absolute;inset:0;border-radius:inherit;padding:0.549px;
      background:linear-gradient(105deg,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.077) 32.6%,
        rgba(255,255,255,0.221) 69.6%,
        rgba(255,255,255,0.021) 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;
      pointer-events:none;
    }
    .m-card-btn span{
      position:absolute;left:18.68px;top:8.28px;
      font-family:'Manrope',sans-serif;font-weight:600;font-size:8.79px;
      letter-spacing:0.791px;color:#fff;white-space:nowrap;
    }
    .m-card-btn img{position:absolute;left:61.68px;top:7.7px;width:13.18px;height:13.18px;transform:rotate(45deg);}
    .m-card-teaser{
      position:absolute;left:5.13px;top:46.65px;width:360.42px;height:249.52px;
      border-radius:13.734px;overflow:hidden;box-sizing:border-box;z-index:1;
    }
    .m-card-teaser::after{
      content:'';position:absolute;inset:0;border-radius:inherit;padding:0.709px;
      background:linear-gradient(105deg,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.077) 32.6%,
        rgba(255,255,255,0.221) 69.6%,
        rgba(255,255,255,0.021) 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;
      pointer-events:none;
    }
    .m-card-teaser img{width:100%;height:100%;object-fit:cover;display:block;}

    /* Mobile device toggle (desktop/mobile) + coming soon */
    .m-device-toggle{
      position:absolute;top:52px;right:14px;width:128px;height:31px;z-index:6;
      display:none;background:#000;border-radius:15px;border:1px solid rgba(255,255,255,0.12);
    }
    .m-device-toggle.visible{display:block;}
    .m-device-toggle button{
      position:absolute;top:0;width:64px;height:31px;background:none;border:none;
      cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;padding:0;
    }
    .m-device-toggle .dt-desktop{left:0;}
    .m-device-toggle .dt-mobile{left:64px;}
    .m-device-toggle button svg{width:17px;height:15px;stroke:#7a7a7a;fill:none;stroke-width:1.6;transition:stroke .35s ease;}
    .m-device-toggle button.active svg{stroke:#c6fca6;}
    .m-device-toggle .device-pill{
      position:absolute;z-index:1;top:1px;left:2px;width:61px;height:27px;border-radius:13.5px;
      background:radial-gradient(120% 160% at 30% 20%, #587a49 0%, #1d2b18 70%);
      border:1px solid rgba(198,252,166,0.55);
      transition:transform .45s cubic-bezier(0.34,1.56,0.64,1);
    }
    .m-device-toggle.mobile .device-pill{transform:translateX(61px);}
    .m-coming-soon{
      position:absolute;left:0;right:0;top:0;height:743px;z-index:4;
      display:none;align-items:center;justify-content:center;
      font-family:'Manrope',sans-serif;font-weight:800;font-size:13.09px;
      letter-spacing:4.19px;color:var(--main-color,#c6fca6);text-transform:uppercase;
      text-align:center;
    }
    .m-coming-soon.visible{display:flex;}

    /* ===== MOBILE CATALOGUE (same logic as desktop) ===== */
    .m-catalog{
      position:absolute;inset:0;z-index:8;background:#000;border-radius:16px;
      opacity:0;pointer-events:none;transition:opacity .4s ease;
      display:flex;flex-direction:column;overflow:hidden;
    }
    .m-catalog.visible{opacity:1;pointer-events:auto;}
    .m-mc-topbar{position:relative;flex-shrink:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;z-index:8;}
    .m-mc-back{width:34px;height:34px;border-radius:50%;border:1px solid rgba(198,252,166,0.35);background:rgba(0,0,0,0.55);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
    .m-mc-back svg,.m-mc-btn svg{width:14px;height:14px;stroke:#c6fca6;stroke-width:2.4;fill:none;}
    .m-mc-title-wrap{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;}
    .m-mc-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:11px;letter-spacing:2.8px;color:#c6fca6;text-transform:uppercase;white-space:nowrap;}
    .m-mc-info{width:22px;height:22px;border-radius:50%;border:1px solid rgba(198,252,166,0.4);background:rgba(0,0,0,0.5);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:11px;color:#c6fca6;padding:0;}
    .m-mc-arrows{display:flex;gap:8px;}
    .m-mc-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(198,252,166,0.35);background:rgba(0,0,0,0.55);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
    .m-mc-scroll{flex:1;overflow-y:auto;overflow-x:hidden;transition:opacity .18s ease,transform .18s ease;scrollbar-width:none;}
    .m-mc-scroll::-webkit-scrollbar{display:none;}
    .m-mc-scroll img{display:block;width:100%;height:auto;-webkit-user-drag:none;}
    .m-mc-modal{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:16px;}
    .m-mc-modal.open{display:flex;animation:mcModalFade .25s ease forwards;}
    .m-mc-modal.open .m-mc-modal-box{animation:mcModalPop .32s cubic-bezier(0.34,1.56,0.64,1) forwards;}
    .m-mc-modal-box{width:86%;max-height:70%;overflow-y:auto;background:#161816;border:1px solid rgba(198,252,166,0.3);border-radius:16px;padding:24px 22px;box-shadow:0 24px 80px rgba(0,0,0,0.6);}
    .m-mc-modal-box h3{margin:0 0 12px;font-family:'Manrope',sans-serif;font-weight:800;font-size:12px;letter-spacing:3px;color:#c6fca6;text-transform:uppercase;}
    .m-mc-modal-box p{margin:0;font-family:'Manrope',sans-serif;font-weight:500;font-size:13px;line-height:1.7;color:rgba(255,255,255,0.82);}
    .m-mc-modal-close{position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(198,252,166,0.35);background:rgba(0,0,0,0.55);cursor:pointer;color:#c6fca6;font-size:14px;display:flex;align-items:center;justify-content:center;}

    /* ===== DESIGN TAB — scrollable catalogue ===== */
    .m-design-view{
      position:absolute;left:12px;top:92px;width:372px;height:620px;z-index:4;
      display:none;overflow-y:auto;overflow-x:hidden;border-radius:14px;
      scrollbar-width:none;-ms-overflow-style:none;
    }
    .m-design-view::-webkit-scrollbar{display:none;}
    .m-design-view img{display:block;width:100%;height:auto;-webkit-user-drag:none;}
    .m-design-view.active{display:block;}
    .m-design-view.bounce{animation:tabBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;transform-origin:center;}

    /* thin scroll progress for design catalogue */
    .m-design-track{
      position:absolute;right:4px;top:100px;width:2px;height:604px;z-index:5;
      background:#333333;border-radius:1px;display:none;pointer-events:none;
    }
    /* ===== Mobile DESIGN top nav (ALL / BRAND / 2D / 3D) ===== */
    .m-design-nav{
      position:absolute;left:12px;top:52px;width:372px;height:34px;z-index:6;display:none;
      border-radius:10px;overflow:hidden;background:rgba(20,22,20,0.55);
      border:1px solid rgba(255,255,255,0.08);
    }
    .m-design-nav.active{display:block;}
    .m-dn-sel{
      position:absolute;top:0;left:0;width:25%;height:100%;z-index:1;border-radius:10px;
      background:linear-gradient(17deg,#1a1d19 28%,#3e3e3e 98%);
      box-shadow:0 4px 11.8px rgba(0,0,0,0.1);
      transition:transform .4s cubic-bezier(0.22,1,0.36,1);
    }
    .m-dn-item{
      position:absolute;top:0;height:100%;width:25%;z-index:2;background:none;border:none;padding:0;
      font-family:'Manrope',sans-serif;font-weight:800;font-size:11px;letter-spacing:1.5px;
      color:#595959;cursor:pointer;transition:color .3s ease;
    }
    .m-dn-item.active{color:#c6fca6;}
    .m-dn-item[data-i="0"]{left:0;} .m-dn-item[data-i="1"]{left:25%;}
    .m-dn-item[data-i="2"]{left:50%;} .m-dn-item[data-i="3"]{left:75%;}
    .m-design-track.active{display:block;}
    .m-design-thumb{
      position:absolute;left:0;top:0;width:100%;height:60px;
      background:#c6fca6;border-radius:1px;
    }

    /* --- Desktop tiles: center-focused carousel (built cards, Figma 1:1) --- */
    .desktop-tiles { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity .4s ease; }
    .desktop-tiles.hidden { opacity:0; pointer-events:none; }
    .desktop-tile { position:absolute; top:50%; left:50%; width:761.3px; height:560px; cursor:pointer; transition:transform .5s cubic-bezier(0.22,1,0.36,1), opacity .5s ease, filter .5s ease; }
    .desktop-tile.center { transform:translate(-50%,-50%) scale(1); z-index:3; opacity:1; filter:none; }
    .desktop-tile.center:hover { transform:translate(-50%,-50%) scale(1.05); }
    .desktop-tile.left  { transform:translate(calc(-50% - 560px),-50%) scale(0.55); z-index:2; opacity:0.45; filter:grayscale(0.6) brightness(0.7); }
    .desktop-tile.right { transform:translate(calc(-50% + 560px),-50%) scale(0.55); z-index:2; opacity:0.45; filter:grayscale(0.6) brightness(0.7); }
    /* natural-size card scaled down: keeps Figma numbers verbatim */
    .d-card {
      position:absolute; top:0; left:0; width:825px; height:607px;
      transform:scale(0.9226); transform-origin:top left;
      border-radius:32.243px; box-sizing:border-box; overflow:hidden;
      background:radial-gradient(ellipse 140% 190% at 5.7% -44%, rgba(54,54,54,1) 0%, rgba(26,26,26,0.27) 100%);
      -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    }
    .d-card::before {
      content:''; position:absolute; inset:0; border-radius:inherit; padding:1.29px;
      background:linear-gradient(105deg,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.077) 32.6%,
        rgba(255,255,255,0.221) 69.6%,
        rgba(255,255,255,0.021) 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      pointer-events:none; z-index:3;
    }
    .d-card-teaser { position:absolute; border-radius:25px; overflow:hidden; z-index:1; }
    .d-card-teaser img { width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
    .d-card-logo { position:absolute; left:618px; top:44px; width:110px; height:41px; z-index:2; }
    .d-card-label {
      position:absolute; left:56px; top:522px; z-index:2;
      font-family:'Manrope',sans-serif; font-weight:800; font-size:14.66px;
      letter-spacing:4.69px; color:#c6fca6; text-transform:uppercase; white-space:nowrap;
      line-height:20px;
    }
    .d-card-btn {
      position:absolute; left:632px; top:510px; width:146px; height:52px; z-index:2;
      display:flex; align-items:center; justify-content:center;
      border-radius:55px; box-sizing:border-box;
      background:linear-gradient(25.44deg, rgba(26,29,25,0.5) 28.6%, rgba(62,62,62,0.5) 97.6%);
    }
    .d-card-btn::before {
      content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
      background:linear-gradient(105deg,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.077) 32.6%,
        rgba(255,255,255,0.221) 69.6%,
        rgba(255,255,255,0.021) 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      pointer-events:none;
    }
    .d-card-btn span {
      font-family:'Manrope',sans-serif; font-weight:600; font-size:16px;
      letter-spacing:1.44px; color:#fff; white-space:nowrap;
    }

    /* New container palette: Experience + Work sit on light gradient now */
    .experience-section .section-label { color:#177006; }
    .experience-section .section-heading { color:#000; }
    .entry-role { color:#000; }
    .entry-role .highlight { color:#177006; }
    .entry-role .gradient-text {
      background:none; -webkit-text-fill-color:#177006; color:#177006;
    }
    .entry-meta { color:#000; }
    .entry-desc p { color:#000; }
    .entry-divider img { filter:invert(1) opacity(0.55); }
    .work-section .section-label { color:#177006; }
    .work-section .section-heading { color:#000; }
    .work-section .so-far { color:#177006; }
    .work-btn { border-color:#595959; color:#000; }

/* PAGE TOGGLE */
    .about-page { display: block; }
    .work-page { display: none; }
    body.show-work { background: #fff !important; }
    body.show-work .about-page { display: none !important; }
    body.show-work .work-page { display: block !important; }
    body.show-work .desktop-view .blur-layer {
      display: none !important;
    }
    /* Nav selector — slides via transform (stays in flex flow for height) */
    .desktop-view .nav-selector {
      transition: transform .45s cubic-bezier(0.22,1,0.36,1);
      position: relative;
      z-index: 1;
    }
    /* Labels must sit above the white pill */
    .desktop-view .nav-label-about { z-index: 2; }
    .desktop-view .nav-label { position: relative; z-index: 2; }
    /* WORK state: slide selector right (same width), center WORK text inside it */
    body.show-work .desktop-view .nav-selector { transform: translateX(87.591px); }
    body.show-work .desktop-view .nav-label-about { color: #fff !important; }
    body.show-work .desktop-view .nav-label {
      color: #000 !important;
      position: absolute !important;
      left: 89.591px;
      right: 2px;
      top: 0;
      bottom: 0;
      display: flex !important;
      align-items: center;
      justify-content: center;
    }

    /* WORK layout */
    .work-page-wrapper {
      width:1728px; margin:0 auto; position:relative; min-height:1117px; overflow:hidden;
    }
    /* LOCKED — do not change these positions */
    .work-area { position:absolute; top:85px; left:64px; width:1671px; height:995px; }
    .folder-outer { position:relative; width:1642px; height:948px; margin:8px 0px; transform:scale(0.97); transform-origin:top left; overflow:visible; padding:10px; }
    .folder-svg { position:absolute; top:10px; left:4px; width:1642px; height:948px; z-index:1; overflow:visible; pointer-events:none; filter:grayscale(1) brightness(0.4); transition: filter 0.4s ease; }
    .folder-svg.active { z-index:3; filter:grayscale(0) brightness(1); }
    .folder-svg.bounce { animation: tabBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    @keyframes tabBounce {
      0% { transform: scale(0.97); }
      40% { transform: scale(1.012); }
      70% { transform: scale(0.998); }
      100% { transform: scale(1); }
    }
    /* END LOCKED */
    .folder-body {
      position:absolute; top:59px; left:11px; right:11px; bottom:11px;
      overflow:hidden; z-index:4; background:transparent;
      display:none;
    }
    .folder-body.visible { display:block; }
    .folder-body.bounce { animation: tabBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    .tabs-row { position:absolute; top:0; left:0; right:0; height:49px; z-index:5; }
    .tab-label {
      position:absolute; top:16px; background:none; border:none;
      font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; letter-spacing:4.2px;
      color:#595959; cursor:pointer; transition:color .35s ease, text-shadow .35s ease; white-space:nowrap; z-index:6;
    }
    .tab-label.active { color:transparent; /* hidden when SVG text shows it */ }
    .tab-merch { left:673px; } .tab-design { left:940px; } .tab-motion { left:1092px; } .tab-product { left:1248px; }

    .design-scrubber {
      position:absolute; top:42px; left:902px; width:130px; height:10px; z-index:7;
      display:flex; align-items:center; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .4s ease;
    }
    .design-scrubber.visible { opacity:1; pointer-events:auto; }
    .scrub-track { position:relative; width:100%; height:2px; border-radius:1px; background:rgba(255,255,255,0.1); }
    .scrub-fill { position:absolute; top:0; left:0; height:100%; border-radius:1px; background:#c6fca6; width:0%; box-shadow:0 0 8px rgba(198,252,166,0.4); }
    .scrub-thumb { position:absolute; top:50%; left:0; width:24px; height:4px; border-radius:2px; background:#c6fca6; transform:translate(0,-50%); box-shadow:0 0 10px rgba(198,252,166,0.55); }

    .panel-content { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
    .section-view { position:absolute; inset:0; opacity:0; pointer-events:none; will-change:transform,opacity; }
    .section-view.active { opacity:1; pointer-events:none; }
    @keyframes wsSlideOut { from{transform:translateY(0);opacity:1} to{transform:translateY(40px);opacity:0} }
    @keyframes wsSlideIn { from{transform:translateY(50px) scale(0.98);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
    .section-view.leaving { animation:wsSlideOut .28s ease-in forwards; }
    .section-view.entering { animation:wsSlideIn .5s cubic-bezier(0.22,1,0.36,1) forwards; }

    .design-marquee { position:absolute; top:10px; left:216px; right:0; bottom:10px; cursor:grab; user-select:none; -webkit-user-select:none; overflow:hidden; border-radius:20px; }
    .design-marquee.holding { cursor:grabbing; }
    .marquee-track { position:absolute; top:0; left:0; height:100%; display:flex; will-change:transform; }
    .marquee-track img { height:100%; width:auto; display:block; flex-shrink:0; pointer-events:none; }

    /* ===== DESIGN: left navigation sidebar (ALL / BRAND DESIGN / 2D / 3D) ===== */
    .design-nav {
      position:absolute; left:0; top:15px; bottom:0; width:202px; z-index:8; display:none; overflow:hidden;
      background:url(assets/fx/fx-nav.svg) center/100% 100% no-repeat;
    }
    .design-nav.visible { display:block; }
    .dn-selector {
      position:absolute; left:1px; width:200px; height:46px; top:32px; z-index:1;
      background:linear-gradient(17.1deg,#1a1d19 28.61%,#3e3e3e 97.62%);
      backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
      box-shadow:0 4px 11.8px rgba(0,0,0,0.1);
      transition:top .45s cubic-bezier(0.22,1,0.36,1);
    }
    .dn-item {
      position:absolute; left:32px; height:18px; z-index:2; padding:0; background:none; border:none;
      font-family:'Manrope',sans-serif; font-weight:800; font-size:13.09px; letter-spacing:4.19px;
      color:#595959; cursor:pointer; white-space:nowrap; text-align:left; line-height:18px;
      transition:color .35s ease;
    }
    .dn-item.active { color:#c6fca6; }
    .dn-item[data-i="0"]{ top:46px; } .dn-item[data-i="1"]{ top:92px; }
    .dn-item[data-i="2"]{ top:138px; } .dn-item[data-i="3"]{ top:184px; }

    /* ===== DESIGN: BRAND DESIGN vertical marquee ===== */
    .brand-marquee {
      position:absolute; left:216px; right:0; top:10px; bottom:10px; z-index:4; display:none;
      overflow:hidden; border-radius:20px; cursor:grab; user-select:none; -webkit-user-select:none;
    }
    .brand-marquee.visible { display:block; }
    .brand-marquee.holding { cursor:grabbing; }
    .brand-track { position:absolute; top:0; left:0; right:0; will-change:transform; }
    .brand-track img { display:block; width:100%; height:auto; pointer-events:none; }

    /* ===== PRODUCT SECTION ===== */
    .product-shell { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; }
    .product-shell.visible { display:flex; }
    /* Device toggle — matches Figma "Desktop/Mobile Active" (128x31 black pill, green capsule on active side) */
    .device-toggle {
      position:absolute; top:24px; left:1470px; width:128px; height:31px; z-index:7;
      display:none; background:#000; border-radius:15px;
      opacity:0; transition:opacity .4s ease;
    }
    .device-toggle.visible { display:block; opacity:1; }
    .device-toggle.bounce { animation: tabBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    .device-toggle button {
      position:absolute; top:0; width:64px; height:31px; background:none; border:none;
      cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; padding:0;
    }
    .device-toggle .dt-desktop { left:0; }
    .device-toggle .dt-mobile { left:64px; }
    .device-toggle button svg { width:17px; height:15px; stroke:#7a7a7a; fill:none; stroke-width:1.6; transition:stroke .35s ease; }
    .device-toggle button.active svg { stroke:#c6fca6; }
    .device-pill {
      position:absolute; z-index:1; top:2px; left:2px; width:61px; height:27px; border-radius:13.5px;
      background:radial-gradient(120% 160% at 30% 20%, #587a49 0%, #1d2b18 70%);
      border:1px solid rgba(198,252,166,0.55);
      transition:transform .45s cubic-bezier(0.34,1.56,0.64,1);
    }
    .device-toggle.mobile .device-pill { transform:translateX(63px); }
    /* Two marquee holders — filled with content later */
    .product-marquees { position:relative; flex:1; width:100%; }
    .product-marquee { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .4s ease; display:flex; align-items:center; justify-content:center; }
    .product-marquee.visible { opacity:1; pointer-events:auto; }
    .product-marquee .pm-placeholder { font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; letter-spacing:4px; color:rgba(255,255,255,0.18); text-transform:uppercase; }
    /* --- Mobile tiles: center-focused carousel --- */
    .mobile-tiles { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity .4s ease; }
    .mobile-tiles.hidden { opacity:0; pointer-events:none; }
    .mobile-tile { position:absolute; top:50%; left:50%; width:761.3px; height:560px; cursor:pointer; transition:transform .5s cubic-bezier(0.22,1,0.36,1), opacity .5s ease, filter .5s ease; }
    /* center tile: big, front */
    .mobile-tile.center { transform:translate(-50%,-50%) scale(1); z-index:3; opacity:1; filter:none; }
    .mobile-tile.center:hover { transform:translate(-50%,-50%) scale(1.05); }
    /* side tiles: smaller, dimmed, offset */
    .mobile-tile.left  { transform:translate(calc(-50% - 560px),-50%) scale(0.55); z-index:2; opacity:0.45; filter:grayscale(0.6) brightness(0.7); }
    .mobile-tile.right { transform:translate(calc(-50% + 560px),-50%) scale(0.55); z-index:2; opacity:0.45; filter:grayscale(0.6) brightness(0.7); }
    .mt-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; border:1px solid rgba(198,252,166,0.35); background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s ease, border-color .25s ease; }
    .mt-arrow:hover { background:rgba(198,252,166,0.12); border-color:rgba(198,252,166,0.7); }
    .mt-arrow svg { width:18px; height:18px; stroke:#c6fca6; stroke-width:2.4; fill:none; }
    .mt-prev { left:26px; } .mt-next { right:26px; }
    /* --- Mobile catalog: static image, vertical scroll --- */
    .mobile-catalog { position:absolute; inset:0; z-index:9; opacity:0; pointer-events:none; transition:opacity .4s ease; border-radius:20px; overflow:hidden; display:flex; flex-direction:column; }
    .mobile-catalog.visible { opacity:1; pointer-events:auto; }
    .mc-topbar { position:relative; flex-shrink:0; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; z-index:8; }
    .mc-title { font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; letter-spacing:4px; color:#c6fca6; text-transform:uppercase; }
    .mc-arrows { display:flex; gap:10px; }
    .mc-btn { width:38px; height:38px; border-radius:50%; border:1px solid rgba(198,252,166,0.35); background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s ease, border-color .25s ease; }
    .mc-btn:hover { background:rgba(198,252,166,0.12); border-color:rgba(198,252,166,0.7); }
    .mc-btn svg { width:16px; height:16px; stroke:#c6fca6; stroke-width:2.4; fill:none; }
    .mc-back { height:36px; padding:0 16px; border-radius:18px; border:1px solid rgba(198,252,166,0.35); background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); cursor:pointer; display:flex; align-items:center; gap:8px; font-family:'Manrope',sans-serif; font-weight:700; font-size:11px; letter-spacing:2px; color:#c6fca6; transition:background .25s ease; }
    .mc-back:hover { background:rgba(198,252,166,0.12); }
    .mc-back svg { width:14px; height:14px; stroke:#c6fca6; stroke-width:2.4; fill:none; }
    .mc-scroll { flex:1; overflow-y:auto; overflow-x:hidden; transition:opacity .18s ease, transform .18s ease; scrollbar-width:thin; scrollbar-color:rgba(198,252,166,0.4) transparent; }
    .mc-scroll::-webkit-scrollbar { width:6px; }
    .mc-scroll::-webkit-scrollbar-thumb { background:rgba(198,252,166,0.35); border-radius:3px; }
    .mc-scroll img { display:block; width:100%; height:auto; -webkit-user-drag:none; }
    /* Info button + narrative modal */
    .mc-title-wrap { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; }
    .mc-info-btn { width:26px; height:26px; border-radius:50%; border:1px solid rgba(198,252,166,0.4); background:rgba(0,0,0,0.5); cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; color:#c6fca6; transition:background .25s ease; padding:0; }
    .mc-info-btn:hover { background:rgba(198,252,166,0.15); }
    .mc-modal { position:absolute; inset:0; z-index:20; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.65); backdrop-filter:blur(8px); border-radius:20px; }
    .mc-modal.open { display:flex; animation: mcModalFade .25s ease forwards; }
    .mc-modal.open .mc-modal-box { animation: mcModalPop .32s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    @keyframes mcModalFade { 0%{opacity:0;} 100%{opacity:1;} }
    @keyframes mcModalPop { 0%{opacity:0; transform:scale(0.92) translateY(14px);} 100%{opacity:1; transform:scale(1) translateY(0);} }
    .mc-modal-box { width:min(680px, 82%); max-height:74%; overflow-y:auto; background:#161816; border:1px solid rgba(198,252,166,0.3); border-radius:20px; padding:34px 38px; box-shadow:0 24px 80px rgba(0,0,0,0.6); }
    .mc-modal-box h3 { margin:0 0 16px; font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; letter-spacing:4px; color:#c6fca6; text-transform:uppercase; }
    .mc-modal-box p { margin:0; font-family:'Manrope',sans-serif; font-weight:500; font-size:14.5px; line-height:1.75; color:rgba(255,255,255,0.82); }
    .mc-modal-close { position:absolute; top:22px; right:26px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(198,252,166,0.35); background:rgba(0,0,0,0.55); cursor:pointer; color:#c6fca6; font-size:16px; display:flex; align-items:center; justify-content:center; }
    .mc-modal-close:hover { background:rgba(198,252,166,0.12); }
    .wk-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; letter-spacing:4px; color:rgba(255,255,255,0.18); text-transform:uppercase; }