@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#111111;--white:#ffffff;--border:#e0e0e0;
  --muted:#666666;
  --font-head:'Barlow Condensed',sans-serif;
  --font-body:'Barlow',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--black);font-family:var(--font-body);overflow-x:hidden}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:64px;background:rgba(255,255,255,0.97);border-bottom:1px solid var(--border);backdrop-filter:blur(8px);}
.nav-logo{display:flex;align-items:center;gap:10px}
.logo-icon svg{width:40px;height:40px}
.logo-text{font-family:var(--font-head);font-size:1.3rem;letter-spacing:0.03em;color:var(--black);font-weight:400}
.logo-text strong{font-weight:900}
.nav-links{display:flex;gap:32px}
.nav-links a{font-family:var(--font-body);font-size:0.9rem;font-weight:400;color:var(--muted);text-decoration:none;transition:color 0.2s;position:relative;padding-bottom:4px;}
.nav-links a:hover,.nav-links a.active{color:var(--black)}
.nav-links a.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--black);}
.btn-connect{display:flex;align-items:center;gap:6px;padding:10px 20px;background:var(--black);color:var(--white);font-family:var(--font-body);font-size:0.88rem;font-weight:500;text-decoration:none;border-radius:4px;transition:opacity 0.2s;}
.btn-connect:hover{opacity:0.8}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:var(--black);border-radius:2px}

/* HERO */
.hero{
  min-height:100vh;
  padding-top:64px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  background:var(--white);
  overflow:hidden;
  position:relative;
}

/* Big watermark text behind left side */
.hero::before{
  content:'DD';
  position:absolute;
  left:-20px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-head);
  font-size:38vw;
  font-weight:900;
  color:rgba(0,0,0,0.03);
  line-height:1;
  pointer-events:none;
  z-index:0;
  letter-spacing:-0.05em;
}

.hero-content{
  padding:0 40px 0 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:1;
}

/* Decorative dot grid top-left */
.hero-content::before{
  content:'';
  position:absolute;
  top:20px; left:20px;
  width:120px; height:120px;
  background-image:radial-gradient(circle, #ccc 1px, transparent 1px);
  background-size:14px 14px;
  opacity:0.5;
  pointer-events:none;
}

.greeting{font-size:0.95rem;font-weight:400;color:var(--muted);margin-bottom:10px}
.greeting strong{color:var(--black);font-weight:700}
.divider-line{width:32px;height:2.5px;background:var(--black);margin-bottom:20px}

.hero-title{
  font-family:var(--font-head);
  font-size:clamp(1.8rem,2.8vw,2.6rem);
  font-weight:400;line-height:1.1;
  text-transform:uppercase;color:var(--black);margin-bottom:4px;
}
.bold-line{
  font-weight:900;
  font-size:clamp(3.2rem,5.5vw,5rem);
  line-height:0.95;
  display:block;
  letter-spacing:-0.01em;
}

.hero-sub{font-size:0.88rem;font-weight:300;line-height:1.75;color:var(--muted);margin-bottom:32px;margin-top:20px;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:12px 24px;background:var(--black);color:var(--white);font-family:var(--font-body);font-size:0.88rem;font-weight:500;text-decoration:none;border-radius:4px;transition:opacity 0.2s;}
.btn-primary:hover{opacity:0.8}
.btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:12px 24px;background:transparent;color:var(--black);font-family:var(--font-body);font-size:0.88rem;font-weight:500;text-decoration:none;border:1.5px solid var(--black);border-radius:4px;transition:background 0.2s,color 0.2s;}
.btn-secondary:hover{background:var(--black);color:var(--white)}
.scroll-hint{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:0.72rem;letter-spacing:0.15em}
.scroll-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted)}

/* Vertical text on left edge */
.hero-vertical-text{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  font-family:var(--font-head);
  font-size:0.65rem;
  letter-spacing:0.3em;
  color:#bbb;
  white-space:nowrap;
  pointer-events:none;
}

/* HERO RIGHT - DRAGON */
.hero-dragon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  
  
}

/* Subtle circle behind dragon */
.hero-dragon::before{
  content:'';
  position:absolute;
  width:85%;
  padding-bottom:85%;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.06);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.hero-dragon::after{
  content:'';
  position:absolute;
  width:65%;
  padding-bottom:65%;
  border-radius:50%;
  border:1px dashed rgba(0,0,0,0.08);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.dragon-img{
  width:90%;max-width:520px;height:auto;
  object-fit:contain;
  filter:contrast(1.1);
  display:block;
  pointer-events:none;
  position:relative;
  z-index:1;
}

.meeple-icon{position:absolute;top:72px;right:60px;opacity:0.7;z-index:2;}
.kanji-side{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:serif;font-size:1.2rem;font-weight:700;color:var(--black);
  border-left:1px dashed #ccc;padding-left:10px;line-height:1.5;
  z-index:2;
}
.kanji-tag{
  position:absolute;bottom:24px;left:28px;
  background:var(--black);color:var(--white);
  font-family:serif;font-size:0.95rem;font-weight:700;
  padding:8px 10px;border-radius:3px;
  display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.4;
  z-index:2;
}

/* SERVICES */
.services{padding:72px 60px;background:var(--white);text-align:center;border-top:1px solid var(--border);position:relative;overflow:hidden;position:relative;isolation:isolate;}
.section-label{font-family:var(--font-head);font-size:0.78rem;font-weight:600;letter-spacing:0.25em;color:var(--muted);margin-bottom:10px;position:relative;z-index:2;}
.section-title{font-family:var(--font-head);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--black);margin-bottom:16px;position:relative;z-index:2;}
.divider-ornament{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:44px;position:relative;z-index:2;}
.orn-line{flex:0 0 60px;height:1px;background:var(--border)}
.orn-diamond{font-size:0.7rem;color:var(--muted)}
.services-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1100px;margin:0 auto;position:relative;z-index:2;}
.service-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:28px 18px 18px;text-align:left;position:relative;transition:box-shadow 0.2s,transform 0.2s;cursor:pointer;}
.service-card:hover{box-shadow:0 6px 24px rgba(0,0,0,0.1);transform:translateY(-3px)}
.service-icon{width:44px;height:44px;margin-bottom:16px}
.service-icon svg{width:100%;height:100%}
.service-card h3{font-family:var(--font-head);font-size:0.9rem;font-weight:800;letter-spacing:0.08em;color:var(--black);margin-bottom:8px;}
.service-card p{font-size:0.78rem;font-weight:300;line-height:1.6;color:var(--muted);margin-bottom:20px}
.card-footer{display:flex;justify-content:space-between;align-items:center}
.card-dash{font-size:1rem;color:var(--muted)}
.card-arrow{font-size:1rem;color:var(--black);transition:transform 0.2s}
.service-card:hover .card-arrow{transform:translate(2px,-2px)}

