:root{
  --bg:#f8f7f4;
  --paper:#fffefa;
  --black:#080808;
  --dark:#111213;
  --muted:#737373;
  --line:#e5e2dc;
  --blue:#1e6be6;
  --radius:18px;
  --max:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--black);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}.section-wrap{width:min(var(--max),calc(100% - 88px));margin:0 auto}.site-header{position:fixed;z-index:20;inset:0 0 auto 0;height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:rgba(248,247,244,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.04)}.brand{font-weight:900;font-size:25px;letter-spacing:.02em}.desktop-nav{display:flex;gap:58px;align-items:center;font-weight:700}.desktop-nav a{position:relative;padding:12px 0}.desktop-nav a.active:after,.desktop-nav a:hover:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:#111}.talk-btn{background:#050505;color:#fff;border-radius:999px;padding:15px 25px;font-size:13px;font-weight:800;letter-spacing:.04em;display:flex;gap:14px;align-items:center;box-shadow:0 10px 24px rgba(0,0,0,.18)}.menu-btn{display:none;background:none;border:0;font-size:26px}.mobile-nav{display:none}.hero{min-height:860px;padding-top:130px;display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center;position:relative}.hero-copy h1{font-size:clamp(58px,7.2vw,115px);line-height:.97;margin:0 0 32px;font-family:Impact,"Arial Black",sans-serif;letter-spacing:.02em}.hero-tags{font-size:21px;font-weight:800;margin:0 0 26px}.hero-desc{max-width:640px;color:#555;font-size:16px;margin:0 0 36px}.hero-actions{display:flex;gap:22px}.btn{border-radius:8px;padding:18px 32px;font-weight:900;display:inline-flex;align-items:center;gap:22px;border:1px solid #111;transition:.25s ease}.btn:hover{transform:translateY(-2px)}.btn.primary{background:#050505;color:#fff}.btn.secondary{background:transparent}.btn.small{font-size:14px;padding:14px 22px}.hero-visual{height:680px;position:relative}.floating-card{position:absolute;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.13);border:1px solid rgba(0,0,0,.05)}.floating-card img{width:100%;height:100%;object-fit:cover}.card-a{left:120px;top:0;width:300px;height:390px;transform:rotate(7deg)}.card-b{right:90px;top:20px;width:285px;height:410px;transform:rotate(-8deg)}.card-c{left:335px;top:250px;width:315px;height:370px;transform:rotate(-7deg);z-index:2}.card-d{left:0;top:360px;width:260px;height:330px;transform:rotate(5deg);z-index:1}.card-e{right:70px;top:390px;width:265px;height:330px;transform:rotate(9deg);z-index:3}.spark{position:absolute;font-size:36px;z-index:5}.spark-a{left:38px;top:150px}.spark-b{right:10px;top:140px}.side-word{position:absolute;right:-10px;top:260px;writing-mode:vertical-rl;letter-spacing:.28em;color:#555}.scroll-hint{position:absolute;right:0;bottom:10px;color:#555;text-align:center;font-size:11px;letter-spacing:.08em}.scroll-hint span{font-size:28px;color:#111}.services{padding:82px 0;display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start}.section-head p{margin:0 0 4px;font-weight:800;font-size:13px;letter-spacing:.08em;color:#151515}.section-head h2{font-size:31px;line-height:1.15;margin:0}.section-head span{display:block;width:38px;height:2px;background:#111;margin-top:24px}.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.service-card{min-height:232px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:36px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transition:.25s ease}.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.06)}.service-icon{width:54px;height:54px;display:grid;place-items:center;border:2px solid #111;border-radius:14px;font-size:27px;margin-bottom:23px}.service-card h3{margin:0 0 2px;font-size:19px}.service-card small{color:#777;font-size:13px}.service-card p{font-size:14px;color:#555;margin:18px 0 0}.works-block{background:#08090a;color:#fff;padding:74px 0 84px;position:relative;overflow:hidden}.works-block:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 0%,rgba(255,255,255,.12),transparent 32%),linear-gradient(135deg,rgba(255,255,255,.04),transparent 30%);pointer-events:none}.works-block>.section-wrap{position:relative}.section-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}.section-head.light p{color:#9c9c9c}.text-link{background:transparent;border:0;color:#fff;font-weight:800;cursor:pointer}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}.filter-btn{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff;border-radius:999px;padding:8px 16px;cursor:pointer}.filter-btn.active,.filter-btn:hover{background:#fff;color:#000}.work-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.work-card{background:#fff;color:#111;border-radius:4px;overflow:hidden;cursor:pointer;transition:.25s ease}.work-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.28)}.work-thumb{height:280px;background:#222;overflow:hidden}.work-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s ease}.work-card:hover .work-thumb img{transform:scale(1.04)}.work-info{padding:22px 22px 24px}.work-info strong{font-size:20px}.work-info h3{margin:12px 0 0;font-size:20px}.work-info p{margin:2px 0 0;color:#555}.about{padding:78px 0;display:grid;grid-template-columns:1fr .9fr 1.35fr;gap:72px;align-items:center}.about-text{color:#555;margin:24px 0 26px}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:42px 68px}.stats strong{display:block;font-size:50px;line-height:1;font-weight:900}.stats span{font-size:16px}.profile-card{position:relative}.profile-card img{width:100%;height:250px;object-fit:cover;border-radius:10px;filter:grayscale(1)}.profile-card p{position:absolute;right:8px;bottom:-12px;font-family:"Brush Script MT",cursive;font-size:26px;transform:rotate(-8deg);line-height:1.1}.footer{background:#08090a;color:#fff;position:relative}.footer-inner{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:64px;padding:56px 0;align-items:center}.footer-cta p{color:#8a8a8a;margin:0 0 4px}.footer-cta h2{font-size:31px;margin:0 0 8px}.footer-cta span{color:#b5b5b5;font-size:14px;display:block;margin-bottom:22px}.light-btn{background:#fff;color:#000;border-color:#fff;padding:13px 22px}.contact-list{display:grid;gap:15px;border-left:1px solid rgba(255,255,255,.25);padding-left:54px}.socials{display:flex;gap:20px;justify-content:flex-end}.socials a{width:58px;height:58px;border:1px solid rgba(255,255,255,.35);border-radius:999px;display:grid;place-items:center;font-weight:900}.copyright{text-align:center;color:#8d8d8d;margin:0;padding:0 0 24px;font-size:13px}.back-top{position:absolute;right:34px;bottom:28px;width:42px;height:42px;border:1px solid rgba(255,255,255,.35);border-radius:999px;display:grid;place-items:center}.project-modal{width:min(980px,calc(100% - 40px));border:0;border-radius:18px;padding:0;background:#fff;box-shadow:0 35px 80px rgba(0,0,0,.3)}.project-modal::backdrop{background:rgba(0,0,0,.58);backdrop-filter:blur(5px)}.modal-close{position:absolute;right:16px;top:14px;width:38px;height:38px;border:0;background:#111;color:#fff;border-radius:999px;font-size:23px;cursor:pointer}.modal-hero{display:grid;grid-template-columns:1.1fr .9fr}.modal-hero img{width:100%;height:520px;object-fit:cover}.modal-content{padding:56px}.modal-content small{color:#777;text-transform:uppercase}.modal-content h2{font-size:42px;margin:12px 0}.modal-content p{color:#555}.modal-content ul{padding-left:19px;color:#333;line-height:1.9}@media (max-width:1100px){.section-wrap{width:min(var(--max),calc(100% - 40px))}.desktop-nav{display:none}.menu-btn{display:block}.mobile-nav.open{display:grid;position:fixed;top:86px;left:0;right:0;z-index:19;background:#fff;padding:20px;gap:16px;text-align:center;border-bottom:1px solid var(--line)}.hero{grid-template-columns:1fr;min-height:auto}.hero-visual{height:560px}.services{grid-template-columns:1fr}.service-grid,.work-grid{grid-template-columns:repeat(2,1fr)}.about,.footer-inner{grid-template-columns:1fr}.contact-list{border-left:0;padding-left:0}.socials{justify-content:flex-start}.work-thumb{height:330px}}@media (max-width:680px){.site-header{height:74px;padding:0 20px}.brand{font-size:20px}.talk-btn{display:none}.hero{padding-top:110px}.hero-copy h1{font-size:54px}.hero-tags{font-size:16px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-visual{height:420px}.card-a{left:32px;top:0;width:190px;height:240px}.card-b{right:0;top:20px;width:180px;height:250px}.card-c{left:120px;top:170px;width:200px;height:230px}.card-d,.card-e,.side-word,.scroll-hint{display:none}.services{padding:58px 0}.service-grid,.work-grid{grid-template-columns:1fr}.work-thumb{height:300px}.about{gap:34px}.stats{gap:28px}.footer-inner{padding:42px 0}.modal-hero{grid-template-columns:1fr}.modal-hero img{height:320px}.modal-content{padding:32px}}


