:root{font-family:Inter,Arial,sans-serif;color:#050505;background:#fff;font-synthesis:none;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.site-shell{width:min(100% - 10.4%,1600px);margin:auto}.header{height:50px;display:grid;grid-template-columns: 22% 44% 10.5% 23.5%;align-items:stretch;border-bottom:1px solid #bdbdbd;font-size:11px}.identity,.desktop-nav,.language,.header-cta{display:flex;align-items:center}.identity{white-space:nowrap;border-right:1px solid #bbb}.identity span{color:#8b8b8b}.desktop-nav{justify-content:space-around}.desktop-nav a{height:100%;display:grid;place-items:center;position:relative;padding:0 10px}.desktop-nav a:hover:after,.desktop-nav a.is-current:after{content:"";height:3px;background:#050505;position:absolute;bottom:0;left:25%;right:25%}.language{justify-content:center;gap:3px;border-right:1px solid #bbb}.language button{border:0;background:transparent;color:#777;padding:5px 0}.language button[aria-pressed=true]{color:#050505;font-weight:600}.header-cta{justify-content:center;gap:12px;white-space:nowrap;font-weight:500}.telegram-icon{display:grid;place-items:center;border-radius:50%;width:19px;height:19px;background:#000;color:white;font-size:10px;transform:rotate(-28deg)}.menu-button,.mobile-menu{display:none}.hero{padding-top:33px}.section-label{font-size:11px;letter-spacing:.07em;color:#999}.hero-main{display:grid;grid-template-columns:minmax(0,1fr) 147px;gap:25px;margin-top:13px;min-height:260px;align-items:start}h1{font-size:clamp(60px,9.05vw,160px);font-weight:650;letter-spacing:-.065em;line-height:.94;margin:0;white-space:nowrap}h1 span{display:block}.hero-services{font-size:17px;line-height:1.18;display:flex;flex-direction:column;padding-top:8px;letter-spacing:-.055em}.asterisks{margin-top:58px}.section-rule{height:2px;background:#c3c3c3;position:relative}.section-rule span{position:absolute;left:0;top:0;height:3px;background:#090909;width:15.5%}.hero-meta{display:grid;grid-template-columns:30% 1fr 15%;align-items:start;gap:10px;min-height:169px;padding:64px 0 48px}.experience{display:flex;align-items:center;gap:14px}.experience strong{font-size:46px;font-weight:600;letter-spacing:-.08em;line-height:.95}.experience span,.hero-meta p,.availability{font-size:16px;line-height:1.15;letter-spacing:-.035em}.hero-meta p{margin:0;max-width:550px}.availability{display:flex;align-items:start;justify-content:flex-end;gap:14px}.status-light{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#e6ffad,#96e43e 48%,#60bd29 70%,#418b20);box-shadow:0 3px 11px #8eb47e;flex:none}.work-intro{border-top:1px solid #bfbfbf;display:grid;grid-template-columns:30% 35% 35%;min-height:440px}.work-intro-left{position:relative;padding-top:33px}.work-intro-left h2{font-size:16px;font-weight:450;letter-spacing:-.04em;margin:156px 0 0}.tags{position:absolute;bottom:18px;left:0;width:260px;height:80px}.tags span{border:1px solid #202020;border-radius:30px;padding:6px 14px;font-size:10px;background:white;position:absolute;transform:rotate(-10deg)}.tags span:nth-child(1){top:7px;left:0}.tags span:nth-child(2){top:0;left:90px}.tags span:nth-child(3){top:35px;left:4px;transform:rotate(4deg)}.tags span:nth-child(4){top:35px;left:86px;transform:rotate(15deg)}.tags span:nth-child(5){top:21px;left:145px;transform:rotate(10deg)}.tags span:nth-child(6){top:49px;left:163px;transform:rotate(-18deg)}.portrait-placeholder{background:#0b0b0b;min-height:440px;display:grid;place-items:center;overflow:hidden}.placeholder-mark{color:#fff;text-align:center;font-size:clamp(27px,4vw,60px);line-height:1;letter-spacing:-.055em;font-weight:800;opacity:.75}.work-intro-right{display:flex;align-items:center;justify-content:flex-end}.work-intro-right p{max-width:270px;margin:0;font-size:17px;line-height:1.22;letter-spacing:-.045em}.future-section{border-top:1px solid #bbb;min-height:250px;padding:30px 0}.future-section h2{font-size:clamp(48px,8vw,100px);line-height:1;letter-spacing:-.07em;margin:40px 0 15px}.future-section p{color:#777}footer{border-top:1px solid #bbb;display:flex;justify-content:space-between;padding:25px 0 40px;font-size:12px}@media(max-width:1200px){.site-shell{width:calc(100% - 7%)}.hero-main{grid-template-columns:minmax(0,1fr) 135px}h1{font-size:clamp(51px,8.6vw,112px)}.hero-services{font-size:15px}.hero-meta p{font-size:14px}.experience span,.availability{font-size:13px}}@media(max-width:760px){.site-shell{width:calc(100% - 36px)}.header{grid-template-columns:1fr auto auto;height:58px}.identity{border:0;font-size:11px}.desktop-nav,.header-cta{display:none}.language{border:0;padding-right:20px}.menu-button{width:30px;display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;border:0;background:transparent}.menu-button span{height:2px;width:24px;background:#000}.mobile-menu:not([hidden]){display:flex;flex-direction:column;padding:20px 0;border-bottom:1px solid #ddd;gap:18px;font-size:25px}.hero{padding-top:29px}.hero-main{display:flex;flex-direction:column;gap:30px;min-height:0;margin:22px 0 32px}h1{font-size:clamp(33px,8.6vw,68px);line-height:1.04;letter-spacing:-.065em}.hero-services{display:grid;grid-template-columns:repeat(2,max-content);column-gap:24px;font-size:14px;line-height:1.4;padding:0}.asterisks{margin:0}.hero-meta{grid-template-columns:1fr 1fr;gap:24px;padding:35px 0;min-height:0}.experience strong{font-size:40px}.experience span,.availability{font-size:12px}.hero-meta p{grid-column:1/-1;grid-row:2;font-size:14px}.availability{align-items:center;justify-content:flex-end}.status-light{width:15px;height:15px}.work-intro{display:flex;flex-direction:column}.work-intro-left{min-height:245px}.work-intro-left h2{margin:70px 0 0}.tags{bottom:12px}.portrait-placeholder{min-height:410px}.work-intro-right{justify-content:flex-start;padding:35px 0 60px}.work-intro-right p{max-width:360px}.future-section{min-height:220px}}@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}

/* The portrait is driven by scroll position, not by video playback. */
.portrait-scroll{background:#0b0b0b;min-height:440px;position:relative;overflow:hidden;aspect-ratio:1/1}
.portrait-video{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;pointer-events:none}
@media(max-width:760px){.portrait-scroll{min-height:0;width:100%;aspect-ratio:1/1}}

/* Screen 01 + 02 motion system */
.header > .identity,.header .desktop-nav > *, .header .language,.header .header-cta,.header .menu-button,
.section-label,.hero-services > span,.experience,.hero-meta p,.availability,.work-intro-left h2,.tags > span,.work-intro-right p {
  animation: enter-up .65s both cubic-bezier(.21,.75,.2,1);
}
@keyframes enter-up {from {opacity:0; transform:translateY(14px)} to {opacity:1;transform:translateY(0)}}
.header > .identity{animation-delay:.05s}.header .desktop-nav > :nth-child(1){animation-delay:.12s}.header .desktop-nav > :nth-child(2){animation-delay:.2s}.header .desktop-nav > :nth-child(3){animation-delay:.28s}.header .desktop-nav > :nth-child(4){animation-delay:.36s}.header .desktop-nav > :nth-child(5){animation-delay:.44s}.header .language{animation-delay:.52s}.header .header-cta{animation-delay:.6s}.header .menu-button{animation-delay:.2s}
.hero .section-label{animation-delay:.6s}.hero-services > span:nth-child(1){animation-delay:.76s}.hero-services > span:nth-child(2){animation-delay:.82s}.hero-services > span:nth-child(3){animation-delay:.88s}.hero-services > span:nth-child(4){animation-delay:.94s}.hero-services > span:nth-child(5){animation-delay:1s}.hero-services > span:nth-child(6){animation-delay:1.06s}.hero-services > span:nth-child(7){animation-delay:1.12s}.hero-services > span:nth-child(8){animation-delay:1.18s}
.hero .experience{animation-delay:1.08s}.hero .hero-meta p{animation-delay:1.2s}.hero .availability{animation-delay:1.34s}
.section-rule{background:transparent;position:relative}
.section-rule::before{content:"";background:#c3c3c3;position:absolute;inset:0;transform-origin:left;animation:draw-line 1s .85s both cubic-bezier(.16,1,.3,1)}
.section-rule span{z-index:1;transform-origin:left;animation:draw-line .65s 1.4s both cubic-bezier(.16,1,.3,1)}
@keyframes draw-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.work-intro{position:relative;border:0}
.work-intro::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#bfbfbf;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.work-intro.is-visible::before{transform:scaleX(1)}
.work-intro .section-label,.work-intro-left h2,.work-intro .tags > span,.work-intro-right p{animation:none;opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.work-intro.is-visible .section-label,.work-intro.is-visible .work-intro-left h2,.work-intro.is-visible .tags > span,.work-intro.is-visible .work-intro-right p{opacity:1;transform:translateY(0)}
.work-intro.is-visible .section-label{transition-delay:.12s}.work-intro.is-visible .work-intro-left h2{transition-delay:.25s}.work-intro.is-visible .tags > span{transition-delay:.4s}.work-intro.is-visible .work-intro-right p{transition-delay:.42s}
/* Keep the original angled tag placement; transition opacity only. */
.work-intro .tags > span{transition-property:opacity;opacity:0;transform:rotate(-10deg)}
.work-intro .tags > span:nth-child(3){transform:rotate(4deg)}.work-intro .tags > span:nth-child(4){transform:rotate(15deg)}.work-intro .tags > span:nth-child(5){transform:rotate(10deg)}.work-intro .tags > span:nth-child(6){transform:rotate(-18deg)}
.scramble-title{letter-spacing:-.065em}
.scramble-line{display:block;white-space:nowrap;font-variant-numeric:tabular-nums;min-height:.94em;text-transform:uppercase}
.nav-future{display:grid;place-items:center;padding:0 10px;cursor:default}
@media (prefers-reduced-motion:reduce){.header > .identity,.header .desktop-nav > *,.header .language,.header .header-cta,.header .menu-button,.section-label,.hero-services > span,.experience,.hero-meta p,.availability,.work-intro-left h2,.tags > span,.work-intro-right p{animation:none!important;opacity:1!important}.section-rule::before,.section-rule span{animation:none}.work-intro::before{transform:scaleX(1)}.work-intro .section-label,.work-intro-left h2,.work-intro .tags > span,.work-intro-right p{opacity:1!important;transition:none!important}}

/* v5 — headline progress bar, restrained availability glow, falling service capsules */
.hero-main{margin-bottom:34px}
.section-rule{margin-top:25px}
.section-rule span{width:33.333%;left:0;transition:left .85s cubic-bezier(.22,1,.36,1);will-change:left}
.section-rule[data-slide="1"] span{left:33.333%}
.section-rule[data-slide="2"] span{left:66.667%}
.status-light{animation:status-breathe 3.8s ease-in-out infinite;will-change:filter,box-shadow}
@keyframes status-breathe{
  0%,100%{filter:brightness(.98);box-shadow:0 2px 7px rgba(90,160,45,.26)}
  50%{filter:brightness(1.13);box-shadow:0 2px 15px rgba(122,224,50,.43),0 0 5px rgba(122,224,50,.14)}
}
/* Capsules retain their original exact position and individual angle. */
.work-intro .tags > span{animation:none;transition:none;opacity:0;transform:translate3d(0,-165px,0) rotate(var(--tag-angle,-10deg)) scale(.94);will-change:transform,opacity}
.work-intro .tags > span:nth-child(1){--tag-angle:-10deg}
.work-intro .tags > span:nth-child(2){--tag-angle:-10deg}
.work-intro .tags > span:nth-child(3){--tag-angle:4deg}
.work-intro .tags > span:nth-child(4){--tag-angle:15deg}
.work-intro .tags > span:nth-child(5){--tag-angle:10deg}
.work-intro .tags > span:nth-child(6){--tag-angle:-18deg}
.work-intro.is-visible .tags > span{opacity:1;transform:translate3d(0,0,0) rotate(var(--tag-angle,-10deg)) scale(1);transition:transform 950ms cubic-bezier(.2,1.13,.26,1),opacity 210ms ease;transition-delay:var(--tag-delay,0ms)}
.work-intro .tags > span:nth-child(1){--tag-delay:390ms}
.work-intro .tags > span:nth-child(2){--tag-delay:520ms}
.work-intro .tags > span:nth-child(3){--tag-delay:650ms}
.work-intro .tags > span:nth-child(4){--tag-delay:780ms}
.work-intro .tags > span:nth-child(5){--tag-delay:910ms}
.work-intro .tags > span:nth-child(6){--tag-delay:1040ms}
@media(max-width:760px){.hero-main{margin-bottom:30px}.section-rule{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.status-light{animation:none}.section-rule span{transition:none}.work-intro .tags > span,.work-intro.is-visible .tags > span{transition:none!important;opacity:1!important;transform:rotate(var(--tag-angle,-10deg))!important}}


/* v6 — Selected work grid: alternating 8/4, 6/6 and 4/8 columns. */
.projects{padding:56px 0 90px}
.projects-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.project-card{background:#252525;position:relative;min-width:0;height:clamp(260px,26vw,390px);overflow:hidden}
.project-card--wide{grid-column:span 8}
.project-card--narrow{grid-column:span 4}
.project-card--half{grid-column:span 6}
.project-number{position:absolute;top:23px;left:25px;font-size:15px;font-weight:500;color:#fff;line-height:1;letter-spacing:-.02em}
@media(max-width:760px){
 .projects{padding:30px 0 60px}
 .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .project-card--wide,.project-card--narrow,.project-card--half{grid-column:span 1}
 .project-card{height:clamp(170px,35vw,280px)}
 .project-number{top:16px;left:16px;font-size:13px}
}
@media(max-width:480px){
 .projects-grid{grid-template-columns:1fr}
 .project-card--wide,.project-card--narrow,.project-card--half{grid-column:1}
 .project-card{height:230px}
}

/* Four headline states: moving underline follows the active slogan. */
.section-rule span{width:25%}
.section-rule[data-slide="1"] span{left:25%}
.section-rule[data-slide="2"] span{left:50%}
.section-rule[data-slide="3"] span{left:75%}

/* Service capsules fall in sequence once the capsule group itself is visible. */
.work-intro .tags > span,
.work-intro.is-visible .tags > span {
  opacity:0;
  transform:translate3d(0,-55vh,0) rotate(var(--tag-angle,-10deg)) scale(.96);
  transition:none;
  animation:none;
  will-change:transform,opacity;
}
.work-intro .tags.is-dropping > span,
.work-intro.is-visible .tags.is-dropping > span {
  animation:service-pill-drop 1050ms cubic-bezier(.2,.82,.28,1) both;
  animation-delay:var(--tag-drop-delay,0ms);
}
.work-intro .tags > span:nth-child(1){--tag-drop-delay:0ms}
.work-intro .tags > span:nth-child(2){--tag-drop-delay:150ms}
.work-intro .tags > span:nth-child(3){--tag-drop-delay:300ms}
.work-intro .tags > span:nth-child(4){--tag-drop-delay:450ms}
.work-intro .tags > span:nth-child(5){--tag-drop-delay:600ms}
.work-intro .tags > span:nth-child(6){--tag-drop-delay:750ms}
@keyframes service-pill-drop {
  0%{opacity:0;transform:translate3d(0,-55vh,0) rotate(calc(var(--tag-angle,-10deg) - 15deg)) scale(.92)}
  20%{opacity:1}
  69%{transform:translate3d(0,12px,0) rotate(calc(var(--tag-angle,-10deg) + 3deg)) scale(1.02)}
  84%{transform:translate3d(0,-6px,0) rotate(calc(var(--tag-angle,-10deg) - 1deg)) scale(1)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(var(--tag-angle,-10deg)) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .work-intro .tags > span,.work-intro.is-visible .tags > span,
  .work-intro .tags.is-dropping > span,.work-intro.is-visible .tags.is-dropping > span{
    animation:none!important;opacity:1!important;transform:rotate(var(--tag-angle,-10deg))!important;
  }
}

/* v10 — service pills are twice as large and meet edge-to-edge as one cluster. */
.work-intro-left .tags {
  width: 440px;
  height: 160px;
  bottom: 18px;
  z-index: 2;
}
.work-intro-left .tags > span {
  font-size: 20px;
  line-height: 1;
  padding: 12px 28px;
  border-width: 1px;
  white-space: nowrap;
  transform-origin: center;
}
.work-intro-left .tags > span:nth-child(1) { top: 14px; left: 0; }
.work-intro-left .tags > span:nth-child(2) { top: 0; left: 150px; }
.work-intro-left .tags > span:nth-child(3) { top: 68px; left: 0; }
.work-intro-left .tags > span:nth-child(4) { top: 68px; left: 128px; }
.work-intro-left .tags > span:nth-child(5) { top: 42px; left: 258px; }
.work-intro-left .tags > span:nth-child(6) { top: 98px; left: 244px; }
@media(max-width:760px) {
  .work-intro-left { min-height: 340px; }
  .work-intro-left .tags { width: min(440px, calc(100vw - 36px)); height: 160px; bottom: 12px; transform: scale(.82); transform-origin: left bottom; }
  .work-intro-left .tags > span { font-size: 20px; }
}
@media(max-width:390px) {
  .work-intro-left .tags { transform: scale(.7); }
}

/* v11 — tactile navigation, typewriter section markers, experience counter */
.section-label{animation:none!important;opacity:1;min-height:1.2em;white-space:nowrap}
.section-label.is-typing::after{content:'▍';display:inline-block;margin-left:2px;color:#111;animation:type-caret .7s steps(2,end) infinite}
@keyframes type-caret{50%{opacity:0}}
.desktop-nav a,.desktop-nav .nav-future{position:relative;transition:color .22s ease,background-color .22s ease}
.desktop-nav a::after,.desktop-nav .nav-future::after{content:"";position:absolute;height:2px;background:#050505;left:12px;right:12px;bottom:0;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.desktop-nav a:hover,.desktop-nav .nav-future:hover{color:#000;background:#f5f5f5}
.desktop-nav a:hover::after,.desktop-nav a.is-current::after,.desktop-nav .nav-future:hover::after{transform:scaleX(1)}
.desktop-nav a.is-current{font-weight:650}
.desktop-nav .nav-future{color:#888;cursor:default}
.desktop-nav .nav-future:hover{color:#050505}
.language button{transition:color .2s ease,opacity .2s ease}
.language button:hover{color:#050505;opacity:.7}
.header-cta{transition:background-color .2s ease,opacity .2s ease}
.header-cta:hover{background:#f4f4f4}
.header-cta:hover .telegram-icon{transform:rotate(-28deg) scale(1.08);transition:transform .2s ease}
.experience strong{font-variant-numeric:tabular-nums;min-width:2ch}
@media(prefers-reduced-motion:reduce){.section-label.is-typing::after{display:none}.desktop-nav a,.desktop-nav .nav-future,.language button,.header-cta{transition:none}}

/* v12: one consistent underline interaction for every desktop navigation item. */
.desktop-nav a,
.desktop-nav .nav-future {
  background: transparent !important;
  color: inherit;
  font-weight: inherit;
  transition: color .2s ease;
}
.desktop-nav a:hover,
.desktop-nav .nav-future:hover {
  background: transparent !important;
  color: #050505;
}
.desktop-nav a::after,
.desktop-nav .nav-future::after {
  content: "";
  position: absolute;
  height: 3px;
  background: #050505;
  left: 25%;
  right: 25%;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a.is-current::after,
.desktop-nav .nav-future:hover::after {
  transform: scaleX(1);
}
.desktop-nav a.is-current {
  font-weight: inherit;
}

/* v13: every navigation item uses the same full-height underline baseline. */
.desktop-nav > a, .desktop-nav > .nav-future {
  height:100%; min-height:100%; align-self:stretch;
  display:grid; place-items:center; position:relative; padding:0 10px;
}
.desktop-nav > a::after, .desktop-nav > .nav-future::after {
  top:auto; bottom:0; left:25%; right:25%; height:3px;
}

/* v14: full-area inverted Telegram CTA on hover and keyboard focus */
.header-cta{transition:background-color .25s ease,color .25s ease}
.header-cta:hover,.header-cta:focus-visible{background:#000;color:#fff;opacity:1}
.header-cta .telegram-icon{transition:background-color .25s ease,color .25s ease,transform .25s ease}
.header-cta:hover .telegram-icon,.header-cta:focus-visible .telegram-icon{background:#fff;color:#000}
@media(prefers-reduced-motion:reduce){.header-cta,.header-cta .telegram-icon{transition:none}}

/* Services */
.services-section{padding:36px 0 80px}.services-heading{display:grid;grid-template-columns:10% 1fr auto;align-items:center;padding:0 0 24px}.services-heading .section-label,.services-heading h2,.services-kicker{font-size:15px;line-height:1.2;letter-spacing:-.035em;font-weight:650;color:#080808;margin:0}.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #c5c5c5;border-bottom:1px solid #c5c5c5}.service-item{padding:32px 28px 30px 0;min-height:390px;display:flex;flex-direction:column}.service-item+.service-item{border-left:1px solid #c5c5c5;padding-left:28px}.service-index{font-size:clamp(44px,4.4vw,76px);font-weight:400;line-height:1;letter-spacing:-.065em}.service-item h3{font-size:clamp(28px,3vw,51px);font-weight:450;line-height:1;letter-spacing:-.065em;margin:6px 0 32px}.service-item p{font-size:clamp(13px,1.25vw,20px);line-height:1.15;letter-spacing:-.045em;margin:0 0 35px}.service-arrow{font-size:33px;line-height:1;margin-top:auto;font-weight:300}@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-item{min-height:360px;padding:25px!important}.service-item:nth-child(odd){border-left:0}.service-item:nth-child(even){border-left:1px solid #c5c5c5}.service-item:nth-child(n+3){border-top:1px solid #c5c5c5}.service-item h3{font-size:clamp(32px,5vw,50px)}}@media(max-width:480px){.services-section{padding:30px 0 60px}.services-heading{grid-template-columns:50px 1fr auto}.services-heading .section-label,.services-heading h2,.services-kicker{font-size:11px}.services-grid{grid-template-columns:1fr}.service-item,.service-item:nth-child(even){border-left:0;padding:25px 0!important;min-height:300px}.service-item:nth-child(n+2){border-top:1px solid #c5c5c5}.service-item h3{font-size:42px}.service-item p{font-size:16px}}

/* v16 */
.services-heading{grid-template-columns:1fr auto}
.services-heading .services-label{font-size:11px;font-weight:400;letter-spacing:.07em;color:#999}
.services-item{transition:background-color .25s ease,color .25s ease}
.service-item{transition:background-color .25s ease,color .25s ease}
.service-item:hover{background:#050505;color:#fff}
.service-item:hover h3,.service-item:hover p,.service-item:hover .service-index{color:#fff}
.service-item{padding-left:20px!important;padding-right:20px!important}
.all-works-link{display:flex;align-items:center;justify-content:center;gap:22px;min-height:72px;margin-top:22px;border:1px solid #050505;font-size:16px;font-weight:600;transition:background .25s,color .25s}
.all-works-link:hover,.all-works-link:focus-visible{background:#050505;color:#fff}
.all-works-link span{font-size:22px}
@media(max-width:480px){.services-heading{grid-template-columns:1fr auto}.service-item{padding:25px 16px!important}.all-works-link{min-height:64px}}

/* Screens 04 / 05 */
.about-detail{padding:40px 0 72px}
.editorial-label{font-size:11px;letter-spacing:.07em;color:#999;padding-bottom:24px}
.about-detail-grid{display:grid;grid-template-columns:34% minmax(0,1fr);gap:26px;border-top:1px solid #c5c5c5;padding-top:28px}
.about-photo{aspect-ratio:1/1.06;background:#999;overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block}
.about-copy{position:relative;display:flex;flex-direction:column;padding:0 0 0 0}
.more-about{align-self:flex-end;font-size:12px;font-weight:650;letter-spacing:-.03em}
.about-copy h2{font-size:clamp(48px,5.4vw,94px);font-weight:550;line-height:.91;letter-spacing:-.075em;margin:4px 0 34px}
.about-copy h2 span{font-weight:350}
.about-copy p{font-size:clamp(16px,1.45vw,23px);letter-spacing:-.045em;line-height:1.15;max-width:650px;margin:0 0 22px}
.about-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:auto;border-top:1px solid #c5c5c5}
.about-stats>div{padding:23px 14px 8px 0;min-width:0}
.about-stats>div+div{border-left:1px solid #c5c5c5;padding-left:18px}
.about-stats strong{display:block;font-size:clamp(20px,2vw,34px);font-weight:550;letter-spacing:-.065em;white-space:nowrap}
.about-stats small{display:block;font-size:clamp(9px,.75vw,12px);line-height:1.2;font-weight:650;margin-top:8px}
.contact-section{position:relative;color:#fff;background:#050505;margin:0 calc((100vw - 100%)/-2);padding:0 calc((100vw - 100%)/2);isolation:isolate}
.riso-transition{position:absolute;left:0;right:0;bottom:100%;height:180px;pointer-events:none;overflow:hidden}
.riso-transition i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);background:#050505;transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--delay) steps(7,end);clip-path:polygon(0 8%,95% 0,100% 35%,94% 54%,100% 92%,0 100%,3% 63%)}
.contact-section.riso-active .riso-transition i{transform:scaleX(1)}
.contact-inner{position:relative;z-index:1;padding:30px 0 34px}
.contact-inner .editorial-label{color:#b5b5b5}
.contact-main{display:grid;grid-template-columns:2fr 1fr;gap:35px;align-items:center;padding:30px 0 70px}
.contact-main h2{font-size:clamp(46px,6.3vw,112px);font-weight:450;letter-spacing:-.075em;line-height:.94;margin:0}
.contact-intro p{font-size:clamp(15px,1.35vw,21px);line-height:1.2;letter-spacing:-.04em;margin:0 0 35px}
.contact-intro a{display:inline-block;font-size:14px;font-weight:650;border-bottom:1px solid #fff;padding-bottom:6px}
.contact-footer{border-top:1px solid #666;padding-top:25px;display:flex;justify-content:space-between;align-items:end;gap:20px;font-size:12px;font-weight:600}
.contact-footer>span{text-align:right}.social-placeholders{display:flex;gap:30px;color:#ccc}
@media(max-width:850px){.about-detail-grid{grid-template-columns:1fr 1.2fr}.about-stats{grid-template-columns:repeat(2,1fr)}.about-stats>div:nth-child(3){border-left:0}.about-stats>div:nth-child(n+3){border-top:1px solid #c5c5c5}.about-copy h2{font-size:clamp(38px,6vw,70px)}}
@media(max-width:600px){.about-detail-grid{grid-template-columns:1fr}.about-photo{aspect-ratio:1}.about-copy h2{font-size:clamp(49px,11vw,70px);margin:25px 0}.more-about{margin-top:12px}.about-stats{margin-top:28px}.contact-main{grid-template-columns:1fr;padding:25px 0 55px}.contact-main h2{font-size:clamp(45px,10vw,70px)}.contact-footer{flex-direction:column;align-items:flex-start}.contact-footer>span{text-align:left}.social-placeholders{flex-wrap:wrap;gap:18px}.riso-transition{height:100px}}
@media(prefers-reduced-motion:reduce){.riso-transition i{transition:none;transform:scaleX(1)}}

/* v18: immediate clean transition, edge-to-edge black contact panel */
.contact-section{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0;background:#050505;color:#fff;width:100vw;max-width:none}
.contact-inner{width:min(89.6%,1600px);margin:0 auto}
.riso-transition{display:none!important}
@media(max-width:1200px){.contact-inner{width:93%}}
@media(max-width:760px){.contact-inner{width:calc(100% - 36px)}}

/* v19 — full viewport contact screen with a centered square video stage */
.contact-section{min-height:100vh;min-height:100svh;display:flex;align-items:stretch;overflow:hidden}
.contact-inner{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;position:relative;padding:30px 0 34px}
.contact-main{flex:1;position:relative;z-index:2;align-items:center;padding:36px 0}
.contact-footer{position:relative;z-index:2}
.contact-inner>.editorial-label{position:relative;z-index:2}
.contact-video-placeholder{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(42vw,56vh,600px);aspect-ratio:1/1;
  background:#050505;border:1px solid #242424;
  pointer-events:none;z-index:1;
}
@media(max-width:600px){
 .contact-section,.contact-inner{min-height:100svh}
 .contact-video-placeholder{width:min(78vw,42vh)}
 .contact-main{align-content:center;align-items:center;gap:45px}
}

/* v20: square decorative video in contact section */
.contact-video-placeholder{border:0;overflow:hidden}
.contact-decorative-video{display:block;width:100%;height:100%;object-fit:cover;background:#050505;pointer-events:none}

/* v21: prevent viewport-width overflow and native smooth-scroll conflicts */
html{scroll-behavior:auto;overflow-x:clip}
body{overflow-x:clip}
.contact-section{width:100%;margin-left:0;margin-right:0;overflow:clip;min-height:100svh}
.contact-decorative-video{transform:translateZ(0);backface-visibility:hidden}
.contact-section{width:100vw;position:relative;left:50%;margin-left:-50vw;margin-right:0}

/* v22 — centered About composition */
.about-detail{padding-bottom:90px}
.about-detail-grid{display:block;padding-top:54px}
.about-copy{display:flex;align-items:center;text-align:center;max-width:1280px;margin:0 auto}
.about-copy .more-about{align-self:flex-end}
.about-copy h2{font-weight:500;font-size:clamp(54px,7vw,120px);line-height:1.02;letter-spacing:-.075em;margin:35px auto 38px;max-width:100%}
.about-copy p{font-size:clamp(17px,1.55vw,25px);line-height:1.25;max-width:790px;margin:0 auto 25px;text-align:center}
.about-stats{width:100%;margin-top:70px;text-align:left}
.about-stats>div{padding:30px 20px 25px 0}
.about-stats>div+div{padding-left:25px}
.about-stats strong{font-size:clamp(30px,3vw,52px);line-height:1.05}
.about-stats small{font-size:clamp(10px,.85vw,14px);margin-top:12px}
@media(max-width:850px){.about-detail-grid{display:block}.about-copy h2{font-size:clamp(45px,8vw,75px)}.about-stats{margin-top:45px}}
@media(max-width:600px){.about-detail-grid{padding-top:25px}.about-copy h2{font-size:clamp(43px,11vw,64px);margin:45px 0 30px}.about-copy p{font-size:17px}.about-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.about-stats>div{padding:22px 12px!important}.about-stats>div:nth-child(odd){border-left:0}.about-stats>div:nth-child(even){border-left:1px solid #c5c5c5}.about-stats strong{font-size:clamp(26px,7vw,40px)}}

/* v24 — fixed two-line cipher reveal on services titles */
.service-title-line{display:block;white-space:nowrap}
.service-item h3{font-variant-ligatures:none}
@media(prefers-reduced-motion:reduce){.service-title-line{transition:none}}

/* v25: unified pill CTAs and matching video black */
.contact-section,.contact-video-placeholder,.contact-decorative-video{background-color:#000!important}
.all-works-link{
 border-radius:9999px!important;
 background:transparent;
 min-height:94px;
 transition:background-color .25s ease,color .25s ease;
}
.contact-intro a{
 display:flex;align-items:center;justify-content:center;gap:22px;
 width:100%;min-height:74px;padding:15px 25px;
 border:1px solid #fff;border-radius:9999px;
 font-size:16px;font-weight:600;text-decoration:none;
 background:transparent;color:#fff;
 transition:background-color .25s ease,color .25s ease;
}
.contact-intro a:hover,.contact-intro a:focus-visible{background:#fff;color:#000}
.contact-intro a span{font-size:22px}
.contact-footer a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:600px){
 .all-works-link{min-height:72px}
 .contact-intro a{min-height:64px}
}

/* v26 — featured project: monochrome until desktop hover */
.project-card--featured{isolation:isolate}
.project-card--featured .project-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.project-card--featured::after{content:"";position:absolute;inset:25% 0 0;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.14) 30%,rgba(0,0,0,.83) 100%);z-index:1;pointer-events:none}
.project-card--featured .project-number{z-index:2;top:28px;left:32px;font-size:clamp(16px,1.6vw,27px);font-weight:550}
.project-details{position:absolute;left:4.5%;right:4%;bottom:9%;z-index:2;color:white}
.project-details h3{font-size:clamp(23px,3vw,60px);font-weight:600;letter-spacing:-.055em;line-height:1.05;margin:0 0 22px}
.project-tags{display:flex;flex-wrap:wrap;gap:5px}
.project-tags span{background:#fff;color:#050505;border-radius:999px;padding:9px 18px;font-size:clamp(10px,1vw,17px);letter-spacing:-.04em}
@media(hover:hover) and (pointer:fine){.project-card--featured:hover .project-image{filter:grayscale(0);transform:scale(1.035)}}
.all-works-link span{display:inline-block;transition:transform .3s ease}
.all-works-link:hover span,.all-works-link:focus-visible span{transform:rotate(45deg)}

@keyframes scroll-cue-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.2);opacity:1}50%{box-shadow:0 0 0 7px rgba(0,0,0,0);opacity:.65}}
@media(max-width:760px){.project-details{left:6%;right:6%;bottom:8%}.project-details h3{font-size:clamp(23px,5vw,38px);margin-bottom:12px}.project-tags span{padding:6px 11px;font-size:11px}.project-card--featured .project-number{left:6%;top:6%}}
@media(prefers-reduced-motion:reduce){.project-card--featured .project-image{transition:none}}

/* v27 — larger name and outlined scroll indicator with concentric ripple */
.header .identity{font-size:15px;letter-spacing:-.035em}
.work-intro-left h2{display:flex;align-items:center;gap:9px}
.work-intro-left h2 .scroll-arrow-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;flex:none;border:1px solid #000;border-radius:50%;background:transparent!important;color:#000!important;animation:none!important;overflow:visible;isolation:isolate}
.scroll-arrow-icon svg{width:29px;height:29px;display:block}
.work-intro-left h2 .scroll-arrow-icon::before,.work-intro-left h2 .scroll-arrow-icon::after{content:"";position:absolute;inset:-1px;border:1px solid #aaa;border-radius:50%;pointer-events:none;animation:scroll-ripple 2.6s ease-out infinite;z-index:-1}
.work-intro-left h2 .scroll-arrow-icon::after{animation-delay:1.3s}
@keyframes scroll-ripple{0%{transform:scale(1);opacity:.65}85%,100%{transform:scale(2.3);opacity:0}}
@media(max-width:760px){.header .identity{font-size:15px}.work-intro-left h2 .scroll-arrow-icon{width:34px;height:34px}.scroll-arrow-icon svg{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){.work-intro-left h2 .scroll-arrow-icon::before,.work-intro-left h2 .scroll-arrow-icon::after{animation:none;opacity:0}}

/* v28 — exact user SVG arrow and soft 4%-opacity concentric rings */
.work-intro-left h2 .scroll-arrow-icon{width:39px;height:39px;border:1px solid #000;background:transparent!important;overflow:visible;isolation:auto}
.work-intro-left h2 .scroll-arrow-icon .scroll-arrow-art{width:26px;height:26px;display:block;object-fit:contain}
.work-intro-left h2 .scroll-arrow-icon::before,.work-intro-left h2 .scroll-arrow-icon::after{inset:-1px;border:1px solid rgba(0,0,0,.04);opacity:1;z-index:auto;animation:soft-ring 3s ease-out infinite}
.work-intro-left h2 .scroll-arrow-icon::after{animation-delay:1.5s}
@keyframes soft-ring{0%{transform:scale(1);opacity:1}100%{transform:scale(2.35);opacity:0}}
@media(max-width:760px){.work-intro-left h2 .scroll-arrow-icon{width:34px;height:34px}.work-intro-left h2 .scroll-arrow-icon .scroll-arrow-art{width:23px;height:23px}}
@media(prefers-reduced-motion:reduce){.work-intro-left h2 .scroll-arrow-icon::before,.work-intro-left h2 .scroll-arrow-icon::after{animation:none;opacity:.5;transform:scale(1.4)}}

/* v29: use the entire supplied 55x55 SVG without CSS-drawn circles. */
.work-intro-left h2 .scroll-arrow-icon{width:55px!important;height:55px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;animation:none!important;overflow:visible!important}
.work-intro-left h2 .scroll-arrow-icon::before,.work-intro-left h2 .scroll-arrow-icon::after{content:none!important;display:none!important;animation:none!important}
.work-intro-left h2 .scroll-arrow-icon .scroll-arrow-art{width:55px!important;height:55px!important;max-width:none!important;object-fit:contain;animation:exact-arrow-breathe 2.8s ease-in-out infinite}
@keyframes exact-arrow-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.78;transform:scale(1.045)}}
@media(max-width:760px){.work-intro-left h2 .scroll-arrow-icon{width:55px!important;height:55px!important}}
@media(prefers-reduced-motion:reduce){.work-intro-left h2 .scroll-arrow-icon .scroll-arrow-art{animation:none!important}}

/* v30: remove the square frame around the supplied SVG indicator. */
.work-intro-left h2 > .scroll-arrow-icon,
.work-intro-left h2 > .scroll-arrow-icon .scroll-arrow-art{
 border:none!important;outline:none!important;box-shadow:none!important;
 background:transparent!important;
}
.work-intro-left h2 > .scroll-arrow-icon{padding:0!important}

/* v31: eliminate inherited square border from the first span selector. */
.work-intro-left h2 > span.scroll-arrow-icon:first-child{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important}

/* v32 — clean portfolio previews without project numbers */
.project-card .project-number{display:none!important}
.project-card--narrow.project-card--featured .project-details h3{font-size:clamp(23px,2.1vw,39px)}
.project-card--narrow.project-card--featured .project-tags span{padding:7px 11px;font-size:clamp(10px,.75vw,14px)}

/* v33: unified project title and tag scale across every preview. */
.project-card .project-details{left:6%;right:6%;bottom:8%}
.project-card .project-details h3,
.project-card--narrow.project-card--featured .project-details h3{
 font-family:Inter,sans-serif;font-size:clamp(22px,2.05vw,36px);font-weight:600;
 letter-spacing:-.055em;line-height:1.08;margin:0 0 15px;
}
.project-card .project-tags{gap:5px}
.project-card .project-tags span,
.project-card--narrow.project-card--featured .project-tags span{
 font-family:Inter,sans-serif;font-size:clamp(10px,.78vw,13px);font-weight:400;
 line-height:1.1;letter-spacing:-.035em;padding:8px 12px;
 border-radius:999px;white-space:nowrap;
}
.project-card--placeholder{background:#252525}
.project-card--placeholder::after{background:linear-gradient(to bottom,transparent,rgba(0,0,0,.35))}
@media(max-width:760px){
 .project-card .project-details h3,.project-card--narrow.project-card--featured .project-details h3{font-size:24px}
 .project-card .project-tags span,.project-card--narrow.project-card--featured .project-tags span{font-size:11px;padding:7px 11px}
}

/* v35: matching arrow motion for the contact CTA */
.contact-intro a span{display:inline-block;transform-origin:center;transition:transform .3s ease}
.contact-intro a:hover span,.contact-intro a:focus-visible span{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.contact-intro a span{transition:none}}

/* v36: four supplied temporary previews; all six cards share the same grayscale-to-color behavior. */

/* v37: transparent outlined badges on all portfolio previews */
.project-card .project-tags span,
.project-card--narrow.project-card--featured .project-tags span {
  background: transparent;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  box-sizing: border-box;
}

/* v38: compact testimonial carousel */
.testimonials-section{padding:45px 0 90px;overflow:hidden}
.testimonials-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #c5c5c5;padding-bottom:22px}
.testimonials-caption{font-size:11px;color:#888;letter-spacing:.06em}
.testimonials-viewport{overflow:hidden;touch-action:pan-y;outline-offset:5px}
.testimonials-track{display:flex;gap:14px;transition:transform .55s cubic-bezier(.22,.7,.2,1);will-change:transform;padding:22px 0}
.testimonial-card{box-sizing:border-box;flex:0 0 calc((100% - 42px)/4);min-width:0;border:1px solid #c5c5c5;min-height:275px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.testimonial-placeholder{font-size:clamp(18px,1.7vw,28px);font-weight:500;line-height:1.12;letter-spacing:-.055em;margin:0;color:#777}
.testimonial-person{border-top:1px solid #ddd;padding-top:17px;display:flex;align-items:center;gap:10px}
.testimonial-avatar{flex:0 0 43px;height:43px;border-radius:50%;background:#e8e8e8;border:1px solid #ccc}
.testimonial-info{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.testimonial-info strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testimonial-info span{font-size:10px;color:#777}
.testimonial-company-logo{font-size:9px;color:#999;border:1px solid #ddd;padding:9px 5px}
.testimonials-controls{display:flex;align-items:center;gap:14px;padding-top:10px}
.testimonials-progress{display:flex;flex:1;gap:4px}
.testimonials-progress button{flex:1;height:18px;padding:0;background:none;border:0;cursor:pointer;display:flex;align-items:center}
.testimonials-progress button::before{content:"";width:100%;height:2px;background:#d5d5d5;display:block}
.testimonials-progress button[aria-current="true"]::before{background:#080808;height:3px}
.testimonials-count{font-size:11px;color:#777;white-space:nowrap}
.testimonials-prev,.testimonials-next{width:36px;height:36px;border:1px solid #bbb;border-radius:50%;background:transparent;color:#111;cursor:pointer;font-size:20px;transition:background .2s,color .2s}
.testimonials-prev:hover,.testimonials-next:hover{background:#111;color:#fff}
@media(max-width:900px){.testimonial-card{flex-basis:calc((100% - 14px)/2)}}
@media(max-width:600px){.testimonials-section{padding:36px 0 65px}.testimonial-card{flex-basis:82%;min-height:255px}.testimonials-caption{font-size:9px}.testimonials-track{gap:12px}}
@media(prefers-reduced-motion:reduce){.testimonials-track{transition:none}}

/* v39 — About metrics align with full section width, not centered copy */
.about-detail>.about-stats{width:100%;max-width:none;margin:70px 0 0;box-sizing:border-box}
@media(max-width:850px){.about-detail>.about-stats{margin-top:45px}}
@media(max-width:600px){.about-detail>.about-stats{margin-top:28px}}

/* v40: mobile section order, scaled portfolio labels, unboxed testimonials, supplied arrows */
@media(max-width:760px){
 .work-intro>.portrait-scroll{order:1}
 .work-intro>.work-intro-right{order:2;padding:30px 0 30px}
 .work-intro>.work-intro-left{order:3;min-height:340px;padding-top:20px}
 .work-intro-left h2{margin-top:65px}
 .project-card .project-details h3,.project-card--narrow.project-card--featured .project-details h3{font-size:19.2px!important}
 .project-card .project-tags span,.project-card--narrow.project-card--featured .project-tags span{font-size:5.5px!important;padding:3.5px 5.5px!important;border-width:1px!important}
 .project-card .project-tags{gap:3px}
 .testimonial-placeholder{font-size:19.2px!important;font-weight:600;color:#050505;letter-spacing:-.055em}
}
.testimonial-card{border:0!important;padding:22px 10px 22px 0!important}
.testimonials-prev,.testimonials-next{border:0!important;background:transparent url('Arrow2.svg') center / 36px 36px no-repeat!important;border-radius:0!important;font-size:0!important;width:36px;height:36px;transition:transform .2s ease!important}
.testimonials-prev{transform:rotate(180deg)}
.testimonials-prev:hover{transform:rotate(180deg) scale(1.08)}
.testimonials-next:hover{transform:scale(1.08)}

/* v42: consistent minimalist 1px circular SVG arrows */
.work-intro-left h2 .scroll-arrow-icon .scroll-arrow-art{width:55px!important;height:55px!important;object-fit:contain;animation:exact-arrow-breathe 2.8s ease-in-out infinite!important}
.testimonials-prev,.testimonials-next{background-color:transparent!important;background-position:center!important;background-size:36px 36px!important;background-repeat:no-repeat!important;border:0!important;border-radius:0!important;font-size:0!important;width:36px!important;height:36px!important;transform:none!important;transition:scale .2s ease!important}
.testimonials-prev{background-image:url('arrow-left.svg')!important}
.testimonials-next{background-image:url('arrow-right.svg')!important}
.testimonials-prev:hover,.testimonials-next:hover{background-color:transparent!important;color:inherit!important;transform:none!important;scale:1.08}
@media(prefers-reduced-motion:reduce){.work-intro-left h2 .scroll-arrow-icon .scroll-arrow-art{animation:none!important}}

/* v48 — additional two rows of selected works, awaiting real artwork */
.projects-grid .new-work-placeholder{position:relative;background:#e7e7e7;overflow:hidden}
.projects-grid .new-work-placeholder::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,#efefef,#d0d0d0);pointer-events:none}
.projects-grid .new-work-placeholder-label{position:absolute;top:22px;left:24px;font-size:11px;letter-spacing:.08em;color:#777;z-index:1}
.projects-grid .new-work-placeholder .project-details{z-index:2}
@media(max-width:600px){.projects-grid .new-work-placeholder-label{top:15px;left:16px;font-size:9px}}

/* v49: WORK section rule and label follow the portrait and intro, never overlay the portrait */
.work-section-marker{border-top:1px solid #c9c9c9;padding-top:24px;min-height:50px;box-sizing:border-box}
.work-section-marker .section-label{display:block}
@media(max-width:760px){.work-section-marker{padding-top:18px;min-height:42px}}

/* v50 — subtle custom cursor, desktop pointer devices only */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.has-custom-cursor, html.has-custom-cursor body,
  html.has-custom-cursor a, html.has-custom-cursor button,
  html.has-custom-cursor [role="button"], html.has-custom-cursor input,
  html.has-custom-cursor textarea, html.has-custom-cursor select {cursor:none!important}
  .custom-cursor,.cursor-echo {position:fixed;left:0;top:0;pointer-events:none;z-index:2147483647;border-radius:50%;transform:translate3d(-100px,-100px,0);will-change:transform}
  .custom-cursor{width:37px;height:37px;background:url('cursor.svg') center/contain no-repeat;transition:opacity .18s ease;}
  .custom-cursor.is-hovering{filter:invert(1);mix-blend-mode:difference}
  .cursor-echo{width:37px;height:37px;border:1px solid rgba(100,100,100,.15);opacity:0;}
  .custom-cursor.is-hidden{opacity:0}
}

/* v51: contrast-adaptive SVG cursor and a genuine fading movement trail */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .custom-cursor{background-image:url('cursor-invert.svg')!important;mix-blend-mode:difference!important;filter:none!important}
 .custom-cursor.is-hovering{filter:none!important;mix-blend-mode:difference!important}
 .cursor-echo{border:1px solid #fff!important;background:transparent!important;mix-blend-mode:difference!important;opacity:0;transition:none!important}
}

/* v52: subtle inertial center dot, constrained inside the outlined ring */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .custom-cursor{background:none!important;border:1px solid #fff;box-sizing:border-box;mix-blend-mode:difference!important;}
 .custom-cursor-core{position:absolute;left:calc(50% - 5.5px);top:calc(50% - 5.5px);width:11px;height:11px;border-radius:50%;background:#fff;will-change:transform;pointer-events:none;}
}

/* v58: half-sized inertial cursor dot */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .custom-cursor-core{width:5.5px;height:5.5px;left:calc(50% - 2.75px);top:calc(50% - 2.75px)}
}

/* v59: supplied Telegram artwork inside existing header icon dimensions */
.telegram-icon img{display:block;width:100%;height:100%;object-fit:contain;}
/* v59: supplied cross replaces dot; existing inertial movement and ring retained */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .custom-cursor-core{width:32px;height:32px;left:calc(50% - 16px);top:calc(50% - 16px);border-radius:0;background:#fff!important;mask:url('Cursor_new.svg') center/contain no-repeat;-webkit-mask:url('Cursor_new.svg') center/contain no-repeat;}
}

/* v60: render the cursor cross as a real SVG background, not a CSS mask. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .custom-cursor-core{background:transparent url('cursor-cross-white.svg') center / 32px 32px no-repeat!important;mask:none!important;-webkit-mask:none!important;border-radius:0!important;}
}

/* v61: 25% smaller cross footprint, unchanged 1px stroke */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .custom-cursor-core{width:24px;height:24px;left:calc(50% - 12px);top:calc(50% - 12px);background-size:24px 24px!important;}
}

/* v62 (from v61): original Telegram artwork and correct hover inversion. */
.header-cta .telegram-icon,
.header-cta:hover .telegram-icon,
.header-cta:focus-visible .telegram-icon {
  width:19px;height:19px;background:transparent!important;color:inherit!important;
  transform:none!important;overflow:visible;flex:none;
}
.header-cta .telegram-icon img{width:100%;height:100%;display:block;object-fit:contain;transform:none!important;}
/* Retain the exact icon dimensions; switch the supplied SVG on hover/focus. */
.header-cta:hover .telegram-icon img,
.header-cta:focus-visible .telegram-icon img {content:url('TG_white.svg');}
/* Allow longer service names without affecting the falling-pill animation. */
.work-intro .tags{width:100%;max-width:340px;}
.work-intro .tags > span{white-space:nowrap;}
.work-intro .tags > span:nth-child(1){left:0;top:6px;}
.work-intro .tags > span:nth-child(2){left:95px;top:0;}
.work-intro .tags > span:nth-child(3){left:0;top:36px;}
.work-intro .tags > span:nth-child(4){left:150px;top:28px;}
.work-intro .tags > span:nth-child(5){left:60px;top:68px;}
.work-intro .tags > span:nth-child(6){left:225px;top:73px;}
@media(max-width:760px){
 .work-intro .tags{max-width:290px;}
 .work-intro .tags > span:nth-child(4){left:135px;}
 .work-intro .tags > span:nth-child(5){left:40px;}
 .work-intro .tags > span:nth-child(6){left:180px;}
}

/* v64: Restore original falling-pill positions, keep portrait and copy in separate grid tracks. */
@media (min-width:761px){
 .work-intro{grid-template-columns:minmax(0,30%) minmax(0,35%) minmax(0,35%);column-gap:0;}
 .work-intro-left,.work-intro-right,.portrait-scroll{min-width:0;box-sizing:border-box;}
 .work-intro-right{padding-left:clamp(14px,2vw,34px);padding-right:clamp(10px,1.5vw,24px);overflow:hidden;}
 .work-intro-right p{max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:normal;font-size:clamp(11px,1.2vw,17px);}
 .work-intro-left h2{margin-top:48px;}
 .work-intro-left .tags{width:340px;max-width:100%;height:160px;bottom:18px;left:0;}
}
@media (min-width:761px) and (max-width:1050px){
 .work-intro-right p{font-size:clamp(10px,1.18vw,13px);letter-spacing:-.025em;}
 .work-intro-left h2{margin-top:24px;}
}
/* Testimonials: six cards, quiet body-sized copy and a fixed-size logo stage. */
.testimonial-card{min-height:360px!important;padding:25px 18px 28px 0!important}
.testimonial-placeholder{font-size:11px!important;line-height:1.55!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;color:#080808!important;max-width:100%;margin:0 0 34px}
.testimonial-person{gap:12px;align-items:center;padding-top:18px}
.testimonial-avatar{width:44px;height:44px;flex:0 0 44px}
.testimonial-company-logo{flex:0 0 88px;width:88px;height:48px;display:grid;place-items:center;background:#e1e1e1;border:0;padding:8px;overflow:hidden}
.testimonial-company-logo img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:600px){.testimonial-card{min-height:320px!important}}
/* On mobile the decorative contact video occupies its own row above title and CTA. */
@media(max-width:600px){
 .contact-inner{display:flex;flex-direction:column;gap:0;padding-top:24px}
 .contact-inner>.editorial-label{flex:none}
 .contact-video-placeholder{position:relative!important;left:auto!important;top:auto!important;transform:none!important;align-self:center;flex:none;width:min(68vw,260px)!important;aspect-ratio:1/1;margin:25px auto 26px;z-index:1}
 .contact-main{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:24px!important;padding:0 0 34px!important}
 .contact-main h2{font-size:clamp(39px,10vw,64px);margin:0}
 .contact-intro{position:relative;z-index:2}
 .contact-footer{flex:none}
}
/* Footer social names: understated underline on hover, keyboard focus and touch. */
.contact-footer .social-placeholders>span{cursor:pointer;text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px}
.contact-footer .social-placeholders>span:hover,.contact-footer .social-placeholders>span:focus-visible,.contact-footer .social-placeholders>span:active{text-decoration:underline}

/* MVP: keep the portrait as an unobstructed safe zone at every desktop width. */
@media (min-width:761px){
  .work-intro{grid-template-columns:minmax(0,30%) minmax(0,35%) minmax(0,35%);}
  .work-intro-left{container-type:inline-size;min-width:0;}
  .work-intro-left .tags{
    width:440px;max-width:none;
    transform:scale(clamp(.3, 0.13cqw, 1));
    transform-origin:left bottom;
  }
  .work-intro-right{
    min-width:0;
    padding-left:clamp(20px,2.5vw,44px);
    padding-right:clamp(8px,1vw,20px);
  }
  .work-intro-right p{
    width:100%;max-width:100%;
    overflow-wrap:break-word;word-break:normal;
    font-size:clamp(12px,1.15vw,17px);
  }
  .portrait-scroll{min-width:0;isolation:isolate;}
}

/* v66: enforce the actual grid tracks. A portrait min-height plus 1:1 aspect
   ratio previously forced its grid item wider than the 35% center track. */
@media (min-width:761px){
  .work-intro{
    display:grid;
    grid-template-columns:minmax(0,30fr) minmax(0,35fr) minmax(0,35fr);
    align-items:stretch;
  }
  .work-intro>.portrait-scroll{
    width:100%;
    min-width:0;
    min-height:0;
    height:auto;
    aspect-ratio:1 / 1;
    align-self:start;
    overflow:hidden;
  }
  .work-intro>.work-intro-left{
    min-width:0;
    overflow:hidden;
  }
  .work-intro>.work-intro-right{
    min-width:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }
  .work-intro>.work-intro-right p{
    position:relative;
    width:100%;
    max-width:100%;
    margin:0;
    overflow-wrap:normal;
    word-break:normal;
  }
  .work-intro-left .tags{
    width:440px;
    max-width:none;
    transform:scale(.68);
    transform-origin:left bottom;
  }
}
@media (min-width:1200px){
  .work-intro-left .tags{transform:scale(.82);}
}
@media (min-width:1550px){
  .work-intro-left .tags{transform:scale(1);}
}
@media (min-width:761px) and (max-width:950px){
  .work-intro-left .tags{transform:scale(.49);}
  .work-intro-left h2{font-size:clamp(11px,1.5vw,16px);}
  .work-intro-left h2 .scroll-arrow-icon{flex-shrink:0;}
}

/* v67: restrained hover separation and more legible ambient signals. */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .work-intro .tags.is-visible > span,
  .work-intro.is-visible .tags > span{
    transition:transform 950ms cubic-bezier(.2,1.13,.26,1),opacity 210ms ease;
    transition-delay:var(--tag-delay,0ms);
  }
  .work-intro.is-visible .tags:hover > span{
    transition:transform 520ms cubic-bezier(.2,.8,.2,1),opacity 210ms ease;
    transition-delay:0ms;
    transform:translate3d(var(--hover-x,0px),var(--hover-y,0px),0) rotate(var(--tag-angle,-10deg)) scale(1);
  }
  .work-intro .tags > span:nth-child(1){--hover-x:-16px;--hover-y:-15px}
  .work-intro .tags > span:nth-child(2){--hover-x:5px;--hover-y:-23px}
  .work-intro .tags > span:nth-child(3){--hover-x:-22px;--hover-y:5px}
  .work-intro .tags > span:nth-child(4){--hover-x:19px;--hover-y:-8px}
  .work-intro .tags > span:nth-child(5){--hover-x:-8px;--hover-y:21px}
  .work-intro .tags > span:nth-child(6){--hover-x:24px;--hover-y:20px}
}
/* The ring is baked into the supplied SVG: breathe the SVG itself. */
@keyframes exact-arrow-breathe-wide{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.78;transform:scale(1.09)}
}
.work-intro-left h2 .scroll-arrow-icon .scroll-arrow-art{
  animation:exact-arrow-breathe-wide 2.8s ease-in-out infinite!important;
}
@keyframes status-breathe-strong{
  0%,100%{filter:brightness(.55);box-shadow:0 2px 5px rgba(90,160,45,.18)}
  50%{filter:brightness(1.55);box-shadow:0 2px 18px rgba(122,224,50,.75),0 0 12px rgba(122,224,50,.45)}
}
.status-light{animation:status-breathe-strong 3.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .work-intro-left h2 .scroll-arrow-icon .scroll-arrow-art,
  .status-light{animation:none!important}
  .work-intro.is-visible .tags:hover > span{transition:none!important}
}

/* v68: finished drop animation uses fill-mode:both and owns transform.
   Release that animation on hover so the separation transform can run. */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .work-intro.is-visible .tags.is-dropping:hover > span{
    animation:none!important;
    opacity:1!important;
    transform:translate3d(var(--hover-x,0px),var(--hover-y,0px),0) rotate(var(--tag-angle,-10deg)) scale(1)!important;
    transition:transform 520ms cubic-bezier(.2,.8,.2,1)!important;
    transition-delay:0ms!important;
  }
  .work-intro.is-visible .tags.is-dropping:not(:hover) > span{
    transition:transform 520ms cubic-bezier(.2,.8,.2,1);
  }
}
@keyframes status-breathe-balanced{
  0%,100%{filter:brightness(.88);box-shadow:0 2px 8px rgba(90,160,45,.3)}
  50%{filter:brightness(1.35);box-shadow:0 2px 16px rgba(122,224,50,.6),0 0 9px rgba(122,224,50,.3)}
}
.status-light{animation:status-breathe-balanced 3.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.status-light{animation:none!important}}

/* v69: move the pill cluster inward and reserve room for its hover spread.
   Keep clipping at the portrait boundary rather than allowing overlap. */
@media (min-width:761px){
  .work-intro-left .tags{
    left:clamp(14px,1.4vw,22px);
    transform:scale(.48);
    transform-origin:left bottom;
  }
}
@media (min-width:1050px){
  .work-intro-left .tags{transform:scale(.57)}
}
@media (min-width:1200px){
  .work-intro-left .tags{transform:scale(.63)}
}
@media (min-width:1400px){
  .work-intro-left .tags{transform:scale(.74)}
}
@media (min-width:1550px){
  .work-intro-left .tags{transform:scale(.82)}
}
/* Raise the minimum brightness by ten percentage points. */
@keyframes status-breathe-balanced{
  0%,100%{filter:brightness(.98);box-shadow:0 2px 8px rgba(90,160,45,.3)}
  50%{filter:brightness(1.35);box-shadow:0 2px 16px rgba(122,224,50,.6),0 0 9px rgba(122,224,50,.3)}
}

/* v70: the cluster fits its real column width, including hover clearance. */
@media (min-width:761px){
  .work-intro>.work-intro-left{overflow:hidden}
  .work-intro-left .tags{
    left:30px!important;
    width:540px!important;
    max-width:none!important;
    transform:scale(var(--pill-fit-scale,.6))!important;
    transform-origin:left bottom!important;
  }
}

/* v71: after the one-time drop, hover is a reversible transition, not a replay. */
@media (min-width:761px){
  .work-intro.is-visible .tags.is-settled > span,
  .work-intro.is-visible .tags.is-dropping.is-settled > span{
    animation:none!important;
    opacity:1!important;
    transform:translate3d(0,0,0) rotate(var(--tag-angle,-10deg)) scale(1)!important;
    transition:transform 520ms cubic-bezier(.2,.8,.2,1)!important;
    transition-delay:0ms!important;
  }
  .work-intro.is-visible .tags.is-settled:hover > span,
  .work-intro.is-visible .tags.is-dropping.is-settled:hover > span{
    transform:translate3d(var(--hover-x,0px),var(--hover-y,0px),0) rotate(var(--tag-angle,-10deg)) scale(1)!important;
  }
}

/* MVP projects: show original preview colors at all times. */
.project-card--featured .project-image{filter:none!important}
@media(hover:hover) and (pointer:fine){.project-card--featured:hover .project-image{filter:none!important}}