/* STATS */
.stats-wrapper{background:var(--white);padding:16px 32px 24px;}
.stats{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--black); border-radius:6px; padding:24px 0; }
.stat-item{display:flex;align-items:center;gap:12px;padding:20px 28px;border-right:1px solid rgba(255,255,255,0.1);opacity:1;transform:translateY(0);}
.stat-item:last-child{border-right:none}
.stat-icon svg{width:32px;height:32px}
.stat-text{display:flex;flex-direction:column;gap:3px}
.stat-num{font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--white);line-height:1;}
.stat-label{font-family:var(--font-head);font-size:0.65rem;font-weight:600;letter-spacing:0.1em;color:rgba(255,255,255,0.55);line-height:1.5;}

/* RESPONSIVE */
@media(max-width:1100px){
  .services-grid{grid-template-columns:repeat(3,1fr);}
  .hero-content{padding:0 24px 0 40px;}
}
@media(max-width:900px){
  .navbar{padding:0 20px;}
  .nav-links{display:none;}
  .btn-connect{display:none;}
  .hamburger{display:flex;}
  .hero{height:auto;min-height:100vh;grid-template-columns:1fr;}
  .hero::before{display:none;}
  .hero-content{padding:48px 24px 32px;order:2;text-align:center;}
  .divider-line{margin:0 auto 20px;}
  .hero-btns{justify-content:center;}
  .scroll-hint{justify-content:center;}
  .hero-vertical-text{display:none;}
  .hero-dragon{order:1;height:60vw;min-height:280px;border-left:none;border-bottom:1px solid var(--border);}
  .dragon-img{width:80%;max-width:300px;}
  .kanji-side,.kanji-tag,.meeple-icon{display:none;}
  .services{padding:52px 20px;position:relative;isolation:isolate;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);clip-path:polygon(16px 0%,calc(100% - 16px) 0%,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0% calc(100% - 16px),0% 16px);}
  .stat-item:nth-child(2){border-right:none;}
  .stat-item:nth-child(3){border-top:1px solid rgba(255,255,255,0.1);}
  .stat-item:nth-child(4){border-top:1px solid rgba(255,255,255,0.1);border-right:none;}
}
@media(max-width:560px){
  .services-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .stat-item{padding:20px 16px;opacity:1;transform:translateY(0);}
  .bold-line{font-size:3rem;}
}



/* ==================== WORK SECTION ==================== */


.w-section{ background:var(--white); }

/* WORK HERO */
.w-hero{ display:grid; grid-template-columns:1fr 1fr 72px; align-items:stretch; border-top:1px solid var(--border); border-bottom:1px solid var(--border); min-height:480px; }
.w-hero-left{ padding:40px 24px 40px 80px; }
.w-small-label{ font-family:'Playfair Display',serif; font-size:0.82rem; color:var(--muted); margin-bottom:10px; font-style:italic; }
.w-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(3.2rem,5.5vw,5.2rem);
  font-weight:700; letter-spacing:0.04em; line-height:1;
  color:var(--black); margin-bottom:18px;
}
.w-divider{ width:44px; height:2px; background:var(--black); margin-bottom:22px; }
.w-desc{ font-size:0.72rem; letter-spacing:0.1em; line-height:2; color:var(--muted); text-transform:uppercase; }
.w-hero-right{ display:flex; align-items:flex-end; justify-content:center; height:100%; overflow:hidden; }
.w-hero-img{ width:100%; max-width:420px; height:100%; object-fit:contain; object-position:bottom center; display:block; pointer-events:none; filter:contrast(1.05); }
.w-kanji-col{
  display:flex; flex-direction:column; align-items:center;
  height:100%; padding:20px 0;
  border-left:1px solid var(--border);
}
.w-vert-line-top{ width:1px; background:var(--border); height:30px; }
.w-kanji-chars{
  font-family:'Playfair Display',serif; font-size:0.72rem; color:var(--muted);
  writing-mode:vertical-rl; letter-spacing:0.2em; line-height:2;
  padding:12px 0; flex:1; text-align:center;
}
.w-vert-line-bot{ width:1px; background:var(--border); height:30px; }
.w-kanji-box{
  width:36px; height:36px; border:1.5px solid var(--black);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700;
  margin:10px 0 16px;
}

/* FILTER */
.w-filter{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 80px; border-bottom:1px solid var(--border);
}
.w-tabs{ display:flex; }
.w-tab{
  background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:0.75rem; font-weight:500;
  color:var(--muted); padding:16px 18px;
  border-bottom:2px solid transparent;
  transition:color 0.2s,border-color 0.2s; letter-spacing:0.07em;
}
.w-tab:hover{ color:var(--black); }
.w-tab.active{ color:var(--black); border-bottom-color:var(--black); }
.w-view-all{ font-size:0.75rem; color:var(--muted); text-decoration:none; letter-spacing:0.08em; transition:color 0.2s; }
.w-view-all:hover{ color:var(--black); }

/* GRID */
.w-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin:28px 80px;
  border:1px solid var(--border); border-radius:4px; overflow:hidden;
}
.w-card{
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  cursor:pointer; transition:box-shadow 0.25s,transform 0.2s;
  background:var(--white); overflow:hidden; position:relative;
}
.w-card:nth-child(3n){ border-right:none; }
.w-card:nth-last-child(-n+3){ border-bottom:none; }
.w-card:hover{ box-shadow:0 8px 28px rgba(0,0,0,0.1); transform:translateY(-2px); z-index:1; }