.section-caption{
  color:#9c9c9c;
  font-size:13px;
  letter-spacing:.04em;
}
.category-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.category-card{
  position:relative;
  min-height:360px;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  background:#111;
  transition:.3s ease;
}
.category-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 48px rgba(0,0,0,.32);
}
.category-thumb{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.category-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.category-card:hover .category-thumb img{
  transform:scale(1.05);
}
.category-overlay{
  position:relative;
  z-index:2;
  min-height:360px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.68));
}
.category-overlay strong{
  font-size:19px;
  font-weight:800;
}
.category-copy h3{
  margin:0;
  font-size:34px;
  line-height:1.04;
}
.category-copy p{
  margin:8px 0 0;
  color:#d4d4d4;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.category-arrow{
  position:absolute;
  right:22px;
  bottom:22px;
  width:44px;
  height:44px;
  border-radius:999px;
  background:#fff;
  color:#000;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:900;
}
@media (max-width:1100px){
  .category-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:680px){
  .section-caption{
    display:none;
  }
  .category-grid{
    grid-template-columns:1fr;
  }
  .category-card,
  .category-overlay{
    min-height:300px;
  }
  .category-copy h3{
    font-size:28px;
  }
}


body.browser-open{
  overflow:hidden;
}

.category-browser{
  position:fixed;
  inset:0;
  z-index:100;
  background:#f8f7f4;
  color:#111;
  overflow-y:auto;
  transform:translateY(100%);
  visibility:hidden;
  transition:transform .65s cubic-bezier(.2,.7,.2,1), visibility .65s step-end;
}

