:root{--orange:#F26627;--blue:#325D79;--mint:#9BD7D1;--cream:#EFEEEE;--text:#1A1A1A;--white:#FFFFFF;--radius:24px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--cream);color:var(--text);font-family:'Inter',sans-serif;overflow-x:hidden}h1,h2,h3{font-family:'Space Grotesk',sans-serif}h1{font-size:clamp(3rem,6.5vw,5.8rem);line-height:.95;letter-spacing:-2px}h2{font-size:clamp(2rem,4vw,4rem);margin-bottom:20px}h3{font-size:1.6rem}p{color:#555;line-height:1.8}a{text-decoration:none}
/* Fluid page shell: uses the device width while keeping comfortable outer gutters */
.section,.navbar,.hero{width:min(92vw,1500px);margin-inline:auto}.section{padding:clamp(90px,9vw,140px) 0}.navbar{display:grid;grid-template-columns:180px 1fr 180px;align-items:center;padding:8px 0;min-height:70px;position:sticky;top:0;backdrop-filter:blur(20px);z-index:100}.logo{font-family:'Space Grotesk';font-size:1.3rem;font-weight:700}.logo img{height:42px;width:auto}nav{justify-self:center}.navbar ul{display:flex;gap:30px;list-style:none}.navbar a{color:var(--text);transition:.3s}.social-links{justify-self:end;display:flex;gap:18px}
/* HERO */
.hero{min-height:80vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);align-items:center;gap:clamp(48px,6vw,110px);position:relative}.hero-content{position:relative;align-self:center}.hero-tag{display:inline-block;background:white;padding:12px 20px;border-radius:999px;margin-bottom:30px}.hero p{max-width:600px;margin-top:25px;font-size:1.08rem}.hero-buttons{display:flex;gap:15px;margin-top:40px}.btn-primary,.btn-secondary{padding:15px 24px;border-radius:999px;font-weight:600}.btn-primary{background:var(--orange);color:white}.btn-secondary{border:2px solid var(--text);color:var(--text)}.hero-image{align-self:center;display:flex;align-items:center;justify-content:center;position:relative}.hero-image img{width:100%;max-width:520px;border-radius:30px}
.section-tag{display:inline-block;background:white;padding:10px 18px;border-radius:999px;margin-bottom:25px;font-size:.9rem}.about p,#about p{max-width:850px;font-size:1.15rem}.section:not(:first-of-type)::before{content:'';display:block;width:80px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--mint));margin-bottom:40px}
.project{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:120px;background:rgba(255,255,255,.65);backdrop-filter:blur(10px);border-radius:32px;padding:40px;box-shadow:0 10px 40px rgba(0,0,0,.04)}.project.reverse .project-image{order:2}.project.reverse .project-content{order:1}.project-image{position:relative;cursor:pointer}.project-image img{width:100%;border-radius:30px;transition:.4s;box-shadow:0 15px 40px rgba(0,0,0,.08)}.project-image img:hover{transform:translateY(-10px)}.project-category{display:block;color:var(--orange);margin:10px 0 20px}.project-content p{margin-bottom:25px}.tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px}.tags span{background:white;padding:10px 15px;border-radius:999px;font-size:.85rem;transition:.3s}.tags span:hover{background:var(--orange);color:white}.project-content a{color:var(--orange);font-weight:600}
.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;margin-top:50px}.analytics-card{background:#fff;border-radius:24px;overflow:hidden;transition:.3s;box-shadow:0 8px 24px rgba(0,0,0,.05)}.analytics-card:hover{transform:translateY(-8px)}.analytics-image{height:220px;overflow:hidden}.analytics-image img{width:100%;height:100%;object-fit:cover;cursor:pointer}.analytics-info{padding:20px}.analytics-info h3{font-size:1.1rem;margin-bottom:8px}.analytics-info p{font-size:.9rem;color:#666}.gbp-grid,.design-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.gbp-grid img,.design-grid img{width:100%;border-radius:25px}.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.logo-grid img{width:100%;background:white;padding:40px;border-radius:25px}.analytics-grid+.sub-heading,.gbp-grid+.sub-heading{margin-top:120px}.disclaimer{margin:28px 0 50px;padding:22px 26px;background:rgba(255,255,255,.78);border:1px solid rgba(50,93,121,.22);border-left:5px solid var(--blue);border-radius:18px;box-shadow:0 10px 30px rgba(50,93,121,.08);color:#3d4650;line-height:1.75}.disclaimer strong{color:var(--blue)}.design-grid+.sub-heading{margin-top:80px}.certificate-grid{margin-top:50px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}.certificate-grid img{width:100%;border-radius:25px;transition:.3s;background:#fff;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.08)}.certificate-grid img:hover,.design-grid img:hover{transform:translateY(-8px);transition:.3s}.popup-image{cursor:zoom-in;transition:.3s}.popup-image:hover{transform:scale(1.02)}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;justify-content:center;align-items:center;z-index:9999;padding:40px}#lightbox-img{max-width:95%;max-height:92vh;border-radius:20px;box-shadow:0 20px 80px rgba(0,0,0,.4)}.close-btn{position:absolute;top:20px;right:35px;color:#fff;font-size:50px;cursor:pointer}.contact{text-align:center}.contact p{max-width:700px;margin:auto}form{max-width:700px;margin:50px auto;display:flex;flex-direction:column;gap:15px}input,textarea{border:none;padding:18px;border-radius:18px;font-family:inherit;background:white}textarea{min-height:180px}button{border:none;background:var(--orange);color:white;padding:18px;border-radius:18px;cursor:pointer;font-weight:600}.contact-links{display:flex;justify-content:center;gap:20px}.contact-links a{background:white;color:var(--text);padding:15px 20px;border-radius:999px}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:10000;border-radius:50%;transform:translate(-50%,-50%)}.cursor-dot{width:8px;height:8px;background:#8B5CF6}.cursor-ring{width:34px;height:34px;border:1.5px solid #2563EB;transition:width .2s ease,height .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}.cursor-ring.cursor-active{width:54px;height:54px;background:linear-gradient(135deg,#2563EB,#8B5CF6);border-color:transparent;box-shadow:0 8px 24px rgba(37,99,235,.22)}.cursor-ring.cursor-active::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:600 9px/1 'Inter',sans-serif;letter-spacing:.08em}body.has-custom-cursor,body.has-custom-cursor a,body.has-custom-cursor button{cursor:none}@media(max-width:900px),(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none!important}body,body a,body button{cursor:auto!important}}
@media(prefers-reduced-motion:no-preference){@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes heroImageIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}body{animation:pageFadeIn .55s ease both}.hero-content>*{opacity:0;animation:heroRise .7s cubic-bezier(.2,.8,.2,1) forwards}.hero-content .hero-tag{animation-delay:.08s}.hero-content h1{animation-delay:.16s}.hero-content p{animation-delay:.24s}.hero-content .hero-buttons{animation-delay:.34s}.hero-image{opacity:0;animation:heroImageIn .9s cubic-bezier(.2,.8,.2,1) .18s forwards}.hero-image img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}.hero-image:hover img{transform:translateY(-6px) scale(1.01)}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}.reveal.show{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1!important;transform:none!important;transition:none!important}body,.hero-content>*,.hero-image{animation:none!important;opacity:1!important}}
@media(max-width:1200px){.section,.navbar,.hero{width:min(94vw,1500px)}.hero{gap:clamp(40px,5vw,70px);grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)}}@media(max-width:900px){.navbar{width:min(94vw,720px);display:flex;flex-direction:column;gap:20px}.hero{width:min(94vw,720px);grid-template-columns:1fr;padding-top:40px;min-height:auto;gap:55px}.hero-image img{max-width:min(100%,520px)}.section{width:min(92vw,720px)}.project{grid-template-columns:1fr;padding:25px}.project.reverse .project-image,.project.reverse .project-content{order:unset}.gbp-grid,.design-grid,.logo-grid{grid-template-columns:1fr}h1{font-size:3.5rem}.hero-buttons{flex-direction:column}.contact-links{flex-direction:column}}@media(max-width:600px){.section,.hero,.navbar{width:92vw}.hero{gap:42px}.hero-image img{width:100%}h1{font-size:clamp(3rem,15vw,4.5rem)}}