.w-thumb{ height:185px; position:relative; overflow:hidden; }
.wt-dark{ background:#111; }
.wt-light{ background:#f4f4f4; }
.wt-content{ position:absolute; inset:0; padding:16px 18px; display:flex; flex-direction:column; }
.wt-tag{ font-family:var(--font-head); font-size:0.6rem; letter-spacing:0.15em; color:rgba(255,255,255,0.35); margin-bottom:4px; }
.wt-tag.dark{ color:rgba(0,0,0,0.3); }
.wt-dots{ display:flex; gap:4px; margin-bottom:auto; }
.wt-dots span{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.2); }
.wt-dots.dark span{ background:rgba(0,0,0,0.18); }
.wt-headline{ font-family:var(--font-head); font-size:1.05rem; font-weight:800; color:#fff; line-height:1.2; letter-spacing:0.02em; text-transform:uppercase; margin-top:auto; position:relative; z-index:2; }
.wt-headline.dark{ color:#111; }
.wt-headline.small{ font-size:0.85rem; }
.wt-headline.serif{ font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; text-transform:none; letter-spacing:0; }
.wt-headline.serif-light{ font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; text-transform:none; letter-spacing:0; color:#fff; }
.wt-img-block{ position:absolute; z-index:1; }
.wt-slash{ right:0;top:0;bottom:0;width:48%; background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,0.07) 100%);  }
.wt-arch{ right:18px;bottom:0;width:52px;height:80px;background:#c8c8c8;border-radius:26px 26px 0 0; }
.wt-orb{ right:20px;top:50%;transform:translateY(-50%);width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.15),transparent);border:1px solid rgba(255,255,255,0.15); }
.wt-mountain{ right:14px;bottom:0;width:72px;height:72px;background:linear-gradient(160deg,#b8b8b8,#d8d8d8); }
.wt-figure{ right:16px;bottom:0;width:55px;height:90px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04));border-radius:28px 28px 0 0; }
.wt-vase{ right:24px;top:50%;transform:translateY(-50%);width:34px;height:62px;background:#c8c8c8;border-radius:4px 4px 10px 10px; }

.w-meta{ display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--border);background:var(--white); }
.w-num{ font-family:var(--font-head);font-size:0.68rem;color:#bbb;font-weight:600;min-width:18px; }
.w-info{ flex:1; }
.w-info h3{ font-family:var(--font-head);font-size:0.82rem;font-weight:800;letter-spacing:0.07em;color:var(--black);margin-bottom:2px; }
.w-info span{ font-size:0.67rem;color:var(--muted);letter-spacing:0.08em; }
.w-arr{ font-size:0.85rem; color:var(--muted); text-decoration:none; transition:color 0.2s, transform 0.2s; display:inline-block; }
.w-card:hover .w-arr{ color:var(--black); transform:translateX(4px); }

/* CTA */
.w-cta{
  margin:0 80px 32px;
  border:1px solid var(--border);
  border-radius:6px;
  display:grid;
  grid-template-columns:1fr 1fr 160px;
  overflow:hidden;
  min-height:260px;
  background:#f8f8f8;
}
.w-cta-left{
  display:block;
  overflow:hidden;
  border-right:1px solid var(--border);
  min-height:260px;
}
.w-temple-img{
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
  object-position:center;
  display:block;
  pointer-events:none;
}
.w-cta-mid{
  padding:36px 44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
  border-right:1px solid var(--border);
  background:#fff;
}
.w-cta-title{ font-family:'Playfair Display',serif; font-size:clamp(1.8rem,2.8vw,2.4rem); font-weight:700; line-height:1.15; letter-spacing:0.04em; color:var(--black); }
.w-cta-divider{ width:32px; height:1.5px; background:var(--black); }
.w-cta-sub{ font-size:0.72rem; letter-spacing:0.1em; color:var(--muted); line-height:1.9; text-transform:uppercase; }
.w-cta-btn{ display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:var(--black);color:var(--white);font-size:0.75rem;letter-spacing:0.1em;text-decoration:none;border-radius:3px;width:fit-content;transition:opacity 0.2s; }
.w-cta-btn:hover{ opacity:0.75; }
.w-cta-right{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fafafa;
  padding:16px;
}
.w-big-kanji{ font-family:"Playfair Display",serif; font-size:5.5rem; font-weight:700; color:var(--black); line-height:1; }

/* FOOTER */
.w-footer{ display:flex;align-items:center;justify-content:space-between;padding:18px 80px;border-top:1px solid var(--border);font-size:0.7rem;letter-spacing:0.1em;color:var(--muted); }
.w-footer-links{ display:flex;gap:24px; }
.w-footer-links a{ color:var(--muted);text-decoration:none;transition:color 0.2s; }
.w-footer-links a:hover{ color:var(--black); }

/* RESPONSIVE */
@media(max-width:1024px){
  .w-hero{ display:grid; grid-template-columns:1fr 1fr 72px; align-items:stretch; border-top:1px solid var(--border); border-bottom:1px solid var(--border); min-height:480px; } .w-kanji-col{ display:none; }
  .w-hero-left{ padding:40px 24px 40px 80px; }
  .w-grid{ grid-template-columns:repeat(2,1fr); margin:24px; }
  .w-filter{ padding:0 24px; }
  .w-cta{
  margin:0 80px 32px;
  border:1px solid var(--border);
  border-radius:6px;
  display:grid;
  grid-template-columns:1fr 1fr 160px;
  overflow:hidden;
  min-height:260px;
  background:#f8f8f8;
}
  .w-cta-left{
  display:block;
  overflow:hidden;
  border-right:1px solid var(--border);
  min-height:260px;
}
  .w-cta-right{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fafafa;
  padding:16px;
}
  .w-footer{ padding:18px 24px; flex-direction:column; gap:10px; text-align:center; }
}
@media(max-width:640px){
  .w-grid{ grid-template-columns:1fr; margin:16px; }
  .w-hero{ display:grid; grid-template-columns:1fr 1fr 72px; align-items:stretch; border-top:1px solid var(--border); border-bottom:1px solid var(--border); min-height:480px; }
  .w-hero-right{ display:flex; align-items:flex-end; justify-content:center; height:100%; overflow:hidden; }
  .w-hero-left{ padding:40px 24px 40px 80px; }
  .w-tabs{ overflow-x:auto; }
  .w-tab{ padding:14px 12px; font-size:0.7rem; white-space:nowrap; }
  .w-card:nth-child(3n){ border-right:1px solid var(--border); }
  .w-card:nth-last-child(-n+3){ border-bottom:1px solid var(--border); }
  .w-card:last-child{ border-bottom:none; }
}

.w-ss-img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}



/* ── SCROLL ANIMATIONS ── */
.anim-fade-up{
  opacity:0;
  transform:translateY(32px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.anim-fade-up.visible{
  opacity:1;
  transform:translateY(0);
}
.anim-fade-left{
  opacity:0;
  transform:translateX(-28px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.anim-fade-left.visible{
  opacity:1;
  transform:translateX(0);
}
.anim-fade-right{
  opacity:0;
  transform:translateX(28px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.anim-fade-right.visible{
  opacity:1;
  transform:translateX(0);
}
.anim-delay-1{ transition-delay:0.1s; }
.anim-delay-2{ transition-delay:0.2s; }
.anim-delay-3{ transition-delay:0.3s; }
.anim-delay-4{ transition-delay:0.4s; }



/* ── CURSOR ── */





/* ==================== SKILLS ==================== */
.sk-section{background:var(--white)}
.sk-hero{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border-bottom:1px solid var(--border); min-height:520px; }
.sk-hero-left{padding:52px 40px 52px 80px}
.sk-label{font-family:'Playfair Display',serif;font-size:.82rem;color:var(--muted);margin-bottom:10px;font-style:italic}
.sk-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(3.5rem,6vw,5.5rem);font-weight:900;line-height:.95;letter-spacing:.02em;color:var(--black);margin-bottom:18px}
.sk-divider{width:40px;height:2px;background:var(--black);margin-bottom:20px}
.sk-desc{font-size:.72rem;letter-spacing:.1em;line-height:2;color:var(--muted);text-transform:uppercase}
.sk-hero-right{ display:flex; align-items:flex-end; justify-content:center; border-left:1px solid var(--border); overflow:hidden; min-height:420px; }
.sk-kanji-deco{font-family:'Playfair Display',serif;font-size:clamp(8rem,14vw,13rem);font-weight:700;color:rgba(13,13,13,.06);line-height:1;user-select:none}
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border)}
.sk-category{padding:48px 52px;border-right:1px solid var(--border);opacity:1;transform:translateY(0)}
.sk-category.visible{opacity:1;transform:translateY(0)}
.sk-category:last-child{border-right:none}
.sk-cat-header{display:flex;align-items:baseline;gap:12px;margin-bottom:32px}
.sk-cat-num{font-family:'Barlow Condensed',sans-serif;font-size:.68rem;color:#bbb;font-weight:600}
.sk-cat-header h3{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:800;letter-spacing:.1em;color:var(--black)}
.sk-bars{display:flex;flex-direction:column;gap:18px}
.sk-bar-item{display:flex;align-items:center;gap:12px}
.sk-bar-name{font-size:.72rem;color:var(--muted);min-width:110px;letter-spacing:.04em}
.sk-bar-track{ flex:1; height:4px; background:#e0e0e0; position:relative; overflow:hidden; }
.sk-bar-fill{ position:absolute; left:0; top:0; height:100%; width:0; background:#111; transition:width 1.2s cubic-bezier(.16,1,.3,1); }
.sk-category.visible .sk-bar-fill{ position:absolute; left:0; top:0; height:100%; width:0; background:#111; transition:width 1.2s cubic-bezier(.16,1,.3,1); }
.sk-bar-pct{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;color:#bbb;font-weight:600;min-width:24px;text-align:right}
.sk-tags{display:flex;flex-wrap:wrap;gap:10px;padding:36px 80px;border-bottom:1px solid var(--border)}
.sk-tags span{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.1em;color:var(--muted);border:1px solid var(--border);padding:6px 14px;border-radius:2px;transition:border-color .2s,color .2s}
.sk-tags span:hover{border-color:var(--black);color:var(--black)}

/* ==================== CONTACT ==================== */
.ct-section{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.ct-bg{position:absolute;inset:0;z-index:0}
.ct-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; pointer-events:none; }
.ct-bg-overlay{ position:absolute; inset:0; background:rgba(255,255,255,0.25); }
.ct-glass-wrap{position:relative;z-index:2;padding:80px;display:flex;align-items:center;justify-content:center;flex:1}
.ct-glass{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  width:100%;
  max-width:1100px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.55);
  border-radius:10px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 8px 32px rgba(0,0,0,0.06);
}
.ct-glass-left{
  padding:56px 48px;
  border-right:1px solid rgba(255,255,255,0.3);
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,0.05);
}
.ct-label{font-family:'Playfair Display',serif;font-size:.82rem;color:var(--muted);margin-bottom:12px;font-style:italic}
.ct-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.6rem,4vw,4rem);font-weight:900;line-height:.92;letter-spacing:.02em;color:var(--black);margin-bottom:20px}
.ct-divider{width:40px;height:2px;background:var(--black);margin-bottom:22px}
.ct-sub{font-size:.83rem;font-weight:300;line-height:1.8;color:var(--muted);margin-bottom:36px;max-width:280px}
.ct-info{display:flex;flex-direction:column;gap:18px;margin-bottom:36px}
.ct-info-item{display:flex;flex-direction:column;gap:4px}
.ct-info-label{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.2em;color:#aaa;font-weight:600}
.ct-info-val{font-size:.85rem;color:var(--black);text-decoration:none;transition:opacity .2s}
.ct-info-val:hover{opacity:.6}
.ct-socials{display:flex;gap:10px;margin-top:auto}
.ct-social{width:36px;height:36px;border:1px solid rgba(0,0,0,0.15);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;color:var(--muted);text-decoration:none;border-radius:2px;transition:all .2s}
.ct-social:hover{border-color:var(--black);color:#fff;background:var(--black)}
.ct-glass-right{
  padding:56px 48px;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.05);
}
.ct-form{width:100%;display:flex;flex-direction:column;gap:22px}
.ct-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-field{display:flex;flex-direction:column;gap:8px}
.ct-field label{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.2em;color:#aaa;font-weight:600}
.ct-field input,.ct-field textarea{background:rgba(0,0,0,0.04);border:none;border-bottom:1px solid rgba(0,0,0,0.15);padding:10px 0;font-family:'Barlow',sans-serif;font-size:.85rem;font-weight:300;color:var(--black);outline:none;resize:none;width:100%;transition:border-color .2s;border-radius:0}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#bbb}
.ct-field input:focus,.ct-field textarea:focus{border-bottom-color:var(--black)}
.ct-submit{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;background:var(--black);border:none;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:.75rem;letter-spacing:.15em;font-weight:600;cursor:pointer;border-radius:2px;width:fit-content;transition:opacity .2s}
.ct-submit:hover{opacity:.75}
.ct-submit-arrow{font-size:1rem}
.ct-bottom-deco{position:relative;z-index:2;display:flex;align-items:center;gap:20px;padding:24px 80px}
.ct-deco-line{flex:1;height:1px;background:rgba(0,0,0,0.1)}
.ct-deco-kanji{font-family:'Playfair Display',serif;font-size:1.4rem;color:rgba(0,0,0,0.15)}

/* RESPONSIVE */
@media(max-width:1024px){
  .sk-hero{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border-bottom:1px solid var(--border); min-height:520px; }
  .sk-hero-left{padding:40px 24px 40px 40px}
  .sk-grid{grid-template-columns:1fr}
  .sk-category{border-right:none;border-bottom:1px solid var(--border);padding:36px 40px}
  .sk-tags{padding:28px 24px}
  .ct-glass-wrap{padding:32px 20px}
  .ct-glass{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  width:100%;
  max-width:1100px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.55);
  border-radius:10px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 8px 32px rgba(0,0,0,0.06);
}
  .ct-glass-left{
  padding:56px 48px;
  border-right:1px solid rgba(255,255,255,0.3);
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,0.05);
}
  .ct-glass-right{
  padding:56px 48px;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.05);
}
  .ct-bottom-deco{padding:20px 24px}
}
@media(max-width:560px){
  .ct-form-row{grid-template-columns:1fr}
  .ct-title{font-size:2.6rem}
  .sk-tags{padding:20px}
  .sk-category{padding:28px 20px}
}





.hero-dragon video { width:90%; max-width:520px; height:auto; object-fit:contain; display:block; pointer-events:none; position:relative; z-index:1; }

/* ── HERO TREE BACKGROUND ── */
.hero-bg-tree {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("tree.jpg") left top / cover no-repeat;
  opacity: 0.13;
  pointer-events: none;
}

#leavesCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.hero-content { z-index: 2; position: relative; }
.hero-dragon  { z-index: 2; position: relative; }






/* ── JAPANESE DECO ELEMENTS ── */
.jp-deco {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: jpFadeIn 1.5s ease forwards;
}
@keyframes jpFadeIn {
  to { opacity: 1; }
}

/* Sword - right side, vertical */
.jp-sword {
  top: 12vh; right: 18px;
  width: 12px; height: 180px;
  opacity: 0;
  animation: jpFadeIn 2s ease 0.5s forwards;
}

/* Torii gate - bottom left */
.jp-torii {
  bottom: 8vh; left: 32px;
  width: 80px;
  opacity: 0;
  animation: jpFadeIn 2s ease 0.8s forwards;
}
.jp-torii svg { opacity: 0.12; }

/* Kabuto helmet - right side mid */
.jp-kabuto {
  top: 35vh; right: 28px;
  width: 55px;
  opacity: 0;
  animation: jpFadeIn 2s ease 1s forwards;
}
.jp-kabuto svg { opacity: 0.1; }

/* Fan - left side */
.jp-fan {
  top: 55vh; left: 16px;
  width: 70px;
  opacity: 0;
  animation: jpFadeIn 2s ease 1.2s forwards;
}
.jp-fan svg { opacity: 0.1; }

/* Shuriken - bottom right, slow spin */
.jp-shuriken {
  bottom: 15vh; right: 40px;
  width: 36px;
  opacity: 0;
  animation: jpFadeIn 2s ease 1.4s forwards, jpSpin 12s linear 2s infinite;
}
@keyframes jpSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.jp-shuriken svg { opacity: 0.18; }

/* Brush stroke - very bottom of hero area */


/* Lotus - lower left */
.jp-lotus {
  bottom: 28vh; left: 24px;
  width: 48px;
  opacity: 0;
  animation: jpFadeIn 2s ease 1.6s forwards;
}
.jp-lotus svg { opacity: 0.1; }

/* Gentle float animation for some elements */
.jp-sword  { animation: jpFadeIn 2s ease 0.5s forwards, jpFloat 6s ease-in-out 2.5s infinite; }
.jp-fan    { animation: jpFadeIn 2s ease 1.2s forwards, jpFloat 8s ease-in-out 3s infinite; }
.jp-lotus  { animation: jpFadeIn 2s ease 1.6s forwards, jpFloat 7s ease-in-out 3.5s infinite; }
.jp-kabuto { animation: jpFadeIn 2s ease 1s forwards,   jpFloat 9s ease-in-out 4s infinite; }

@keyframes jpFloat {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}

/* ══════════════════════════════════════
   AMBIENT AESTHETIC UPGRADES
══════════════════════════════════════ */

/* Full moon glow - top right fixed */
.jp-moon {
  position:fixed; top:6vh; right:6vw;
  width:90px; height:90px; z-index:0;
  pointer-events:none;
  animation: moonPulse 8s ease-in-out infinite;
}
@keyframes moonPulse {
  0%,100%{ opacity:0.07; transform:scale(1); }
  50%    { opacity:0.13; transform:scale(1.04); }
}

/* Red sun - hero left watermark */
.jp-redsun {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(180,20,0,0.06) 0%, transparent 70%);
  pointer-events:none; z-index:0;
  animation: sunBreath 6s ease-in-out infinite;
}
@keyframes sunBreath {
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:0.6; }
  50%    { transform:translate(-50%,-50%) scale(1.12); opacity:1; }
}

/* Ink circle rings - decorative */
.jp-inkring {
  position:fixed; pointer-events:none; z-index:0;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.06);
  animation: ringExpand 12s ease-in-out infinite;
}
.jp-inkring:nth-child(1){ width:200px;height:200px; top:20vh; right:8vw; animation-delay:0s; }
.jp-inkring:nth-child(2){ width:140px;height:140px; top:20vh; right:8vw; animation-delay:0s; border-style:dashed; }
@keyframes ringExpand {
  0%,100%{ transform:scale(1); opacity:0.6; }
  50%    { transform:scale(1.08); opacity:0.3; }
}

/* Vertical red accent line */
.jp-redline {
  position:fixed; left:0; top:0; bottom:0;
  width:3px; z-index:5; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(180,20,0,0.5) 20%,
    rgba(180,20,0,0.8) 50%,
    rgba(180,20,0,0.5) 80%,
    transparent 100%);
  animation: redlineSlide 4s ease-in-out infinite;
}
@keyframes redlineSlide {
  0%,100%{ opacity:0.4; }
  50%    { opacity:0.9; }
}

