/* =====================================================================
   LAXTLINE — main.css
   ---------------------------------------------------------------------
   The site-wide stylesheet. Loaded first (before gallery.css) so the
   gallery file can override where needed.

   WHAT'S IN HERE (in order):
     1. Global performance fixes  — GPU layers, containment, smooth scroll
     2. Reset + :root variables    — brand colours & font tokens
     3. Custom cursor              — dot + follower ring
     4. Navigation + Hire-me CTA   — fixed top bar, animated button
     5. Mobile nav / hamburger
     6. Hero                       — canvas bg, glows, big watermark text
     7. Marquee                    — scrolling skill ribbons
     8. Work / Project showcase
     9. About · Services · Software & Tools
    10. Contact · Socials · Footer
    11. Responsive breakpoints     — tablet & mobile tweaks

   NOTE: colours/spacing come from CSS custom properties in :root,
   so changing a brand colour in one place updates the whole site.
   ===================================================================== */

  /* ═══ GLOBAL PERFORMANCE FIXES ═══ */
  /* Nav on its own GPU layer — prevents repaint on scroll */
  nav { will-change: transform; transform: translateZ(0); }
  /* Reduce backdrop-filter cost on low-end devices */
  @media (prefers-reduced-motion: no-preference) {
    nav { backdrop-filter: blur(10px); }
  }
  /* Smooth momentum scrolling on iOS */
  html { -webkit-overflow-scrolling: touch; }
  /* Passive touch scrolling hint */
  body { touch-action: pan-y; }
  /* Font smoothing */
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  /* Reduce paint area for glows — contain them */
  .hero-glow-1,.hero-glow-2,.hero-glow-3 { contain: strict; }
  /* Marquee — contain layout and paint */
  .marquee-wrap { contain: layout style; }

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --black:#080808;
    --white:#f5f2ee;
    --red:#E8392A;
    --red-dark:#b8281b;
    --gray:#1a1a1a;
    --gray2:#242424;
    --gray3:#333;
    --muted:#888;
    --muted2:#555;
    --font-display:'Bebas Neue',sans-serif;
    --font-body:'DM Sans',sans-serif;
    --font-mono:'Space Mono',monospace;
  }
  html{scroll-behavior:smooth}
  body{background:var(--black);color:var(--white);font-family:var(--font-body);font-weight:300;overflow-x:hidden;cursor:none}

  /* CUSTOM CURSOR — GPU-accelerated via transform only */
  .cursor{position:fixed;width:12px;height:12px;background:var(--red);border-radius:50%;pointer-events:none;z-index:9999;top:0;left:0;transform:translate(-50%,-50%);will-change:transform;transition:width .2s,height .2s,opacity .2s;mix-blend-mode:difference}
  .cursor-follower{position:fixed;width:36px;height:36px;border:1px solid rgba(255,255,255,0.3);border-radius:50%;pointer-events:none;z-index:9998;top:0;left:0;will-change:transform;mix-blend-mode:difference}

  /* NAV */
  nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 3rem;background:rgba(8,8,8,0.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.06)}
  .nav-logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;z-index:2}
  .nav-logo-text{font-family:var(--font-display);font-size:1.5rem;letter-spacing:5px;color:var(--white);font-weight:700}
  /* Brand wordmark accent — colours the "LINE" half of LAXTLINE in brand red */
  .logo-accent{color:var(--red)}
  .nav-links{display:flex;gap:2.8rem;list-style:none;position:absolute;left:50%;transform:translateX(-50%)}
  .nav-links a{color:var(--white);text-decoration:none;font-size:.72rem;letter-spacing:3px;text-transform:uppercase;font-weight:700;opacity:.75;transition:opacity .3s,color .3s}
  .nav-links a:hover{opacity:1;color:var(--red)}
  /* ═══ HIRE ME — ANIMATED CTA ═══ */
  .nav-cta{
    position:relative;
    font-size:.72rem;letter-spacing:3px;text-transform:uppercase;font-weight:700;
    color:var(--white);
    text-decoration:none;
    padding:.6rem 1.6rem;
    z-index:2;
    display:inline-flex;align-items:center;gap:.6rem;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 0 12px rgba(232,57,42,.2);
    animation:hireGlow 2s ease-in-out infinite alternate;
    transition:color .3s, box-shadow .3s;
  }
  /* Animated gradient border */
  .nav-cta::before{
    content:'';
    position:absolute;inset:0;
    padding:1.5px;
    background:linear-gradient(90deg,#E8392A,#ff8c00,#fff,#E8392A,#b8281b,#E8392A);
    background-size:400% 100%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;
    mask-composite:exclude;
    animation:borderFlow 2.2s linear infinite;
    z-index:0;
    pointer-events:none;
  }
  /* Fill on hover */
  .nav-cta::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(90deg,#E8392A,#ff6a2a,#E8392A);
    background-size:200% 100%;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s cubic-bezier(.77,0,.18,1);
    z-index:-1;
  }
  .nav-cta:hover::after{transform:scaleX(1)}
  .nav-cta:hover{color:var(--white);animation:none;box-shadow:0 0 32px rgba(232,57,42,.65)}
  .nav-cta:hover .hire-dot{animation:none;background:#fff;box-shadow:0 0 8px #fff}
  /* Pulsing live dot */
  .hire-dot{
    width:6px;height:6px;border-radius:50%;
    background:#E8392A;
    display:inline-block;flex-shrink:0;
    position:relative;z-index:1;
    animation:hirePing 2s ease-out infinite;
    transition:background .3s,box-shadow .3s;
  }
  @keyframes hirePing{
    0%{box-shadow:0 0 0 0 rgba(232,57,42,.8)}
    70%{box-shadow:0 0 0 8px rgba(232,57,42,0)}
    100%{box-shadow:0 0 0 0 rgba(232,57,42,0)}
  }
  .hire-text{position:relative;z-index:1;display:inline-block}
  @keyframes borderFlow{
    0%{background-position:0% 50%}
    100%{background-position:400% 50%}
  }
  @keyframes hireGlow{
    0%{box-shadow:0 0 8px rgba(232,57,42,.15)}
    100%{box-shadow:0 0 24px rgba(232,57,42,.5), 0 0 8px rgba(255,140,0,.2)}
  }

  /* HERO */
  .hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
  .hero-bg{position:absolute;inset:0;z-index:0;background:#050505}
  /* Soft drifting red light blobs behind the hero (each animated separately) */
  .hero-glow{position:absolute;border-radius:50%;pointer-events:none;contain:strict}
  .hero-glow-1{width:600px;height:600px;background:radial-gradient(circle,rgba(232,57,42,.18) 0%,transparent 70%);top:-10%;left:-5%;animation:glow1 8s ease-in-out infinite alternate}
  .hero-glow-2{width:500px;height:500px;background:radial-gradient(circle,rgba(232,57,42,.12) 0%,transparent 70%);bottom:0%;right:5%;animation:glow2 10s ease-in-out infinite alternate}
  .hero-glow-3{width:300px;height:300px;background:radial-gradient(circle,rgba(180,30,20,.1) 0%,transparent 70%);top:40%;left:40%;animation:glow3 12s ease-in-out infinite alternate}
  @keyframes glow1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,40px) scale(1.15)}}
  @keyframes glow2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-50px,-30px) scale(1.1)}}
  @keyframes glow3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,50px) scale(1.2)}}

  /* CRT-style horizontal scan lines overlay */
  .hero-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.08) 3px,rgba(0,0,0,.08) 4px);pointer-events:none;z-index:1}
  /* Cinematic letterbox-style dark gradient bars at top & bottom */
  .hero-bar-top{position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);z-index:2}
  .hero-bar-bottom{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,rgba(0,0,0,.95),transparent);z-index:2}
  /* Huge faint "LAXTLINE" watermark drifting behind the hero text */
  .hero-bg-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:min(22vw,20rem);color:transparent;-webkit-text-stroke:1px rgba(232,57,42,.06);letter-spacing:12px;white-space:nowrap;z-index:1;animation:bgTextDrift 20s ease-in-out infinite alternate;user-select:none}
  @keyframes bgTextDrift{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-48%,-52%) scale(1.04)}}

  /* Film frame corners */
  .frame-corner{position:absolute;width:40px;height:40px;z-index:3;pointer-events:none}
  .frame-corner::before,.frame-corner::after{content:'';position:absolute;background:rgba(232,57,42,.5)}
  .frame-corner::before{width:100%;height:1.5px;top:0;left:0}
  .frame-corner::after{width:1.5px;height:100%;top:0;left:0}
  .fc-tl{top:5rem;left:2rem}
  .fc-tr{top:5rem;right:2rem;transform:scaleX(-1)}
  .fc-bl{bottom:2rem;left:2rem;transform:scaleY(-1)}
  .fc-br{bottom:2rem;right:2rem;transform:scale(-1)}
  .hero-bg video,.hero-bg-img{width:100%;height:100%;object-fit:cover;opacity:.45;filter:grayscale(30%)}
  /* Dimmed, slightly blurred hero background photo */
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0.55;filter:blur(2px) grayscale(20%);z-index:0;transform:scale(1.04)}
  /* Inline SVG film-grain texture (no extra HTTP request) */
  .hero-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");z-index:1;pointer-events:none}
  /* Bottom-up dark gradient so the headline stays legible over the photo */
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,1) 0%,rgba(8,8,8,.5) 40%,rgba(8,8,8,.1) 100%);z-index:2}
  /* The actual hero text/stats, sitting above all background layers */
  .hero-content{position:relative;z-index:3;padding:0 3rem 4rem;width:100%}
  .hero-tag{display:inline-block;font-family:var(--font-mono);font-size:.65rem;letter-spacing:3px;color:var(--red);border:1px solid var(--red);padding:.35rem .9rem;margin-bottom:1.5rem;text-transform:uppercase}
  .hero-title{font-family:var(--font-display);font-size:clamp(5rem,14vw,13rem);line-height:.9;letter-spacing:2px;color:var(--white);text-transform:uppercase}
  .hero-title span{color:var(--red);display:block}
  .hero-sub{max-width:500px;font-size:1rem;line-height:1.7;color:rgba(245,242,238,.8);margin-top:1.5rem;font-weight:300}
  .hero-meta{display:flex;align-items:center;gap:3rem;margin-top:2.5rem}
  .hero-scroll{display:flex;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:.65rem;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
  .hero-scroll-line{width:40px;height:1px;background:var(--red);display:block;transform-origin:left;animation:scrollLine 3s ease-in-out infinite}
  @keyframes scrollLine{0%,100%{transform:scaleX(1)}50%{transform:scaleX(2)}}
  .hero-stats{display:flex;gap:3rem}
  .hero-stat-num{font-family:var(--font-display);font-size:2.5rem;color:var(--white);display:block}
  .hero-stat-label{font-size:.65rem;letter-spacing:2px;color:var(--muted);text-transform:uppercase;font-weight:500}

  /* MARQUEE */
  /* ═══ MARQUEE — CINEMATIC GLOW ═══ */
  .marquee-wrap{
    background:#0a0a0a;
    overflow:hidden;
    position:relative;
    z-index:5;
    padding:0;
    border-top:1px solid rgba(232,57,42,.2);
    border-bottom:1px solid rgba(232,57,42,.2);
  }
  /* Animated red glow lines top & bottom */
  .marquee-wrap::before,.marquee-wrap::after{
    content:'';position:absolute;left:0;right:0;height:2px;z-index:4;pointer-events:none;
    background:linear-gradient(90deg,transparent 0%,rgba(232,57,42,0) 10%,#E8392A 40%,#ff5a42 50%,#E8392A 60%,rgba(232,57,42,0) 90%,transparent 100%);
    animation:scanGlow 3s ease-in-out infinite alternate;
    filter:blur(.5px);
  }
  .marquee-wrap::before{top:0}
  .marquee-wrap::after{bottom:0;animation-delay:1.5s}
  @keyframes scanGlow{
    0%{opacity:.25;transform:scaleX(.7);filter:blur(1px)}
    50%{opacity:1;transform:scaleX(1);filter:blur(0px) drop-shadow(0 0 8px #E8392A)}
    100%{opacity:.3;transform:scaleX(.8);filter:blur(.5px)}
  }

  /* Red ambient glow behind marquee */
  .marquee-glow-bg{
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(ellipse 60% 100% at 50% 50%, rgba(232,57,42,.07) 0%, transparent 70%);
    animation:ambientPulse 4s ease-in-out infinite alternate;
  }
  @keyframes ambientPulse{
    0%{opacity:.4}100%{opacity:1}
  }

  /* Fade edges */
  .marquee-fade-l,.marquee-fade-r{
    position:absolute;top:0;bottom:0;width:160px;z-index:3;pointer-events:none;
  }
  .marquee-fade-l{left:0;background:linear-gradient(to right,#0a0a0a 0%,transparent 100%)}
  .marquee-fade-r{right:0;background:linear-gradient(to left,#0a0a0a 0%,transparent 100%)}

  /* Rows */
  .marquee-row{display:flex;white-space:nowrap;padding:.7rem 0;position:relative;z-index:1}
  .marquee-row-1{animation:marqueeL 25s linear infinite}
  .marquee-row-2{animation:marqueeL 32s linear infinite}
  .marquee-row:hover{animation-play-state:paused}

  /* Divider between rows */
  .marquee-divider{
    height:1px;position:relative;z-index:1;
    background:linear-gradient(90deg,transparent 0%,rgba(232,57,42,.5) 15%,rgba(232,57,42,.5) 85%,transparent 100%);
    box-shadow:0 0 8px rgba(232,57,42,.3);
  }

  @keyframes marqueeL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

  /* Items — bigger, bolder */
  .marquee-item{contain:layout style;
    font-family:var(--font-display);
    font-size:1.25rem;
    letter-spacing:6px;
    color:rgba(245,242,238,.38);
    padding:0 2.2rem;
    display:flex;align-items:center;gap:2rem;
    cursor:default;
    position:relative;
    transition:color .4s, text-shadow .4s;
  }
  .marquee-item:hover{
    color:rgba(255,255,255,.95);
    text-shadow:0 0 20px rgba(255,255,255,.3);
  }

  /* Highlighted items — red glow */
  .marquee-item.hl{
    color:rgba(232,57,42,.9);
    text-shadow:
      0 0 12px rgba(232,57,42,.6),
      0 0 30px rgba(232,57,42,.25);
    animation:hlPulse 4s ease-in-out infinite alternate;
  }
  .marquee-item.hl:hover{
    color:#ff6b5a;
    text-shadow:0 0 20px rgba(232,57,42,.9),0 0 40px rgba(232,57,42,.4);
  }
  @keyframes hlPulse{
    0%{text-shadow:0 0 8px rgba(232,57,42,.4),0 0 20px rgba(232,57,42,.15)}
    100%{text-shadow:0 0 18px rgba(232,57,42,.85),0 0 40px rgba(232,57,42,.35),0 0 60px rgba(232,57,42,.1)}
  }

  /* Glowing dot separator */
  .marquee-dot{
    width:5px;height:5px;
    background:#E8392A;
    border-radius:50%;
    display:inline-block;
    flex-shrink:0;
    box-shadow:0 0 6px #E8392A, 0 0 14px rgba(232,57,42,.5);
    animation:dotBlink 3s ease-in-out infinite alternate;
  }
  @keyframes dotBlink{
    0%{opacity:.5;box-shadow:0 0 4px #E8392A}
    100%{opacity:1;box-shadow:0 0 10px #E8392A, 0 0 20px rgba(232,57,42,.6)}
  }

  /* Diamond separator row 2 */
  .marquee-diamond{
    width:7px;height:7px;
    background:rgba(232,57,42,.75);
    display:inline-block;
    transform:rotate(45deg);
    flex-shrink:0;
    box-shadow:0 0 8px rgba(232,57,42,.5);
    animation:dotBlink 2.5s ease-in-out infinite alternate-reverse;
  }

  @media(max-width:600px){
    .marquee-item{font-size:.9rem;letter-spacing:4px;padding:0 1.4rem;gap:1.4rem}
    .marquee-fade-l,.marquee-fade-r{width:70px}
  }



  /* SECTION COMMON */
  section{padding:7rem 3rem}
  .section-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:4px;color:var(--red);text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:.8rem;opacity:1}
  .section-label::before{content:'';display:block;width:24px;height:1px;background:var(--red)}
  .section-title{font-family:var(--font-display);font-size:clamp(2.8rem,6vw,5.5rem);line-height:1;letter-spacing:2px;text-transform:uppercase;color:var(--white)}
  .section-title em{color:var(--red);font-style:normal}

  /* ABOUT */
  .about{background:var(--gray);display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
  .about-img-wrap{position:relative}
  .about-img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(20%)}
  .about-img-placeholder{width:100%;aspect-ratio:3/4;background:var(--gray2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
  .about-img-placeholder::after{content:'';display:none}
  /* background image */
  .about-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(30%) brightness(.55);z-index:0}
  .about-bg-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.85) 0%,rgba(8,8,8,.3) 60%,rgba(8,8,8,.15) 100%);z-index:1}
  /* DP circle */
  .about-dp-wrap{position:relative;z-index:2;width:62%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:3px solid rgba(232,57,42,.6);box-shadow:0 0 40px rgba(232,57,42,.2),0 0 0 1px rgba(232,57,42,.15);margin-bottom:1rem}
  .about-dp{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%}
  .about-frame{position:absolute;inset:-12px;border:1px solid var(--red);z-index:-1;opacity:.4}
  .about-years{
    position:absolute;bottom:2rem;right:-2rem;
    background:var(--red);
    padding:1.4rem 1.8rem;
    font-family:var(--font-display);
    z-index:10;
    box-shadow:0 8px 32px rgba(0,0,0,.7), 0 0 0 2px rgba(232,57,42,.4);
  }
  .about-years-num{font-size:3.2rem;display:block;line-height:1;color:#ffffff;font-weight:700;text-shadow:none}
  .about-years-label{font-size:.65rem;letter-spacing:4px;color:#ffffff;text-transform:uppercase;opacity:1;margin-top:.3rem;display:block}
  .about-bio{font-size:.95rem;line-height:1.95;color:rgba(245,242,238,.85);margin:1.5rem 0 2rem}
  .about-bio em{color:var(--white);font-style:normal;font-weight:500}
  .about-bio strong{color:var(--red);font-weight:500}
  .about-skills{display:flex;flex-wrap:wrap;gap:.5rem}
  .skill-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:2px;border:1px solid rgba(255,255,255,.2);padding:.4rem .9rem;color:rgba(245,242,238,.75);text-transform:uppercase;transition:border-color .3s,color .3s,background .3s}
  .skill-tag:hover{border-color:var(--red);color:var(--white);background:rgba(232,57,42,.08)}

  /* WORK / PROJECTS */
  .work{background:var(--black)}
  .work-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:4rem}
  .work-all{
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:2px;
    color:var(--white);text-transform:uppercase;text-decoration:none;
    display:inline-flex;align-items:center;gap:.75rem;
    padding:.6rem 1.4rem;
    border:1px solid var(--red);
    position:relative;overflow:hidden;
    transition:color .35s, box-shadow .35s;
    box-shadow:0 0 10px rgba(232,57,42,.25), inset 0 0 10px rgba(232,57,42,.05);
    animation:workAllPulse 2.5s ease-in-out infinite alternate;
  }
  @keyframes workAllPulse{
    0%  { box-shadow:0 0 8px rgba(232,57,42,.25), inset 0 0 8px rgba(232,57,42,.05); }
    100%{ box-shadow:0 0 18px rgba(232,57,42,.55), inset 0 0 14px rgba(232,57,42,.12); }
  }
  .work-all::before{
    content:'';position:absolute;inset:0;
    background:var(--red);
    transform:translateX(-101%);
    transition:transform .4s cubic-bezier(.77,0,.18,1);
    z-index:0;
  }
  .work-all:hover::before{ transform:translateX(0); }
  .work-all:hover{ color:var(--white); box-shadow:0 0 24px rgba(232,57,42,.7); animation:none; }
  .work-all span, .work-all::after{ position:relative; z-index:1; }
  .work-all::after{content:'→';font-size:1rem;transition:transform .3s}
  .work-all:hover::after{transform:translateX(4px)}
  /* PROJECT DRIVE BUTTON */
  .work-drive-btn{
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:2px;
    color:var(--white);text-transform:uppercase;text-decoration:none;
    display:inline-flex;align-items:center;gap:.75rem;
    padding:.6rem 1.4rem;
    border:1px solid rgba(66,133,244,.55);
    position:relative;overflow:hidden;
    transition:color .35s, box-shadow .35s, border-color .35s;
    box-shadow:0 0 10px rgba(66,133,244,.18), inset 0 0 10px rgba(66,133,244,.04);
    animation:driveBtnPulse 2.8s ease-in-out infinite alternate;
    cursor:none;
  }
  @keyframes driveBtnPulse{
    0%  { box-shadow:0 0 8px rgba(66,133,244,.18), inset 0 0 8px rgba(66,133,244,.04); }
    100%{ box-shadow:0 0 20px rgba(66,133,244,.5), inset 0 0 14px rgba(66,133,244,.1), 0 0 6px rgba(234,67,53,.25); }
  }
  .work-drive-btn::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,#4285F4 0%,#34A853 33%,#FBBC04 66%,#EA4335 100%);
    transform:translateX(-101%);
    transition:transform .42s cubic-bezier(.77,0,.18,1);
    z-index:0;
  }
  .work-drive-btn:hover::before{ transform:translateX(0); }
  .work-drive-btn:hover{
    color:var(--white);
    box-shadow:0 0 28px rgba(66,133,244,.6);
    animation:none;
    border-color:transparent;
  }
  .work-drive-btn .drive-icon-wrap,
  .work-drive-btn .drive-label,
  .work-drive-btn .drive-arrow{ position:relative;z-index:1; }
  .work-drive-btn .drive-icon-wrap{
    display:flex;align-items:center;justify-content:center;
    transition:transform .3s;
  }
  .work-drive-btn:hover .drive-icon-wrap{ transform:scale(1.15) rotate(-5deg); }
  .work-drive-btn .drive-icon-wrap svg{ width:16px;height:16px;display:block; }
  .work-drive-btn .drive-arrow{
    font-size:1rem;
    animation:waArrow 1.6s ease-in-out infinite;
    transition:transform .3s;
  }
  .work-drive-btn:hover .drive-arrow{ animation:none;transform:translateX(4px); }

  /* ═══ PROJECT GALLERY — CINEMATIC TRIPTYCH FRAME SYSTEM ═══ */

  /* Outer gallery wrapper */
  .projects-grid{display:flex;flex-direction:column;gap:0}

  /* ── TRIPTYCH FRAME — 3 cards in 1 cinematic bordered panel ── */
  .tri-frame{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:0;
    border:1px solid rgba(232,57,42,.22);
    box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 8px 48px rgba(0,0,0,.6);
    margin-bottom:2rem;
    overflow:hidden;
    background:#000;
  }
  /* Animated red corner brackets — film-frame look */
  .tri-frame::before,.tri-frame::after{
    content:'';
    position:absolute;
    width:36px;height:36px;
    z-index:20;pointer-events:none;
    border-color:rgba(232,57,42,.7);
    border-style:solid;
  }
  .tri-frame::before{top:0;left:0;border-width:2px 0 0 2px}
  .tri-frame::after {bottom:0;right:0;border-width:0 2px 2px 0}

  /* Extra pseudo corners via a child span injected by JS — fallback: use box inset */
  .tri-frame-inner{position:relative;display:contents}

  /* Divider between cards inside the frame */
  .tri-frame .proj:not(:last-child)::after{
    content:'';
    position:absolute;top:0;right:0;
    width:2px;height:100%;
    background:linear-gradient(to bottom,transparent 0%,rgba(232,57,42,.35) 30%,rgba(232,57,42,.35) 70%,transparent 100%);
    z-index:10;pointer-events:none;
  }

  /* ── WIDE + TALL FRAME — for hero/feature rows ── */
  .tri-frame.frame-hero{
    grid-template-columns:7fr 5fr;
    grid-template-rows:1fr 1fr;
    height:640px;
    align-items:stretch;
  }
  .tri-frame.frame-hero .proj-wide{
    grid-column:1;grid-row:1/3;
    height:100%;
  }
  .tri-frame.frame-hero .proj-sq-a{grid-column:2;grid-row:1;height:100%}
  .tri-frame.frame-hero .proj-sq-b{grid-column:2;grid-row:2;height:100%}
  .tri-frame.frame-hero .proj-wide::after{
    top:0;right:0;width:2px;height:100%;
    background:linear-gradient(to bottom,transparent,rgba(232,57,42,.35),transparent);
  }

  /* ── Frame label badge — top-left of each frame ── */
  .tri-frame-label{
    position:absolute;top:0;left:0;
    font-family:var(--font-mono);font-size:.48rem;letter-spacing:4px;
    color:rgba(232,57,42,.75);
    border-right:1px solid rgba(232,57,42,.2);
    border-bottom:1px solid rgba(232,57,42,.2);
    padding:.28rem .75rem;
    background:rgba(8,8,8,.78);
    text-transform:uppercase;
    z-index:15;
    backdrop-filter:blur(4px);
  }
  /* Frame counter top-right */
  .tri-frame-count{
    position:absolute;top:0;right:0;
    font-family:var(--font-mono);font-size:.42rem;letter-spacing:3px;
    color:rgba(255,255,255,.25);
    border-left:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.07);
    padding:.28rem .65rem;
    background:rgba(8,8,8,.55);
    text-transform:uppercase;
    z-index:15;
  }

  /* Individual proj card — fills frame cell */
  .proj{position:relative;overflow:hidden;cursor:none;width:100%;display:block}

  /* Hide proj-5 (duplicate) */
  .proj-5{display:none}

  /* Media wrappers */
  .proj-media-wrap{position:relative;overflow:hidden;width:100%;background:#000;display:block}
  /* Default height — overridden by JS ratio detection for portrait videos */
  .proj-media-wrap video, .proj-media-wrap img {
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center center;display:block;
  }

  /* Heights per frame type — overridden by JS when portrait video detected */
  .tri-frame .proj-media-wrap{height:320px}
  /* Portrait override: when JS sets padding-bottom, height becomes auto */
  .tri-frame .proj-media-wrap[style*="padding-bottom"]{height:auto !important}
  /* Hero frame — media wraps fill their cell completely */
  .tri-frame.frame-hero .proj{display:flex;flex-direction:column}
  .tri-frame.frame-hero .proj-media-wrap{height:100% !important;min-height:0;flex:1}
  .tri-frame.frame-wide .proj-media-wrap{height:360px}
  .tri-frame.frame-wide .proj-media-wrap[style*="padding-bottom"]{height:auto !important}
  .tri-frame.frame-wide .proj:first-child .proj-media-wrap{height:360px}
  .tri-frame.frame-wide .proj:first-child .proj-media-wrap[style*="padding-bottom"]{height:auto !important}

  /* Wide single-row frame (2+1 or full-width) */
  .tri-frame.frame-wide{grid-template-columns:6fr 3fr 3fr}
  .tri-frame.frame-solo{grid-template-columns:1fr;max-width:860px;margin-left:auto;margin-right:auto}
  .tri-frame.frame-solo .proj-media-wrap{height:320px}

  /* ── Portrait video fix in frame-hero right cells ── */
  .tri-frame.frame-hero .proj.proj-portrait{
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .tri-frame.frame-hero .proj.proj-portrait .proj-media-wrap{
    width:auto !important;
    height:100% !important;
    aspect-ratio:9/16;
    max-width:100%;
    flex:none;
    padding-bottom:0 !important;
  }
  .tri-frame.frame-hero .proj.proj-portrait .proj-video{
    object-fit:cover !important;
    width:100% !important;
    height:100% !important;
  }

  /* ── Row-3 shimmer + glitch effects ── */
  @keyframes shimmerSweep{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
  }
  @keyframes glitchShift{
    0%,95%,100%{clip-path:inset(0 0 100% 0);transform:translateX(0)}
    96%{clip-path:inset(15% 0 60% 0);transform:translateX(-4px)}
    97%{clip-path:inset(55% 0 20% 0);transform:translateX(4px)}
    98%{clip-path:inset(30% 0 45% 0);transform:translateX(-2px)}
    99%{clip-path:inset(0 0 80% 0);transform:translateX(2px)}
  }
  @keyframes glitchShift2{
    0%,96%,100%{clip-path:inset(0 0 100% 0);transform:translateX(0)}
    97%{clip-path:inset(40% 0 30% 0);transform:translateX(5px)}
    98%{clip-path:inset(10% 0 70% 0);transform:translateX(-3px)}
    99%{clip-path:inset(60% 0 10% 0);transform:translateX(3px)}
  }
  /* Shimmer overlay on photo items */
  .tri-frame .proj-glitch-bar ~ .proj-overlay ~ * ~ .proj-media-wrap::after,
  .proj-6 .proj-media-wrap::after,
  .proj-7 .proj-media-wrap::after,
  .proj-8 .proj-media-wrap::after,
  .proj-13 .proj-media-wrap::after,
  .proj-14 .proj-media-wrap::after,
  .proj-15 .proj-media-wrap::after{
    content:'';
    position:absolute;inset:0;z-index:3;
    background:linear-gradient(105deg,transparent 30%,rgba(232,57,42,.12) 50%,rgba(255,255,255,.08) 55%,transparent 70%);
    background-size:200% 100%;
    animation:shimmerSweep 3.5s ease-in-out infinite;
    pointer-events:none;
    opacity:0;
    transition:opacity .4s;
  }
  .proj-6:hover .proj-media-wrap::after,
  .proj-7:hover .proj-media-wrap::after,
  .proj-8:hover .proj-media-wrap::after,
  .proj-13:hover .proj-media-wrap::after,
  .proj-14:hover .proj-media-wrap::after,
  .proj-15:hover .proj-media-wrap::after{opacity:1}
  /* Glitch pseudo-clone */
  /* photo items use .proj-photo absolute rule */
  .proj-6:hover .proj-photo,
  .proj-7:hover .proj-photo,
  .proj-8:hover .proj-photo,
  .proj-13:hover .proj-photo,
  .proj-14:hover .proj-photo,
  .proj-15:hover .proj-photo{animation:kenBurns 8s ease-in-out infinite alternate}
  /* red-tint glitch bar */
  .proj-glitch-bar{
    position:absolute;inset:0;z-index:4;
    background:rgba(232,57,42,.18);
    mix-blend-mode:screen;
    pointer-events:none;
    animation:glitchShift 5s steps(1,end) infinite;
  }
  .proj-glitch-bar2{
    position:absolute;inset:0;z-index:4;
    background:rgba(0,180,255,.1);
    mix-blend-mode:screen;
    pointer-events:none;
    animation:glitchShift2 7s steps(1,end) infinite;
    animation-delay:1.2s;
  }
  /* Scan-line vignette badge on new items */
  .proj-new-badge{
    position:absolute;top:.85rem;left:.85rem;z-index:6;
    font-family:var(--font-mono);font-size:.5rem;letter-spacing:3px;
    color:rgba(232,57,42,.9);
    border:1px solid rgba(232,57,42,.5);
    padding:.25rem .65rem;
    background:rgba(8,8,8,.7);
    text-transform:uppercase;
    backdrop-filter:blur(4px);
    animation:smBadgePulse 2.5s ease-in-out infinite alternate;
  }

  /* Video inside wrapper */
  .proj-video{position:absolute;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center center;display:block;transition:filter .6s ease;filter:grayscale(20%);background:#000;min-width:0;min-height:0;overflow:hidden}
  .proj:hover .proj-video{filter:grayscale(0%)}

  /* ── Portrait (9:16) video — black bars fix ── */
  .proj-portrait .proj-video{
    object-fit:cover !important;
    object-position:center center !important;
    width:100% !important;
    height:100% !important;
    position:absolute !important;
    inset:0 !important;
  }

  /* ── Sound banner — shown on card when browser blocks unmuted autoplay ──
     Appended to .proj or .gal-item directly, NOT inside gal-media-wrap,
     so hover CSS does not hide it */

  /* ── Mute indicator — top-right corner of video ── */
  .mute-indicator{
    position:absolute;top:.75rem;right:.75rem;z-index:5;
    width:32px;height:32px;border-radius:50%;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,0.15);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background .2s, transform .2s, opacity .2s;
    opacity:0;
  }
  /* Show on hover of parent card */
  .proj:hover .mute-indicator,
  .gal-item:hover .mute-indicator,
  .touch-playing .mute-indicator{ opacity:1; }
  .mute-indicator:hover{ background:rgba(232,57,42,0.8); transform:scale(1.1); opacity:1; }
  .mute-indicator svg{ width:14px;height:14px;pointer-events:none; }
  .mute-indicator .mi-muted{ display:block; }
  .mute-indicator .mi-sound{ display:none; }
  .mute-indicator.is-sound .mi-muted{ display:none; }
  .mute-indicator.is-sound .mi-sound{ display:block; }

  /* Video thumbnail overlay — shows until video plays */
  .vid-thumb-overlay{
    position:absolute;inset:0;z-index:2;
    background:rgba(8,8,8,0.55);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .4s ease;
    pointer-events:none;
  }
  .vid-thumb-overlay svg{
    width:52px;height:52px;
    background:rgba(232,57,42,.85);border-radius:50%;
    padding:15px;
    filter:drop-shadow(0 4px 16px rgba(232,57,42,.5));
    transition:transform .25s;
  }
  .proj:hover .vid-thumb-overlay,
  .gal-item:hover .vid-thumb-overlay,
  .touch-playing .vid-thumb-overlay{ opacity:0; pointer-events:none; }
  .gal-video-playing .vid-thumb-overlay{ opacity:0; }

  /* Photo with Ken Burns zoom */
  .proj-photo{position:absolute;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center center;display:block;animation:kenBurns 8s ease-in-out infinite alternate;animation-play-state:paused;transition:filter .6s ease;filter:grayscale(20%)}
  .proj:hover .proj-photo{filter:grayscale(0%);animation-play-state:running}
  @keyframes kenBurns{
    0%  {transform:scale(1)    translateX(0)    translateY(0)}
    25% {transform:scale(1.08) translateX(-1%)  translateY(-1%)}
    50% {transform:scale(1.05) translateX(1%)   translateY(.5%)}
    75% {transform:scale(1.1)  translateX(-.5%) translateY(1%)}
    100%{transform:scale(1)    translateX(.5%)  translateY(-.5%)}
  }

  /* Video controls bar */
  .vid-controls{
    position:absolute;bottom:0;left:0;right:0;z-index:4;
    display:flex;align-items:center;gap:.6rem;
    padding:.55rem .85rem;
    background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%);
    opacity:0;transition:opacity .3s;
  }
  .proj:hover .vid-controls{opacity:1}
  .vid-btn{
    width:30px;height:30px;border-radius:50%;
    background:rgba(232,57,42,.85);border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background .2s,transform .2s;flex-shrink:0;
  }
  .vid-btn:hover{background:var(--red);transform:scale(1.12)}
  .vid-btn svg{width:12px;height:12px;fill:white;pointer-events:none}
  .vid-label{font-family:var(--font-mono);font-size:.52rem;letter-spacing:2px;color:rgba(255,255,255,.6);text-transform:uppercase;margin-left:.2rem}

  /* Overlay & info — same as before */
  .proj-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.88) 0%,transparent 55%);z-index:1;opacity:0;transition:opacity .4s}
  .proj:hover .proj-overlay{opacity:1}
  .proj-info{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:1.5rem 1.5rem 3rem;transform:translateY(8px);opacity:0;transition:transform .4s,opacity .4s}
  .proj:hover .proj-info{transform:translateY(0);opacity:1}
  .proj-cat{font-family:var(--font-mono);font-size:.55rem;letter-spacing:3px;color:var(--red);text-transform:uppercase;margin-bottom:.3rem}
  .proj-name{font-family:var(--font-display);font-size:1.4rem;letter-spacing:2px;text-transform:uppercase;color:var(--white)}

  /* ═══ SCROLL MORE INDICATOR — V2 ═══ */
  .scroll-more{
    display:flex;flex-direction:column;align-items:center;gap:1.8rem;
    margin-top:4rem;padding:2.5rem 3rem;
    cursor:pointer;user-select:none;
    position:relative;
    transition:transform .3s;
  }
  .scroll-more:hover{ transform:translateY(-4px); }

  /* full-width divider line with center badge */
  .sm-rule{
    display:flex;align-items:center;gap:1.2rem;
    width:100%;max-width:600px;
  }
  .sm-rule-line{
    flex:1;height:1px;
    background:linear-gradient(90deg,transparent,rgba(232,57,42,.5));
  }
  .sm-rule-line.r{ transform:scaleX(-1); }
  .sm-rule-badge{
    font-family:var(--font-mono);font-size:.6rem;letter-spacing:4px;
    color:rgba(232,57,42,.9);text-transform:uppercase;
    border:1px solid rgba(232,57,42,.4);
    padding:.35rem 1rem;
    white-space:nowrap;
    background:rgba(232,57,42,.06);
    animation:smBadgePulse 2.5s ease-in-out infinite alternate;
  }
  @keyframes smBadgePulse{
    0%{ box-shadow:none; border-color:rgba(232,57,42,.3); }
    100%{ box-shadow:0 0 18px rgba(232,57,42,.35); border-color:rgba(232,57,42,.85); }
  }

  /* Big bold label */
  .sm-big-label{
    font-family:var(--font-display);
    font-size:clamp(1.8rem,4vw,3rem);
    letter-spacing:8px;
    color:var(--white);
    text-transform:uppercase;
    text-align:center;
    line-height:1;
    position:relative;
  }
  .sm-big-label em{
    color:var(--red);font-style:normal;
    text-shadow:0 0 30px rgba(232,57,42,.5);
  }

  /* SVG arrow group — large, clear, bouncing */
  .sm-arrows{
    display:flex;flex-direction:column;align-items:center;gap:0;
    animation:smArrowBounce 2s ease-in-out infinite;
  }
  @keyframes smArrowBounce{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(12px); }
  }
  .sm-arrows svg{ display:block; overflow:visible; }

  /* The three cascade chevron strokes — SVG drawn */
  .sm-chev-1{ opacity:1; }
  .sm-chev-2{ opacity:.55; animation:smChevFade 1.4s ease-in-out infinite; animation-delay:.15s; }
  .sm-chev-3{ opacity:.25; animation:smChevFade 1.4s ease-in-out infinite; animation-delay:.3s; }
  @keyframes smChevFade{
    0%,100%{ opacity:.15; }
    50%{ opacity:.7; }
  }

  /* Hint line below arrows */
  .sm-hint{
    font-family:var(--font-mono);font-size:.62rem;letter-spacing:5px;
    color:rgba(245,242,238,.4);text-transform:uppercase;
    display:flex;align-items:center;gap:.8rem;
  }
  .sm-hint-line{
    width:30px;height:1px;
    background:rgba(245,242,238,.2);
  }

  /* Hover states */
  .scroll-more:hover .sm-big-label{ color:var(--white); }
  .scroll-more:hover .sm-hint{ color:rgba(232,57,42,.7); }
  .scroll-more:hover .sm-hint-line{ background:rgba(232,57,42,.4); }

  /* BG COLORS for placeholders — subtle dark tints for empty media slots */
  .bg1{background:#111}
  .bg2{background:#141414}
  .bg3{background:#0d0d0d}
  .bg4{background:#181818}
  .bg5{background:#121212}

  /* SERVICES */
  /* content-visibility:auto skips rendering work while off-screen (perf) */
  .services{background:var(--gray);position:relative;overflow:hidden;padding-bottom:7rem;content-visibility:auto;contain-intrinsic-size:0 600px}
  /* Blurred, dimmed background photo sitting behind the services content */
  .services-bg{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center center;
    opacity:0.55;
    filter:blur(2px) grayscale(20%);
    z-index:0;
    transform:scale(1.04);
    display:block;
  }
  /* Dark gradient over the bg photo so the text stays readable */
  .services-overlay{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:linear-gradient(to bottom,rgba(8,8,8,0.72) 0%,rgba(8,8,8,0.55) 50%,rgba(8,8,8,0.72) 100%);
    z-index:1;
    pointer-events:none;
  }
  /* Lift the real content above the bg photo + overlay */
  .services .reveal,
  .services .services-grid,
  .services .section-label,
  .services .section-title{position:relative;z-index:2}
  /* 3-column grid of service cards, joined by shared 1px borders */
  .services-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:4rem;border:1px solid var(--gray3)}
  /* The "wide" card spans the last two columns (bottom feature row) */
  .service-item.wide{grid-column:2/4}
  .service-item{padding:2.5rem 2rem;border:1px solid var(--gray3);position:relative;overflow:hidden;transition:background .3s}
  .service-item:hover{background:rgba(232,57,42,.05)}
  .service-num{font-family:var(--font-display);font-size:4rem;color:rgba(232,57,42,.12);position:absolute;top:1rem;right:1.5rem;line-height:1;transition:color .3s}
  .service-item:hover .service-num{color:rgba(232,57,42,.25)}
  .service-icon{font-size:1.5rem;margin-bottom:1rem;display:block}
  .service-name{font-family:var(--font-display);font-size:1.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--white);margin-bottom:.75rem}
  .service-desc{font-size:.85rem;line-height:1.8;color:rgba(245,242,238,.8);font-weight:300}
  .service-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
  .service-tag{font-family:var(--font-mono);font-size:.55rem;letter-spacing:1px;color:var(--red);border:1px solid rgba(232,57,42,.3);padding:.25rem .6rem;text-transform:uppercase}

  /* REEL */


  /* TESTIMONIALS */
  .testimonials{background:var(--black)}
  .testi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-top:4rem}
  .testi-card{border:1px solid var(--gray3);padding:2rem;position:relative;transition:border-color .3s}
  .testi-card:hover{border-color:var(--red)}
  .testi-card::before{content:'"';font-family:var(--font-display);font-size:5rem;color:var(--red);position:absolute;top:-1.5rem;left:1.5rem;opacity:.6;line-height:1}
  .testi-text{font-size:.9rem;line-height:1.9;color:rgba(245,242,238,.8);font-style:italic;margin-bottom:1.5rem;padding-top:1rem}
  .testi-author{display:flex;align-items:center;gap:.75rem}
  .testi-avatar{width:36px;height:36px;border-radius:50%;background:var(--gray3);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.9rem;color:var(--red)}
  .testi-name{font-weight:500;font-size:.85rem;color:var(--white);display:block}
  .testi-role{font-family:var(--font-mono);font-size:.55rem;letter-spacing:2px;color:var(--muted);text-transform:uppercase}

  /* CONTACT */
  .contact{
    background:var(--gray);
    display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;
    position:relative;
    overflow:hidden;
  }
  .contact::before{
    content:'';
    position:absolute;inset:0;
    background:
      radial-gradient(ellipse 80% 60% at 80% 50%, rgba(232,57,42,.09) 0%, transparent 70%),
      radial-gradient(ellipse 50% 80% at 10% 80%, rgba(232,57,42,.06) 0%, transparent 60%),
      repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(255,255,255,.02) 79px,rgba(255,255,255,.02) 80px),
      repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(255,255,255,.02) 79px,rgba(255,255,255,.02) 80px);
    pointer-events:none;z-index:0;
  }
  .contact::after{
    content:'CONNECT';
    position:absolute;
    right:-2rem;top:50%;
    transform:translateY(-50%) rotate(90deg);
    font-family:var(--font-display);
    font-size:10rem;
    color:transparent;
    -webkit-text-stroke:1px rgba(232,57,42,.05);
    letter-spacing:10px;
    pointer-events:none;
    white-space:nowrap;
    z-index:0;
  }
  /* Keep all direct children above the ::before grid and ::after watermark */
  .contact > *{position:relative;z-index:1;}
  /* Contact form styles (form is currently unused — site uses WhatsApp) */
  .contact-form{display:flex;flex-direction:column;gap:1rem;margin-top:2.5rem}
  .form-group{display:flex;flex-direction:column;gap:.4rem}
  .form-group label{font-family:var(--font-mono);font-size:.55rem;letter-spacing:3px;color:var(--muted);text-transform:uppercase}
  .form-group input,.form-group textarea,.form-group select{background:transparent;border:none;border-bottom:1px solid var(--gray3);padding:.7rem 0;color:var(--white);font-family:var(--font-body);font-size:.9rem;font-weight:300;outline:none;transition:border-color .3s;width:100%;resize:none}
  .form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--red)}
  .form-group select option{background:var(--gray)}
  .form-group textarea{height:80px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
  .btn-submit{margin-top:1rem;background:var(--red);border:none;color:var(--white);font-family:var(--font-display);font-size:1rem;letter-spacing:4px;text-transform:uppercase;padding:1.1rem 2.5rem;cursor:none;transition:background .3s,transform .3s;align-self:flex-start}
  .btn-submit:hover{background:var(--red-dark);transform:translateX(4px)}
  .contact-info-item{display:flex;flex-direction:column;gap:.3rem;padding:1.5rem 0;border-bottom:1px solid var(--gray3)}
  .contact-info-item:first-child{border-top:1px solid var(--gray3)}
  .contact-info-label{font-family:var(--font-mono);font-size:.55rem;letter-spacing:3px;color:var(--muted);text-transform:uppercase}
  .contact-info-value{font-size:1rem;color:var(--white)}
  .contact-socials{display:flex;gap:1.2rem;margin-top:2rem}
  .social-link{width:40px;height:40px;border:1px solid var(--gray3);display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:.8rem;transition:border-color .3s,color .3s,background .3s}
  .social-link:hover{border-color:var(--red);color:var(--red)}

  /* WHATSAPP BUTTON */
  .whatsapp-btn{
    display:inline-flex;align-items:center;gap:1rem;
    background:transparent;
    border:2px solid #25D366;
    color:var(--white);
    font-family:var(--font-display);
    font-size:1.1rem;letter-spacing:4px;
    text-transform:uppercase;
    text-decoration:none;
    padding:1.1rem 2.2rem;
    position:relative;
    overflow:hidden;
    transition:color .4s,background .4s,transform .3s;
    cursor:none;
  }
  .whatsapp-btn::before{
    content:'';position:absolute;inset:0;
    background:#25D366;
    transform:translateX(-101%);
    transition:transform .45s cubic-bezier(.77,0,.18,1);
    z-index:0;
  }
  .whatsapp-btn:hover::before{transform:translateX(0)}
  .whatsapp-btn:hover{color:var(--black);transform:translateX(4px)}
  .wa-icon,.wa-text,.wa-arrow{position:relative;z-index:1}
  .wa-icon{display:flex;align-items:center;color:#25D366;transition:color .4s}
  .whatsapp-btn:hover .wa-icon{color:var(--black)}
  .wa-arrow{
    font-size:1.3rem;
    display:inline-block;
    animation:waArrow 1.4s ease-in-out infinite;
  }
  @keyframes waArrow{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(7px)}
  }
  .whatsapp-btn:hover .wa-arrow{animation:none;transform:translateX(4px)}

  /* Pulsing glow dot next to button */
  .wa-pulse-ring{
    width:10px;height:10px;
    background:#25D366;
    border-radius:50%;
    margin-top:1.4rem;
    position:relative;
  }
  .wa-pulse-ring::before,.wa-pulse-ring::after{
    content:'';
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:1.5px solid #25D366;
    opacity:.7;
    animation:waPulse 2s ease-out infinite;
  }
  .wa-pulse-ring::after{animation-delay:.7s}
  @keyframes waPulse{
    0%{transform:scale(1);opacity:.7}
    100%{transform:scale(2.8);opacity:0}
  }

  /* ═══ SOCIALS SECTION ═══ */
  .socials-section{background:var(--black);padding:7rem 3rem;position:relative;overflow:hidden}
  /* Thin red gradient hairline along the top edge of the section */
  .socials-section::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(232,57,42,.4),transparent);
  }
  /* Giant faint "SOCIALS" watermark drifting behind the buttons */
  .socials-bg-text{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:var(--font-display);font-size:min(18vw,16rem);
    color:transparent;-webkit-text-stroke:1px rgba(232,57,42,.04);
    letter-spacing:10px;white-space:nowrap;pointer-events:none;user-select:none;
    animation:bgTextDrift 20s ease-in-out infinite alternate;
  }
  .socials-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:4rem;position:relative;z-index:1}
  .socials-section .reveal,
  .socials-section .socials-header,
  .socials-section .socials-grid{position:relative;z-index:2}
  .socials-section .reveal.visible,
  .socials-section .socials-header.visible,
  .socials-section .socials-grid.visible{opacity:1 !important;transform:none !important}
  .socials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.2rem;
    position:relative;z-index:1;
  }

  /* Individual social button — same feel as WhatsApp btn */
  .social-btn{
    display:flex;align-items:center;gap:1.1rem;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.28);
    color:var(--white);
    font-family:var(--font-display);
    font-size:1rem;letter-spacing:4px;
    text-transform:uppercase;
    text-decoration:none;
    padding:1.1rem 1.6rem;
    position:relative;overflow:hidden;
    transition:color .35s,transform .3s,border-color .35s,box-shadow .35s;
    cursor:none;
  }
  /* Coloured fill that slides in from the left on hover (per-platform accent) */
  .social-btn::before{
    content:'';position:absolute;inset:0;
    background:var(--btn-accent,var(--red));
    transform:translateX(-101%);
    transition:transform .42s cubic-bezier(.77,0,.18,1);
    z-index:0;
  }
  .social-btn:hover::before{transform:translateX(0)}
  .social-btn:hover{
    color:var(--white);
    transform:translateX(5px);
    border-color:var(--btn-accent,var(--red));
    box-shadow:0 0 24px rgba(var(--btn-glow,232,57,42),.35);
  }
  .social-btn:hover .social-btn-arrow{animation:none;transform:translateX(4px)}
  .social-btn-icon{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;flex-shrink:0;
    position:relative;z-index:1;
    transition:transform .3s;
  }
  .social-btn:hover .social-btn-icon{transform:scale(1.12)}
  .social-btn-icon svg{width:22px;height:22px;display:block}
  .social-btn-name{position:relative;z-index:1;flex:1}
  .social-btn-arrow{
    position:relative;z-index:1;
    font-size:1.1rem;
    color:var(--btn-accent,var(--red));
    animation:waArrow 1.6s ease-in-out infinite;
    transition:transform .3s,color .3s;
  }
  .social-btn:hover .social-btn-arrow{color:var(--white)}

  /* Platform accent colours via CSS vars */
  .sb-instagram{--btn-accent:#E1306C;--btn-glow:225,48,108}
  .sb-threads{--btn-accent:#f5f2ee;--btn-glow:245,242,238}
  .sb-x{--btn-accent:#f5f2ee;--btn-glow:245,242,238}
  .sb-discord{--btn-accent:#5865F2;--btn-glow:88,101,242}
  .sb-soundcloud{--btn-accent:#FF5500;--btn-glow:255,85,0}
  .sb-youtube{--btn-accent:#FF0000;--btn-glow:255,0,0}
  .sb-github{--btn-accent:#f5f2ee;--btn-glow:245,242,238}
  .sb-drive{--btn-accent:#E8392A;--btn-glow:232,57,42}
  .sb-snapchat{--btn-accent:#FFFC00;--btn-glow:255,252,0}
  .sb-blogger{--btn-accent:#FF8000;--btn-glow:255,128,0}

  /* Threads / X / GitHub dark text on hover because bg is white */
  .sb-threads:hover,.sb-x:hover,.sb-github:hover{color:var(--black)}
  .sb-snapchat:hover{color:var(--black)}

  /* Pulse dot per platform */
  .social-btn-pulse{
    position:absolute;right:.9rem;top:.9rem;
    width:7px;height:7px;
    background:var(--btn-accent,var(--red));
    border-radius:50%;
    opacity:.6;
    animation:socialPulse 2.2s ease-out infinite;
    z-index:1;
  }
  @keyframes socialPulse{
    0%{transform:scale(1);opacity:.6}
    60%{transform:scale(2);opacity:0}
    100%{transform:scale(1);opacity:0}
  }

  @media(max-width:900px){
    .socials-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:600px){
    .socials-grid{grid-template-columns:1fr}
    .social-btn{font-size:.85rem;padding:.95rem 1.3rem;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
    .socials-section{padding:5rem 1.5rem}
  }

  /* FOOTER */
  footer{background:var(--black);padding:2.5rem 3rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--gray3)}
  .footer-logo{font-family:var(--font-display);font-size:1.8rem;letter-spacing:4px;color:var(--white)}
  .footer-copy{font-family:var(--font-mono);font-size:.6rem;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
  .footer-links{display:flex;gap:2rem}
  .footer-links a{font-family:var(--font-mono);font-size:.6rem;letter-spacing:2px;color:var(--muted);text-decoration:none;text-transform:uppercase;transition:color .3s}
  .footer-links a:hover{color:var(--red)}

  /* ANIMATIONS */
  .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
  .reveal.visible{opacity:1;transform:translateY(0)}
  .reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s ease,transform .8s ease}
  .reveal-left.visible{opacity:1;transform:translateX(0)}

  /* ─── HAMBURGER MENU ─── */
  .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem;z-index:200;background:none;border:none}
  .hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:transform .35s,opacity .35s,width .35s}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0;width:0}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* mobile overlay nav */
  .mobile-nav{display:none;position:fixed;inset:0;background:rgba(8,8,8,.97);z-index:150;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem}
  .mobile-nav.open{display:flex}
  .mobile-nav a{font-family:var(--font-display);font-size:2.5rem;letter-spacing:6px;color:var(--white);text-decoration:none;text-transform:uppercase;transition:color .3s}
  .mobile-nav a:hover{color:var(--red)}
  .mobile-nav .nav-cta-mob{
    font-family:var(--font-display);font-size:1.2rem;letter-spacing:4px;
    color:var(--white);padding:.9rem 2.5rem;text-decoration:none;text-transform:uppercase;margin-top:1rem;
    position:relative;overflow:hidden;isolation:isolate;
    display:inline-flex;align-items:center;gap:.7rem;
    animation:hireGlow 2s ease-in-out infinite alternate;
  }
  .mobile-nav .nav-cta-mob::before{
    content:'';position:absolute;inset:0;
    padding:2px;
    background:linear-gradient(90deg,#E8392A,#ff8c00,#fff,#E8392A,#b8281b,#E8392A);
    background-size:400% 100%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;
    mask-composite:exclude;
    animation:borderFlow 2.2s linear infinite;
    pointer-events:none;
  }
  .mobile-nav .nav-cta-mob::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,#E8392A,#ff6a2a,#E8392A);
    background-size:200%;transform:scaleX(0);transform-origin:left;
    transition:transform .4s cubic-bezier(.77,0,.18,1);z-index:-1;
  }
  .mobile-nav .nav-cta-mob:hover::after{transform:scaleX(1)}
  .mobile-nav .nav-cta-mob:hover{animation:none;box-shadow:0 0 36px rgba(232,57,42,.7)}
  .mob-hire-dot{
    width:8px;height:8px;border-radius:50%;background:#E8392A;
    display:inline-block;flex-shrink:0;position:relative;z-index:1;
    animation:hirePing 1.4s ease-out infinite;
  }
  .mob-hire-text{position:relative;z-index:1}

  /* ─── TABLET: 601–900px ─── */
  @media(max-width:900px){
    /* NAV */
    nav{padding:1rem 1.5rem}
    .nav-links{display:none}
    .hamburger{display:flex}

    /* HERO */
    section{padding:5rem 1.5rem}
    .hero-content{padding:0 1.5rem 3.5rem}
    .hero-title{font-size:clamp(3.5rem,10vw,5.5rem)}
    .hero-meta{flex-direction:column;align-items:flex-start;gap:1.5rem}
    .hero-stats{gap:2rem}
    .hero-stat-num{font-size:2rem}
    .frame-corner{display:none}

    /* ABOUT */
    .about{grid-template-columns:1fr;gap:3rem}
    .about-years{right:1rem}

    /* WORK */
    .work-header{flex-direction:column;align-items:flex-start;gap:1rem}
    .projects-grid{grid-template-columns:1fr 1fr;gap:1rem}
    .proj-1,.proj-2,.proj-3,.proj-4,.proj-5,.proj-6,.proj-7,.proj-8{grid-column:auto;grid-row:auto}
    .proj-1 .proj-media-wrap,.proj-2 .proj-media-wrap{height:260px}
    .proj-3 .proj-media-wrap,.proj-4 .proj-media-wrap{height:200px}
    .proj-6 .proj-media-wrap,.proj-7 .proj-media-wrap,.proj-8 .proj-media-wrap{height:200px}
    .vid-controls{opacity:1}

    /* SERVICES */
    .services-grid{grid-template-columns:1fr 1fr}
    .service-item.wide{grid-column:1/3}

    /* REEL */


    /* TESTIMONIALS */
    .testi-grid{grid-template-columns:1fr 1fr}

    /* CONTACT */
    .contact{grid-template-columns:1fr;gap:3rem}
    .contact::after{display:none}
    .form-row{grid-template-columns:1fr}

    /* FOOTER */
    footer{flex-direction:column;gap:1.2rem;text-align:center;padding:2rem 1.5rem}
    .footer-links{justify-content:center}

    /* WHATSAPP */
    .whatsapp-btn{font-size:.9rem;padding:.9rem 1.6rem}
  }

  /* ─── MOBILE: ≤600px ─── */
  @media(max-width:600px){
    nav{padding:.9rem 1.2rem}

    /* HERO */
    section{padding:4rem 1.2rem}
    .hero-content{padding:0 1.2rem 3rem}
    .hero-title{font-size:clamp(2.8rem,13vw,4.5rem);line-height:.92}
    .hero-tag{font-size:.55rem}
    .hero-sub{font-size:.88rem}
    .hero-stats{flex-wrap:wrap;gap:1.2rem}
    .hero-stat-num{font-size:1.8rem}
    .hero-bg-text{font-size:clamp(5rem,30vw,10rem)}

    /* MARQUEE */

    /* SECTION TITLES */
    .section-title{font-size:clamp(2rem,8vw,3.5rem)}

    /* ABOUT */
    .about{padding:4rem 1.2rem}
    .about-years{position:static;margin-top:1rem;display:inline-block}
    .about-skills{gap:.4rem}

    /* WORK */
    .work{padding:4rem 1.2rem}
    .projects-grid{grid-template-columns:1fr;gap:.8rem}
    .proj-1 .proj-media-wrap,.proj-2 .proj-media-wrap{height:220px}
    .proj-3 .proj-media-wrap,.proj-4 .proj-media-wrap{height:180px}
    .proj-6 .proj-media-wrap,.proj-7 .proj-media-wrap,.proj-8 .proj-media-wrap{height:180px}
    .vid-controls{opacity:1}

    /* SERVICES */
    .services{padding:4rem 1.2rem}
    .services-grid{grid-template-columns:1fr}
    .service-item.wide{grid-column:1 !important;grid-column-end:auto !important}
    .service-name{font-size:1.3rem}

    /* REEL */


    /* TESTIMONIALS */
    .testimonials{padding:4rem 1.2rem}
    .testi-grid{grid-template-columns:1fr;gap:1rem}

    /* SOFTWARE */
    .software{padding:4rem 1.2rem}
    .software-categories{grid-template-columns:1fr}
    .sw-category{border-right:none !important;border-top:1px solid var(--gray3)}
    .sw-category:first-child{border-top:none}
    .sw-card{flex-wrap:wrap}

    /* CONTACT */
    .contact{padding:4rem 1.2rem}
    .form-row{grid-template-columns:1fr}
    .btn-submit{width:100%;text-align:center;justify-content:center}
    .contact-socials{flex-wrap:wrap}
    .whatsapp-btn{width:100%;justify-content:center;font-size:.85rem}

    /* FOOTER */
    footer{padding:2rem 1.2rem;gap:1rem}
    .footer-logo{font-size:1.4rem}
    .footer-links{flex-wrap:wrap;justify-content:center;gap:1rem}
    .footer-copy{font-size:.55rem}

    /* CURSOR: hide on touch */
    .cursor,.cursor-follower{display:none !important;visibility:hidden !important;opacity:0 !important;mix-blend-mode:normal !important}
    body{cursor:auto}
  }

  /* ─── VERY SMALL: ≤380px ─── */
  @media(max-width:380px){
    .hero-title{font-size:2.6rem}
    .section-title{font-size:1.9rem}
    .hero-stats{gap:.8rem}
    .hero-stat-num{font-size:1.6rem}
    .nav-cta{display:none}
  }
  /* SOFTWARE & TOOLS */
  /* content-visibility:auto skips off-screen render cost (perf) */
  .software{background:var(--black);padding:7rem 3rem;position:relative;overflow:hidden;content-visibility:auto;contain-intrinsic-size:0 500px}
  /* Blurred, dimmed background photo behind the tool grid */
  .software-bg{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0.45;filter:blur(6px) grayscale(20%);z-index:0;transform:scale(1.08)}
  /* Dark gradient over the bg photo for text contrast */
  .software-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(8,8,8,0.75) 0%,rgba(8,8,8,0.60) 50%,rgba(8,8,8,0.75) 100%);z-index:1;pointer-events:none}
  /* Lift the real content above the bg photo + overlay */
  .software .reveal,
  .software .section-label,
  .software .section-title,
  .software .software-categories{position:relative;z-index:2}
  /* 4-column grid of tool categories, joined by shared borders */
  .software-categories{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--gray3);margin-bottom:3rem}
  .sw-category{padding:2rem 1.8rem;border-right:1px solid var(--gray3)}
  .sw-category:last-child{border-right:none}
  .sw-cat-label{font-family:var(--font-mono);font-size:.55rem;letter-spacing:3px;color:var(--red);text-transform:uppercase;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--gray3)}
  .sw-items{display:flex;flex-direction:column;gap:.6rem}
  .sw-card{display:flex;align-items:center;gap:.75rem;padding:.65rem .9rem;border:1px solid var(--gray3);transition:border-color .3s,background .3s;cursor:default}
  .sw-card:hover{border-color:var(--red);background:rgba(232,57,42,.05)}
  .sw-card.sw-highlight{border-color:rgba(232,57,42,.35)}
  .sw-card.sw-highlight:hover{border-color:var(--red);background:rgba(232,57,42,.08)}
  .sw-icon{font-size:1rem;line-height:1}
  .sw-name{font-size:.8rem;font-weight:500;color:var(--white);letter-spacing:.5px}
  .sw-card.sw-highlight .sw-name{color:var(--white)}


  @media(max-width:900px){
    .software-categories{grid-template-columns:1fr 1fr}
    .sw-category:nth-child(2){border-right:none}
    .sw-category:nth-child(3){border-top:1px solid var(--gray3)}
    .sw-category:nth-child(4){border-right:none;border-top:1px solid var(--gray3)}
  }
  .sw-name{font-size:.8rem;font-weight:500;color:var(--white);letter-spacing:.5px;word-break:break-word;overflow-wrap:break-word}