.category-browser.open{
  transform:translateY(0);
  visibility:visible;
  transition:transform .65s cubic-bezier(.2,.7,.2,1), visibility 0s;
}

.browser-header{
  position:sticky;
  top:0;
  z-index:10;
  min-height:82px;
  padding:0 48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  background:rgba(248,247,244,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,0,0,.1);
}

.browser-back,
.browser-close{
  border:0;
  background:transparent;
  color:#111;
  cursor:pointer;
  font-weight:800;
}

.browser-back{
  justify-self:start;
}

.browser-close{
  justify-self:end;
  font-size:30px;
  font-weight:400;
}

.browser-heading{
  display:flex;
  align-items:center;
  gap:14px;
}

.browser-heading span{
  font-size:12px;
  color:#777;
}

.browser-heading strong{
  font-size:16px;
}

.browser-intro{
  width:min(1380px,calc(100% - 96px));
  margin:0 auto;
  min-height:360px;
  padding:78px 0 56px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:end;
  gap:60px;
}

.browser-intro p:first-child{
  margin:0 0 12px;
  color:#777;
  font-size:13px;
  letter-spacing:.12em;
}

.browser-intro h2{
  margin:0;
  font-size:clamp(72px,10vw,160px);
  line-height:.84;
  letter-spacing:-.07em;
}

#browserDescription{
  max-width:520px;
  margin:0 0 12px;
  color:#555;
  font-size:17px;
  line-height:1.8;
}

.subcategory-bar{
  position:sticky;
  top:82px;
  z-index:9;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:18px 48px;
  background:rgba(248,247,244,.94);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.1);
}

.subcategory-btn{
  border:1px solid rgba(0,0,0,.18);
  background:transparent;
  color:#111;
  border-radius:999px;
  padding:10px 18px;
  cursor:pointer;
  font-weight:700;
  transition:.2s ease;
}

.subcategory-btn.active,
.subcategory-btn:hover{
  background:#111;
  color:#fff;
}

.browser-content{
  width:min(1380px,calc(100% - 96px));
  margin:0 auto;
  padding:52px 0 100px;
}