/* Corner brackets - top left & bottom right */
.jp-corner-tl, .jp-corner-br {
  position:fixed; pointer-events:none; z-index:4;
  width:40px; height:40px;
}
.jp-corner-tl { top:80px; left:12px; border-top:1.5px solid rgba(0,0,0,0.2); border-left:1.5px solid rgba(0,0,0,0.2); }
.jp-corner-br { bottom:12px; right:12px; border-bottom:1.5px solid rgba(0,0,0,0.2); border-right:1.5px solid rgba(0,0,0,0.2); }

/* Scrolling vertical Japanese text - right edge */
.jp-scrolltext {
  position:fixed; right:6px; top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:'Playfair Display',serif;
  font-size:0.55rem; letter-spacing:0.4em;
  color:rgba(0,0,0,0.12); pointer-events:none; z-index:4;
  white-space:nowrap;
  animation: textFade 6s ease-in-out infinite;
}
@keyframes textFade {
  0%,100%{ opacity:0.5; }
  50%    { opacity:1; }
}

/* Ink splatter dots - random fixed positions */
.jp-inkdot {
  position:fixed; border-radius:50%;
  background:#111; pointer-events:none; z-index:0;
  animation: dotPulse 5s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100%{ opacity:0.04; transform:scale(1); }
  50%    { opacity:0.1; transform:scale(1.3); }
}



  5%  { opacity:1; }
  95% { opacity:1; }
  100%{ top:100vh; opacity:0; }
}