/* ===== ANIMATION FINISHING LAYER ===== */
/* Remove the old project overlay completely */
.project-image::after{content:none!important;display:none!important}

@media (prefers-reduced-motion:no-preference){
  @keyframes sectionAccent{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
  @keyframes softLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  /* Navbar */
  .navbar{transition:background-color .3s ease,box-shadow .3s ease,transform .3s ease}
  .navbar.scrolled{box-shadow:0 14px 35px rgba(22,24,29,.07)}
  .navbar a{transition:color .25s ease,transform .25s ease}
  .navbar a:hover{transform:translateY(-2px)}
  .navbar nav a{position:relative}
  .navbar nav a::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:999px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  .navbar nav a:hover::after,.navbar nav a.active::after{transform:scaleX(1)}
  .navbar nav a.active{color:var(--blue)}

  /* Reveal rhythm and stagger */
  .reveal{will-change:opacity,transform}
  .analytics-grid .reveal:nth-child(2),.gbp-grid .reveal:nth-child(2),.logo-grid .reveal:nth-child(2),.certificate-grid .reveal:nth-child(2){transition-delay:.08s}
  .analytics-grid .reveal:nth-child(3),.certificate-grid .reveal:nth-child(3){transition-delay:.16s}
  .analytics-grid .reveal:nth-child(4),.certificate-grid .reveal:nth-child(4){transition-delay:.24s}
  .analytics-grid .reveal:nth-child(5){transition-delay:.32s}
  .section:not(:first-of-type)::before{transform-origin:left;animation:sectionAccent .75s cubic-bezier(.2,.8,.2,1) both}

  /* Project and image motion — no text overlay */
  .project-image img{transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease!important}
  .project:hover .project-image img{transform:translateY(-6px) scale(1.006)!important}
  .analytics-image img,.gbp-grid .analytics-image img{transition:transform .55s cubic-bezier(.2,.8,.2,1)!important}
  .analytics-card:hover .analytics-image img{transform:scale(1.025)}
  .popup-image{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease!important}

  /* Small interaction polish */
  .btn-primary,.btn-secondary,button,.contact-links a,.project-content a{transition:transform .25s ease,box-shadow .25s ease,color .25s ease,background-color .25s ease!important}
  .btn-primary:hover,.btn-secondary:hover,button:hover{transform:translateY(-3px)}
  .btn-primary:active,.btn-secondary:active,button:active{transform:translateY(0) scale(.98)}
  .project-content a:hover{transform:translateX(4px)}
  .tags span{transition:transform .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease!important}
  .tags span:hover{transform:translateY(-2px)}
  .contact-links a:hover{transform:translateY(-2px)}

  /* Lightbox */
  #lightbox{backdrop-filter:blur(8px);transition:background-color .28s ease}
  #lightbox-img{transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s ease}
  #lightbox[style*="display: flex"] #lightbox-img{animation:lightboxIn .32s cubic-bezier(.2,.8,.2,1) both}
  @keyframes lightboxIn{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:scale(1)}}
  .close-btn{transition:transform .2s ease,opacity .2s ease}
  .close-btn:hover{transform:rotate(90deg) scale(1.06)}

  /* Form focus motion */
  input,textarea{transition:transform .2s ease,box-shadow .2s ease}
  input:focus,textarea:focus{transform:translateY(-1px)}

  /* Gentle decorative motion only on the portrait */
  .hero-image{animation:heroImageIn .9s cubic-bezier(.2,.8,.2,1) .18s forwards,softLift 7s ease-in-out 1.2s infinite}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}