.browser-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px 22px;
}

.browser-work-card{
  min-width:0;
}

.browser-work-image{
  aspect-ratio:1/1;
  background:#e8e6e0;
  overflow:hidden;
}

.browser-work-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.browser-work-card:hover .browser-work-image img{
  transform:scale(1.035);
}

.browser-work-info{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  padding:16px 2px 0;
}

.browser-work-info>span{
  color:#999;
  font-size:11px;
}

.browser-work-info h3{
  margin:0;
  font-size:19px;
}

.browser-work-info p{
  margin:5px 0 0;
  color:#777;
  font-size:13px;
}

@media (max-width:1100px){
  .browser-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .browser-intro{
    grid-template-columns:1fr;
    gap:34px;
  }
}

@media (max-width:680px){
  .browser-header{
    min-height:70px;
    padding:0 18px;
  }

  .browser-heading{
    gap:8px;
  }

  .browser-heading strong{
    font-size:14px;
  }

  .browser-intro{
    width:calc(100% - 36px);
    min-height:300px;
    padding:54px 0 38px;
  }

  .browser-intro h2{
    font-size:22vw;
  }

  #browserDescription{
    font-size:15px;
  }

  .subcategory-bar{
    top:70px;
    padding:14px 18px;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .subcategory-bar::-webkit-scrollbar{
    display:none;
  }

  .subcategory-btn{
    flex:0 0 auto;
    padding:9px 15px;
  }

  .browser-content{
    width:calc(100% - 36px);
    padding:34px 0 70px;
  }

  .browser-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}


/* Contact information refinement */
.footer-inner{
  grid-template-columns:1.15fr 1fr .7fr;
}

.contact-list{
  gap:10px;
}

.copy-contact{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:.22s ease;
}

.copy-contact:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
}

.copy-contact:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

.contact-icon{
  width:24px;
  display:grid;
  place-items:center;
  font-size:17px;
}

.wechat-icon svg{
  width:23px;
  height:23px;
  display:block;
  fill:#fff;
}

.contact-value{
  min-width:0;
  overflow-wrap:anywhere;
  font-size:15px;
}

.copy-label{
  color:#8f8f8f;
  font-size:12px;
  opacity:0;
  transform:translateX(-4px);
  transition:.2s ease;
}

.copy-contact:hover .copy-label{
  opacity:1;
  transform:none;
}