/* Service cards - red left border on hover */
.service-card:hover { border-left:2px solid rgba(180,20,0,0.5) !important; }

/* Navbar red dot accent */
.nav-links a.active::before {
  content:''; position:absolute;
  top:-6px; left:50%; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%;
  background:#c0392b;
}

/* Stats numbers - red tint on hover */
.stat-item:hover .stat-num { color:#ff4444; transition:color 0.3s; }

/* Section titles - subtle red underline on scroll */
.section-title::after {
  content:''; display:block;
  width:0; height:1px;
  background:rgba(180,20,0,0.4);
  margin:8px auto 0;
  transition:width 1s ease;
}
.section-title.visible::after { width:60px; }

/* W-title hover shimmer */
.w-title:hover { letter-spacing:0.06em; transition:letter-spacing 0.4s ease; }

/* Skill bars - red fill variant */
.sk-category:nth-child(2) .sk-bar-fill { background:linear-gradient(to right,#111,#333); }

/* Contact glass - red accent border top */
.ct-glass { border-top:2px solid rgba(180,20,0,0.3) !important; }

/* Footer links hover red */
.w-footer-links a:hover { color:#c0392b !important; }

/* ══════════════════════════════════════
   SCROLL & ENTRANCE ANIMATIONS
══════════════════════════════════════ */

/* Base reveal classes */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left  { opacity:0; transform:translateX(-50px); transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1); }
.reveal-left.visible  { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(50px);  transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1); }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(0.88); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(.34,1.56,.64,1); }
.reveal-scale.visible { opacity:1; transform:scale(1); }

.delay-1 { transition-delay:0.1s !important; }
.delay-2 { transition-delay:0.2s !important; }
.delay-3 { transition-delay:0.3s !important; }
.delay-4 { transition-delay:0.4s !important; }
.delay-5 { transition-delay:0.5s !important; }
.delay-6 { transition-delay:0.6s !important; }

/* Hero entrance - runs on page load */
.hero-content { animation: heroEnter 1.2s cubic-bezier(.16,1,.3,1) 0.3s both; }
@keyframes heroEnter {
  from { opacity:0; transform:translateX(-30px); }
  to   { opacity:1; transform:translateX(0); }
}
.hero-dragon { animation: dragonEnter 1.4s cubic-bezier(.16,1,.3,1) 0.5s both; }
@keyframes dragonEnter {
  from { opacity:0; transform:translateX(40px); }
  to   { opacity:1; transform:translateX(0); }
}

/* Navbar entrance */
.navbar { animation: navDrop 0.8s cubic-bezier(.16,1,.3,1) 0.1s both; }
@keyframes navDrop {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Greeting text char-by-char */
.greeting { animation: greetFade 1s ease 0.8s both; }
@keyframes greetFade {
  from { opacity:0; letter-spacing:0.3em; }
  to   { opacity:1; letter-spacing:normal; }
}

/* Hero title lines stagger */
.hero-title { animation: titleReveal 1s cubic-bezier(.16,1,.3,1) 0.6s both; }
.bold-line  { animation: titleReveal 1s cubic-bezier(.16,1,.3,1) 0.75s both; }
@keyframes titleReveal {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Scroll down hint bounce */
.scroll-hint { animation: hintBounce 2s ease-in-out 2s infinite; }
@keyframes hintBounce {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(6px); }
}

/* Service cards - stagger + lift */
.service-card {
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, border-color 0.2s !important;
}
.service-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}
.service-card:hover .service-icon svg {
  transform: scale(1.15) rotate(-5deg);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.service-icon svg { transition: transform 0.3s ease; }

/* Stats counter pop */
.stat-num {
  display:inline-block;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), color 0.3s;
}
.stat-item:hover .stat-num { transform: scale(1.15); }

/* Stat item slide in */
.stat-item { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease; }
.stat-item.visible { opacity:1; transform:translateY(0); }

/* Section label pulse */
.section-label {
  animation: none;
  position:relative;
}
.section-label.visible::before {
  content:'';
  position:absolute; left:-16px; top:50%;
  transform:translateY(-50%);
  width:8px; height:1px;
  background:#c0392b;
  animation: labelLine 0.6s ease forwards;
}
@keyframes labelLine {
  from { width:0; }
  to   { width:8px; }
}

/* W-cards hover */
.w-card {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease !important;
}
.w-card:hover { transform:translateY(-6px) scale(1.01) !important; }

/* Skill bar items hover */
.sk-bar-item:hover .sk-bar-name { color:var(--black); transition:color 0.2s; }
.sk-bar-item:hover .sk-bar-fill { background:linear-gradient(to right,#111,#555); }

/* Skill category hover */
.sk-category {
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease !important;
}
.sk-category:hover { box-shadow:0 8px 32px rgba(0,0,0,0.07); }

/* Tags hover pop */
.sk-tags span {
  transition: border-color 0.2s, color 0.2s, transform 0.2s cubic-bezier(.34,1.56,.64,1) !important;
}
.sk-tags span:hover { transform:translateY(-3px) scale(1.05); }

/* Contact form field focus glow */
.ct-field input:focus, .ct-field textarea:focus {
  background: rgba(0,0,0,0.02) !important;
  transition: border-color 0.3s, background 0.3s !important;
}

/* Submit button hover */
.ct-submit {
  transition: opacity 0.2s, transform 0.2s cubic-bezier(.34,1.56,.64,1) !important;
}
.ct-submit:hover { transform:translateY(-2px) scale(1.02) !important; opacity:0.85 !important; }

/* Social buttons spin on hover */
.ct-social { transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important; }
.ct-social:hover { transform:rotate(8deg) scale(1.1) !important; }

/* Nav links underline slide */
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:2px; background:var(--black);
  transition:width 0.3s ease;
}
.nav-links a:hover::after { width:100%; }
.nav-links a.active::after { width:100%; }

/* Btn primary magnetic feel */
.btn-primary, .btn-secondary {
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), opacity 0.2s, background 0.2s, color 0.2s !important;
}
.btn-primary:hover  { transform:translateY(-3px) scale(1.03) !important; }
.btn-secondary:hover{ transform:translateY(-3px) scale(1.03) !important; }

/* Logo hover */
.nav-logo:hover .logo-icon svg { transform:rotate(-8deg) scale(1.1); transition:transform 0.3s cubic-bezier(.34,1.56,.64,1); }
.logo-icon svg { transition:transform 0.3s ease; }

/* W-filter tabs underline animate */
.w-tab { position:relative; overflow:hidden; }
.w-tab::after {
  content:''; position:absolute; bottom:0; left:50%;
  width:0; height:2px; background:var(--black);
  transform:translateX(-50%);
  transition:width 0.3s ease;
}
.w-tab:hover::after { width:80%; }
.w-tab.active::after { width:100%; }

/* CTA banner hover */
.w-cta { transition:box-shadow 0.3s ease; }
.w-cta:hover { box-shadow:0 12px 40px rgba(0,0,0,0.1); }

/* Kanji deco spin on hover */
.sk-kanji-deco { transition:transform 1.5s cubic-bezier(.16,1,.3,1), opacity 0.3s; }
.sk-hero-right:hover .sk-kanji-deco { transform:rotate(15deg) scale(1.05); }

/* Shuriken faster spin on hover */
.jp-shuriken:hover { animation-duration:2s !important; }

/* Red line pulse on scroll */
.jp-redline { transition:opacity 0.5s; }

/* Page transition - smooth scroll snap feel */
html { scroll-behavior:smooth; }
section { scroll-margin-top:64px; }

/* ── CIRCULAR SKILL CHARTS ── */
.sk-hero-right{ display:flex; align-items:flex-end; justify-content:center; border-left:1px solid var(--border); overflow:hidden; min-height:420px; }
.sk-circles{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; width:100%; max-width:400px; padding:20px; }
.sk-circle-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:1;  transition:opacity 0.5s ease, transform 0.5s cubic-bezier(.34,1.56,.64,1); }
.sk-circle-wrap.visible {
  opacity:1;
  transform:scale(1);
}
.sk-circle-svg {
  width:90px; height:90px;
  transform:rotate(-90deg);
}
.sk-circle-bg {
  fill:none;
  stroke:#f0f0f0;
  stroke-width:6;
}
.sk-circle-fill {
  fill:none;
  stroke:#111;
  stroke-width:6;
  stroke-linecap:round;
  transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1);
}
.sk-circle-label {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-58%);
  text-align:center;
  pointer-events:none;
}
.sk-circle-num {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.1rem;
  font-weight:800;
  color:var(--black);
  line-height:1;
}
.sk-circle-unit {
  font-family:'Barlow Condensed',sans-serif;
  font-size:0.6rem;
  font-weight:600;
  color:var(--muted);
}
.sk-circle-label p {
  font-family:'Barlow Condensed',sans-serif;
  font-size:0.58rem;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--muted);
  text-transform:uppercase;
  margin-top:6px;
  white-space:nowrap;
}

/* Hover effect on circles */
.sk-circle-wrap:hover .sk-circle-fill { stroke:#c0392b; }
.sk-circle-wrap:hover .sk-circle-num  { color:#c0392b; }
.sk-circle-wrap:hover { transform:scale(1.08) !important; }

/* Nth child delays */
.sk-circle-wrap:nth-child(1){ transition-delay:0.0s !important; }
.sk-circle-wrap:nth-child(2){ transition-delay:0.1s !important; }
.sk-circle-wrap:nth-child(3){ transition-delay:0.2s !important; }
.sk-circle-wrap:nth-child(4){ transition-delay:0.3s !important; }
.sk-circle-wrap:nth-child(5){ transition-delay:0.4s !important; }
.sk-circle-wrap:nth-child(6){ transition-delay:0.5s !important; }

@media(max-width:1024px){
  .sk-hero-right{ display:flex; align-items:flex-end; justify-content:center; border-left:1px solid var(--border); overflow:hidden; min-height:420px; }
}











/* SEE MORE BUTTON */
.w-seemore-wrap {
  display:flex;
  justify-content:center;
  padding:36px 0 12px;
}
.w-seemore-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 36px;
  border:1.5px solid var(--black);
  border-radius:3px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.15em;
  color:var(--black);
  text-decoration:none;
  background:transparent;
  transition:background 0.25s ease, color 0.25s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  overflow:hidden;
}
.w-seemore-btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--black);
  transform:translateY(100%);
  transition:transform 0.3s cubic-bezier(.16,1,.3,1);
  z-index:0;
}
.w-seemore-btn:hover::before { transform:translateY(0); }
.w-seemore-btn:hover { color:#fff; transform:translateY(-2px); }
.w-seemore-btn span, .w-seemore-btn svg {
  position:relative; z-index:1;
}
.w-seemore-btn svg { transition:transform 0.2s ease; }
.w-seemore-btn:hover svg { transform:translateX(4px); }




/* ── CURSOR ── */





/* CURSOR */
* { cursor: none !important; }
#cursor-ring { position:fixed; top:0; left:0; z-index:999999; width:32px; height:32px; border:2px solid #111; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); transition:width .2s, height .2s, border-color .2s; }
#cursor-ring.hover { width:50px; height:50px; border-color:#555; }
#cursor-dot-el { position:fixed; top:0; left:0; z-index:999999; width:6px; height:6px; background:#111; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); }


/* SKILLS BG VIDEO */
.sk-section { position: relative; overflow: hidden; }
.sk-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
.sk-hero, .sk-grid, .sk-tags { position: relative; z-index: 2; }
/* SKILLS HERO VIDEO */
.sk-section { position:relative; }
.sk-hero-right{ display:flex; align-items:flex-end; justify-content:center; border-left:1px solid var(--border); overflow:hidden; min-height:420px; }
.sk-hero-video{ width:100%; max-width:650px; height:auto; object-fit:contain; object-position:bottom center; filter:contrast(1.05); display:block; pointer-events:none; }
.sk-circles { display: none; }
.sk-circles { display: none; }


/* SEE ALL PROJECTS LINK */
.sk-seeall-wrap { display:flex; justify-content:center; padding:24px 80px 0; }
.sk-seeall-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 32px; border:1.5px solid var(--black);
  font-family:'Barlow Condensed',sans-serif; font-size:0.8rem;
  font-weight:700; letter-spacing:0.15em; color:var(--black);
  text-decoration:none; border-radius:3px; position:relative; overflow:hidden;
  transition:color .25s ease;
}
.sk-seeall-btn::before {
  content:''; position:absolute; inset:0;
  background:var(--black); transform:translateY(100%);
  transition:transform .3s cubic-bezier(.16,1,.3,1); z-index:0;
}
.sk-seeall-btn:hover { color:#fff; }
.sk-seeall-btn:hover::before { transform:translateY(0); }
.sk-seeall-btn span, .sk-seeall-btn svg { position:relative; z-index:1; }
.sk-seeall-btn svg { transition:transform .2s ease; }
.sk-seeall-btn:hover svg { transform:translateX(4px); }
/* PIE CHART COLUMN */
.sk-pie-col{ display:flex; flex-direction:row; align-items:center; gap:16px; margin-top:24px; }
.sk-pie-svg{ width:120px; height:120px; transform:rotate(-90deg); flex-shrink:0; }
.sk-pie-legend { display:flex; flex-direction:column; gap:8px; }
.sk-pie-item { display:flex; align-items:center; gap:8px; font-family:'Barlow Condensed',sans-serif; font-size:0.72rem; letter-spacing:0.06em; color:#555; }
.sk-pie-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* SKILL BARS - thick black */
.sk-bar-item { display:flex; align-items:center; gap:10px; }
.sk-bar-name { font-size:.72rem; color:var(--muted); min-width:110px; letter-spacing:.04em; }
.sk-bar-track { flex:1; height:6px; background:#e8e8e8; position:relative; border-radius:3px; overflow:hidden; }
.sk-bar-fill { position:absolute; left:0; top:0; height:100%; width:0; background:#111; border-radius:3px; transition:width 1.4s cubic-bezier(.16,1,.3,1); }
.sk-category.visible .sk-bar-fill { width:var(--w); }
.sk-bar-pct { font-family:'Barlow Condensed',sans-serif; font-size:.65rem; color:#888; font-weight:600; min-width:24px; text-align:right; }
/* SERVICES BG VIDEO */
.services-bg-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0.2; pointer-events:none; z-index:0;
}

/* VIEW MORE BUTTON */
.card-viewmore {
  background:none; border:1px solid #111; color:#111;
  font-family:'Barlow Condensed',sans-serif; font-size:0.65rem;
  font-weight:700; letter-spacing:0.12em; padding:5px 12px;
  cursor:pointer; transition:background .2s, color .2s;
  border-radius:2px;
}
.card-viewmore:hover { background:#111; color:#fff; }

/* SERVICE MODAL */
.svc-modal-overlay {
  position:fixed; inset:0; z-index:99990;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.svc-modal-overlay.open { opacity:1; pointer-events:all; }
.svc-modal {
  background:#fff; border:1px solid #e0e0e0; border-radius:8px;
  padding:48px 52px; max-width:540px; width:90%;
  position:relative; transform:translateY(24px);
  transition:transform 0.35s cubic-bezier(.16,1,.3,1);
  box-shadow:0 24px 60px rgba(0,0,0,0.12);
}
.svc-modal-overlay.open .svc-modal { transform:translateY(0); }
.svc-modal-close {
  position:absolute; top:16px; right:20px;
  background:none; border:none; font-size:1.5rem; cursor:pointer;
  color:#888; line-height:1; transition:color .2s;
}
.svc-modal-close:hover { color:#111; }
.svc-modal-icon { font-size:3.5rem; margin-bottom:16px; line-height:1; font-family:initial; }
.svc-modal-title {
  font-family:'Barlow Condensed',sans-serif; font-size:1.8rem;
  font-weight:900; letter-spacing:0.04em; color:#111; margin-bottom:12px;
}
.svc-modal-divider { width:32px; height:2px; background:#111; margin-bottom:16px; }
.svc-modal-desc { font-size:0.88rem; font-weight:300; line-height:1.8; color:#555; margin-bottom:20px; }
.svc-modal-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.svc-modal-list li {
  font-family:'Barlow Condensed',sans-serif; font-size:0.8rem;
  letter-spacing:0.06em; color:#333; padding-left:14px; position:relative;
}
.svc-modal-list li::before { content:"—"; position:absolute; left:0; color:#aaa; }
/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f9f9f7; }
::-webkit-scrollbar-thumb { background: #111; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444; }
* { scrollbar-width: thin; scrollbar-color: #111 #f9f9f7; }
/* Card meta as full-width link feel */
.w-meta {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-top:1px solid var(--border);
  background:var(--white);
  transition:background 0.2s;
}
.w-card:hover .w-meta { background:#f9f9f7; }

/* Visit button - text link style */
.w-card-visit {
  display:inline-flex; align-items:center; gap:5px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:0.7rem; font-weight:700; letter-spacing:0.12em;
  color:var(--black); text-decoration:none;
  border-bottom:1px solid var(--black);
  padding-bottom:1px;
  transition:opacity 0.2s;
}
.w-card-visit:hover { opacity:0.6; }
.sk-grid { display: grid !important; opacity: 1 !important; visibility: visible !important; }
.sk-category { opacity: 1 !important; visibility: visible !important; display: block !important; }
/* WORK TECH TAGS */
.w-tech-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 80px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.w-tech-tags span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--muted); border: 1px solid var(--border);
  padding: 4px 12px; border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
  cursor: default;
}
.w-tech-tags span:hover { border-color: var(--black); color: var(--black); }
/* W-HERO TAGS */
.w-hero-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 20px;
}
.w-hero-tags span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--muted); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.w-hero-tags span:hover { border-color: var(--black); color: var(--black); }
/* WORK HERO TAGS */
.w-hero-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 16px;
}
.w-hero-tags span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--muted); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.w-hero-tags span:hover { border-color: var(--black); color: var(--black); }