.wechat-qr{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.wechat-qr img{
  width:min(190px,100%);
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  background:#fff;
  padding:8px;
  border-radius:8px;
}

.copy-toast{
  position:fixed;
  left:50%;
  bottom:30px;
  z-index:220;
  transform:translate(-50%,18px);
  padding:11px 18px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:13px;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  box-shadow:0 12px 36px rgba(0,0,0,.28);
  transition:.24s ease;
}

.copy-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

@media (max-width:1100px){
  .footer-inner{
    grid-template-columns:1fr;
  }

  .wechat-qr{
    justify-content:flex-start;
  }

  .wechat-qr img{
    width:170px;
  }
}

@media (max-width:680px){
  .copy-label{
    opacity:1;
    transform:none;
  }

  .wechat-qr img{
    width:150px;
  }
}


/* V5 detail refinements */
@media (min-width:1101px){
  .desktop-nav{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
}

.about-text{
  margin-bottom:0;
}

.section-row{
  justify-content:flex-start;
}


/* V6 - larger e-commerce project library */
.browser-work-image{
  background:#f0efeb;
}

.browser-work-image img{
  object-position:center;
}

@media (min-width:1400px){
  .browser-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}


/* V7 - work image full-screen preview */
.browser-work-card{
  cursor:zoom-in;
}

.browser-work-card:focus-visible{
  outline:3px solid #111;
  outline-offset:5px;
}

.browser-work-image{
  position:relative;
}

.work-zoom-hint{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(17,17,17,.8);
  color:#fff;
  font-size:11px;
  font-weight:700;
  opacity:0;
  transform:translateY(5px);
  transition:.22s ease;
  pointer-events:none;
  backdrop-filter:blur(8px);
}

.browser-work-card:hover .work-zoom-hint,
.browser-work-card:focus-visible .work-zoom-hint{
  opacity:1;
  transform:none;
}

.work-lightbox{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 84px;
  background:rgba(8,9,10,.96);
  color:#fff;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s step-end;
}

.work-lightbox.open{
  opacity:1;
  visibility:visible;
  transition:opacity .25s ease, visibility 0s;
}

.lightbox-figure{
  width:100%;
  height:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.lightbox-figure img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 122px);
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
  background:#fff;
}

.lightbox-caption{
  width:min(100%,1100px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:18px;
  font-style:normal;
}

.lightbox-caption strong{
  font-size:16px;
}

.lightbox-caption span{
  min-width:0;
  color:#aaa;
  font-size:13px;
}

.lightbox-caption em{
  color:#777;
  font-size:12px;
  font-style:normal;
}

.lightbox-close{
  position:fixed;
  top:20px;
  right:24px;
  z-index:2;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}

.lightbox-close:hover{
  background:#fff;
  color:#111;
}

.lightbox-nav{
  position:fixed;
  top:50%;
  z-index:2;
  width:48px;
  height:48px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:24px;
  cursor:pointer;
  transition:.2s ease;
}

.lightbox-nav:hover{
  background:#fff;
  color:#111;
}

.lightbox-prev{
  left:22px;
}

.lightbox-next{
  right:22px;
}

@media (max-width:680px){
  .work-lightbox{
    padding:68px 14px 20px;
  }

  .lightbox-figure img{
    max-height:calc(100vh - 160px);
  }

  .lightbox-caption{
    grid-template-columns:1fr auto;
    gap:6px 12px;
  }

  .lightbox-caption span{
    grid-column:1 / -1;
  }

  .lightbox-close{
    top:12px;
    right:12px;
  }

  .lightbox-nav{
    top:auto;
    bottom:18px;
    transform:none;
  }

  .lightbox-prev{
    left:14px;
  }

  .lightbox-next{
    right:14px;
  }
}


/* V9 - video support and minor refinements */
.work-type-badge{position:absolute;left:12px;top:12px;padding:7px 10px;border-radius:999px;background:rgba(17,17,17,.82);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;pointer-events:none;backdrop-filter:blur(8px)}
.work-play-badge{position:absolute;left:50%;top:50%;width:70px;height:70px;display:grid;place-items:center;border-radius:999px;transform:translate(-50%,-50%);background:rgba(17,17,17,.68);color:#fff;font-size:26px;font-weight:900;box-shadow:0 18px 50px rgba(0,0,0,.25);backdrop-filter:blur(8px);pointer-events:none}
.browser-work-card.is-video .browser-work-image img{filter:saturate(1.02)}
#lightboxVideo{display:block;max-width:100%;max-height:calc(100vh - 122px);width:min(1200px,100%);height:auto;background:#000;box-shadow:0 22px 70px rgba(0,0,0,.45)}
#lightboxVideo[hidden],#lightboxImage[hidden]{display:none !important}


/* V11 - natural color portrait */
.profile-card img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 16%;
  border-radius:10px;
  filter:none;
}


/* V12 - About section without portrait */
.about{
  grid-template-columns:1.15fr .85fr;
  gap:90px;
}

@media (max-width:1100px){
  .about{
    grid-template-columns:1fr;
    gap:42px;
  }
}

/* V13 - Project case page for Amazon Main Images & A+ */
.project-case{
  position:fixed;
  inset:0;
  z-index:210;
  background:#f8f7f4;
  color:#111;
  overflow-y:auto;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .52s cubic-bezier(.2,.7,.2,1), visibility .52s step-end;
}
.project-case.open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .52s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.case-header{
  position:sticky;
  top:0;
  z-index:4;
  min-height:82px;
  padding:0 48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  background:rgba(248,247,244,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,0,0,.1);
}
.case-back,
.case-close{
  border:0;
  background:transparent;
  cursor:pointer;
  color:#111;
  font-weight:800;
}
.case-back{justify-self:start}
.case-close{
  justify-self:end;
  width:42px;
  height:42px;
  border-radius:999px;
  font-size:30px;
  font-weight:400;
}
.case-close:hover{background:#111;color:#fff}
.case-body{
  width:min(1380px,calc(100% - 96px));
  margin:0 auto;
  padding:56px 0 100px;
}
.case-hero{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:48px;
  align-items:center;
}
.case-cover{
  overflow:hidden;
  border-radius:14px;
  background:#e8e6e0;
  box-shadow:0 18px 48px rgba(0,0,0,.09);
}
.case-cover img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
}
.case-kicker{
  margin:0 0 12px;
  color:#777;
  font-size:13px;
  font-weight:900;
  letter-spacing:.13em;
}
.case-copy h2{
  margin:0;
  font-size:clamp(42px,5.6vw,82px);
  line-height:.98;
  letter-spacing:-.045em;
}
.case-meta{
  margin:22px 0 0;
  color:#111;
  font-weight:900;
}
.case-intro{
  max-width:620px;
  margin:20px 0 0;
  color:#555;
  font-size:16px;
  line-height:1.85;
}
.case-highlights{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.case-highlights span{
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  border-radius:999px;
  padding:9px 14px;
  color:#333;
  font-size:13px;
  font-weight:700;
}
.case-section-title{
  margin:88px 0 28px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  border-top:1px solid rgba(0,0,0,.12);
  padding-top:32px;
}
.case-section-title p{
  margin:0;
  color:#777;
  font-size:13px;
  font-weight:900;
  letter-spacing:.13em;
}
.case-section-title h3{
  margin:0;
  font-size:34px;
}
.case-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 22px;
}
.case-gallery-card{
  min-width:0;
  cursor:zoom-in;
}
.case-gallery-card:focus-visible{
  outline:3px solid #111;
  outline-offset:5px;
}
.case-gallery-card.is-wide{
  grid-column:span 1;
}
.case-gallery-card.is-tall{
  grid-column:1 / -1;
  width:min(720px,100%);
  margin:10px auto 0;
}
.case-gallery-image{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#e8e6e0;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}
.case-gallery-image img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:transform .45s ease;
}
.case-gallery-card.is-tall .case-gallery-image img{
  aspect-ratio:auto;
  height:auto;
  object-fit:contain;
}
.case-gallery-card:hover .case-gallery-image img{
  transform:scale(1.025);
}
.case-gallery-card:hover .work-zoom-hint,
.case-gallery-card:focus-visible .work-zoom-hint{
  opacity:1;
  transform:none;
}
.case-gallery-info{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  padding:14px 2px 0;
}
.case-gallery-info strong{
  color:#999;
  font-size:11px;
}
.case-gallery-info h4{
  margin:0;
  font-size:18px;
}
.case-gallery-info p{
  margin:5px 0 0;
  color:#777;
  font-size:13px;
}
.browser-work-card.is-project .browser-work-image{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
}
.browser-work-card.is-project .browser-work-info h3{
  font-size:21px;
}
@media (max-width:1100px){
  .case-hero{
    grid-template-columns:1fr;
  }
  .case-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:680px){
  .case-header{
    min-height:70px;
    padding:0 18px;
  }
  .case-header strong{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
  }
  .case-body{
    width:calc(100% - 36px);
    padding:34px 0 72px;
  }
  .case-hero{
    gap:28px;
  }
  .case-copy h2{
    font-size:42px;
  }
  .case-section-title{
    margin-top:58px;
  }
  .case-gallery{
    grid-template-columns:1fr;
    gap:26px;
  }
  .case-gallery-card.is-wide,
  .case-gallery-card.is-tall{
    grid-column:auto;
    width:100%;
  }
}


/* V16 - TuWaiWai IP case presentation */
.project-case.case-ip-dark{
  background:
    radial-gradient(circle at 18% 16%, rgba(34,211,238,.18), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(255,77,109,.12), transparent 28%),
    linear-gradient(135deg,#061018 0%,#0a111b 52%,#05070c 100%);
  color:#eef8ff;
}
.project-case.case-ip-dark::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(116,217,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,217,255,.28) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.15));
}
.project-case.case-ip-dark .case-header{
  background:rgba(5,12,18,.86);
  border-bottom-color:rgba(112,221,255,.24);
}
.project-case.case-ip-dark .case-back,
.project-case.case-ip-dark .case-close,
.project-case.case-ip-dark .case-header strong{
  color:#f5fbff;
}
.project-case.case-ip-dark .case-close:hover{
  background:#f5fbff;
  color:#071018;
}
.project-case.case-ip-dark .case-kicker,
.project-case.case-ip-dark .case-section-title p{
  color:#47d8f0;
}
.project-case.case-ip-dark .case-copy h2{
  letter-spacing:-.035em;
  text-shadow:0 0 28px rgba(71,216,240,.28);
}
.project-case.case-ip-dark .case-meta{
  color:#b8f3ff;
}
.project-case.case-ip-dark .case-intro,
.project-case.case-ip-dark .case-gallery-info p{
  color:rgba(238,248,255,.72);
}
.project-case.case-ip-dark .case-cover,
.project-case.case-ip-dark .case-gallery-image{
  background:rgba(12,31,42,.78);
  border:1px solid rgba(91,214,238,.28);
  box-shadow:0 22px 60px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.project-case.case-ip-dark .case-cover img{
  aspect-ratio:16/9;
  object-fit:cover;
}
.project-case.case-ip-dark .case-highlights span{
  background:rgba(9,36,48,.78);
  border-color:rgba(91,214,238,.34);
  color:#dff9ff;
}
.project-case.case-ip-dark .case-section-title{
  border-top-color:rgba(91,214,238,.22);
}
.project-case.case-ip-dark .case-section-title h3,
.project-case.case-ip-dark .case-gallery-info h4{
  color:#fff;
}
.project-case.case-ip-dark .case-gallery-info strong{
  color:#49d8ef;
}
.case-gallery-card.is-cinema{
  grid-column:1 / -1;
}
.case-gallery-card.is-cinema .case-gallery-image img{
  aspect-ratio:16/9;
  object-fit:cover;
  height:auto;
}
.case-gallery-card.is-cinema .case-gallery-info{
  max-width:880px;
}
@media (max-width:720px){
  .case-gallery-card.is-cinema .case-gallery-image img{
    aspect-ratio:16/10;
  }
}


/* V20 - Soft healing IP case presentation */
.project-case.case-ip-soft{
  background:
    radial-gradient(circle at 18% 10%, rgba(255,196,218,.34), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(220,204,255,.28), transparent 28%),
    linear-gradient(135deg,#fff9ef 0%,#fff4df 48%,#f7efe4 100%);
  color:#3a2f2a;
}
.project-case.case-ip-soft::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background-image:
    radial-gradient(circle, rgba(164,131,96,.14) 1.2px, transparent 1.2px),
    linear-gradient(120deg, rgba(255,255,255,.38), transparent 42%);
  background-size:28px 28px, 100% 100%;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.12));
}
.project-case.case-ip-soft .case-header{
  background:rgba(255,250,241,.9);
  border-bottom-color:rgba(164,131,96,.18);
  backdrop-filter:blur(18px);
}
.project-case.case-ip-soft .case-kicker,
.project-case.case-ip-soft .case-section-title p{
  color:#a77d56;
}
.project-case.case-ip-soft .case-copy h2{
  letter-spacing:-.035em;
  color:#4b3328;
}
.project-case.case-ip-soft .case-meta{
  color:#8b6445;
}
.project-case.case-ip-soft .case-intro,
.project-case.case-ip-soft .case-gallery-info p{
  color:rgba(58,47,42,.74);
}
.project-case.case-ip-soft .case-cover,
.project-case.case-ip-soft .case-gallery-image{
  background:#fff8ec;
  border:1px solid rgba(164,131,96,.16);
  box-shadow:0 22px 58px rgba(121,85,54,.13), 0 0 0 1px rgba(255,255,255,.65) inset;
}
.project-case.case-ip-soft .case-highlights span{
  background:rgba(255,255,255,.7);
  border-color:rgba(164,131,96,.18);
  color:#5d4635;
}
.project-case.case-ip-soft .case-section-title{
  border-top-color:rgba(164,131,96,.2);
}
.project-case.case-ip-soft .case-gallery-info h4{
  color:#4b3328;
}
.project-case.case-ip-soft .case-gallery-info strong{
  color:#a77d56;
}

/* V21 - Healing IP hero refinement */
.project-case.case-ip-soft .case-cover img{
  aspect-ratio:4/3;
  object-fit:contain;
  background:linear-gradient(135deg,#fffaf0 0%,#fff3df 100%);
}
.case-gallery-card.is-soft-hero{
  grid-column:1 / -1;
  width:min(860px,100%);
  margin:0 auto;
}
.case-gallery-card.is-soft-hero .case-gallery-image img{
  aspect-ratio:4/3;
  object-fit:contain;
  background:linear-gradient(135deg,#fffaf0 0%,#fff3df 100%);
}


/* V28 - product composite gallery refinement */
.project-case.case-composite .case-cover img{
  aspect-ratio:4/3;
  object-fit:contain;
  background:linear-gradient(135deg,#fffaf4 0%,#f5efe6 100%);
}
.project-case.case-composite .case-copy h2{
  color:#4b3a2f;
}
.project-case.case-composite .case-meta{
  color:#6f5a48;
}
.case-gallery-card.is-landscape .case-gallery-image img{
  aspect-ratio:4/3;
  object-fit:contain;
  height:auto;
  background:linear-gradient(135deg,#fffaf4 0%,#f5efe6 100%);
}

/* V38 - approved four-category hero collage */
.hero-visual{
  height:760px;
  isolation:isolate;
}

/* V39 - centered minimal hero */
.hero{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  min-height:860px;
  padding-top:86px;
}
.hero-copy{
  width:min(900px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-copy h1{
  font-size:clamp(72px,9vw,138px);
  line-height:.92;
  margin-bottom:38px;
}
.hero-tags{margin-bottom:24px}
.hero-desc{margin-left:auto;margin-right:auto}
.hero-actions{justify-content:center}

@media (max-width:680px){
  .hero{min-height:760px;padding-top:74px}
  .hero-copy h1{font-size:clamp(54px,16vw,78px);margin-bottom:30px}
  .hero-copy{width:100%}
  .hero-actions{align-items:center}
}
.hero-visual .floating-card{
  border-radius:10px;
  border:7px solid #fff;
  box-shadow:0 22px 55px rgba(0,0,0,.12);
  transform-origin:center;
  transition:transform .35s ease,box-shadow .35s ease;
}
.hero-visual .floating-card:hover{
  z-index:8;
  box-shadow:0 30px 70px rgba(0,0,0,.18);
}
.hero-visual .card-a{left:18px;right:auto;top:24px;width:370px;height:370px;z-index:1;transform:rotate(-1.5deg)}
.hero-visual .card-b{left:auto;right:4px;top:18px;width:382px;height:395px;z-index:2;transform:rotate(1.5deg)}
.hero-visual .card-c{left:22px;right:auto;top:365px;width:374px;height:430px;z-index:3;transform:rotate(-.5deg)}
.hero-visual .card-d{left:auto;right:6px;top:376px;width:400px;height:400px;z-index:4;transform:rotate(1deg)}
.hero-visual .card-a:hover{transform:rotate(-.8deg) translateY(-7px)}
.hero-visual .card-b:hover{transform:rotate(.8deg) translateY(-7px)}
.hero-visual .card-c:hover{transform:rotate(0deg) translateY(-7px)}
.hero-visual .card-d:hover{transform:rotate(.4deg) translateY(-7px)}
.hero-visual .card-b img,.hero-visual .card-c img{object-fit:contain;background:#f8f7f4}
.hero-visual .spark-a{left:-40px;top:220px}
.hero-visual .spark-b{right:-42px;top:218px}

@media (max-width:1100px){
  .hero-visual{height:600px;max-width:720px;width:100%;margin:0 auto}
}

@media (max-width:680px){
  .hero-visual{height:480px;margin-top:24px}
  .hero-visual .floating-card{border-width:4px;border-radius:8px}
  .hero-visual .card-a{left:10px;top:14px;width:172px;height:172px;transform:rotate(-2deg)}
  .hero-visual .card-b{right:5px;top:4px;width:155px;height:189px;transform:rotate(2deg)}
  .hero-visual .card-c{left:8px;top:176px;width:162px;height:204px;transform:rotate(1deg)}
  .hero-visual .card-d{display:block;right:2px;top:190px;width:170px;height:170px;transform:rotate(-1deg)}
  .hero-visual .spark-a{left:-4px;top:190px;font-size:24px}
  .hero-visual .spark-b{right:-2px;top:190px;font-size:24px}
}